/*
 * Vessel Movements V2 — Main Stylesheet
 *
 * Modern CSS (2025): cascade layers, nesting, custom properties,
 * container queries, :has(), light-dark(), subgrid.
 *
 * Layer order matters — later layers win.
 */

@layer reset, tokens, base, layout, components, utilities;

/* Unlayered — hide elements before JS initialises */
[hidden] {
  display: none !important;
}

/* ========================================================================
   LAYER: reset — normalize browser defaults
   ======================================================================== */
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    background-color: var(--bg-page);
    color: var(--text-primary);
  }

  body {
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }

  img,
  picture,
  video,
  canvas,
  svg {
    display: block;
    max-width: 100%;
  }

  input,
  button,
  textarea,
  select {
    font: inherit;
    color: inherit;
  }

  button {
    cursor: pointer;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  table {
    border-collapse: collapse;
    width: 100%;
  }

  fieldset {
    border: none;
  }

  [hidden] {
    display: none !important;
  }
}

/* ========================================================================
   LAYER: tokens — design tokens via custom properties
   ======================================================================== */
@layer tokens {
  :root {
    /* — Colour palette — */
    --color-teal-50: #edf3f7;
    --color-teal-100: #d4e5ef;
    --color-teal-200: #aecde0;
    --color-teal-300: #84b3ce;
    --color-teal-400: #5e9abb;
    --color-teal-500: #4180a3;
    --color-teal-600: #376c8c;
    --color-teal-700: #2d5a76;
    --color-teal-800: #254961;
    --color-teal-900: #1e3a4f;

    --color-yellow-50: #faf5e6;
    --color-yellow-100: #f0e7c5;
    --color-yellow-200: #e4d59c;
    --color-yellow-300: #d8c276;
    --color-yellow-400: #cfb354;
    --color-yellow-500: #ceab2c;
    --color-yellow-600: #c9a317;
    --color-yellow-700: #c49a00;
    --color-yellow-800: #957604;
    --color-yellow-900: #6b5506;

    --color-gray-50: #f9fafb;
    --color-gray-100: #f3f4f6;
    --color-gray-200: #e5e7eb;
    --color-gray-300: #d1d5db;
    --color-gray-400: #9ca3af;
    --color-gray-500: #6b7280;
    --color-gray-600: #4b5563;
    --color-gray-700: #374151;
    --color-gray-800: #1f2937;
    --color-gray-900: #111827;

    --color-green-50: #f0fdf4;
    --color-green-500: #22c55e;
    --color-green-600: #16a34a;
    --color-green-700: #15803d;

    --color-red-50: #fef2f2;
    --color-red-500: #ef4444;
    --color-red-600: #dc2626;
    --color-red-700: #b91c1c;

    --color-amber-50: #fffbeb;
    --color-amber-500: #f59e0b;
    --color-amber-600: #d97706;
    --color-amber-700: #b45309;

    --color-white: #ffffff;

    /* — Color scheme — */
    color-scheme: light;

    /* — Semantic tokens (light theme) — */
    --bg-page: var(--color-gray-50);
    --bg-surface: var(--color-white);
    --bg-muted: var(--color-gray-100);
    --bg-accent: var(--color-teal-50);

    --text-primary: var(--color-gray-900);
    --text-secondary: var(--color-gray-600);
    --text-muted: var(--color-gray-400);
    --text-inverse: var(--color-white);

    --border-default: var(--color-gray-200);
    --border-strong: var(--color-gray-300);

    --accent: var(--color-teal-600);
    --accent-hover: var(--color-teal-700);
    --accent-bg: var(--color-teal-50);
    --accent-fill: var(--color-teal-600);
    --accent-fill-hover: var(--color-teal-700);

    --highlight: var(--color-yellow-600);
    --highlight-hover: var(--color-yellow-700);
    --highlight-bg: var(--color-yellow-100);

    --success: var(--color-green-600);
    --success-bg: var(--color-green-50);
    --danger: var(--color-red-600);
    --danger-bg: var(--color-red-50);
    --warning: var(--color-amber-600);
    --warning-bg: var(--color-amber-50);

    /* — Background texture — */
    --bg-texture-opacity: 0.09;

    /* — Header chrome — */
    --header-bg: var(--color-teal-900);
    --header-text: var(--color-teal-100);
    --header-text-muted: var(--color-teal-200);
    --header-hover-bg: rgb(255 255 255 / 0.08);

    /* — Typography — */
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", monospace;

    --text-xs: 0.75rem; /* 12px */
    --text-sm: 0.875rem; /* 14px */
    --text-base: 1rem; /* 16px */
    --text-lg: 1.125rem; /* 18px */
    --text-xl: 1.25rem; /* 20px */
    --text-2xl: 1.5rem; /* 24px */
    --text-3xl: 1.875rem; /* 30px */

    /* — Spacing scale — */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;

    /* — Radius — */
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-full: 9999px;

    /* — Shadows — */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md:
      0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg:
      0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

    /* — Transitions — */
    --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast: 150ms;
    --duration-normal: 250ms;

    /* — Layout — */
    --header-height: 3.5rem;
    --sidebar-width: 15rem;
    --content-max-width: 90rem;

    /* — Theme transition — */
    --theme-transition:
      background-color var(--duration-normal) var(--ease-default),
      color var(--duration-normal) var(--ease-default),
      border-color var(--duration-normal) var(--ease-default),
      box-shadow var(--duration-normal) var(--ease-default);

    color-scheme: light;
  }

  /* — Dark theme overrides — */
  [data-theme="dark"] {
    --bg-page: var(--color-gray-900);
    --bg-surface: var(--color-gray-800);
    --bg-muted: var(--color-gray-700);
    --bg-accent: color-mix(
      in srgb,
      var(--color-teal-600) 15%,
      var(--color-gray-800)
    );

    --text-primary: var(--color-gray-100);
    --text-secondary: var(--color-gray-300);
    --text-muted: var(--color-gray-500);
    --text-inverse: var(--color-gray-900);

    --border-default: var(--color-gray-700);
    --border-strong: var(--color-gray-600);

    --accent: var(--color-teal-200);
    --accent-hover: var(--color-teal-100);
    --accent-bg: color-mix(
      in srgb,
      var(--color-teal-500) 20%,
      var(--color-gray-700)
    );
    --accent-fill: var(--color-teal-500);
    --accent-fill-hover: var(--color-teal-600);

    --highlight: var(--color-yellow-400);
    --highlight-hover: var(--color-yellow-500);
    --highlight-bg: color-mix(
      in srgb,
      var(--color-yellow-600) 15%,
      var(--color-gray-800)
    );

    --success: var(--color-green-500);
    --success-bg: color-mix(
      in srgb,
      var(--color-green-600) 15%,
      var(--color-gray-800)
    );
    --danger: var(--color-red-500);
    --danger-bg: color-mix(
      in srgb,
      var(--color-red-600) 15%,
      var(--color-gray-800)
    );
    --warning: var(--color-amber-500);
    --warning-bg: color-mix(
      in srgb,
      var(--color-amber-600) 15%,
      var(--color-gray-800)
    );

    --bg-texture-opacity: 0.06;

    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.2);
    --shadow-md:
      0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.2);
    --shadow-lg:
      0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.2);

    color-scheme: dark;
  }

  /* — System preference: auto-dark when no explicit theme set — */
  @media (prefers-color-scheme: dark) {
    [data-theme="system"] {
      --bg-page: var(--color-gray-900);
      --bg-surface: var(--color-gray-800);
      --bg-muted: var(--color-gray-700);
      --bg-accent: color-mix(
        in srgb,
        var(--color-teal-600) 15%,
        var(--color-gray-800)
      );

      --text-primary: var(--color-gray-100);
      --text-secondary: var(--color-gray-300);
      --text-muted: var(--color-gray-500);
      --text-inverse: var(--color-gray-900);

      --border-default: var(--color-gray-700);
      --border-strong: var(--color-gray-600);

      --accent: var(--color-teal-200);
      --accent-hover: var(--color-teal-100);
      --accent-bg: color-mix(
        in srgb,
        var(--color-teal-500) 20%,
        var(--color-gray-700)
      );
      --accent-fill: var(--color-teal-500);
      --accent-fill-hover: var(--color-teal-600);

      --highlight: var(--color-yellow-400);
      --highlight-hover: var(--color-yellow-500);
      --highlight-bg: color-mix(
        in srgb,
        var(--color-yellow-600) 15%,
        var(--color-gray-800)
      );

      --success: var(--color-green-500);
      --success-bg: color-mix(
        in srgb,
        var(--color-green-600) 15%,
        var(--color-gray-800)
      );
      --danger: var(--color-red-500);
      --danger-bg: color-mix(
        in srgb,
        var(--color-red-600) 15%,
        var(--color-gray-800)
      );
      --warning: var(--color-amber-500);
      --warning-bg: color-mix(
        in srgb,
        var(--color-amber-600) 15%,
        var(--color-gray-800)
      );

      --bg-texture-opacity: 0.06;

      --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.2);
      --shadow-md:
        0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.2);
      --shadow-lg:
        0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.2);

      color-scheme: dark;
    }
  }
}

/* ========================================================================
   LAYER: base — element defaults
   ======================================================================== */
@layer base {
  body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    color: var(--text-primary);
    /* bg-page lives on html (reset layer) — omitted here so ::before shows through */
    position: relative;

    &::before {
      content: "";
      position: fixed;
      inset: 0;
      background: url("../images/bg.16f53a780886.jpg") center / cover no-repeat;
      opacity: var(--bg-texture-opacity);
      z-index: -1;
      pointer-events: none;
    }
  }

  h1 {
    font-size: var(--text-3xl);
    font-weight: 700;
    line-height: 1.2;
  }
  h2 {
    font-size: var(--text-2xl);
    font-weight: 600;
    line-height: 1.3;
  }
  h3 {
    font-size: var(--text-xl);
    font-weight: 600;
    line-height: 1.4;
  }
  h4 {
    font-size: var(--text-lg);
    font-weight: 600;
    line-height: 1.4;
  }

  a:not([class]) {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 0.15em;

    &:hover {
      color: var(--accent-hover);
    }
  }

  code,
  pre {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
  }

  pre {
    padding: var(--space-4);
    background: var(--bg-muted);
    border-radius: var(--radius-md);
    overflow-x: auto;
  }

  ::selection {
    background-color: var(--color-yellow-400);
    color: var(--color-teal-900);
  }

  /* Smooth theme transitions (only after page load to avoid flash) */
  .theme-ready,
  .theme-ready *,
  .theme-ready *::before,
  .theme-ready *::after {
    transition: var(--theme-transition);
  }

  /* Focus ring — accessible & consistent */
  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
}

/* ========================================================================
   LAYER: layout — page structure
   ======================================================================== */
@layer layout {
  /* -- Header / Navbar -- */
  .header {
    background: var(--header-bg);
    color: var(--header-text);
    z-index: 100;
    height: var(--header-height);
    flex-shrink: 0;
  }

  .header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--content-max-width);
    width: 100%;
    height: 100%;
    margin-inline: auto;
    padding-inline: var(--space-8);
  }

  .header__brand {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-lg);
    font-weight: 600;
    white-space: nowrap;
    color: var(--highlight);
  }

  .header__brand svg {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    color: var(--highlight);
  }

  .header__nav {
    display: flex;
    align-items: center;
    gap: var(--space-1);
  }

  .header__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: none;
    background: transparent;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--header-text);
    cursor: pointer;
    transition:
      background var(--duration-fast) var(--ease-default),
      color var(--duration-fast) var(--ease-default);

    &:hover {
      background: var(--header-hover-bg);
      color: var(--header-text);
    }

    &[aria-current="page"] {
      background: var(--header-hover-bg);
      color: var(--highlight);
      box-shadow: inset 0 -1px 0 var(--highlight);
    }
  }

  .header__user {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-sm);
    color: var(--header-text);
  }

  .header__role-badge {
    font-size: var(--text-xs);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.05em;
    background: var(--highlight);
    color: var(--color-teal-900);
  }

  /* -- Header dropdown (reports menu) -- */
  .header__dropdown {
    position: relative;
  }

  .header__dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 100;
    min-width: 12rem;
    margin-top: var(--space-1);
    padding: var(--space-1) 0;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
  }

  .header__dropdown-item {
    display: block;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    color: var(--text-primary);
    transition: background var(--duration-fast) var(--ease-default);

    &:hover {
      background: var(--bg-muted);
      color: var(--text-primary);
    }
  }

  /* -- Main content -- */
  .main {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--space-6) var(--space-8);
    max-width: var(--content-max-width);
    width: 100%;
    margin-inline: auto;
  }

  /* -- List page layout (fills viewport, table scrolls internally) -- */
  .main:has(.page-list) {
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .page-list {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    gap: 0;

    & > .page-header {
      flex-shrink: 0;
    }

    & > .card.mb-6,
    & > .flex.mb-6 {
      flex-shrink: 0;
    }

    & > .card:last-of-type {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;

      & > .card__body {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
      }
    }

    & .table-wrap {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
    }

    & .table thead {
      position: sticky;
      top: 0;
      z-index: 10;
      background: var(--bg-muted);
    }

    & .pagination {
      flex-shrink: 0;
      margin-top: 0;
      padding: var(--space-3) var(--space-4);
      border-top: 1px solid var(--border-default);
    }
  }

  /* -- Page header (title + actions) -- */
  .page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
  }

  .page-header__title {
    font-size: var(--text-2xl);
    font-weight: 700;
  }

  .page-header__actions {
    display: flex;
    gap: var(--space-3);
  }

  /* -- Footer -- */
  .footer {
    padding: var(--space-4) var(--space-8);
    text-align: center;
    font-size: var(--text-sm);
    color: var(--text-muted);
    border-top: 1px solid var(--border-default);
    flex-shrink: 0;
  }

  /* -- Header hamburger (mobile) -- */
  .header__hamburger {
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--space-2);
    border: none;
    background: transparent;
    color: var(--header-text);
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: background var(--duration-fast) var(--ease-default);

    &:hover {
      background: var(--header-hover-bg);
    }
  }

  /* -- Responsive -- */
  @media (max-width: 768px) {
    .header__inner {
      padding-inline: var(--space-4);
      flex-wrap: wrap;
    }

    .header__hamburger {
      display: inline-flex;
    }

    .header__nav {
      display: none;
      width: 100%;
      flex-direction: column;
      gap: 0;
      padding-block: var(--space-2);
    }

    .header__nav--open {
      display: flex;
    }

    .header__nav .header__link {
      width: 100%;
      padding: var(--space-3) var(--space-4);
      border-radius: 0;
    }

    .header__user {
      flex-wrap: wrap;
    }

    .main {
      padding: var(--space-4);
    }
  }
}

/* ========================================================================
   LAYER: components — reusable UI components
   ======================================================================== */
@layer components {
  /* ---- Buttons ---- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 1.5;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition:
      background var(--duration-fast) var(--ease-default),
      border-color var(--duration-fast) var(--ease-default),
      color var(--duration-fast) var(--ease-default);

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }

  .btn--primary {
    background: var(--accent-fill);
    color: var(--color-white);

    &:hover:not(:disabled) {
      background: var(--accent-fill-hover);
    }
  }

  .btn--secondary {
    background: var(--bg-surface);
    color: var(--text-primary);
    border-color: var(--border-default);

    &:hover:not(:disabled) {
      background: var(--bg-muted);
      border-color: var(--border-strong);
    }
  }

  .btn--danger {
    background: var(--danger);
    color: var(--color-white);

    &:hover:not(:disabled) {
      background: var(--color-red-700);
    }
  }

  .btn--ghost {
    background: transparent;
    color: var(--text-secondary);

    &:hover:not(:disabled) {
      background: var(--bg-muted);
      color: var(--text-primary);
    }
  }

  .btn--sm {
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
  }

  .btn--lg {
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-base);
  }

  /* ---- Cards ---- */
  .card {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    container-type: inline-size;
  }

  .card__header {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-default);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);

    & h2,
    & h3 {
      font-size: var(--text-lg);
      font-weight: 600;
    }
  }

  .card__body {
    padding: var(--space-5);
  }

  .card__footer {
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--border-default);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
  }

  /* ---- Tables ---- */
  .table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
  }

  .table {
    font-size: var(--text-sm);

    & thead {
      background: var(--bg-muted);
    }

    & th {
      padding: var(--space-3) var(--space-4);
      text-align: left;
      font-weight: 600;
      color: var(--text-secondary);
      font-size: var(--text-xs);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      white-space: nowrap;
    }

    & td {
      padding: var(--space-3) var(--space-4);
      border-top: 1px solid var(--border-default);
      vertical-align: middle;
    }

    & tbody tr {
      transition: background var(--duration-fast) var(--ease-default);

      &:hover {
        background: var(--bg-accent);
      }
    }
  }

  /* ---- Badges ---- */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0.125rem var(--space-2);
    font-size: var(--text-xs);
    font-weight: 500;
    border-radius: var(--radius-full);
    white-space: nowrap;
  }

  .badge--primary {
    background: var(--accent-bg);
    color: var(--accent);
  }
  .badge--success {
    background: var(--success-bg);
    color: var(--success);
  }
  .badge--danger {
    background: var(--danger-bg);
    color: var(--danger);
  }
  .badge--warning {
    background: var(--warning-bg);
    color: var(--warning);
  }
  .badge--secondary {
    background: var(--bg-muted);
    color: var(--text-secondary);
  }
  .badge--highlight {
    background: var(--highlight);
    color: var(--color-teal-900);
  }

  /* ---- Alerts / Messages ---- */
  .alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    border: 1px solid transparent;
  }

  .alert--info {
    background: var(--accent-bg);
    border-color: var(--color-teal-200);
    color: light-dark(var(--color-teal-700), var(--color-teal-200));
  }
  .alert--success {
    background: var(--success-bg);
    border-color: var(--color-green-500);
    color: light-dark(var(--color-green-700), var(--color-green-500));
  }
  .alert--warning {
    background: var(--warning-bg);
    border-color: var(--color-amber-500);
    color: light-dark(var(--color-amber-700), var(--color-amber-500));
  }
  .alert--error {
    background: var(--danger-bg);
    border-color: var(--color-red-500);
    color: light-dark(var(--color-red-700), var(--color-red-500));
  }

  .alert__dismiss {
    margin-left: auto;
    background: none;
    border: none;
    font-size: var(--text-lg);
    line-height: 1;
    opacity: 0.5;
    cursor: pointer;

    &:hover {
      opacity: 1;
    }
  }

  /* ---- Forms ---- */
  .form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-bottom: var(--space-4);
  }

  .form-label {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-primary);
  }

  .form-input,
  .form-select,
  .form-textarea {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    background: var(--bg-surface);
    transition:
      border-color var(--duration-fast) var(--ease-default),
      box-shadow var(--duration-fast) var(--ease-default);

    &:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgb(55 108 140 / 0.15);
      outline: none;
    }

    &[aria-invalid="true"],
    &:user-invalid {
      border-color: var(--danger);

      &:focus {
        box-shadow: 0 0 0 3px rgb(220 38 38 / 0.15);
      }
    }
  }

  .form-textarea {
    resize: vertical;
    min-height: 5rem;
  }

  .form-help {
    font-size: var(--text-xs);
    color: var(--text-muted);
  }

  .form-error {
    font-size: var(--text-xs);
    color: var(--danger);
    font-weight: 500;
  }

  /* Form group that has errors */
  .form-group:has([aria-invalid="true"]) .form-label {
    color: var(--danger);
  }

  .form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--space-4);
    align-items: end;

    & > .form-group {
      margin-bottom: 0;
    }
  }

  /* Search / filter forms: button-only groups shrink to content */
  form.form-row {
    display: flex;
    flex-wrap: wrap;

    & > .form-group {
      flex: 1 1 14rem;
    }

    & > .form-group:not(:has(.form-input, .form-select, .form-textarea)) {
      flex: 0 0 auto;
      min-width: 0;
    }
  }

  /* ---- Stats grid (dashboard) ---- */
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-6);
  }

  .stat-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-left: 3px solid var(--highlight);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
  }

  .stat-card__label {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    font-weight: 500;
    margin-bottom: var(--space-1);
  }

  .stat-card__value {
    font-size: var(--text-3xl);
    font-weight: 700;
    line-height: 1;
  }

  .stat-card__meta {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-top: var(--space-1);
  }

  /* ---- Chart grid (dashboard) ---- */
  .chart-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-6);

    @media (width < 64rem) {
      grid-template-columns: 1fr;
    }
  }

  .chart-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
    min-height: 18rem;
    display: flex;
    flex-direction: column;
    grid-column: span 3;

    @media (width < 64rem) {
      grid-column: 1 / -1;
    }
  }

  .chart-card--wide {
    grid-column: 1 / -1;
  }

  .chart-card--third {
    grid-column: span 2;

    @media (width < 64rem) {
      grid-column: 1 / -1;
    }
  }

  .chart-card__title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: var(--space-3);
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }

  .chart-card__body {
    flex: 1;
    position: relative;
    min-height: 0;
  }

  /* ---- Empty state ---- */
  .empty-state {
    text-align: center;
    padding: var(--space-12) var(--space-4);
    color: var(--text-secondary);

    & svg {
      width: 3rem;
      height: 3rem;
      margin-inline: auto;
      margin-bottom: var(--space-4);
      color: var(--text-muted);
    }

    & h3 {
      margin-bottom: var(--space-2);
    }

    & p {
      margin-bottom: var(--space-4);
    }
  }

  /* ---- Loading indicator (HTMX) ---- */
  .htmx-indicator {
    display: none;
  }

  .htmx-request .htmx-indicator,
  .htmx-request.htmx-indicator {
    display: inline-flex;
  }

  .spinner {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--border-default);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
  }

  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }

  /* ---- Pagination ---- */
  .pagination {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    justify-content: center;
    margin-top: var(--space-6);
  }

  .pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding-inline: var(--space-2);
    font-size: var(--text-sm);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    border: 1px solid transparent;
    transition: background var(--duration-fast) var(--ease-default);

    &:hover {
      background: var(--bg-muted);
    }

    &[aria-current="page"] {
      background: var(--highlight-bg);
      color: var(--highlight);
      border-color: var(--highlight);
      font-weight: 600;
    }

    &[disabled] {
      opacity: 0.4;
      pointer-events: none;
    }
  }

  /* ---- Breadcrumbs ---- */
  .breadcrumbs {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-bottom: var(--space-4);

    & a {
      color: var(--text-secondary);

      &:hover {
        color: var(--accent);
      }
    }

    & .separator {
      font-size: var(--text-xs);
    }
  }

  /* ---- Skip link (accessibility) ---- */
  .skip-link {
    position: absolute;
    top: -3rem;
    left: var(--space-4);
    background: var(--accent-fill);
    color: var(--color-white);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 500;
    z-index: 200;
    transition: top var(--duration-fast) var(--ease-default);

    &:focus {
      top: var(--space-4);
    }
  }

  /* ---- SR-only (screen reader) ---- */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

/* ========================================================================
   LAYER: utilities — low-level helpers
   ======================================================================== */
@layer utilities {
  .text-center {
    text-align: center;
  }
  .text-right {
    text-align: right;
  }
  .text-sm {
    font-size: var(--text-sm);
  }
  .text-xs {
    font-size: var(--text-xs);
  }
  .text-muted {
    color: var(--text-muted);
  }
  .text-secondary {
    color: var(--text-secondary);
  }
  .text-success {
    color: var(--success);
  }
  .text-danger {
    color: var(--danger);
  }
  .text-warning {
    color: var(--warning);
  }
  .font-semibold {
    font-weight: 600;
  }
  .font-bold {
    font-weight: 700;
  }
  .font-mono {
    font-family: var(--font-mono);
  }

  .flex {
    display: flex;
  }
  .flex-col {
    flex-direction: column;
  }
  .items-center {
    align-items: center;
  }
  .justify-between {
    justify-content: space-between;
  }
  .gap-1 {
    gap: var(--space-1);
  }
  .gap-2 {
    gap: var(--space-2);
  }
  .gap-3 {
    gap: var(--space-3);
  }
  .gap-4 {
    gap: var(--space-4);
  }

  .mt-2 {
    margin-top: var(--space-2);
  }
  .mt-4 {
    margin-top: var(--space-4);
  }
  .mt-6 {
    margin-top: var(--space-6);
  }
  .mb-2 {
    margin-bottom: var(--space-2);
  }
  .mb-4 {
    margin-bottom: var(--space-4);
  }
  .mb-6 {
    margin-bottom: var(--space-6);
  }

  .w-full {
    width: 100%;
  }

  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ---- Theme toggle ---- */
  .theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2);
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--header-text);
    cursor: pointer;
    transition:
      background var(--duration-fast) var(--ease-default),
      color var(--duration-fast) var(--ease-default);

    &:hover {
      background: var(--header-hover-bg);
      color: var(--header-text);
    }
  }

  .theme-icon {
    width: 1.25rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .theme-icon svg {
    width: 100%;
    height: 100%;
    display: none; /* JS shows the active icon */
  }
}