/* ============================================================
   Etiketter + Admin + Personal-läge
   (kompletterar style.css)
   ============================================================ */

/* ------------------------------------------------------------
   Typsnitt - Libre Franklin, inbaddat i projektet
   ------------------------------------------------------------
   Etiketterna bad tidigare om Franklin Gothic Demi och Book, som
   maste vara installerade pa varje dator. Det var de inte, sa
   etiketterna foll tyst tillbaka pa Helvetica och sag olika ut pa
   olika maskiner. Libre Franklin ar en fri atergivning av Franklin
   Gothic och ligger nu i projektet, sa att resultatet blir likadant
   pa varje skarm och skrivare, aven utan internet.

   Filen ar variabel, sa samma fil bar bada vikterna. Varje familj
   ar last vid sin vikt - 600 for rubrik, 400 for brodtext - vilket
   gor att aldre regler langre ner som sager font-weight: 400 inte
   gor rubrikerna tunna.
   ------------------------------------------------------------ */

@font-face {
    font-family: "Kandyz Rubrik";
    src: url("fonts/LibreFranklin-latin.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: block;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Kandyz Rubrik";
    src: url("fonts/LibreFranklin-latin-ext.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: block;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Kandyz Brodtext";
    src: url("fonts/LibreFranklin-latin.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: block;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Kandyz Brodtext";
    src: url("fonts/LibreFranklin-latin-ext.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: block;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --lw: 85.3mm;
    --lh: 52.1mm;
    --u: calc(1mm * .947778);
    --k: .947778;
    --f-title: "Kandyz Rubrik", "Helvetica Neue", Arial, sans-serif;
    --f-body: "Kandyz Brodtext", "Helvetica Neue", Arial, sans-serif;
}

/* Bredare layout för personalens flikar */
body.staff-wide .app-container {
    max-width: 1280px;
}

/* ================= MOBILMENY =================
   Menyn kan bli bredare än skärmen (6 flikar i personal-läge).
   Låt den skrolla i sidled för sig själv i stället för att dra
   med sig hela sidan. */
html, body {
    overflow-x: hidden;
}

#app-header nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 100%;
    flex: 1 1 auto;
    min-width: 0; /* låt menyn krympa och skrolla i stället för att trycka undan flaggor/logga */
}

#app-header .header-right {
    flex-shrink: 0; /* flaggorna och loggan får aldrig tryckas ihop */
}

#app-header nav::-webkit-scrollbar {
    display: none;
}

#app-header nav button {
    flex: 0 0 auto;
    white-space: nowrap;
}

@media (max-width: 700px) {
    /* Logga + språkval överst, menyn som egen svepbar rad under */
    #app-header {
        flex-wrap: wrap;
        gap: 10px;
    }

    #app-header .header-right {
        order: 1;
        margin-left: auto;
    }

    #app-header nav {
        order: 2;
        width: 100%;
    }
}

.labels-layout {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(400px, 1.15fr);
    gap: 20px;
    align-items: start;
}

.labels-col {
    min-width: 0; /* låt kolumnerna krympa under innehållets naturliga bredd (mobil) */
}

@media (max-width: 900px) {
    .labels-layout { grid-template-columns: 1fr; }
}

.hint {
    font-size: 12px;
    color: #777;
    line-height: 1.5;
    margin: 6px 0 0;
}

.warn {
    color: #B4540A;
    font-weight: 600;
}

.staff-link {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    cursor: pointer;
    padding: 6px 12px;
    font-family: 'Outfit', sans-serif;
}

.staff-link:hover {
    color: #fff;
    text-decoration: underline;
}

.label-select,
.label-num {
    padding: 9px 11px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
}

.label-num { width: 80px; text-align: center; }

/* Sökresultat- och kölistor på etikettfliken */
#label-results {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    max-height: 230px;
    overflow: auto;
}

#label-results li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid transparent;
}

#label-results li:hover {
    background: #FCF2F8;
    border-color: #F6D3E7;
}

#label-results .nm { flex: 1; line-height: 1.3; }
#label-results .meta { font-size: 11px; color: #888; font-variant-numeric: tabular-nums; }

#label-queue {
    list-style: none;
    margin: 0;
    padding: 0;
}

#label-queue li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    background: #fff;
}

#label-queue li.sel {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px #FBD9EC inset;
}

#label-queue .nm { flex: 1; line-height: 1.3; }

#label-queue .qty input {
    width: 48px;
    text-align: center;
    padding: 5px 4px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

#label-queue .x {
    border: none;
    background: transparent;
    color: #888;
    font-size: 18px;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 5px;
    cursor: pointer;
}

#label-queue .x:hover { background: #F1EDF5; color: #C00; }

.label-field { display: block; margin-bottom: 12px; }

.label-field > span {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #777;
    margin-bottom: 5px;
}

.label-field input[type=text],
.label-field textarea {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    resize: vertical;
    line-height: 1.45;
}

.badges-toggle { display: flex; flex-wrap: wrap; gap: 8px 14px; }

.badges-toggle label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
}

.preview-wrap {
    background: repeating-conic-gradient(#EDE9F2 0% 25%, #F6F3F9 0% 50%) 50%/16px 16px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 18px;
    display: flex;
    justify-content: center;
}

.zoomer { transform-origin: top center; }

/* ================= ETIKETT (90 × 55 mm i grunddesign) ================= */
.label {
    position: relative;
    width: var(--lw);
    height: var(--lh);
    flex: 0 0 auto;
    border: calc(2.4 * var(--u)) solid #E6007E;
    border-radius: 0;
    background: #fff;
    color: #000;
    overflow: hidden;
    font-family: var(--f-body);
    text-align: left; /* ärver annars centrering från kortet runtomkring */
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

.l-brand {
    position: absolute;
    left: calc(0.9 * var(--u));
    top: calc(1.0 * var(--u));
    width: calc(18 * var(--u));
    height: calc(12.4 * var(--u));
    display: flex;
    align-items: center;
}

.l-brand img { max-width: calc(18 * var(--u)); max-height: calc(12.4 * var(--u)); object-fit: contain; display: block; }

.l-brand .txt {
    font-family: var(--f-title);
    font-size: calc(4.4 * var(--u));
    line-height: 1;
    color: #E6007E;
    text-transform: uppercase;
}

.l-badges {
    position: absolute;
    right: calc(1.2 * var(--u));
    display: grid;
    grid-template-columns: repeat(2, calc(12.7 * var(--u)));
    column-gap: calc(2.3 * var(--u));
    justify-content: end;
    align-content: start;
}

.bdg { height: calc(3.5 * var(--u)); display: block; }
.bdg img { width: calc(12.7 * var(--u)); height: calc(3.5 * var(--u)); display: block; }
.bdg svg { width: calc(12.7 * var(--u)); height: calc(3.5 * var(--u)); display: block; }

.l-title {
    position: absolute;
    left: calc(0.9 * var(--u));
    top: calc(13.9 * var(--u));
    width: calc(83.4 * var(--u));
    max-height: calc(9.4 * var(--u));
    overflow: hidden;
    font-family: var(--f-title);
    font-size: calc(11pt * var(--k));
    line-height: 1.14;
    font-weight: 400;
}

.l-ing {
    position: absolute;
    left: calc(1.4 * var(--u));
    top: calc(19.2 * var(--u));
    width: calc(82.4 * var(--u));
    height: calc(14.9 * var(--u));
    overflow: hidden;
    font-family: var(--f-body);
    font-size: calc(8pt * var(--k));
    line-height: 1.135;
    font-weight: 400;
}

.l-kandyz {
    position: absolute;
    left: calc(0.9 * var(--u));
    top: calc(39.2 * var(--u));
    width: calc(19.2 * var(--u));
    height: calc(9 * var(--u));
    display: flex;
    align-items: center;
}

.l-kandyz img { max-width: calc(19.2 * var(--u)); max-height: calc(9 * var(--u)); object-fit: contain; display: block; }

.l-barcode {
    position: absolute;
    left: calc(31.4 * var(--u));
    top: calc(37.8 * var(--u));
    width: calc(29.8 * var(--u));
    height: calc(10.4 * var(--u));
}

.l-barcode svg { width: calc(29.8 * var(--u)); height: calc(10.4 * var(--u)); display: block; }

.l-mascot {
    position: absolute;
    right: calc(1.2 * var(--u));
    top: calc(34.3 * var(--u));
    width: calc(19.8 * var(--u));
    height: calc(15.5 * var(--u));
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

.l-mascot img { max-width: calc(19.8 * var(--u)); max-height: calc(15.5 * var(--u)); object-fit: contain; display: block; }

/* Skyddsnat: gar typsnittsfilen inte att ladda blir systemfonten fet i stallet */
body.nofg .l-title,
body.nofg .l-brand .txt { font-weight: 800; }

/* ================= UTSKRIFT ================= */
#printarea {
    position: absolute;
    left: -30000px;
    top: 0;
}

.sheet {
    display: flex;
    flex-wrap: wrap;
    gap: .5mm;
    width: var(--sheetw, 180.5mm);
    align-content: flex-start;
}

@media print {
    body { background: #fff; }

    .app-container,
    #screensaver-overlay,
    .toast-container,
    .modal,
    #image-details-overlay {
        display: none !important;
    }

    #printarea { position: static; left: auto; }

    .sheet { page-break-after: always; break-after: page; }
    .sheet:last-child { page-break-after: auto; break-after: auto; }
    .label { break-inside: avoid; }
}

/* ================= REGISTER ================= */
.reg-list {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    max-height: 230px;
    overflow: auto;
}

.reg-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid transparent;
}

.reg-list li:hover {
    background: #FCF2F8;
    border-color: #F6D3E7;
}

.reg-list .nm { flex: 1; line-height: 1.3; }
.reg-list .meta { font-size: 11px; color: #888; font-variant-numeric: tabular-nums; }

.reg-list .x {
    border: none;
    background: transparent;
    color: #888;
    font-size: 18px;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 5px;
    cursor: pointer;
}

.reg-list .x:hover { background: #F1EDF5; color: #C00; }

/* ================= KIOSKLÄGE ================= */
/* Personalens funktioner göms för kunderna när kioskläget är på */
body.kiosk .staff-only,
body.kiosk #staff-toggle-btn,
body.kiosk #result-print-label-btn {
    display: none !important;
}

/* Plats för tangentbordet längst ned */
body.kiosk main {
    padding-bottom: 340px;
}

#kiosk-keyboard {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9500;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 2px solid var(--primary);
    padding: 10px 8px calc(10px + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 30px rgba(0, 0, 0, 0.15);
    user-select: none;
}

#kiosk-keyboard .kb-row {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 6px;
}

#kiosk-keyboard button {
    flex: 1 1 0;
    max-width: 110px;
    padding: 16px 0;
    font-size: 22px;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    color: var(--text-color);
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
    cursor: pointer;
    touch-action: manipulation;
}

#kiosk-keyboard button:active {
    background: #fce7f3;
    transform: scale(0.96);
}

#kiosk-keyboard .kb-back {
    max-width: 160px;
    background: rgba(239, 68, 68, 0.08);
    color: #b91c1c;
}

#kiosk-keyboard .kb-space {
    flex: 4 1 0;
    max-width: none;
    font-size: 15px;
    letter-spacing: 2px;
    color: #777;
}

#kiosk-keyboard .kb-enter {
    flex: 2 1 0;
    max-width: 240px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff;
    border: none;
}

/* ================= KAMERASKANNING ================= */
.scan-btn {
    font-size: 20px;
    padding: 8px 14px;
    flex: 0 0 auto;
}

.scan-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.scan-frame {
    position: absolute;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);
    width: min(80vw, 420px);
    height: 160px;
    border: 3px solid rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

.scan-status {
    position: absolute;
    left: 50%;
    bottom: 10%;
    transform: translateX(-50%);
    max-width: 90vw;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    padding: 10px 18px;
    border-radius: 999px;
    text-align: center;
    transition: background 0.3s;
}

.scan-close {
    position: absolute;
    top: max(16px, env(safe-area-inset-top));
    right: 16px;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
}

/* ================= ADMIN ================= */
.admin-upload-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 0;
    flex-wrap: wrap;
}

.admin-upload-btn { display: inline-block; cursor: pointer; }

.admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    margin-top: 10px;
}

.admin-thumb {
    position: relative;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.admin-thumb img {
    width: 100%;
    height: 90px;
    object-fit: contain;
    display: block;
    background: #fff;
    padding: 6px;
    box-sizing: border-box;
}

.admin-thumb .fname {
    font-size: 10px;
    color: #666;
    padding: 4px 6px;
    word-break: break-all;
    display: block;
    border-top: 1px solid var(--border-color);
}

.admin-thumb .del {
    position: absolute;
    top: 4px;
    right: 4px;
    border: none;
    background: rgba(239, 68, 68, 0.9);
    color: #fff;
    border-radius: 6px;
    width: 24px;
    height: 24px;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.admin-thumb .del:hover { background: #b91c1c; }

.admin-thumb .ren {
    position: absolute;
    top: 4px;
    right: 32px;
    border: none;
    background: rgba(90, 148, 192, 0.9);
    color: #fff;
    border-radius: 6px;
    width: 24px;
    height: 24px;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
}

.admin-thumb .ren:hover { background: #3e6f96; }