/* ==========================================================================
   Tokenet e panelit te administratorit.

   Dizajni i adminit eshte i vetin: nuk ngarkon shared/ui/dashboard.css, ndaj
   panelet e agjencise dhe te ndertuesit nuk preken nga ndryshimet ketu.
   Tema ndiqet nga `data-theme` ne <html> (useTheme nga @shared), ose nga sistemi.
   ========================================================================== */

:root {
  /* ---------- siperfaqet ---------- */
  --canvas:        #f4f5f9;
  --surface:       #ffffff;
  --surface-2:     #f8f9fc;
  --surface-3:     #eef0f6;
  --surface-hover: #f5f6fb;
  --overlay:       rgba(12, 14, 30, 0.48);

  --line:          #e5e7ef;
  --line-strong:   #d0d4e0;
  --line-soft:     #eef0f5;

  /* ---------- teksti ---------- */
  --ink:           #111427;
  --ink-2:         #4a5068;
  --ink-3:         #7c8299;
  --ink-inverse:   #ffffff;

  /* ---------- marka (indigo) ---------- */
  --brand:         #4f46e5;
  --brand-solid:   #4f46e5;
  --brand-hover:   #4338ca;
  --brand-press:   #3730a3;
  --brand-soft:    #eef0ff;
  --brand-soft-2:  #e0e3ff;
  --brand-line:    #c7cbfd;
  --brand-ink:     #3730a3;
  --focus-ring:    rgba(79, 70, 229, 0.28);

  /* ---------- statuset: gjithmone me ikone ose tekst, kurre vetem ngjyre ---------- */
  --ok:            #0f8a4f;
  --ok-soft:       #e7f6ee;
  --ok-ink:        #0a6b3d;
  --warn:          #c26a06;
  --warn-soft:     #fff3df;
  --warn-ink:      #8f4a05;
  --bad:           #dc2626;
  --bad-soft:      #fdecec;
  --bad-ink:       #b42318;
  --info:          #2563eb;
  --info-soft:     #e8effe;
  --info-ink:      #1d4ed8;
  --violet:        #7c3aed;
  --violet-soft:   #f2ecff;
  --violet-ink:    #6d28d9;
  --neutral-soft:  #eef0f5;
  --neutral-ink:   #4a5068;

  /* ---------- grafiket (seria e vetme, e validuar per kontrast) ---------- */
  --series-1:      #4f46e5;
  --chart-grid:    #eceef4;
  --chart-axis:    #d0d4e0;

  /* ---------- shiriti anesor: i erret ne te dyja temat ---------- */
  --side-bg:       #0f1224;
  --side-bg-2:     #141833;
  --side-ink:      #a9aecb;
  --side-ink-strong: #ffffff;
  --side-muted:    #6b7093;
  --side-hover:    rgba(255, 255, 255, 0.06);
  --side-active:   rgba(129, 140, 248, 0.16);
  --side-accent:   #8b92ff;
  --side-line:     rgba(255, 255, 255, 0.08);

  /* ---------- tipografia ---------- */
  --font: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;

  --fs-2xs: 0.6875rem;
  --fs-xs:  0.75rem;
  --fs-sm:  0.8125rem;
  --fs-md:  0.875rem;
  --fs-lg:  1rem;
  --fs-xl:  1.25rem;
  --fs-2xl: 1.625rem;
  --fs-3xl: 2rem;

  /* ---------- hapesira ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 28px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;

  /* ---------- forma ---------- */
  --r-xs: 6px;
  --r-sm: 8px;
  --r:    10px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-full: 999px;

  --sh-1: 0 1px 2px rgba(17, 20, 39, 0.05);
  --sh-2: 0 1px 2px rgba(17, 20, 39, 0.04), 0 2px 8px rgba(17, 20, 39, 0.05);
  --sh-3: 0 4px 12px rgba(17, 20, 39, 0.06), 0 12px 32px rgba(17, 20, 39, 0.08);
  --sh-4: 0 24px 64px rgba(17, 20, 39, 0.18), 0 4px 16px rgba(17, 20, 39, 0.08);

  /* ---------- struktura ---------- */
  --side-w: 272px;
  --side-w-rail: 76px;
  --top-h: 64px;
  --content-max: 1440px;

  /* ---------- levizja ---------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 120ms;
  --t: 200ms;
  --t-slow: 320ms;

  --z-top: 30;
  --z-side: 40;
  --z-pop: 60;
  --z-overlay: 80;
  --z-toast: 100;

  /*
   * Emrat e vjeter te shared/ui/tokens.css, qe i perdorin domain.css dhe stilet
   * inline te @shared (MapPicker, PhotoManager, sale.jsx). Jane pseudonime, ndaj
   * ndjekin vete temen e erret.
   */
  --bg: var(--canvas);
  --bg-subtle: var(--surface-2);
  --bg-muted: var(--surface-3);
  --bg-inset: var(--surface-2);
  --border: var(--line);
  --border-strong: var(--line-strong);
  --border-focus: var(--brand);
  --text: var(--ink);
  --text-muted: var(--ink-2);
  --text-subtle: var(--ink-3);
  --text-inverse: #ffffff;
  --accent: var(--brand);
  --accent-hover: var(--brand-hover);
  --accent-active: var(--brand-press);
  --accent-soft: var(--brand-soft);
  --accent-border: var(--brand-line);
  --accent-text: var(--brand-ink);
  --success: var(--ok);
  --success-soft: var(--ok-soft);
  --warning: var(--warn);
  --warning-soft: var(--warn-soft);
  --danger: var(--bad);
  --danger-soft: var(--bad-soft);
  --font-sans: var(--font);
  --font-mono: var(--mono);
  --fs-base: var(--fs-md);
  --fs-4xl: 2.5rem;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-normal: 1.55;
  --lh-loose: 1.7;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --radius-xs: var(--r-xs);
  --radius-sm: var(--r-sm);
  --radius: var(--r);
  --radius-md: var(--r-md);
  --radius-lg: var(--r-lg);
  --radius-xl: var(--r-xl);
  --radius-full: var(--r-full);
  --shadow-xs: var(--sh-1);
  --shadow-sm: var(--sh-1);
  --shadow: var(--sh-2);
  --shadow-md: var(--sh-3);
  --shadow-lg: var(--sh-4);
  --dur-fast: var(--t-fast);
  --dur: var(--t);
  --dur-slow: var(--t-slow);
  --z-dropdown: var(--z-pop);
  --z-sticky: var(--z-top);
  --z-header: var(--z-top);
  --z-drawer: var(--z-side);
  --z-modal: var(--z-overlay);

  color-scheme: light;
}

/* ---------- tema e erret: e zgjedhur ---------- */
:root[data-theme="dark"] {
  --canvas:        #0b0d14;
  --surface:       #131622;
  --surface-2:     #171a28;
  --surface-3:     #1e2233;
  --surface-hover: #1a1e2d;
  --overlay:       rgba(3, 4, 10, 0.66);

  --line:          #242839;
  --line-strong:   #343a52;
  --line-soft:     #1c2030;

  --ink:           #eceef8;
  --ink-2:         #a7adc6;
  --ink-3:         #737a96;
  --ink-inverse:   #0b0d14;

  --brand:         #8b92ff;
  --brand-solid:   #4f46e5;
  --brand-hover:   #5b53f0;
  --brand-press:   #6b64f5;
  --brand-soft:    #1c1f3d;
  --brand-soft-2:  #242857;
  --brand-line:    #363b7a;
  --brand-ink:     #b4b9ff;
  --focus-ring:    rgba(139, 146, 255, 0.35);

  --ok:            #3ecf8e;
  --ok-soft:       #11271d;
  --ok-ink:        #6ee0a9;
  --warn:          #f0a44b;
  --warn-soft:     #2b1f10;
  --warn-ink:      #f5bc72;
  --bad:           #f87171;
  --bad-soft:      #2d1517;
  --bad-ink:       #fca5a5;
  --info:          #60a5fa;
  --info-soft:     #13213a;
  --info-ink:      #93c5fd;
  --violet:        #a78bfa;
  --violet-soft:   #221a3a;
  --violet-ink:    #c4b5fd;
  --neutral-soft:  #1e2233;
  --neutral-ink:   #a7adc6;

  --series-1:      #767ef5;
  --chart-grid:    #20243a;
  --chart-axis:    #343a52;

  --side-bg:       #0a0c17;
  --side-bg-2:     #0e1122;
  --side-line:     rgba(255, 255, 255, 0.06);

  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sh-2: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.3);
  --sh-3: 0 4px 12px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.35);
  --sh-4: 0 24px 64px rgba(0, 0, 0, 0.6), 0 4px 16px rgba(0, 0, 0, 0.4);

  color-scheme: dark;
}

/* ---------- tema e erret: sipas sistemit ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas:        #0b0d14;
    --surface:       #131622;
    --surface-2:     #171a28;
    --surface-3:     #1e2233;
    --surface-hover: #1a1e2d;
    --overlay:       rgba(3, 4, 10, 0.66);

    --line:          #242839;
    --line-strong:   #343a52;
    --line-soft:     #1c2030;

    --ink:           #eceef8;
    --ink-2:         #a7adc6;
    --ink-3:         #737a96;
    --ink-inverse:   #0b0d14;

    --brand:         #8b92ff;
    --brand-solid:   #4f46e5;
    --brand-hover:   #5b53f0;
    --brand-press:   #6b64f5;
    --brand-soft:    #1c1f3d;
    --brand-soft-2:  #242857;
    --brand-line:    #363b7a;
    --brand-ink:     #b4b9ff;
    --focus-ring:    rgba(139, 146, 255, 0.35);

    --ok:            #3ecf8e;
    --ok-soft:       #11271d;
    --ok-ink:        #6ee0a9;
    --warn:          #f0a44b;
    --warn-soft:     #2b1f10;
    --warn-ink:      #f5bc72;
    --bad:           #f87171;
    --bad-soft:      #2d1517;
    --bad-ink:       #fca5a5;
    --info:          #60a5fa;
    --info-soft:     #13213a;
    --info-ink:      #93c5fd;
    --violet:        #a78bfa;
    --violet-soft:   #221a3a;
    --violet-ink:    #c4b5fd;
    --neutral-soft:  #1e2233;
    --neutral-ink:   #a7adc6;

    --series-1:      #767ef5;
    --chart-grid:    #20243a;
    --chart-axis:    #343a52;

    --side-bg:       #0a0c17;
    --side-bg-2:     #0e1122;
    --side-line:     rgba(255, 255, 255, 0.06);

    --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --sh-2: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.3);
    --sh-3: 0 4px 12px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.35);
    --sh-4: 0 24px 64px rgba(0, 0, 0, 0.6), 0 4px 16px rgba(0, 0, 0, 0.4);

    color-scheme: dark;
  }
}