@import "tailwindcss";
@import "@fortawesome/fontawesome-free/css/fontawesome.min.css";
@import "@fortawesome/fontawesome-free/css/solid.min.css";

@theme {
  --font-sans: "Source Sans 3", ui-sans-serif, system-ui, sans-serif;
  --font-display: Fraunces, Georgia, "Times New Roman", serif;

  --color-ink: #1a1d23;
  --color-muted: rgba(26, 29, 35, 0.62);
  --color-border: rgba(26, 29, 35, 0.12);
  --color-surface: #ffffff;
  --color-surface-muted: #f3f4f6;
  --color-accent: #3d5a80;
  --color-accent-foreground: #ffffff;
  --color-sidebar: #1a1d23;
  --color-sidebar-muted: rgba(255, 255, 255, 0.55);
  --color-sidebar-hover: rgba(255, 255, 255, 0.08);
  --color-sidebar-active: rgba(255, 255, 255, 0.12);

  --color-seat-free: #bae6fd;
  --color-seat-held: #fde68a;
  --color-seat-confirmed: #bbf7d0;
}

@layer base {
  html {
    font-size: 100%;
  }

  body {
    @apply bg-surface-muted text-ink font-sans text-base leading-normal antialiased;
  }

  h1 {
    @apply font-sans text-2xl font-semibold leading-tight tracking-tight text-ink;
  }

  h2 {
    @apply font-sans text-xl font-semibold leading-snug text-ink;
  }

  h3 {
    @apply font-sans text-lg font-semibold leading-snug text-ink;
  }
}

@layer components {
  .btn {
    @apply inline-flex min-h-10 items-center justify-center gap-2 rounded-sm border border-border bg-surface px-4 py-2 text-sm font-semibold text-ink transition hover:bg-surface-muted;
  }

  .btn-primary {
    @apply border-transparent bg-accent text-accent-foreground hover:opacity-95 hover:bg-accent;
  }

  .btn-danger {
    @apply border-transparent bg-rose-700 text-white hover:bg-rose-700;
  }

  .btn-ghost {
    @apply border-transparent bg-transparent hover:bg-surface-muted;
  }

  .btn-touch {
    @apply min-h-12 w-full text-base;
  }

  .nav-dropdown {
    @apply absolute right-0 z-50 mt-2 min-w-[16rem] overflow-hidden rounded-sm border border-border bg-surface py-2 shadow-lg;
  }

  .nav-dropdown__section {
    @apply border-b border-border px-2 py-2;
  }

  .nav-dropdown__section--footer {
    @apply border-b-0;
  }

  .nav-dropdown__label {
    @apply px-3 pb-1 pt-1 text-xs font-semibold uppercase tracking-wide text-muted;
  }

  .nav-dropdown__item {
    @apply block rounded-sm px-3 py-2 text-sm font-medium text-ink no-underline transition hover:bg-surface-muted;
  }

  .nav-dropdown__item--active {
    @apply bg-surface-muted font-semibold;
  }

  .nav-dropdown__item--danger {
    @apply text-rose-800 hover:bg-rose-50;
  }

  .nav-dropdown__section--footer form {
    @apply m-0;
  }

  .card {
    @apply rounded-sm border border-border bg-surface p-5 shadow-sm;
  }

  .form-input {
    @apply w-full min-h-10 rounded-sm border border-border bg-surface px-3 py-2 text-base text-ink focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent;
  }

  .form-label {
    @apply mb-1.5 block text-sm font-semibold text-ink;
  }

  .meta {
    @apply text-sm leading-normal text-muted;
  }

  .stat {
    @apply text-base font-semibold text-ink;
  }

  .flash {
    @apply mb-4 rounded-sm border px-4 py-3 text-sm font-medium;
  }

  .flash--alert {
    @apply border-rose-300 bg-rose-50 text-rose-950;
  }

  .flash--notice {
    @apply border-emerald-300 bg-emerald-50 text-emerald-950;
  }

  .toast-stack {
    @apply pointer-events-none fixed right-4 top-20 z-50 flex w-[min(24rem,calc(100vw-2rem))] flex-col gap-3;
  }

  .toast {
    @apply pointer-events-auto flex items-start gap-3 rounded-sm border bg-surface px-4 py-3 text-sm font-medium shadow-lg transition duration-300 ease-out;
    transform: translateX(120%);
    opacity: 0;
  }

  .toast--visible {
    transform: translateX(0);
    opacity: 1;
  }

  .toast--leaving {
    transform: translateX(120%);
    opacity: 0;
  }

  .toast--alert {
    @apply border-rose-300 bg-rose-50 text-rose-950;
  }

  .toast--notice {
    @apply border-emerald-300 bg-emerald-50 text-emerald-950;
  }

  .toast__body {
    @apply flex min-w-0 flex-1 items-start gap-2.5;
  }

  .toast__icon {
    @apply mt-0.5 shrink-0;
  }

  .toast__message {
    @apply m-0 min-w-0 flex-1 leading-snug;
  }

  .toast__close {
    @apply -mr-1 -mt-1 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-sm text-current opacity-70 transition hover:bg-black/5 hover:opacity-100;
  }

  .modal-backdrop {
    @apply fixed inset-0 z-50 flex items-start justify-center overflow-y-auto bg-black/40 p-4 sm:items-center;
  }

  .modal-panel {
    @apply w-full max-w-lg rounded-sm border border-border bg-surface p-5 shadow-xl;
  }

  .modal-panel--wide {
    @apply max-w-xl;
  }

  .modal-header {
    @apply mb-4 flex items-start justify-between gap-3;
  }

  .modal-title {
    @apply text-lg font-semibold text-ink;
  }

  .person-search {
    @apply relative grid gap-2;
  }

  .person-search__results {
    @apply absolute left-0 right-0 top-full z-20 mt-1 max-h-60 overflow-y-auto rounded-sm border border-border bg-surface shadow-lg;
  }

  .person-search__option {
    @apply flex w-full flex-col items-start gap-0.5 border-b border-border px-3 py-2 text-left text-sm last:border-b-0 hover:bg-surface-muted;
  }

  .person-search__option-name {
    @apply font-medium text-ink;
  }

  .person-search__option-meta {
    @apply text-xs text-muted;
  }

  .person-search__empty {
    @apply px-3 py-2 text-sm text-muted;
  }

  .person-search__selected {
    @apply flex flex-wrap items-start justify-between gap-2 rounded-sm border border-border bg-surface-muted/50 px-3 py-2;
  }

  .consent-summary {
    @apply grid gap-2 border-t border-border pt-3;
  }

  .consent-summary__label {
    @apply text-xs font-semibold uppercase tracking-wide text-muted;
  }

  .consent-summary__chips {
    @apply flex flex-wrap gap-2;
  }

  .consent-chip {
    @apply inline-flex max-w-full items-center gap-2 rounded-sm border px-2.5 py-1.5 text-left text-sm transition;
  }

  .consent-chip--ok {
    @apply border-border bg-surface-muted text-ink hover:border-ink/30;
  }

  .consent-chip--missing {
    @apply border-amber-300 bg-amber-50 text-ink hover:border-amber-400;
  }

  .consent-chip__title {
    @apply font-medium;
  }

  .consent-chip__status {
    @apply inline-flex items-center gap-1 text-xs text-muted;
  }

  .popover {
    @apply relative inline-flex;
  }

  .popover__panel {
    @apply absolute left-0 top-full z-40 mt-2 w-[min(24rem,calc(100vw-2rem))] rounded-sm border border-border bg-surface p-4 shadow-xl;
  }

  .popover__header {
    @apply mb-3 flex items-start justify-between gap-3;
  }

  .popover__title {
    @apply text-base font-semibold text-ink;
  }

  .data-table-wrap {
    @apply w-full overflow-x-auto rounded-sm border border-border bg-surface;
  }

  .data-table {
    @apply w-full min-w-[36rem] border-collapse text-left text-sm;
  }

  .data-table th {
    @apply whitespace-nowrap border-b border-border bg-surface-muted px-3 py-2 text-xs font-semibold uppercase tracking-wide text-muted;
  }

  .data-table td {
    @apply border-b border-border px-3 py-2 align-middle text-ink;
  }

  .data-table tr:last-child td {
    @apply border-b-0;
  }

  .data-table tbody tr:hover td {
    @apply bg-surface-muted/70;
  }

  .data-table__actions {
    @apply whitespace-nowrap text-right;
  }

  .data-table__actions .btn {
    @apply min-h-8 px-2.5 py-1 text-xs;
  }

  .icon-link {
    @apply inline-flex items-center gap-1.5 no-underline;
  }

  .shell {
    @apply min-h-dvh bg-surface-muted;
  }

  .shell__sidebar {
    @apply fixed inset-y-0 left-0 z-30 flex h-dvh w-64 -translate-x-full flex-col border-r border-border bg-sidebar text-white transition-transform duration-200 lg:translate-x-0;
  }

  .shell__sidebar[data-open="true"] {
    @apply translate-x-0;
  }

  .shell__backdrop {
    @apply fixed inset-0 z-20 bg-black/40 lg:hidden;
  }

  .shell__main {
    @apply flex min-h-dvh min-w-0 flex-col lg:pl-64;
  }

  .shell__topbar {
    @apply sticky top-0 z-10 flex items-center gap-3 border-b border-border bg-surface px-4 py-3 lg:px-6;
  }

  .shell__topbar-actions {
    @apply ml-auto flex shrink-0 flex-wrap items-center justify-end gap-2;
  }

  .shell__content {
    @apply flex-1 px-4 py-5 lg:px-6 lg:py-6;
  }

  .shell__content--flush {
    @apply px-0 py-0 lg:px-0 lg:py-0;
  }

  .calendar-layout {
    @apply flex min-h-[calc(100dvh-3.5rem)] flex-col lg:flex-row;
  }

  .calendar-filters {
    @apply flex w-full shrink-0 flex-col gap-6 border-b border-border bg-surface-muted/40 px-4 py-4 lg:w-60 lg:border-b-0 lg:border-r lg:px-4 lg:py-5;
  }

  .calendar-filters__section {
    @apply grid gap-2;
  }

  .calendar-filters__heading {
    @apply text-xs font-semibold uppercase tracking-wide text-muted;
  }

  .calendar-filters__list {
    @apply grid gap-0.5;
  }

  .calendar-filters__item {
    @apply flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm font-medium text-ink no-underline transition hover:bg-surface;
  }

  .calendar-filters__item--active {
    @apply bg-surface font-semibold shadow-sm;
  }

  .calendar-main {
    @apply min-w-0 flex-1 px-4 py-4 lg:px-6 lg:py-5;
  }

  .service-layout {
    @apply flex min-h-[calc(100dvh-3.5rem)] flex-col lg:flex-row;
  }

  .service-nav {
    @apply flex w-full shrink-0 flex-col gap-4 border-b border-border bg-surface-muted/40 px-4 py-4 lg:w-72 lg:border-b-0 lg:border-r lg:px-4 lg:py-5;
  }

  .service-nav__heading {
    @apply text-xs font-semibold uppercase tracking-wide text-muted;
  }

  .service-nav__item {
    @apply grid gap-1 rounded-sm px-2 py-2;
  }

  .service-nav__item--active {
    @apply bg-surface shadow-sm;
  }

  .service-nav__title {
    @apply block text-sm font-semibold text-ink no-underline;
  }

  .service-nav__meta {
    @apply text-xs text-muted;
  }

  .service-nav__links {
    @apply mt-1 grid gap-0.5;
  }

  .service-nav__link {
    @apply flex items-center justify-between gap-2 rounded-sm px-2 py-1 text-sm font-medium text-ink no-underline transition hover:bg-surface;
  }

  .service-nav__link--active {
    @apply bg-accent/10 font-semibold text-accent;
  }

  .service-nav__count {
    @apply tabular-nums text-xs font-semibold text-muted;
  }

  .service-nav__link--active .service-nav__count {
    @apply text-accent;
  }

  .service-main {
    @apply min-w-0 flex-1 px-4 py-4 lg:px-6 lg:py-5;
  }

  .sidebar-brand {
    @apply flex shrink-0 items-center gap-3 border-b border-white/10 px-4 py-4;
  }

  .sidebar-brand__logo {
    @apply h-9 w-9 shrink-0 rounded-sm object-contain bg-white/10;
  }

  .sidebar-nav {
    @apply flex min-h-0 flex-1 flex-col gap-6 overflow-y-auto px-3 py-4;
  }

  .sidebar-nav__group-label {
    @apply mb-1 px-2 text-[0.65rem] font-semibold uppercase tracking-wider text-sidebar-muted;
  }

  .sidebar-nav__link {
    @apply flex items-center gap-3 rounded-sm px-2.5 py-2 text-sm font-medium text-white/85 no-underline transition hover:bg-sidebar-hover hover:text-white;
  }

  .sidebar-nav__link--active {
    @apply bg-sidebar-active text-white;
  }

  .sidebar-nav__icon {
    @apply w-5 shrink-0 text-center text-sidebar-muted;
  }

  .sidebar-subnav {
    @apply mb-2 ml-4 flex flex-col gap-0.5 border-l border-white/15 pl-2;
  }

  .sidebar-subnav__link {
    @apply flex items-center gap-2 rounded-sm px-2 py-1.5 text-xs font-medium text-white/70 no-underline transition hover:bg-sidebar-hover hover:text-white;
  }

  .sidebar-subnav__link--active {
    @apply bg-sidebar-active text-white;
  }

  .sidebar-subnav__icon {
    @apply w-4 shrink-0 text-center text-sidebar-muted;
  }

  .sidebar-footer {
    @apply mt-auto shrink-0 border-t border-white/10 px-3 py-3;
  }

  .apex-chrome {
    @apply border-b border-border bg-surface;
  }

  .apex-hero {
    @apply relative overflow-hidden;
    background:
      radial-gradient(ellipse 80% 60% at 20% 10%, rgba(61, 90, 128, 0.18), transparent 55%),
      radial-gradient(ellipse 70% 50% at 90% 20%, rgba(26, 29, 35, 0.08), transparent 50%),
      linear-gradient(165deg, #f8f9fb 0%, #eef1f5 45%, #e4e9ef 100%);
  }

  .apex-hero__brand {
    @apply font-display text-5xl font-semibold tracking-tight text-ink sm:text-6xl;
  }

  .seat-chip {
    @apply inline-flex min-h-11 min-w-11 cursor-pointer items-center justify-center rounded-sm border border-transparent px-2 py-1.5 text-base font-semibold transition;
  }

  .seat-chip:has(input:checked) {
    @apply border-accent ring-2 ring-accent/30;
  }

  .seat-chip--free {
    @apply border-sky-300 bg-seat-free text-sky-950;
  }

  .seat-chip--held {
    @apply border-amber-300 bg-seat-held text-amber-950 opacity-80;
  }

  .seat-chip--confirmed {
    @apply border-emerald-400 bg-seat-confirmed text-emerald-950 opacity-80;
  }

  .table-card {
    @apply rounded-sm border border-border p-4 text-left transition hover:border-accent/50;
  }

  .row-label {
    @apply w-10 shrink-0 pt-2.5 text-sm font-bold text-muted;
  }

  .legend-dot {
    @apply inline-block h-4 w-4 rounded-sm border border-border;
  }

  .fc {
    @apply text-sm;
  }

  .fc .fc-toolbar-title {
    @apply text-xl font-semibold;
  }

  .fc .fc-button {
    @apply min-h-10 rounded-sm px-3 text-sm font-semibold;
  }

  .fc .fc-col-header-cell-cushion,
  .fc .fc-daygrid-day-number {
    @apply text-sm font-medium;
  }

  .fc .fc-event {
    @apply text-sm font-medium;
  }

  .fc .fc-daygrid-day-frame {
    min-height: 4.5rem;
  }

  .fc .fc-event.event--internal {
    @apply opacity-70;
    border-style: dashed !important;
  }

  .fc .fc-event.booking--soft {
    @apply opacity-80;
    border-style: dashed !important;
  }

  .badge {
    @apply inline-flex items-center rounded-sm border border-border px-2 py-0.5 text-xs font-semibold uppercase tracking-wide;
  }

  .badge--public {
    @apply border-emerald-300 bg-emerald-50 text-emerald-900;
  }

  .badge--internal {
    @apply border-border bg-surface-muted text-muted;
  }

  .badge--kind {
    @apply border-sky-200 bg-sky-50 text-sky-950 normal-case;
  }

  .queue-row {
    @apply flex min-h-14 flex-wrap items-center justify-between gap-3 rounded-sm border border-border bg-surface px-4 py-3 no-underline transition hover:border-accent/40;
  }

  .queue-row--active {
    @apply border-accent bg-accent/5;
  }
}