@import "tailwindcss";

/* ---------------------------------------------------------------------------
   Dark mode is driven by data-theme="dark" on <html> (set server-side from a
   cookie so there is no flash, toggled client-side by the `theme` Stimulus
   controller). Use the `dark:` variant anywhere in markup.
--------------------------------------------------------------------------- */
@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));

/* ---------------------------------------------------------------------------
   Design tokens. "Refined professional blue" — a calmer, slightly deeper brand
   blue than the stock Tailwind blue, plus a system font stack (no external
   font dependency, works offline / in production behind a strict CSP).
--------------------------------------------------------------------------- */
@theme {
  --font-sans: "Inter var", "Inter", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Menlo", monospace;

  --color-brand-50: #eff5ff;
  --color-brand-100: #dbe8fe;
  --color-brand-200: #bfd7fe;
  --color-brand-300: #93bbfd;
  --color-brand-400: #6096fa;
  --color-brand-500: #3b76f6;
  --color-brand-600: #2563eb;
  --color-brand-700: #1d4fd7;
  --color-brand-800: #1e40af;
  --color-brand-900: #1e3a8a;
  --color-brand-950: #172554;

  --radius-card: 0.75rem;
}

/* ---------------------------------------------------------------------------
   Reusable component classes — one source of truth for buttons, cards, inputs
   and labels so every screen (index / show / form / report) looks the same.
   Markup uses these instead of repeating long utility strings.
--------------------------------------------------------------------------- */
@layer components {
  /* ---------------------------------------------------------------- sidebar
     The left-hand navigation: grouped headings that open and close, and a
     narrow "rail" mode that gives the page back its full width.

     These are real component classes rather than utilities scattered through
     the template, because the rail has to restyle a dozen elements at once
     from a single class on <aside> — which a utility-per-element approach
     cannot express. */
  /* `group` is a marker rather than a utility, so Tailwind v4 will not @apply
     it. Nothing below here uses group-hover:, so it simply goes. */
  .nav-link {
    @apply flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors;
  }

  .nav-link-active { @apply bg-brand-600 text-white shadow-sm; }
  .nav-link-idle { @apply text-slate-400 hover:bg-slate-800 hover:text-white; }
  .nav-sub { @apply py-1.5 pl-6 text-[13px]; }

  .nav-section-toggle {
    @apply flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left text-[11px]
           font-bold uppercase tracking-wider text-slate-400 transition-colors
           hover:bg-slate-800 hover:text-white;
  }

  .nav-section-label { @apply flex-1; }

  /* The group holding the current page, so the menu answers "which module am
     I in?" at a glance — and keeps answering it once the group is closed. */
  .nav-section-current { @apply bg-slate-800/70 text-white; }
  .nav-section-current .nav-chevron { @apply text-brand-400; }

  /* An open group is lifted a shade, so open and closed read differently even
     without looking at the chevron. */
  .nav-section[data-open="true"] > .nav-section-toggle { @apply text-slate-200; }

  .nav-chevron { @apply h-3.5 w-3.5 flex-none text-slate-500 transition-transform duration-150; }

  .nav-section-items { @apply mt-0.5 space-y-0.5; }

  /* A closed group hides its items. The chevron points right rather than down,
     which is the only signal that there is anything behind it. */
  .nav-section[data-open="false"] > .nav-section-items { @apply hidden; }
  .nav-section[data-open="false"] .nav-chevron { @apply -rotate-90; }

  /* The flyout heading only earns its place in the rail, where the heading
     above it has become an icon. */
  .nav-flyout-heading { @apply hidden; }

  /* ------------------------------------------------------------- rail mode */
  .sidebar-rail { width: 4.25rem; }

  /* Every label disappears; the icons carry the meaning. */
  .sidebar-rail .nav-label { @apply hidden; }
  .sidebar-rail .nav-link,
  .sidebar-rail .nav-section-toggle { @apply justify-center gap-0 px-0; }
  .sidebar-rail .nav-sub { @apply pl-0; }
  .sidebar-rail .brand-wordmark { @apply hidden; }
  .sidebar-rail .brand-row { @apply justify-center px-0; }

  /* A group's items become a panel that appears beside the rail on hover or
     keyboard focus, so a collapsed nav is still navigable rather than a column
     of mystery icons. */
  .sidebar-rail .nav-section { @apply relative; }

  .sidebar-rail .nav-section > .nav-section-items {
    @apply pointer-events-none invisible absolute left-full top-0 z-50 ml-2 w-56 rounded-lg
           border border-slate-700 bg-slate-900 p-2 opacity-0 shadow-xl transition-opacity
           duration-100;
    display: block;
  }

  .sidebar-rail .nav-section:hover > .nav-section-items,
  .sidebar-rail .nav-section:focus-within > .nav-section-items {
    @apply pointer-events-auto visible opacity-100;
  }

  .sidebar-rail .nav-flyout-heading {
    @apply mb-1 block px-2 text-[10px] font-bold uppercase tracking-widest text-slate-500;
  }

  /* A closed group still opens its flyout in the rail — collapsing a group is
     about the tall list, and has nothing to say about the hover panel. */
  .sidebar-rail .nav-section[data-open="false"] > .nav-section-items { display: block; }

  /* The way back out of the rail, since the header button is hidden there. */
  .nav-rail-expand { display: none; }
  .sidebar-rail .nav-rail-expand { display: flex; }

  /* Base button appearance — shared as a real utility so the variants can
     @apply it (Tailwind v4 @apply only accepts utilities, not components). */
  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-danger,
  .btn-ghost {
    /* appearance-none is essential: <input type="submit"> gets appearance:button
       from Preflight, which makes native buttons ignore our background-color. */
    @apply inline-flex cursor-pointer appearance-none items-center justify-center gap-1.5 rounded-lg px-4 py-2
           text-sm font-semibold leading-none transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2
           disabled:cursor-not-allowed disabled:opacity-60 dark:focus:ring-offset-slate-900;
  }
  .btn-primary { @apply bg-brand-600 text-white shadow-sm hover:bg-brand-700 focus:ring-brand-500; }
  .btn-secondary {
    @apply border border-slate-300 bg-white text-slate-700 hover:bg-slate-50 focus:ring-slate-400
           dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700;
  }
  .btn-danger { @apply bg-red-600 text-white shadow-sm hover:bg-red-700 focus:ring-red-500; }
  .btn-ghost {
    @apply text-slate-600 hover:bg-slate-100 hover:text-slate-900
           dark:text-slate-300 dark:hover:bg-slate-800 dark:hover:text-slate-100;
  }
  /* Defined last so it overrides the size utilities from the base above. */
  .btn-sm { @apply px-3 py-1.5 text-xs; }

  .card {
    @apply rounded-xl border border-slate-200 bg-white shadow-sm
           dark:border-slate-800 dark:bg-slate-900;
  }
  .card-pad { @apply p-5 sm:p-6; }

  /* Form fields — fully self-styled (no @tailwindcss/forms plugin), so text
     inputs, selects and textareas look identical and professional everywhere. */
  .field-label { @apply mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300; }
  .input {
    @apply block w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm
           transition-colors placeholder:text-slate-400
           focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-500/40
           disabled:cursor-not-allowed disabled:bg-slate-100 disabled:text-slate-500
           dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100 dark:placeholder-slate-500
           dark:disabled:bg-slate-800/50;
  }
  select.input { @apply pr-9; }
  textarea.input { @apply min-h-24 leading-relaxed; }
  .checkbox {
    @apply h-4 w-4 rounded border border-slate-300 text-brand-600 focus:ring-2 focus:ring-brand-500/40
           dark:border-slate-600 dark:bg-slate-800;
  }
  .form-hint { @apply mt-1 text-xs text-slate-500 dark:text-slate-400; }
  /* A titled group of fields inside a form card ("Bill to", "Dates"…). */
  .form-section-title {
    @apply mb-3 text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400;
  }
  .form-section + .form-section { @apply mt-6 border-t border-slate-100 pt-6 dark:border-slate-800; }
  /* A document header split into logical groups ("Customer · Dates · References"):
     one equal column per group on lg+, divided by a vertical rule; stacked below.
     The column count follows the number of groups, so a short form gets two. */
  .form-columns {
    @apply grid grid-cols-1 gap-6 lg:grid-flow-col lg:auto-cols-fr lg:gap-0 lg:divide-x lg:divide-slate-200
           dark:lg:divide-slate-800;
  }
  .form-column { @apply space-y-3 lg:px-6 lg:first:pl-0 lg:last:pr-0; }
  .form-column-title { @apply text-sm font-semibold text-slate-900 dark:text-slate-100; }
  /* Column headings over a document's line grid. */
  .line-head { @apply text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400; }
  .form-actions {
    @apply mt-6 flex flex-wrap items-center gap-3 border-t border-slate-200 pt-5 dark:border-slate-800;
  }
  .alert-error {
    @apply rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800
           dark:border-red-500/30 dark:bg-red-500/10 dark:text-red-300;
  }
  .link { @apply font-medium text-brand-600 hover:underline dark:text-brand-400; }

  .kpi-label { @apply text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400; }
}

/* ---------------------------------------------------------------------------
   Base styling for EVERY form control. There is no @tailwindcss/forms plugin,
   and Tailwind's reset zeroes native borders — so without this, `border-slate-300`
   only sets a colour and fields render borderless. This gives every text input,
   select and textarea a consistent, professional border/padding/focus, whether
   or not it also carries the .input class or a custom width.
--------------------------------------------------------------------------- */
@layer base {
  input[type="text"], input[type="email"], input[type="password"], input[type="number"],
  input[type="tel"], input[type="url"], input[type="search"], input[type="date"],
  input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"],
  input:not([type]), select, textarea {
    @apply rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm
           placeholder:text-slate-400 focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-500/40
           dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100 dark:placeholder-slate-500;
  }
  select { @apply pr-9; }
  textarea { @apply leading-relaxed; }
  input[type="checkbox"], input[type="radio"] {
    @apply h-4 w-4 border border-slate-300 bg-white text-brand-600 shadow-none focus:ring-2 focus:ring-brand-500/40
           dark:border-slate-600 dark:bg-slate-800;
  }
  input[type="checkbox"] { @apply rounded; }
  input[type="radio"] { @apply rounded-full; }
}

/* Colour-scheme hints so native controls (scrollbars, date pickers) match. */
html {
  color-scheme: light;
}
html[data-theme="dark"] {
  color-scheme: dark;
}

/* Smooth theme transitions on the big surfaces only (avoid janky animation on
   every element). */
body,
aside,
header,
.theme-surface {
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

input,
select,
textarea {
  font-size: 0.875rem;
}

/* Turbo progress bar (page navigations) */
.turbo-progress-bar {
  height: 3px;
  background: var(--color-brand-600);
}

/* Turbo frames show a subtle busy state while loading */
turbo-frame[busy] {
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 150ms ease-in;
}
turbo-frame[busy]::after {
  content: "Loading…";
  display: block;
  padding: 0.5rem 0;
  font-size: 0.75rem;
  color: #64748b;
}

/* Thin, unobtrusive scrollbars (esp. the sidebar) */
.scrollbar-slim {
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.4) transparent;
}
.scrollbar-slim::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.scrollbar-slim::-webkit-scrollbar-thumb {
  background-color: rgba(148, 163, 184, 0.4);
  border-radius: 9999px;
}

/* Print: drop the app chrome and page-fit statements/invoices/reports. Add
   data-no-print to hide action bars/filters from the printout. */
@media print {
  aside,
  header,
  #toasts,
  [data-no-print] {
    display: none !important;
  }
  main {
    padding: 0 !important;
  }
  body {
    background: #fff !important;
  }
  .shadow-sm,
  .shadow,
  .shadow-lg {
    box-shadow: none !important;
  }
  a[href] {
    text-decoration: none;
    color: #000;
  }
}

/* ---------------------------------------------------------------------------
   Public website (layouts/marketing). Navy ink, the app's brand blue, and a
   safety-amber accent for the calls to action — construction's own colours.
   Prefixed mk- so none of it can collide with the application's components.
--------------------------------------------------------------------------- */
@layer components {
  .mk-container { @apply mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8; }
  .mk-section { @apply py-16 sm:py-24; }

  .mk-eyebrow {
    @apply inline-flex items-center gap-2 text-xs font-bold uppercase tracking-[0.14em] text-brand-600;
  }
  .mk-eyebrow-dark { @apply text-amber-300; }

  .mk-h1 { @apply text-4xl font-extrabold tracking-tight text-balance sm:text-5xl lg:text-6xl; }
  .mk-h2 { @apply text-3xl font-extrabold tracking-tight text-balance text-slate-900 sm:text-4xl; }
  .mk-h3 { @apply text-lg font-bold text-slate-900; }
  .mk-lede { @apply text-lg leading-8 text-pretty text-slate-600; }

  .mk-btn {
    @apply inline-flex items-center justify-center gap-2 rounded-lg px-5 py-3 text-sm font-bold
           transition-all focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2;
  }
  .mk-btn-primary {
    @apply bg-amber-400 text-slate-950 shadow-lg shadow-amber-500/20
           hover:bg-amber-300 focus-visible:ring-amber-400;
  }
  .mk-btn-blue {
    @apply bg-brand-600 text-white shadow-sm hover:bg-brand-700 focus-visible:ring-brand-500;
  }
  .mk-btn-ghost-dark {
    @apply border border-white/25 text-white hover:bg-white/10 focus-visible:ring-white;
  }
  .mk-btn-ghost {
    @apply border border-slate-300 bg-white text-slate-800 hover:border-slate-400
           hover:bg-slate-50 focus-visible:ring-brand-500;
  }

  .mk-card {
    @apply rounded-2xl border border-slate-200 bg-white p-6 shadow-sm transition-shadow hover:shadow-md;
  }
  .mk-icon-tile {
    @apply flex h-11 w-11 flex-none items-center justify-center rounded-xl bg-brand-50 text-brand-700
           ring-1 ring-brand-100;
  }
  .mk-check-list > li { @apply flex gap-2.5 text-sm leading-6 text-slate-600; }

  /* The navy hero/CTA bands: a faint blueprint grid behind the copy. */
  .mk-blueprint {
    @apply relative isolate overflow-hidden bg-slate-950 text-white;
    background-image:
      linear-gradient(rgb(255 255 255 / 0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgb(255 255 255 / 0.04) 1px, transparent 1px),
      radial-gradient(60rem 30rem at 85% -10%, rgb(37 99 235 / 0.45), transparent 70%),
      radial-gradient(40rem 24rem at 0% 110%, rgb(245 158 11 / 0.16), transparent 70%);
    background-size: 44px 44px, 44px 44px, auto, auto;
  }

  /* Product "screenshots" drawn in HTML: a browser frame around a mock screen. */
  .mk-frame {
    @apply overflow-hidden rounded-xl border border-slate-200 bg-white text-slate-900
           shadow-2xl shadow-slate-950/30 ring-1 ring-slate-900/5;
  }
  .mk-frame-bar { @apply flex items-center gap-1.5 border-b border-slate-200 bg-slate-50 px-3 py-2; }
  .mk-frame-dot { @apply h-2.5 w-2.5 rounded-full bg-slate-300; }

  .mk-input {
    @apply mt-1.5 block w-full rounded-lg border border-slate-300 bg-white px-3 py-2.5 text-sm
           text-slate-900 shadow-sm placeholder:text-slate-400 focus:border-brand-500
           focus:outline-none focus:ring-2 focus:ring-brand-500/30;
  }
  .mk-label { @apply block text-sm font-semibold text-slate-800; }

  .mk-prose h2 { @apply mt-10 text-2xl font-bold text-slate-900; }
  .mk-prose p { @apply mt-4 leading-7 text-slate-600; }
}

/* ---------------------------------------------------------------------------
   Arabic (RTL) public website. Deliberately UNLAYERED so it outranks the
   utilities: letter-spacing pulls Arabic letters apart and breaks the joins
   between them, so every tracking-* utility is neutralised on the Arabic
   site. The font stack reaches each platform's own Arabic face (SF Arabic,
   Segoe UI, Noto) — no web-font download, same as the rest of the app.
--------------------------------------------------------------------------- */
[dir="rtl"] .mk-body {
  font-family: system-ui, -apple-system, "SF Arabic", "Segoe UI", "Geeza Pro",
    "Noto Sans Arabic", "Noto Kufi Arabic", Tahoma, sans-serif;
}
[dir="rtl"] .mk-body * { letter-spacing: normal !important; }
[dir="rtl"] .mk-body .mk-h1,
[dir="rtl"] .mk-body .mk-h2,
[dir="rtl"] .mk-body h1,
[dir="rtl"] .mk-body h2 { line-height: 1.3; }
[dir="rtl"] .mk-body p,
[dir="rtl"] .mk-body li { line-height: 1.85; }
/* Product screens are English: they keep their own direction and font. */
[dir="rtl"] .mk-body [dir="ltr"] { font-family: var(--font-sans); }