/* ==========================================================================
   FUEL STOCK TRACKER — DESIGN TOKENS
   Dark theme: "Apple Dark" — near-black, cool neutral grays, soft surfaces,
   translucent topbar, blue primary. Light theme stays Apple clean high-key.
   ========================================================================== */

:root {
  color-scheme: dark;
  /* ------------------------------------------------------------------ *
   *  TYPOGRAPHY
   * ------------------------------------------------------------------ */
  --font-sans: 'Space Grotesk', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --font-ui: var(--font-sans);
  --font-kurdish: 'Peshang Des 2', 'Space Grotesk', sans-serif;

  --fs-xs: 11px;
  --fs-sm: 12.5px;
  --fs-base: 14px;
  --fs-md: 15px;
  --fs-lg: 17px;
  --fs-xl: 21px;
  --fs-2xl: 28px;

  --lh-tight: 1.2;
  --lh-base: 1.5;

  /* ------------------------------------------------------------------ *
   *  CORE PALETTE — Apple dark: near-black, cool neutral grays
   * ------------------------------------------------------------------ */
  --bg: #000000;
  --bg-elevated: #1c1c1e;
  --panel: #1c1c1e;
  --panel-hover: #26262a;
  --panel-active: #2c2c2e;

  --sidebar-bg: #0b0b0d;
  --sidebar-border: #2a2a2c;

  --border: #2a2a2c;
  --border-soft: #242427;
  --border-strong: #3a3a3c;

  --text: #f5f5f7;
  --text-dim: #a1a1a6;
  --text-faint: #6e6e73;

  /* ------------------------------------------------------------------ *
   *  ACCENT — Apple blue primary
   * ------------------------------------------------------------------ */
  --accent: #0a84ff;
  --accent-strong: #409cff;
  --accent-dim: #4da3ff;
  --accent-bg: rgba(10, 132, 255, .16);
  --accent-border: rgba(10, 132, 255, .48);
  --accent-sel: rgba(10, 132, 255, .22);
  --on-accent: #ffffff;

  /* ------------------------------------------------------------------ *
   *  FUEL IDENTITY COLORS
   * ------------------------------------------------------------------ */
  --fuel-diesel: #0a84ff;
  --fuel-diesel-bg: rgba(10, 132, 255, .18);
  --fuel-diesel-border: rgba(10, 132, 255, .5);

  --fuel-hfo: #5ac8fa;
  --fuel-hfo-bg: rgba(90, 200, 250, .15);
  --fuel-hfo-border: rgba(90, 200, 250, .45);

  --fuel-lpg: #64b5ff;
  --fuel-lpg-bg: rgba(100, 181, 255, .15);
  --fuel-lpg-border: rgba(100, 181, 255, .42);

  /* ------------------------------------------------------------------ *
   *  SEMANTIC STATUS — Apple system colors
   * ------------------------------------------------------------------ */
  --good: #30d158;
  --good-bg: rgba(48, 209, 88, .14);
  --warn: #ffd60a;
  --warn-bg: rgba(255, 214, 10, .12);
  --bad: #ff453a;
  --bad-bg: rgba(255, 69, 58, .14);
  --info: #bf5af2;
  --info-bg: rgba(191, 90, 242, .12);

  /* ------------------------------------------------------------------ *
   *  SHAPE — relaxed radii (final values tuned in apple.css)
   * ------------------------------------------------------------------ */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --badge-radius: 10px;

  /* ------------------------------------------------------------------ *
   *  ELEVATION — soft depth shadows, hairline top-light
   * ------------------------------------------------------------------ */
  --elevation-1: 0 0 0 1px rgba(255, 255, 255, .04), 0 1px 3px rgba(0, 0, 0, .5);
  --elevation-2: 0 6px 18px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .4);
  --elevation-3: 0 20px 56px rgba(0, 0, 0, .7), 0 4px 12px rgba(0, 0, 0, .5);

  /* ------------------------------------------------------------------ *
   *  MOTION — slow & light (per spec)
   * ------------------------------------------------------------------ */
  --motion-fast: 140ms cubic-bezier(.33, 0, .2, 1);
  --motion-base: 260ms cubic-bezier(.33, 0, .16, 1);
  --motion-spring: 420ms cubic-bezier(.22, 1, .3, 1);
  --motion-drawer: 300ms cubic-bezier(.25, .9, .25, 1);

  /* ------------------------------------------------------------------ *
   *  LAYOUT DIMENSIONS
   * ------------------------------------------------------------------ */
  --sidebar-w: 280px;
  --sidebar-rail-w: 72px;
  --topbar-h: 56px;
  --brand-h: 64px;

  --nav-item-h: 42px;
  --nav-item-gap: 3px;
  --nav-section-gap: 14px;
  --nav-font-size: 13.5px;
  --nav-font-weight: 550;
  --nav-icon-size: 19px;
  --nav-badge-size: 17px;

  --nav-hover-bg: rgba(10, 132, 255, .10);
  --nav-active-bg: var(--accent-bg);
  --nav-active-border: var(--accent-border);
  --nav-focus-ring: 0 0 0 2px var(--accent-border);

  --nav-tooltip-bg: #2c2c2e;
  --nav-tooltip-border: var(--border-strong);

  --content-max-w: 1280px;
  --content-pad: 24px;

  /* ------------------------------------------------------------------ *
   *  COMPONENT TOKENS
   * ------------------------------------------------------------------ */
  --btn-radius: var(--radius-md);
  --btn-weight: 650;
  --input-radius: var(--radius-md);
  --input-border: var(--border-strong);
  --input-focus-ring: 0 0 0 2px var(--accent-border);

  --card-bg: var(--panel);
  --card-border: var(--border);
  --card-radius: var(--radius-lg);

  --table-header-bg: #1a1a1c;
  --table-row-hover: var(--panel-hover);
  --table-border: var(--border-soft);
  --frozen-col-shadow: inset 1px 0 0 var(--border-strong);

  --modal-overlay: rgba(0, 0, 0, .55);      /* dim with blur */
  --modal-overlay-blur: blur(16px);
  --modal-bg: var(--bg-elevated);
  --modal-radius: var(--radius-lg);

  --toast-bg: #1c1c1e;
  --toast-radius: var(--radius-md);

  --topbar-bg: rgba(0, 0, 0, .72);
  --topbar-blur: blur(20px) saturate(180%);
  --topbar-border: var(--border);

  --focus-ring: 0 0 0 2px var(--accent-border);

  /* ------------------------------------------------------------------ *
   *  Z-INDEX SCALE
   * ------------------------------------------------------------------ */
  --z-sidebar: 200;
  --z-topbar: 150;
  --z-banner: 500;
  --z-modal: 300;
  --z-toast: 600;
  --z-tooltip: 400;
}

/* ==========================================================================
   LIGHT THEME — clean, Apple-style, high key
   ========================================================================== */
:root[data-theme="light"] {
  color-scheme: light;

  --bg: #f5f5f7;
  --bg-elevated: #ffffff;
  --panel: #ffffff;
  --panel-hover: #f2f2f4;
  --panel-active: #e9e9ed;

  --sidebar-bg: #f0f0f3;
  --sidebar-border: #e3e3e8;

  --border: #d9d9de;
  --border-soft: #e7e7ec;
  --border-strong: #b9b9c1;

  --text: #1d1d1f;
  --text-dim: #55555f;
  --text-faint: #98989f;

  --accent: #007aff;
  --accent-strong: #0071e3;
  --accent-dim: #0058c2;
  --accent-bg: rgba(0, 122, 255, .08);
  --accent-border: rgba(0, 122, 255, .35);
  --accent-sel: rgba(0, 122, 255, .13);
  --on-accent: #ffffff;

  --fuel-diesel: #007aff;
  --fuel-diesel-bg: rgba(0, 122, 255, .12);
  --fuel-diesel-border: rgba(0, 122, 255, .42);
  --fuel-hfo: #1f9cf3;
  --fuel-hfo-bg: rgba(31, 156, 243, .10);
  --fuel-hfo-border: rgba(31, 156, 243, .34);
  --fuel-lpg: #4188e8;
  --fuel-lpg-bg: rgba(65, 136, 232, .10);
  --fuel-lpg-border: rgba(65, 136, 232, .32);

  --good: #34c759;
  --good-bg: rgba(52, 199, 89, .12);
  --warn: #ff9500;
  --warn-bg: rgba(255, 149, 0, .12);
  --bad: #ff3b30;
  --bad-bg: rgba(255, 59, 48, .10);
  --info: #af52de;
  --info-bg: rgba(175, 82, 222, .10);

  --elevation-1: 0 1px 2px rgba(0, 0, 0, .04);
  --elevation-2: 0 4px 12px rgba(0, 0, 0, .06);
  --elevation-3: 0 12px 32px rgba(0, 0, 0, .12);

  --nav-hover-bg: rgba(0, 122, 255, .06);
  --nav-active-bg: var(--accent-bg);
  --nav-active-border: var(--accent-border);
  --nav-tooltip-bg: #ffffff;

  --table-header-bg: #f1f1f4;
  --table-row-hover: var(--panel-hover);
  --table-border: var(--border-soft);
  --sticky-col-bg: #f1f1f4;
  --sticky-col-shadow: inset 1px 0 0 var(--border-strong);

  --modal-overlay: rgba(15, 15, 18, .35);
  --modal-overlay-blur: blur(6px);
  --modal-bg: var(--bg-elevated);

  --toast-bg: #ffffff;

  --topbar-bg: rgba(250, 250, 252, .85);
  --topbar-blur: blur(20px) saturate(180%);
  --topbar-border: var(--border);

  --input-bg: #f4f4f6;
  --input-text: var(--text);
  --input-border-hover: #c7c7cf;
  --input-placeholder: #ababb3;
  --table-stripe-bg: rgba(0, 0, 0, .02);
  --table-hover-bg: #f4f4f6;
  --btn-danger-bg: rgba(255, 59, 48, .08);
  --btn-danger-border: rgba(255, 59, 48, .38);
  --btn-danger-hover: rgba(255, 59, 48, .16);
  --btn-danger-text: #d6372d;
  --fuel-diesel-dim: #3a8bff;
  --panel-pressed: #e0e0e5;
}

/* -------------------------------------------------------------------------
   GLOBAL FOUNDATION
   ------------------------------------------------------------------------- */
::selection { background: var(--accent); color: var(--on-accent); }

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--radius-pill);
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }

/* Global input resets — kill all default browser styling */
input, select, textarea, button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] { -moz-appearance: textfield; }
select {
  background-image: none;
}
button {
  cursor: pointer;
}

/* Reduced motion — disable all animations for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Print styles */
@media print {
  body { background: #fff; color: #000; }
  .sidebar, .topbar, .sidebar__backdrop, .toast, .modal-overlay, .bulk-bar, .btn, .page-header__actions { display: none !important; }
  .page { padding: 0 !important; }
  .card { border: 1px solid #ccc; box-shadow: none; break-inside: avoid; }
  .table { font-size: 11px; }
  .table th, .table td { border: 1px solid #ddd; padding: 4px 6px; }
  .badge { border: 1px solid #999; }
  a { text-decoration: underline; color: #000; }
}

body {
  font-feature-settings: 'tnum' off;
}

/* Kurdish language: force Peshang Des 2 on all elements that hardcode font-family */
body.lang-ku .btn,
body.lang-ku .login-btn,
body.lang-ku input,
body.lang-ku select,
body.lang-ku textarea,
body.lang-ku .nav-item__label,
body.lang-ku .fuel-card__name,
body.lang-ku .fuel-value,
body.lang-ku .tank-value,
body.lang-ku .table,
body.lang-ku .topbar__breadcrumb-item {
  font-family: 'Peshang Des 2', 'Space Grotesk', sans-serif !important;
}

.fuel-value, .chart-stat__value, td[data-align="right"],
.acct-table td, .form-card__balance strong {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0ms !important;
    transition-duration: 0ms !important;
  }
  :root { --motion-fast: 0ms; --motion-base: 0ms; --motion-spring: 0ms; --motion-drawer: 0ms; }
}

/* -------------------------------------------------------------------------
   COMPATIBILITY LAYER — legacy token names mapped to the new palette
   ------------------------------------------------------------------------- */
:root {
  /* buttons */
  --btn-primary-bg: var(--accent);
  --btn-primary-border: var(--accent);
  --btn-primary-hover: var(--accent-strong);
  --btn-primary-text: var(--on-accent);
  --btn-danger-bg: rgba(255, 93, 84, .14);
  --btn-danger-border: rgba(255, 93, 84, .45);
  --btn-danger-hover: rgba(255, 93, 84, .26);
  --btn-danger-text: var(--bad);
  --btn-font-size: 13px;
  --btn-font-weight: 650;
  --btn-height: 38px;
  --btn-height-sm: 31px;
  --btn-height-lg: 46px;

  /* badges */
  --badge-font-size: 10.5px;
  --badge-font-weight: 700;
  --badge-padding: 2px 7px;

  /* cards & panels */
  --card-padding: 18px;
  --card-shadow: var(--elevation-1);
  --panel-pressed: #242427;
  --content-gap: 16px;
  --space-4: 16px;

  /* inputs & forms */
  --input-bg: #1a1a1e;
  --input-text: var(--text);
  --input-border-focus: var(--accent);
  --input-border-hover: #48484a;
  --input-height: 40px;
  --input-height-sm: 33px;
  --input-padding: 0 12px;
  --input-placeholder: #6e6e73;
  --label-color: var(--text-dim);
  --label-font-size: 12px;
  --label-font-weight: 650;
  --help-color: var(--text-faint);
  --help-font-size: 11.5px;
  --error-color: var(--bad);
  --error-bg: var(--bad-bg);
  --error-border: rgba(255, 69, 58, .45);
  --error-font-size: 12px;
  --lh-relaxed: 1.65;

  /* status borders */
  --good-border: rgba(48, 209, 88, .5);
  --warn-border: rgba(255, 214, 10, .5);
  --bad-border: rgba(255, 69, 58, .5);

  /* tables */
  --table-header-h: 40px;
  --table-cell-pad: 9px 12px;
  --table-hover-bg: #26262a;
  --table-stripe-bg: rgba(255, 255, 255, .02);
  --sticky-col-bg: #1a1a1c;
  --sticky-col-shadow: inset 1px 0 0 #3a3a3c;
  --frozen-left: 0px;

  /* modal */
  --modal-w: 560px;
  --modal-max-h: 86vh;
  --modal-border: var(--border-strong);
  --modal-shadow: var(--elevation-3);
  --z-modal-overlay: 300;

  /* misc */
  --topbar-shadow: none;
  --text-on-accent: var(--on-accent);
  --fuel-diesel-dim: #0056cc;
}
/* ---------------------------------------------------------------------------
   RESPONSIVE SCALE
   One coherent density step per screen class: tokens cascade everywhere
   (cards, forms, tables, modals) instead of per-component guesswork.
   --------------------------------------------------------------------------- */

/* Phones */
@media (max-width: 640px) {
  :root {
    --fs-xs: 10.5px;
    --fs-sm: 12px;
    --fs-base: 13.5px;
    --fs-md: 14.5px;
    --fs-lg: 16px;
    --fs-xl: 18px;
    --fs-2xl: 22px;
    --content-pad: 12px;
    --space-4: 12px;
    --input-height: 42px; /* keep touch target, trim visual bulk elsewhere */
  }
}

/* Small tablets / large phones landscape: half-step between phone and desktop */
@media (min-width: 641px) and (max-width: 1024px) {
  :root {
    --content-pad: 18px;
    --fs-xl: 19px;
    --fs-2xl: 25px;
  }
}

/* ==========================================================================
   RTL TEXT-ONLY — Kurdish language direction
   Only flips text alignment for readability. Layout, tables, and all
   structural elements stay LTR to preserve the UI design.
   ========================================================================== */

/* Nav items and labels — text reads right-to-left */
[dir="rtl"] .nav-item__label,
[dir="rtl"] .nav-child span:not(.nav-item__icon),
[dir="rtl"] .sidebar__section-label,
[dir="rtl"] .sidebar__brand-title,
[dir="rtl"] .sidebar__user-name,
[dir="rtl"] .sidebar__user-role,
[dir="rtl"] .sidebar__action-btn__label {
  text-align: right;
  direction: rtl;
}

/* Section titles and page headers */
[dir="rtl"] .content__title,
[dir="rtl"] .content__subtitle,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 {
  direction: rtl;
  text-align: right;
}

/* Labels, descriptions, and body text */
[dir="rtl"] .field__label,
[dir="rtl"] .muted,
[dir="rtl"] p,
[dir="rtl"] .fuel-card__name,
[dir="rtl"] .fuel-card__unit,
[dir="rtl"] .form-card__balance,
[dir="rtl"] .stat-chips .chip dt {
  direction: rtl;
  text-align: right;
}

/* Group header date label */
[dir="rtl"] .td-group-date {
  direction: rtl;
  text-align: right;
  border-left: none;
  border-right: 3px solid var(--accent);
}

/* Badges */
[dir="rtl"] .badge {
  direction: rtl;
}

/* Login page */
[dir="rtl"] .login-page__title,
[dir="rtl"] .login-page__subtitle,
[dir="rtl"] .login-page__footer {
  direction: rtl;
  text-align: right;
}

/* Table header labels — keep table LTR but labels read RTL */
[dir="rtl"] .th-label {
  direction: rtl;
}

/* Toast messages */
[dir="rtl"] .toast__title,
[dir="rtl"] .toast__message {
  direction: rtl;
  text-align: right;
}

/* Activity feed items */
[dir="rtl"] .activity-item {
  direction: rtl;
}

/* Burn panel stats */
[dir="rtl"] .burn-stats dt,
[dir="rtl"] .burn-stats dd,
[dir="rtl"] .share-legend li {
  direction: rtl;
  text-align: right;
}

/* Chart stats */
[dir="rtl"] .chart-stat__label,
[dir="rtl"] .chart-stat__value {
  direction: rtl;
  text-align: right;
}