@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300..700&family=JetBrains+Mono:wght@400;500&display=swap');

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

/* ─── Design tokens ───────────────────────────────────────────────────────────
   Midnight precision instrument. Surfaces step void → carbon → obsidian, layers
   separate with graphite hairlines, text sits on a mist/fog/ash grey ladder, and
   acid lime marks the single primary action per view. Status hues (pulse, coral,
   amber, orange, teal, iris, lavender) are for data indicators only.
   Prefer the Tailwind tokens (bg-carbon, border-graphite, text-fog, …); these
   variables remain for the few places that need runtime values. */
:root {
  color-scheme: dark;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;

  --bg: #08090a;
  --panel: #0f1011;
  --panel-raise: #161718;
  --fg: #d0d6e0;
  --fg-strong: #ffffff;
  --muted: #8a8f98;
  --muted2: #62666d;
  --line: #23252a;
  --line-strong: #383b3f;
  --accent: #e4f222;
  --accent-fg: #08090a;
  --ok: #27a644;
  --info: #02b8cc;
  --warn: #f2c94c;
  --danger: #eb5757;
}

/* ─── Base ────────────────────────────────────────────────────────────────── */
@layer base {
  html { @apply bg-void; }

  body {
    @apply flex h-full min-h-screen w-full bg-void font-sans text-caption text-mist antialiased;
    font-feature-settings: "cv01", "ss03", "zero";
  }

  h1 { @apply text-subheading font-medium tracking-tighter text-white; }
  h2 { @apply text-body-lg font-medium text-white; }
  h3 { @apply text-body font-medium tracking-tight text-white; }
  h4 { @apply text-body-sm font-medium text-white; }
  h5 { @apply text-caption font-medium text-white; }
  h6 { @apply text-label font-medium text-white; }

  a { @apply transition-colors; }

  label { @apply inline-block text-label font-medium text-fog; }

  [type='text'], [type='email'], [type='password'], [type='search'], [type='tel'],
  [type='url'], [type='number'], [type='date'], [type='time'], [type='datetime-local'],
  [type='month'], [type='week'], [type='color'], [type='file'], select, textarea {
    @apply block h-9 w-full rounded-md border border-white/[0.08] bg-white/[0.02] px-3 text-caption text-mist
           shadow-none outline-none transition-colors
           placeholder:text-ash
           hover:border-white/[0.14]
           focus:border-mist/60 focus:bg-white/[0.03] focus:outline-none focus:ring-0;
  }
  textarea { @apply h-auto min-h-[88px] resize-y py-2.5 leading-relaxed; }
  select { @apply pr-9; }
  select option { @apply bg-obsidian text-mist; }
  [type='file'] { @apply h-auto py-2 file:mr-3 file:rounded-md file:border file:border-graphite file:bg-white/5 file:px-3 file:py-1 file:text-label file:text-mist; }

  [type='checkbox'], [type='radio'] {
    @apply h-4 w-4 rounded border-smoke bg-transparent text-lime focus:ring-0 focus:ring-offset-0;
  }
  [type='radio'] { @apply rounded-full; }
  [type='checkbox']:checked, [type='radio']:checked { @apply border-lime bg-lime; }
  [type='checkbox']:checked { background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%2308090a' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e"); }

  ::selection { @apply bg-iris/40 text-white; }

  :focus-visible { @apply outline outline-1 outline-offset-2 outline-mist/60; }
}

@layer components {
  /* ─── Layout ─────────────────────────────────────────────────────────── */
  .container { @apply mx-auto flex w-full max-w-4xl flex-1 flex-col px-4 py-8; }
  .page      { @apply flex w-full flex-col gap-6 px-4 py-6 sm:px-8 sm:py-8; }
  .page-head { @apply flex flex-col gap-3 border-b border-graphite pb-5 sm:flex-row sm:items-end sm:justify-between; }
  .eyebrow   { @apply text-label font-medium text-fog; }
  .field     { @apply my-2 flex flex-col gap-1.5; }
  .kbd       { @apply inline-flex h-[18px] min-w-[18px] items-center justify-center rounded border border-graphite bg-white/[0.04] px-1 font-mono text-micro text-fog; }

  /* ─── Flash ──────────────────────────────────────────────────────────── */
  .notice, .alert {
    @apply fixed right-4 top-4 z-[60] flex max-w-sm items-center gap-2.5 rounded-lg border border-graphite
           bg-obsidian/95 px-3.5 py-2.5 text-caption text-mist shadow-overlay backdrop-blur-xl animate-fade-out;
  }
  .notice::before, .alert::before { content: ''; @apply h-2 w-2 flex-none rounded-full; }
  .notice::before { @apply bg-pulse; }
  .alert::before  { @apply bg-coral; }

  /* ─── Buttons ────────────────────────────────────────────────────────────
     Acid lime is the one chromatic button — a single primary action per view.
     Everything else is a neutral ghost/outline. */
  .btn, .button-base, .button-primary, .button-secondary, .button-secondary-danger {
    @apply inline-flex h-8 cursor-pointer select-none items-center justify-center gap-1.5 whitespace-nowrap
           rounded-md border px-3 text-caption font-medium leading-none tracking-tight no-underline transition
           disabled:pointer-events-none disabled:opacity-40;
  }
  .btn-sm, .button-base-sm, .button-primary-sm, .button-secondary-sm, .button-secondary-danger-sm {
    @apply inline-flex h-7 cursor-pointer select-none items-center justify-center gap-1 whitespace-nowrap
           rounded-md border px-2.5 text-label font-medium leading-none no-underline transition
           disabled:pointer-events-none disabled:opacity-40;
  }
  .button-base, .button-base-sm { @apply border-graphite bg-transparent text-mist hover:bg-white/[0.04]; }
  .button-primary, .button-primary-sm { @apply border-lime bg-lime text-void shadow-lime hover:border-lime-hover hover:bg-lime-hover; }
  .button-secondary, .button-secondary-sm { @apply border-graphite bg-white/[0.02] text-mist hover:border-smoke hover:bg-white/[0.05] hover:text-white; }
  .button-secondary.disabled, .button-secondary-sm.disabled { @apply pointer-events-none opacity-40; }
  .button-secondary-danger, .button-secondary-danger-sm { @apply border-graphite bg-transparent text-coral hover:border-coral/40 hover:bg-coral/[0.06]; }
  .button-ghost { @apply inline-flex h-7 items-center gap-1 rounded-md px-2 text-label text-fog transition hover:bg-white/[0.05] hover:text-mist; }
  .button-pill  { @apply inline-flex h-8 items-center gap-1.5 rounded-full bg-white px-4 text-caption font-medium text-void transition hover:bg-bone; }

  .text-link { @apply inline-flex items-center gap-1 text-caption text-mist transition hover:text-white; }

  /* ─── Pills, badges, chips ────────────────────────────────────────────
     Pills (status, compact triggers) are fully round; badges are 4px. */
  .pill, .pill-primary, .badge-dot {
    @apply inline-flex h-6 items-center gap-1.5 whitespace-nowrap rounded-full bg-white/5 px-2.5 text-label leading-none text-mist;
  }
  .badge, .badge-primary, .badge-secondary, .badge-dive {
    @apply inline-flex h-5 items-center gap-1 whitespace-nowrap rounded bg-white/5 px-1.5 text-label leading-none text-fog;
  }
  .pill .dot, .badge .dot, .pill-primary .dot { @apply h-2 w-2 flex-none rounded-full bg-current; }
  .pill.sm { @apply h-5 px-2 text-[11px]; }

  .pill.in-service,   .pill-primary.green,  .badge-primary.green  { @apply text-pulse; }
  .pill.checked-out,  .pill-primary.blue,   .badge-primary.blue   { @apply text-teal; }
  .pill.needs-service,.pill-primary.red,    .badge-primary.red    { @apply text-coral; }
  .pill-primary.yellow, .badge-primary.yellow { @apply text-amber; }
  .badge-primary.indigo { @apply text-iris; }
  .badge-primary.purple, .badge-primary.pink { @apply text-lavender; }
  .pill.storage { @apply text-fog; }

  .priority--badge, .priority--high, .priority--medium, .priority--low, .tag--generic {
    @apply inline-flex h-5 items-center gap-1.5 rounded bg-white/5 px-1.5 text-label capitalize leading-none;
  }
  .priority--high   { @apply text-orange; }
  .priority--medium { @apply text-amber; }
  .priority--low    { @apply text-fog; }
  .tag--generic     { @apply text-fog; }

  .role-chip { @apply inline-flex h-5 items-center rounded bg-white/5 px-1.5 text-label font-medium text-fog; }
  .role-chip.owner, .role-chip.admin { @apply text-lavender; }
  .role-chip.maintainer              { @apply text-pulse; }
  .role-chip.operator                { @apply text-teal; }

  /* ─── Segmented control ───────────────────────────────────────────────── */
  .seg { @apply inline-flex rounded-md border border-graphite bg-white/[0.02] p-0.5; }
  .seg > button, .seg > a {
    @apply cursor-pointer appearance-none rounded-[4px] border-0 bg-transparent px-2.5 py-1 text-label font-medium text-fog no-underline transition hover:text-mist;
  }
  .seg > button.on, .seg > a.on { @apply bg-white/[0.08] text-white shadow-sm; }

  .button-group { @apply isolate inline-flex items-center rounded-md border border-graphite bg-white/[0.02] p-0.5; }
  .button-group button { @apply rounded-[4px] px-2.5 py-1 text-label font-medium text-fog transition hover:text-mist; }
  .button-group button.active { @apply bg-white/[0.08] text-white; }

  /* ─── Cards & panels ──────────────────────────────────────────────────
     Carbon surface + inset hairline. 12px is the maximum card radius. */
  .card  { @apply rounded-xl border border-graphite bg-carbon p-6; }
  .panel { @apply overflow-hidden rounded-xl border border-graphite bg-carbon; }
  .panel-head { @apply flex items-start justify-between gap-3 border-b border-graphite px-4 py-3; }
  .panel-head .t { @apply text-caption font-medium text-white; }
  .panel-head .s { @apply mt-0.5 text-label text-fog; }
  .panel-body { @apply px-4 py-3; }

  /* ─── Metric tile ─────────────────────────────────────────────────────── */
  .metric { @apply relative overflow-hidden rounded-xl border border-graphite bg-carbon px-4 py-3.5; }
  .metric.urgent { @apply border-coral/30; }
  .metric .m-label { @apply flex items-center justify-between; }
  .metric .m-label > span { @apply text-label font-medium text-fog; }
  .metric .m-value { @apply mt-1.5 text-subheading font-medium tabular-nums text-white; }
  .metric .m-delta { @apply mt-0.5 text-label text-fog; }
  .metric .m-delta.bad { @apply text-coral; }

  /* ─── Machine photo placeholder ───────────────────────────────────────── */
  .photo {
    @apply relative flex flex-none items-center justify-center overflow-hidden text-white/85;
    background: var(--tint, #161718);
  }
  .photo::before {
    content: '';
    @apply absolute inset-0;
    background: repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0, rgba(255,255,255,0.05) 1px, transparent 1px, transparent 8px);
  }
  .photo .id { @apply absolute bottom-1 right-1.5 font-mono text-[8.5px] text-white/75; }

  /* ─── Avatar ──────────────────────────────────────────────────────────── */
  .avatar { @apply inline-flex flex-none items-center justify-center rounded-full font-medium text-white; }

  /* ─── Table ───────────────────────────────────────────────────────────── */
  .data-table { @apply w-full border-collapse text-caption; }
  .data-table td, .data-table th { @apply border-t border-graphite px-4 py-2.5 text-left text-mist; }
  .data-table th { @apply border-t-0 text-label font-medium text-fog; }
  .data-table tbody tr { @apply transition-colors hover:bg-white/[0.02]; }
  .data-table td.mono { @apply font-mono text-fog; }

  /* ─── Markdown prose ──────────────────────────────────────────────────── */
  .markdown { @apply prose prose-invert max-w-4xl py-6 prose-headings:font-medium prose-headings:text-white prose-p:text-mist prose-a:text-white prose-code:font-mono prose-code:text-mist; }
  .markdown p + p { @apply mt-4; }

  .show-details { @apply text-label text-fog; }

  /* ─── Utilities ───────────────────────────────────────────────────────── */
  .mono { @apply font-mono; }
  .tnum { @apply tabular-nums; }
  .hairline { @apply border-graphite; }
}
/*
 * 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.
 *


 */