/* ==========================================================================
   Lior Olive Oil · Fabrika e Vajit — stilet e aplikacionit (një skedar i vetëm)
   Mobile-first: 360px (H10S) → 1440px. Pa dark mode, pa animacione dekorative.
   Zonat e prekjes ≥ 48px, font bazë 16px, kontrast i lartë.
   Ngjyrat e markës: jeshilja e errët e etiketës së shishes, ari i shkrimit dhe e kuqja e "L"-së (vetëm te logoja;
   e kuqja e ndërfaqes mbetet për gabimet dhe "Pa paguar").
   ========================================================================== */

:root {
    /* Letra e kuponit */
    --paper: #f5f3ee;
    --sheet: #fffefb;
    --well: #ecE9e3;

    /* Jeshilja e etiketës Lior: teksti dhe veprimet kryesore */
    --ink: #1f2b24;
    --ink-2: #39463d;
    --ink-3: #5a665d;
    --ink-4: #858e86;
    --press-hover: #2f3d34;

    /* Vijat */
    --rule: rgba(31, 43, 36, .14);
    --rule-soft: rgba(31, 43, 36, .08);
    --rule-input: rgba(31, 43, 36, .26);
    --rule-strong: rgba(31, 43, 36, .34);

    /* Ari i shishes Lior: fokusi, theksi, shifrat e peshores.
       --oil është hija e errët (≥ 3:1 mbi letër); --oil-bright përdoret vetëm mbi sfond të errët. */
    --oil: #8a6b17;
    --oil-bright: #d1b36a;
    --oil-wash: #f4ead0;
    --oil-ink: #634c0c; /* tekst ari i errët mbi --oil-wash (≥ 6:1) */

    /* Statuset (CLAUDE.md §10) — gjithmonë bashkë me tekst */
    --received: #2563eb;
    --received-bg: #dbeafe;
    --received-ink: #1e40af;
    --completed: #16a34a;
    --completed-bg: #dcfce7;
    --completed-ink: #166534;
    --completed-strong: #15803d;
    --cancelled: #9ca3af;
    --cancelled-bg: #ecebe6;
    --cancelled-ink: #6b7280;

    --danger: #b42318;
    --danger-bg: #fee4e2;

    /* Grafiku: ditët e tjera gri, dita e sotme me bojë */
    --bar: #8a938b;
    --bar-today: #1f2b24;

    /* Përmasat */
    --tap: 48px;
    --r-sm: 6px;
    --r-md: 10px;
    --s1: 4px;
    --s2: 8px;
    --s3: 12px;
    --s4: 16px;
    --s5: 24px;
    --s6: 32px;
    --tabbar-h: 64px;
    --stub-w: 84px;

    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
    --mono: "Roboto Mono", "Cascadia Mono", "Segoe UI Mono", Consolas, "Liberation Mono", "DejaVu Sans Mono", monospace;
}

/* --- Bazë ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.45;
    color: var(--ink);
    background: var(--paper);
    -webkit-tap-highlight-color: rgba(209, 179, 106, .28);
}

[hidden] { display: none !important; }

h1, h2, h3, p, dl, dd, figure { margin: 0; }

h1 {
    font-size: 1.375rem;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -.01em;
}

h2 {
    font-size: 1.0625rem;
    line-height: 1.3;
    font-weight: 800;
}

a { color: inherit; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
    outline: 3px solid var(--oil);
    outline-offset: 2px;
}

.muted { color: var(--ink-3); }
.num { font-variant-numeric: tabular-nums; }
.stack { display: grid; gap: var(--s4); }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* --- Faqja ---------------------------------------------------------------- */

.container {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: var(--s4) var(--s4) calc(var(--tabbar-h) + var(--s6));
}

.container > * + * { margin-top: var(--s4); }

.is-guest .container,
.page-plain .container { padding-bottom: var(--s6); }

.page-plain .container { max-width: 460px; padding-top: 8vh; }

.page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s3);
}

.page-head .meta {
    margin-top: 2px;
    color: var(--ink-3);
    font-size: .9375rem;
}

.back-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    color: var(--ink-2);
    font-weight: 700;
    text-decoration: none;
}

.back-link:hover { color: var(--ink); text-decoration: underline; }

/* --- Shiriti lart ----------------------------------------------------------- */

.topbar {
    display: flex;
    align-items: center;
    gap: var(--s3);
    min-height: 56px;
    padding: 0 var(--s2) 0 var(--s4);
    background: var(--ink);
    color: #fff;
}

.brand {
    display: flex;
    flex: none; /* logoja nuk shtypet kur menuja lart është e gjatë */
    align-items: center;
    gap: var(--s2);
    min-height: var(--tap);
    color: #fff;
    font-size: 1.0625rem;
    font-weight: 800;
    letter-spacing: -.01em;
    text-decoration: none;
}

/* Logo Lior (L e kuqe + "Lior" në ar, për shiritin jeshil të errët) */
.brand-logo {
    display: block;
    width: auto;
    height: 34px;
    max-width: 100%;
}

.topnav { display: none; }

.topbar-user {
    display: flex;
    align-items: center;
    gap: var(--s1);
    flex: none;
    margin-left: auto;
}

.user-name {
    display: none;
    max-width: 160px;
    overflow: hidden;
    color: rgba(255, 255, 255, .78);
    font-size: .9375rem;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.topbar-logout {
    min-width: var(--tap);
    min-height: var(--tap);
    padding: 0 var(--s3);
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

.topbar-logout:hover { background: rgba(255, 255, 255, .12); }

/* --- Shiriti poshtë (celular) ------------------------------------------------ */

.tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--sheet);
    border-top: 1px solid var(--rule-strong);
}

.tab {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 100%;
    padding: 0 2px;
    color: var(--ink-3);
    font-size: .8125rem;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    list-style: none;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

.tab::-webkit-details-marker { display: none; }

.tab-icon {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tab.is-active { color: var(--ink); }

.tab.is-active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24%;
    right: 24%;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--oil);
}

.tab-more > summary { height: 100%; }

.more-menu {
    position: absolute;
    right: var(--s2);
    bottom: calc(100% + var(--s2));
    display: grid;
    min-width: 230px;
    padding: var(--s2);
    background: var(--sheet);
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-md);
    box-shadow: 0 12px 32px rgba(31, 43, 36, .18);
}

.more-link {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: var(--tap);
    padding: 0 var(--s3);
    border: 0;
    border-radius: var(--r-sm);
    background: none;
    color: var(--ink);
    font-weight: 700;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.more-link:hover,
.more-link.is-active { background: var(--well); }

.more-logout {
    margin-top: var(--s1);
    border-top: 1px solid var(--rule);
    border-radius: 0;
    color: var(--danger);
}

/* --- Njoftime ------------------------------------------------------------------ */

.offline-banner {
    position: sticky;
    top: 0;
    z-index: 40;
    padding: var(--s2) var(--s4);
    background: var(--danger);
    color: #fff;
    font-weight: 700;
    text-align: center;
}

/* I njëjti shirit kur faqja vjen nga kopja e ruajtur në pajisje (sw.js): theksi i artë, jo gabim. */
.offline-banner.is-copy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--s2) var(--s3);
    background: var(--oil-wash);
    color: var(--oil-ink);
    border-bottom: 2px solid var(--oil);
}

.offline-retry {
    min-height: 48px;
    padding: 0 var(--s4);
    border: 2px solid currentColor;
    border-radius: var(--r-sm);
    background: #fff;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.alert {
    padding: var(--s3) var(--s4);
    border-radius: var(--r-sm);
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.alert-error {
    background: var(--danger);
    color: #fff;
}

.alert-success {
    background: var(--completed-bg);
    color: var(--completed-ink);
    border-left: 6px solid var(--completed);
}

/* --- Butonat ------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    min-height: var(--tap);
    padding: 0 var(--s5);
    border: 2px solid transparent;
    border-radius: var(--r-sm);
    background: var(--sheet);
    color: var(--ink);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: .5;
    cursor: not-allowed;
}

.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--press-hover); }

.btn-secondary { border-color: var(--rule-strong); }
.btn-secondary:hover:not(:disabled) { border-color: var(--ink); }

.btn-complete { background: var(--completed-strong); color: #fff; }
.btn-complete:hover:not(:disabled) { background: var(--completed-ink); }

.btn-received { background: var(--received); color: #fff; }
.btn-received:hover:not(:disabled) { background: var(--received-ink); }

.btn-danger { border-color: var(--danger); color: var(--danger); }
.btn-danger:hover:not(:disabled) { background: var(--danger-bg); }

/* "Përfundo – Pa paguar": e kuqe e plotë, çift me jeshilen e "Paguar". */
.btn-unpaid { background: var(--danger); color: #fff; }
.btn-unpaid:hover:not(:disabled) { background: #8f1c13; }

.btn-block { width: 100%; }

.btn-xl {
    width: 100%;
    min-height: 60px;
    font-size: 1.1875rem;
}

.btn-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.btn-icon {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: var(--tap);
    height: var(--tap);
    padding: 0;
    border: 2px solid var(--rule);
    border-radius: var(--r-sm);
    background: var(--sheet);
    color: var(--ink-2);
    font-size: 1.125rem;
    font-weight: 700;
    cursor: pointer;
}

.btn-icon:hover { border-color: var(--danger); color: var(--danger); }

/* --- Fushat -------------------------------------------------------------------- */

.field { display: grid; gap: 6px; min-width: 0; }

.label {
    font-size: .9375rem;
    font-weight: 700;
    color: var(--ink-2);
}

.label .req { color: var(--danger); }
.label .opt { font-weight: 500; color: var(--ink-3); }

.hint {
    font-size: .875rem;
    color: var(--ink-3);
}

.hint-warn {
    color: var(--oil-ink);
    font-weight: 700;
}

.notice {
    margin-bottom: var(--s3);
    padding: var(--s3);
    border-left: 4px solid var(--oil);
    border-radius: var(--r-sm);
    background: var(--oil-wash);
    color: var(--oil-ink);
}

.form-narrow { max-width: 640px; }

code {
    padding: 1px 5px;
    border-radius: 3px;
    background: var(--well);
    font-family: var(--mono);
    font-size: .875em;
}

/* Cilësimet → Përditësimi i sistemit */
.update-panel .form-grid + .form-grid,
.rollback-form {
    margin-top: var(--s5);
    padding-top: var(--s4);
    border-top: 1px solid var(--rule);
}

input[type="file"].input { padding: 8px; }

.hint-ok {
    color: var(--completed-ink);
    font-weight: 700;
}

.input {
    display: block;
    width: 100%;
    min-height: var(--tap);
    padding: 10px 12px;
    border: 2px solid var(--rule-input);
    border-radius: var(--r-sm);
    background: var(--well);
    color: var(--ink);
    font-size: 1rem;
    -webkit-appearance: none;
    appearance: none;
}

.input::placeholder { color: var(--ink-4); opacity: 1; }

.input:focus {
    outline: none;
    border-color: var(--oil);
    background: var(--sheet);
    box-shadow: 0 0 0 3px var(--oil-wash);
}

.input.is-invalid {
    border-color: var(--danger);
    background: var(--danger-bg);
}

.input-lg {
    min-height: 56px;
    font-size: 1.125rem;
    font-weight: 600;
}

textarea.input {
    min-height: 88px;
    line-height: 1.4;
    resize: vertical;
}

select.input {
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f2b24' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
}

.check {
    display: flex;
    align-items: center;
    gap: var(--s3);
    min-height: var(--tap);
    font-weight: 600;
    cursor: pointer;
}

.check input {
    flex: none;
    width: 24px;
    height: 24px;
    margin: 0;
    accent-color: var(--ink);
}

.field-error {
    color: var(--danger);
    font-size: .875rem;
    font-weight: 700;
}

.form-actions { display: grid; gap: var(--s3); }

.form-grid { display: grid; gap: var(--s4); }

/* --- Panelet ------------------------------------------------------------------- */

.panel {
    min-width: 0;
    padding: var(--s4);
    background: var(--sheet);
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
}

.panel > h2 { margin-bottom: var(--s3); }
.panel > .hint { margin-bottom: var(--s3); }

.panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s1) var(--s3);
    margin-bottom: var(--s3);
}

.panel-head .muted { font-size: .875rem; }

.empty {
    padding: var(--s6) var(--s4);
    text-align: center;
    color: var(--ink-3);
}

.empty h1, .empty h2 { color: var(--ink); margin-bottom: var(--s2); }

.empty .btn { margin-top: var(--s4); }

/* --- Cungu i biletës (numri rendor) ---------------------------------------------- */

.stub {
    position: relative;
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: var(--stub-w);
    padding: var(--s3) var(--s1);
    background: var(--stub, var(--received));
    color: #fff;
    text-align: center;
}

/* vija e perforimit */
.stub::after {
    content: "";
    position: absolute;
    top: 10px;
    bottom: 10px;
    right: -1px;
    border-right: 2px dashed rgba(255, 255, 255, .6);
}

.stub-label {
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.stub-number {
    font-family: var(--mono);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.03em;
}

.stub-number.is-long { font-size: 1.3rem; }

/* dhëmbëzat e biletës, në vijën e perforimit */
.ticket-notched::before,
.ticket-notched::after {
    content: "";
    position: absolute;
    left: calc(var(--stub-w) - 9px);
    z-index: 1;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--paper);
}

.ticket-notched::before { top: -9px; }
.ticket-notched::after { bottom: -9px; }

/* --- Ngjyrat e statusit ---------------------------------------------------------- */

.status-received  { --tint: var(--received-bg);  --stub: var(--received);  --tag: var(--received-ink);  --dot: var(--received); }
.status-completed { --tint: var(--completed-bg); --stub: var(--completed-strong); --tag: var(--completed-ink); --dot: var(--completed); }
.status-cancelled { --tint: var(--cancelled-bg); --stub: var(--cancelled-ink); --tag: var(--cancelled-ink); --dot: var(--cancelled); }

.status-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--tag);
    font-size: .875rem;
    font-weight: 800;
}

.status-tag::before {
    content: "";
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--dot);
}

.status-line {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s1) var(--s2);
}

/* Pagesa e një regjistrimi të përfunduar: jeshile = paguar, e kuqe = pa paguar (gjithmonë me tekst). */
.pay-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: .8125rem;
    font-weight: 800;
    line-height: 1.4;
}

.pay-tag.is-paid { background: var(--completed-strong); color: #fff; }
.pay-tag.is-unpaid { background: var(--danger); color: #fff; }

/* --- Lista: filtrat ------------------------------------------------------------ */

.season-pick { min-width: 190px; }

/* 5 filtra: 3 + 2 në celular (i katërti zë dy kolona), një rresht më gjerë. Vijat ndarëse = hapësira mbi sfondin e errët. */
.segmented {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
    border: 2px solid var(--ink);
    border-radius: var(--r-sm);
    background: var(--ink);
    overflow: hidden;
}

.segmented > .seg:nth-child(4):nth-last-child(2) { grid-column: span 2; }

@media (min-width: 560px) {
    .segmented { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .segmented > .seg:nth-child(4):nth-last-child(2) { grid-column: auto; }
}

/* Dy skeda; tri skeda (Shitjet: Vaji / Bërsia / Klientët) */
.segmented.segmented-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.segmented.segmented-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.seg {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tap);
    padding: 0 2px;
    background: var(--sheet);
    color: var(--ink);
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
}

.seg.is-active {
    background: var(--ink);
    color: #fff;
}

.search { display: flex; gap: var(--s2); }
.search .input { flex: 1; min-width: 0; }

.search-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--s3);
    color: var(--ink-3);
}

/* --- Lista: kartat --------------------------------------------------------------- */

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
    gap: var(--s3);
}

.reg-card {
    position: relative;
    display: flex;
    min-width: 0;
    background: var(--tint);
    border-radius: var(--r-md);
    overflow: hidden;
}

.reg-card:hover { box-shadow: inset 0 0 0 2px var(--dot); }
.reg-card:has(.reg-link:focus-visible) { outline: 3px solid var(--oil); outline-offset: 2px; }

.reg-body {
    flex: 1;
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 2px;
    padding: var(--s3) var(--s4) var(--s3) var(--s4);
}

.reg-top {
    display: flex;
    align-items: flex-start;
    gap: var(--s2);
}

.reg-name {
    flex: 1;
    min-width: 0;
    font-size: 1.125rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

/* e gjithë karta është e klikueshme */
.reg-link {
    color: inherit;
    text-decoration: none;
}

.reg-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.reg-link:focus-visible { outline: none; }

.comment-flag {
    flex: none;
    font-size: 1.125rem;
    line-height: 1.25;
}

.reg-weight {
    font-variant-numeric: tabular-nums;
    color: var(--ink-2);
}

.reg-weight strong {
    color: var(--ink);
    font-size: 1.25rem;
    font-weight: 800;
}

.reg-meta {
    color: var(--ink-3);
    font-size: .875rem;
    overflow-wrap: anywhere;
}

.reg-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s2);
    margin-top: var(--s2);
}

.reg-foot .btn {
    position: relative;
    z-index: 2;
    padding: 0 var(--s4);
}

.status-cancelled .reg-name,
.status-cancelled .reg-weight,
.status-cancelled .reg-weight strong,
.status-cancelled .reg-meta {
    color: var(--cancelled-ink);
    text-decoration: line-through;
}

.load-more { margin-top: var(--s4); }

/* --- Regjistrim i ri ------------------------------------------------------------- */

.registration {
    max-width: 580px;
    margin: 0 auto;
}

.reg-form { display: grid; gap: var(--s4); }

.reg-clock { font-variant-numeric: tabular-nums; }

.autocomplete { position: relative; }

.suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 25;
    max-height: 50vh;
    margin: 0;
    padding: var(--s1);
    overflow-y: auto;
    list-style: none;
    background: var(--sheet);
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-sm);
    box-shadow: 0 10px 28px rgba(31, 43, 36, .16);
}

.suggestions li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    min-height: var(--tap);
    padding: var(--s2) var(--s3);
    border-radius: 4px;
    cursor: pointer;
}

.suggestions li.is-active,
.suggestions li:hover { background: var(--oil-wash); }

.sg-name { font-weight: 700; overflow-wrap: anywhere; }

.sg-phone {
    flex: none;
    color: var(--ink-3);
    font-size: .875rem;
    font-variant-numeric: tabular-nums;
}

.crates {
    display: grid;
    gap: var(--s2);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.crates legend {
    padding: 0;
    margin-bottom: var(--s2);
}

.crate-head,
.crate-row {
    display: grid;
    grid-template-columns: 26px minmax(0, 5fr) minmax(0, 7fr) var(--tap);
    align-items: center;
    gap: var(--s2);
}

.crate-row-edit { grid-template-columns: 26px minmax(0, 5fr) minmax(0, 7fr); }

.crate-head {
    color: var(--ink-3);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.crate-head span:first-child { grid-column: 2; }
.crate-head span:last-child { text-align: right; padding-right: 14px; }

.crate-rows { display: grid; gap: var(--s2); }

.crate-index {
    color: var(--ink-3);
    font-family: var(--mono);
    font-weight: 700;
    text-align: right;
}

.crate-number { font-family: var(--mono); }

.crate-weight {
    font-family: var(--mono);
    font-size: 1.1875rem;
    font-weight: 700;
    text-align: right;
}

.crate-error {
    grid-column: 2 / -1;
    color: var(--danger);
    font-size: .875rem;
    font-weight: 700;
}

.btn-add {
    width: 100%;
    min-height: 52px;
    margin-top: var(--s1);
    border: 2px dashed var(--rule-strong);
    background: transparent;
    font-weight: 800;
}

.btn-add:hover { border-color: var(--ink); background: var(--sheet); }

/* ✕ i "armatosur": prekja e dytë heq arkën me peshë */
.crate-remove.is-armed {
    border-color: var(--danger);
    background: var(--danger);
    color: #fff;
    font-size: .875rem;
    font-weight: 800;
}

/* Zgjedhje me butona të mëdhenj (Transporti, Toka, njësia L/kg): një prekje, pa listë që hapet. */
.choice-field {
    display: grid;
    gap: 6px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.choice-field legend { padding: 0; margin-bottom: 6px; }

.choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s2);
}

.choice { position: relative; min-width: 0; }

.choice input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.choice span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: var(--s1) var(--s2);
    border: 2px solid var(--rule-strong);
    border-radius: var(--r-sm);
    background: var(--sheet);
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
}

.choice input:checked + span {
    border-color: var(--ink);
    background: var(--ink);
    color: #fff;
}

.choice input:focus-visible + span { outline: 3px solid var(--oil); outline-offset: 2px; }

.choices.is-invalid .choice span {
    border-color: var(--danger);
    background: var(--danger-bg);
}

/* Toka + Rrënjë ulliri: krah për krah kur ka vend. */
.detail-pair {
    display: grid;
    gap: var(--s4);
}

@media (min-width: 420px) {
    .detail-pair { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
}

/* Kur shkruan (tastiera hapur), shiriti poshtë fshihet: totali qëndron mbi tastierë
   dhe ekrani 5,5" mbetet për fushat. */
body:has(main :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select):focus) .tabbar { display: none; }
body:has(main :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select):focus) .readout { bottom: var(--s2); }

/* Shiriti i totalit: si ekrani i peshores */
.readout {
    position: sticky;
    bottom: calc(var(--tabbar-h) + var(--s2));
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 2px var(--s2);
    padding: var(--s2) var(--s4);
    border-radius: var(--r-md);
    background: var(--ink);
    color: rgba(255, 255, 255, .86);
    font-size: .9375rem;
    font-weight: 600;
}

.readout > span { white-space: nowrap; }

.readout strong {
    color: var(--oil-bright);
    font-family: var(--mono);
    font-size: 1.3125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.readout-sep { color: rgba(255, 255, 255, .4); }

/* Konfirmimi pas ruajtjes */
.done {
    display: grid;
    justify-items: center;
    gap: var(--s4);
    padding-top: var(--s4);
    text-align: center;
}

.done-title {
    color: var(--completed-ink);
    font-size: 1.125rem;
    font-weight: 800;
}

.ticket-xl {
    position: relative;
    display: grid;
    justify-items: center;
    min-width: min(240px, 100%);
    max-width: calc(100% - 24px);
    padding: var(--s5) var(--s6) var(--s4);
    border-radius: 14px;
    background: var(--received);
    color: #fff;
}

.ticket-xl::before,
.ticket-xl::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 22px;
    height: 22px;
    margin-top: -11px;
    border-radius: 50%;
    background: var(--paper);
}

.ticket-xl::before { left: -11px; }
.ticket-xl::after { right: -11px; }

.ticket-xl .stub-label { font-size: 1rem; }

.ticket-xl .stub-number {
    font-size: clamp(3rem, 18vw, 5rem);
    letter-spacing: -.04em;
}

.done-name {
    font-size: 1.375rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.done-total {
    font-family: var(--mono);
    font-size: 1.125rem;
    font-variant-numeric: tabular-nums;
}

.done-note { color: var(--ink-3); }

.done-note.done-warning {
    padding: var(--s3) var(--s4);
    border-radius: var(--r-sm);
    background: var(--danger-bg);
    color: var(--danger);
    font-weight: 700;
    text-align: left;
}

.ticket-xl:focus { outline: none; }
.ticket-xl:focus-visible { outline: 3px solid var(--oil); outline-offset: 3px; }

.done-actions {
    display: grid;
    gap: var(--s3);
    width: 100%;
    max-width: 480px;
    margin-top: var(--s2);
}

/* --- Detaji ---------------------------------------------------------------------- */

.detail {
    display: grid;
    gap: var(--s4);
    max-width: 760px;
}

.detail > * + * { margin-top: 0; }

.ticket-card {
    --stub-w: 100px;
    position: relative;
    display: flex;
    min-width: 0;
    background: var(--tint);
    border-radius: var(--r-md);
    overflow: hidden;
}

.ticket-card .stub-number { font-size: 2.25rem; }
.ticket-card .stub-number.is-long { font-size: 1.6rem; }

.ticket-body {
    flex: 1;
    min-width: 0;
    display: grid;
    align-content: center;
    justify-items: start;
    gap: var(--s1);
    padding: var(--s4);
}

.detail-name {
    font-size: 1.5rem;
    overflow-wrap: anywhere;
}

.detail-phone {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.season-note {
    color: var(--ink-3);
    font-size: .875rem;
    font-weight: 700;
}

.figures {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s3);
}

.figure {
    min-width: 0;
    padding: var(--s3) var(--s4);
    background: var(--sheet);
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
}

.figure dt {
    color: var(--ink-3);
    font-size: .8125rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.figure dd {
    margin-top: 2px;
    font-size: 1.25rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.figure-main { grid-column: 1 / -1; }

.figure-main dd {
    font-size: 2.25rem;
    line-height: 1.1;
    letter-spacing: -.02em;
}

.unit {
    font-size: .5em;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--ink-3);
}

/* Transporti, vendi, toka, rrënjët: të dhëna të shkurtra nën shifrat. */
.facts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: var(--s2) var(--s4);
    padding: var(--s3) var(--s4);
    background: var(--sheet);
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
}

.facts dt {
    color: var(--ink-3);
    font-size: .8125rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.facts dd {
    font-weight: 800;
    overflow-wrap: anywhere;
}

.action-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--s2);
}

.crate-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.crate-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "no kg" "meta meta";
    align-items: center;
    gap: 0 var(--s3);
    padding: var(--s2) 0;
    border-bottom: 1px solid var(--rule-soft);
}

.crate-item.has-delete {
    grid-template-columns: minmax(0, 1fr) auto var(--tap);
    grid-template-areas: "no kg del" "meta meta del";
}

.crate-no {
    grid-area: no;
    font-family: var(--mono);
    font-weight: 700;
    overflow-wrap: anywhere;
}

.crate-kg {
    grid-area: kg;
    font-family: var(--mono);
    font-size: 1.125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.crate-meta {
    grid-area: meta;
    color: var(--ink-3);
    font-size: .8125rem;
}

.crate-item .btn-icon { grid-area: del; justify-self: end; }

.crate-sum {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-top: var(--s3);
    font-weight: 800;
}

.crate-sum strong {
    font-family: var(--mono);
    font-size: 1.25rem;
    font-variant-numeric: tabular-nums;
}

.add-crate {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
    gap: var(--s2);
    margin-top: var(--s4);
    padding-top: var(--s4);
    border-top: 2px dashed var(--rule);
}

.add-crate .btn,
.add-crate .field-error,
.add-crate .add-crate-title { grid-column: 1 / -1; }

.add-crate-title { font-weight: 800; }

.history {
    display: grid;
    gap: var(--s2);
}

.history > div {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr);
    gap: var(--s3);
}

.history dt {
    color: var(--ink-3);
    font-weight: 700;
}

.comment-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* --- Paneli ---------------------------------------------------------------------- */

.dash { display: grid; gap: var(--s4); }
.dash > * + * { margin-top: 0; }

.dash-top,
.dash-grid {
    display: grid;
    gap: var(--s4);
    min-width: 0;
}

.hero-label,
.tile-label {
    color: var(--ink-2);
    font-weight: 700;
}

/* shifrat e mëdha: sans, proporcionale */
.hero-value {
    margin-top: var(--s1);
    font-size: clamp(2.5rem, 13vw, 3.75rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.03em;
    overflow-wrap: anywhere;
}

.hero-value .unit { font-size: .42em; }

.hero-sub {
    margin-top: var(--s1);
    color: var(--ink-3);
}

/* shiriti magazinë / përfunduar: pjesë e së tërës, 2px hapësirë mes segmenteve */
.split {
    display: flex;
    gap: 2px;
    height: 14px;
    margin-top: var(--s4);
    border-radius: 4px;
    background: var(--well);
    overflow: hidden;
}

.split-seg {
    flex-basis: 0;
    min-width: 3px;
    background: var(--dot);
}

.split-legend {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s2);
    margin-top: var(--s3);
}

.split-item {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr);
    gap: 0 var(--s2);
    padding: var(--s3);
    border-radius: var(--r-sm);
    background: var(--tint);
    color: inherit;
    text-decoration: none;
}

/* Blloqet e panelit hapin listën e filtruar */
a.split-item:hover { box-shadow: inset 0 0 0 2px var(--dot); }

.split-name,
.split-value,
.split-sub { display: block; }

.split-item .swatch {
    width: 12px;
    height: 12px;
    margin-top: 5px;
    border-radius: 3px;
    background: var(--dot);
}

.split-name { font-weight: 800; }

.split-value {
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.split-sub {
    color: var(--ink-2);
    font-size: .875rem;
}

.tiles {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s3);
    align-content: start;
}

.tile {
    display: grid;
    align-content: start;
    gap: 2px;
    min-width: 0;
}

.tile-value {
    font-size: 1.625rem;
    font-weight: 800;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.tile-sub { color: var(--ink-3); font-size: .9375rem; }

/* "Numri i fundit": ngjyrë neutrale — bluja/jeshilja janë të rezervuara për statusin. */
.tile-ticket .stub {
    width: auto;
    min-width: 96px;
    justify-self: start;
    margin-top: var(--s1);
    padding: var(--s2) var(--s4);
    border-radius: var(--r-sm);
    background: var(--ink);
}

.tile-ticket .stub::after { display: none; }

/* Grafiku i 14 ditëve: vetëm HTML/CSS */
.chart { position: relative; }

.chart-plot {
    position: relative;
    height: 210px;
}

.chart-area {
    position: absolute;
    top: 24px;
    right: 0;
    bottom: 0;
    left: 44px;
}

.gridline {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--y);
    border-top: 1px solid var(--rule);
}

.gridline.is-base { border-top-color: var(--rule-strong); }

.gridline span {
    position: absolute;
    right: calc(100% + 6px);
    top: -.7em;
    color: var(--ink-3);
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cols {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(14, minmax(0, 1fr));
}

.col {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 100%;
    outline: none;
}

.col-bar {
    position: relative;
    width: min(24px, 72%);
    height: var(--h);
    border-radius: 4px 4px 0 0;
    background: var(--bar);
}

.col.is-zero .col-bar { visibility: hidden; }
.col.is-today .col-bar { background: var(--bar-today); }

.col:hover .col-bar,
.col:focus-visible .col-bar { box-shadow: 0 0 0 2px var(--sheet), 0 0 0 4px var(--oil); }

.col-label {
    position: absolute;
    bottom: calc(var(--h) + 4px);
    left: 50%;
    transform: translateX(-50%);
    color: var(--ink-2);
    font-size: .75rem;
    font-weight: 800;
    white-space: nowrap;
    pointer-events: none;
}

.col-tip {
    position: absolute;
    bottom: calc(var(--h) + 8px);
    left: 50%;
    z-index: 3;
    display: none;
    padding: 6px 10px;
    border-radius: var(--r-sm);
    background: var(--ink);
    color: #fff;
    font-size: .8125rem;
    line-height: 1.35;
    white-space: nowrap;
    transform: translateX(-50%);
    pointer-events: none;
}

.col.tip-start .col-tip { left: 0; transform: none; }
.col.tip-end .col-tip { left: auto; right: 0; transform: none; }

.col:hover .col-tip,
.col:focus-visible .col-tip { display: block; }

.col:hover .col-label,
.col:focus-visible .col-label { visibility: hidden; }

.chart-x {
    display: grid;
    grid-template-columns: repeat(14, minmax(0, 1fr));
    margin-left: 44px;
    padding-top: 6px;
    color: var(--ink-3);
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.chart-x .is-today { color: var(--ink); font-weight: 800; }

.table-view { margin-top: var(--s3); }

.table-view summary {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    font-weight: 700;
    cursor: pointer;
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.table th,
.table td {
    padding: var(--s2) 6px;
    border-bottom: 1px solid var(--rule);
    text-align: left;
    vertical-align: middle;
}

.table td:first-child { overflow-wrap: anywhere; }

.table th:first-child,
.table td:first-child { padding-left: 0; }

.table th:last-child,
.table td:last-child { padding-right: 0; }

.table thead th {
    color: var(--ink-3);
    font-size: .8125rem;
    font-weight: 800;
}

.table .num {
    text-align: right;
    white-space: nowrap;
}

.table tfoot th { border-bottom: 0; }

/* --- Faqet e adminit --------------------------------------------------------------- */

.item-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.item-list > li {
    display: grid;
    gap: var(--s2);
    padding: var(--s3) 0;
    border-bottom: 1px solid var(--rule);
}

.item-list > li:first-child { padding-top: 0; }
.item-list > li:last-child { padding-bottom: 0; border-bottom: 0; }

.item-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s1) var(--s3);
}

.item-title {
    font-size: 1.0625rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.item-figures { font-variant-numeric: tabular-nums; }

.tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--well);
    color: var(--ink-2);
    font-size: .8125rem;
    font-weight: 800;
}

.tag-active {
    background: var(--oil-wash);
    color: var(--oil-ink);
}

.tag-off {
    background: transparent;
    border: 1px dashed var(--rule-strong);
    color: var(--ink-3);
}

.is-inactive .item-title { color: var(--ink-3); }

.item-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2);
}

.inline-form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
}

.inline-form .input { flex: 1 1 180px; width: auto; }

.user-password > summary {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.user-password[open] > summary { margin-bottom: var(--s2); }

.settings-form {
    display: grid;
    gap: var(--s4);
    max-width: 760px;
}

/* --- Hyrja dhe faqet e thjeshta ---------------------------------------------------- */

.login {
    display: grid;
    gap: var(--s4);
    max-width: 420px;
    margin: 6vh auto 0;
}

.login-brand {
    display: grid;
    justify-items: center;
    gap: var(--s1);
    text-align: center;
}

/* Logo e plotë Lior (faqja e hyrjes dhe instalimi) */
.login-logo {
    display: block;
    width: min(300px, 100%);
    height: auto;
    margin: 0 auto;
}

.login-brand h1 { margin: 0; }

.error-panel {
    display: grid;
    justify-items: center;
    gap: var(--s4);
    padding: var(--s6) var(--s4);
    text-align: center;
}

.error-code {
    color: var(--ink-4);
    font-family: var(--mono);
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
}

.debug {
    max-width: 100%;
    padding: var(--s3);
    overflow-x: auto;
    border-radius: var(--r-sm);
    background: var(--well);
    font-size: .75rem;
    text-align: left;
    white-space: pre-wrap;
}

/* --- Fermeri që kthehet ------------------------------------------------------------ */

.farmer-open {
    display: grid;
    gap: var(--s2);
    margin-top: var(--s2);
    padding: var(--s3);
    border-left: 4px solid var(--received);
    border-radius: var(--r-sm);
    background: var(--received-bg);
    color: var(--received-ink);
}

.farmer-open-title { font-weight: 700; }

.open-reg {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0 var(--s3);
    min-height: var(--tap);
    padding: var(--s2) var(--s3);
    border: 2px solid var(--received);
    border-radius: var(--r-sm);
    background: var(--sheet);
    color: var(--received-ink);
    text-decoration: none;
}

.open-reg-nr { grid-row: span 2; font-size: 1.25rem; font-weight: 800; }
.open-reg-meta { font-size: .875rem; }
.open-reg-go { font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }

/* --- Vaji, WhatsApp, veglat e listës ------------------------------------------------ */

/* WhatsApp: jeshile e errët mbi sfond të çelët (kontrast i lartë edhe me duar të lagura në diell). */
.btn-wa { border-color: #0b6b45; background: #e7f6ee; color: #0b6b45; }
.btn-wa:hover { background: #d3efe0; }

.reg-oil { color: var(--completed-ink); font-weight: 700; }

/* Detaji: "Shto peshë vaji" — fusha dhe butoni në një rresht. */
.add-crate.oil-add { grid-template-columns: minmax(0, 1fr) auto; }
.add-crate.oil-add .btn { grid-column: auto; padding: 0 var(--s4); }

.list-tools,
.head-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
}

.list-tools:empty { display: none; }
.list-tools .btn,
.head-actions .btn { padding: 0 var(--s4); }

/* Dritarja "✓ Përfundo": peshat e vajit (kg, mblidhen vetë) dhe Paguar (jeshile) / Pa paguar (e kuqe). */
.oil-dialog {
    width: min(92vw, 440px);
    max-height: calc(100dvh - 24px);
    padding: var(--s5) var(--s4) var(--s4);
    border: 0;
    border-radius: var(--r-md);
    background: var(--sheet);
    color: var(--ink);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .3);
    overflow-y: auto;
}

.oil-dialog::backdrop { background: rgba(14, 21, 17, .55); }
.oil-dialog-title { font-size: 1.125rem; font-weight: 800; }

.oil-weights {
    display: grid;
    gap: var(--s2);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.oil-weights legend { padding: 0; margin-bottom: var(--s2); }

.oil-rows { display: grid; gap: var(--s2); }

.oil-row {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) var(--tap);
    align-items: center;
    gap: var(--s2);
}

.oil-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: var(--s2) var(--s3);
    border-radius: var(--r-sm);
    background: var(--ink);
    color: rgba(255, 255, 255, .86);
    font-weight: 600;
}

.oil-total strong {
    margin-left: auto;
    margin-right: 4px;
    color: var(--oil-bright);
    font-family: var(--mono);
    font-size: 1.25rem;
    font-variant-numeric: tabular-nums;
}

.pay-actions { display: grid; gap: var(--s2); }

/* --- Shitjet: vaji dhe bërsia -------------------------------------------------------- */

.quantity {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s2);
}

.quantity-input {
    min-height: 52px;
    font-family: var(--mono);
    font-size: 1.1875rem;
    font-weight: 700;
    text-align: right;
}

.convert {
    color: var(--ink-2);
    font-family: var(--mono);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.convert.is-error { color: var(--danger); font-family: var(--font); font-size: .875rem; }

/* Bërsia: pesha vetëm në kg — njësia brenda fushës, djathtas. */
.unit-input { position: relative; }
.unit-input .quantity-input { padding-right: 52px; }

.unit-suffix {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    color: var(--ink-3);
    font-weight: 800;
    pointer-events: none;
}

.nipt-input { font-family: var(--mono); text-transform: uppercase; }

.sale-top {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s1) var(--s3);
}

.sale-top .item-title { color: inherit; text-decoration: none; }
.sale-top .item-title:hover { text-decoration: underline; }

.sale-qty {
    font-family: var(--mono);
    font-size: 1.0625rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.sale-meta { color: var(--ink-3); font-size: .875rem; overflow-wrap: anywhere; }
.sale-comment { font-size: .9375rem; overflow-wrap: anywhere; }
.sale form { justify-self: start; }

.sale.is-cancelled .item-title,
.sale.is-cancelled .sale-qty {
    color: var(--cancelled-ink);
    text-decoration: line-through;
}

/* Paneli: blloqet që hapin një listë */
.tile-link { color: inherit; text-decoration: none; }
.tile-link:hover { border-color: var(--ink); }
.tile-unpaid { border-left: 6px solid var(--danger); }
.tile-unpaid .tile-value { color: var(--danger); }

/* Skano QR: kamera në ekran të plotë. */
.scan-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    background: #000;
    color: #fff;
}

.scan-overlay[hidden] { display: none; }

.scan-overlay video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.scan-bar {
    display: grid;
    gap: var(--s3);
    padding: var(--s4);
    background: var(--ink);
}

.scan-status { font-weight: 700; text-align: center; }

/* --- Kuponi 58 mm ------------------------------------------------------------------
   48 mm zonë printimi = 32 karaktere (Font A). 32 shkronja monospace me 12px zënë ~61 mm,
   prandaj madhësia e shkronjës vendoset që 32 karaktere të nxënë saktë në 48 mm. */

.receipt-page {
    margin: 0;
    background: #fff;
    color: #000;
}

.receipt {
    width: 48mm;
    margin: 0 auto;
    font-family: var(--mono);
    font-size: 2.45mm;
    line-height: 1.3;
}

.r-line {
    min-height: 1.3em;
    white-space: pre;
}

.r-double {
    font-size: 2em;
    font-weight: 700;
    line-height: 1.15;
}

.r-qr {
    margin-top: 2mm;
    text-align: center;
}

.r-qr svg { display: inline-block; vertical-align: top; }

.receipt + .receipt { break-before: page; }

@media screen {
    .receipt-page { padding: var(--s3) var(--s2); background: var(--paper); }

    .receipt {
        width: calc(32ch + 2 * var(--s2)); /* 32 karaktere + mbushja anash (box-sizing: border-box) */
        max-width: 100%;
        padding: var(--s2);
        font-size: min(15px, 4.4vw);
        background: #fff;
        box-shadow: 0 1px 0 var(--rule), 0 0 0 1px var(--rule-soft);
    }

    .receipt + .receipt {
        margin-top: var(--s4);
        border-top: 2px dashed var(--rule-strong);
    }

    .receipt-actions {
        display: grid;
        gap: var(--s2);
        max-width: 320px;
        margin: var(--s4) auto 0;
    }
}

@media print {
    .no-print { display: none !important; }

    /* 2 mm lart; 12 mm letër bosh në fund, që kuponi të dalë plotësisht nga printeri para grisjes.
       Gjatësia e faqes (@page) llogaritet në RegistrationController::receiptPageHeight(). */
    .receipt {
        padding: 2mm 0 12mm;
        font-weight: 600; /* vijat e holla dalin të zbehta në letër termike */
    }
}

/* --- Ekrane më të gjera ------------------------------------------------------------- */

@media (min-width: 480px) {
    .user-name { display: inline; }
    .split-legend,
    .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 700px) {
    .form-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .form-grid .span-2 { grid-column: 1 / -1; }
    .filters-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s3); align-items: center; }
    .filters-row > * + * { margin-top: 0; }
    .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
    :root { --tabbar-h: 0px; }

    .tabbar { display: none; }

    .topbar {
        position: sticky;
        top: 0;
        z-index: 30;
        gap: var(--s5);
        padding: 0 var(--s5);
    }

    .topnav {
        display: flex;
        align-self: stretch;
        gap: var(--s1);
    }

    .topnav-link {
        display: flex;
        align-items: center;
        padding: 0 var(--s3);
        border-top: 3px solid transparent;
        border-bottom: 3px solid transparent;
        color: rgba(255, 255, 255, .78);
        font-weight: 700;
        text-decoration: none;
    }

    .topnav-link:hover { color: #fff; }

    .topnav-link.is-active {
        color: #fff;
        border-bottom-color: var(--oil-bright);
    }

    .container { padding: var(--s5) var(--s5) var(--s6); }

    .dash-top { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
    /* 6 pllaka (edhe "Shitje bërsie"): dy kolona kur ka vend, që grafiku të mos zbresë shumë poshtë. */
    .dash-top .tiles { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
    .dash-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }

    .figures { grid-template-columns: 2fr 1fr 1fr; }
    .figure-main { grid-column: auto; }
}