/* Antarestar UI Standard v0 tokens. Unlayered on purpose: it wins over daisyUI and Tailwind (both use @layer). */

/* @font-face for InterVariable and PlusJakartaSansVariable is in layout.html (versioned URLs). */

:root {
  --font-sans: InterVariable, Inter, system-ui, sans-serif;
  --font-heading: PlusJakartaSansVariable, "Plus Jakarta Sans", var(--font-sans); /* headings only; UI text and numbers stay Inter */
  /* Type scale (size / line height). Mobile first; desktop below. */
  --text-xs: 13px; --text-xs-lh: 18px;
  --text-body: 16px; --text-body-lh: 24px;
  --text-md: 16px;
  --text-h2: 18px; --text-h2-lh: 28px;
  --text-h1: 20px; --text-h1-lh: 28px;

  /* Brand is decoration only (logo, stripe). Actions use --color-action (AA with white). */
  --color-brand: #FD5E02;
  --color-action: #C2410C;   /* 5.2:1 with white */
  --color-text: #13262D;     /* 15.6:1 on white */
  --color-muted: #5A676C;    /* 5.8:1 on white */
  --color-border-input: #868F94; /* 3.2:1, WCAG 1.4.11 */

  /* Status tones: text on tint, all >= 4.5:1. The label carries the meaning; color only supports it. */
  --st-action-fg: #8A4B00;   --st-action-bg: #FFF4E0;
  --st-critical-fg: #B42318; --st-critical-bg: #FEECEB;
  --st-progress-fg: #075E73; --st-progress-bg: #E6F4F7;
  --st-done-fg: #067647;     --st-done-bg: #E7F6EE;
  --st-neutral-fg: #475467;  --st-neutral-bg: #F2F4F7;

  /* Density (compact table) on a 4 px grid. */
  --row-pad-block: 6px; --row-pad-inline: 8px;
  --gutter: 16px;
}
@media (min-width: 48rem) {
  :root {
    --text-xs: 12px; --text-xs-lh: 16px;
    --text-body: 13px; --text-body-lh: 20px;
    --text-md: 14px;
    --text-h2: 16px; --text-h2-lh: 24px;
    --gutter: 24px;
  }
}

/* Light theme (default) and dark theme below. Antarestar brand: orange #FD5E02, deep teal #013B4C, yellow #F2CE3D. */
[data-theme] {
  color-scheme: light;
  --radius-box: 0.5rem; --radius-field: 0.375rem; --radius-selector: 0.5rem;
  --color-primary: var(--color-action); --color-primary-content: #ffffff;
  --color-secondary: #013B4C; --color-secondary-content: #ffffff;
  --color-accent: #F2CE3D; --color-accent-content: #2b2300;
  --color-success: #067647; --color-success-content: #ffffff;
  --color-error: #B42318; --color-error-content: #ffffff;
  --color-info: #075E73; --color-info-content: #ffffff;
  --color-warning: #FDB022; --color-warning-content: #13262D;
  --color-base-100: #ffffff; --color-base-200: #FBF6F1; --color-base-300: #EDE3DA; --color-base-content: var(--color-text);
  --color-neutral: #013B4C; --color-neutral-content: #ffffff;
  --tile-selected-bg: #FAF0EC; /* selected count tile: color-mix(--color-action 8%, base-100), as hex for contrast_test.go */
}

/* Dark theme: the same tokens, redefined. The head script in layout.html sets data-theme="dark" for "Gelap".
   Every pair is checked >= AA in contrast_test.go. */
[data-theme="dark"] {
  color-scheme: dark;
  --color-action: #FF8A3D;   /* 6.7:1 on base-100; light orange, so text on it is dark */
  --color-text: #E6EEF0;     /* 13.3:1 on base-100 */
  --color-muted: #9DAFB5;    /* 6.9:1 on base-100 */
  --color-border-input: #6E8790; /* 4.1:1 on base-100 */
  --st-action-fg: #FFC46B;   --st-action-bg: #3B2A0E;
  --st-critical-fg: #FFA198; --st-critical-bg: #43191A;
  --st-progress-fg: #7FD4E8; --st-progress-bg: #0D3541;
  --st-done-fg: #7EDDA9;     --st-done-bg: #0E3524;
  --st-neutral-fg: #C5CFD6;  --st-neutral-bg: #25343B;
  --color-primary-content: #1F0D00;
  --color-secondary: #0E6A85; /* deep teal lifted so it shows on the dark base */
  --color-success: #5FD39A; --color-success-content: #062A18;
  --color-error: #FF8A80; --color-error-content: #2A0B08;
  --color-info: #6CC8DE; --color-info-content: #062530;
  --color-base-100: #10262E; --color-base-200: #0A1C22; --color-base-300: #24414B;
  --color-neutral: #06161B; --color-neutral-content: #E3EEF1;
  --tile-selected-bg: #2D3230; /* color-mix(--color-action 12%, base-100) */
}

body { font-family: var(--font-sans); font-size: var(--text-body); line-height: var(--text-body-lh); }
h1.page-title { font-size: var(--text-h1); line-height: var(--text-h1-lh); font-weight: 650; } /* one per page (Polaris title) */
h2 { font-size: var(--text-h2); line-height: var(--text-h2-lh); font-weight: 600; }
h1, h2, h3, .page-title, .card-title, .brand { font-family: var(--font-heading); }

/* Numbers line up in columns. Codes (SKU, order no., resi) use Inter with tabular, slashed-zero digits. */
table, .num, dd { font-variant-numeric: tabular-nums; }
.code, .font-mono { font-family: var(--font-sans); font-feature-settings: "tnum", "zero"; }

/* Wide tables scroll inside their own box, never the page (WCAG 1.4.10). */
.drawer-content, main { min-width: 0; max-width: 100vw; }

/* Compact table density: 13 px desktop, 6/8 px padding. */
.table, .table-sm :not(thead, tfoot) tr { font-size: var(--text-body); }
.table-sm :where(th, td) { padding: var(--row-pad-block) var(--row-pad-inline); }
.table thead th { font-weight: 500; color: var(--color-muted); }

/* Muted text never below AA: 40% and 60% opacity measured 2.4:1 and 4.2:1. */
/* "html body": the Tailwind browser CDN injects its <style> after app.css, so equal specificity could lose to it. */
html body .text-base-content\/40, html body .text-base-content\/60, html body .text-base-content\/70, .text-muted { color: var(--color-muted); }

.input, .select { border-color: var(--color-border-input); }
/* Focus ring in the action color (>= 3:1 on white and base-200) with a 2 px offset, on every focusable part,
   never the browser default or a border-only change. tabindex="-1" (skip link target) gets none. */
.input:focus-within, .select:focus,
:where(a, button, summary, .btn, .tab, .checkbox, .toggle, .join-item, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--color-action); outline-offset: 2px;
}
:where([tabindex="-1"]):focus { outline: none; }

/* Status badges (st-*). daisyUI soft badges map to the same AA pairs (their own colors measured 1.9-4.4:1). */
.st-action, .badge-soft.badge-warning { color: var(--st-action-fg); background-color: var(--st-action-bg); border-color: transparent; }
.st-critical, .badge-soft.badge-error { color: var(--st-critical-fg); background-color: var(--st-critical-bg); border-color: transparent; }
.st-progress, .badge-soft.badge-info, .badge-soft.badge-primary { color: var(--st-progress-fg); background-color: var(--st-progress-bg); border-color: transparent; }
.st-done, .badge-soft.badge-success { color: var(--st-done-fg); background-color: var(--st-done-bg); border-color: transparent; }
.st-neutral, .badge-soft.badge-ghost { color: var(--st-neutral-fg); background-color: var(--st-neutral-bg); border-color: transparent; }
/* Dark: the lifted secondary teal is a button color, too dark as text; soft secondary badges (master tags) use progress. */
[data-theme="dark"] .badge-soft.badge-secondary { color: var(--st-progress-fg); background-color: var(--st-progress-bg); border-color: transparent; }

/* Sidebar. */
.sb-aside .menu { --menu-active-bg: var(--color-action); --menu-active-fg: var(--color-primary-content); }
/* Group title: a small uppercase label with a chevron (daisyUI's summary arrow), not a page link. */
.sb-group { margin-top: 0.75rem; }
.sb-group > details > summary.sb-group-title {
  padding-block: 0.25rem; font-size: var(--text-xs); line-height: var(--text-xs-lh); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: color-mix(in oklab, var(--color-neutral-content) 72%, var(--color-neutral)); /* 7:1 on the sidebar */
}
.sb-group > details > summary.sb-group-title:hover { color: var(--color-neutral-content); background-color: rgb(255 255 255 / 0.08); }
.sb-group > details > summary.sb-group-title::after { width: 0.4375rem; height: 0.4375rem; translate: 0; rotate: 135deg; } /* closed: points right */
.sb-group > details[open] > summary.sb-group-title::after { rotate: 225deg; } /* open: points down */
.sb-group-title:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.sb-group ul { margin-inline-start: 0; padding-inline-start: 0; }
.sb-group ul::before { display: none; }
@media (min-width: 64rem) { /* lg: icon-only sidebar */
  .sb-collapsed .sb-aside { width: 4.5rem; }
  .sb-collapsed .sb-label { display: none; }
  .sb-collapsed .sb-aside :where(.menu a, .btn) { justify-content: center; }
  .sb-collapsed .sb-toggle svg { transform: rotate(180deg); }
  /* Icon rail: titles hidden, every group's items shown whatever its saved state. */
  .sb-collapsed .sb-group { margin-top: 0; }
  .sb-collapsed .sb-group details::details-content { block-size: auto; content-visibility: visible; }
}
.st-action, .st-critical, .st-progress, .st-done, .st-neutral { white-space: nowrap; }
.tab { color: var(--color-muted); }
.tab.tab-active { color: var(--color-text); font-weight: 500; }

/* Phones and small tablets: 44 px tap targets (WCAG 2.5.8 AAA size), tabs scroll sideways. Desktop density unchanged. */
@media (max-width: 47.99rem) {
  .btn, .menu li > a, summary, .tab, .join-item, .input, .select { min-height: 44px; }
  label:has(> .checkbox, > .toggle) { min-height: 44px; align-items: center; } /* the label is the hit area */
  .tabs { flex-wrap: nowrap; overflow-x: auto; padding: 4px; } /* padding: the scroll box would clip the 2 px ring + 2 px offset */
  .tabs > .tab { flex-shrink: 0; }
}

/* Skip link: first in <body>, hidden until focused. */
.skip-link { position: absolute; left: 0.5rem; top: 0.5rem; z-index: 50; padding: 0.5rem 0.75rem; border-radius: var(--radius-field);
  background: var(--color-base-100); color: var(--color-text); font-weight: 600; transform: translateY(-200%); }
.skip-link:focus { transform: none; }

/* Breadcrumb in the top bar: "Group › Page", the page is aria-current and wins the space. */
.crumbs ol { display: flex; min-width: 0; align-items: baseline; gap: 0.375rem; white-space: nowrap; }
.crumbs li { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.crumbs li:not([aria-current]) { flex-shrink: 2; font-weight: 500; color: var(--color-muted); }
.crumbs li + li::before { content: "›"; margin-inline-end: 0.375rem; color: var(--color-muted); }

/* Count tiles: a grid of links (one per view/status), the selected one has aria-current. */
.count-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
@media (min-width: 48rem) { .count-tiles { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.75rem; } }
.count-tiles > a { display: flex; min-height: 44px; min-width: 0; flex-direction: column; gap: 0.125rem; padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-base-300); border-radius: var(--radius-box); background: var(--color-base-100); color: var(--color-text);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05); transition: box-shadow 0.15s; }
.count-tiles > a:hover { box-shadow: 0 2px 8px rgb(0 0 0 / 0.14); }
.count-tiles > a[aria-current] { border-color: var(--color-action); background: var(--tile-selected-bg); }
.count-tiles > a[aria-current] { border-width: 2px; }
.count-tiles > a[aria-current] .tile-value { font-weight: 700; }
.tile-label { font-size: var(--text-xs); line-height: var(--text-xs-lh); color: var(--color-muted); }
.tile-value { font-size: var(--text-h2); line-height: var(--text-h2-lh); font-weight: 600; font-variant-numeric: tabular-nums; }
.tile-def { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-xs); line-height: var(--text-xs-lh); color: var(--color-muted); }

/* Filters: <details class="filters" open><summary>Filter …</summary><form>…</form></details>. Phones get a
   "Filter (n aktif)" button (layout JS closes it on load); from 48rem the summary is hidden and the form always shows. */
.filters > summary { list-style: none; width: fit-content; cursor: pointer; }
.filters > summary::-webkit-details-marker { display: none; }
.filters[open] > summary { margin-bottom: 0.75rem; }
@media (min-width: 48rem) {
  .filters > summary { display: none; }
  .filters::details-content { block-size: auto; content-visibility: visible; }
}

/* Empty state: icon in a base-200 circle, bold title, muted helper, at most one CTA ("Hapus filter" when filtered). */
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 2.5rem 1rem; text-align: center; }
.empty-state .empty-icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 9999px;
  background: var(--color-base-200); color: var(--color-muted); }
.empty-state .empty-title { font-weight: 600; color: var(--color-text); }
.empty-state .empty-help { max-width: 48ch; color: var(--color-muted); }

/* app-only: rules for this app only go below; other apps copy everything above this line. */