:root {
    --bg:#f7f4f7;
    --surface:#fff;
    --ink:#2d2630;
    --muted:#756c78;
    --line:#e8e0e9;
    --primary:#8b5f7d;
    --primary2:#b783a5;
    --soft:#f1e7ee;
    --good:#2d8a66;
    --warn:#c87a25;
    --danger:#b84c5a;
    --sidebar:#2f2731;
    --shadow:0 12px 32px rgba(70,45,65,.09);
}

* {
    box-sizing:border-box;
}

html,body {
    margin:0;
    min-height:100%;
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
    color:var(--ink);
    background:var(--bg);
}

a {
    color:inherit;
    text-decoration:none;
}

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

.app-shell {
    min-height:100vh;
}

.sidebar {
    position:fixed;
    inset:0 auto 0 0;
    width:250px;
    background:var(--sidebar);
    color:#fff;
    padding:24px 16px;
    display:flex;
    flex-direction:column;
    z-index:50;
}

.brand {
    display:flex;
    align-items:center;
    gap:12px;
    padding:4px 8px 25px;
}

.brand-icon {
    width:46px;
    height:46px;
    border-radius:14px;
    background:#fff1;
    display:grid;
    place-items:center;
    font-size:26px;
}

.brand b,.brand small {
    display:block;
}

.brand b {
    font-size:18px;
}

.brand small {
    color:#cdbdca;
}

.side-nav {
    display:grid;
    gap:7px;
}

.side-nav a {
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 13px;
    border-radius:12px;
    color:#e5dce4;
}

.side-nav a:hover,.side-nav a.active {
    background:#ffffff16;
    color:#fff;
}

.side-nav span {
    width:22px;
    text-align:center;
}

.side-user {
    margin-top:auto;
    border-top:1px solid #ffffff18;
    padding:18px 7px 0;
    display:grid;
    grid-template-columns:38px 1fr auto;
    gap:10px;
    align-items:center;
}

.side-user .avatar {
    width:38px;
    height:38px;
    border-radius:50%;
    background:var(--primary2);
    display:grid;
    place-items:center;
    font-weight:800;
}

.side-user b,.side-user small {
    display:block;
}

.side-user small {
    color:#cdbdca;
    text-transform:capitalize;
}

.page-wrap {
    margin-left:250px;
    min-height:100vh;
}

.topbar {
    height:92px;
    background:#fff;
    border-bottom:1px solid var(--line);
    padding:18px 32px;
    display:flex;
    align-items:center;
    gap:15px;
    position:sticky;
    top:0;
    z-index:20;
}

.topbar h1 {
    margin:0;
    font-size:24px;
}

.topbar p {
    margin:4px 0 0;
    color:var(--muted);
    font-size:14px;
}

.menu-btn {
    display:none;
}

.top-scan {
    margin-left:auto;
    background:var(--primary);
    color:white;
    padding:11px 16px;
    border-radius:12px;
    font-weight:700;
}

.page-content {
    padding:28px 32px 100px;
    max-width:1500px;
    margin:auto;
}

.stats {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
    margin-bottom:24px;
}

.stat,.card {
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:18px;
    box-shadow:var(--shadow);
}

.stat {
    padding:20px;
}

.stat .label {
    color:var(--muted);
    font-size:14px;
}

.stat strong {
    display:block;
    font-size:30px;
    margin-top:8px;
}

.stat .icon {
    float:right;
    width:44px;
    height:44px;
    border-radius:14px;
    background:var(--soft);
    display:grid;
    place-items:center;
    font-size:22px;
}

.card {
    padding:22px;
    margin-bottom:18px;
}

.section-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:16px;
}

.section-head h2 {
    margin:0;
    font-size:19px;
}

.btn,.card button {
    border:0;
    border-radius:11px;
    padding:11px 15px;
    background:var(--primary);
    color:#fff;
    font-weight:700;
    cursor:pointer;
}

.btn.secondary {
    background:var(--soft);
    color:var(--primary);
}

.btn.danger,.btn-danger {
    background:var(--danger)!important;
}

.btn.small {
    padding:8px 11px;
    font-size:13px;
}

.quick-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
}

.quick {
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    padding:18px;
    display:flex;
    gap:13px;
    align-items:center;
    font-weight:700;
}

.quick span {
    font-size:24px;
}

.inventory-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:15px;
}

.item-card {
    background:#fff;
    border:1px solid var(--line);
    border-radius:17px;
    padding:18px;
    display:block;
    transition:.15s;
}

.item-card:hover {
    transform:translateY(-2px);
    box-shadow:var(--shadow);
}

.item-card h3 {
    margin:0 0 5px;
}

.meta {
    color:var(--muted);
    font-size:14px;
}

.item-bottom {
    display:flex;
    justify-content:space-between;
    align-items:end;
    margin-top:18px;
}

.qty {
    font-size:22px;
    font-weight:800;
}

.badge {
    display:inline-flex;
    padding:5px 9px;
    border-radius:999px;
    background:var(--soft);
    color:var(--primary);
    font-size:12px;
    font-weight:800;
}

.badge.low {
    background:#fff0df;
    color:var(--warn);
}

.filters {
    display:grid;
    grid-template-columns:2fr repeat(3,1fr) auto;
    gap:10px;
}

.field,label {
    display:grid;
    gap:7px;
    color:var(--muted);
    font-size:14px;
    font-weight:650;
}

input,select,textarea {
    width:100%;
    border:1px solid var(--line);
    background:white;
    color:var(--ink);
    border-radius:11px;
    padding:11px 12px;
    outline:none;
}

input:focus,select:focus,textarea:focus {
    border-color:var(--primary2);
    box-shadow:0 0 0 3px #b783a522;
}

.form-grid {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px;
}

.form-grid .full {
    grid-column:1/-1;
}

.alert {
    padding:13px 15px;
    border-radius:12px;
    margin-bottom:16px;
}

.alert.success {
    background:#e7f7f0;
    color:#246c52;
}

.alert.error {
    background:#feecef;
    color:#9c3344;
}

.tabs {
    display:flex;
    gap:6px;
    border-bottom:1px solid var(--line);
    margin:-5px -5px 20px;
    padding:0 5px;
}

.tabs button {
    background:transparent;
    color:var(--muted);
    border-radius:0;
    padding:13px 10px;
    border-bottom:3px solid transparent;
}

.tabs button.active {
    color:var(--primary);
    border-color:var(--primary);
}

.item-hero {
    display:grid;
    grid-template-columns:1fr auto;
    gap:25px;
}

.item-title h2 {
    font-size:30px;
    margin:8px 0;
}

.location-box {
    background:var(--soft);
    padding:15px;
    border-radius:13px;
    margin:15px 0;
}

.qty-controls {
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:18px;
}

.qr-box {
    text-align:center;
    min-width:220px;
}

.qr-box #qrcode {
    background:white;
    padding:12px;
    border-radius:14px;
    display:inline-block;
}

.table-wrap {
    overflow:auto;
}

table {
    width:100%;
    border-collapse:collapse;
}

th,td {
    padding:13px 10px;
    border-bottom:1px solid var(--line);
    text-align:left;
}

th {
    color:var(--muted);
    font-size:13px;
}

.scanner {
    max-width:650px;
    margin:auto;
}

.scanner-box {
    background:#1e1920;
    border-radius:18px;
    overflow:hidden;
    min-height:310px;
}

.manual-code {
    display:flex;
    gap:10px;
    margin-top:16px;
}

.empty {
    text-align:center;
    padding:45px;
    color:var(--muted);
}

.mobile-nav {
    display:none;
}

.garn-card {
    background:white;
    border:1px solid var(--line);
    padding:16px;
    border-radius:15px;
    margin:10px 0;
}

.garn-actions {
    display:flex;
    gap:10px;
    align-items:center;
    margin-top:12px;
    flex-wrap:wrap;
}

.warning {
    color:var(--warn);
    font-weight:700;
}

.grid {
    display:flex;
    gap:10px;
}

.tile {
    background:white;
    padding:12px;
    border-radius:11px;
    border:1px solid var(--line);
}

hr {
    border:0;
    border-top:1px solid var(--line);
    margin:22px 0;
}

@media(max-width:1000px) {
    .stats {
        grid-template-columns:repeat(2,1fr);
    }

    .inventory-grid {
        grid-template-columns:repeat(2,1fr);
    }

    .quick-grid {
        grid-template-columns:repeat(2,1fr);
    }

    .filters {
        grid-template-columns:1fr 1fr;
    }

    .filters .search-wide {
        grid-column:1/-1;
    }

}

@media(max-width:720px) {
    .sidebar {
        transform:translateX(-105%);
        transition:.2s;
        width:280px;
    }

    .menu-open .sidebar {
        transform:none;
    }

    .menu-open:after {
        content:"";
        position:fixed;
        inset:0;
        background:#0007;
        z-index:40;
    }

    .page-wrap {
        margin-left:0;
    }

    .topbar {
        height:75px;
        padding:12px 16px;
    }

    .menu-btn {
        display:block;
        border:0;
        background:var(--soft);
        border-radius:10px;
        padding:9px;
    }

    .topbar h1 {
        font-size:20px;
    }

    .topbar p {
        display:none;
    }

    .top-scan span {
        display:none;
    }

    .page-content {
        padding:18px 14px 95px;
    }

    .stats {
        grid-template-columns:1fr 1fr;
        gap:10px;
    }

    .stat {
        padding:15px;
    }

    .stat strong {
        font-size:24px;
    }

    .inventory-grid,.quick-grid,.form-grid {
        grid-template-columns:1fr;
    }

    .filters {
        grid-template-columns:1fr;
    }

    .item-hero {
        grid-template-columns:1fr;
    }

    .qr-box {
        order:2;
    }

    .mobile-nav {
        position:fixed;
        display:grid;
        grid-template-columns:repeat(5,1fr);
        bottom:0;
        left:0;
        right:0;
        background:white;
        border-top:1px solid var(--line);
        z-index:35;
        padding-bottom:env(safe-area-inset-bottom);
    }

    .mobile-nav a,.mobile-nav button {
        border:0;
        background:white;
        color:var(--muted);
        padding:9px 2px 7px;
        display:grid;
        place-items:center;
        font-size:19px;
    }

    .mobile-nav small {
        font-size:10px;
        margin-top:3px;
    }

    .mobile-nav .scan-main {
        color:white;
        background:var(--primary);
        border-radius:18px 18px 0 0;
        margin-top:-12px;
        padding-top:12px;
    }

    .manual-code {
        display:grid;
    }

    .item-title h2 {
        font-size:25px;
    }

}

/* v1.3: login, modules and settings */
.muted {
    color:var(--muted);
    margin:.35rem 0;
}

.eyebrow {
    display:block;
    font-size:11px;
    font-weight:900;
    letter-spacing:.14em;
    color:var(--primary);
    margin-bottom:8px;
}

.nav-heading {
    font-size:10px;
    font-weight:900;
    letter-spacing:.13em;
    color:#9f919d;
    padding:16px 13px 5px;
}

.side-nav .nav-heading:first-child {
    padding-top:2px;
}

.stat small {
    display:block;
    color:var(--muted);
    margin-top:4px;
}

.module-split {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    margin-bottom:22px;
}

.module-card {
    position:relative;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:18px;
    padding:25px;
    border-radius:20px;
    color:#fff;
    overflow:hidden;
    box-shadow:var(--shadow);
}

.module-card:after {
    content:"";
    position:absolute;
    width:170px;
    height:170px;
    border-radius:50%;
    background:#fff1;
    right:-55px;
    top:-75px;
}

.module-card>* {
    position:relative;
    z-index:1;
}

.module-card h2 {
    font-size:25px;
    margin:2px 0 4px;
}

.module-card p {
    margin:0;
    opacity:.82;
}

.module-card .eyebrow {
    color:#fff;
    opacity:.7;
}

.module-icon {
    font-size:38px;
    width:68px;
    height:68px;
    border-radius:19px;
    background:#fff2;
    display:grid;
    place-items:center;
}

.yarn-module,.yarn-hero {
    background:linear-gradient(135deg,#8b5f7d,#b783a5);
}

.inventory-module,.inventory-hero {
    background:linear-gradient(135deg,#3f6471,#7295a0);
}

.module-hero {
    color:#fff;
    border-radius:21px;
    padding:25px 27px;
    margin-bottom:18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    box-shadow:var(--shadow);
}

.module-hero h2 {
    margin:0 0 5px;
    font-size:27px;
}

.module-hero p {
    margin:0;
    opacity:.82;
}

.module-hero .eyebrow {
    color:#fff;
    opacity:.75;
}

.module-actions {
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.module-hero .btn.secondary {
    background:#fff2;
    color:white;
}

.form-actions {
    display:flex;
    gap:10px;
    margin-top:20px;
}

.form-card {
    max-width:980px;
}

.filters.compact {
    grid-template-columns:2fr 1fr auto auto;
}

.login-page {
    background:#f4eff3;
}

.login-shell {
    min-height:100vh;
    display:grid;
    grid-template-columns:minmax(360px,1.05fr) minmax(420px,.95fr);
}

.login-visual {
    background:linear-gradient(145deg,#2f2731 0%,#594052 58%,#8b5f7d 100%);
    color:#fff;
    padding:48px clamp(35px,6vw,90px);
    display:flex;
    flex-direction:column;
    position:relative;
    overflow:hidden;
}

.login-visual:before,.login-visual:after {
    content:"";
    position:absolute;
    border-radius:50%;
    background:#fff08;
}

.login-visual:before {
    width:420px;
    height:420px;
    right:-180px;
    top:-170px;
}

.login-visual:after {
    width:280px;
    height:280px;
    left:-130px;
    bottom:-120px;
}

.login-brand {
    display:flex;
    align-items:center;
    gap:13px;
    position:relative;
    z-index:1;
}

.login-brand>span {
    font-size:31px;
    width:55px;
    height:55px;
    display:grid;
    place-items:center;
    background:#fff1;
    border:1px solid #fff2;
    border-radius:17px;
}

.login-brand b,.login-brand small {
    display:block;
}

.login-brand b {
    font-size:21px;
}

.login-brand small {
    color:#d9ccd5;
}

.login-copy {
    margin:auto 0;
    max-width:650px;
    position:relative;
    z-index:1;
}

.login-copy .eyebrow {
    color:#e8ccdf;
}

.login-copy h1 {
    font-size:clamp(38px,5vw,68px);
    line-height:1.02;
    letter-spacing:-.04em;
    margin:13px 0 22px;
}

.login-copy p {
    font-size:18px;
    line-height:1.65;
    color:#e2d7df;
    max-width:580px;
}

.login-features {
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    position:relative;
    z-index:1;
}

.login-features span {
    padding:9px 13px;
    background:#fff1;
    border:1px solid #fff2;
    border-radius:999px;
    font-size:13px;
    font-weight:750;
}

.login-panel {
    display:grid;
    place-items:center;
    padding:35px;
}

.login-card {
    width:min(440px,100%);
    background:#fff;
    border:1px solid var(--line);
    border-radius:24px;
    padding:38px;
    box-shadow:0 25px 70px rgba(55,37,51,.13);
}

.login-card h2 {
    font-size:33px;
    margin:3px 0;
}

.login-card label {
    margin-top:18px;
}

.input-with-icon {
    position:relative;
}

.input-with-icon span {
    position:absolute;
    left:14px;
    top:50%;
    transform:translateY(-50%);
    opacity:.55;
}

.input-with-icon input {
    padding-left:43px;
    height:49px;
}

.login-button {
    width:100%;
    margin-top:23px;
    border:0;
    background:var(--primary);
    color:#fff;
    border-radius:13px;
    padding:14px 17px;
    font-weight:850;
    display:flex;
    justify-content:space-between;
    cursor:pointer;
}

.login-button:hover {
    filter:brightness(.95);
}

.login-help {
    text-align:center;
    color:var(--muted);
    font-size:12px;
    margin:17px 0 0;
}

.login-mobile-brand {
    display:none;
}

.settings-grid {
    display:grid;
    grid-template-columns:220px minmax(0,1fr);
    gap:20px;
    align-items:start;
}

.settings-menu {
    position:sticky;
    top:112px;
    display:grid;
    gap:5px;
    padding:15px;
}

.settings-menu .eyebrow {
    padding:8px 10px;
}

.settings-menu a {
    padding:11px 12px;
    border-radius:10px;
    color:var(--muted);
    font-weight:750;
}

.settings-menu a:hover,.settings-menu a.active {
    background:var(--soft);
    color:var(--primary);
}

.admin-stats {
    grid-template-columns:repeat(4,1fr);
}

.user-create {
    display:grid;
    grid-template-columns:1fr 1fr 180px auto;
    gap:12px;
    align-items:end;
    margin-bottom:25px;
    padding:17px;
    background:var(--soft);
    border-radius:15px;
}

.user-cell {
    display:flex;
    align-items:center;
    gap:10px;
}

.small-avatar {
    width:34px!important;
    height:34px!important;
    background:var(--primary2);
    color:#fff;
    display:grid;
    place-items:center;
    border-radius:50%;
    font-weight:850;
}

.align-right {
    text-align:right;
}

.icon-danger {
    background:#feecef!important;
    color:var(--danger)!important;
    padding:8px 11px!important;
}

.database-note {
    display:flex;
    gap:14px;
    padding:17px;
    border:1px solid #eadcc3;
    background:#fff8eb;
    border-radius:14px;
}

.database-note>span {
    font-size:25px;
}

.database-note p {
    margin:5px 0 0;
    color:#7b6544;
    line-height:1.5;
}

.database-note code {
    background:#fff;
    padding:2px 6px;
    border-radius:5px;
}

@media(max-width:1000px) {
    .login-shell {
        grid-template-columns:1fr;
    }

    .login-visual {
        display:none;
    }

    .login-panel {
        min-height:100vh;
    }

    .login-mobile-brand {
        display:block;
        margin-bottom:27px;
        color:var(--primary);
    }

    .settings-grid {
        grid-template-columns:1fr;
    }

    .settings-menu {
        position:static;
        display:flex;
        overflow:auto;
    }

    .admin-stats {
        grid-template-columns:repeat(2,1fr);
    }

    .user-create {
        grid-template-columns:1fr 1fr;
    }

    .user-create button {
        align-self:end;
    }

    .module-split {
        grid-template-columns:1fr;
    }

}

@media(max-width:720px) {
    .login-panel {
        padding:18px;
    }

    .login-card {
        padding:27px 21px;
        border-radius:19px;
    }

    .module-hero {
        align-items:flex-start;
        flex-direction:column;
        padding:21px;
    }

    .module-card {
        grid-template-columns:auto 1fr;
        padding:20px;
    }

    .module-card>b {
        display:none;
    }

    .module-card p {
        font-size:13px;
    }

    .module-icon {
        width:54px;
        height:54px;
        font-size:29px;
    }

    .filters.compact {
        grid-template-columns:1fr;
    }

    .settings-menu {
        margin-bottom:0;
    }

    .admin-stats {
        grid-template-columns:1fr 1fr;
    }

    .user-create {
        grid-template-columns:1fr;
    }

    .user-table table {
        min-width:620px;
    }

    .form-actions {
        flex-direction:column;
    }

    .form-actions>* {
        text-align:center;
    }

}

.delete-dialog {
    border:0;
    border-radius:20px;
    padding:0;
    max-width:480px;
    width:calc(100% - 32px);
    box-shadow:0 28px 80px rgba(35,20,31,.3);
}

.delete-dialog::backdrop {
    background:rgba(32,24,31,.62);
    backdrop-filter:blur(3px);
}

.delete-dialog-card {
    padding:28px;
    text-align:center;
}

.delete-dialog-card h3 {
    font-size:23px;
    margin:8px 0;
}

.delete-dialog-card p {
    color:var(--muted);
    line-height:1.55;
}

.delete-icon {
    width:62px;
    height:62px;
    border-radius:20px;
    background:#feecef;
    color:var(--danger);
    display:grid;
    place-items:center;
    font-size:29px;
    margin:0 auto 14px;
}

.dialog-actions {
    display:flex;
    justify-content:center;
    gap:10px;
    margin-top:23px;
    flex-wrap:wrap;
}

/* v1.5: administrerbare kategorier/placeringer og QR-mærkat */
.field-help {
    display:block;
    color:var(--muted);
    font-size:12px;
    margin-top:6px;
    line-height:1.35;
}

.lookup-create {
    display:grid;
    grid-template-columns:minmax(240px,1fr) auto;
    gap:12px;
    align-items:end;
    margin-bottom:18px;
    padding:16px;
    background:var(--soft);
    border-radius:14px;
}

.lookup-list {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
}

.lookup-list>div {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    border:1px solid var(--line);
    border-radius:12px;
    padding:11px 13px;
}

.lookup-list form {
    margin:0;
}

.lookup-list small {
    color:var(--muted);
}

.qr-print-label {
    display:none;
}

@media(max-width:720px) {
    .lookup-create,.lookup-list {
        grid-template-columns:1fr;
    }

}

@media print {
    body.printing-qr * {
        visibility:hidden!important;
    }

    body.printing-qr #qr-print-label,body.printing-qr #qr-print-label * {
        visibility:visible!important;
    }

    body.printing-qr #qr-print-label {
        display:flex!important;
        position:absolute;
        inset:0;
        width:100%;
        min-height:100vh;
        align-items:center;
        justify-content:flex-start;
        flex-direction:column;
        text-align:center;
        background:#fff;
        color:#111;
        padding:20mm 10mm;
        margin:0;
    }

    body.printing-qr #qrcode-print {
        display:block;
        margin:10mm auto 5mm;
    }

    body.printing-qr #qrcode-print canvas {
        display:block!important;
        width:70mm!important;
        height:70mm!important;
        max-width:100%;
    }

    body.printing-qr #qrcode-print img {
        display:none!important;
    }

    body.printing-qr .qr-print-brand {
        font-size:14pt;
        font-weight:800;
        letter-spacing:.04em;
    }

    body.printing-qr .qr-print-label h2 {
        font-size:18pt;
        margin:5mm 0 2mm;
    }

    body.printing-qr .qr-print-label p {
        font-size:12pt;
        margin:0 0 2mm;
        font-family:monospace;
    }

    body.printing-qr .qr-print-label small {
        font-size:10pt;
    }

    body.printing-qr .qr-print-location {
        font-size:11pt;
        margin-top:4mm;
        padding-top:4mm;
        border-top:1px solid #bbb;
        width:80mm;
    }

    @page {
        size:auto;
        margin:0;
    }

}

/* v3.0.1: kamera og visuel finpudsning uden redesign */
.filter-card {
    padding:12px;
    margin-bottom:18px;
    box-shadow:none;
}

.filter-input {
    display:flex;
    align-items:center;
    gap:8px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:11px;
    padding-left:12px;
    color:var(--muted);
}

.filter-input input {
    border:0;
    padding-left:0;
    box-shadow:none!important;
}

.filters {
    grid-template-columns:2fr 1fr 1fr auto auto;
    align-items:center;
}

.filters.compact {
    grid-template-columns:2fr 1fr auto auto;
}

.results-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin:5px 2px 14px;
}

.results-head b,.results-head span {
    display:block;
}

.results-head span {
    font-size:13px;
    color:var(--muted);
    margin-top:3px;
}

.polished-grid {
    gap:18px;
}

.inventory-card {
    background:#fff;
    border:1px solid var(--line);
    border-radius:17px;
    padding:18px;
    display:block;
    transition:.18s;
    min-width:0;
}

.polished-card {
    position:relative;
    min-height:230px;
    box-shadow:0 4px 18px rgba(70,45,65,.045);
}

.polished-card:hover {
    transform:translateY(-3px);
    box-shadow:var(--shadow);
    border-color:#d8c7d4;
}

.item-card-top {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
    min-height:25px;
}

.item-card-icon {
    width:48px;
    height:48px;
    border-radius:15px;
    display:grid;
    place-items:center;
    font-size:25px;
    margin:18px 0 13px;
}

.yarn-icon {
    background:#f3e7ef;
}

.inventory-icon {
    background:#e8f0f2;
}

.location-icon {
    background:#f4e9ee;
}

.polished-card h3 {
    font-size:18px;
    margin:0 0 6px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.item-code {
    color:var(--muted);
    font-size:13px;
    margin:0 0 15px;
    font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
}

.item-card-details {
    display:grid;
    gap:6px;
    color:var(--muted);
    font-size:13px;
    min-height:38px;
}

.card-bottom {
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:12px;
    border-top:1px solid var(--line);
    margin-top:16px;
    padding-top:14px;
    color:var(--muted);
    font-size:13px;
}

.card-bottom strong {
    color:var(--ink);
    font-size:17px;
    white-space:nowrap;
}

.empty-wide {
    grid-column:1/-1;
}

.empty-wide>div {
    font-size:36px;
}

.empty-wide h3 {
    color:var(--ink);
    margin:10px 0 5px;
}

.location-hero {
    background:linear-gradient(135deg,#75546d,#a77998);
    color:#fff;
}

.location-summary {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
    margin-bottom:18px;
}

.mini-stat {
    margin:0;
    padding:18px;
    display:flex;
    align-items:center;
    gap:14px;
}

.mini-stat>span {
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    border-radius:14px;
    background:var(--soft);
    font-size:22px;
}

.mini-stat small,.mini-stat strong {
    display:block;
}

.mini-stat small {
    color:var(--muted);
    font-size:13px;
}

.mini-stat strong {
    font-size:23px;
    margin-top:3px;
}

.location-arrow {
    font-size:22px;
    color:var(--primary);
}

.scanner-page {
    display:grid;
    grid-template-columns:minmax(0,760px) minmax(260px,340px);
    gap:20px;
    align-items:start;
    justify-content:center;
}

.scanner-card {
    padding:25px;
}

.scanner-heading {
    display:flex;
    gap:16px;
    align-items:center;
    margin-bottom:22px;
}

.scanner-heading h2 {
    margin:0 0 5px;
    font-size:25px;
}

.scanner-heading p {
    margin:0;
    color:var(--muted);
    line-height:1.5;
}

.scanner-icon {
    width:58px;
    height:58px;
    border-radius:18px;
    background:var(--soft);
    display:grid;
    place-items:center;
    font-size:29px;
    flex:0 0 auto;
}

.camera-reader {
    min-height:340px;
    background:#211b22;
    border-radius:17px;
    overflow:hidden;
    border:1px solid #3b303c;
}

.camera-reader:empty:before {
    content:'Kameravisning';
    min-height:340px;
    display:grid;
    place-items:center;
    color:#aa9fab;
    font-weight:700;
}

.camera-reader video {
    object-fit:cover!important;
}

.camera-reader #qr-shaded-region {
    border-color:rgba(255,255,255,.72)!important;
}

.scanner-status {
    margin:12px 0 0;
    padding:11px 13px;
    border-radius:11px;
    background:var(--soft);
    color:var(--muted);
    font-size:13px;
    text-align:center;
}

.scanner-status.success {
    background:#e7f7f0;
    color:#246c52;
}

.scanner-status.error {
    background:#feecef;
    color:#9c3344;
}

.scanner-actions {
    display:flex;
    justify-content:center;
    gap:10px;
    margin-top:14px;
}

.scan-divider {
    display:flex;
    align-items:center;
    gap:12px;
    color:var(--muted);
    font-size:12px;
    margin:24px 0;
}

.scan-divider:before,.scan-divider:after {
    content:'';
    height:1px;
    background:var(--line);
    flex:1;
}

.manual-scan-form label {
    color:var(--ink);
}

.scanner-help {
    padding:23px;
    position:sticky;
    top:112px;
}

.scanner-help h3 {
    margin:0 0 20px;
}

.help-step {
    display:grid;
    grid-template-columns:32px 1fr;
    gap:11px;
    align-items:start;
    margin:16px 0;
    color:var(--muted);
    line-height:1.45;
}

.help-step b {
    width:30px;
    height:30px;
    border-radius:10px;
    background:var(--soft);
    color:var(--primary);
    display:grid;
    place-items:center;
}

.camera-note {
    margin-top:22px;
    padding:13px;
    background:#fff8eb;
    color:#7b6544;
    border:1px solid #eadcc3;
    border-radius:12px;
    font-size:12px;
    line-height:1.45;
}

@media(max-width:1000px) {
    .scanner-page {
        grid-template-columns:1fr;
    }

    .scanner-help {
        position:static;
    }

    .location-summary {
        grid-template-columns:repeat(3,1fr);
    }

    .filters,.filters.compact {
        grid-template-columns:1fr 1fr;
    }

    .filters .search-wide {
        grid-column:1/-1;
    }

}

@media(max-width:720px) {
    .filter-card {
        padding:10px;
    }

    .filters,.filters.compact {
        grid-template-columns:1fr;
    }

    .filter-input.search-wide {
        grid-column:auto;
    }

    .results-head {
        margin-top:2px;
    }

    .polished-card {
        min-height:210px;
    }

    .location-summary {
        grid-template-columns:1fr;
    }

    .scanner-card {
        padding:17px;
    }

    .scanner-heading {
        align-items:flex-start;
    }

    .scanner-heading p {
        font-size:13px;
    }

    .camera-reader,.camera-reader:empty:before {
        min-height:270px;
    }

    .scanner-actions {
        flex-direction:column;
    }

    .scanner-actions .btn {
        text-align:center;
    }

    .scanner-help {
        display:none;
    }

}

/* v3.0.5: klikbar brugerprofil og admin-kodeskift */
.user-section-help {
    margin:-8px 0 18px;
}

.user-row {
    cursor:pointer;
    transition:.15s;
}

.user-row:hover,.user-row:focus {
    background:var(--soft);
    outline:0;
}

.user-cell small {
    display:block;
    color:var(--muted);
    font-size:12px;
    margin-top:3px;
}

.profile-arrow {
    display:inline-grid;
    place-items:center;
    width:32px;
    height:32px;
    border-radius:10px;
    background:var(--soft);
    color:var(--primary);
    font-size:24px;
    font-weight:800;
}

.user-profile-dialog {
    border:0;
    border-radius:22px;
    padding:0;
    max-width:680px;
    width:calc(100% - 32px);
    box-shadow:0 30px 90px rgba(35,20,31,.34);
    background:transparent;
}

.user-profile-dialog::backdrop {
    background:rgba(32,24,31,.62);
    backdrop-filter:blur(3px);
}

.user-profile-card {
    background:#fff;
    border-radius:22px;
    overflow:hidden;
}

.user-profile-head {
    position:relative;
    display:flex;
    align-items:center;
    gap:16px;
    padding:24px;
    background:linear-gradient(135deg,#f5eaf1,#fff);
}

.profile-avatar {
    width:62px;
    height:62px;
    border-radius:20px;
    background:var(--primary2);
    color:#fff;
    display:grid;
    place-items:center;
    font-size:25px;
    font-weight:850;
    flex:0 0 auto;
}

.user-profile-head h3 {
    margin:4px 0 2px;
    font-size:24px;
}

.user-profile-head p {
    margin:0;
    color:var(--muted);
    font-size:13px;
}

.dialog-close {
    position:absolute;
    right:18px;
    top:18px;
    width:38px;
    height:38px;
    padding:0!important;
    border-radius:12px!important;
    background:#fff!important;
    color:var(--ink)!important;
    font-size:25px!important;
    box-shadow:0 4px 14px rgba(55,35,50,.08);
}

.user-profile-form {
    padding:24px;
}

.user-profile-form>label {
    display:block;
    margin-top:16px;
}

.profile-meta {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
    margin-top:20px;
}

.profile-meta span {
    padding:13px;
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--bg);
}

.profile-meta b,.profile-meta small {
    display:block;
}

.profile-meta b {
    font-size:12px;
    color:var(--muted);
    margin-bottom:4px;
}

.profile-meta small {
    font-size:13px;
    color:var(--ink);
}

.profile-actions {
    margin-top:22px;
    padding-top:18px;
    border-top:1px solid var(--line);
}

.profile-delete-form {
    padding:0 24px 24px;
    text-align:right;
}

.profile-delete-form button {
    margin-left:auto;
}

@media(max-width:720px) {
    .user-profile-head {
        align-items:flex-start;
        padding:20px;
    }

    .user-profile-form {
        padding:20px;
    }

    .profile-meta {
        grid-template-columns:1fr;
    }

    .profile-actions {
        align-items:stretch;
    }

    .profile-delete-form {
        padding:0 20px 20px;
    }

    .dialog-close {
        right:12px;
        top:12px;
    }

}

/* v3.0.6: robust brugerprofil og cache-fix */
.user-table .user-cell {
    display:flex!important;
    align-items:center!important;
    gap:12px!important;
}

.user-table .user-cell>div {
    display:flex;
    flex-direction:column;
    min-width:0;
}

.user-table .user-cell b {
    display:block;
    line-height:1.25;
}

.user-table .user-cell small {
    display:block!important;
    margin-top:3px!important;
    color:var(--muted)!important;
    font-size:12px!important;
    font-weight:500!important;
}

.user-profile-dialog[open] {
    display:block;
}

.user-profile-dialog {
    margin:auto!important;
    border:none!important;
    outline:none!important;
    padding:0!important;
    max-height:calc(100vh - 32px);
    overflow:auto!important;
}

.user-profile-dialog .user-profile-card {
    display:block!important;
    background:#fff!important;
    border:1px solid var(--line)!important;
    border-radius:22px!important;
    box-shadow:0 30px 90px rgba(35,20,31,.34)!important;
    overflow:hidden!important;
}

.user-profile-dialog .user-profile-head {
    display:flex!important;
    align-items:center!important;
    gap:16px!important;
    padding:24px!important;
    background:linear-gradient(135deg,#f5eaf1,#fff)!important;
}

.user-profile-dialog .user-profile-form {
    display:block!important;
    padding:24px!important;
}

.user-profile-dialog .form-grid {
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:14px!important;
}

.user-profile-dialog label {
    display:block!important;
    color:var(--muted)!important;
    font-size:13px!important;
    font-weight:750!important;
}

.user-profile-dialog input,.user-profile-dialog select {
    width:100%!important;
    margin-top:6px!important;
}

.user-profile-dialog .profile-meta {
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:10px!important;
}

.user-profile-dialog .dialog-actions {
    display:flex!important;
    justify-content:flex-end!important;
    gap:10px!important;
}

.user-profile-dialog .profile-delete-form {
    display:flex!important;
    justify-content:flex-end!important;
}

@media(max-width:720px) {
    .user-profile-dialog .form-grid,.user-profile-dialog .profile-meta {
        grid-template-columns:1fr!important;
    }

    .user-profile-dialog .user-profile-head {
        padding:20px!important;
        align-items:flex-start!important;
    }

    .user-profile-dialog .user-profile-form {
        padding:20px!important;
    }

}

/* v3.1 Mediebibliotek */
.media-field {
    border:1px solid var(--border,#e5dce5);
    border-radius:18px;
    padding:16px;
    background:#fbf8fb;
}

.media-current {
    display:flex;
    align-items:center;
    gap:14px;
    min-height:76px;
}

.media-current img {
    width:76px;
    height:76px;
    object-fit:cover;
    border-radius:14px;
}

.media-current small {
    display:block;
    margin-top:4px;
    color:var(--muted,#756a76);
}

.media-placeholder {
    width:76px;
    height:76px;
    border-radius:14px;
    background:#efe5ed;
    display:grid;
    place-items:center;
    font-size:30px;
}

.media-actions {
    display:flex;
    gap:9px;
    flex-wrap:wrap;
    margin-top:14px;
}

.media-upload-btn {
    position:relative;
    overflow:hidden;
}

.media-upload-btn input {
    position:absolute;
    inset:0;
    opacity:0;
    cursor:pointer;
}

.media-help {
    font-size:12px;
    color:var(--muted,#756a76);
    margin:9px 0 0;
}

.btn.ghost {
    background:transparent;
    color:#8f567e;
    border:1px solid #dccbd8;
}

.media-picker-dialog {
    border:0;
    padding:0;
    background:transparent;
    max-width:min(900px,94vw);
    width:100%;
}

.media-picker-dialog::backdrop,.media-preview-dialog::backdrop {
    background:rgba(38,29,39,.62);
    backdrop-filter:blur(4px);
}

.media-picker-card {
    background:#fff;
    border-radius:22px;
    padding:22px;
    max-height:88vh;
    overflow:auto;
    box-shadow:0 28px 80px rgba(30,20,31,.28);
}

.media-picker-head {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    margin-bottom:16px;
}

.media-picker-head h3 {
    margin:3px 0 0;
    font-size:24px;
}

.media-picker-grid,.media-library-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
    gap:16px;
    margin-top:18px;
}

.media-choice {
    background:#fff;
    border:1px solid #e6dce4;
    border-radius:16px;
    padding:9px;
    text-align:left;
    cursor:pointer;
}

.media-choice:hover {
    border-color:#9a5f88;
    box-shadow:0 8px 24px rgba(90,52,79,.12);
}

.media-choice img {
    width:100%;
    aspect-ratio:1/1;
    object-fit:cover;
    border-radius:11px;
    display:block;
}

.media-choice span,.media-choice small {
    display:block;
    margin-top:8px;
}

.media-choice small {
    font-size:11px;
    color:#7d707b;
}

.media-library-hero {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:18px;
    background:linear-gradient(135deg,#9d668c,#b37d9f);
    color:#fff;
}

.media-library-hero h2,.media-library-hero p {
    margin:4px 0;
}

.media-toolbar form {
    display:flex;
    gap:10px;
}

.media-toolbar input {
    flex:1;
}

.media-card {
    padding:0;
    overflow:hidden;
}

.media-preview {
    border:0;
    padding:0;
    background:none;
    width:100%;
    cursor:zoom-in;
}

.media-preview img {
    width:100%;
    aspect-ratio:4/3;
    object-fit:cover;
    display:block;
}

.media-card-body {
    padding:14px;
}

.media-card-body h3 {
    margin:0 0 4px;
}

.media-card-body p {
    margin:0;
    color:#756a76;
    font-size:12px;
    word-break:break-all;
}

.media-card-meta {
    display:flex;
    justify-content:space-between;
    gap:8px;
    font-size:11px;
    color:#756a76;
    margin:12px 0;
}

.btn.small {
    padding:8px 11px;
    font-size:12px;
}

.media-upload-options {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    margin:18px 0;
}

.media-upload-tile {
    border:1px dashed #cdb7c7;
    border-radius:18px;
    min-height:150px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:7px;
    font-size:30px;
    cursor:pointer;
    background:#fbf7fa;
}

.media-upload-tile b {
    font-size:15px;
}

.media-upload-tile span {
    font-size:12px;
    color:#756a76;
}

.media-upload-tile input {
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.media-preview-dialog {
    border:0;
    padding:0;
    background:transparent;
    max-width:min(900px,94vw);
}

.media-preview-dialog>div {
    position:relative;
    background:white;
    border-radius:20px;
    padding:18px;
    text-align:center;
}

.media-preview-dialog img {
    max-width:100%;
    max-height:72vh;
    border-radius:14px;
}

.media-preview-dialog h3 {
    margin-bottom:0;
}

.media-empty {
    grid-column:1/-1;
}

.eyebrow {
    font-size:11px;
    letter-spacing:.12em;
    font-weight:800;
}

.alert.success {
    background:#e8f7ed;
    color:#26713e;
    border:1px solid #bfe4ca;
}

@media(max-width:700px) {
    .media-library-hero {
        align-items:flex-start;
        flex-direction:column;
    }

    .media-toolbar form {
        flex-wrap:wrap;
    }

    .media-toolbar input {
        flex-basis:100%;
    }

    .media-upload-options {
        grid-template-columns:1fr;
    }

    .media-picker-grid,.media-library-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .media-actions .btn,.media-actions label {
        flex:1 1 calc(50% - 8px);
        text-align:center;
    }

    .media-picker-card {
        padding:16px;
    }

}

/* v3.2 Visual Inventory */
.visual-card {
    padding:0!important;
    overflow:hidden;
}

.visual-thumb {
    position:relative;
    width:100%;
    aspect-ratio:16/10;
    background:#f0e7ed;
    overflow:hidden;
}

.visual-thumb img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .25s ease;
}

.visual-card:hover .visual-thumb img {
    transform:scale(1.035);
}

.visual-thumb.is-placeholder {
    display:grid;
    place-items:center;
    background:linear-gradient(135deg,#f3eaf0,#fbf8fa);
}

.visual-thumb.is-placeholder>span {
    font-size:48px;
}

.visual-badges {
    position:absolute;
    left:12px;
    right:12px;
    top:12px;
    display:flex;
    justify-content:space-between;
    gap:8px;
    align-items:flex-start;
}

.visual-badges .badge {
    box-shadow:0 3px 12px rgba(45,29,41,.1);
}

.visual-card-body {
    padding:15px;
}

.visual-card-body h3 {
    margin-top:0;
}

.location-preview {
    position:relative;
    min-height:145px;
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:1fr 1fr;
    gap:3px;
    background:#eee5eb;
    overflow:hidden;
}

.location-preview img {
    width:100%;
    height:100%;
    object-fit:cover;
    min-height:70px;
}

.location-preview img:only-of-type {
    grid-column:1/-1;
    grid-row:1/-1;
}

.location-preview.is-placeholder {
    display:grid;
    place-items:center;
}

.location-preview.is-placeholder>span {
    font-size:46px;
}

.shopping-item-link {
    display:flex;
    align-items:center;
    gap:12px;
    color:inherit;
    text-decoration:none;
}

.shopping-item-link>span:last-child {
    display:flex;
    flex-direction:column;
    gap:3px;
}

.shopping-item-link small {
    color:var(--muted);
    font-size:11px;
}

.shopping-thumb {
    width:48px;
    height:48px;
    border-radius:11px;
    overflow:hidden;
    background:#f0e7ed;
    display:grid;
    place-items:center;
    flex:0 0 auto;
    font-size:22px;
}

.shopping-thumb img {
    width:100%;
    height:100%;
    object-fit:cover;
}

.dashboard-visual-section {
    margin-top:18px;
}

.dashboard-item-strip {
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:13px;
}

.dashboard-mini-card {
    display:flex;
    flex-direction:column;
    gap:7px;
    text-decoration:none;
    color:var(--ink);
    min-width:0;
}

.dashboard-mini-image {
    aspect-ratio:1/1;
    border-radius:14px;
    overflow:hidden;
    background:#f0e7ed;
    display:grid;
    place-items:center;
    font-size:34px;
}

.dashboard-mini-image img {
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .2s;
}

.dashboard-mini-card:hover img {
    transform:scale(1.04);
}

.dashboard-mini-card b,.dashboard-mini-card small {
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.dashboard-mini-card small {
    color:var(--muted);
    font-size:11px;
}

.dashboard-mini-card .low-text {
    color:#a26527;
    font-weight:700;
}

@media(max-width:1100px) {
    .dashboard-item-strip {
        grid-template-columns:repeat(4,minmax(0,1fr));
    }

}

@media(max-width:720px) {
    .visual-thumb {
        aspect-ratio:16/9;
    }

    .dashboard-item-strip {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .shopping-thumb {
        width:42px;
        height:42px;
    }

    .location-preview {
        min-height:125px;
    }

}

/* v3.2.1 media fixes */
.media-picker-dialog {
    box-sizing:border-box;
    width:min(900px,calc(100vw - 32px));
    max-width:900px;
    overflow:hidden;
}

.media-picker-dialog .media-picker-card {
    box-sizing:border-box;
    width:100%;
    max-width:100%;
    overflow-x:hidden;
}

.media-upload-dialog .media-picker-card {
    max-height:min(88vh,760px);
    overflow-y:auto;
    overflow-x:hidden;
}

.media-upload-options {
    min-width:0;
}

.media-upload-tile {
    position:relative;
    box-sizing:border-box;
    min-width:0;
    overflow:hidden;
    transition:.15s;
}

.media-upload-tile:hover {
    border-color:var(--primary);
    background:#f7eef4;
    transform:translateY(-1px);
}

.media-upload-tile input {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    opacity:0;
    cursor:pointer;
    pointer-events:auto;
}

.media-selected-file {
    margin:-2px 0 14px;
    padding:11px 13px;
    border-radius:11px;
    background:#f4eaf1;
    color:var(--primary);
    font-size:13px;
    font-weight:700;
    overflow-wrap:anywhere;
}

#media-save-button:disabled {
    opacity:.45;
    cursor:not-allowed;
    filter:grayscale(.2);
}

@media(max-width:700px) {
    .media-picker-dialog {
        width:calc(100vw - 20px);
    }

    .media-upload-dialog .media-picker-card {
        padding:16px;
    }

    .media-upload-tile {
        min-height:128px;
    }

}

.sidebar i[data-lucide] {
    width: 20px;
    height: 20px;
    stroke-width: 2;
    color: var(--text);
    flex-shrink: 0;
    margin-right: 12px;
}

/* ==========================================================
   Login – Lucide-ikoner
========================================================== */

.login-brand-icon {
    width: 55px;
    height: 55px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 17px;
}

.login-brand-icon [data-lucide] {
    width: 30px;
    height: 30px;
    color: #ffffff;
    stroke-width: 2;
}

.login-features span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.login-features [data-lucide] {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

.login-mobile-brand {
    align-items: center;
    gap: 10px;
}

.login-mobile-brand-icon {
    width: 38px;
    height: 38px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    color: #ffffff;
    background: var(--primary);
    border-radius: 12px;
}

.login-mobile-brand-icon [data-lucide] {
    width: 21px;
    height: 21px;
    stroke-width: 2;
}

.input-with-icon > span {
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
}

.input-with-icon [data-lucide] {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.login-button [data-lucide] {
    width: 19px;
    height: 19px;
    stroke-width: 2.2;
}

@media (max-width: 1000px) {
    .login-mobile-brand {
        display: flex;
    }

}
/* Mobilside: Mere */

.more-page {
    max-width: 900px;
    margin: 0 auto;
}

.more-page-head {
    margin-bottom: 18px;
}

.more-page-head h2 {
    margin: 0 0 7px;
    font-size: 28px;
}

.more-page-head p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.more-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
}

.more-card {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 17px;
    box-shadow: var(--shadow);
    transition:
        transform 0.15s,
        border-color 0.15s;
}

.more-card:hover {
    transform: translateY(-2px);
    border-color: #d8c7d4;
}

.more-card-icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    background: var(--soft);
    font-size: 25px;
}

.more-card-copy {
    min-width: 0;
}

.more-card-copy strong,
.more-card-copy small {
    display: block;
}

.more-card-copy strong {
    margin-bottom: 5px;
    font-size: 16px;
}

.more-card-copy small {
    color: var(--muted);
    line-height: 1.4;
}

.more-card-arrow {
    color: var(--primary);
    font-size: 30px;
    line-height: 1;
}

@media (max-width: 720px) {
    .more-page-head {
        padding: 4px 2px 0;
    }

    .more-page-head h2 {
        font-size: 24px;
    }

    .more-grid {
        grid-template-columns: 1fr;
        gap: 11px;
    }

    .more-card {
        padding: 15px;
        border-radius: 15px;
        box-shadow: 0 6px 20px rgba(70, 45, 65, 0.07);
    }

    .more-card-icon {
        width: 48px;
        height: 48px;
        font-size: 23px;
    }

    .mobile-nav a.active {
        color: var(--primary);
        font-weight: 800;
    }
}
/* ==========================================================
   Mobil overflow-fix – Indkøbsliste, Indstillinger,
   Historik og Mediebibliotek
   Bevarer eksisterende design, men forhindrer at sider bliver
   bredere end telefonens skærm.
========================================================== */

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.app-shell,
.page-wrap,
.page-content,
.page-content > *,
.card,
.settings-grid,
.settings-grid > *,
.media-library-grid,
.media-library-grid > *,
.more-page,
.more-grid,
.more-grid > * {
    min-width: 0;
    max-width: 100%;
}

img,
svg,
video,
canvas {
    max-width: 100%;
}

.table-wrap {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
}

.table-wrap table {
    width: 100%;
    max-width: none;
}

input,
select,
textarea,
button,
.btn {
    max-width: 100%;
}

.media-card-body h3,
.media-card-body p,
.media-card-meta,
.shopping-item-link,
.shopping-item-link span,
.user-cell,
.user-cell > div,
.more-card-copy,
.topbar > div {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

@media (max-width: 720px) {
    .page-content {
        width: 100%;
        max-width: 100vw;
        padding-left: 12px;
        padding-right: 12px;
    }

    .topbar {
        width: 100%;
        min-width: 0;
    }

    .topbar > div {
        flex: 1 1 auto;
    }

    .topbar h1 {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .card {
        width: 100%;
        padding: 16px;
        border-radius: 15px;
    }

    .section-head {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .section-head > div {
        min-width: 0;
        flex: 1 1 180px;
    }

    /* Indkøbsliste og historik: tabellen bliver inde i kortet */
    .table-wrap {
        margin-left: 0;
        margin-right: 0;
        padding-bottom: 4px;
    }

    .table-wrap table {
        min-width: 680px;
    }

    .user-table table {
        min-width: 560px;
    }

    .shopping-item-link {
        max-width: 240px;
    }

    .shopping-item-link > span:last-child {
        min-width: 0;
    }

    .shopping-item-link b,
    .shopping-item-link small {
        overflow-wrap: anywhere;
    }

    .table-wrap form,
    .table-wrap form button {
        width: auto;
        max-width: none;
        white-space: nowrap;
    }

    /* Indstillinger */
    .settings-grid {
        display: block;
        width: 100%;
    }

    .settings-menu {
        position: static;
        display: flex;
        width: 100%;
        max-width: 100%;
        gap: 6px;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .settings-menu .eyebrow {
        display: none;
    }

    .settings-menu a {
        flex: 0 0 auto;
    }

    .user-create,
    .form-grid {
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
    }

    .user-profile-dialog,
    .media-picker-dialog,
    .media-preview-dialog {
        width: calc(100vw - 20px);
        max-width: calc(100vw - 20px);
        margin: auto;
    }

    .user-profile-card,
    .media-picker-card,
    .media-preview-dialog > div {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .form-actions {
        width: 100%;
    }

    .form-actions > * {
        width: 100%;
    }

    /* Mediebibliotek */
    .media-library-hero,
    .media-toolbar,
    .media-toolbar form {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .media-library-hero .btn,
    .media-toolbar button,
    .media-toolbar .btn {
        width: 100%;
        text-align: center;
    }

    .media-library-grid {
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
    }

    .media-card {
        width: 100%;
        min-width: 0;
    }

    .media-card-meta {
        flex-wrap: wrap;
    }

    .media-upload-options {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Mere-menu */
    .more-card {
        grid-template-columns: 46px minmax(0, 1fr) auto;
        width: 100%;
    }
}

@media (max-width: 420px) {
    .page-content {
        padding-left: 9px;
        padding-right: 9px;
    }

    .card {
        padding: 14px;
    }

    .topbar {
        padding-left: 12px;
        padding-right: 12px;
    }

    .more-card {
        grid-template-columns: 42px minmax(0, 1fr) auto;
        gap: 10px;
        padding: 13px;
    }

    .more-card-icon {
        width: 42px;
        height: 42px;
    }
}

/* ==========================================================
   Responsive kortvisning v13
   Desktop beholder tabeller. Telefon viser rækker som kort.
========================================================== */
@media (max-width: 720px) {
    .responsive-table {
        overflow: visible;
        padding: 0;
        background: transparent;
        box-shadow: none;
        border: 0;
    }

    .responsive-table table,
    .responsive-table tbody,
    .responsive-table tr,
    .responsive-table td {
        display: block;
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .responsive-table table {
        min-width: 0 !important;
        border: 0;
        background: transparent;
    }

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

    .responsive-table tbody {
        display: grid;
        gap: 12px;
    }

    .responsive-table tr {
        padding: 14px;
        border: 1px solid var(--border);
        border-radius: 14px;
        background: var(--card);
        box-shadow: 0 5px 16px rgba(70, 45, 65, 0.05);
    }

    .responsive-table td {
        display: grid;
        grid-template-columns: minmax(82px, 34%) minmax(0, 1fr);
        gap: 10px;
        align-items: start;
        padding: 8px 0;
        border: 0;
        border-bottom: 1px solid var(--border);
        text-align: left !important;
        overflow-wrap: anywhere;
    }

    .responsive-table td:last-child {
        border-bottom: 0;
        padding-bottom: 0;
    }

    .responsive-table td:first-child {
        padding-top: 0;
    }

    .responsive-table td::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .02em;
        text-transform: uppercase;
    }

    .responsive-table td[colspan] {
        display: block;
    }

    .responsive-table td[colspan]::before {
        content: none;
    }

    .responsive-table a,
    .responsive-table span,
    .responsive-table b,
    .responsive-table small {
        min-width: 0;
        max-width: 100%;
    }

    .responsive-table form,
    .responsive-table form button,
    .responsive-table .btn,
    .responsive-table .icon-danger {
        width: 100%;
        max-width: 100%;
    }

    .shopping-table .shopping-item-link {
        width: 100%;
        max-width: 100%;
    }

    .shopping-table td:first-child {
        grid-template-columns: 1fr;
    }

    .shopping-table td:first-child::before {
        display: none;
    }

    .user-table .user-row {
        cursor: pointer;
    }

    .user-table td:first-child {
        grid-template-columns: 1fr;
    }

    .user-table td:first-child::before,
    .user-table td[data-label="Profil"]::before {
        display: none;
    }

    .user-table td[data-label="Profil"] {
        display: none;
    }

    .user-table .user-cell {
        width: 100%;
    }

    .history-table td[data-label="Beskrivelse"] {
        grid-template-columns: 1fr;
    }

    .history-table td[data-label="Beskrivelse"]::before {
        margin-bottom: 3px;
    }

    #users.card,
    #categories.card,
    #locations.card {
        overflow: hidden;
    }

    .lookup-create,
    .lookup-list > div {
        min-width: 0;
        max-width: 100%;
    }

    .lookup-list > div {
        gap: 10px;
        align-items: center;
    }

    .lookup-list > div > span {
        min-width: 0;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 420px) {
    .responsive-table tr {
        padding: 12px;
        border-radius: 13px;
    }

    .responsive-table td {
        grid-template-columns: minmax(72px, 31%) minmax(0, 1fr);
        gap: 8px;
        font-size: 13px;
    }
}


/* Mormors Hobbylager v5: Scan, kasser og værktøj */
.scan-center-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px;margin-bottom:18px}.scan-primary{min-height:64px;padding:0 28px;font-size:1.05rem}.scan-primary svg{width:26px;height:26px}.scan-search{display:flex;gap:12px;align-items:center;margin-bottom:18px}.scan-search .filter-input{flex:1}.quick-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}.quick-action{display:flex;align-items:center;gap:12px;padding:18px;border-radius:16px;background:var(--card,#fff);box-shadow:var(--shadow);text-decoration:none;color:inherit}.quick-action svg{width:25px;height:25px}.dashboard-two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px}.recent-scan-list{display:grid;gap:8px}.recent-scan-list a{display:flex;justify-content:space-between;gap:16px;padding:12px;border-radius:12px;background:rgba(127,127,127,.06);text-decoration:none;color:inherit}.recent-scan-list small{opacity:.65}.smart-result-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.smart-result{display:flex;align-items:center;gap:12px;padding:14px;border-radius:14px;background:rgba(127,127,127,.06);text-decoration:none;color:inherit;min-width:0}.smart-result span:last-child{display:grid;min-width:0}.smart-result b,.smart-result small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.smart-result-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:rgba(127,127,127,.1);font-size:1.35rem;flex:none}.scan-dialog{border:0;padding:0;background:transparent;max-width:min(720px,calc(100vw - 24px));width:100%}.scan-dialog::backdrop{background:rgba(0,0,0,.68);backdrop-filter:blur(4px)}.scan-dialog-card{position:relative;background:var(--card,#fff);border-radius:22px;padding:24px}.scan-close{position:absolute;right:14px;top:14px;width:44px;height:44px;border-radius:50%;font-size:1.6rem}.camera-reader{width:100%;min-height:280px;overflow:hidden;border-radius:18px;background:#111;margin:16px 0}.camera-status{text-align:center;padding:10px;opacity:.75}.manual-scan{display:flex;gap:10px}.manual-scan input{flex:1}.active-scan-user{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:18px;border-left:5px solid currentColor}.active-scan-user>div{display:grid;gap:3px}.loan-holder{display:grid;gap:4px;padding:14px;border-radius:14px;background:rgba(127,127,127,.08);margin:14px 0}.qr-label-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.qr-label{display:grid;place-items:center;text-align:center;padding:16px;border:1px dashed currentColor;border-radius:14px;background:#fff;color:#111;break-inside:avoid}.qr-label small{font-family:monospace}.quick-qty-grid{display:grid;grid-template-columns:repeat(3,minmax(56px,1fr));gap:8px}.quick-qty-grid button{min-height:48px}.not-home-section{margin-bottom:18px}
@media(max-width:900px){.quick-actions{grid-template-columns:repeat(2,1fr)}.dashboard-two-col{grid-template-columns:1fr}.qr-label-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.scan-center-hero{align-items:stretch;flex-direction:column;padding:20px}.scan-primary{width:100%;min-height:68px}.scan-search{flex-direction:column;align-items:stretch}.quick-actions{grid-template-columns:1fr 1fr}.quick-action{flex-direction:column;text-align:center;justify-content:center;min-height:100px}.smart-result-grid{grid-template-columns:1fr}.manual-scan{flex-direction:column}.recent-scan-list a{align-items:flex-start;flex-direction:column;gap:3px}.active-scan-user{align-items:flex-start;flex-direction:column}.active-scan-user .btn{width:100%}.qr-label-grid{grid-template-columns:1fr 1fr}.camera-reader{min-height:240px}.qty-controls form{width:100%}.qty-controls form button,.qty-controls form select{width:100%}}
@media print{.qr-label-grid{grid-template-columns:repeat(3,1fr);gap:8mm}.qr-label{box-shadow:none;page-break-inside:avoid}.sidebar,.topbar,.mobile-nav,.filters{display:none!important}.page-wrap,.page-content{margin:0!important;padding:0!important}}

/* v5.7.3 – almindelige varer og administrationshandlinger */
.filter-bar {
    display: grid;
    grid-template-columns: minmax(220px, 2fr) repeat(2, minmax(170px, 1fr)) auto auto;
    gap: 14px;
    align-items: end;
}

.filter-bar label {
    display: grid;
    gap: 7px;
}

.danger-zone {
    border-color: rgba(185, 61, 61, 0.32);
}

.btn.danger {
    background: #8f3434;
    border-color: #8f3434;
    color: #fff;
}

.mobile-inventory-list {
    display: none;
}

@media (max-width: 820px) {
    .filter-bar {
        grid-template-columns: 1fr;
    }

    .desktop-inventory-list {
        display: none;
    }

    .mobile-inventory-list {
        display: grid;
    }
}


/* v6.1 – Mine udlån */
.my-loans-hero {
    margin-bottom: 18px;
}

.my-loans-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.my-loan-card {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.my-loan-main {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    color: inherit;
    text-decoration: none;
}

.my-loan-thumb {
    display: grid;
    place-items: center;
    width: 104px;
    height: 104px;
    overflow: hidden;
    border-radius: 16px;
    background: rgba(127, 127, 127, 0.08);
}

.my-loan-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.my-loan-thumb span {
    font-size: 2.25rem;
}

.my-loan-copy {
    min-width: 0;
}

.my-loan-copy h3 {
    margin: 8px 0 2px;
    font-size: 1.15rem;
}

.my-loan-copy p {
    margin: 8px 0 0;
    color: var(--muted);
}

.my-loan-home {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px;
    border-radius: 14px;
    background: rgba(127, 127, 127, 0.07);
}

.my-loan-home-icon {
    font-size: 1.3rem;
}

.my-loan-home div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.my-loan-home small,
.my-loan-meta small {
    color: var(--muted);
}

.my-loan-home strong,
.my-loan-home span {
    overflow-wrap: anywhere;
}

.my-loan-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.my-loan-meta > span {
    display: grid;
    gap: 3px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
}

.my-loan-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.my-loan-actions form,
.my-loan-actions .btn,
.my-loan-actions button {
    width: 100%;
}

.empty-loans-state {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 48px 24px;
    text-align: center;
}

.empty-loans-icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(127, 127, 127, 0.08);
    font-size: 2rem;
}

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

@media (max-width: 560px) {
    .my-loan-main {
        grid-template-columns: 76px minmax(0, 1fr);
    }

    .my-loan-thumb {
        width: 76px;
        height: 76px;
        border-radius: 13px;
    }

    .my-loan-meta,
    .my-loan-actions {
        grid-template-columns: 1fr;
    }
}


/* v6.2 – forbedret mobilvisning for almindelige varer */
.inventory-mobile-card-body {
    display: grid;
    gap: 14px;
}

.inventory-mobile-card-title h3 {
    margin: 0 0 3px;
}

.inventory-mobile-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.inventory-mobile-details > div {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 11px;
    border-radius: 11px;
    background: rgba(127, 127, 127, 0.07);
}

.inventory-mobile-details small {
    color: var(--muted);
}

.inventory-mobile-details strong {
    overflow-wrap: anywhere;
}

.inventory-mobile-open {
    display: block;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    color: var(--primary);
    font-weight: 700;
}

@media (max-width: 820px) {
    .inventory-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .inventory-hero .btn {
        width: 100%;
        min-height: 46px;
    }

    .mobile-inventory-list {
        gap: 14px;
    }

    .mobile-inventory-list .inventory-card {
        min-width: 0;
        overflow: hidden;
    }
}

@media (max-width: 440px) {
    .inventory-mobile-details {
        grid-template-columns: 1fr;
    }
}

/* v6.3 – visuelt og responsivt varekatalog */
.inventory-catalog {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 18px;
}

.inventory-catalog-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 4px 18px rgba(70, 45, 65, 0.045);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.inventory-catalog-card:hover {
    transform: translateY(-3px);
    border-color: #d8c7d4;
    box-shadow: var(--shadow);
}

.inventory-catalog-image {
    position: relative;
    display: grid;
    width: 100%;
    aspect-ratio: 4 / 3;
    place-items: center;
    overflow: hidden;
    background: linear-gradient(135deg, #f3eaf0, #fbf8fa);
}

.inventory-catalog-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.25s ease;
}

.inventory-catalog-card:hover .inventory-catalog-image img {
    transform: scale(1.035);
}

.inventory-catalog-image.is-placeholder > span {
    font-size: 3.25rem;
}

.inventory-catalog-status {
    position: absolute;
    top: 12px;
    right: 12px;
    box-shadow: 0 3px 12px rgba(45, 29, 41, 0.1);
}

.inventory-catalog-content {
    display: grid;
    flex: 1;
    gap: 13px;
    padding: 16px;
}

.inventory-catalog-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.inventory-catalog-heading h3 {
    margin: 0 0 3px;
    overflow-wrap: anywhere;
    font-size: 1.05rem;
    line-height: 1.3;
}

.inventory-catalog-heading small,
.inventory-catalog-number,
.inventory-catalog-facts small {
    color: var(--muted);
}

.inventory-catalog-arrow {
    flex: 0 0 auto;
    color: var(--primary);
    font-size: 1.7rem;
    line-height: 1;
}

.inventory-catalog-number {
    margin: 0;
    font-size: 0.82rem;
}

.inventory-catalog-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.inventory-catalog-facts > div {
    display: grid;
    min-width: 0;
    gap: 4px;
    padding: 10px;
    border-radius: 11px;
    background: rgba(127, 127, 127, 0.07);
}

.inventory-catalog-facts strong {
    overflow-wrap: anywhere;
    font-size: 0.84rem;
}

.inventory-catalog-stock {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding: 11px 12px;
    border-radius: 11px;
    background: rgba(63, 100, 113, 0.08);
}

.inventory-catalog-stock.is-low {
    background: rgba(220, 143, 28, 0.12);
}

.inventory-catalog-stock span {
    color: var(--muted);
    font-size: 0.82rem;
}

.inventory-empty-state {
    grid-column: 1 / -1;
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 48px 24px;
    text-align: center;
}

.inventory-empty-state > span {
    font-size: 3rem;
}

.inventory-empty-state h3,
.inventory-empty-state p {
    margin: 0;
}

@media (max-width: 1250px) {
    .inventory-catalog {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 920px) {
    .inventory-catalog {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .inventory-catalog {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .inventory-catalog-card {
        display: grid;
        grid-template-columns: 112px minmax(0, 1fr);
        border-radius: 15px;
    }

    .inventory-catalog-image {
        height: 100%;
        min-height: 184px;
        aspect-ratio: auto;
    }

    .inventory-catalog-image.is-placeholder > span {
        font-size: 2.4rem;
    }

    .inventory-catalog-status {
        top: 8px;
        right: 8px;
        max-width: calc(100% - 16px);
        font-size: 0.67rem;
    }

    .inventory-catalog-content {
        gap: 10px;
        padding: 13px;
    }

    .inventory-catalog-facts {
        grid-template-columns: 1fr;
    }

    .inventory-catalog-facts > div {
        padding: 8px;
    }

    .inventory-catalog-stock {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
        padding: 9px;
    }
}

@media (max-width: 390px) {
    .inventory-catalog-card {
        grid-template-columns: 92px minmax(0, 1fr);
    }

    .inventory-catalog-image {
        min-height: 200px;
    }
}

/* =========================================================
   v6.4 – kassefilter, placeringsindhold, revisionslog og kontrol
   ========================================================= */
.inventory-filter-bar {
    display: grid;
    grid-template-columns: minmax(220px, 2fr) repeat(3, minmax(150px, 1fr)) auto auto;
    gap: 10px;
    align-items: end;
}

.inventory-filter-bar > button,
.inventory-filter-bar > .btn {
    min-height: 43px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.inventory-catalog-box-fact {
    grid-column: 1 / -1;
}

.location-box-list {
    display: grid;
    gap: 16px;
}

.location-box-card {
    padding: 18px;
}

.location-box-card__head {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
}

.location-box-card__head h3 {
    margin: 2px 0 4px;
}

.location-box-card__head p {
    margin: 0;
    color: var(--muted);
}

.location-box-thumb,
.location-content-image,
.tool-issue-image {
    display: grid;
    place-items: center;
    overflow: hidden;
    background: var(--soft);
}

.location-box-thumb {
    width: 72px;
    height: 72px;
    border-radius: 15px;
    font-size: 30px;
}

.location-box-thumb img,
.location-content-image img,
.tool-issue-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.location-box-contents {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 16px;
}

.location-content-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 9px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
}

.location-content-image {
    width: 44px;
    height: 44px;
    border-radius: 10px;
}

.location-content-row b,
.location-content-row small {
    display: block;
}

.location-content-row small {
    color: var(--muted);
    margin-top: 3px;
}

.location-content-row > strong {
    white-space: nowrap;
    font-size: 13px;
}

.tool-issue-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.issue-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px;
}

.tool-issue-card {
    margin: 0;
}

.tool-issue-head {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
}

.tool-issue-image {
    width: 88px;
    height: 88px;
    border-radius: 16px;
    font-size: 34px;
}

.tool-issue-head h3 {
    margin: 8px 0 2px;
}

.tool-issue-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin: 16px 0;
}

.tool-issue-meta > div,
.tool-issue-note {
    padding: 11px;
    border-radius: 12px;
    background: var(--soft);
}

.tool-issue-meta small,
.tool-issue-meta strong,
.tool-issue-note small {
    display: block;
}

.tool-issue-meta small,
.tool-issue-note small {
    color: var(--muted);
    margin-bottom: 4px;
}

.tool-issue-note p {
    margin: 5px 0 0;
}

.tool-issue-form {
    display: grid;
    gap: 11px;
}

.tool-issue-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

.tool-issue-actions > * {
    text-align: center;
}

.history-filter-bar {
    display: grid;
    grid-template-columns: minmax(240px, 2fr) minmax(160px, 1fr) auto auto;
    gap: 10px;
    align-items: end;
}

.history-timeline {
    display: grid;
    gap: 12px;
}

.history-event {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 14px;
    margin: 0;
    padding: 17px;
}

.history-event-icon {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: var(--soft);
    font-size: 23px;
}

.history-event-head {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    align-items: flex-start;
}

.history-event-head h3 {
    margin: 7px 0 0;
}

.history-event-head time {
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap;
}

.history-event-body > p {
    margin: 10px 0;
}

.history-event-meta {
    display: flex;
    gap: 8px 16px;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: 12px;
}

@media (max-width: 1100px) {
    .inventory-filter-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tool-issue-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .inventory-filter-bar,
    .history-filter-bar,
    .tool-issue-actions,
    .tool-issue-meta {
        grid-template-columns: 1fr;
    }

    .inventory-filter-bar > button,
    .inventory-filter-bar > .btn {
        width: 100%;
    }

    .location-box-card__head {
        grid-template-columns: 58px minmax(0, 1fr);
    }

    .location-box-card__head > .btn {
        grid-column: 1 / -1;
        width: 100%;
        text-align: center;
    }

    .location-box-thumb {
        width: 58px;
        height: 58px;
    }

    .location-box-contents {
        grid-template-columns: 1fr;
    }

    .history-event {
        grid-template-columns: 40px minmax(0, 1fr);
        padding: 14px;
    }

    .history-event-icon {
        width: 40px;
        height: 40px;
    }

    .history-event-head {
        display: grid;
    }

    .tool-issue-head {
        grid-template-columns: 70px minmax(0, 1fr);
    }

    .tool-issue-image {
        width: 70px;
        height: 70px;
    }
}

/* v6.4 – kompakte statusmærker i varekataloget */
.inventory-catalog .inventory-catalog-card .inventory-catalog-status.badge {
    width: auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 24px) !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 4px 8px !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
}

@media (max-width: 620px) {
    .inventory-catalog .inventory-catalog-card .inventory-catalog-status.badge {
        max-width: calc(100% - 16px) !important;
        padding: 3px 6px !important;
        font-size: 9px !important;
    }
}

/* v6.5 – tydelig ændring i varehistorik */
.history-change {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
}

.history-change.is-positive {
    color: #287a54;
    background: rgba(54, 153, 104, 0.12);
}

.history-change.is-negative {
    color: #a33a43;
    background: rgba(196, 67, 77, 0.12);
}

.history-change.is-neutral {
    color: var(--muted);
    background: rgba(127, 127, 127, 0.1);
}


/* v6.6 – placering, kasse og komplette vareoplysninger */
.item-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 14px 0;
}
.item-detail-card {
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(127, 127, 127, 0.07);
}
.item-detail-card small { color: var(--muted); }
.item-detail-card strong { overflow-wrap: anywhere; }
.item-detail-card a { color: var(--primary); text-decoration: none; }
.item-detail-card a:hover { text-decoration: underline; }
.item-notes-box {
    margin: 12px 0;
    padding: 13px 14px;
    border-radius: 12px;
    background: rgba(127, 127, 127, 0.07);
}
.item-notes-box small { color: var(--muted); }
.item-notes-box p { margin: 6px 0 0; }
.tool-move-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 13px;
}
.tool-move-form button { grid-column: 1 / -1; }
@media (max-width: 620px) {
    .item-detail-grid,
    .tool-move-form { grid-template-columns: 1fr; }
    .tool-move-form button { grid-column: auto; }
}

/* =========================================================
   v6.7 – Kasseprofil, flytning og indholdskort
   ========================================================= */
.box-profile-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 24px;
}

.box-profile-main h2 {
    margin: 10px 0 4px;
}

.box-profile-main > p {
    margin: 0;
    color: var(--muted);
}

.box-profile-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 20px;
}

.box-profile-meta > div,
.box-content-stat {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 12px;
    border-radius: 12px;
    background: rgba(127, 127, 127, 0.07);
}

.box-profile-meta small,
.box-content-stat small {
    color: var(--muted);
}

.box-profile-meta strong {
    overflow-wrap: anywhere;
}

.box-profile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 18px;
}

.box-add-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px auto;
    align-items: end;
    gap: 12px;
}

.box-add-form label {
    margin: 0;
}

.box-content-section {
    margin-top: 16px;
}

.box-content-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.box-content-card {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: #fff;
}

.box-content-visual {
    display: grid;
    min-height: 160px;
    place-items: center;
    overflow: hidden;
    background: linear-gradient(135deg, #f3eaf0, #fbf8fa);
    text-decoration: none;
}

.box-content-visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.box-content-visual > span {
    font-size: 2.5rem;
}

.box-content-body {
    display: grid;
    gap: 11px;
    min-width: 0;
    padding: 14px;
}

.box-content-body h3 {
    margin: 7px 0 2px;
    overflow-wrap: anywhere;
    font-size: 1rem;
}

.box-content-body small {
    color: var(--muted);
}

.box-content-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-top: auto;
}

.box-content-actions form {
    margin: 0;
}

.app-dialog {
    width: min(520px, calc(100vw - 28px));
    max-height: calc(100vh - 28px);
    padding: 0;
    overflow: auto;
    border: 0;
    border-radius: 18px;
    box-shadow: 0 22px 70px rgba(35, 24, 33, 0.24);
}

.app-dialog::backdrop {
    background: rgba(31, 24, 30, 0.48);
    backdrop-filter: blur(3px);
}

.dialog-card {
    display: grid;
    gap: 15px;
    padding: 22px;
}

.dialog-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.dialog-head h2 {
    margin: 4px 0 0;
}

@media (max-width: 1180px) {
    .box-content-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .box-profile-hero {
        grid-template-columns: 1fr;
    }

    .box-profile-hero .qr-box {
        justify-self: center;
    }

    .box-profile-meta,
    .box-add-form,
    .box-content-grid {
        grid-template-columns: 1fr;
    }

    .box-content-card {
        grid-template-columns: 94px minmax(0, 1fr);
    }

    .box-content-visual {
        min-height: 180px;
    }

    .box-profile-actions .btn,
    .box-add-form button {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 420px) {
    .box-content-card {
        grid-template-columns: 1fr;
    }

    .box-content-visual {
        min-height: 170px;
        max-height: 220px;
    }
}

/* =========================================================
   V6.8 – QR-print med valgfrit antal
   ========================================================= */
.qr-print-toolbar {
    display: flex;
    align-items: end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 18px;
}

.qr-print-type-form {
    min-width: min(240px, 100%);
}

.qr-print-type-form label,
.qr-print-actions label {
    display: grid;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 700;
}

.qr-print-actions {
    display: flex;
    align-items: end;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

.qr-print-actions input[type="number"] {
    width: 105px;
}

.qr-print-summary {
    width: 100%;
    margin: 0;
    color: var(--muted);
    font-size: 0.82rem;
    text-align: right;
}

.qr-selectable-label {
    position: relative;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.qr-selectable-label.is-not-selected {
    opacity: 0.48;
}

.qr-label-select {
    display: flex;
    width: 100%;
    align-items: end;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    color: var(--text);
    text-align: left;
}

.qr-label-select label {
    display: grid;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 700;
}

.qr-label-select label:first-child {
    display: flex;
    align-items: center;
    gap: 7px;
}

.qr-label-select input[type="number"] {
    width: 72px;
    min-height: 36px;
    padding: 6px 8px;
}

.qr-code-preview {
    display: grid;
    min-height: 128px;
    place-items: center;
}

.qr-print-output {
    display: none;
}

@media (max-width: 760px) {
    .qr-print-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .qr-print-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .qr-print-actions label,
    .qr-print-actions input,
    .qr-print-actions button {
        width: 100%;
    }

    .qr-print-summary {
        grid-column: 1 / -1;
        text-align: left;
    }
}

@media (max-width: 480px) {
    .qr-print-actions {
        grid-template-columns: 1fr;
    }

    .qr-print-summary {
        grid-column: auto;
    }
}

@media print {
    .no-print,
    .qr-selection-grid {
        display: none !important;
    }

    .qr-print-output {
        display: grid !important;
    }
}

/* V6.9 – tydelig værktøjshistorik */
.history-subject {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.72rem;
}

/* =========================================================
   V6.10 – Desktop- og telefonoptimering
   Bevarer eksisterende design, farver og komponenter.
   ========================================================= */

/* ---------- Global robusthed ---------- */
html {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
}

img,
video,
canvas,
svg {
    max-width: 100%;
}

img {
    height: auto;
}

.app-shell,
.page-wrap,
.page-content,
.card,
.module-hero,
.table-wrap,
.form-grid,
.filters,
.inventory-catalog,
.media-library-grid,
.qr-label-grid {
    min-width: 0;
}

input,
select,
textarea,
button {
    max-width: 100%;
}

textarea {
    resize: vertical;
}

table {
    max-width: 100%;
}

/* ---------- Desktop: bedre udnyttelse af skærmen ---------- */
@media (min-width: 721px) {
    .sidebar {
        width: 224px;
        padding: 20px 13px;
    }

    .page-wrap {
        margin-left: 224px;
    }

    .brand {
        gap: 10px;
        padding: 3px 7px 19px;
    }

    .brand-icon {
        width: 42px;
        height: 42px;
        border-radius: 13px;
        font-size: 23px;
    }

    .brand b {
        font-size: 16px;
    }

    .brand small {
        font-size: 11px;
    }

    .side-nav {
        gap: 4px;
    }

    .side-nav a {
        gap: 10px;
        padding: 9px 10px;
        border-radius: 10px;
        font-size: 13px;
        line-height: 1.25;
    }

    .nav-heading {
        padding: 12px 10px 4px;
        font-size: 9px;
    }

    .side-user {
        padding-top: 13px;
    }

    .topbar {
        min-height: 72px;
        height: auto;
        padding: 12px clamp(20px, 2vw, 30px);
    }

    .topbar h1 {
        font-size: clamp(20px, 1.4vw, 24px);
    }

    .topbar p {
        font-size: 12px;
    }

    .page-content {
        width: 100%;
        max-width: 1840px;
        padding:
            clamp(18px, 1.5vw, 26px)
            clamp(18px, 2vw, 34px)
            80px;
    }

    .card {
        padding: clamp(16px, 1.25vw, 21px);
        margin-bottom: 15px;
    }

    .module-hero {
        padding: 19px 22px;
        margin-bottom: 15px;
        border-radius: 18px;
    }

    .module-hero h2 {
        font-size: clamp(22px, 1.6vw, 27px);
    }

    .stats,
    .quick-grid,
    .inventory-grid,
    .location-summary {
        gap: 13px;
    }

    .stat {
        padding: 16px;
    }

    .stat strong {
        font-size: 26px;
    }

    .filters,
    .filter-bar {
        gap: 9px;
    }

    .form-grid {
        gap: 13px 15px;
    }

    th,
    td {
        padding: 10px 9px;
    }

    .media-library-grid {
        grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
        gap: 14px;
    }

    .media-choice,
    .media-card {
        min-width: 0;
    }

    .inventory-catalog {
        grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
        gap: 14px;
    }

    .qr-label-grid {
        grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    }
}

@media (min-width: 1450px) {
    .page-content {
        max-width: none;
    }

    .inventory-catalog {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .media-library-grid {
        grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    }
}

@media (min-width: 1900px) {
    .page-content {
        padding-left: 38px;
        padding-right: 38px;
    }

    .inventory-catalog {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

/* ---------- Tablet ---------- */
@media (min-width: 721px) and (max-width: 1100px) {
    .sidebar {
        width: 205px;
    }

    .page-wrap {
        margin-left: 205px;
    }

    .side-nav a {
        font-size: 12px;
        padding: 9px 8px;
    }

    .page-content {
        padding-left: 18px;
        padding-right: 18px;
    }

    .inventory-catalog {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .media-library-grid {
        grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
    }
}

/* ---------- Telefon: ingen vandret scrolling ---------- */
@media (max-width: 720px) {
    body {
        width: 100%;
    }

    .sidebar {
        width: min(86vw, 300px);
        max-width: 300px;
        padding: 18px 14px;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .page-wrap {
        width: 100%;
        margin-left: 0;
    }

    .topbar {
        width: 100%;
        min-height: 64px;
        height: auto;
        padding: 10px 12px;
        gap: 10px;
    }

    .topbar > div {
        min-width: 0;
    }

    .topbar h1 {
        overflow: hidden;
        font-size: 18px;
        line-height: 1.2;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .menu-btn {
        min-width: 42px;
        min-height: 42px;
        flex: 0 0 42px;
        display: grid;
        place-items: center;
        padding: 0;
    }

    .top-scan {
        min-width: 42px;
        min-height: 42px;
        display: grid;
        place-items: center;
        padding: 0 11px;
    }

    .page-content {
        width: 100%;
        max-width: none;
        padding:
            12px
            max(10px, env(safe-area-inset-right))
            calc(92px + env(safe-area-inset-bottom))
            max(10px, env(safe-area-inset-left));
    }

    .card,
    .module-hero,
    .stat,
    .module-card {
        max-width: 100%;
        border-radius: 14px;
    }

    .card {
        padding: 14px;
        margin-bottom: 12px;
    }

    .module-hero {
        gap: 14px;
        padding: 16px;
        margin-bottom: 12px;
    }

    .module-hero h2 {
        font-size: 21px;
    }

    .module-hero p {
        font-size: 13px;
        line-height: 1.45;
    }

    .module-actions,
    .form-actions,
    .scanner-actions,
    .dialog-actions,
    .media-actions,
    .qr-print-actions {
        width: 100%;
    }

    .module-actions > *,
    .form-actions > *,
    .scanner-actions > *,
    .dialog-actions > *,
    .media-actions > *,
    .qr-print-actions > * {
        width: 100%;
        text-align: center;
    }

    .btn,
    .card button,
    button {
        min-height: 44px;
        touch-action: manipulation;
    }

    input,
    select,
    textarea {
        min-height: 44px;
        font-size: 16px;
    }

    textarea {
        min-height: 120px;
    }

    .stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .stat {
        padding: 13px;
    }

    .stat .label {
        font-size: 12px;
    }

    .stat strong {
        font-size: 22px;
    }

    .stat .icon {
        width: 38px;
        height: 38px;
        font-size: 19px;
    }

    .quick-grid,
    .inventory-grid,
    .inventory-catalog,
    .media-library-grid,
    .media-picker-grid,
    .location-summary,
    .form-grid,
    .module-split,
    .profile-meta,
    .admin-stats,
    .lookup-list {
        grid-template-columns: 1fr !important;
    }

    .filters,
    .filters.compact,
    .filter-bar,
    .user-create,
    .lookup-create,
    .qr-print-actions {
        grid-template-columns: 1fr !important;
    }

    .filters > *,
    .filter-bar > *,
    .user-create > *,
    .lookup-create > * {
        grid-column: auto !important;
        width: 100%;
    }

    .inventory-catalog-card {
        display: grid;
        grid-template-columns: 105px minmax(0, 1fr);
        width: 100%;
        min-height: 0;
    }

    .inventory-catalog-image {
        min-height: 165px;
        height: 100%;
        aspect-ratio: auto;
    }

    .inventory-catalog-content {
        min-width: 0;
        gap: 8px;
        padding: 11px;
    }

    .inventory-catalog-heading h3 {
        font-size: 0.95rem;
    }

    .inventory-catalog-facts {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .inventory-catalog-facts > div {
        padding: 8px;
    }

    .inventory-catalog-stock {
        padding: 9px;
    }

    .media-library-hero,
    .media-toolbar form,
    .section-head,
    .results-head,
    .item-bottom {
        align-items: stretch;
        flex-direction: column;
    }

    .media-library-grid {
        gap: 12px;
    }

    .media-choice img,
    .media-card img {
        max-height: 230px;
        object-fit: contain;
    }

    .item-hero {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .qr-box {
        width: 100%;
        min-width: 0;
    }

    .qr-box canvas,
    .qr-box img {
        max-width: min(220px, 100%);
        height: auto !important;
    }

    .qty-controls {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .qty-controls > * {
        width: 100%;
        min-width: 0;
        padding-left: 6px;
        padding-right: 6px;
    }

    .tabs {
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        margin-left: 0;
        margin-right: 0;
        padding-bottom: 2px;
        scrollbar-width: thin;
    }

    .tabs button,
    .tabs a {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .table-wrap {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table-wrap table {
        min-width: 680px;
    }

    .mobile-nav {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .mobile-nav a,
    .mobile-nav button {
        min-width: 0;
        min-height: 58px;
        padding: 8px 1px 6px;
    }

    .mobile-nav small {
        max-width: 100%;
        overflow: hidden;
        font-size: 9px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    dialog,
    .delete-dialog,
    .user-profile-dialog,
    .media-picker-dialog,
    .media-preview-dialog {
        max-width: calc(100vw - 20px) !important;
        max-height: calc(100dvh - 20px) !important;
    }

    .user-profile-dialog .user-profile-form,
    .media-picker-card {
        padding: 16px !important;
    }

    .scanner-page {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .scanner-card {
        padding: 14px;
    }

    .camera-reader,
    .camera-reader:empty::before {
        min-height: 240px;
    }

    .qr-label-grid {
        grid-template-columns: 1fr;
    }

    .qr-label-select {
        min-width: 0;
    }

    .qr-label-select .qr-label-select {
        width: 100%;
    }
}

/* ---------- Meget små telefoner ---------- */
@media (max-width: 420px) {
    .page-content {
        padding-left: 8px;
        padding-right: 8px;
    }

    .card {
        padding: 12px;
        border-radius: 12px;
    }

    .stats {
        grid-template-columns: 1fr;
    }

    .inventory-catalog-card {
        grid-template-columns: 88px minmax(0, 1fr);
    }

    .inventory-catalog-image {
        min-height: 150px;
    }

    .qty-controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .topbar h1 {
        font-size: 16px;
    }
}

/* ---------- Landscape telefon ---------- */
@media (max-width: 900px) and (orientation: landscape) {
    .topbar {
        min-height: 58px;
    }

    .page-content {
        padding-top: 10px;
    }

    .mobile-nav a,
    .mobile-nav button {
        min-height: 50px;
    }

    .camera-reader,
    .camera-reader:empty::before {
        min-height: 190px;
    }
}

/* ---------- Print må ikke påvirkes af mobilregler ---------- */
@media print {
    html,
    body {
        overflow: visible !important;
    }

    .page-wrap,
    .page-content {
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* =========================================================
   V6.10.1 – Ekstra kompakt desktop + forbedret mobil
   ========================================================= */

/* ---------- Mere kompakt desktop generelt ---------- */
@media (min-width: 1001px) {
    .topbar {
        min-height: 64px !important;
        padding-top: 9px !important;
        padding-bottom: 9px !important;
    }

    .page-content {
        padding-top: 14px !important;
        padding-bottom: 55px !important;
    }

    .card {
        padding: 15px !important;
        margin-bottom: 12px !important;
        border-radius: 15px !important;
    }

    .alert {
        padding: 10px 13px !important;
        margin-bottom: 12px !important;
    }

    .item-hero {
        grid-template-columns: minmax(0, 1fr) 180px !important;
        gap: 18px !important;
        align-items: start !important;
    }

    .item-title h2,
    .item-hero h2 {
        margin-top: 4px !important;
        margin-bottom: 6px !important;
        font-size: 24px !important;
    }

    .item-title > p,
    .item-hero > div > p {
        margin: 4px 0 10px !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
    }

    .badge {
        padding: 4px 8px !important;
        font-size: 10px !important;
    }

    .qr-box {
        min-width: 170px !important;
        width: 170px !important;
    }

    .qr-box #qrcode,
    .qr-box .qrcode,
    .qr-box > div {
        padding: 7px !important;
    }

    .qr-box canvas,
    .qr-box img {
        width: 145px !important;
        height: 145px !important;
        max-width: 145px !important;
    }

    .qr-box p,
    .qr-box small {
        margin-top: 6px !important;
        font-size: 11px !important;
    }

    .location-box,
    .tool-info-grid,
    .item-info-grid {
        margin: 10px 0 !important;
    }

    .tool-info-grid,
    .item-info-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    .tool-info-grid > div,
    .item-info-grid > div,
    .location-box {
        padding: 10px !important;
        border-radius: 10px !important;
    }

    .tool-info-grid small,
    .item-info-grid small,
    .location-box small {
        font-size: 10px !important;
    }

    .tool-info-grid strong,
    .item-info-grid strong,
    .location-box strong {
        font-size: 13px !important;
    }

    .form-grid {
        gap: 9px 10px !important;
    }

    label,
    .field {
        gap: 4px !important;
        font-size: 12px !important;
    }

    input,
    select,
    textarea {
        min-height: 38px !important;
        padding: 8px 10px !important;
        border-radius: 9px !important;
        font-size: 13px !important;
    }

    .btn,
    .card button {
        min-height: 38px !important;
        padding: 8px 12px !important;
        border-radius: 9px !important;
        font-size: 12px !important;
    }

    .form-actions,
    .module-actions,
    .qty-controls,
    .scanner-actions {
        gap: 7px !important;
        margin-top: 10px !important;
    }

    .move-form,
    .tool-move-form,
    .item-move-form {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto !important;
        gap: 8px !important;
        align-items: end !important;
        padding: 10px !important;
        margin-top: 10px !important;
        border-radius: 11px !important;
    }

    .move-form button,
    .tool-move-form button,
    .item-move-form button {
        width: auto !important;
        min-width: 140px !important;
        white-space: nowrap !important;
    }

    .status-form,
    .tool-status-form {
        display: flex !important;
        align-items: end !important;
        gap: 8px !important;
        margin-top: 8px !important;
    }

    .status-form label,
    .tool-status-form label {
        width: 220px !important;
        flex: 0 0 220px !important;
    }

    .status-form button,
    .tool-status-form button {
        width: auto !important;
    }

    .history-card,
    .admin-danger-card {
        padding: 14px !important;
    }

    th,
    td {
        padding: 8px 7px !important;
        font-size: 12px !important;
    }

    th {
        font-size: 10px !important;
    }

    .section-head {
        margin-bottom: 10px !important;
    }

    .section-head h2,
    .section-head h3 {
        font-size: 16px !important;
    }
}

/* ---------- Værktøjsprofil specifikt ---------- */
@media (min-width: 1001px) {
    body:has(.tool-move-form) .page-content,
    body:has(.tool-status-form) .page-content {
        padding-top: 12px !important;
    }

    body:has(.tool-move-form) .card:first-of-type,
    body:has(.tool-status-form) .card:first-of-type {
        padding: 14px 16px !important;
    }

    body:has(.tool-move-form) .item-hero,
    body:has(.tool-status-form) .item-hero {
        min-height: 0 !important;
    }
}

/* ---------- Tablet: stadig kompakt uden at klemme ---------- */
@media (min-width: 721px) and (max-width: 1000px) {
    .item-hero {
        grid-template-columns: minmax(0, 1fr) 150px !important;
        gap: 14px !important;
    }

    .qr-box {
        min-width: 145px !important;
        width: 145px !important;
    }

    .qr-box canvas,
    .qr-box img {
        width: 128px !important;
        height: 128px !important;
    }

    .move-form,
    .tool-move-form,
    .item-move-form {
        grid-template-columns: 1fr 1fr !important;
    }

    .move-form button,
    .tool-move-form button,
    .item-move-form button {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }
}

/* ---------- Telefon: bedre informationsrækkefølge ---------- */
@media (max-width: 720px) {
    .item-hero {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .qr-box {
        order: 3 !important;
        width: 100% !important;
        padding-top: 4px !important;
        border-top: 1px solid var(--line) !important;
    }

    .qr-box canvas,
    .qr-box img {
        width: 170px !important;
        height: 170px !important;
        max-width: 170px !important;
    }

    .tool-info-grid,
    .item-info-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 7px !important;
    }

    .move-form,
    .tool-move-form,
    .item-move-form,
    .status-form,
    .tool-status-form {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 9px !important;
        width: 100% !important;
    }

    .move-form > *,
    .tool-move-form > *,
    .item-move-form > *,
    .status-form > *,
    .tool-status-form > * {
        width: 100% !important;
    }

    .history-card .table-wrap {
        margin-left: -4px !important;
        margin-right: -4px !important;
    }
}

/* =========================================================
   V6.10 – små UI-rettelser
   ========================================================= */
.history-filter-bar {
    display: grid;
    grid-template-columns: minmax(240px, 2fr) minmax(170px, 1fr) minmax(180px, 1fr) auto auto;
    gap: 10px;
    align-items: end;
}

.shopping-buy-form {
    display: grid;
    grid-template-columns: minmax(80px, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.shopping-buy-form input {
    min-width: 80px;
}

.shopping-buy-form button {
    white-space: nowrap;
}

@media (max-width: 1000px) {
    .history-filter-bar {
        grid-template-columns: 1fr 1fr;
    }

    .history-filter-bar > :first-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    .history-filter-bar,
    .shopping-buy-form {
        grid-template-columns: 1fr;
    }

    .history-filter-bar > *,
    .shopping-buy-form > * {
        width: 100%;
    }
}

/* =========================================================
   V6.11 – Søgning og filtre på værktøjsoversigten
   ========================================================= */
.tool-search-card {
    padding: 14px;
}

.tool-filter-bar {
    display: grid;
    grid-template-columns: minmax(260px, 2fr) repeat(3, minmax(150px, 1fr)) auto auto;
    gap: 10px;
    align-items: end;
}

.tool-search-input {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 11px;
    color: var(--muted);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 11px;
}

.tool-search-input:focus-within {
    border-color: var(--primary2);
    box-shadow: 0 0 0 3px #b783a522;
}

.tool-search-input > span {
    flex: 0 0 auto;
    font-size: 20px;
    line-height: 1;
}

.tool-search-input input {
    min-width: 0;
    padding-left: 0;
    border: 0;
    box-shadow: none !important;
}

.tool-filter-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 11px;
    padding-top: 11px;
    border-top: 1px solid var(--line);
}

.tool-filter-footer p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}

.tool-catalog-card[hidden] {
    display: none !important;
}

.tool-card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.tool-card-heading h3 {
    margin-bottom: 3px;
}

.tool-card-arrow {
    flex: 0 0 auto;
    color: var(--primary);
    font-size: 25px;
    line-height: 1;
}

.tool-number {
    margin: 0 0 10px;
    color: var(--muted);
    font-size: 12px;
}

.tool-card-details {
    min-height: 0;
    gap: 7px;
}

.tool-card-details > span {
    display: grid;
    min-width: 0;
    gap: 3px;
    padding: 8px 9px;
    border-radius: 10px;
    background: rgba(127, 127, 127, 0.07);
}

.tool-card-details small {
    color: var(--muted);
    font-size: 10px;
}

.tool-card-details strong {
    overflow-wrap: anywhere;
    color: var(--ink);
    font-size: 12px;
}

.tool-open-label {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 35px;
    margin-top: 11px;
    color: var(--primary);
    background: var(--soft);
    border-radius: 9px;
    font-size: 12px;
    font-weight: 800;
}

.tool-empty-state {
    grid-column: 1 / -1;
}

.tool-empty-state > span {
    font-size: 34px;
}

@media (max-width: 1250px) {
    .tool-filter-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tool-search-field {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    .tool-search-card {
        padding: 11px;
    }

    .tool-filter-bar {
        grid-template-columns: 1fr;
    }

    .tool-search-field {
        grid-column: auto;
    }

    .tool-filter-bar > * {
        width: 100%;
    }

    .tool-filter-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .tool-filter-footer .btn {
        width: 100%;
        text-align: center;
    }

    .tool-catalog .visual-card {
        display: grid;
        grid-template-columns: 112px minmax(0, 1fr);
    }

    .tool-catalog .visual-thumb {
        height: 100%;
        min-height: 210px;
    }

    .tool-catalog .visual-card-body {
        min-width: 0;
        padding: 12px;
    }
}

/* =========================================================
   RESPONSIVE FOUNDATION — mobile/tablet hardening
   ========================================================= */
html {
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

body,
.app-shell,
.page-wrap,
.page-content,
.card,
form,
fieldset {
    min-width: 0;
    max-width: 100%;
}

img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
    height: auto;
}

pre,
code,
textarea,
input,
select {
    max-width: 100%;
}

p,
li,
td,
th,
h1,
h2,
h3,
h4,
a,
button,
label,
strong,
small {
    overflow-wrap: anywhere;
}

.table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

button,
.btn,
.top-scan,
.side-nav a,
.mobile-nav a,
.mobile-nav button,
input,
select {
    min-height: 48px;
}

.btn,
button,
a {
    touch-action: manipulation;
}

@media (max-width: 768px) {
    body {
        overflow-x: hidden;
    }

    .sidebar {
        display: none;
    }

    .page-wrap {
        width: 100%;
        margin-left: 0;
    }

    .topbar {
        width: 100%;
        height: auto;
        min-height: 72px;
        padding: 10px 14px;
        gap: 10px;
    }

    .topbar > div {
        min-width: 0;
        flex: 1 1 auto;
    }

    .topbar h1 {
        font-size: clamp(18px, 5vw, 22px);
        line-height: 1.2;
    }

    .top-scan {
        flex: 0 0 48px;
        width: 48px;
        height: 48px;
        padding: 0;
        display: grid;
        place-items: center;
    }

    .top-scan span {
        display: none;
    }

    .page-content {
        width: 100%;
        padding: 16px 12px calc(94px + env(safe-area-inset-bottom));
    }

    .card,
    .stat,
    .module-card,
    .module-hero,
    .scan-dialog-card {
        padding: 16px;
        border-radius: 15px;
    }

    .stats,
    .inventory-grid,
    .quick-grid,
    .form-grid,
    .module-split,
    .filters,
    .filters.compact,
    .dashboard-two-col,
    .smart-result-grid,
    .tool-filter-bar,
    .qr-label-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .stats {
        gap: 10px;
    }

    .section-head,
    .module-hero,
    .form-actions,
    .item-bottom,
    .manual-code,
    .scan-search,
    .active-scan-user {
        align-items: stretch;
        flex-direction: column;
    }

    .section-head > *,
    .module-actions,
    .form-actions > *,
    .manual-code > *,
    .scan-search > *,
    .active-scan-user > * {
        width: 100%;
    }

    .module-card {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .module-card > :last-child {
        grid-column: 1 / -1;
        width: 100%;
    }

    .item-hero {
        grid-template-columns: minmax(0, 1fr);
    }

    .qr-box {
        width: 100%;
        min-width: 0;
    }

    .qr-box canvas,
    .qr-box img {
        max-width: min(100%, 280px) !important;
    }

    .tabs {
        max-width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .tabs button,
    .tabs a {
        flex: 0 0 auto;
        min-height: 48px;
        white-space: nowrap;
    }

    .qty-controls,
    .garn-actions,
    .module-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
    }

    .qty-controls > *,
    .garn-actions > *,
    .module-actions > * {
        width: 100%;
    }

    .empty {
        padding: 28px 14px;
    }

    .mobile-nav {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        min-height: 66px;
    }

    .mobile-nav a,
    .mobile-nav button {
        min-width: 0;
        min-height: 58px;
        padding: 8px 3px 6px;
    }

    .mobile-nav small {
        max-width: 100%;
        font-size: 11px;
        line-height: 1.1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    dialog,
    .scan-dialog {
        max-width: calc(100vw - 20px);
        max-height: calc(100dvh - 20px);
        margin: auto;
    }

    .camera-reader,
    .scanner-box {
        min-height: 220px;
    }
}

@media (max-width: 420px) {
    .page-content {
        padding-inline: 10px;
    }

    .card,
    .stat,
    .module-card,
    .module-hero {
        padding: 14px;
    }

    .stat strong {
        font-size: 24px;
    }

    .module-card {
        grid-template-columns: minmax(0, 1fr);
        text-align: center;
    }

    .module-icon {
        margin-inline: auto;
    }
}

/* ==========================================================
   RESPONSIVE STABILITETSLAG – TELEFON, TABLET OG DESKTOP
   ========================================================== */
html {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
}

img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
    height: auto;
}

pre,
code,
textarea,
input,
select,
.table-wrap,
.card,
.stat,
.item-card,
.module-card,
.module-hero,
.page-content,
.page-wrap,
.topbar-title {
    min-width: 0;
}

pre,
code {
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

button,
.btn,
input,
select,
textarea,
.side-nav a,
.top-scan,
.mobile-nav a,
.mobile-nav button {
    min-height: 48px;
}

button,
.btn,
.top-scan,
.side-nav a,
.mobile-nav a {
    touch-action: manipulation;
}

.table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

table {
    max-width: 100%;
}

.topbar-title {
    flex: 1 1 auto;
    overflow: hidden;
}

.topbar-title h1,
.topbar-title p {
    overflow-wrap: anywhere;
}

/* Tablet og mindre bærbare: mere luft og færre kolonner */
@media (min-width: 901px) and (max-width: 1180px) {
    .sidebar {
        width: 220px;
        padding-inline: 12px;
    }

    .page-wrap {
        margin-left: 220px;
    }

    .topbar {
        padding-inline: 22px;
    }

    .page-content {
        padding-inline: 22px;
    }

    .stats,
    .quick-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .inventory-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .filters .search-wide {
        grid-column: 1 / -1;
    }
}

/* Telefon og tablet: off-canvas-menu og bundnavigation */
@media (max-width: 900px) {
    .sidebar {
        width: min(320px, 88vw);
        transform: translateX(-105%);
        transition: transform .2s ease;
        box-shadow: 18px 0 44px rgba(0, 0, 0, .18);
    }

    .menu-open .sidebar {
        transform: translateX(0);
    }

    .menu-open::after {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .48);
        z-index: 40;
    }

    .page-wrap {
        margin-left: 0;
        width: 100%;
    }

    .topbar {
        height: auto;
        min-height: 76px;
        padding: 12px 18px;
    }

    .menu-btn {
        display: inline-grid;
        place-items: center;
        flex: 0 0 48px;
        width: 48px;
        height: 48px;
        border: 0;
        border-radius: 12px;
        background: var(--soft);
        color: var(--primary);
        cursor: pointer;
    }

    .page-content {
        width: 100%;
        max-width: 100%;
        padding: 22px 18px calc(100px + env(safe-area-inset-bottom));
    }

    .mobile-nav {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        min-height: 68px;
    }

    .mobile-nav a,
    .mobile-nav button {
        min-width: 0;
        min-height: 60px;
    }

    .stats,
    .quick-grid,
    .inventory-grid,
    .module-split {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .filters,
    .form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .filters .search-wide,
    .form-grid .full {
        grid-column: 1 / -1;
    }

    .item-hero {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Telefon */
@media (max-width: 767px) {
    .topbar {
        padding-inline: 12px;
        gap: 10px;
    }

    .topbar h1 {
        font-size: clamp(18px, 5vw, 22px);
        line-height: 1.15;
    }

    .topbar p {
        display: none;
    }

    .top-scan {
        flex: 0 0 48px;
        width: 48px;
        padding: 0;
        display: grid;
        place-items: center;
    }

    .top-scan span {
        display: none;
    }

    .page-content {
        padding-inline: 12px;
    }

    .stats,
    .quick-grid,
    .inventory-grid,
    .module-split,
    .filters,
    .form-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .section-head,
    .item-bottom,
    .manual-code,
    .qty-controls,
    .garn-actions,
    .module-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .section-head > *,
    .manual-code > *,
    .qty-controls > *,
    .garn-actions > *,
    .module-actions > * {
        width: 100%;
    }

    .card,
    .stat,
    .item-card {
        border-radius: 15px;
    }

    .card {
        padding: 16px;
    }

    .tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .tabs button {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    dialog,
    .scan-dialog {
        width: calc(100vw - 20px);
        max-width: calc(100vw - 20px);
        max-height: calc(100dvh - 20px);
        margin: auto;
    }
}

/* Små telefoner */
@media (max-width: 420px) {
    .page-content {
        padding-inline: 10px;
    }

    .stats {
        grid-template-columns: minmax(0, 1fr);
    }

    .mobile-nav small {
        font-size: 10px;
    }
}

/* Store desktopskærme */
@media (min-width: 1440px) {
    .page-content {
        max-width: 1600px;
        padding-inline: 40px;
    }

    .inventory-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ==========================================================
   V6.11 – Skærmoptimering ud fra telefon- og desktopscreenshots
   Bevarer designet, men stabiliserer telefon, tablet og desktop.
   ========================================================== */

/* Sidebaren må aldrig bryde menuteksten bogstav for bogstav. */
.side-nav a {
    min-width: 0;
    width: 100%;
}

.side-nav a > i,
.side-nav a > svg {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
}

.side-nav a > span {
    width: auto !important;
    min-width: 0;
    flex: 1 1 auto;
    text-align: left !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

.nav-heading {
    width: auto !important;
    white-space: nowrap;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

/* Desktop */
@media (min-width: 901px) {
    .sidebar {
        width: 250px !important;
        padding: 20px 15px !important;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .page-wrap {
        margin-left: 250px !important;
        width: calc(100% - 250px) !important;
    }

    .side-nav {
        gap: 5px !important;
    }

    .side-nav a {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        min-height: 46px !important;
        padding: 10px 12px !important;
        font-size: 14px !important;
        line-height: 1.2 !important;
    }

    .page-content {
        width: 100% !important;
        max-width: 1680px !important;
        margin-inline: auto !important;
        padding-inline: clamp(20px, 2.2vw, 38px) !important;
    }

    .stats {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }

    .stat {
        min-height: 104px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .stat strong {
        font-size: clamp(28px, 2vw, 36px) !important;
        line-height: 1 !important;
    }

    .quick-grid,
    .module-split {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }

    .module-hero,
    .module-card {
        min-height: 150px;
    }

    .inventory-grid,
    .inventory-catalog {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
        gap: 14px !important;
    }

    .visual-card,
    .item-card {
        min-width: 0;
        height: 100%;
    }

    .visual-thumb,
    .item-image {
        aspect-ratio: 1 / 1;
        height: auto !important;
        max-height: 230px;
        object-fit: contain;
    }

    /* Indstillinger: bedre bredde og mere ens lister. */
    .settings-layout {
        align-items: start;
    }

    .settings-layout > aside,
    .settings-sidebar {
        position: sticky;
        top: 86px;
    }

    .settings-list,
    .category-list,
    .location-list {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px 12px !important;
    }

    .settings-list > *,
    .category-list > *,
    .location-list > * {
        min-width: 0;
    }
}

/* Tablet: skjult sidebar og to-kolonnelayout, uden desktop-klemning. */
@media (min-width: 768px) and (max-width: 900px) {
    .page-content {
        padding: 22px 22px calc(96px + env(safe-area-inset-bottom)) !important;
    }

    .stats,
    .quick-grid,
    .inventory-grid,
    .inventory-catalog,
    .settings-list,
    .category-list,
    .location-list {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .form-grid,
    .filters {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .form-grid .full,
    .filters .search-wide {
        grid-column: 1 / -1;
    }
}

/* Telefon */
@media (max-width: 767px) {
    .page-content {
        padding: 14px 8px calc(88px + env(safe-area-inset-bottom)) !important;
    }

    .card,
    .stat,
    .module-card,
    .module-hero {
        margin-bottom: 10px !important;
        padding: 14px !important;
        border-radius: 14px !important;
    }

    .stats {
        gap: 8px !important;
    }

    .stat {
        min-height: 92px;
    }

    .stat strong {
        font-size: 27px !important;
    }

    .section-head {
        gap: 10px;
        margin-bottom: 12px !important;
    }

    .section-head h2,
    .section-head h3 {
        font-size: 18px !important;
    }

    .inventory-grid,
    .inventory-catalog {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
    }

    .visual-card,
    .item-card {
        min-width: 0;
    }

    .visual-thumb,
    .item-image {
        width: 100%;
        aspect-ratio: 1 / 1;
        height: auto !important;
        min-height: 0 !important;
        object-fit: contain;
    }

    .visual-card-body,
    .item-card-body {
        padding: 10px !important;
    }

    .visual-card h3,
    .item-card h3 {
        font-size: 14px !important;
        line-height: 1.25;
    }

    .visual-card p,
    .item-card p,
    .visual-card small,
    .item-card small {
        font-size: 11px !important;
    }

    .mobile-nav a,
    .mobile-nav button {
        min-height: 64px !important;
    }

    .mobile-nav svg,
    .mobile-nav i {
        width: 23px !important;
        height: 23px !important;
    }

    /* Lange oversigtslister skal forblive luftige og læsbare. */
    .settings-list,
    .category-list,
    .location-list {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;
    }

    table {
        min-width: 560px;
    }

    .table-wrap table {
        min-width: 560px;
    }
}

@media (max-width: 380px) {
    .inventory-grid,
    .inventory-catalog {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* v6.12 – Login til telefon, tablet og desktop */
.login-page,
.login-page * {
    box-sizing: border-box;
}

@media (min-width: 1100px) {
    .login-shell {
        min-height: 100vh;
        grid-template-columns: minmax(520px, 1.08fr) minmax(500px, .92fr);
    }

    .login-visual {
        display: flex;
        min-width: 0;
        padding: 56px clamp(48px, 6vw, 104px);
    }

    .login-panel {
        min-width: 0;
        padding: 48px clamp(42px, 5vw, 82px);
    }

    .login-card {
        width: min(520px, 100%);
        padding: 46px;
    }

    .login-card h2 {
        font-size: 38px;
    }

    .login-card input,
    .login-button {
        min-height: 54px;
    }
}

@media (min-width: 769px) and (max-width: 1099px) {
    .login-shell {
        grid-template-columns: 1fr;
    }

    .login-visual {
        display: none;
    }

    .login-panel {
        min-height: 100vh;
        padding: 42px;
    }

    .login-card {
        width: min(540px, 100%);
        padding: 42px;
    }

    .login-mobile-brand {
        display: flex;
        align-items: center;
        gap: 12px;
    }
}

@media (max-width: 768px) {
    .login-panel {
        min-height: 100dvh;
        padding: 18px;
    }

    .login-card {
        width: 100%;
        max-width: 480px;
    }
}


/* =========================================================
   v4.0 – Samlet responsivt layout
   Telefon: 1 kolonne
   Tablet: 2 kolonner
   Lille computer: 3 kolonner
   Desktop: 4 kolonner
   ========================================================= */

/* Stabil tekst og medievisning */
img,
video,
canvas,
svg {
    max-width: 100%;
}

.inventory-catalog-card,
.tool-catalog-card,
.location-card,
.qr-selectable-label {
    min-width: 0;
    overflow: hidden;
    border-radius: 18px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.inventory-catalog-card:hover,
.tool-catalog-card:hover,
.location-card:hover,
.qr-selectable-label:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 38px rgba(55, 37, 51, .11);
    border-color: #d8c7d4;
}

.inventory-catalog-heading h3,
.tool-card-heading h3,
.location-card h3 {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    min-height: 2.5em;
    margin: 0;
    line-height: 1.25;
    overflow-wrap: break-word;
    word-break: normal;
}

.inventory-catalog-image,
.tool-catalog .visual-thumb,
.location-card .location-preview {
    width: 100%;
    min-height: 145px;
    max-height: 185px;
    aspect-ratio: 4 / 3;
    object-fit: contain;
}

.inventory-catalog-content,
.tool-catalog .visual-card-body,
.location-card .visual-card-body {
    padding: 17px;
}

.inventory-catalog-facts,
.tool-card-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.inventory-catalog-facts > *,
.tool-card-details > * {
    min-width: 0;
}

.inventory-catalog-facts strong,
.tool-card-details strong,
.location-card .card-bottom strong {
    overflow-wrap: break-word;
    word-break: normal;
}

.location-card .card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.location-card .card-bottom span {
    min-width: 0;
    white-space: normal;
}

.location-card .card-bottom strong {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Filtre */
.inventory-filter-bar,
.tool-filter-bar,
.qr-print-toolbar {
    align-items: end;
    gap: 12px;
}

.inventory-filter-bar input,
.inventory-filter-bar select,
.tool-filter-bar input,
.tool-filter-bar select,
.qr-print-toolbar input,
.qr-print-toolbar select {
    min-height: 48px;
}

/* QR-kort */
.qr-selectable-label {
    min-height: 300px;
    padding: 16px;
    border: 1px solid var(--line);
    box-shadow: 0 8px 24px rgba(55, 37, 51, .07);
}

.qr-code-preview {
    min-height: 170px;
    display: grid;
    place-items: center;
}

.qr-code-preview canvas,
.qr-code-preview img {
    width: min(175px, 100%) !important;
    height: auto !important;
}

/* Telefon */
@media (max-width: 599px) {
    .inventory-catalog,
    .tool-catalog,
    .location-grid,
    .qr-selection-grid,
    .inventory-grid,
    .items-grid,
    .product-grid,
    .card-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .inventory-catalog-facts,
    .tool-card-details {
        grid-template-columns: 1fr;
    }

    .inventory-catalog-image,
    .tool-catalog .visual-thumb,
    .location-card .location-preview {
        min-height: 125px;
        max-height: 155px;
    }
}

/* Tablet */
@media (min-width: 600px) and (max-width: 899px) {
    .inventory-catalog,
    .tool-catalog,
    .location-grid,
    .qr-selection-grid,
    .inventory-grid,
    .items-grid,
    .product-grid,
    .card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }
}

/* Lille computer / stor tablet */
@media (min-width: 900px) and (max-width: 1199px) {
    .inventory-catalog,
    .tool-catalog,
    .location-grid,
    .qr-selection-grid,
    .inventory-grid,
    .items-grid,
    .product-grid,
    .card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 18px !important;
    }
}

/* Desktop */
@media (min-width: 1200px) {
    .page-content > .module-hero,
    .page-content > .card,
    .page-content > .inventory-catalog,
    .page-content > .inventory-grid,
    .page-content > .location-summary,
    .page-content > .qr-label-grid,
    .page-content > .alert,
    .page-content > form,
    .page-content > section {
        width: min(100%, 1500px);
        margin-left: auto;
        margin-right: auto;
    }

    .inventory-catalog,
    .tool-catalog,
    .location-grid,
    .qr-selection-grid,
    .inventory-grid,
    .items-grid,
    .product-grid,
    .card-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 22px !important;
    }

    .inventory-filter-bar {
        grid-template-columns: minmax(300px, 2fr) repeat(3, minmax(165px, 1fr)) auto auto;
    }

    .tool-filter-bar {
        grid-template-columns: minmax(320px, 2fr) repeat(3, minmax(165px, 1fr)) auto auto;
    }
}

/* Login: ikonet skal altid have sin egen plads */
.login-card .input-with-icon {
    position: relative !important;
    display: block !important;
    width: 100% !important;
}

.login-card .input-with-icon > span {
    position: absolute !important;
    left: 18px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    pointer-events: none !important;
    z-index: 5 !important;
    opacity: .55;
}

.login-card .input-with-icon > span svg {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
}

.login-card .input-with-icon > input {
    display: block !important;
    width: 100% !important;
    min-height: 52px !important;
    padding: 0 16px 0 58px !important;
    text-indent: 0 !important;
    box-sizing: border-box !important;
}

/* =========================================================
   NIIMBOT B1 – T50x30-230 White
   QR-etiketter 50 x 30 mm
   Én mærkat pr. udskriftsside
   ========================================================= */
@media print {
    @page {
        size: 50mm 30mm;
        margin: 0;
    }

    html,
    body {
        width: 50mm !important;
        min-width: 50mm !important;
        max-width: 50mm !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        overflow: visible !important;
    }

    body * {
        visibility: hidden !important;
    }

    #qr-print-output,
    #qr-print-output * {
        visibility: visible !important;
    }

    #qr-print-output {
        position: absolute !important;
        inset: 0 auto auto 0 !important;
        display: block !important;
        width: 50mm !important;
        max-width: 50mm !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #qr-print-output .qr-label {
        display: grid !important;
        grid-template-columns: 24mm minmax(0, 1fr) !important;
        grid-template-rows: 1fr !important;
        align-items: center !important;
        column-gap: 2mm !important;
        width: 50mm !important;
        height: 30mm !important;
        min-width: 50mm !important;
        min-height: 30mm !important;
        max-width: 50mm !important;
        max-height: 30mm !important;
        margin: 0 !important;
        padding: 2mm !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: #fff !important;
        color: #000 !important;
        text-align: left !important;
        overflow: hidden !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
        break-after: page !important;
        page-break-after: always !important;
    }

    #qr-print-output .qr-label:last-child {
        break-after: auto !important;
        page-break-after: auto !important;
    }

    #qr-print-output .qr-label > div:first-child {
        display: grid !important;
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 24mm !important;
        height: 24mm !important;
        min-width: 24mm !important;
        min-height: 24mm !important;
        margin: 0 !important;
        place-items: center !important;
        overflow: hidden !important;
    }

    #qr-print-output canvas,
    #qr-print-output img {
        display: block !important;
        width: 24mm !important;
        height: 24mm !important;
        max-width: 24mm !important;
        max-height: 24mm !important;
        margin: 0 !important;
        object-fit: contain !important;
        image-rendering: pixelated;
    }

    #qr-print-output b,
    #qr-print-output small {
        grid-column: 2 !important;
        display: block !important;
        width: 20mm !important;
        max-width: 20mm !important;
        color: #000 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    #qr-print-output b {
        align-self: end !important;
        margin: 0 0 1.2mm !important;
        font-family: Arial, sans-serif !important;
        font-size: 8pt !important;
        font-weight: 700 !important;
        line-height: 1.1 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        max-height: 9mm !important;
    }

    #qr-print-output small {
        align-self: start !important;
        margin: 0 !important;
        font-family: monospace !important;
        font-size: 6.5pt !important;
        line-height: 1.05 !important;
        white-space: nowrap !important;
    }
}

/* =========================================================
   NIIMBOT B1 T50x30-230 White – blandet QR-layout
   Varer/værktøj: 2 QR-koder pr. etiket
   Kasser/brugere/placeringer: 1 QR-kode pr. etiket
   ========================================================= */
@media print {
    @page {
        size: 50mm 30mm;
        margin: 0;
    }

    html,
    body {
        width: 50mm !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
    }

    body * {
        visibility: hidden !important;
    }

    #qr-print-output,
    #qr-print-output * {
        visibility: visible !important;
    }

    #qr-print-output {
        position: absolute !important;
        inset: 0 auto auto 0 !important;
        display: block !important;
        width: 50mm !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .qr-sticker {
        width: 50mm !important;
        height: 30mm !important;
        min-width: 50mm !important;
        min-height: 30mm !important;
        max-width: 50mm !important;
        max-height: 30mm !important;
        margin: 0 !important;
        padding: 1.5mm !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: #fff !important;
        color: #000 !important;
        overflow: hidden !important;
        break-after: page !important;
        page-break-after: always !important;
        box-sizing: border-box !important;
    }

    .qr-sticker:last-child {
        break-after: auto !important;
        page-break-after: auto !important;
    }

    .qr-sticker-single {
        display: grid !important;
        place-items: center !important;
    }

    .qr-sticker-single .qr-mini-label {
        width: 47mm !important;
        height: 27mm !important;
        display: grid !important;
        grid-template-columns: 25mm minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 1.5mm !important;
    }

    .qr-sticker-single .qr-mini-code,
    .qr-sticker-single .qr-mini-code canvas,
    .qr-sticker-single .qr-mini-code img {
        width: 24mm !important;
        height: 24mm !important;
    }

    .qr-sticker-double {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 1mm !important;
    }

    .qr-sticker-double .qr-mini-label {
        min-width: 0 !important;
        height: 27mm !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        overflow: hidden !important;
    }

    .qr-sticker-double .qr-mini-label:first-child {
        border-right: 0.25mm dashed #aaa !important;
        padding-right: 0.5mm !important;
    }

    .qr-sticker-double .qr-mini-code,
    .qr-sticker-double .qr-mini-code canvas,
    .qr-sticker-double .qr-mini-code img {
        width: 18mm !important;
        height: 18mm !important;
        flex: 0 0 auto !important;
    }

    .qr-mini-code canvas,
    .qr-mini-code img {
        display: block !important;
        max-width: none !important;
    }

    .qr-mini-text {
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .qr-mini-text b,
    .qr-mini-text small {
        display: block !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        color: #000 !important;
    }

    .qr-sticker-single .qr-mini-text {
        text-align: left !important;
    }

    .qr-sticker-single .qr-mini-text b {
        font-size: 8pt !important;
        line-height: 1.15 !important;
        margin-bottom: 1.3mm !important;
    }

    .qr-sticker-single .qr-mini-text small {
        font: 6.7pt/1.15 ui-monospace, SFMono-Regular, Consolas, monospace !important;
    }

    .qr-sticker-double .qr-mini-text {
        width: 100% !important;
        margin-top: 0.7mm !important;
        text-align: center !important;
    }

    .qr-sticker-double .qr-mini-text b {
        font-size: 5.7pt !important;
        line-height: 1.05 !important;
    }

    .qr-sticker-double .qr-mini-text small {
        margin-top: 0.35mm !important;
        font: 4.8pt/1 ui-monospace, SFMono-Regular, Consolas, monospace !important;
    }

    .qr-mini-label-empty {
        border: 0 !important;
    }
}

/* =========================================================
   FIX: NIIMBOT B1 T50x30 mixed layout
   - Varer og værktøj: 2 pr. mærkat, tekst UNDER QR
   - Kasser, brugere og placeringer: 1 pr. mærkat, tekst VED SIDEN AF QR
   ========================================================= */
@media print {
    /* Fælles nulstilling, så ældre QR-regler ikke vinder */
    #qr-print-output .qr-sticker .qr-mini-label {
        box-sizing: border-box !important;
        min-width: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    /* Én QR: tekst ved siden af */
    #qr-print-output .qr-sticker-single {
        display: grid !important;
        place-items: center !important;
        padding: 1.5mm !important;
    }

    #qr-print-output .qr-sticker-single .qr-mini-label {
        width: 47mm !important;
        height: 27mm !important;
        display: grid !important;
        grid-template-columns: 23mm minmax(0, 1fr) !important;
        grid-template-rows: 27mm !important;
        align-items: center !important;
        gap: 1.5mm !important;
        text-align: left !important;
    }

    #qr-print-output .qr-sticker-single .qr-mini-code {
        width: 22mm !important;
        height: 22mm !important;
        display: grid !important;
        place-items: center !important;
        overflow: hidden !important;
    }

    #qr-print-output .qr-sticker-single .qr-mini-code canvas,
    #qr-print-output .qr-sticker-single .qr-mini-code img {
        width: 22mm !important;
        height: 22mm !important;
        max-width: 22mm !important;
        max-height: 22mm !important;
        margin: 0 !important;
    }

    #qr-print-output .qr-sticker-single .qr-mini-text {
        width: 22.5mm !important;
        max-width: 22.5mm !important;
        margin: 0 !important;
        text-align: left !important;
        overflow: hidden !important;
    }

    #qr-print-output .qr-sticker-single .qr-mini-text b {
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 3 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        font-size: 7.5pt !important;
        line-height: 1.05 !important;
        max-height: 12mm !important;
        margin: 0 0 1.2mm !important;
    }

    #qr-print-output .qr-sticker-single .qr-mini-text small {
        display: block !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        font-size: 5.8pt !important;
        line-height: 1.05 !important;
    }

    /* To QR: hver halvdel har QR øverst og tekst under */
    #qr-print-output .qr-sticker-double {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: 27mm !important;
        gap: 1mm !important;
        padding: 1.5mm !important;
    }

    #qr-print-output .qr-sticker-double .qr-mini-label {
        width: auto !important;
        height: 27mm !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: 16mm minmax(0, 1fr) !important;
        place-items: center !important;
        align-content: start !important;
        gap: 0.5mm !important;
        padding: 0 !important;
        text-align: center !important;
    }

    #qr-print-output .qr-sticker-double .qr-mini-label:first-child {
        border-right: 0.25mm dashed #aaa !important;
        padding-right: 0.5mm !important;
    }

    #qr-print-output .qr-sticker-double .qr-mini-code {
        grid-row: 1 !important;
        width: 15.5mm !important;
        height: 15.5mm !important;
        display: grid !important;
        place-items: center !important;
        overflow: hidden !important;
    }

    #qr-print-output .qr-sticker-double .qr-mini-code canvas,
    #qr-print-output .qr-sticker-double .qr-mini-code img {
        display: block !important;
        width: 15.5mm !important;
        height: 15.5mm !important;
        max-width: 15.5mm !important;
        max-height: 15.5mm !important;
        margin: 0 !important;
    }

    #qr-print-output .qr-sticker-double .qr-mini-text {
        grid-row: 2 !important;
        align-self: start !important;
        width: 21.5mm !important;
        max-width: 21.5mm !important;
        min-width: 0 !important;
        margin: 0 !important;
        text-align: center !important;
        overflow: hidden !important;
    }

    #qr-print-output .qr-sticker-double .qr-mini-text b {
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        font-size: 5.4pt !important;
        line-height: 1.02 !important;
        max-height: 5.7mm !important;
        margin: 0 !important;
    }

    #qr-print-output .qr-sticker-double .qr-mini-text small {
        display: block !important;
        margin-top: 0.35mm !important;
        white-space: nowrap !important;
        font-size: 4.4pt !important;
        line-height: 1 !important;
    }
}