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

/* Shared building blocks for pages. Colors are the theme's semantic tokens. */
@layer components {
  .card {
    @apply rounded-xl border border-line bg-surface p-5 shadow-sm;
  }

  .btn {
    @apply m-0 inline-flex items-center justify-center gap-2 rounded-md border px-4 py-2 text-sm font-semibold no-underline transition-colors;
  }

  .btn-primary {
    @apply border-accent-strong bg-accent text-accent-ink hover:border-accent-strong hover:bg-accent-strong hover:text-accent-ink;
  }

  .btn-secondary {
    @apply border-line bg-surface text-ink hover:border-line hover:bg-surface-muted hover:text-ink;
  }

  .btn-quiet {
    @apply border-transparent bg-transparent text-ink-muted hover:border-transparent hover:bg-surface-muted hover:text-ink;
  }

  .btn-danger {
    @apply border-danger-strong bg-danger text-danger-ink hover:border-danger-strong hover:bg-danger-strong hover:text-danger-ink;
  }

  .badge {
    @apply inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-semibold;
  }

  /* The amp's pilot light, used as the app's "live" signal: lit (glowing) or dark. --c-jewel is per theme. */
  .jewel {
    @apply inline-block h-3 w-3 shrink-0 rounded-full;
    background: radial-gradient(circle at 38% 32%, rgb(255 255 255 / 0.25), rgb(0 0 0 / 0.55) 70%), rgb(var(--c-jewel) / 0.35);
    box-shadow: 0 0 0 2px rgb(var(--c-line));
  }

  .jewel[data-lit] {
    background: radial-gradient(circle at 38% 32%, rgb(255 255 255 / 0.7), transparent 55%), rgb(var(--c-jewel));
    box-shadow: 0 0 0 2px rgb(var(--c-line)), 0 0 12px 2px rgb(var(--c-jewel) / 0.75);
  }

  .jewel-lg {
    @apply h-5 w-5;
  }

  /* A combo amp: carry handle, cabinet (control panel on top, grille below) and feet.
     The .amp-combo class on the cabinet adjusts theme materials to sit inside it (themes.css). */
  .combo-handle {
    @apply mx-auto block h-3 w-24 rounded-t-lg border-4 border-b-0 border-line;
  }

  .combo-cabinet {
    @apply flex flex-col rounded-2xl border-2 border-line bg-page p-2.5 shadow-xl;
  }

  .combo-feet {
    @apply flex justify-between px-8;
  }

  .combo-foot {
    @apply block h-2 w-8 rounded-b-md bg-line;
  }

  /* A small plate on a grille, so text stays readable over the cloth. */
  .grille-plate {
    @apply rounded bg-surface px-2.5 py-1.5 text-ink;
  }

  /* A panel legend: small engraved capitals. */
  .legend {
    @apply text-[0.7rem] font-bold uppercase tracking-[0.18em];
  }

  /* The amp head's main switch: a toggle with a lever that's up (on) when the gathering is live. */
  .amp-toggle {
    @apply m-0 inline-flex items-center gap-3 rounded-md border-0 bg-transparent px-2 py-1 font-bold uppercase tracking-[0.18em] text-sm text-ink no-underline shadow-none hover:bg-transparent hover:text-ink;
  }

  .amp-toggle-switch {
    @apply relative block h-10 w-6 rounded-md bg-black/60;
    box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.7), 0 0 0 2px rgb(var(--c-line));
  }

  .amp-toggle-lever {
    @apply absolute left-1/2 h-5 w-2.5 -translate-x-1/2 rounded-sm;
    bottom: 3px;
    background: linear-gradient(90deg, #8e959c, #f5f7f9, #8e959c);
  }

  .amp-toggle[data-on] .amp-toggle-lever {
    bottom: auto;
    top: 3px;
  }

  .amp-toggle:hover .amp-toggle-switch {
    box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.7), 0 0 0 2px rgb(var(--c-ink));
  }

  .date-tile {
    @apply flex h-14 w-14 shrink-0 flex-col items-center justify-center rounded-lg border border-line bg-surface-muted leading-none;
  }

  .date-tile-month {
    @apply text-[0.65rem] font-bold uppercase tracking-widest text-ink-subtle;
  }

  .date-tile-day {
    @apply mt-1 text-xl font-bold text-ink;
  }

  .club-cover {
    @apply block h-full w-full;
  }

  /* No cover image yet: the club's initial on the theme's colors. */
  .club-cover-placeholder {
    @apply flex items-center justify-center bg-surface-muted text-5xl font-bold text-ink-subtle;
    background-image: linear-gradient(135deg, rgb(var(--c-accent) / 0.25), transparent 60%);
  }

  .page-title {
    @apply m-0 text-3xl font-bold;
  }

  .section-title {
    @apply m-0 text-xl font-bold;
  }

  .empty-state {
    @apply rounded-xl border border-dashed border-line p-8 text-center text-ink-subtle;
  }
}

/* The hidden attribute always wins, even over display utilities like flex or grid. */
[hidden] {
  display: none !important;
}

/* Flash messages: toasts in the bottom corner that fade out (flash_messages_controller) and never
   block clicks. (The form error summary is a role="alert" too, but stays in place.) */
ul[role="alert"] {
  @apply pointer-events-none fixed bottom-6 right-6 z-50 m-0 flex max-w-sm list-none flex-col gap-2 p-0;

  li {
    @apply rounded-lg px-4 py-3 text-sm font-medium shadow-lg;

    &.success {
      @apply bg-green-50 text-green-900;
    }

    &.warning {
      @apply bg-yellow-50 text-yellow-900;
    }

    &.failure {
      @apply bg-red-50 text-red-900;
    }
  }
}

section {
  margin: 0.5rem 0;
}

header {
  margin: 1rem 0 0.5rem 0;

  nav {
    @apply flex justify-between;

    ul {
      @apply flex items-center;
    }
  }
}

main {
  @apply container mx-auto;
}

dialog {
  @apply prose;
  @apply w-full sm:w-1/2 lg:w-1/3;
  @apply h-screen flex flex-col;
  padding-top: 2rem;

  header {
    @apply text-center;
  }

  footer {
    @apply py-4 text-center;
  }

  form {
    @apply bg-surface border border-line rounded;
    @apply grid gap-4 p-4;

    fieldset {
      @apply grid gap-4;

      section {
        @apply grid gap-2;

        label {
          @apply font-semibold;
        }

        input[type="text"],
        input[type="email"],
        input[type="password"] {
          @apply rounded;
        }

        small {
          @apply text-xs text-ink-subtle;
        }
      }
    }

    input[type="submit"] {
      @apply border border-b-2 cursor-pointer bg-accent border-accent-strong text-accent-ink rounded;
      @apply hover:bg-accent-strong hover:border-accent-strong;
      @apply px-4 py-2;
    }

    a {
      @apply underline text-link;
      @apply hover:text-link-hover hover:decoration-2;
      @apply px-4 py-2;
    }
  }
}

form.button_to {
  @apply inline-flex max-w-none;
}

dl {
  @apply prose;
}

h1 {
  @apply text-3xl font-bold;
  margin-bottom: 1rem;
}

h2 {
  @apply text-2xl font-bold;
  margin-bottom: 0.5rem;
}

h3 {
  @apply text-xl font-bold;
  margin-bottom: 0.25rem;
}

button {
  @apply border border-b-2 cursor-pointer bg-accent border-accent-strong text-accent-ink rounded;
  @apply hover:bg-accent-strong hover:border-accent-strong;
  @apply px-4 py-2;
  margin: 0.5rem 0;
}

/* Form styling */
form {
  @apply max-w-2xl;

  legend {
    @apply text-2xl font-bold mb-4;
  }

  [role="group"] {
    @apply mb-4;
  }

  label {
    @apply block font-semibold text-ink-muted mb-2;
  }

  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="url"],
  input[type="datetime-local"],
  textarea {
    @apply w-full px-3 py-2 border border-line rounded-md shadow-sm;
    @apply focus:outline-none focus:ring-2 focus:ring-accent focus:border-accent;
  }

  textarea {
    @apply min-h-[100px];
  }

  input[type="submit"] {
    @apply border border-b-2 cursor-pointer bg-accent border-accent-strong text-accent-ink rounded;
    @apply hover:bg-accent-strong hover:border-accent-strong;
    @apply px-4 py-2;
  }

  footer {
    @apply mt-6;
  }
}

/* Breadcrumbs styling */
nav.breadcrumbs {
  @apply bg-surface-muted border-b border-line px-4 py-3;

  ol {
    @apply container mx-auto;
  }

  a {
    @apply text-link hover:text-link-hover hover:underline;
  }
}