@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

@tailwind base;
@tailwind components;
@tailwind utilities;

/*
  Minimal system inspired by DigitalOcean:
  soft surfaces, thin borders, quiet type, blue focus.
  Lumet brand: slate primary + coral accent.
*/
@layer components {
  :root {
    --lumet-ink: #0f172a;
    --lumet-muted: #64748b;
    --lumet-border: #e2e8f0;
    --lumet-surface: #ffffff;
    --lumet-canvas: #f8fafc;
    --lumet-accent: #ff5757;
    --lumet-focus: #2563eb;
  }

  body {
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    font-weight: 400;
    color: var(--lumet-ink);
    background-color: var(--lumet-canvas);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .text-default {
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    @apply text-slate-800;
  }

  .x-cloak, [x-cloak] {
    @apply hidden;
  }

  [x-dev] {
    @apply bg-red-50 border border-red-200 text-red-800;
  }

  .branded::after {
    color: var(--lumet-accent);
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    font-weight: 700;
    content: '.';
    font-size: 1em;
  }

  .bg-pattern {
    background-color: var(--lumet-canvas);
    background-image: radial-gradient(rgba(15, 23, 42, 0.06) 1px, transparent 1px);
    background-size: 1.25rem 1.25rem;
  }

  h1, h2, h3, h4, h5, h6, .font-title {
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    @apply font-semibold tracking-tight text-slate-900 mb-2;
  }

  .title-apendix {
    @apply text-blue-600 text-xs font-medium tracking-wide uppercase;
  }

  h1 { @apply text-4xl; }
  h2 { @apply text-3xl; }
  h3 { @apply text-2xl; }
  h4 { @apply text-xl; }
  h5 { @apply text-lg; }
  h6 { @apply text-base; }

  .list-disc, .list-decimal, .list-check {
    @apply list-inside;

    ::marker {
      @apply text-blue-600;
    }
  }

  hr {
    @apply my-8 border-t border-slate-200 w-full;
  }

  p {
    @apply text-base text-slate-500 leading-relaxed;
  }

  a {
    @apply text-slate-700 hover:text-blue-600 transition-colors duration-150;
  }

  b, strong {
    @apply font-semibold text-slate-900;
  }

  i {
    color: inherit;

    &.bi::before {
      color: inherit;
    }
  }

  label {
    @apply block text-sm text-slate-700 font-medium mb-1.5;
  }

  input[type="checkbox"], input[type="radio"] {
    @apply h-4 w-4 rounded border-slate-300 text-blue-600 shadow-none focus:border-blue-500 focus:ring focus:ring-blue-500/20 focus:ring-offset-0 disabled:cursor-not-allowed disabled:text-slate-400 m-[2px] mr-2;
  }

  input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]),
  textarea,
  select,
  .StripeElement {
    @apply w-full py-2.5 px-3.5 bg-white border border-solid border-slate-200 duration-150 rounded-lg text-slate-800 shadow-none;

    &:focus {
      @apply outline-none ring-2 ring-blue-500/20 border-blue-500;
    }

    &::placeholder {
      @apply text-slate-400;
    }
  }

  input[type="radio"] {
    @apply rounded-full;
  }

  input[type="color"] {
    @apply px-1 py-0.5 h-10;
  }

  input[disabled], textarea[disabled], select[disabled], .StripeElement--disabled {
    @apply bg-slate-50 text-slate-400 cursor-not-allowed;
  }

  .StripeElement--focus {
    @apply ring-2 ring-blue-500/20 border-blue-500;
  }

  .StripeElement--invalid {
    @apply ring-2 ring-red-500/20 border-red-500;
  }

  .StripeElement--complete {
    @apply ring-2 ring-emerald-500/20 border-emerald-500;
  }

  .quote {
    @apply py-0 px-5 border-l-2 border-slate-200 border-r-0 border-y-0;
  }

  .card {
    @apply relative bg-white border border-slate-200 px-6 py-5 rounded-xl shadow-none;

    &.glow {
      @apply border-blue-200 ring-2 ring-blue-500/10;
    }

    &.error, &.danger {
      @apply bg-red-50 border-red-200;
    }

    &.primary {
      @apply bg-slate-50 border-slate-200;
    }

    &.success {
      @apply bg-emerald-50 border-emerald-200;
    }

    &.warning {
      @apply bg-amber-50 border-amber-200;
    }

    &.info {
      @apply bg-blue-50 border-blue-200;
    }

    &.dark {
      @apply bg-slate-900 text-slate-50 border-slate-800;
    }
  }

  .alert {
    @apply flex flex-row justify-between my-4 p-4 text-sm text-blue-800 border border-blue-200 rounded-xl bg-blue-50 w-full;

    &.primary {
      @apply bg-slate-50 border-slate-200 text-slate-800;
    }

    &.info {
      @apply bg-blue-50 border-blue-200 text-blue-800;
    }

    &.success {
      @apply bg-emerald-50 border-emerald-200 text-emerald-800;
    }

    &.warning {
      @apply bg-amber-50 border-amber-200 text-amber-800;
    }

    &.error, &.danger {
      @apply bg-red-50 border-red-200 text-red-800;
    }

    &.dark {
      @apply bg-slate-900 text-slate-50 border-slate-800;
    }

    &.light {
      @apply bg-white text-slate-800 border-slate-200;
    }
  }

  .badge {
    @apply inline-block rounded-md border py-0.5 px-2 text-xs font-medium;

    &.tag {
      @apply absolute top-5 right-6;
    }

    &.sm {
      @apply py-0.5 px-1.5 text-xs;
    }

    &.lg {
      @apply py-1 px-2.5 text-sm;
    }

    &.primary {
      @apply bg-slate-900 text-white border-transparent;
    }

    &.secondary {
      @apply bg-slate-500 text-slate-50 border-transparent;
    }

    &.light {
      @apply bg-slate-100 text-slate-700 border-transparent;
    }

    &.info {
      @apply bg-blue-50 text-blue-700 border-transparent;
    }

    &.success {
      @apply bg-emerald-50 text-emerald-700 border-transparent;
    }

    &.warning {
      @apply bg-amber-50 text-amber-700 border-transparent;
    }

    &.danger, &.error {
      @apply bg-red-50 text-red-700 border-transparent;
    }

    &.stripe {
      @apply bg-[#eceaff] text-[#675dff] border-transparent;
    }
  }

  [type="submit"] { @apply cursor-pointer; }

  .button {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    width: fit-content;
    max-width: 100%;
    flex-shrink: 0;
    @apply px-4 py-2 text-sm font-medium transition-all duration-150 rounded-lg cursor-pointer border border-transparent shadow-none;

    &.xs {
      @apply px-2 py-1 text-xs rounded-md;
    }

    &.sm {
      @apply px-3 py-1.5 text-sm rounded-lg;
    }

    &.lg {
      @apply px-5 py-2.5 text-base;
    }

    &.xl {
      @apply px-6 py-3 text-lg;
    }

    &.primary {
      @apply bg-blue-600 text-white hover:bg-blue-700;

      &.outlined {
        @apply bg-transparent text-blue-600 border-blue-600 hover:bg-blue-50;
      }
    }

    &.secondary {
      @apply bg-slate-100 text-slate-700 hover:bg-slate-200;

      &.outlined {
        @apply bg-transparent text-slate-700 border-slate-200 hover:bg-slate-50;
      }
    }

    &.light {
      @apply bg-white text-slate-700 border-slate-200 hover:bg-slate-50 hover:border-slate-300;

      &.outlined {
        @apply bg-transparent text-slate-700 border-slate-200 hover:bg-slate-50;
      }
    }

    &.dark {
      @apply bg-slate-900 text-white hover:bg-slate-800;

      &.outlined {
        @apply bg-transparent text-slate-900 border-slate-900 hover:bg-slate-900 hover:text-white;
      }
    }

    &.link {
      @apply bg-transparent text-slate-700 hover:bg-slate-100 border-transparent;

      &.bordered {
        @apply border border-slate-200;
      }
    }

    &.danger, &.error {
      @apply bg-red-500 text-white hover:bg-red-600;

      &.outlined {
        @apply bg-transparent text-red-500 border-red-500 hover:bg-red-50;
      }
    }

    &.success {
      @apply bg-emerald-500 text-white hover:bg-emerald-600;

      &.outlined {
        @apply bg-transparent text-emerald-500 border-emerald-500 hover:bg-emerald-50;
      }
    }

    &.warning {
      @apply bg-amber-500 text-white hover:bg-amber-600;

      &.outlined {
        @apply bg-transparent text-amber-500 border-amber-500 hover:bg-amber-50;
      }
    }

    &.info {
      @apply bg-blue-500 text-white hover:bg-blue-600;

      &.outlined {
        @apply bg-transparent text-blue-500 border-blue-500 hover:bg-blue-50;
      }
    }

    &[disabled] {
      @apply opacity-50 cursor-not-allowed;
    }
  }

  .divider { @apply border-t border-r border-slate-200; }
  .divider-horizontal { @apply border-t border-slate-200 mx-0 my-8 w-auto; }
  .divider-vertical { @apply border-r border-slate-200 mx-8 my-0 h-auto; }

  table {
    thead {
      th {
        @apply px-4 py-3 font-medium text-slate-500 text-xs uppercase tracking-wide;
      }

      @apply bg-slate-50 border-b border-slate-200;
    }

    tbody {
      td {
        @apply px-4 py-3 align-middle;
      }

      tr {
        @apply border-t border-slate-100;
      }

      @apply bg-white;
    }

    @apply w-full border-collapse text-left text-sm text-slate-600;
  }

  form {
    @apply flex flex-col gap-3;
  }

  .field {
    i, em {
      @apply text-sm text-slate-500;
    }

    @apply mb-0;
  }

  .fields-row {
    @apply flex flex-col md:flex-row gap-0 md:gap-6;

    .field {
      @apply w-full;
    }
  }

  .actions {
    @apply flex items-center justify-end gap-3;
  }

  body:has(.override-overflow) {
    @apply overflow-hidden;
  }

  div.avatar {
    @apply bg-slate-900 text-white p-4 text-lg flex justify-center items-center leading-[0px] rounded-lg w-8 h-8;

    &.sm { @apply h-6 w-6 text-base p-2; }
    &.lg { @apply h-12 w-12 text-2xl; }
    &.xl { @apply h-16 w-16 text-3xl; }
    &.xxl { @apply h-20 w-20 text-4xl; }
    &.xxxl { @apply h-24 w-24 text-5xl; }
    &.xxxxl { @apply h-32 w-32 text-6xl; }
  }

  img.avatar {
    @apply h-8 w-8 rounded-lg object-cover object-center;
  }

  i.avatar {
    @apply h-8 w-8 rounded-lg flex items-center justify-center bg-slate-900 text-white;
  }

  .avatar {
    &.sm { @apply h-6 w-6 text-sm; }
    &.lg { @apply h-12 w-12 text-lg; }
    &.xl { @apply h-16 w-16 text-xl; }
    &.xxl { @apply h-20 w-20 text-2xl; }
    &.xxxl { @apply h-24 w-24 text-3xl; }
    &.xxxxl { @apply h-32 w-32 text-4xl; }

    &.light { @apply bg-slate-100 text-slate-800; }
    &.dark, &.primary { @apply bg-slate-900 text-slate-50; }
    &.accent { @apply bg-blue-50 text-blue-700; }
  }

  .mask {
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
  }

  .mask-squircle {
    -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMjAwJyBoZWlnaHQ9JzIwMCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBkPSdNMTAwIDBDMjAgMCAwIDIwIDAgMTAwczIwIDEwMCAxMDAgMTAwIDEwMC0yMCAxMDAtMTAwUzE4MCAwIDEwMCAwWicvPjwvc3ZnPg==);
    mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMjAwJyBoZWlnaHQ9JzIwMCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBkPSdNMTAwIDBDMjAgMCAwIDIwIDAgMTAwczIwIDEwMCAxMDAgMTAwIDEwMC0yMCAxMDAtMTAwUzE4MCAwIDEwMCAwWicvPjwvc3ZnPg==);
  }

  [x-data=dropdown] {
    @apply relative;
  }

  [x-bind=dropdownMenu] {
    @apply absolute mt-1.5 !p-0 z-30 w-max bg-white rounded-xl border border-slate-200 overflow-hidden shadow-lg shadow-slate-900/5;

    &.right {
      @apply origin-top-right right-0 justify-end;
    }

    &.left {
      @apply origin-top-left left-0 justify-start;
    }

    &.wide {
      .menu-item {
        @apply min-w-[12rem];
      }
    }

    .menu-item {
      justify-content: inherit;

      @apply flex flex-row items-center gap-2 px-4 py-2.5 text-sm font-medium transition-colors duration-150 cursor-pointer w-full text-left text-slate-700 hover:bg-slate-50 hover:text-slate-900 bg-white border-none shadow-none overflow-hidden;

      &.wide {
        @apply justify-start min-w-[8rem];
      }
    }
  }

  [x-data="modal"] {
    .actions {
      display: none;
    }
  }

  /* Dashboard: quiet list surfaces */
  #current_song {
    h3 {
      @apply text-xl font-semibold text-slate-900 tracking-tight;
    }

    img {
      aspect-ratio: 16 / 9;
      @apply h-32 rounded-lg;
    }
  }

  #author {
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: -0.02em;

    p {
      color: inherit;
    }
  }

  #live {
    p {
      * {
        color: inherit;
      }

      font-size: inherit;
    }

    iframe {
      @apply w-full h-full fixed top-0 left-0;
    }
  }

  #preview, .video {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 0.75rem;
    border: 1px solid var(--lumet-border);
    background: #000;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  }

  /* Live verse / on-air indicators — hard-coded so link/p inheritance can't wash them out.
     Use inset box-shadow (not border-left): Tailwind divide-y sets border-color on
     siblings 2+, which made the accent border invisible on every verse except the first. */
  .verse-live {
    background-color: #fff1f2;
    box-shadow: inset 4px 0 0 var(--lumet-accent);
  }

  .verse-live p,
  .verse-live p * {
    color: #0f172a !important;
  }

  .live-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background-color: var(--lumet-accent);
    box-shadow: 0 0 0 3px rgba(255, 87, 87, 0.2);
    animation: lumet-pulse 1.6s ease-in-out infinite;
  }

  @keyframes lumet-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.55; transform: scale(0.92); }
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */