/* InteliLicense — daisyUI theme tokens + a few app-level rules.
   Loaded in both modes (CDN dev build and compiled app.css).

   Colours follow InteliSIM (intelisim/frontend/src/theme/tokens/colors.js), both from the
   Intelimek logo: primary = the logo blue one step lighter (#2266CC; the logo's #0C4DA2 reads
   heavy as a fill), accent = the logo magenta #ED0281, used only for brand marks that aren't
   controls (progress bar, active nav marker, the dot beside the app name). Neutrals are
   InteliSIM's cool greys; the dark scheme is its viewer palette. */

:root,
[data-theme="keys"] {
  color-scheme: light;
  --color-base-100: #ffffff;
  --color-base-200: #f5f6fc;
  --color-base-300: #e7e8f1;
  --color-base-content: #10151c;
  --color-primary: #2266cc;
  --color-primary-content: #ffffff;
  --color-secondary: #f1f2f8;
  --color-secondary-content: #10151c;
  --color-accent: #ed0281;
  --color-accent-content: #ffffff;
  --color-neutral: #10151c;
  --color-neutral-content: #ffffff;
  --color-info: #0f7b8a;
  --color-info-content: #ffffff;
  --color-success: #0e8a5f;
  --color-success-content: #ffffff;
  --color-warning: #b26a00;
  --color-warning-content: #ffffff;
  --color-error: #c0182b;
  --color-error-content: #ffffff;
  --brand-logo-blue: #0c4da2;
  --brand-plate-ring: #e3e5ee;
  --nav-active-bg: #edf3fb;
  --radius-selector: 0.375rem;
  --radius-field: 0.5rem;
  --radius-box: 0.625rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 0;
  --noise: 0;
}

[data-theme="keys-dark"] {
  color-scheme: dark;
  --color-base-100: #151d26;
  --color-base-200: #10161d;
  --color-base-300: #2c3a49;
  --color-base-content: #e6edf3;
  --color-primary: #4f9dff;
  --color-primary-content: #0b1016;
  --color-secondary: #1b2530;
  --color-secondary-content: #e6edf3;
  --color-accent: #f2489e;
  --color-accent-content: #0b1016;
  --color-neutral: #e6edf3;
  --color-neutral-content: #10161d;
  --color-info: #2aa7b8;
  --color-info-content: #0b1016;
  --color-success: #45c08a;
  --color-success-content: #0b1016;
  --color-warning: #e3a33a;
  --color-warning-content: #0b1016;
  --color-error: #ef6b6b;
  --color-error-content: #0b1016;
  --brand-plate-ring: transparent;
  --nav-active-bg: #1d2f44;
}

/* Tailwind v4 defaults borders to currentColor; use the theme's hairline instead. */
@layer base {
  *, ::before, ::after { border-color: var(--color-base-300); }
  html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scrollbar-gutter: stable; }
  body {
    font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-feature-settings: "cv11", "ss01", "ss03";
    background: var(--color-base-200);
  }
  .font-mono, code, pre, kbd { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }
  .tabular { font-variant-numeric: tabular-nums; }
  [x-cloak] { display: none !important; }

  ::selection { background: color-mix(in oklab, var(--color-primary) 25%, transparent); }
}

@layer components {
  /* tables: quieter header, row hover, clickable rows */
  .data-table thead th {
    font-size: 0.75rem; font-weight: 500; text-transform: none; letter-spacing: 0;
    color: color-mix(in oklab, var(--color-base-content) 55%, transparent);
    background: color-mix(in oklab, var(--color-base-200) 60%, transparent);
    white-space: nowrap;
  }
  .data-table tbody tr { transition: background-color .12s; }
  .data-table tbody tr[data-href] { cursor: pointer; }
  .data-table tbody tr:hover { background: color-mix(in oklab, var(--color-base-200) 70%, transparent); }
  .data-table td, .data-table th { padding-block: 0.625rem; }
  .data-table :where(thead, tbody) :where(tr:not(:last-child)),
  .data-table :where(thead, tbody) :where(tr:first-child:last-child) {
    border-bottom-color: var(--color-base-300);
  }

  /* sidebar nav */
  .nav-link {
    display: flex; align-items: center; gap: .625rem; height: 2.25rem; padding-inline: .75rem; border-radius: .5rem;
    font-size: .875rem; font-weight: 500; color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
    transition: background-color .12s, color .12s;
  }
  .nav-link svg { color: color-mix(in oklab, var(--color-base-content) 45%, transparent); transition: color .12s; }
  .nav-link:hover { background: var(--color-base-200); color: var(--color-base-content); }
  .nav-link:hover svg { color: color-mix(in oklab, var(--color-base-content) 70%, transparent); }
  .nav-link[aria-current="page"],
  .nav-link[aria-current="page"]:hover { background: var(--nav-active-bg); color: var(--color-primary); }
  .nav-link[aria-current="page"] svg { color: var(--color-primary); }

  /* brand: the logo mark on a white plate (its blue is too dark for the dark scheme), the
     full logo in a light and a dark version, and a magenta dot like the logo's */
  .brand-plate {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    background: #fff; border-radius: .5rem; box-shadow: 0 0 0 1px var(--brand-plate-ring);
  }
  .logo-dark { display: none; }
  [data-theme="keys-dark"] .logo-light { display: none; }
  [data-theme="keys-dark"] .logo-dark { display: inline-block; }
  .brand-dot { width: .5rem; height: .5rem; border-radius: 999px; background: var(--color-accent); flex: none; }

  /* page-level tab strip */
  .tab-strip { display: flex; gap: 1.25rem; border-bottom: 1px solid var(--color-base-300); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .tab-strip a {
    padding: .625rem 0; font-size: .875rem; white-space: nowrap; margin-bottom: -1px;
    color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
    border-bottom: 2px solid transparent;
  }
  .tab-strip a:hover { color: var(--color-base-content); }
  .tab-strip a[aria-current="page"] { color: var(--color-base-content); border-bottom-color: var(--color-base-content); font-weight: 500; }

  /* segmented control */
  .segmented { display: inline-flex; padding: 2px; gap: 2px; border-radius: .5rem; background: var(--color-base-200); border: 1px solid var(--color-base-300); }
  .segmented > * { padding: .25rem .625rem; font-size: .8125rem; border-radius: .375rem; color: color-mix(in oklab, var(--color-base-content) 65%, transparent); }
  .segmented > [aria-current="page"], .segmented > .active { background: var(--color-base-100); color: var(--color-base-content); box-shadow: 0 1px 2px rgb(0 0 0 / .06); }

  /* grid columns must be allowed to shrink below wide <pre> content */
  main .grid > * { min-width: 0; }

  /* surfaces */
  .surface { background: var(--color-base-100); border: 1px solid var(--color-base-300); border-radius: var(--radius-box); }
  .code-block {
    background: var(--color-base-200); border: 1px solid var(--color-base-300); border-radius: .5rem;
    font-size: .75rem; line-height: 1.55; padding: .875rem 1rem; overflow-x: auto; white-space: pre;
  }
  .dl-grid { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; column-gap: 1.5rem; row-gap: .625rem; font-size: .875rem; }
  .dl-grid dt { color: color-mix(in oklab, var(--color-base-content) 55%, transparent); }
  .dl-grid dd { min-width: 0; overflow-wrap: anywhere; }

  .chip {
    display: inline-flex; align-items: center; gap: .25rem; padding: .0625rem .5rem; border-radius: .375rem;
    font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .75rem;
    background: var(--color-base-200); border: 1px solid var(--color-base-300);
  }
  .dropzone { border: 1px dashed color-mix(in oklab, var(--color-base-content) 25%, transparent); border-radius: var(--radius-box); transition: border-color .12s, background-color .12s; }
  .dropzone.is-over { border-color: var(--color-primary); background: color-mix(in oklab, var(--color-primary) 6%, transparent); }

  .htmx-request.htmx-indicator, .htmx-request .htmx-indicator { opacity: 1; }
  .htmx-indicator { opacity: 0; transition: opacity .15s; }
  #results.htmx-request { opacity: .6; transition: opacity .15s; }


  /* toasts */
  #toasts { position: fixed; right: 1rem; bottom: 1rem; z-index: 60; display: flex; flex-direction: column; gap: .5rem; pointer-events: none; }
  .toast-item {
    pointer-events: auto; display: flex; align-items: center; gap: .625rem; min-width: 14rem; max-width: 24rem;
    padding: .625rem .875rem; font-size: .875rem; border-radius: .625rem;
    background: var(--color-neutral); color: var(--color-neutral-content);
    box-shadow: 0 8px 24px -8px rgb(0 0 0 / .25); transition: opacity .3s, transform .3s;
  }
  .toast-item::before { content: ""; width: .5rem; height: .5rem; border-radius: 999px; background: var(--color-success); flex: none; }
  .toast-item[data-kind="error"]::before { background: var(--color-error); }
  .toast-item[data-kind="warning"]::before { background: var(--color-warning); }
  .toast-item[data-kind="info"]::before { background: var(--color-info); }

  /* command palette */
  #palette-results a { display: flex; align-items: center; gap: .625rem; padding: .5rem .75rem; border-radius: .5rem; font-size: .875rem; }
  #palette-results a:hover, #palette-results a.is-active { background: var(--color-base-200); }
}

/* ───────────────────────── Motion ─────────────────────────
   Material-style easing, ripples, page + swap transitions. All disabled for reduced motion. */
:root {
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(0, 0, .2, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
}

@layer components {
  /* theme switcher */
  .theme-icon-dark { display: none; }
  [data-theme="keys-dark"] .theme-icon-light { display: none; }
  [data-theme="keys-dark"] .theme-icon-dark { display: inline-flex; }
  .theme-check { visibility: hidden; }
  [data-theme-option].active .theme-check { visibility: visible; }

  /* interactive surfaces: smooth state changes + press feedback */
  .btn, .input, .select, .textarea, .toggle, .checkbox, .radio, .nav-link, .segmented > *, .menu li > *, .chip, a, .surface {
    transition-property: color, background-color, border-color, box-shadow, opacity, transform;
    transition-duration: var(--dur-fast);
    transition-timing-function: var(--ease-standard);
  }
  .btn:not(:disabled):active, .segmented > *:active { transform: scale(.97); }
  .input:focus-within, .select:focus, .textarea:focus {
    border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary) 18%, transparent);
  }
  a.surface:hover { transform: translateY(-1px); box-shadow: 0 6px 20px -10px rgb(0 0 0 / .18); }

  /* ripple */
  .btn, .nav-link, .segmented > *, .menu li > button, .menu li > a, .ripple { position: relative; overflow: hidden; }
  .ripple-ink {
    position: absolute; border-radius: 999px; pointer-events: none; background: currentColor;
    opacity: .16; transform: scale(0); animation: ripple 520ms var(--ease-out) forwards;
  }
  @keyframes ripple { to { transform: scale(1); opacity: 0; } }

  /* sliding tab ink (view transitions move it between tabs) */
  .tab-strip a { position: relative; }
  .tab-strip a[aria-current="page"] { border-bottom-color: transparent; }
  .tab-ink { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--color-primary); }

  /* dropdowns + toasts + swapped content */
  .dropdown:focus-within > .dropdown-content, .dropdown-content:focus-within { animation: pop var(--dur) var(--ease-out); }
  .dropdown-top:focus-within > .dropdown-content { animation-name: pop-up; }
  @keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
  @keyframes pop-up { from { opacity: 0; transform: translateY(4px) scale(.98); } }
  .toast-item { animation: toast-in 260ms var(--ease-out); }
  @keyframes toast-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
  /* refreshed lists fade in place — no movement */
  .swap-in { animation: fade-in 160ms var(--ease-out); }
  @keyframes fade-in { from { opacity: .35; } }

  /* modal box eases in with the standard curve */
  .modal .modal-box { transition-timing-function: var(--ease-out); transition-duration: 240ms; }

  /* top progress bar */
  #progress {
    position: fixed; inset: 0 auto auto 0; height: 2px; width: 0; z-index: 100; opacity: 0;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    box-shadow: 0 0 8px color-mix(in oklab, var(--color-accent) 50%, transparent);
    transition: width 300ms var(--ease-out), opacity 300ms ease;
  }
}

/* cross-page transitions (Chromium): only the content area animates.
   Sidebar and header are pinned — no morphing, no cross-fade, they just swap. */
@view-transition { navigation: auto; }
.app-sidebar { view-transition-name: sidebar; }
.app-header { view-transition-name: topbar; }
.app-main { view-transition-name: content; }
::view-transition-group(*) { animation-duration: 260ms; animation-timing-function: var(--ease-standard); }
::view-transition-group(root), ::view-transition-group(sidebar), ::view-transition-group(topbar),
::view-transition-group(content) { animation: none; }
::view-transition-old(root), ::view-transition-new(root),
::view-transition-new(sidebar), ::view-transition-new(topbar) { animation: none; }
::view-transition-old(sidebar), ::view-transition-old(topbar) { display: none; }
/* between pages: a short cross-fade, nothing moves. Tab / filter changes on the same page skip it (see _head.html). */
::view-transition-old(content) { animation: 90ms var(--ease-in) both vt-out; }
::view-transition-new(content) { animation: 150ms var(--ease-out) both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  @view-transition { navigation: none; }
}