/*
 * Læsbarhedslag — etape 1 (typografi) og etape 2 (farver).
 *
 * Indlæses SIDST i både views/master.php og views/admin/master.php, så det
 * vinder over bootstrap, dashgum-temaet og products.css uden at de skal
 * ændres. !important bruges kun hvor en eksisterende !important-regel skal
 * slås — hvert sted er noteret med hvor reglen kommer fra.
 *
 * Farverne er de nuværende, gjort mørke nok til 4,5:1 mod hvid tekst
 * (WCAG 2.1 AA). Målte værdier står i kommentaren efter hver farve.
 */

:root {
    --lab-blue: #15619B;         /* var #3288E6: 3,62:1 -> 6,53:1 */
    --lab-red: #A93116;          /* var #E85639: 3,61:1 -> 6,69:1 */
    --lab-green: #0F7D68;        /* var #19AF8B: 2,78:1 -> 5,06:1 */
    --lab-green-dark: #0B6252;   /* hover/aktiv */
    --lab-grey: #6B7472;         /* var #CCCCCC: 1,61:1 -> 4,81:1 */
    --lab-link: #17629F;         /* var #428BCA: 3,63:1 -> 6,39:1 */
    --lab-text: #222222;
    --lab-text-muted: #5F6B68;   /* var #888888: 3,54:1 -> 5,54:1 */
    --lab-sidebar-text: #D5D9DE; /* var #AEB2B7: 4,16:1 -> 6,25:1 */
}


/* =========================================================
   Etape 1 — typografi
   ========================================================= */

/*
 * Bootstrap sætter html{font-size:10px} i faste pixels. Det gør dels alle
 * rem-værdier forankret til 10px, dels at browserens/tablettens egen
 * skriftstørrelse slet ikke slår igennem. 100% = brugerens egen indstilling.
 */
html {
    font-size: 100%;
}

body {
    /* var 13px (admin) og 14px (tablet) */
    font-size: 1rem;
    line-height: 1.5;
    color: var(--lab-text);
    font-weight: 400 !important; /* slår style.css:18 */
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.25;
}

th {
    font-weight: 700;
}

/* hjælpetekst: var 10px i #ccc (1,61:1) */
small {
    font-size: 0.8125rem;
    color: var(--lab-text-muted);
}

a {
    color: var(--lab-link);
}


/* --- tabletvisningen (scan) --- */

/* produktnavn i "senest brugt"-listen */
#most-used h4 {
    font-size: 1.375rem;
    margin-bottom: 2px;
}

/* hvem der har ind-/udleveret — sat med inline style før, se js/system.js */
#most-used .user-info {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--lab-text-muted);
}

/* depotnavn og log af-knap i toppen */
.header h4 {
    font-size: 1.25rem;
}

.header .btn {
    font-size: 1rem;
    padding: 10px 18px;
}

/* feltlabels i registreringsdialogen: var 15,4px */
.vex .vex-dialog-input p {
    font-size: 1.0625rem;
}

/* "Indlever" / "Udlever": var 16px, og ordet skal bære betydningen */
.vex .input-output [type="checkbox"] + label:after {
    font-size: 1.375rem;
    font-weight: 700;
}

/* "Antal tilbage", "Udløber", "LOT nr.": var 10px */
.vex-dialog-input ul li .label {
    font-size: 0.8125rem;
    width: auto;
    min-width: 96px;
    padding: 2px 8px;
    line-height: 1.5em;
}


/* --- administrationen --- */

h1.page-header {
    font-size: 1.125rem;
    font-weight: 700;
}

/* var 14px / 12px — knaptekst er også tekst */
.btn {
    font-size: 1rem;
}

.btn-sm,
.btn-xs {
    font-size: 0.9375rem;
}

#sidebar {
    font-size: 1rem;
    color: var(--lab-sidebar-text);
}

ul.sidebar-menu li a {
    font-size: 0.9375rem;
    color: var(--lab-sidebar-text);
}

ul.top-menu > li > .logout {
    font-size: 0.9375rem;
}

.badge {
    font-size: 0.9375rem;
    font-weight: 700;
}


/* =========================================================
   Etape 2 — farver
   ========================================================= */

/* --- tal og mængder på scan-skærmen --- */

p.amount,
p.depot-amount,
p.depot-change {
    background: var(--lab-blue);
    font-size: 1.25rem;
    font-weight: 700;
    min-width: 48px;
    min-height: 48px;
    line-height: 48px;
}

p.depot-change.red,
p.depot-amount.red {
    background-color: var(--lab-red);
}

/* de større tal når nu ned bag stregkodelinjen, som har z-index 10 */
.barcode-wrapper .depot-change,
.barcode-wrapper .depot-amount {
    z-index: 11;
}

/* --- registreringsdialogen --- */

.vex-content [type="checkbox"]:not(:checked) + label:after,
.vex-content [type="checkbox"]:checked + label:after {
    color: var(--lab-blue);
}

.vex .input-output [type="checkbox"]:not(:checked) + label:after,
.vex .input-output [type="checkbox"]:checked + label:after {
    color: var(--lab-blue);
}

.vex .input-output [type="checkbox"]:not(:checked) + label:after {
    color: var(--lab-red);
}

.remaining .label {
    background-color: var(--lab-blue) !important; /* slår products.css:764 */
}

.expires .label {
    background-color: var(--lab-red) !important;  /* slår products.css:768 */
}

.vex.vex-theme-default .vex-dialog-button.vex-dialog-button-primary,
.modal-header {
    background: var(--lab-green) !important;      /* slår style.css:53 */
}

.vex.vex-theme-default .vex-dialog-button.vex-dialog-button-secondary {
    background-color: var(--lab-red) !important;  /* slår products.css:690 */
}

/* --- administrationen --- */

.btn-theme {
    background-color: var(--lab-green);
    border-color: var(--lab-green);
}

.btn-theme:hover,
.btn-theme:focus,
.btn-theme:active,
.btn-theme.active,
.open .dropdown-toggle.btn-theme {
    background-color: var(--lab-green-dark);
    border-color: var(--lab-green-dark);
}

ul.top-menu > li > .logout {
    background: var(--lab-green);
    border: 1px solid var(--lab-green) !important; /* slår style.css:230 */
}

ul.sidebar-menu li a.active,
ul.sidebar-menu li a:hover,
ul.sidebar-menu li a:focus {
    background: var(--lab-green);
    color: #fff;
}

ul.sidebar-menu li ul.sub li.active a {
    color: var(--lab-green);
}

.badge {
    background-color: var(--lab-grey);
}

.badge.green,
.badge.bg-success {
    background: var(--lab-green);
}

.badge.bg-important,
.badge.red {
    background: var(--lab-red);
}

.label-theme,
.bg-theme {
    background-color: var(--lab-green);
}

.form-login h2.form-login-heading {
    background: var(--lab-green);
    font-weight: 600;
}


/* =========================================================
   Etape 3 — struktur
   ========================================================= */

/* --- toppen af tabletvisningen ---
   Depotnavnet lå absolut placeret oven på logoet og overlappede det på
   smalle skærme. Nu en almindelig flex-linje. */

.scan-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
}

/* logoet bar på gamle margener og bundpolstring fra da linjen var
   absolut placeret — de skævvred den lodrette centrering */
.scan-header .logo {
    flex: none;
    margin: 0 !important;
    padding-bottom: 0;
    background-position: left center;
}

.scan-header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-left: auto;
}

/* Depotnavnet blev klemt til flere linjer af knapperne ved siden af.
   Nowrap tvinger i stedet linjeskiftet mellem navn og knapper. */
.scan-header .depot-name {
    font-size: 1.25rem;
    font-weight: 600;
    white-space: nowrap;
}

/* På telefonbredde får navnet sin egen linje i fuld bredde, så også
   lange depotnavne kan brydes læseligt i stedet for at blive klemt. */
@media (max-width: 700px) {
    .scan-header-right {
        width: 100%;
        margin-left: 0;
    }

    .scan-header .depot-name {
        flex: 1 0 100%;
        white-space: normal;
    }
}

/* Log af: samme grønne som knappen i administrationens topbjælke, med
   ikonet som inline SVG (tabletvisningen indlæser ikke Font Awesome) */
.scan-header .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border: 0;
    border-radius: 6px;
    background: var(--lab-green);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    text-shadow: none;
    box-shadow: none;
}

.scan-header .btn:before {
    content: "";
    width: 20px;
    height: 20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 4H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M13 12h8'/%3E%3Cpath d='M18 9l3 3-3 3'/%3E%3C/svg%3E") no-repeat center center;
    background-size: 20px 20px;
}

.scan-header .btn:hover,
.scan-header .btn:focus,
.scan-header .btn:active {
    background: var(--lab-green-dark);
    color: #fff;
}

.scan-header .btn:focus-visible {
    outline: 3px solid var(--lab-green);
    outline-offset: 2px;
}


/* Skift depot / Tilbage: sekundær knap i samme familie som Log af, men
   med hvid bund så den ikke konkurrerer med den. */
.scan-header .btn.btn-switch-depot,
.scan-header .btn.btn-back {
    background: #fff;
    color: var(--lab-green);
    border: 2px solid var(--lab-green);
    padding: 8px 16px;
}

.scan-header .btn.btn-switch-depot:hover,
.scan-header .btn.btn-switch-depot:focus,
.scan-header .btn.btn-switch-depot:active,
.scan-header .btn.btn-back:hover,
.scan-header .btn.btn-back:focus,
.scan-header .btn.btn-back:active {
    background: var(--lab-green);
    color: #fff;
}

.scan-header .btn.btn-switch-depot:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F7D68' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h15'/%3E%3Cpath d='M16 5l3 3-3 3'/%3E%3Cpath d='M20 16H5'/%3E%3Cpath d='M8 13l-3 3 3 3'/%3E%3C/svg%3E");
}

.scan-header .btn.btn-switch-depot:hover:before,
.scan-header .btn.btn-switch-depot:focus:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h15'/%3E%3Cpath d='M16 5l3 3-3 3'/%3E%3Cpath d='M20 16H5'/%3E%3Cpath d='M8 13l-3 3 3 3'/%3E%3C/svg%3E");
}

.scan-header .btn.btn-back:before {
    content: none;
}


/* --- depotvælgeren (/welcome/depots) ---
   Store trykflader, så et depot kan vælges med en finger på afstand. */

.depot-picker-title {
    font-size: 1.75rem;
    margin: 0 0 20px;
}

.depot-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.depot-choice {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-height: 96px;
    padding: 20px 24px;
    border: 2px solid #d3dbd8;
    border-radius: 8px;
    background: #fff;
    color: var(--lab-text);
    text-decoration: none;
}

.depot-choice:hover,
.depot-choice:active {
    border-color: var(--lab-green);
    color: var(--lab-text);
    text-decoration: none;
}

.depot-choice.current {
    border-color: var(--lab-green);
    background: #f2f8f6;
}

.depot-choice-name {
    font-size: 1.375rem;
    font-weight: 600;
}

.depot-choice-note {
    font-size: 1rem;
    color: var(--lab-green);
    font-weight: 600;
}

.depot-picker-empty {
    font-size: 1.125rem;
    color: var(--lab-text-muted);
}


/* --- scanfeltet ---
   Var ca. en tredjedel af skærmen: jumbotron-polstring + 200px stregkodefelt
   med 86px stregkodefont. Selve tallet, som er den eneste kvittering brugeren
   får på hvad der blev scannet, var det mindste af de tre. Byttet om. */

.jumbotron {
    padding: 18px 15px;
    margin-bottom: 20px;
}

#barcode-wrapper {
    height: 160px;   /* var 200px */
}

input.barcode {
    font-size: 2rem; /* var 28px */
    margin-top: 0;
    margin-bottom: 8px;
}

#barcode-wrapper p.barcode-text {
    font-size: 44px; /* var 86px — grafikken er dekoration, ikke information */
    bottom: 22px;
}

/* Teksten sad før placeret med en margen, der skulle passe til inputfeltets
   højde. Nu hængt op på bunden af stregkodefeltet og krympet til sit eget
   indhold, så stregkoden er synlig i begge sider af den. */
#barcode-wrapper p.barcode-value {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    margin: 0;
    width: auto;
    max-width: 90%;
    padding: 2px 16px;
    font-size: 1.125rem;
}


/* --- listen "senest brugt" ---
   Var: stregkodegrafik i fuld bredde med navnet i småt over og to
   ufortalte tal i hjørnerne. Nu: hvad skete der, med hvad, og hvor
   mange er der tilbage. Stregkoden står som cifre i metalinjen. */

#most-used {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.usage-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 6px;
    cursor: pointer;
}

.usage-row:hover,
.usage-row:active {
    border-color: var(--lab-blue);
    background: #f7fafc;
}

.usage-badge {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 88px;
}

/* tallene var absolut placeret inde i stregkodefeltet */
.usage-row .depot-change,
.usage-row .depot-amount {
    position: static;
    margin: 0;
}

.usage-caption {
    font-size: 0.8125rem;
    line-height: 1.2;
    text-align: center;
    color: var(--lab-text-muted);
}

.usage-main {
    flex: 1;
    min-width: 0;
}

.usage-row h4 {
    margin: 0 0 2px;
    font-size: 1.375rem;
    overflow-wrap: break-word;
}

.usage-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 12px;
    margin: 0;
    font-size: 1rem;
    color: var(--lab-text-muted);
}

.usage-barcode {
    font-family: "Courier New", Courier, monospace;
}

/* på telefon får navnet sin egen linje, så det ikke klemmes mellem tallene */
@media (max-width: 600px) {
    .usage-row {
        flex-wrap: wrap;
        gap: 8px 16px;
    }

    .usage-main {
        flex: 1 0 100%;
        order: -1;
    }

    .usage-badge {
        flex-direction: row;
        align-items: center;
        width: auto;
        gap: 8px;
    }
}


/* --- lot-rækkerne i registreringsdialogen ---
   Var fast 84px høje med absolut placerede kolonner, så indholdet ikke
   kunne vokse med skriftstørrelsen. Nu flex, så rækken følger teksten. */

.vex-dialog-input ul li {
    display: flex;
    align-items: center;
    gap: 16px;
    height: auto;
    min-height: 84px;
    padding: 12px 0;
}

.vex-dialog-input ul li .left {
    position: static;
    flex: none;
    width: 40px;
    height: 40px;
}

.vex-dialog-input ul li .right {
    position: static;
    flex: 1;
    width: auto;
    min-width: 0;
}

.vex-dialog-input ul li .amount,
.vex-dialog-input ul li .right .amount {
    position: static;
    flex: none;
    margin: 0;
}

.vex-dialog-input ul li .right p {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 2px;
}


/* --- ind/ud-ikonet ---
   Var to PNG'er i den gamle lyse rød/blå, som ikke kunne farves fra CSS.
   Samme tegning som SVG i de nye farver. */

.vex .input-output [type="checkbox"] + label:before,
.vex .input-output [type="checkbox"]:checked + label:before {
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 112px auto;
}

/* ordet skal kunne læses over ikonet, ikke oven i det */
.vex .input-output [type="checkbox"] + label:after {
    top: 2px;
    line-height: 1.2;
}

.vex .input-output [type="checkbox"] + label:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 140' fill='none' stroke='%23A93116' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24 100H14a8 8 0 0 1-8-8V22a8 8 0 0 1 8-8h100a8 8 0 0 1 8 8v70a8 8 0 0 1-8 8h-10'/%3E%3Cpath d='M64 56v74'/%3E%3Cpath d='M42 108l22 22 22-22'/%3E%3C/svg%3E");
}

.vex .input-output [type="checkbox"]:checked + label:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 140' fill='none' stroke='%2315619B' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24 100H14a8 8 0 0 1-8-8V22a8 8 0 0 1 8-8h100a8 8 0 0 1 8 8v70a8 8 0 0 1-8 8h-10'/%3E%3Cpath d='M64 130V56'/%3E%3Cpath d='M42 78l22-22 22 22'/%3E%3C/svg%3E");
}


/* =========================================================
   Etape 4 — semantik og fokus
   ========================================================= */

/* tekst der kun er for skærmlæsere */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Synlig fokusmarkering. Var slået fra i temaet (a, a:hover, a:focus
   { outline: none }) og på scannerfeltet, så man ikke kunne se hvor
   tastaturet var. :focus-visible rammer kun tastaturbrug. */
a:focus-visible,
button:focus-visible,
select:focus-visible,
textarea:focus-visible,
input:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
.btn:focus-visible /* bootstraps egen .btn:focus vinder ellers */ {
    outline: 3px solid var(--lab-blue);
    outline-offset: 2px;
}

/* checkbokse tegnes som :before på deres label, så ringen skal derover */
[type="checkbox"]:focus-visible {
    outline: none;
}

[type="checkbox"]:focus-visible + label:before {
    outline: 3px solid var(--lab-blue);
    outline-offset: 2px;
}

.usage-row:focus-visible {
    outline-offset: -3px;
}


/* --- menuknappen i topbjælken ---
   Ikonet havde ingen egen farve og arvede brødtekstens (1,45:1 på den mørke
   bjælke — praktisk talt usynlig). Hvid, større og med en rigtig trykflade. */

.sidebar-toggle-box {
    margin-top: 10px;
    padding-right: 5px;
}

.sidebar-toggle-box .fa-bars {
    color: #fff;
    font-size: 22px;
    line-height: 1;
    padding: 10px;
    border-radius: 4px;
}

.sidebar-toggle-box .fa-bars:hover,
.sidebar-toggle-box .fa-bars:focus-visible {
    background: rgba(255, 255, 255, 0.15);
}


/* --- stregkoden i listerne ---
   Feltet var 50px højt, men cifrene lå 68px nede via margin-top, så de
   skar ned gennem rammens underkant. Hele indholdet er nu placeret inde
   i rammen, så den kan ses hele vejen rundt. */

.content-panel .barcode-wrapper {
    height: 78px !important;
    overflow: hidden;
}

.content-panel .barcode-wrapper .barcode-text {
    font-size: 20px !important;
    bottom: 34px !important;
    height: 20px;
}

.content-panel .barcode-wrapper .barcode-value {
    position: absolute !important;
    left: 0;
    right: 0;
    bottom: 6px !important;
    margin: 0 auto !important;
    /* min-width: 180px fra products.css gjorde tekstboksen bredere end
       rammen i smalle kolonner, så cifrene stod ude af centrum */
    min-width: 0;
    max-width: 100%;
    font-size: 12px;
    line-height: 1.2;
    background: transparent;
}


/* --- handlingsknapper i listerne ---
   Rediger og slet faldt ned under hinanden så snart kolonnen blev smal.
   Flex + nowrap holder dem på samme linje uanset bredde. */

.content-panel table td .pull-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.content-panel table td.col-actions {
    white-space: nowrap;
}

.content-panel table td .pull-right .btn {
    margin-top: 0;
}


/* --- produkttabellen på smalle skærme ---
   Kolonnerne droppes efter hvor sjældent de bruges, så tabellen kan holdes
   inden for panelet og det klæbende tabelhoved kan bevares (en vandret
   scroll-container ville slå position: sticky ihjel). */

.content-panel table th {
    white-space: nowrap;
}

@media (max-width: 1150px) {
    .content-panel table .col-dealer {
        display: none;
    }
}

@media (max-width: 1050px) {
    .content-panel table .col-order {
        display: none;
    }
}

@media (max-width: 950px) {
    .content-panel table .col-price {
        display: none;
    }
}

@media (max-width: 900px) {
    .content-panel table .col-barcode {
        display: none;
    }
}


/* --- navnekolonnen i administrationens lister ---
   line-height: 52px gjorde hver ombrudt linje 52px høj, så lange
   produktnavne blev til en stige med ét ord pr. linje. */

.content-panel table td {
    vertical-align: middle;
}

.content-panel table td a:not(.btn),
.content-panel table td .price {
    line-height: 1.4 !important;
}

/* loginfelterne: var 14px */
.form-login .form-control {
    font-size: 1rem;
    height: auto;
    padding: 10px 12px;
}