/* Stoku: fontet dhe ngjyrat e dizajnit (Claude Design, "Stoku Premium"), për telefonin (index.html) dhe kompjuterin (pc.html).
   Tema: vendoset nga vetë aplikacioni te <html data-tema="light|dark"> (cilësimi Pamja/Tema: Automatike, E çelët, E errët).
   Ngjyrat në hex (jo oklch), për shfletuesit e vjetër të PDA-ve. */

@font-face { font-family: 'Onest'; src: url('../fonts/onest.woff2') format('woff2'); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('../fonts/jetbrains-mono.woff2') format('woff2'); font-weight: 400 500; font-style: normal; font-display: swap; }

:root {
  --sb-bg: #f6f5f2;
  --sb-surface: #ffffff;
  --sb-surface-2: #f1efeb;
  --sb-sunken: #ebe9e4;
  --sb-head: #faf9f7;
  --sb-sidebar: #efede9;
  --sb-sidebar-line: #e3e1db;
  --sb-line: #e6e4df;
  --sb-line-2: #efede9;
  --sb-ink: #14161b;
  --sb-ink-2: #3a3d44;
  --sb-ink-nav: #4a4d55;
  --sb-ink-3: #5b5e66;
  --sb-ink-4: #6b6e76;
  --sb-muted: #7a7d85;
  --sb-faint: #8a8d94;
  --sb-faint-2: #9a9da4;
  --sb-disabled: #b3b5ba;
  --sb-control: #c9c7c1;
  --sb-track: #d9d7d2;
  --sb-accent: #1f5fc4;
  --sb-accent-press: #16479a;
  --sb-accent-text: #1f5fc4;
  --sb-accent-tint: #eef3fc;
  --sb-accent-line: #d6e2f5;
  --sb-inv-bg: #14161b;
  --sb-inv-fg: #ffffff;
  --sb-hero: #14161b;
  --sb-hero-2: #1c1f25;
  --sb-hero-muted: #a3a6ae;
  --sb-seg-on: #ffffff;
  --sb-tabbar: rgba(255,255,255,.92);
  --sb-overlay: rgba(20,22,27,.5);
  --sb-exp: #c23a33;
  --sb-exp-tint: #fdecea;
  --sb-exp-ink: #8f2c27;
  --sb-near: #a45f10;
  --sb-near-tint: #fcefd9;
  --sb-near-ink: #7a4e14;
  --sb-ok: #2e7d4f;
  --sb-ok-tint: #e6f5ea;
  --sb-ok-ink: #2a5e3f;
  --sb-ok-dot: #3fae6c;
  --sb-ok-ring: #c5e6cf;
  --sb-rem: #6b6e76;
  --sb-rem-tint: #f1efeb;
  --sb-badge: #d13c32;
  --sb-r-sm: 10px; --sb-r-md: 14px; --sb-r-lg: 18px; --sb-r-xl: 22px; --sb-r-sheet: 32px;
  --sb-font: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --sb-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --sb-ring: 0 0 0 1px var(--sb-line);
  --sb-shadow-accent: 0 14px 30px -12px rgba(31,95,196,.8);
  /* Ikonat me ngjyrë (Cilësimet): sfondi i lehtë + ngjyra e vijës */
  --sb-ic-blu-bg: #e8f0fc; --sb-ic-blu: #1f5fc4;
  --sb-ic-vjollce-bg: #efeafd; --sb-ic-vjollce: #6a4bd1;
  --sb-ic-portokalli-bg: #fdf0e1; --sb-ic-portokalli: #b5600f;
  --sb-ic-gjelber-bg: #e5f4ea; --sb-ic-gjelber: #2e7d4f;
  --sb-ic-roze-bg: #fce8f0; --sb-ic-roze: #c0306b;
  --sb-ic-gri-bg: #eceae6; --sb-ic-gri: #5b5e66;
  --sb-ic-kuqe-bg: #fdecea; --sb-ic-kuqe: #c23a33;
  /* Kartat e afateve: ngjyra shumë të lehta sipas statusit */
  --sb-card-exp: #fff6f5; --sb-card-exp-line: #f5d8d4;
  --sb-card-near: #fffaf0; --sb-card-near-line: #f1e0c0;
  --sb-card-ok: #f5fbf7; --sb-card-ok-line: #d5ecdc;
  --sb-card-rem: #f7f6f3; --sb-card-rem-line: #e6e4df;
}
:root[data-tema="dark"] {
  --sb-bg: #0f1115;
  --sb-surface: #171a20;
  --sb-surface-2: #1f232a;
  --sb-sunken: #1b1e25;
  --sb-head: #1b1e24;
  --sb-sidebar: #0b0d10;
  --sb-sidebar-line: #22262d;
  --sb-line: #2a2e36;
  --sb-line-2: #22262d;
  --sb-ink: #eceef2;
  --sb-ink-2: #c9ccd3;
  --sb-ink-nav: #b4b8c0;
  --sb-ink-3: #a9adb5;
  --sb-ink-4: #9ca1aa;
  --sb-muted: #8f949e;
  --sb-faint: #858a94;
  --sb-faint-2: #6f747e;
  --sb-disabled: #4a4f58;
  --sb-control: #4a4f59;
  --sb-track: #3a3f48;
  --sb-accent: #2f6fd8;
  --sb-accent-press: #255bb8;
  --sb-accent-text: #7aaaf2;
  --sb-accent-tint: #16223a;
  --sb-accent-line: #24406a;
  --sb-inv-bg: #eceef2;
  --sb-inv-fg: #14161b;
  --sb-hero: #1e232c;
  --sb-hero-2: #272d37;
  --sb-hero-muted: #a3a6ae;
  --sb-seg-on: #2b3039;
  --sb-tabbar: rgba(23,26,32,.92);
  --sb-overlay: rgba(0,0,0,.6);
  --sb-exp: #f07a6f;
  --sb-exp-tint: #35191a;
  --sb-exp-ink: #f2a39b;
  --sb-near: #f0b95a;
  --sb-near-tint: #33260f;
  --sb-near-ink: #eec989;
  --sb-ok: #5cc98b;
  --sb-ok-tint: #13301f;
  --sb-ok-ink: #9ad9b1;
  --sb-ok-dot: #4fbf7f;
  --sb-ok-ring: #1d4a2e;
  --sb-rem: #9ca1aa;
  --sb-rem-tint: #1f232a;
  --sb-badge: #d13c32;
  --sb-shadow-accent: 0 14px 30px -12px rgba(0,0,0,.7);
  --sb-ic-blu-bg: #16223a; --sb-ic-blu: #7aaaf2;
  --sb-ic-vjollce-bg: #241e3b; --sb-ic-vjollce: #b4a2f6;
  --sb-ic-portokalli-bg: #33250f; --sb-ic-portokalli: #f0b95a;
  --sb-ic-gjelber-bg: #13301f; --sb-ic-gjelber: #5cc98b;
  --sb-ic-roze-bg: #351a27; --sb-ic-roze: #f08bb3;
  --sb-ic-gri-bg: #23272e; --sb-ic-gri: #a9adb5;
  --sb-ic-kuqe-bg: #35191a; --sb-ic-kuqe: #f07a6f;
  --sb-card-exp: #1e1517; --sb-card-exp-line: #46262a;
  --sb-card-near: #1e1a12; --sb-card-near-line: #45361b;
  --sb-card-ok: #131b17; --sb-card-ok-line: #1f3a2a;
  --sb-card-rem: #171a20; --sb-card-rem-line: #2a2e36;
}

/* Ikonat me ngjyrë (telefoni dhe kompjuteri) */
.ngj-blu { background: var(--sb-ic-blu-bg) !important; color: var(--sb-ic-blu) !important; }
.ngj-vjollce { background: var(--sb-ic-vjollce-bg) !important; color: var(--sb-ic-vjollce) !important; }
.ngj-portokalli { background: var(--sb-ic-portokalli-bg) !important; color: var(--sb-ic-portokalli) !important; }
.ngj-gjelber { background: var(--sb-ic-gjelber-bg) !important; color: var(--sb-ic-gjelber) !important; }
.ngj-roze { background: var(--sb-ic-roze-bg) !important; color: var(--sb-ic-roze) !important; }
.ngj-gri { background: var(--sb-ic-gri-bg) !important; color: var(--sb-ic-gri) !important; }
.ngj-kuqe { background: var(--sb-ic-kuqe-bg) !important; color: var(--sb-ic-kuqe) !important; }

/* Logoja në krye (telefon + PC): "Etiketë barkodi" — STOKU, barkodi, emri i përdoruesit */
:root { --stk-qelibar: #e3a42e; }
:root[data-tema="dark"] { --stk-qelibar: #f5b942; }
.stk-etiketa { display: inline-flex; width: 152px; flex-direction: column; align-items: center; gap: 3px; flex: none; max-width: 100%; box-sizing: border-box; padding: 7px 14px 6px; border-radius: 10px; background: var(--sb-surface); box-shadow: inset 0 0 0 1px var(--sb-line); color: var(--sb-ink); font-family: 'Onest', system-ui, sans-serif; }
.stk-etiketa__emri { font-size: 18px; font-weight: 800; letter-spacing: 3px; line-height: 1; margin-right: -3px; }
.stk-etiketa__barkodi { display: block; width: 104px; height: 14px; fill: currentColor; }
.stk-etiketa__qelibar { fill: var(--stk-qelibar); }
.stk-etiketa__nen { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; font-weight: 500; letter-spacing: 1px; line-height: 1.2; color: var(--sb-muted); }

/* Ikonat e folderave (afatet.js IKONAT_FOLDERAVE): ngjyrat .ngj-* përshtaten me temën */
.fl-ikonat { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 8px; margin: 4px 0 6px; }
.fl-ikona { height: 44px; border: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; font: inherit; transition: transform .12s, box-shadow .12s; }
.fl-ikona:active { transform: scale(.94); }
.fl-ikona.zgjedhur { box-shadow: 0 0 0 2px var(--sb-surface), 0 0 0 4.5px var(--sb-accent); transform: scale(1.04); }
.fl-ikonat-titull { font-size: 13px; font-weight: 600; color: var(--sb-ink-3); margin: 14px 2px 8px; }
.folder-ikona { display: flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 12px; }

/* "Kërko heqje nga rafti": zgjedhësi i produkteve (ekipa.js zgjedhesIKerkeses), tel + PC */
.krk-zgjedhes { display: flex; flex-direction: column; gap: 8px; }
.krk-tabet { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--sb-sunken); }
.krk-tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; height: 36px; border: 0; border-radius: 9px; background: transparent; color: var(--sb-ink-3); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.krk-tab.aktiv { background: var(--sb-surface); color: var(--sb-ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.krk-tab__nr { min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 10px; background: var(--sb-sunken); color: var(--sb-ink-3); font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.krk-tab.aktiv .krk-tab__nr { background: var(--sb-ic-blu-bg); color: var(--sb-ic-blu); }
.krk-kerko { width: 100%; box-sizing: border-box; height: 40px !important; padding: 0 12px; border-radius: 10px; font-size: 14px; }
.krk-lista { max-height: 260px; overflow-y: auto; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--sb-line); background: var(--sb-surface); -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.krk-rresht { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 8px 12px; border: 0; border-bottom: 1px solid var(--sb-line-2); background: transparent; color: var(--sb-ink); font: inherit; text-align: left; cursor: pointer; }
.krk-rresht:last-child { border-bottom: 0; }
.krk-rresht.zgjedhur { background: var(--sb-ic-blu-bg); }
.krk-shenja { flex: none; width: 22px; height: 22px; border-radius: 7px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1.5px var(--sb-control); color: transparent; background: var(--sb-surface); }
.krk-rresht.zgjedhur .krk-shenja { background: var(--sb-accent); box-shadow: none; color: #fff; }
.krk-tk { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.krk-tk b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.krk-tk span { font-size: 12px; color: var(--sb-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.krk-bosh { padding: 20px 14px; text-align: center; font-size: 13.5px; color: var(--sb-muted); }
.ek-nj-produktet { margin: 6px 0 0; padding-left: 18px; font-size: 13px; font-weight: 400; line-height: 1.5; color: var(--sb-ink-2); }

/* v238: logoja (vetëm ajo) rifreskon dhe sinkronizon */
#logoButon { cursor: pointer; transition: opacity .2s; }
#logoButon:focus-visible { outline: 2px solid var(--accent, #1f5fc4); outline-offset: 2px; }
#logoButon.duke-rifreskuar { opacity: .55; pointer-events: none; }