/*
 * Altron theme — single source of truth.
 *
 * Lifted from tidal-platform/macau-v1/packages/shared-ui/styles/tidal-theme.css.
 * Same shape (DaisyUI 5 `@plugin "daisyui/theme"` declaration, palette vars,
 * `@theme` fonts, `@layer base/utilities`), with three Altron-specific
 * differences:
 *   1. Theme name is "altron".
 *   2. `--color-base-300` is `#e5e7eb` (Tremor neutral border), not the
 *      sea-foam macau uses. We want a lighter divider against the white-sand
 *      canvas to read as a data-product surface, not a marketing site.
 *   3. All radii uniform at 0.375rem (selector, field, box) — tighter than
 *      macau's 0.25/0.25/0.5 split.
 *
 * Import this AFTER Nexus's compiled CSS (which ships a DaisyUI `light`
 * theme). Until Altron has its own Tailwind v4 build, the `@plugin` block
 * is inert and the runtime override section under `:root, [data-theme="light"]`
 * does the actual work. The day Altron gets a Tailwind pipeline, the
 * `@plugin` block becomes the active definition and the override is
 * redundant — by design.
 */

@plugin "daisyui/theme" {
  name: "altron";
  default: true;
  prefersdark: false;
  color-scheme: light;

  /* Tidal brand kit */

  /* Colors - Primary (Shallows) */
  --color-primary: #004554;
  --color-primary-content: #ffffff;

  /* Colors - Secondary (Sea Foam) */
  --color-secondary: #a4c4c7;
  --color-secondary-content: #062b32;

  /* Colors - Accent (Beach Sand) */
  --color-accent: #b0b091;
  --color-accent-content: #ffffff;

  /* Colors - Neutral (Dusk) */
  --color-neutral: #6a687a;
  --color-neutral-content: #ffffff;

  /* Colors - Base */
  --color-base-100: #ffffff;
  --color-base-200: #f5f5f5;
  --color-base-300: #e5e7eb;        /* ← Altron: Tremor neutral, not Sea Foam */
  --color-base-content: #062b32;
  --color-divider: #e5e7eb;

  /* Colors - Info */
  --color-info: #14b4ff;
  --color-info-content: #ffffff;

  /* Colors - Success */
  --color-success: #0bbf58;
  --color-success-content: #ffffff;

  /* Colors - Warning */
  --color-warning: #f5a524;
  --color-warning-content: #062b32;

  /* Colors - Error */
  --color-error: #ef4444;
  --color-error-content: #ffffff;

  /* Border Radius — Altron: uniform 0.375rem across the lot */
  --radius-selector: 0.375rem;
  --radius-field: 0.375rem;
  --radius-box: 0.375rem;

  /* Size */
  --size-selector: 0.25rem;
  --size-field: 0.25rem;

  /* Border */
  --border: 1px;

  /* Depth */
  --depth: 1;

  /* Noise */
  --noise: 0;
}

/* ─── Runtime overlay ──────────────────────────────────────────────────
 * Tailwind v4 hasn't seen the @plugin block at request time (Altron loads
 * Nexus's precompiled CSS, no Vite/Tailwind step), so we redeclare the same
 * tokens against the `light` selector that Nexus's compiled output targets.
 * When Altron gains its own Tailwind build this section can be deleted. */
:root, [data-theme="light"], [data-theme="altron"] {
  --color-primary:           #004554;
  --color-primary-content:   #ffffff;
  --color-secondary:         #a4c4c7;
  --color-secondary-content: #062b32;
  --color-accent:            #b0b091;
  --color-accent-content:    #ffffff;
  --color-neutral:           #6a687a;
  --color-neutral-content:   #ffffff;

  --color-base-100:    #ffffff;
  --color-base-200:    #f5f5f5;
  --color-base-300:    #e5e7eb;
  --color-base-content:#062b32;

  --color-info:    #14b4ff;
  --color-success: #0bbf58;
  --color-warning: #f5a524;
  --color-error:   #ef4444;

  --radius-selector: 0.375rem;
  --radius-field:    0.375rem;
  --radius-box:      0.375rem;
  --rounded-box:     0.375rem;
}

:root {
  /* Core palette */
  --color-deep-sea: #062b32;
  --color-shallows: #004554;
  --color-sea-foam: #a4c4c7;
  --color-sand: #f9e6b0;
  --color-dunes: #fff6dc;

  /* Extended palette */
  --color-seaweed: #2e3f40;
  --color-kelp: #3e6f71;
  --color-blue-lagoon: #6ad0e7;
  --color-beach-sand: #b0b091;
  --color-sea-shell: #e5dfd4;
  --color-white-sand: #f5f5f5;
  --color-dusk: #6a687a;

  /* Shell navigation — references palette vars, not raw hex */
  --shell-bg:          var(--color-deep-sea);
  --shell-text:        #ffffff;
  --shell-text-muted:  var(--color-sea-foam);
  --shell-border:      var(--color-seaweed);
  --shell-nav-active:  var(--color-shallows);
  --shell-nav-hover:   rgba(255, 255, 255, 0.08);
  --canvas-bg:         var(--color-white-sand);
  --surface-bg:        #ffffff;
}

@theme {
  /* Body text — Geist Sans. Headings — same family. Brand serif reserved for
   * any future Instrument-Serif accent moments. The font-sans token is also
   * what Nexus's `.apexcharts-canvas * { @apply font-sans! }` resolves to,
   * so overriding it here flows Geist into every ApexCharts SVG. */
  --font-sans: 'Geist', 'Geist Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-display: 'Geist', 'Geist Sans', ui-sans-serif, system-ui, sans-serif;
  --font-serif: 'Instrument Serif', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
}

/* Plain `:root` fallback for the font token until Tailwind processes @theme. */
:root {
  --font-sans: 'Geist', 'Geist Sans', ui-sans-serif, system-ui, sans-serif;
}

@layer base {
  html, body {
    font-family: 'Geist', 'Geist Sans', ui-sans-serif, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    background: var(--canvas-bg);
    color: var(--color-base-content);
  }
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display, 'Geist'), 'Geist Sans', ui-sans-serif, system-ui, sans-serif;
    letter-spacing: -0.011em;
  }
  dialog {
    font-family: var(--font-sans, 'Geist'), 'Geist Sans', ui-sans-serif, system-ui, sans-serif;
  }

  /* ─── Tremor-style focus ring ───────────────────────────────────────
   * Soft 2px halo at 18% primary via color-mix, 150ms fade. Replaces
   * DaisyUI's default black outline. Mouse clicks still trigger :focus
   * (so SR/script behaviour is preserved) but no ring renders;
   * :focus-visible only fires for keyboard tab / programmatic focus. */
  :where(.input, .select, .textarea, .btn, a, [tabindex]):focus {
    outline: none;
  }
  :where(.input, .select, .textarea, .btn, a, [tabindex]):focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 18%, transparent);
    transition: box-shadow 150ms ease-out, border-color 150ms ease-out;
  }
  :where(.input, .select, .textarea):focus-visible {
    border-color: var(--color-primary);
  }
  :where(.input, .select, .textarea, .btn, a, [tabindex]) {
    transition: box-shadow 150ms ease-out, border-color 150ms ease-out;
  }

  /* ─── Disabled form controls — neutral grey, not teal ─────────────── */
  :where(.input, .select, .textarea):disabled {
    background-color: var(--color-base-200);
    color: var(--color-base-content);
    border-color: var(--color-base-300);
    opacity: 0.7;
    cursor: not-allowed;
  }

  .tabular-nums,
  .kpi-value {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
  }
}

@layer utilities {
  .shell-nav-item        { color: var(--shell-text-muted); }
  .shell-nav-item:hover  { background-color: var(--shell-nav-hover); color: var(--shell-text); }
  .shell-nav-item-active,
  .shell-nav-item-active:hover { background-color: var(--shell-nav-active); color: var(--shell-text); }

  /* Badge ghost — Sea Shell, same as macau. */
  .badge-ghost {
    background-color: var(--color-sea-shell);
    border-color: var(--color-sea-shell);
    color: var(--color-base-content);
  }
}

/* ──────────────────────────────────────────────────────────────────────
 * Altron-specific component layer.
 *
 * Below this line is Altron-only structure (shell, subheader, content,
 * cards/table-shell pattern, filter-group, KPI matrix, skeleton).
 * Macau's tidal-theme.css has equivalents for the topbar/nav under
 * `.tidal-*` class names — Altron uses `.altron-*` because the shells
 * differ. If a class converges across apps, it should graduate up to
 * the theme block above.
 * ────────────────────────────────────────────────────────────────────── */

.altron-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--canvas-bg);
}

.altron-topbar {
  background: var(--shell-bg);
  color: var(--shell-text);
  height: 56px;
  display: flex;
  align-items: center;
  padding: 0 1.25rem;
  gap: 1.5rem;
  border-bottom: 1px solid var(--shell-border);
}
.altron-topbar a, .altron-topbar a:hover { color: inherit; }

.altron-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  flex: 0 0 auto;
  min-height: 24px;
}
.altron-brand__mark {
  display: block;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  color: currentColor;
}
.altron-brand__wordmark {
  display: block;
  font-family: 'Geist', 'Geist Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.altron-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 1;
}
.altron-nav__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--shell-text-muted);
  border-radius: 0.375rem;
  transition: background 120ms ease, color 120ms ease;
}
.altron-nav__item:hover {
  background: var(--shell-nav-hover);
  color: var(--shell-text);
}
.altron-nav__item--active {
  background: var(--shell-nav-active);
  color: var(--shell-text);
}
.altron-nav__label { display: inline; }
@media (max-width: 640px) {
  .altron-nav__label { display: none; }
}

.altron-user {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.875rem;
  color: var(--shell-text-muted);
}
.altron-user__avatar {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--shell-nav-active);
  color: var(--shell-text);
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  font-weight: 600;
}

/* Icon-only circular cog — System link, sits left of the avatar.
 * Lifted from macau's `.tidal-cog`. */
.altron-cog {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  color: var(--shell-text-muted);
  transition: background 120ms ease, color 120ms ease;
}
.altron-cog:hover {
  background: var(--shell-nav-hover);
  color: var(--shell-text);
}
.altron-cog--active,
.altron-cog--active:hover {
  background: var(--shell-nav-active);
  color: var(--shell-text);
}

/* Second-tier nav — sits below the dark topbar on canvas, underlined
 * active state mirroring macau's admin sub-nav. */
.altron-subnav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  background: var(--surface-bg);
  border-bottom: 1px solid var(--color-base-300);
  padding: 0 1.5rem;
}
.altron-subnav__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 0.125rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: oklch(0.55 0 0);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;            /* overlap parent's bottom border */
  transition: color 120ms ease, border-color 120ms ease;
}
.altron-subnav__item:hover {
  color: var(--color-base-content);
}
.altron-subnav__item--active,
.altron-subnav__item--active:hover {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.altron-subheader {
  background: var(--canvas-bg);
  padding: 1.25rem 1.5rem 0.5rem;
}

.altron-page-title {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.011em;
}
.altron-dashboard h1 { font-size: 1.5rem;  font-weight: 600; letter-spacing: -0.011em; margin: 0 0 0.5rem; }
.altron-dashboard h2 { font-size: 1rem;    font-weight: 600; margin: 1.25rem 0 0.5rem; }
.altron-dashboard h3 { font-size: 0.95rem; font-weight: 500; margin: 1rem 0 0.5rem; }

/* Tidal primary button — Shallows green, not Nexus grey. */
.btn-primary,
.btn.btn-neutral {
  background: var(--color-primary);
  color: var(--color-primary-content);
  border-color: var(--color-primary);
}
.btn-primary:hover, .btn.btn-neutral:hover {
  background: oklch(from var(--color-primary) calc(l + 0.05) c h);
  border-color: oklch(from var(--color-primary) calc(l + 0.05) c h);
}

/* Filter — label above, DaisyUI `select select-sm` underneath. */
.filter-group {
  display: inline-flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 9rem;
}
.filter-group__label {
  font-size: 0.75rem;
  font-weight: 500;
  color: oklch(0.45 0 0);
  padding-left: 0.125rem;
}
.filter-group .select {
  border-radius: 0.375rem;
  border-color: var(--color-base-300);
  background-color: var(--color-base-100);
}

.altron-content {
  padding: 1.25rem 1.5rem 2rem;
}

@media (max-width: 768px) {
  .altron-content   { padding: 1rem; }
  .altron-subheader { padding: 1rem 1rem 0.25rem; }
  .altron-topbar    { padding: 0 0.875rem; gap: 1rem; }
}

/* ─── Cards — Tremor-aligned ─────────────────────────────────────────── */
.card {
  background-color: var(--surface-bg);
  border: 1px solid var(--color-base-300);
  border-radius: 0.375rem !important;
  box-shadow: none !important;
}
.card-body {
  padding: 1.125rem 1.25rem !important;
}

/* ─── Table-Shell pattern: toolbar padded, table edge-to-edge ─────────
   Adapted from macau-v1/packages/shared-ui/components/table-shell.ts. */
.ts-header {
  padding: 1.125rem 1.25rem 0;
}
.ts-table {
  position: relative;
  margin-top: 0.5rem;
}
.ts-table > table,
.ts-table > .overflow-x-auto > table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.ts-table table thead th {
  background: var(--color-base-100);
  border-top: 1px solid var(--color-base-300);
  border-bottom: 1px solid var(--color-base-300);
  font-size: 0.875rem;
  font-weight: 500;
  color: oklch(0.55 0 0);
  padding: 0.625rem 0.875rem;
}
.ts-table table thead th:first-child { padding-left: 1.25rem; }
.ts-table table thead th:last-child  { padding-right: 1.25rem; }
.ts-table table tbody td {
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  border-bottom: 1px solid oklch(0.95 0 0);
}
/* Wide matrix tightens to 12px so all 14 cols fit at 1440 without overflow. */
.altron-matrix .ts-table table thead th,
.altron-matrix .ts-table table tbody td { font-size: 0.75rem; padding: 0.5rem 0.625rem; }
.altron-matrix .ts-table table thead th:first-child,
.altron-matrix .ts-table table tbody td:first-child { padding-left: 1rem; }
.altron-matrix .ts-table table thead th:last-child,
.altron-matrix .ts-table table tbody td:last-child { padding-right: 1rem; }
.ts-table table tbody tr:last-child td { border-bottom: none; }
.ts-table table tbody td:first-child   { padding-left: 1.25rem; }
.ts-table table tbody td:last-child    { padding-right: 1.25rem; }
.ts-table table tbody tr:hover         { background: oklch(0.985 0 0); }

/* Matrix variant — sticky first column inside ts-table */
.altron-matrix .ts-table table thead th:first-child,
.altron-matrix .ts-table table tbody td:first-child {
  position: sticky;
  left: 0;
  background: var(--color-base-100);
  z-index: 1;
  box-shadow: 1px 0 0 0 var(--color-base-300);
}

/* ─── Badges — softer than Nexus default ─────────────────────────────── */
.badge-soft.badge-success { background: oklch(0.95 0.05 150 / 0.6); color: oklch(0.40 0.13 150); }
.badge-soft.badge-error   { background: oklch(0.95 0.04 28  / 0.6); color: oklch(0.45 0.18 28); }
.badge-soft.badge-warning { background: oklch(0.96 0.05 90  / 0.6); color: oklch(0.45 0.15 90); }

/* ─── Skeleton — calmer ──────────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(110deg, oklch(0.94 0 0) 30%, oklch(0.97 0 0) 50%, oklch(0.94 0 0) 70%);
  background-size: 200% 100%;
  animation: altron-skel 1.6s linear infinite;
  border-radius: 0.375rem;
}
@keyframes altron-skel {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Search-input chrome reset, copied verbatim from macau. */
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}