/* ===== CSS from itemid_beta_0_3_clean_reupload.zip ===== */

:root{
  --bg:#f5f7fb;--bg2:#eef4ff;--card:#fff;--text:#101828;--muted:#667085;--line:#d9e1ec;
  --blue:#2563eb;--blue-dark:#1d4ed8;--blue2:#eff4ff;--green:#12b76a;--amber:#f79009;--danger:#b42318;
  --shadow:0 18px 45px rgba(15,23,42,.08);--radius:18px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:linear-gradient(180deg,#f8fbff 0%,var(--bg) 260px);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Arial,sans-serif;font-size:15px;line-height:1.5}a{color:var(--blue-dark);text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3{letter-spacing:-.04em;line-height:1.15;margin:0 0 10px}h1{font-size:34px}h2{font-size:28px}h3{font-size:19px}.muted{color:var(--muted)}.big{font-size:17px;line-height:1.65}.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:22px;padding:14px 24px;background:rgba(255,255,255,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}.brand{display:inline-flex;gap:10px;align-items:center;color:var(--text);font-weight:900;font-size:21px}.brand:hover{text-decoration:none}.brand-mark{width:34px;height:34px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;background:#111827;color:white;font-size:13px;letter-spacing:-.04em}.main-nav{display:flex;align-items:center;gap:4px;flex:1;flex-wrap:wrap}.main-nav a{color:#344054;padding:9px 10px;border-radius:10px;font-weight:700;font-size:14px}.main-nav a:hover{background:var(--blue2);text-decoration:none}.top-actions{display:flex;align-items:center;gap:12px}.muted-link{color:var(--muted);font-weight:700}.page{max-width:1180px;margin:0 auto;padding:28px 22px 60px}.site-footer{max-width:1180px;margin:0 auto;padding:22px;color:var(--muted);border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px}.page-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin:0 0 20px}.page-head p{margin:4px 0 0}.card{background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:18px;box-shadow:0 10px 30px rgba(15,23,42,.045)}.hero{display:grid;grid-template-columns:2fr 1fr;gap:18px;margin-bottom:18px}.hero .card:first-child{background:linear-gradient(135deg,#fff 0%,#f4f7ff 100%)}.grid{display:grid;gap:18px}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.cards4{grid-template-columns:repeat(4,minmax(0,1fr))}.cards4 .card{margin:0}.cards4 h2{font-size:34px;margin-top:6px}.wide{max-width:920px}.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;background:var(--blue);color:white;padding:11px 16px;font-weight:900;cursor:pointer;text-decoration:none;box-shadow:0 8px 18px rgba(37,99,235,.18);font:inherit}.btn:hover{text-decoration:none;background:var(--blue-dark)}.btn.secondary{background:#e8efff;color:var(--blue-dark);box-shadow:none}.btn.secondary:hover{background:#dbe7ff}.btn.ghost{background:white;color:#344054;border:1px solid var(--line);box-shadow:none}.btn.small{padding:8px 12px;border-radius:10px;font-size:14px}.scan-link{background:#111827;color:#fff!important}.form{display:grid;gap:15px}.form label{display:grid;gap:7px;color:#344054;font-size:14px;font-weight:700}.form input,.form select,.form textarea,.searchbar input,.inline-form input,.inline-form select{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px 13px;background:white;color:var(--text);font:inherit;outline:none}.form input:focus,.form select:focus,.form textarea:focus,.searchbar input:focus,.inline-form input:focus,.inline-form select:focus{border-color:#9db7ff;box-shadow:0 0 0 4px rgba(37,99,235,.10)}.searchbar,.inline-form{display:flex;gap:10px;margin-bottom:18px}.table-wrap{overflow:auto;padding:0}table{width:100%;border-collapse:collapse;min-width:720px}th,td{text-align:left;border-bottom:1px solid var(--line);padding:14px 16px;vertical-align:top}th{font-size:12px;color:var(--muted);font-weight:900;text-transform:uppercase;letter-spacing:.05em;background:#fbfcff}tr:hover td{background:#fbfdff}.pill{display:inline-flex;background:var(--blue2);color:var(--blue-dark);border-radius:999px;padding:4px 9px;font-size:13px;font-weight:900}.pill.low,.pill.Empty,.pill.Missing{background:#fff4ed;color:#b54708}.visual{max-width:100%;border-radius:14px;border:1px solid var(--line);box-shadow:0 8px 20px rgba(15,23,42,.06)}.qr-box{display:inline-block;background:white;padding:12px;border:1px solid var(--line);border-radius:14px}.code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:900;background:#f2f4f7;border:1px solid #e4e7ec;border-radius:10px;padding:4px 8px;display:inline-block}.labels{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.label{background:#fff;border:1px solid #111;border-radius:6px;text-align:center;padding:11px;break-inside:avoid}.label .qr{display:inline-block}.label-toolbar{margin:12px 0}.check{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center;gap:8px!important}.alert{background:#fef3f2;color:var(--danger);border:1px solid #fecdca;border-radius:12px;padding:11px 13px;font-weight:700}.notice{background:#eff8ff;color:#175cd3;border:1px solid #b2ddff;border-radius:12px;padding:11px 13px;font-weight:700}.empty{padding:24px;border:1px dashed var(--line);border-radius:14px;background:#fbfcff;color:var(--muted)}
/* Auth */.auth-body{min-height:100vh!important;display:grid!important;place-items:center!important;padding:28px;background:radial-gradient(circle at top left,rgba(37,99,235,.16),transparent 34%),radial-gradient(circle at bottom right,rgba(16,185,129,.10),transparent 28%),var(--bg)}.auth-shell{width:min(980px,100%);display:grid;grid-template-columns:1.15fr .85fr;gap:18px;align-items:stretch}.auth-panel{background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow)}.auth-copy{padding:36px;display:flex;flex-direction:column;justify-content:center;min-height:440px}.logo-mark{width:54px;height:54px;border-radius:16px;background:#111827;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;letter-spacing:-.04em;margin-bottom:22px}.eyebrow{font-weight:900;color:var(--blue);letter-spacing:.08em;text-transform:uppercase;font-size:13px;margin:0 0 10px}.auth-copy h1{font-size:46px;letter-spacing:-.055em;line-height:1.02;margin:0 0 16px;max-width:620px}.auth-copy .big{font-size:17px;line-height:1.6;max-width:600px;margin:0 0 22px}.feature-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}.feature-list span{background:var(--blue2);color:var(--blue-dark);border:1px solid #dbe7ff;border-radius:999px;padding:8px 11px;font-weight:900;font-size:13px}.auth-card{width:auto!important;padding:30px;display:flex;flex-direction:column;justify-content:center}.auth-card h2{font-size:30px;margin:0 0 8px}.auth-card .muted{margin-top:0;margin-bottom:20px}.auth-card input{height:46px}.subtle-link{font-size:14px;font-weight:800;justify-self:start}.auth-card .actions{margin-top:2px}
@media(max-width:900px){.topbar{align-items:flex-start;flex-direction:column}.top-actions{width:100%;justify-content:space-between}.hero,.grid.two,.grid.cards4{grid-template-columns:1fr}.page-head{display:block}.searchbar,.inline-form{flex-direction:column}.labels{grid-template-columns:repeat(2,1fr)}.auth-shell{grid-template-columns:1fr}.auth-copy{min-height:0;padding:24px}.auth-copy h1{font-size:34px}.auth-card{padding:24px}.site-footer{flex-direction:column}}@media print{body{background:white}.topbar,.page-head,.card:not(.table-wrap),.label-toolbar,.site-footer{display:none!important}.page{padding:0}.labels{grid-template-columns:repeat(4,1fr);gap:8px}.label{page-break-inside:avoid;box-shadow:none}}

/* ItemID QR/template patch */
.section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}.section-head h2{font-size:22px;margin:0 0 4px}.field-builder{display:grid;gap:14px;border:1px solid var(--line);border-radius:16px;padding:16px;background:#fbfcff}.quick-fields{display:flex;gap:8px;flex-wrap:wrap}.field-chip{border:1px solid #dbe7ff;background:#eff4ff;color:#1d4ed8;border-radius:999px;padding:7px 10px;font-weight:800;cursor:pointer}.field-chip:hover{background:#dbe7ff}.fields-list{display:grid;gap:10px}.field-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}.label-sheet{display:grid;grid-template-columns:repeat(var(--label-columns,4),minmax(0,1fr));gap:12px}.print-label-card{background:#fff;border:1px solid #111827;border-radius:10px;text-align:center;padding:12px;break-inside:avoid;min-height:calc(var(--qr-size,120px) + 62px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px}.print-label-card .qr{display:inline-flex;align-items:center;justify-content:center}.print-label-card .print-code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:15px;font-weight:900;letter-spacing:.06em}.print-label-card .print-name{font-size:12px;font-weight:800;color:#344054;line-height:1.25}.row-actions{display:flex;gap:12px;white-space:nowrap}.qr-size-form select{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px 13px;background:white;color:var(--text);font:inherit;outline:none}@media(max-width:700px){.field-row{grid-template-columns:1fr}.label-sheet{grid-template-columns:repeat(2,minmax(0,1fr))}.row-actions{display:grid;gap:6px}}

/* ItemID workflow polish patch */
.mini-action{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;border-radius:10px;padding:7px 10px;font-weight:900;color:#1d4ed8;text-decoration:none;white-space:nowrap}.mini-action:hover{background:#eff4ff;text-decoration:none}.pretty-fields{gap:18px}.pretty-list{gap:12px}.pretty-row{grid-template-columns:1fr 42px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px}.pretty-row input{border:0!important;box-shadow:none!important;padding:9px 10px!important}.icon-button{width:34px;height:34px;border:0;border-radius:10px;background:#f2f4f7;color:#344054;font-size:22px;line-height:1;cursor:pointer;font-weight:900}.icon-button:hover{background:#fee4e2;color:#b42318}.community-check{align-self:end;background:#fbfcff;border:1px solid var(--line);border-radius:14px;padding:12px}.community-check span{display:grid;gap:2px}.community-check small{color:var(--muted);font-weight:600}.field-chip{font-size:13px}.print-label-card{min-height:calc(var(--qr-mm,35mm) + 22mm);padding:8mm 4mm}.print-label-card .print-name{max-width:100%;overflow-wrap:anywhere}.custom-prefix-row{display:none}.item-hero{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.item-hero h2{font-size:24px;margin:4px 0 0}.activity-line{border-bottom:1px solid var(--line);padding:0 0 10px;margin:0 0 10px}.qr-size-form{margin-top:14px;display:flex;gap:10px;align-items:end;flex-wrap:wrap}.qr-size-form label{min-width:190px}.add-item-flow{gap:20px}.flow-step{display:flex;gap:14px;align-items:flex-start;border-top:1px solid var(--line);padding-top:18px}.flow-step:first-of-type{border-top:0;padding-top:0}.flow-step h2{font-size:22px;margin:0 0 4px}.step-badge{width:34px;height:34px;border-radius:999px;background:#111827;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:900;flex:0 0 auto}.field-as-card{border:1px dashed #b7c5df;border-radius:14px;padding:13px;background:#fbfcff}.field-as-card p{margin:4px 0 10px}.code-pill{display:inline-flex;background:#f2f4f7;border:1px solid #e4e7ec;border-radius:10px;padding:5px 9px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:900}@media(max-width:800px){.item-hero{grid-template-columns:1fr}.pretty-row{grid-template-columns:1fr 42px}.qr-size-form{display:grid}.flow-step{display:grid}.field-as-card .btn{width:100%}}


/* ItemID workflow patch 2 */
.beta-badge{display:inline-flex;align-items:center;border:1px solid #c7d7fe;background:#eff4ff;color:#1d4ed8;border-radius:999px;padding:2px 7px;font-size:11px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;line-height:1.4}.template-create-card{display:flex;align-items:center;justify-content:space-between;gap:14px}.template-create-card p{margin:3px 0 0}.compact-check{width:auto!important;display:flex!important;grid-template-columns:auto 1fr!important;align-items:center!important;gap:8px!important;min-width:170px}.compact-check input{width:auto!important}.qr-box canvas,.qr-box img{display:block!important;max-width:100%!important;max-height:100%!important}.print-label-card{overflow:hidden}.print-label-card .dynamic-qr canvas,.print-label-card .dynamic-qr img{display:block!important}.print-label-card .print-code,.print-label-card .print-name{max-width:100%;overflow-wrap:anywhere}.single-print-label{overflow:hidden}@media(max-width:800px){.template-create-card{display:grid}.compact-check{min-width:0}}

/* Items table action-cell border fix */
td.row-actions,
th.row-actions {
    display: table-cell !important;
    white-space: nowrap;
    vertical-align: middle;
    border-bottom: 1px solid var(--line) !important;
}

td.row-actions {
    min-width: 230px;
}

td.row-actions .mini-action {
    margin-right: 8px;
    margin-bottom: 0;
}

td.row-actions .mini-action:last-child {
    margin-right: 0;
}

tr:hover td.row-actions {
    background: #fbfdff;
}

@media (max-width: 760px) {
    td.row-actions {
        min-width: 170px;
    }

    td.row-actions .mini-action {
        display: flex;
        width: 100%;
        margin-right: 0;
        margin-bottom: 6px;
    }

    td.row-actions .mini-action:last-child {
        margin-bottom: 0;
    }
}

/* Stable Beta 0.4 additions */
.btn.danger,
.btn.danger.ghost {
  color: #b42318 !important;
  border-color: #fecdca !important;
  background: #fff !important;
  box-shadow: none !important;
}
.btn.danger:hover,
.btn.danger.ghost:hover {
  background: #fef3f2 !important;
  text-decoration: none;
}
.mini-action.danger {
  color: #b42318 !important;
  border-color: #fecdca !important;
  background: #fff !important;
}
.export-card {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.export-card:hover {
  transform: translateY(-2px);
  text-decoration: none;
  border-color: #b8c7e6;
  box-shadow: 0 18px 42px rgba(15,23,42,.09);
}
.site-footer a { color: inherit; font-weight: 800; }

/* Stable Beta 0.4 template/item field builder polish */
.item-template-field-row {
    display: grid;
    grid-template-columns: minmax(150px, .35fr) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 12px;
    border: 1px solid #d8e0ee;
    border-radius: 14px;
    background: #ffffff;
    margin-bottom: 10px;
}

.template-field-input-wrap {
    display: grid;
    gap: 6px;
}

.template-field-input-wrap input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    margin: 8px 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.field-unit-hint {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 9px;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 900;
}

.small {
    font-size: 12px;
}

@media (max-width: 700px) {
    .item-template-field-row {
        grid-template-columns: 1fr;
    }
}

/* --- Profile/preferences patch CSS --- */

/* Profile and preferences */
.profile-settings-row {
    display: grid;
    grid-template-columns: 112px 1fr;
    gap: 22px;
    align-items: center;
    margin-bottom: 20px;
}

.profile-settings-avatar {
    width: 96px;
    height: 96px;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid #d8e0ee;
    background: #eef4ff;
    color: #1d4ed8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    font-weight: 900;
}

.profile-settings-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.checkbox-line {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    font-weight: 800;
}

.checkbox-line input,
.checkbox-card input {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.checkbox-card {
    min-height: 70px;
    border: 1px solid #d8e0ee;
    border-radius: 14px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}

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

.checkbox-card small {
    margin-top: 4px;
    color: #64748b;
}

@media (max-width: 650px) {
    .profile-settings-row {
        grid-template-columns: 1fr;
    }
}



/* ===== CSS from itemid_qr_nav_rotate_fix_patch.zip ===== */

:root{
  --bg:#f5f7fb;--bg2:#eef4ff;--card:#fff;--text:#101828;--muted:#667085;--line:#d9e1ec;
  --blue:#2563eb;--blue-dark:#1d4ed8;--blue2:#eff4ff;--green:#12b76a;--amber:#f79009;--danger:#b42318;
  --shadow:0 18px 45px rgba(15,23,42,.08);--radius:18px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:linear-gradient(180deg,#f8fbff 0%,var(--bg) 260px);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Arial,sans-serif;font-size:15px;line-height:1.5}a{color:var(--blue-dark);text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3{letter-spacing:-.04em;line-height:1.15;margin:0 0 10px}h1{font-size:34px}h2{font-size:28px}h3{font-size:19px}.muted{color:var(--muted)}.big{font-size:17px;line-height:1.65}.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:22px;padding:14px 24px;background:rgba(255,255,255,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}.brand{display:inline-flex;gap:10px;align-items:center;color:var(--text);font-weight:900;font-size:21px}.brand:hover{text-decoration:none}.brand-mark{width:34px;height:34px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;background:#111827;color:white;font-size:13px;letter-spacing:-.04em}.main-nav{display:flex;align-items:center;gap:4px;flex:1;flex-wrap:wrap}.main-nav a{color:#344054;padding:9px 10px;border-radius:10px;font-weight:700;font-size:14px}.main-nav a:hover{background:var(--blue2);text-decoration:none}.top-actions{display:flex;align-items:center;gap:12px}.muted-link{color:var(--muted);font-weight:700}.page{max-width:1180px;margin:0 auto;padding:28px 22px 60px}.site-footer{max-width:1180px;margin:0 auto;padding:22px;color:var(--muted);border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px}.page-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin:0 0 20px}.page-head p{margin:4px 0 0}.card{background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:18px;box-shadow:0 10px 30px rgba(15,23,42,.045)}.hero{display:grid;grid-template-columns:2fr 1fr;gap:18px;margin-bottom:18px}.hero .card:first-child{background:linear-gradient(135deg,#fff 0%,#f4f7ff 100%)}.grid{display:grid;gap:18px}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.cards4{grid-template-columns:repeat(4,minmax(0,1fr))}.cards4 .card{margin:0}.cards4 h2{font-size:34px;margin-top:6px}.wide{max-width:920px}.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;background:var(--blue);color:white;padding:11px 16px;font-weight:900;cursor:pointer;text-decoration:none;box-shadow:0 8px 18px rgba(37,99,235,.18);font:inherit}.btn:hover{text-decoration:none;background:var(--blue-dark)}.btn.secondary{background:#e8efff;color:var(--blue-dark);box-shadow:none}.btn.secondary:hover{background:#dbe7ff}.btn.ghost{background:white;color:#344054;border:1px solid var(--line);box-shadow:none}.btn.small{padding:8px 12px;border-radius:10px;font-size:14px}.scan-link{background:#111827;color:#fff!important}.form{display:grid;gap:15px}.form label{display:grid;gap:7px;color:#344054;font-size:14px;font-weight:700}.form input,.form select,.form textarea,.searchbar input,.inline-form input,.inline-form select{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px 13px;background:white;color:var(--text);font:inherit;outline:none}.form input:focus,.form select:focus,.form textarea:focus,.searchbar input:focus,.inline-form input:focus,.inline-form select:focus{border-color:#9db7ff;box-shadow:0 0 0 4px rgba(37,99,235,.10)}.searchbar,.inline-form{display:flex;gap:10px;margin-bottom:18px}.table-wrap{overflow:auto;padding:0}table{width:100%;border-collapse:collapse;min-width:720px}th,td{text-align:left;border-bottom:1px solid var(--line);padding:14px 16px;vertical-align:top}th{font-size:12px;color:var(--muted);font-weight:900;text-transform:uppercase;letter-spacing:.05em;background:#fbfcff}tr:hover td{background:#fbfdff}.pill{display:inline-flex;background:var(--blue2);color:var(--blue-dark);border-radius:999px;padding:4px 9px;font-size:13px;font-weight:900}.pill.low,.pill.Empty,.pill.Missing{background:#fff4ed;color:#b54708}.visual{max-width:100%;border-radius:14px;border:1px solid var(--line);box-shadow:0 8px 20px rgba(15,23,42,.06)}.qr-box{display:inline-block;background:white;padding:12px;border:1px solid var(--line);border-radius:14px}.code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:900;background:#f2f4f7;border:1px solid #e4e7ec;border-radius:10px;padding:4px 8px;display:inline-block}.labels{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.label{background:#fff;border:1px solid #111;border-radius:6px;text-align:center;padding:11px;break-inside:avoid}.label .qr{display:inline-block}.label-toolbar{margin:12px 0}.check{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center;gap:8px!important}.alert{background:#fef3f2;color:var(--danger);border:1px solid #fecdca;border-radius:12px;padding:11px 13px;font-weight:700}.notice{background:#eff8ff;color:#175cd3;border:1px solid #b2ddff;border-radius:12px;padding:11px 13px;font-weight:700}.empty{padding:24px;border:1px dashed var(--line);border-radius:14px;background:#fbfcff;color:var(--muted)}
/* Auth */.auth-body{min-height:100vh!important;display:grid!important;place-items:center!important;padding:28px;background:radial-gradient(circle at top left,rgba(37,99,235,.16),transparent 34%),radial-gradient(circle at bottom right,rgba(16,185,129,.10),transparent 28%),var(--bg)}.auth-shell{width:min(980px,100%);display:grid;grid-template-columns:1.15fr .85fr;gap:18px;align-items:stretch}.auth-panel{background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow)}.auth-copy{padding:36px;display:flex;flex-direction:column;justify-content:center;min-height:440px}.logo-mark{width:54px;height:54px;border-radius:16px;background:#111827;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;letter-spacing:-.04em;margin-bottom:22px}.eyebrow{font-weight:900;color:var(--blue);letter-spacing:.08em;text-transform:uppercase;font-size:13px;margin:0 0 10px}.auth-copy h1{font-size:46px;letter-spacing:-.055em;line-height:1.02;margin:0 0 16px;max-width:620px}.auth-copy .big{font-size:17px;line-height:1.6;max-width:600px;margin:0 0 22px}.feature-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}.feature-list span{background:var(--blue2);color:var(--blue-dark);border:1px solid #dbe7ff;border-radius:999px;padding:8px 11px;font-weight:900;font-size:13px}.auth-card{width:auto!important;padding:30px;display:flex;flex-direction:column;justify-content:center}.auth-card h2{font-size:30px;margin:0 0 8px}.auth-card .muted{margin-top:0;margin-bottom:20px}.auth-card input{height:46px}.subtle-link{font-size:14px;font-weight:800;justify-self:start}.auth-card .actions{margin-top:2px}
@media(max-width:900px){.topbar{align-items:flex-start;flex-direction:column}.top-actions{width:100%;justify-content:space-between}.hero,.grid.two,.grid.cards4{grid-template-columns:1fr}.page-head{display:block}.searchbar,.inline-form{flex-direction:column}.labels{grid-template-columns:repeat(2,1fr)}.auth-shell{grid-template-columns:1fr}.auth-copy{min-height:0;padding:24px}.auth-copy h1{font-size:34px}.auth-card{padding:24px}.site-footer{flex-direction:column}}@media print{body{background:white}.topbar,.page-head,.card:not(.table-wrap),.label-toolbar,.site-footer{display:none!important}.page{padding:0}.labels{grid-template-columns:repeat(4,1fr);gap:8px}.label{page-break-inside:avoid;box-shadow:none}}

/* ItemID QR/template patch */
.section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}.section-head h2{font-size:22px;margin:0 0 4px}.field-builder{display:grid;gap:14px;border:1px solid var(--line);border-radius:16px;padding:16px;background:#fbfcff}.quick-fields{display:flex;gap:8px;flex-wrap:wrap}.field-chip{border:1px solid #dbe7ff;background:#eff4ff;color:#1d4ed8;border-radius:999px;padding:7px 10px;font-weight:800;cursor:pointer}.field-chip:hover{background:#dbe7ff}.fields-list{display:grid;gap:10px}.field-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}.label-sheet{display:grid;grid-template-columns:repeat(var(--label-columns,4),minmax(0,1fr));gap:12px}.print-label-card{background:#fff;border:1px solid #111827;border-radius:10px;text-align:center;padding:12px;break-inside:avoid;min-height:calc(var(--qr-size,120px) + 62px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px}.print-label-card .qr{display:inline-flex;align-items:center;justify-content:center}.print-label-card .print-code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:15px;font-weight:900;letter-spacing:.06em}.print-label-card .print-name{font-size:12px;font-weight:800;color:#344054;line-height:1.25}.row-actions{display:flex;gap:12px;white-space:nowrap}.qr-size-form select{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px 13px;background:white;color:var(--text);font:inherit;outline:none}@media(max-width:700px){.field-row{grid-template-columns:1fr}.label-sheet{grid-template-columns:repeat(2,minmax(0,1fr))}.row-actions{display:grid;gap:6px}}

/* ItemID workflow polish patch */
.mini-action{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;border-radius:10px;padding:7px 10px;font-weight:900;color:#1d4ed8;text-decoration:none;white-space:nowrap}.mini-action:hover{background:#eff4ff;text-decoration:none}.pretty-fields{gap:18px}.pretty-list{gap:12px}.pretty-row{grid-template-columns:1fr 42px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px}.pretty-row input{border:0!important;box-shadow:none!important;padding:9px 10px!important}.icon-button{width:34px;height:34px;border:0;border-radius:10px;background:#f2f4f7;color:#344054;font-size:22px;line-height:1;cursor:pointer;font-weight:900}.icon-button:hover{background:#fee4e2;color:#b42318}.community-check{align-self:end;background:#fbfcff;border:1px solid var(--line);border-radius:14px;padding:12px}.community-check span{display:grid;gap:2px}.community-check small{color:var(--muted);font-weight:600}.field-chip{font-size:13px}.print-label-card{min-height:calc(var(--qr-mm,35mm) + 22mm);padding:8mm 4mm}.print-label-card .print-name{max-width:100%;overflow-wrap:anywhere}.custom-prefix-row{display:none}.item-hero{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.item-hero h2{font-size:24px;margin:4px 0 0}.activity-line{border-bottom:1px solid var(--line);padding:0 0 10px;margin:0 0 10px}.qr-size-form{margin-top:14px;display:flex;gap:10px;align-items:end;flex-wrap:wrap}.qr-size-form label{min-width:190px}.add-item-flow{gap:20px}.flow-step{display:flex;gap:14px;align-items:flex-start;border-top:1px solid var(--line);padding-top:18px}.flow-step:first-of-type{border-top:0;padding-top:0}.flow-step h2{font-size:22px;margin:0 0 4px}.step-badge{width:34px;height:34px;border-radius:999px;background:#111827;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:900;flex:0 0 auto}.field-as-card{border:1px dashed #b7c5df;border-radius:14px;padding:13px;background:#fbfcff}.field-as-card p{margin:4px 0 10px}.code-pill{display:inline-flex;background:#f2f4f7;border:1px solid #e4e7ec;border-radius:10px;padding:5px 9px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:900}@media(max-width:800px){.item-hero{grid-template-columns:1fr}.pretty-row{grid-template-columns:1fr 42px}.qr-size-form{display:grid}.flow-step{display:grid}.field-as-card .btn{width:100%}}


/* ItemID workflow patch 2 */
.beta-badge{display:inline-flex;align-items:center;border:1px solid #c7d7fe;background:#eff4ff;color:#1d4ed8;border-radius:999px;padding:2px 7px;font-size:11px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;line-height:1.4}.template-create-card{display:flex;align-items:center;justify-content:space-between;gap:14px}.template-create-card p{margin:3px 0 0}.compact-check{width:auto!important;display:flex!important;grid-template-columns:auto 1fr!important;align-items:center!important;gap:8px!important;min-width:170px}.compact-check input{width:auto!important}.qr-box canvas,.qr-box img{display:block!important;max-width:100%!important;max-height:100%!important}.print-label-card{overflow:hidden}.print-label-card .dynamic-qr canvas,.print-label-card .dynamic-qr img{display:block!important}.print-label-card .print-code,.print-label-card .print-name{max-width:100%;overflow-wrap:anywhere}.single-print-label{overflow:hidden}@media(max-width:800px){.template-create-card{display:grid}.compact-check{min-width:0}}

/* Items table action-cell border fix */
td.row-actions,
th.row-actions {
    display: table-cell !important;
    white-space: nowrap;
    vertical-align: middle;
    border-bottom: 1px solid var(--line) !important;
}

td.row-actions {
    min-width: 230px;
}

td.row-actions .mini-action {
    margin-right: 8px;
    margin-bottom: 0;
}

td.row-actions .mini-action:last-child {
    margin-right: 0;
}

tr:hover td.row-actions {
    background: #fbfdff;
}

@media (max-width: 760px) {
    td.row-actions {
        min-width: 170px;
    }

    td.row-actions .mini-action {
        display: flex;
        width: 100%;
        margin-right: 0;
        margin-bottom: 6px;
    }

    td.row-actions .mini-action:last-child {
        margin-bottom: 0;
    }
}

/* Stable Beta 0.4 additions */
.btn.danger,
.btn.danger.ghost {
  color: #b42318 !important;
  border-color: #fecdca !important;
  background: #fff !important;
  box-shadow: none !important;
}
.btn.danger:hover,
.btn.danger.ghost:hover {
  background: #fef3f2 !important;
  text-decoration: none;
}
.mini-action.danger {
  color: #b42318 !important;
  border-color: #fecdca !important;
  background: #fff !important;
}
.export-card {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.export-card:hover {
  transform: translateY(-2px);
  text-decoration: none;
  border-color: #b8c7e6;
  box-shadow: 0 18px 42px rgba(15,23,42,.09);
}
.site-footer a { color: inherit; font-weight: 800; }

/* Stable Beta 0.4 template/item field builder polish */
.item-template-field-row {
    display: grid;
    grid-template-columns: minmax(150px, .35fr) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 12px;
    border: 1px solid #d8e0ee;
    border-radius: 14px;
    background: #ffffff;
    margin-bottom: 10px;
}

.template-field-input-wrap {
    display: grid;
    gap: 6px;
}

.template-field-input-wrap input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    margin: 8px 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.field-unit-hint {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 9px;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 900;
}

.small {
    font-size: 12px;
}

@media (max-width: 700px) {
    .item-template-field-row {
        grid-template-columns: 1fr;
    }
}

/* --- Profile/preferences patch CSS --- */

/* Profile and preferences */
.profile-settings-row {
    display: grid;
    grid-template-columns: 112px 1fr;
    gap: 22px;
    align-items: center;
    margin-bottom: 20px;
}

.profile-settings-avatar {
    width: 96px;
    height: 96px;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid #d8e0ee;
    background: #eef4ff;
    color: #1d4ed8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    font-weight: 900;
}

.profile-settings-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.checkbox-line {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    font-weight: 800;
}

.checkbox-line input,
.checkbox-card input {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.checkbox-card {
    min-height: 70px;
    border: 1px solid #d8e0ee;
    border-radius: 14px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}

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

.checkbox-card small {
    margin-top: 4px;
    color: #64748b;
}

@media (max-width: 650px) {
    .profile-settings-row {
        grid-template-columns: 1fr;
    }
}


/* --- Stable Beta 0.4 theme toggle + dark fix --- */

.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,255,255,.94);
    border-bottom: 1px solid #d8e0ee;
    backdrop-filter: blur(14px);
}

.topbar-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    gap: 22px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #0f172a;
    flex: 0 0 auto;
}

.brand:hover {
    text-decoration: none;
}

.brand-name {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1;
}

.beta-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 19px;
    padding: 0 7px;
    border: 1px solid #b8c7e6;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    white-space: nowrap;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 auto;
    min-width: 0;
}

.main-nav a {
    color: #335075;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
}

.main-nav a:hover {
    color: #2563eb;
    text-decoration: none;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

.scan-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 16px;
    border-radius: 12px;
    background: #111827;
    color: #ffffff !important;
    text-decoration: none;
    font-weight: 800;
    font-size: 14px;
    box-shadow: 0 10px 24px rgba(17, 24, 39, .18);
}

.scan-button:hover {
    text-decoration: none;
}

.profile-menu {
    position: relative;
}

.profile-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 4px 8px 4px 4px;
    border: 1px solid #d8e0ee;
    border-radius: 999px;
    background: #ffffff;
    color: #0f172a;
    text-decoration: none;
    font-weight: 800;
    cursor: pointer;
    max-width: 260px;
}

.profile-avatar {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    object-fit: cover;
    background: #eef4ff;
    color: #1d4ed8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    border: 1px solid #c9d7f2;
    overflow: hidden;
    flex: 0 0 auto;
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-label {
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.profile-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 280px;
    border: 1px solid #d8e0ee;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .16);
    padding: 10px;
    display: none;
}

.profile-menu:hover .profile-dropdown,
.profile-menu:focus-within .profile-dropdown {
    display: block;
}

.profile-dropdown-header {
    padding: 10px;
    border-bottom: 1px solid #edf2f7;
    margin-bottom: 8px;
}

.profile-dropdown-header strong,
.profile-dropdown-header span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-dropdown-header span {
    color: #64748b;
    font-size: 13px;
    margin-top: 2px;
}

.profile-dropdown a {
    display: block;
    padding: 10px;
    border-radius: 12px;
    color: #334155;
    text-decoration: none;
    font-weight: 800;
}

.profile-dropdown a:hover {
    background: #f1f5f9;
    color: #0f172a;
    text-decoration: none;
}

.theme-toggle-form {
    margin: 0;
}

.theme-toggle {
    width: 62px;
    height: 34px;
    border: 1px solid #d8e0ee;
    border-radius: 999px;
    background: #eef4ff;
    position: relative;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    box-shadow: none;
}

.theme-toggle-bulb {
    position: absolute;
    left: 8px;
    font-size: 15px;
    line-height: 1;
    z-index: 2;
    opacity: .8;
}

.theme-toggle-knob {
    position: absolute;
    left: 3px;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 3px 10px rgba(15,23,42,.18);
    transition: transform .16s ease;
}

.theme-toggle.is-dark {
    background: #172554;
    border-color: #2563eb;
}

.theme-toggle.is-dark .theme-toggle-bulb {
    left: 36px;
    opacity: 1;
}

.theme-toggle.is-dark .theme-toggle-knob {
    transform: translateX(28px);
    background: #0f172a;
}

.app-shell {
    max-width: 1240px;
    margin: 0 auto;
    padding: 28px 18px 48px;
}

/* Dark theme variables and hard overrides */
body.theme-dark {
    --bg:#0b1220;
    --bg2:#0f172a;
    --card:#111827;
    --text:#f8fafc;
    --muted:#a8b6ca;
    --line:#334155;
    --blue2:#172554;
    background: #0b1220 !important;
    color: #f8fafc !important;
    color-scheme: dark;
}

body.theme-dark .topbar {
    background: rgba(15, 23, 42, .96) !important;
    border-bottom-color: #334155 !important;
}

body.theme-dark .brand,
body.theme-dark .brand-name,
body.theme-dark .profile-label {
    color: #f8fafc !important;
}

body.theme-dark .beta-badge {
    background: #172554 !important;
    border-color: #2563eb !important;
    color: #bfdbfe !important;
}

body.theme-dark .main-nav a {
    color: #cbd5e1 !important;
}

body.theme-dark .main-nav a:hover {
    background: #1e293b !important;
    color: #ffffff !important;
}

body.theme-dark .profile-trigger,
body.theme-dark .profile-dropdown,
body.theme-dark .card,
body.theme-dark section.card,
body.theme-dark form.card,
body.theme-dark details.card,
body.theme-dark .table-wrap,
body.theme-dark .metric-card,
body.theme-dark .filter-panel,
body.theme-dark .template-field-card,
body.theme-dark .template-field-row,
body.theme-dark .location-summary,
body.theme-dark .auth-panel {
    background: #111827 !important;
    background-color: #111827 !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
    box-shadow: 0 18px 45px rgba(0,0,0,.22) !important;
}

body.theme-dark .hero .card:first-child {
    background: linear-gradient(135deg, #111827 0%, #172033 100%) !important;
}

body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark strong,
body.theme-dark label,
body.theme-dark th,
body.theme-dark td {
    color: #f8fafc !important;
}

body.theme-dark .muted,
body.theme-dark .help,
body.theme-dark small,
body.theme-dark .site-footer,
body.theme-dark .metric-card span {
    color: #a8b6ca !important;
}

body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

body.theme-dark input::placeholder,
body.theme-dark textarea::placeholder {
    color: #74839a !important;
}

body.theme-dark table,
body.theme-dark tbody,
body.theme-dark tr {
    background: #111827 !important;
    color: #f8fafc !important;
}

body.theme-dark thead,
body.theme-dark th {
    background: #0f172a !important;
    color: #cbd5e1 !important;
}

body.theme-dark td {
    background: #111827 !important;
    color: #e5edf8 !important;
    border-color: #334155 !important;
}

body.theme-dark tr:hover td {
    background: #172033 !important;
}

body.theme-dark .code-pill,
body.theme-dark .badge,
body.theme-dark .pill,
body.theme-dark .status-pill,
body.theme-dark .tag,
body.theme-dark .field-unit-hint {
    background: #1e293b !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}

body.theme-dark .btn.secondary,
body.theme-dark .btn.ghost,
body.theme-dark a.btn.secondary,
body.theme-dark a.btn.ghost {
    background: #1e293b !important;
    color: #bfdbfe !important;
    border: 1px solid #334155 !important;
    box-shadow: none !important;
}

body.theme-dark .btn.secondary:hover,
body.theme-dark .btn.ghost:hover {
    background: #26344a !important;
    color: #ffffff !important;
}

body.theme-dark .qr-label-preview,
body.theme-dark .qr-preview,
body.theme-dark .qr-card-preview,
body.theme-dark .print-label,
body.theme-dark .label-card,
body.theme-dark .print-sheet,
body.theme-dark .print-sheet .label,
body.theme-dark canvas,
body.theme-dark .qr-box {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #111827 !important;
    border-color: #111827 !important;
}

/* System preference can be selected in profile, but the top toggle only switches light/dark. */
@media (max-width: 900px) {
    .topbar-inner {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 12px;
    }

    .main-nav {
        order: 3;
        width: 100%;
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .topbar-actions {
        margin-left: auto;
    }

    .profile-label {
        display: none;
    }
}


/* --- Stable Beta 0.4 sun/moon theme toggle positioning --- */

.topbar-inner {
    display: flex !important;
    align-items: center !important;
}

.main-nav {
    justify-content: flex-start;
}

.topbar-actions {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.theme-toggle-form {
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}

.theme-toggle {
    width: 66px !important;
    height: 36px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 999px !important;
    background: #e0f2fe !important;
    position: relative !important;
    cursor: pointer !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

.theme-icon {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1 !important;
    font-size: 15px !important;
    line-height: 1 !important;
    pointer-events: none !important;
}

.theme-icon-sun {
    left: 10px !important;
    color: #f59e0b !important;
    opacity: 1 !important;
}

.theme-icon-moon {
    right: 11px !important;
    color: #64748b !important;
    opacity: .55 !important;
}

.theme-toggle-knob {
    position: absolute !important;
    left: 3px !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    box-shadow: 0 3px 10px rgba(15,23,42,.22) !important;
    transition: transform .16s ease, background .16s ease !important;
    z-index: 2 !important;
}

.theme-toggle.is-dark {
    background: #172554 !important;
    border-color: #2563eb !important;
}

.theme-toggle.is-dark .theme-toggle-knob {
    transform: translateX(30px) !important;
    background: #0f172a !important;
}

.theme-toggle.is-dark .theme-icon-sun {
    opacity: .45 !important;
    color: #94a3b8 !important;
}

.theme-toggle.is-dark .theme-icon-moon {
    opacity: 1 !important;
    color: #dbeafe !important;
}

body.theme-dark .theme-toggle {
    background: #172554 !important;
    border-color: #2563eb !important;
}

@media (max-width: 900px) {
    .topbar-actions {
        margin-left: auto !important;
    }
}


/* --- Stable Beta 0.4 dark mode button/pill fix --- */

/* General white button fix in dark mode */
body.theme-dark button,
body.theme-dark input[type="submit"],
body.theme-dark input[type="button"],
body.theme-dark .btn,
body.theme-dark a.btn {
    border-color: #334155;
}

body.theme-dark .btn:not(.danger):not(.primary),
body.theme-dark a.btn:not(.danger):not(.primary),
body.theme-dark button.btn:not(.danger):not(.primary) {
    background: #1e293b !important;
    color: #dbeafe !important;
    border: 1px solid #334155 !important;
    box-shadow: none !important;
}

body.theme-dark .btn:not(.danger):not(.primary):hover,
body.theme-dark a.btn:not(.danger):not(.primary):hover,
body.theme-dark button.btn:not(.danger):not(.primary):hover {
    background: #26344a !important;
    color: #ffffff !important;
}

/* Keep main action buttons blue */
body.theme-dark .btn:first-child,
body.theme-dark .btn.primary,
body.theme-dark button.btn.primary,
body.theme-dark a.btn.primary {
    background: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
}

/* Delete/danger buttons were showing white. */
body.theme-dark .btn.danger,
body.theme-dark a.btn.danger,
body.theme-dark button.btn.danger,
body.theme-dark .danger,
body.theme-dark a[href*="delete.php"],
body.theme-dark button[name*="delete"],
body.theme-dark button[value*="delete"],
body.theme-dark button[value*="clear_reserved"],
body.theme-dark .delete-button,
body.theme-dark .clear-button {
    background: #3f1d1d !important;
    color: #fecaca !important;
    border: 1px solid #7f1d1d !important;
    box-shadow: none !important;
}

body.theme-dark .btn.danger:hover,
body.theme-dark a.btn.danger:hover,
body.theme-dark button.btn.danger:hover,
body.theme-dark .danger:hover,
body.theme-dark a[href*="delete.php"]:hover,
body.theme-dark button[name*="delete"]:hover,
body.theme-dark button[value*="delete"]:hover,
body.theme-dark button[value*="clear_reserved"]:hover,
body.theme-dark .delete-button:hover,
body.theme-dark .clear-button:hover {
    background: #7f1d1d !important;
    color: #ffffff !important;
}

/* Some pages use plain anchors styled as buttons without btn classes. */
body.theme-dark .row-actions a,
body.theme-dark .table-actions-cell a,
body.theme-dark .actions a,
body.theme-dark .actions button {
    border-color: #334155;
}

body.theme-dark .row-actions a:not(.danger):not([href*="delete.php"]),
body.theme-dark .table-actions-cell a:not(.danger):not([href*="delete.php"]) {
    background: #1e293b !important;
    color: #dbeafe !important;
    border: 1px solid #334155 !important;
}

body.theme-dark .row-actions a:not(.danger):not([href*="delete.php"]):hover,
body.theme-dark .table-actions-cell a:not(.danger):not([href*="delete.php"]):hover {
    background: #26344a !important;
    color: #ffffff !important;
}

/* Code pills were still too pale in some table cells. */
body.theme-dark .code-pill,
body.theme-dark td .code-pill,
body.theme-dark .qr-code-pill,
body.theme-dark .item-id-pill {
    background: #1e293b !important;
    color: #e2e8f0 !important;
    border: 1px solid #334155 !important;
}

/* Search filter detail summary was still white on some browsers. */
body.theme-dark details,
body.theme-dark details summary,
body.theme-dark details.card,
body.theme-dark details.card summary {
    background: #111827 !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

/* Preserve white only where it must be white for QR/print. */
body.theme-dark .qr-label-preview,
body.theme-dark .qr-preview,
body.theme-dark .qr-card-preview,
body.theme-dark .print-label,
body.theme-dark .label-card,
body.theme-dark .print-sheet,
body.theme-dark .print-sheet .label,
body.theme-dark canvas,
body.theme-dark .qr-box {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #111827 !important;
    border-color: #111827 !important;
}

/* Same button fixes for system theme when OS is dark. */
@media (prefers-color-scheme: dark) {
    body.theme-system .btn:not(.danger):not(.primary),
    body.theme-system a.btn:not(.danger):not(.primary),
    body.theme-system button.btn:not(.danger):not(.primary) {
        background: #1e293b !important;
        color: #dbeafe !important;
        border: 1px solid #334155 !important;
        box-shadow: none !important;
    }

    body.theme-system .btn.danger,
    body.theme-system a.btn.danger,
    body.theme-system button.btn.danger,
    body.theme-system .danger,
    body.theme-system a[href*="delete.php"],
    body.theme-system button[name*="delete"],
    body.theme-system button[value*="delete"],
    body.theme-system button[value*="clear_reserved"],
    body.theme-system .delete-button,
    body.theme-system .clear-button {
        background: #3f1d1d !important;
        color: #fecaca !important;
        border: 1px solid #7f1d1d !important;
        box-shadow: none !important;
    }

    body.theme-system .code-pill,
    body.theme-system td .code-pill,
    body.theme-system .qr-code-pill,
    body.theme-system .item-id-pill {
        background: #1e293b !important;
        color: #e2e8f0 !important;
        border: 1px solid #334155 !important;
    }

    body.theme-system details,
    body.theme-system details summary,
    body.theme-system details.card,
    body.theme-system details.card summary {
        background: #111827 !important;
        color: #f8fafc !important;
        border-color: #334155 !important;
    }
}


/* --- Stable Beta 0.4 dark cleanup: toggle, white panels, buttons --- */

/* Hide old/broken theme toggle visuals if old CSS is still cached on a page. */
.theme-toggle,
.theme-toggle-form,
.theme-icon,
.theme-option,
.theme-toggle-bulb {
    display: none !important;
}

/* Clean topbar layout */
.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,255,255,.94);
    border-bottom: 1px solid #d8e0ee;
    backdrop-filter: blur(14px);
}

.topbar-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    gap: 22px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #0f172a;
    flex: 0 0 auto;
}

.brand:hover {
    text-decoration: none;
}

.brand-name {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1;
}

.beta-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 19px;
    padding: 0 7px;
    border: 1px solid #b8c7e6;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    white-space: nowrap;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 auto;
    min-width: 0;
}

.main-nav a {
    color: #335075;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
}

.main-nav a:hover {
    color: #2563eb;
    text-decoration: none;
}

.topbar-actions {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex: 0 0 auto;
}

.scan-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 16px;
    border-radius: 12px;
    background: #111827;
    color: #ffffff !important;
    text-decoration: none;
    font-weight: 800;
    font-size: 14px;
    box-shadow: 0 10px 24px rgba(17,24,39,.18);
}

.scan-button:hover {
    text-decoration: none;
}

.scan-icon {
    font-size: 15px;
    line-height: 1;
}

.profile-menu {
    position: relative;
}

.profile-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 4px 8px 4px 4px;
    border: 1px solid #d8e0ee;
    border-radius: 999px;
    background: #ffffff;
    color: #0f172a;
    text-decoration: none;
    font-weight: 800;
    cursor: pointer;
    max-width: 260px;
}

.profile-avatar {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    border: 1px solid #c9d7f2;
    overflow: hidden;
    flex: 0 0 auto;
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-label {
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.profile-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 280px;
    border: 1px solid #d8e0ee;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(15,23,42,.16);
    padding: 10px;
    display: none;
}

.profile-menu:hover .profile-dropdown,
.profile-menu:focus-within .profile-dropdown {
    display: block;
}

.profile-dropdown-header {
    padding: 10px;
    border-bottom: 1px solid #edf2f7;
    margin-bottom: 8px;
}

.profile-dropdown-header strong,
.profile-dropdown-header span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-dropdown-header span {
    color: #64748b;
    font-size: 13px;
    margin-top: 2px;
}

.profile-dropdown a {
    display: block;
    padding: 10px;
    border-radius: 12px;
    color: #334155;
    text-decoration: none;
    font-weight: 800;
}

.profile-dropdown a:hover {
    background: #f1f5f9;
    color: #0f172a;
    text-decoration: none;
}

/* New independent sun/moon switch */
.mode-switch-form {
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}

.mode-switch {
    width: 72px !important;
    height: 38px !important;
    border-radius: 999px !important;
    border: 1px solid #cbd5e1 !important;
    background: #e0f2fe !important;
    position: relative !important;
    cursor: pointer !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: inline-flex !important;
    align-items: center !important;
    box-shadow: none !important;
}

.mode-track-icon {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    pointer-events: none !important;
}

.mode-track-sun {
    left: 11px !important;
    color: #f59e0b !important;
    opacity: .25 !important;
}

.mode-track-moon {
    right: 12px !important;
    color: #64748b !important;
    opacity: .35 !important;
}

.mode-knob {
    position: absolute !important;
    left: 3px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #f59e0b !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    box-shadow: 0 3px 10px rgba(15,23,42,.22) !important;
    transition: transform .16s ease, background .16s ease, color .16s ease !important;
    z-index: 2 !important;
}

.mode-switch.mode-dark {
    background: #172554 !important;
    border-color: #2563eb !important;
}

.mode-switch.mode-dark .mode-knob {
    transform: translateX(34px) !important;
    background: #0f172a !important;
    color: #dbeafe !important;
}

.mode-switch.mode-dark .mode-track-sun {
    color: #94a3b8 !important;
    opacity: .35 !important;
}

.mode-switch.mode-dark .mode-track-moon {
    opacity: .22 !important;
}

/* Dark theme core */
body.theme-dark {
    --bg:#0b1220;
    --bg2:#0f172a;
    --card:#111827;
    --text:#f8fafc;
    --muted:#a8b6ca;
    --line:#334155;
    --blue2:#172554;
    background:#0b1220 !important;
    color:#f8fafc !important;
    color-scheme: dark;
}

body.theme-dark .topbar {
    background: rgba(15,23,42,.96) !important;
    border-bottom-color: #334155 !important;
}

body.theme-dark .brand,
body.theme-dark .brand-name,
body.theme-dark .profile-label {
    color:#f8fafc !important;
}

body.theme-dark .beta-badge {
    background:#172554 !important;
    border-color:#2563eb !important;
    color:#bfdbfe !important;
}

body.theme-dark .main-nav a {
    color:#cbd5e1 !important;
}

body.theme-dark .main-nav a:hover {
    background:#1e293b !important;
    color:#ffffff !important;
}

body.theme-dark .scan-button {
    background:#2563eb !important;
    color:#ffffff !important;
}

body.theme-dark .profile-trigger,
body.theme-dark .profile-dropdown {
    background:#111827 !important;
    border-color:#334155 !important;
    color:#f8fafc !important;
}

body.theme-dark .profile-dropdown-header {
    border-bottom-color:#334155 !important;
}

body.theme-dark .profile-dropdown-header span {
    color:#94a3b8 !important;
}

body.theme-dark .profile-dropdown a {
    color:#cbd5e1 !important;
}

body.theme-dark .profile-dropdown a:hover {
    background:#1e293b !important;
    color:#ffffff !important;
}

/* Kill the stubborn white panels seen in Items/Add Item/Templates/Made QR codes */
body.theme-dark .card,
body.theme-dark section.card,
body.theme-dark form.card,
body.theme-dark details.card,
body.theme-dark .table-wrap,
body.theme-dark .items-filter-panel,
body.theme-dark .items-filter-panel[open],
body.theme-dark .items-filter-panel summary,
body.theme-dark .field-as-card,
body.theme-dark .field-as-card.template-create-card,
body.theme-dark .template-fields-panel,
body.theme-dark .template-field-builder,
body.theme-dark .template-share-card,
body.theme-dark .template-preset,
body.theme-dark .template-field-row,
body.theme-dark .template-field-row-main,
body.theme-dark .template-field-row-extra,
body.theme-dark .template-options-wrap,
body.theme-dark .template-required,
body.theme-dark .template-create-card,
body.theme-dark .location-summary,
body.theme-dark .scanner-box,
body.theme-dark .notice:not(.print-label):not(.label-card),
body.theme-dark .alert,
body.theme-dark .stat-card,
body.theme-dark .metric-card {
    background:#111827 !important;
    background-color:#111827 !important;
    color:#f8fafc !important;
    border-color:#334155 !important;
    box-shadow:0 18px 45px rgba(0,0,0,.22) !important;
}

body.theme-dark .hero .card:first-child {
    background:linear-gradient(135deg,#111827 0%,#172033 100%) !important;
}

body.theme-dark .items-filter-panel *,
body.theme-dark .template-field-builder *,
body.theme-dark .template-share-card *,
body.theme-dark .template-preset *,
body.theme-dark .field-as-card *,
body.theme-dark .template-fields-panel *,
body.theme-dark .card *,
body.theme-dark .table-wrap * {
    color: inherit;
}

body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark strong,
body.theme-dark label,
body.theme-dark th,
body.theme-dark td,
body.theme-dark summary,
body.theme-dark .section-head,
body.theme-dark .page-head {
    color:#f8fafc !important;
}

body.theme-dark .muted,
body.theme-dark .help,
body.theme-dark .hint,
body.theme-dark small,
body.theme-dark .template-help,
body.theme-dark .template-field-hint,
body.theme-dark .site-footer,
body.theme-dark .items-filter-grid label {
    color:#a8b6ca !important;
}

body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea,
body.theme-dark .items-search-row input,
body.theme-dark .items-filter-grid select,
body.theme-dark .template-field-row input,
body.theme-dark .template-field-row select {
    background:#0f172a !important;
    border-color:#334155 !important;
    color:#f8fafc !important;
}

body.theme-dark input::placeholder,
body.theme-dark textarea::placeholder {
    color:#74839a !important;
}

body.theme-dark table,
body.theme-dark tbody,
body.theme-dark tr {
    background:#111827 !important;
    color:#f8fafc !important;
}

body.theme-dark thead,
body.theme-dark th {
    background:#0f172a !important;
    color:#cbd5e1 !important;
}

body.theme-dark td {
    background:#111827 !important;
    color:#e5edf8 !important;
    border-color:#334155 !important;
}

body.theme-dark tr:hover td {
    background:#172033 !important;
}

body.theme-dark .code-pill,
body.theme-dark td .code-pill,
body.theme-dark .qr-code-pill,
body.theme-dark .item-id-pill,
body.theme-dark .badge,
body.theme-dark .pill,
body.theme-dark .status-pill,
body.theme-dark .tag,
body.theme-dark .field-unit-hint {
    background:#1e293b !important;
    color:#e2e8f0 !important;
    border:1px solid #334155 !important;
}

/* Buttons, including delete buttons that were staying white */
body.theme-dark .btn,
body.theme-dark a.btn,
body.theme-dark button.btn,
body.theme-dark .row-actions a,
body.theme-dark .table-actions-cell a,
body.theme-dark .actions a,
body.theme-dark .actions button {
    background:#1e293b !important;
    color:#dbeafe !important;
    border:1px solid #334155 !important;
    box-shadow:none !important;
}

body.theme-dark .btn:hover,
body.theme-dark a.btn:hover,
body.theme-dark button.btn:hover,
body.theme-dark .row-actions a:hover,
body.theme-dark .table-actions-cell a:hover,
body.theme-dark .actions a:hover,
body.theme-dark .actions button:hover {
    background:#26344a !important;
    color:#ffffff !important;
}

body.theme-dark .btn.danger,
body.theme-dark a.btn.danger,
body.theme-dark button.btn.danger,
body.theme-dark a[href*="delete.php"],
body.theme-dark button[name*="delete"],
body.theme-dark button[value*="delete"],
body.theme-dark button[value*="clear_reserved"],
body.theme-dark .delete-button,
body.theme-dark .clear-button {
    background:#3f1d1d !important;
    color:#fecaca !important;
    border:1px solid #7f1d1d !important;
}

body.theme-dark .btn.danger:hover,
body.theme-dark a.btn.danger:hover,
body.theme-dark button.btn.danger:hover,
body.theme-dark a[href*="delete.php"]:hover,
body.theme-dark button[name*="delete"]:hover,
body.theme-dark button[value*="delete"]:hover,
body.theme-dark button[value*="clear_reserved"]:hover {
    background:#7f1d1d !important;
    color:#ffffff !important;
}

/* Primary actions stay blue */
body.theme-dark .btn.primary,
body.theme-dark a.btn.primary,
body.theme-dark .actions > .btn:first-child:not(.danger),
body.theme-dark .page-head .btn:last-child:not(.danger) {
    background:#2563eb !important;
    color:#ffffff !important;
    border-color:#2563eb !important;
}

/* QR and print surfaces stay white deliberately */
body.theme-dark .qr-label-preview,
body.theme-dark .qr-preview,
body.theme-dark .qr-card-preview,
body.theme-dark .print-label,
body.theme-dark .label-card,
body.theme-dark .print-sheet,
body.theme-dark .print-sheet .label,
body.theme-dark canvas,
body.theme-dark .qr-box {
    background:#ffffff !important;
    background-color:#ffffff !important;
    color:#111827 !important;
    border-color:#111827 !important;
}

@media (max-width:900px) {
    .topbar-inner {
        align-items:flex-start;
        flex-wrap:wrap;
        gap:12px;
    }

    .main-nav {
        order:3;
        width:100%;
        overflow-x:auto;
        padding-bottom:4px;
    }

    .topbar-actions {
        margin-left:auto !important;
    }

    .profile-label {
        display:none;
    }
}


/* --- Stable Beta 0.4 profile dropdown hover bridge + demo link polish --- */

.profile-menu {
    position: relative !important;
}

.profile-dropdown {
    top: calc(100% + 6px) !important;
    right: 0 !important;
}

/* Invisible bridge stops the dropdown disappearing while moving from profile button to menu. */
.profile-menu::after {
    content: '' !important;
    position: absolute !important;
    left: -12px !important;
    right: -12px !important;
    top: 100% !important;
    height: 14px !important;
    display: block !important;
    background: transparent !important;
    pointer-events: auto !important;
}

.profile-menu:hover .profile-dropdown,
.profile-menu:focus-within .profile-dropdown,
.profile-dropdown:hover {
    display: block !important;
}

.auth-extra-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.demo-page {
    display: grid;
    gap: 22px;
}

.demo-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, .9fr);
    gap: 18px;
    align-items: stretch;
}

.demo-card-stack {
    display: grid;
    gap: 14px;
}

.demo-steps {
    counter-reset: demoStep;
    display: grid;
    gap: 12px;
}

.demo-step {
    counter-increment: demoStep;
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 12px;
    align-items: start;
    padding: 14px;
    border: 1px solid var(--line, #d8e0ee);
    border-radius: 16px;
    background: var(--card, #fff);
}

.demo-step::before {
    content: counter(demoStep);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #2563eb;
    color: #fff;
    font-weight: 900;
}

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

.demo-mini {
    border: 1px solid var(--line, #d8e0ee);
    border-radius: 18px;
    background: var(--card, #fff);
    padding: 18px;
}

.demo-mini h3 {
    margin-top: 0;
}

.demo-fake-table {
    display: grid;
    gap: 8px;
}

.demo-fake-row {
    display: grid;
    grid-template-columns: 90px 1fr 100px;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--line, #d8e0ee);
    border-radius: 12px;
    align-items: center;
}

.demo-fake-qr {
    width: 54px;
    height: 54px;
    border-radius: 10px;
    background:
        linear-gradient(90deg, #111 10px, transparent 10px) 0 0/18px 18px,
        linear-gradient(#111 10px, transparent 10px) 0 0/18px 18px,
        #fff;
    border: 8px solid #fff;
    box-shadow: 0 0 0 1px #d8e0ee;
}

body.theme-dark .demo-step,
body.theme-dark .demo-mini,
body.theme-dark .demo-fake-row {
    background: #111827 !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

body.theme-dark .demo-fake-qr {
    background:
        linear-gradient(90deg, #111 10px, transparent 10px) 0 0/18px 18px,
        linear-gradient(#111 10px, transparent 10px) 0 0/18px 18px,
        #fff !important;
    border-color: #fff !important;
}

@media (max-width: 900px) {
    .demo-hero,
    .demo-grid {
        grid-template-columns: 1fr;
    }
}


/* --- Stable Beta 0.4 public demo dashboard + login required modal --- */

.public-demo-body {
    min-height: 100vh;
    background: linear-gradient(180deg, #f6f9ff 0%, #eef3fb 260px);
    color: #101828;
}

.public-demo-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,255,255,.94);
    border-bottom: 1px solid #d8e0ee;
    backdrop-filter: blur(14px);
}

.public-demo-topbar-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 18px;
}

.public-demo-nav {
    display: flex;
    gap: 14px;
    align-items: center;
    flex: 1 1 auto;
    overflow-x: auto;
}

.public-demo-nav a,
.public-demo-nav button {
    border: 0;
    background: transparent;
    color: #335075;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    padding: 8px 0;
}

.public-demo-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.demo-shell {
    max-width: 1240px;
    margin: 0 auto;
    padding: 34px 18px 60px;
}

.demo-disabled {
    cursor: pointer;
}

.demo-locked-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 900;
}

.demo-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, .48);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.demo-modal-backdrop.is-open {
    display: flex;
}

.demo-modal {
    width: min(520px, 100%);
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid #d8e0ee;
    box-shadow: 0 28px 80px rgba(15,23,42,.26);
    padding: 24px;
}

.demo-modal h2 {
    margin-top: 0;
}

.demo-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.demo-preview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, .9fr);
    gap: 18px;
    margin-bottom: 22px;
}

.demo-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}

.demo-metric {
    border: 1px solid #d8e0ee;
    background: #ffffff;
    border-radius: 18px;
    padding: 20px;
    text-decoration: none;
    color: #101828;
}

.demo-metric span {
    display: flex;
    justify-content: space-between;
    color: #667085;
}

.demo-metric span::after {
    content: '↗';
    color: #98a2b3;
    font-weight: 900;
}

.demo-metric strong {
    display: block;
    font-size: 34px;
    margin-top: 8px;
}

.demo-fake-table-card {
    overflow: hidden;
}

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

.demo-table th,
.demo-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #e4eaf3;
    text-align: left;
}

.demo-table th {
    color: #667085;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.demo-workflow-list {
    margin: 0;
    padding-left: 22px;
    color: #516173;
    line-height: 1.7;
}

.demo-qr-card {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
    padding: 14px;
    border: 1px solid #d8e0ee;
    border-radius: 18px;
    background: #f8fbff;
}

.demo-qr-box {
    width: 84px;
    height: 84px;
    border-radius: 12px;
    background:
        linear-gradient(90deg, #111 9px, transparent 9px) 0 0/18px 18px,
        linear-gradient(#111 9px, transparent 9px) 0 0/18px 18px,
        #fff;
    border: 10px solid #fff;
    box-shadow: 0 0 0 1px #d8e0ee;
    flex: 0 0 auto;
}

.demo-hint-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.demo-hint {
    border: 1px solid #d8e0ee;
    border-radius: 18px;
    padding: 18px;
    background: #ffffff;
}

.demo-hint h3 {
    margin-top: 0;
}

@media (max-width: 900px) {
    .demo-preview-grid,
    .demo-metrics,
    .demo-hint-row {
        grid-template-columns: 1fr;
    }

    .public-demo-topbar-inner {
        flex-wrap: wrap;
    }

    .public-demo-actions {
        margin-left: auto;
    }
}


/* --- Stable Beta 0.4 scrollable patch history --- */

.patch-history-scroll {
    max-height: 420px;
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid var(--line, #d8e0ee);
    border-radius: 16px;
}

.patch-history-scroll table {
    margin: 0;
}

.patch-history-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f8fbff;
}

.patch-history-scroll td,
.patch-history-scroll th {
    vertical-align: top;
}

.patch-history-note {
    margin-top: 10px;
    color: var(--muted, #667085);
    font-size: 13px;
}

body.theme-dark .patch-history-scroll {
    border-color: #334155 !important;
    background: #111827 !important;
}

body.theme-dark .patch-history-scroll thead th {
    background: #0f172a !important;
    color: #cbd5e1 !important;
}

body.theme-dark .patch-history-note {
    color: #a8b6ca !important;
}

.public-demo-body .patch-history-scroll {
    background: #ffffff;
}

@media (max-width: 700px) {
    .patch-history-scroll {
        max-height: 360px;
    }
}


/* --- Stable Beta 0.4 public pages with login-required modal --- */

.public-preview-note {
    border: 1px solid #b8c7e6;
    background: #eef4ff;
    color: #1d4ed8;
    border-radius: 16px;
    padding: 14px 16px;
    font-weight: 800;
    margin-bottom: 18px;
}

.public-preview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}

.public-preview-card,
.public-preview-table-card {
    border: 1px solid var(--line, #d8e0ee);
    background: var(--card, #fff);
    border-radius: 18px;
    padding: 20px;
}

.public-preview-card span {
    display: flex;
    justify-content: space-between;
    color: var(--muted, #667085);
}

.public-preview-card span::after {
    content: '↗';
    color: #98a2b3;
    font-weight: 900;
}

.public-preview-card strong {
    display: block;
    font-size: 34px;
    margin-top: 8px;
}

.public-login-required {
    cursor: pointer;
}

.demo-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, .48);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.demo-modal-backdrop.is-open {
    display: flex;
}

.demo-modal {
    width: min(520px, 100%);
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid #d8e0ee;
    box-shadow: 0 28px 80px rgba(15,23,42,.26);
    padding: 24px;
}

.demo-modal h2 {
    margin-top: 0;
}

.demo-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

body.theme-dark .public-preview-note {
    background: #172554 !important;
    border-color: #2563eb !important;
    color: #bfdbfe !important;
}

body.theme-dark .public-preview-card,
body.theme-dark .public-preview-table-card,
body.theme-dark .demo-modal {
    background: #111827 !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

body.theme-dark .public-preview-card span,
body.theme-dark .demo-modal .muted {
    color: #a8b6ca !important;
}

@media (max-width: 900px) {
    .public-preview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .public-preview-grid {
        grid-template-columns: 1fr;
    }
}


/* --- Stable Beta 0.4 public theme toggle --- */

body.theme-dark .public-preview-card,
body.theme-dark .public-preview-table-card,
body.theme-dark .public-preview-note,
body.theme-dark .demo-modal,
body.theme-dark .demo-table,
body.theme-dark .demo-table tbody,
body.theme-dark .demo-table tr {
    background: #111827 !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

body.theme-dark .public-preview-note {
    background: #172554 !important;
    color: #bfdbfe !important;
    border-color: #2563eb !important;
}

body.theme-dark .demo-table th {
    background: #0f172a !important;
    color: #cbd5e1 !important;
}

body.theme-dark .demo-table td {
    background: #111827 !important;
    color: #e5edf8 !important;
    border-color: #334155 !important;
}

body.theme-dark .public-demo-body {
    background: #0b1220 !important;
    color: #f8fafc !important;
}

body.theme-dark .public-demo-topbar {
    background: rgba(15,23,42,.96) !important;
    border-bottom-color: #334155 !important;
}

body.theme-dark .public-demo-nav a,
body.theme-dark .public-demo-nav button {
    color: #cbd5e1 !important;
}


/* --- Stable Beta 0.4 login dashboard button --- */

.auth-extra-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.auth-copy .auth-extra-actions {
    margin-top: 22px;
}

body.theme-dark .auth-extra-actions .btn.ghost,
body.theme-dark .auth-extra-actions .btn.secondary {
    background: #1e293b !important;
    color: #dbeafe !important;
    border-color: #334155 !important;
}


/* --- Stable Beta 0.4 login dashboard preview area --- */

.auth-preview-area {
    margin-top: 24px;
    padding: 18px;
    border: 1px solid #d8e0ee;
    border-radius: 18px;
    background: linear-gradient(135deg, #f8fbff 0%, #eef4ff 100%);
    display: grid;
    gap: 14px;
}

.auth-preview-area strong,
.auth-preview-area span {
    display: block;
}

.auth-preview-area strong {
    font-size: 15px;
    color: #101828;
}

.auth-preview-area span {
    margin-top: 4px;
    color: #516173;
    line-height: 1.5;
}

.auth-preview-area .preview-btn {
    width: fit-content;
}

.auth-preview-link {
    margin: 16px 0 0;
    color: #667085;
    font-size: 14px;
}

.auth-preview-link a {
    font-weight: 800;
}

body.theme-dark .auth-preview-area {
    background: linear-gradient(135deg, #111827 0%, #172554 100%) !important;
    border-color: #334155 !important;
}

body.theme-dark .auth-preview-area strong {
    color: #f8fafc !important;
}

body.theme-dark .auth-preview-area span,
body.theme-dark .auth-preview-link {
    color: #a8b6ca !important;
}

@media (max-width: 720px) {
    .auth-preview-area .preview-btn {
        width: 100%;
        justify-content: center;
    }
}


/* --- Stable Beta 0.4 top bar spacing polish --- */

/*
Keeps the main navigation on one clean row on desktop, with brand left and
actions right. It only switches to a wrapping/mobile layout when the viewport
is genuinely narrow.
*/

.topbar {
    min-height: 74px;
}

.topbar-inner {
    max-width: 1480px !important;
    width: 100%;
    padding: 14px 28px !important;
    gap: 26px !important;
    justify-content: flex-start;
}

.brand {
    margin-right: 10px;
}

.main-nav {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    column-gap: 24px !important;
    row-gap: 8px !important;
    min-width: 0 !important;
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
}

.main-nav::-webkit-scrollbar {
    display: none;
}

.main-nav a {
    padding: 8px 0;
    line-height: 1.1;
}

.topbar-actions {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 14px !important;
    flex: 0 0 auto !important;
}

.scan-button {
    gap: 7px;
    min-width: 74px;
}

.profile-trigger {
    max-width: 220px;
}

.mode-switch-form {
    flex: 0 0 auto;
}

@media (min-width: 1200px) {
    .topbar-inner {
        flex-wrap: nowrap !important;
    }

    .main-nav {
        flex-wrap: nowrap !important;
    }
}

@media (max-width: 1199px) {
    .topbar {
        min-height: auto;
    }

    .topbar-inner {
        align-items: flex-start !important;
        flex-wrap: wrap !important;
        gap: 12px 18px !important;
    }

    .main-nav {
        order: 3;
        width: 100%;
        flex-basis: 100% !important;
        padding-bottom: 4px;
        column-gap: 18px !important;
    }

    .topbar-actions {
        margin-left: auto !important;
    }
}

@media (max-width: 700px) {
    .topbar-inner {
        padding: 12px 16px !important;
    }

    .main-nav {
        column-gap: 16px !important;
    }

    .scan-button span:last-child {
        display: none;
    }

    .scan-button {
        min-width: 42px;
        padding-inline: 12px;
    }
}


/* --- Stable Beta 0.4 footer bottom placement --- */

/*
Keeps the footer at the bottom of the viewport on short pages,
without making it fixed or covering content.
*/

html,
body {
    min-height: 100%;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.topbar {
    flex: 0 0 auto;
}

.app-shell {
    flex: 1 0 auto;
    width: 100%;
}

.site-footer {
    flex: 0 0 auto;
    width: 100%;
    margin-top: auto !important;
    padding-top: 24px;
    padding-bottom: 28px;
}

.site-footer-inner,
.site-footer .footer-inner {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 700px) {
    .site-footer {
        padding-bottom: 22px;
    }
}


/* --- Stable Beta 0.4 mobile top bar cleanup --- */

/*
Mobile top bar:
- Brand and account controls stay in one compact row.
- Navigation becomes a horizontal scroll strip instead of wrapping into a tall block.
- Scan becomes an icon-only square on mobile.
- Profile name hides on mobile, leaving the avatar.
*/

@media (max-width: 760px) {
    .topbar {
        min-height: auto !important;
    }

    .topbar-inner {
        padding: 12px 14px 10px !important;
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        grid-template-areas:
            "brand spacer actions"
            "nav nav nav" !important;
        align-items: center !important;
        gap: 10px 12px !important;
        max-width: 100% !important;
    }

    .brand {
        grid-area: brand !important;
        margin: 0 !important;
        gap: 7px !important;
        min-width: 0 !important;
    }

    .brand-name {
        font-size: 22px !important;
        letter-spacing: -0.05em !important;
    }

    .beta-badge {
        height: 18px !important;
        padding: 0 7px !important;
        font-size: 9px !important;
    }

    .topbar-actions {
        grid-area: actions !important;
        margin-left: 0 !important;
        justify-self: end !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
    }

    .scan-button {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        padding: 0 !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .scan-button span:not(.scan-icon) {
        display: none !important;
    }

    .scan-icon {
        font-size: 17px !important;
    }

    .profile-trigger {
        width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 4px !important;
        border-radius: 999px !important;
        justify-content: center !important;
    }

    .profile-label {
        display: none !important;
    }

    .profile-avatar {
        width: 34px !important;
        height: 34px !important;
    }

    .mode-switch {
        width: 62px !important;
        height: 36px !important;
    }

    .mode-knob {
        width: 30px !important;
        height: 30px !important;
        font-size: 14px !important;
    }

    .mode-switch.mode-dark .mode-knob {
        transform: translateX(26px) !important;
    }

    .mode-track-sun {
        left: 9px !important;
    }

    .mode-track-moon {
        right: 10px !important;
    }

    .main-nav {
        grid-area: nav !important;
        order: unset !important;
        width: 100% !important;
        flex-basis: auto !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        column-gap: 8px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 2px 0 4px !important;
        margin: 0 !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap !important;
    }

    .main-nav::-webkit-scrollbar {
        display: none !important;
    }

    .main-nav a {
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        min-height: 34px !important;
        padding: 0 12px !important;
        border-radius: 999px !important;
        background: #eef4ff !important;
        color: #335075 !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        text-decoration: none !important;
    }

    .main-nav a:hover {
        background: #dbeafe !important;
        color: #1d4ed8 !important;
    }

    body.theme-dark .main-nav a {
        background: #1e293b !important;
        color: #cbd5e1 !important;
    }

    body.theme-dark .main-nav a:hover {
        background: #26344a !important;
        color: #ffffff !important;
    }

    .profile-dropdown {
        right: -74px !important;
        width: min(280px, calc(100vw - 28px)) !important;
    }

    .app-shell {
        padding-top: 22px !important;
    }
}

@media (max-width: 420px) {
    .topbar-inner {
        padding-left: 10px !important;
        padding-right: 10px !important;
        gap: 9px 8px !important;
    }

    .brand-name {
        font-size: 20px !important;
    }

    .beta-badge {
        font-size: 8px !important;
        padding: 0 6px !important;
    }

    .topbar-actions {
        gap: 6px !important;
    }

    .scan-button,
    .profile-trigger {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }

    .profile-avatar {
        width: 31px !important;
        height: 31px !important;
    }

    .mode-switch {
        width: 58px !important;
        height: 34px !important;
    }

    .mode-knob {
        width: 28px !important;
        height: 28px !important;
    }

    .mode-switch.mode-dark .mode-knob {
        transform: translateX(24px) !important;
    }

    .main-nav a {
        min-height: 32px !important;
        padding: 0 10px !important;
        font-size: 12px !important;
    }
}


/* --- Stable Beta 0.4 mobile burger navigation --- */

.mobile-menu-toggle {
    display: none;
}

@media (max-width: 760px) {
    .topbar-inner {
        grid-template-columns: auto auto 1fr auto !important;
        grid-template-areas: "brand menu spacer actions" !important;
    }

    .mobile-menu-toggle {
        grid-area: menu !important;
        display: inline-flex !important;
        width: 42px !important;
        height: 42px !important;
        border: 1px solid #d8e0ee !important;
        border-radius: 14px !important;
        background: #ffffff !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        gap: 4px !important;
        padding: 0 !important;
        cursor: pointer !important;
        box-shadow: none !important;
    }

    .mobile-menu-toggle span {
        width: 18px !important;
        height: 2px !important;
        border-radius: 999px !important;
        background: #101828 !important;
        display: block !important;
        transition: transform .16s ease, opacity .16s ease !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(1) {
        transform: translateY(6px) rotate(45deg) !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(2) {
        opacity: 0 !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg) !important;
    }

    .main-nav {
        grid-area: nav !important;
        display: none !important;
        width: 100% !important;
        padding: 10px !important;
        margin: 0 !important;
        border: 1px solid #d8e0ee !important;
        border-radius: 18px !important;
        background: #ffffff !important;
        box-shadow: 0 18px 45px rgba(15,23,42,.12) !important;
        overflow: visible !important;
        white-space: normal !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .main-nav.is-open {
        display: flex !important;
    }

    .main-nav a {
        min-height: 38px !important;
        padding: 0 13px !important;
        border-radius: 999px !important;
        background: #eef4ff !important;
        color: #335075 !important;
        font-size: 13px !important;
        font-weight: 800 !important;
    }

    body.theme-dark .mobile-menu-toggle {
        background: #111827 !important;
        border-color: #334155 !important;
    }

    body.theme-dark .mobile-menu-toggle span {
        background: #f8fafc !important;
    }

    body.theme-dark .main-nav {
        background: #111827 !important;
        border-color: #334155 !important;
        box-shadow: 0 18px 45px rgba(0,0,0,.22) !important;
    }

    body.theme-dark .main-nav a {
        background: #1e293b !important;
        color: #cbd5e1 !important;
    }

    body.theme-dark .main-nav a:hover {
        background: #26344a !important;
        color: #ffffff !important;
    }
}

@media (max-width: 420px) {
    .mobile-menu-toggle {
        width: 40px !important;
        height: 40px !important;
    }

    .topbar-inner {
        grid-template-columns: auto auto 1fr auto !important;
    }
}


/* --- Stable Beta 0.4 mobile burger force fix --- */

/*
The earlier mobile menu CSS was being overridden by older mobile nav rules.
This block sits at the end of the stylesheet and forcefully:
- shows the burger button
- hides the nav by default on mobile
- only shows the nav after JS adds .is-open
*/

@media (max-width: 760px) {
    .topbar-inner {
        display: grid !important;
        grid-template-columns: auto auto 1fr auto !important;
        grid-template-areas:
            "brand menu spacer actions"
            "nav nav nav nav" !important;
        align-items: center !important;
        gap: 10px 10px !important;
        padding: 12px 14px !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .brand {
        grid-area: brand !important;
        margin: 0 !important;
    }

    .mobile-menu-toggle {
        grid-area: menu !important;
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        border: 1px solid #d8e0ee !important;
        border-radius: 14px !important;
        background: #ffffff !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        gap: 4px !important;
        padding: 0 !important;
        margin: 0 !important;
        cursor: pointer !important;
        box-shadow: none !important;
        appearance: none !important;
        -webkit-appearance: none !important;
    }

    .mobile-menu-toggle span {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 18px !important;
        height: 2px !important;
        min-height: 2px !important;
        border-radius: 999px !important;
        background: #101828 !important;
        transform-origin: center !important;
        transition: transform .16s ease, opacity .16s ease !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(1) {
        transform: translateY(6px) rotate(45deg) !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(2) {
        opacity: 0 !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg) !important;
    }

    .topbar-actions {
        grid-area: actions !important;
        justify-self: end !important;
        margin-left: 0 !important;
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }

    .main-nav,
    .topbar .main-nav,
    header .main-nav {
        grid-area: nav !important;
        order: unset !important;
        width: 100% !important;
        flex-basis: 100% !important;
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .main-nav.is-open,
    .topbar .main-nav.is-open,
    header .main-nav.is-open {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        overflow: visible !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 10px !important;
        margin: 0 !important;
        border: 1px solid #d8e0ee !important;
        border-radius: 18px !important;
        background: #ffffff !important;
        box-shadow: 0 18px 45px rgba(15,23,42,.12) !important;
        white-space: normal !important;
    }

    .main-nav.is-open a {
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        min-height: 38px !important;
        padding: 0 13px !important;
        border-radius: 999px !important;
        background: #eef4ff !important;
        color: #335075 !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        text-decoration: none !important;
    }

    body.theme-dark .mobile-menu-toggle {
        background: #111827 !important;
        border-color: #334155 !important;
    }

    body.theme-dark .mobile-menu-toggle span {
        background: #f8fafc !important;
    }

    body.theme-dark .main-nav.is-open {
        background: #111827 !important;
        border-color: #334155 !important;
        box-shadow: 0 18px 45px rgba(0,0,0,.22) !important;
    }

    body.theme-dark .main-nav.is-open a {
        background: #1e293b !important;
        color: #cbd5e1 !important;
    }
}

@media (min-width: 761px) {
    .mobile-menu-toggle {
        display: none !important;
    }

    .main-nav {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
    }
}


/* --- Stable Beta 0.4 mobile bottom navigation --- */

/*
Mobile now uses a native-app style bottom nav:
Dashboard, Items, Locations, Folders, QR Labels, Scan.
The full desktop nav stays on desktop/tablet.
*/

.mobile-bottom-nav {
    display: none;
}

@media (max-width: 760px) {
    /* Keep mobile header compact and remove the large nav area. */
    .topbar-inner {
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        grid-template-areas: "brand spacer actions" !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 12px 14px !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .brand {
        grid-area: brand !important;
        margin: 0 !important;
    }

    .topbar-actions {
        grid-area: actions !important;
        justify-self: end !important;
        margin-left: 0 !important;
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }

    .main-nav,
    .topbar .main-nav,
    header .main-nav {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
    }

    .mobile-menu-toggle {
        display: none !important;
    }

    .scan-button {
        display: none !important;
    }

    .profile-trigger {
        width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        padding: 4px !important;
        border-radius: 999px !important;
        justify-content: center !important;
    }

    .profile-label {
        display: none !important;
    }

    .profile-avatar {
        width: 32px !important;
        height: 32px !important;
    }

    .mode-switch {
        width: 58px !important;
        height: 34px !important;
    }

    .mode-knob {
        width: 28px !important;
        height: 28px !important;
        font-size: 14px !important;
    }

    .mode-switch.mode-dark .mode-knob {
        transform: translateX(24px) !important;
    }

    .mobile-bottom-nav {
        position: fixed !important;
        left: 10px !important;
        right: 10px !important;
        bottom: calc(10px + env(safe-area-inset-bottom)) !important;
        z-index: 999 !important;
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 4px !important;
        padding: 8px !important;
        border: 1px solid rgba(216, 224, 238, .92) !important;
        border-radius: 24px !important;
        background: rgba(255, 255, 255, .94) !important;
        box-shadow: 0 18px 55px rgba(15, 23, 42, .22) !important;
        backdrop-filter: blur(18px) !important;
        -webkit-backdrop-filter: blur(18px) !important;
    }

    .mobile-bottom-link {
        min-width: 0 !important;
        min-height: 54px !important;
        border-radius: 18px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        text-decoration: none !important;
        color: #475467 !important;
        font-size: 10px !important;
        font-weight: 850 !important;
        line-height: 1 !important;
        letter-spacing: -0.01em !important;
        white-space: nowrap !important;
    }

    .mobile-bottom-icon {
        font-size: 18px !important;
        line-height: 1 !important;
        display: block !important;
    }

    .mobile-bottom-link:hover,
    .mobile-bottom-link:focus {
        background: #eef4ff !important;
        color: #1d4ed8 !important;
        text-decoration: none !important;
    }

    .mobile-bottom-scan {
        background: #2563eb !important;
        color: #ffffff !important;
        box-shadow: 0 10px 24px rgba(37, 99, 235, .28) !important;
    }

    .mobile-bottom-scan:hover,
    .mobile-bottom-scan:focus {
        background: #1d4ed8 !important;
        color: #ffffff !important;
    }

    .app-shell {
        padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
    }

    .site-footer {
        padding-bottom: calc(112px + env(safe-area-inset-bottom)) !important;
    }

    body.theme-dark .mobile-bottom-nav {
        background: rgba(15, 23, 42, .94) !important;
        border-color: #334155 !important;
        box-shadow: 0 18px 55px rgba(0, 0, 0, .36) !important;
    }

    body.theme-dark .mobile-bottom-link {
        color: #cbd5e1 !important;
    }

    body.theme-dark .mobile-bottom-link:hover,
    body.theme-dark .mobile-bottom-link:focus {
        background: #1e293b !important;
        color: #ffffff !important;
    }

    body.theme-dark .mobile-bottom-scan {
        background: #2563eb !important;
        color: #ffffff !important;
    }
}

@media (max-width: 390px) {
    .mobile-bottom-nav {
        left: 8px !important;
        right: 8px !important;
        padding: 6px !important;
        gap: 2px !important;
        border-radius: 22px !important;
    }

    .mobile-bottom-link {
        min-height: 50px !important;
        font-size: 9px !important;
        border-radius: 16px !important;
    }

    .mobile-bottom-icon {
        font-size: 17px !important;
    }
}


/* --- Stable Beta 0.4 mobile bottom nav overlay force fix --- */

/*
Strict behaviour:
- Hidden on desktop.
- Fixed overlay on mobile/coarse pointer devices.
- Stays pinned to viewport, not the bottom of the document.
*/

.mobile-bottom-nav {
    display: none !important;
}

/* Desktop and laptop safety: never show bottom nav on normal desktop widths. */
@media (min-width: 821px) and (hover: hover) and (pointer: fine) {
    .mobile-bottom-nav {
        display: none !important;
    }
}

/* Phones and narrow mobile layouts */
@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 1024px) {
    body {
        padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important;
    }

    .app-shell {
        padding-bottom: calc(112px + env(safe-area-inset-bottom)) !important;
    }

    .site-footer {
        padding-bottom: calc(122px + env(safe-area-inset-bottom)) !important;
    }

    .mobile-bottom-nav {
        position: fixed !important;
        inset-inline: 10px !important;
        left: 10px !important;
        right: 10px !important;
        bottom: calc(10px + env(safe-area-inset-bottom)) !important;
        top: auto !important;
        z-index: 2147483000 !important;
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 4px !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        min-height: 68px !important;
        margin: 0 !important;
        padding: 8px !important;
        border: 1px solid rgba(216, 224, 238, .94) !important;
        border-radius: 24px !important;
        background: rgba(255, 255, 255, .96) !important;
        box-shadow: 0 18px 55px rgba(15, 23, 42, .24) !important;
        backdrop-filter: blur(18px) !important;
        -webkit-backdrop-filter: blur(18px) !important;
        transform: translate3d(0, 0, 0) !important;
        will-change: transform !important;
        pointer-events: auto !important;
    }

    .mobile-bottom-link {
        min-width: 0 !important;
        min-height: 52px !important;
        border-radius: 18px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        text-decoration: none !important;
        color: #475467 !important;
        font-size: 10px !important;
        font-weight: 850 !important;
        line-height: 1 !important;
        letter-spacing: -0.01em !important;
        white-space: nowrap !important;
        overflow: hidden !important;
    }

    .mobile-bottom-icon {
        font-size: 18px !important;
        line-height: 1 !important;
        display: block !important;
    }

    .mobile-bottom-link:hover,
    .mobile-bottom-link:focus {
        background: #eef4ff !important;
        color: #1d4ed8 !important;
        text-decoration: none !important;
    }

    .mobile-bottom-scan {
        background: #2563eb !important;
        color: #ffffff !important;
        box-shadow: 0 10px 24px rgba(37, 99, 235, .28) !important;
    }

    .mobile-bottom-scan:hover,
    .mobile-bottom-scan:focus {
        background: #1d4ed8 !important;
        color: #ffffff !important;
    }

    body.theme-dark .mobile-bottom-nav {
        background: rgba(15, 23, 42, .96) !important;
        border-color: #334155 !important;
        box-shadow: 0 18px 55px rgba(0, 0, 0, .38) !important;
    }

    body.theme-dark .mobile-bottom-link {
        color: #cbd5e1 !important;
    }

    body.theme-dark .mobile-bottom-link:hover,
    body.theme-dark .mobile-bottom-link:focus {
        background: #1e293b !important;
        color: #ffffff !important;
    }

    body.theme-dark .mobile-bottom-scan {
        background: #2563eb !important;
        color: #ffffff !important;
    }
}

@media (max-width: 390px) {
    .mobile-bottom-nav {
        left: 8px !important;
        right: 8px !important;
        inset-inline: 8px !important;
        bottom: calc(8px + env(safe-area-inset-bottom)) !important;
        padding: 6px !important;
        gap: 2px !important;
        border-radius: 22px !important;
        min-height: 64px !important;
    }

    .mobile-bottom-link {
        min-height: 50px !important;
        font-size: 9px !important;
        border-radius: 16px !important;
    }

    .mobile-bottom-icon {
        font-size: 17px !important;
    }
}


/* --- Stable Beta 0.4 JS mobile bottom nav overlay fix --- */

/*
The mobile bottom nav is now created by JS at the end of <body>
and forced with inline fixed-position styles. CSS below handles fallback,
spacing, and hiding top navigation on mobile.
*/

.mobile-bottom-nav {
    display: none !important;
}

@media (min-width: 821px) {
    .mobile-bottom-nav,
    #mobileBottomNav {
        display: none !important;
    }
}

@media (max-width: 820px) {
    body.has-mobile-bottom-nav {
        padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
    }

    body.has-mobile-bottom-nav .app-shell {
        padding-bottom: calc(124px + env(safe-area-inset-bottom)) !important;
    }

    body.has-mobile-bottom-nav .site-footer {
        padding-bottom: calc(132px + env(safe-area-inset-bottom)) !important;
    }

    .topbar .main-nav,
    header .main-nav,
    .main-nav {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .scan-button {
        display: none !important;
    }

    #mobileBottomNav .mobile-bottom-link:hover,
    #mobileBottomNav .mobile-bottom-link:focus {
        background: #eef4ff !important;
        color: #1d4ed8 !important;
    }

    body.theme-dark #mobileBottomNav .mobile-bottom-link:hover,
    body.theme-dark #mobileBottomNav .mobile-bottom-link:focus {
        background: #1e293b !important;
        color: #ffffff !important;
    }
}

@media (max-width: 390px) {
    #mobileBottomNav {
        left: 8px !important;
        right: 8px !important;
        bottom: calc(8px + env(safe-area-inset-bottom)) !important;
        padding: 6px !important;
        gap: 4px !important;
    }

    #mobileBottomNav .mobile-bottom-link {
        min-height: 50px !important;
        font-size: 9px !important;
    }
}


/* --- Stable Beta 0.4 mobile bottom nav: add Scan + remove top mobile nav --- */

/*
Mobile bottom nav now contains:
Dashboard, Items, Locations, Folders, Scan.
Top navigation and top Scan remain hidden on mobile.
*/

@media (max-width: 820px) {
    .topbar .main-nav,
    header .main-nav,
    .main-nav,
    .scan-button {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
    }

    #mobileBottomNav,
    .mobile-bottom-nav {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }

    #mobileBottomNav .mobile-bottom-scan,
    .mobile-bottom-nav .mobile-bottom-scan {
        background: #2563eb !important;
        color: #ffffff !important;
        box-shadow: 0 10px 24px rgba(37, 99, 235, .28) !important;
    }

    #mobileBottomNav .mobile-bottom-scan:hover,
    #mobileBottomNav .mobile-bottom-scan:focus,
    .mobile-bottom-nav .mobile-bottom-scan:hover,
    .mobile-bottom-nav .mobile-bottom-scan:focus {
        background: #1d4ed8 !important;
        color: #ffffff !important;
    }
}

@media (max-width: 390px) {
    #mobileBottomNav .mobile-bottom-link {
        font-size: 8.5px !important;
    }

    #mobileBottomNav .mobile-bottom-icon {
        font-size: 17px !important;
    }
}


/* --- Stable Beta 0.4 force hide top mobile nav --- */

/*
Hard stop: on mobile the header must only show brand/account/theme controls.
Dashboard/Items/Locations/Folders/Scan must not appear in the top bar.
They live in the bottom overlay nav instead.
*/

@media screen and (max-width: 820px) {
    header nav.main-nav,
    .topbar nav.main-nav,
    .topbar .main-nav,
    header .main-nav,
    body .main-nav {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        left: -99999px !important;
        top: -99999px !important;
        width: 0 !important;
        max-width: 0 !important;
        height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        transform: none !important;
    }

    header .scan-button,
    .topbar .scan-button,
    body .topbar .scan-button {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        left: -99999px !important;
        top: -99999px !important;
        width: 0 !important;
        max-width: 0 !important;
        min-width: 0 !important;
        height: 0 !important;
        max-height: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
    }

    .topbar-inner {
        grid-template-areas: "brand spacer actions" !important;
        grid-template-columns: auto 1fr auto !important;
    }
}

@media screen and (min-width: 821px) {
    header nav.main-nav,
    .topbar nav.main-nav,
    .topbar .main-nav {
        position: static !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
}


/* --- Stable Beta 0.4 mobile More burger menu --- */

/*
Bottom mobile nav keeps the primary actions:
Dashboard, Items, Locations, Folders, Scan.
The header burger now holds the remaining pages.
*/

.mobile-more-toggle,
.mobile-more-menu {
    display: none;
}

@media screen and (max-width: 820px) {
    .topbar-inner {
        display: grid !important;
        grid-template-columns: auto auto 1fr auto !important;
        grid-template-areas: "brand more spacer actions" !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 12px 14px !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .mobile-more-toggle {
        grid-area: more !important;
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        border: 1px solid #d8e0ee !important;
        border-radius: 14px !important;
        background: #ffffff !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        gap: 4px !important;
        padding: 0 !important;
        margin: 0 !important;
        cursor: pointer !important;
        box-shadow: none !important;
        appearance: none !important;
        -webkit-appearance: none !important;
    }

    .mobile-more-toggle span {
        width: 18px !important;
        height: 2px !important;
        min-height: 2px !important;
        display: block !important;
        border-radius: 999px !important;
        background: #101828 !important;
        transition: transform .16s ease, opacity .16s ease !important;
    }

    .mobile-more-toggle.is-open span:nth-child(1) {
        transform: translateY(6px) rotate(45deg) !important;
    }

    .mobile-more-toggle.is-open span:nth-child(2) {
        opacity: 0 !important;
    }

    .mobile-more-toggle.is-open span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg) !important;
    }

    .mobile-more-menu {
        position: fixed !important;
        inset: 0 !important;
        z-index: 2147483600 !important;
        display: none !important;
        padding: 74px 12px calc(104px + env(safe-area-inset-bottom)) !important;
        background: rgba(15, 23, 42, .18) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
    }

    .mobile-more-menu.is-open {
        display: block !important;
    }

    .mobile-more-panel {
        width: min(420px, 100%) !important;
        margin: 0 auto !important;
        padding: 14px !important;
        border-radius: 24px !important;
        border: 1px solid #d8e0ee !important;
        background: rgba(255,255,255,.98) !important;
        box-shadow: 0 22px 65px rgba(15,23,42,.24) !important;
    }

    .mobile-more-head {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        margin-bottom: 12px !important;
    }

    .mobile-more-head strong {
        color: #101828 !important;
        font-size: 16px !important;
        font-weight: 900 !important;
    }

    .mobile-more-close {
        width: 38px !important;
        height: 38px !important;
        border-radius: 999px !important;
        border: 1px solid #d8e0ee !important;
        background: #ffffff !important;
        color: #101828 !important;
        font-size: 24px !important;
        line-height: 1 !important;
        cursor: pointer !important;
    }

    .mobile-more-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .mobile-more-grid a {
        display: flex !important;
        align-items: center !important;
        min-height: 46px !important;
        padding: 0 14px !important;
        border-radius: 16px !important;
        background: #eef4ff !important;
        color: #335075 !important;
        font-size: 14px !important;
        font-weight: 850 !important;
        text-decoration: none !important;
    }

    .mobile-more-grid a:hover,
    .mobile-more-grid a:focus {
        background: #dbeafe !important;
        color: #1d4ed8 !important;
        text-decoration: none !important;
    }

    body.theme-dark .mobile-more-toggle {
        background: #111827 !important;
        border-color: #334155 !important;
    }

    body.theme-dark .mobile-more-toggle span {
        background: #f8fafc !important;
    }

    body.theme-dark .mobile-more-menu {
        background: rgba(0, 0, 0, .28) !important;
    }

    body.theme-dark .mobile-more-panel {
        background: rgba(15,23,42,.98) !important;
        border-color: #334155 !important;
        box-shadow: 0 22px 65px rgba(0,0,0,.42) !important;
    }

    body.theme-dark .mobile-more-head strong {
        color: #f8fafc !important;
    }

    body.theme-dark .mobile-more-close {
        background: #111827 !important;
        border-color: #334155 !important;
        color: #f8fafc !important;
    }

    body.theme-dark .mobile-more-grid a {
        background: #1e293b !important;
        color: #cbd5e1 !important;
    }

    body.theme-dark .mobile-more-grid a:hover,
    body.theme-dark .mobile-more-grid a:focus {
        background: #26344a !important;
        color: #ffffff !important;
    }
}

@media screen and (min-width: 821px) {
    .mobile-more-toggle,
    .mobile-more-menu {
        display: none !important;
    }
}


/* --- Stable Beta 0.4 mobile More arrow repair --- */

/*
Repair version:
- Restores the last known working mobile More menu files.
- Keeps the same working menu JS and panel.
- Uses a text dropdown trigger instead of changing the menu structure.
*/

@media screen and (max-width: 820px) {
    .mobile-more-toggle {
        width: auto !important;
        min-width: 74px !important;
        height: 42px !important;
        min-height: 42px !important;
        padding: 0 12px !important;
        flex-direction: row !important;
        gap: 0 !important;
        font: inherit !important;
    }

    .mobile-more-toggle .mobile-more-arrow-icon {
        display: block !important;
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        background: transparent !important;
        color: #101828 !important;
        font-size: 13px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        letter-spacing: -0.01em !important;
        transform: none !important;
        transition: transform .16s ease !important;
        white-space: nowrap !important;
    }

    .mobile-more-toggle .mobile-more-hidden-line {
        display: none !important;
    }

    .mobile-more-toggle.is-open .mobile-more-arrow-icon {
        transform: none !important;
    }

    body.theme-dark .mobile-more-toggle .mobile-more-arrow-icon {
        background: transparent !important;
        color: #f8fafc !important;
    }
}


/* --- Stable Beta 0.4 combined QR navigation --- */

/*
QR Labels and Made QR codes now appear as one navigation item: QR Codes.
The separate page can still exist internally, but the main nav is cleaner.
*/



/* --- Stable Beta 0.4 Registered QR codes safe repair --- */

/*
Safe repair after the previous label patch:
- Restores the last styled CSS file.
- Removes the old mobile " / labels" suffix.
*/

.mobile-more-grid a[href="qr-labels.php"]::after {
    content: "" !important;
    display: none !important;
}


/* --- Stable Beta 0.4 registered QR page labels --- */

/*
User-facing QR wording is now Registered QR codes.
The underlying filenames stay the same so old links keep working.
*/


/* --- Stable Beta 0.4 registered QR duplicate label fix --- */

/*
Fix is mostly PHP text cleanup.
QR Labels remains the label generator.
Registered QR codes remains the registry/list page.
*/


/* --- Stable Beta 0.4 Registered QR codes layout polish --- */

/*
Registered QR codes page layout:
- Better hero/header balance.
- Summary stats become proper cards.
- Search/management sections align better.
- Mobile remains stacked and readable.
*/

.qr-registry-page {
    max-width: 1240px !important;
    margin: 0 auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

.qr-registry-page > .page-head,
.qr-registry-page .page-head,
.qr-registry-page > header:first-child {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 18px !important;
    align-items: start !important;
    margin-bottom: 22px !important;
}

.qr-registry-page h1 {
    margin-bottom: 8px !important;
}

.qr-registry-page h1 + .muted,
.qr-registry-page h1 + p {
    max-width: 720px !important;
    line-height: 1.55 !important;
}

/* The small count links under the header */
.qr-registry-page h1 ~ p a,
.qr-registry-page > p a {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 38px !important;
    padding: 0 13px !important;
    border-radius: 999px !important;
    background: #eef4ff !important;
    color: #1d4ed8 !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    margin: 4px 8px 4px 0 !important;
}

/* Make the count block feel like a proper dashboard strip */
.qr-registry-page > p:has(a) {
    margin: 18px 0 14px !important;
}

/* Management/search cards should not feel narrow and random */
.qr-registry-page .card {
    max-width: none !important;
}

.qr-registry-page .card:has(input[type="search"]),
.qr-registry-page .card:has(input[name="q"]),
.qr-registry-page .card:has(select[name="filter"]),
.qr-registry-page .card:has(select) {
    margin-top: 20px !important;
}

.qr-registry-page .card h2,
.qr-registry-page .card h3 {
    margin-top: 0 !important;
}

/* Better two-column form feel inside the search panel */
.qr-registry-page .form-grid,
.qr-registry-page form .grid,
.qr-registry-page form {
    gap: 16px !important;
}

.qr-registry-page .btn-row,
.qr-registry-page .form-actions {
    gap: 10px !important;
}

/* Registry table/card spacing */
.qr-registry-page table {
    width: 100% !important;
}

.qr-registry-page .table-wrap,
.qr-registry-page .card:has(table) {
    overflow-x: auto !important;
}

/* Make the top action button feel aligned */
.qr-registry-page .page-actions,
.qr-registry-page .actions {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

/* Dark mode */
body.theme-dark .qr-registry-page h1 ~ p a,
body.theme-dark .qr-registry-page > p a {
    background: #1e293b !important;
    color: #dbeafe !important;
}

@media (min-width: 900px) {
    .qr-registry-page {
        padding-top: 34px !important;
    }

    /* Turn the top count links into a neat row */
    .qr-registry-page h1 ~ p,
    .qr-registry-page > p {
        max-width: 900px !important;
    }
}

@media (max-width: 820px) {
    .qr-registry-page {
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-top: 22px !important;
    }

    .qr-registry-page > .page-head,
    .qr-registry-page .page-head,
    .qr-registry-page > header:first-child {
        grid-template-columns: 1fr !important;
    }

    .qr-registry-page .page-actions,
    .qr-registry-page .actions {
        justify-content: flex-start !important;
    }

    .qr-registry-page h1 ~ p a,
    .qr-registry-page > p a {
        width: 100% !important;
        justify-content: space-between !important;
    }
}



/* --- Stable Beta 0.4 QR nav and rotate image fix --- */

/*
QR Labels remains the label printer.
Registered QR codes remains the registry/list page.
Location image rotation now returns to the visual card and uses filemtime cache busting.
*/

#location-visual {
    scroll-margin-top: 110px;
}

.location-visual-actions form {
    margin: 0;
}



/* ===== CSS from itemid_registered_qr_stat_cards_polish_patch.zip ===== */

:root{
  --bg:#f5f7fb;--bg2:#eef4ff;--card:#fff;--text:#101828;--muted:#667085;--line:#d9e1ec;
  --blue:#2563eb;--blue-dark:#1d4ed8;--blue2:#eff4ff;--green:#12b76a;--amber:#f79009;--danger:#b42318;
  --shadow:0 18px 45px rgba(15,23,42,.08);--radius:18px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:linear-gradient(180deg,#f8fbff 0%,var(--bg) 260px);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Arial,sans-serif;font-size:15px;line-height:1.5}a{color:var(--blue-dark);text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3{letter-spacing:-.04em;line-height:1.15;margin:0 0 10px}h1{font-size:34px}h2{font-size:28px}h3{font-size:19px}.muted{color:var(--muted)}.big{font-size:17px;line-height:1.65}.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:22px;padding:14px 24px;background:rgba(255,255,255,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}.brand{display:inline-flex;gap:10px;align-items:center;color:var(--text);font-weight:900;font-size:21px}.brand:hover{text-decoration:none}.brand-mark{width:34px;height:34px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;background:#111827;color:white;font-size:13px;letter-spacing:-.04em}.main-nav{display:flex;align-items:center;gap:4px;flex:1;flex-wrap:wrap}.main-nav a{color:#344054;padding:9px 10px;border-radius:10px;font-weight:700;font-size:14px}.main-nav a:hover{background:var(--blue2);text-decoration:none}.top-actions{display:flex;align-items:center;gap:12px}.muted-link{color:var(--muted);font-weight:700}.page{max-width:1180px;margin:0 auto;padding:28px 22px 60px}.site-footer{max-width:1180px;margin:0 auto;padding:22px;color:var(--muted);border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px}.page-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin:0 0 20px}.page-head p{margin:4px 0 0}.card{background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:18px;box-shadow:0 10px 30px rgba(15,23,42,.045)}.hero{display:grid;grid-template-columns:2fr 1fr;gap:18px;margin-bottom:18px}.hero .card:first-child{background:linear-gradient(135deg,#fff 0%,#f4f7ff 100%)}.grid{display:grid;gap:18px}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.cards4{grid-template-columns:repeat(4,minmax(0,1fr))}.cards4 .card{margin:0}.cards4 h2{font-size:34px;margin-top:6px}.wide{max-width:920px}.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;background:var(--blue);color:white;padding:11px 16px;font-weight:900;cursor:pointer;text-decoration:none;box-shadow:0 8px 18px rgba(37,99,235,.18);font:inherit}.btn:hover{text-decoration:none;background:var(--blue-dark)}.btn.secondary{background:#e8efff;color:var(--blue-dark);box-shadow:none}.btn.secondary:hover{background:#dbe7ff}.btn.ghost{background:white;color:#344054;border:1px solid var(--line);box-shadow:none}.btn.small{padding:8px 12px;border-radius:10px;font-size:14px}.scan-link{background:#111827;color:#fff!important}.form{display:grid;gap:15px}.form label{display:grid;gap:7px;color:#344054;font-size:14px;font-weight:700}.form input,.form select,.form textarea,.searchbar input,.inline-form input,.inline-form select{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px 13px;background:white;color:var(--text);font:inherit;outline:none}.form input:focus,.form select:focus,.form textarea:focus,.searchbar input:focus,.inline-form input:focus,.inline-form select:focus{border-color:#9db7ff;box-shadow:0 0 0 4px rgba(37,99,235,.10)}.searchbar,.inline-form{display:flex;gap:10px;margin-bottom:18px}.table-wrap{overflow:auto;padding:0}table{width:100%;border-collapse:collapse;min-width:720px}th,td{text-align:left;border-bottom:1px solid var(--line);padding:14px 16px;vertical-align:top}th{font-size:12px;color:var(--muted);font-weight:900;text-transform:uppercase;letter-spacing:.05em;background:#fbfcff}tr:hover td{background:#fbfdff}.pill{display:inline-flex;background:var(--blue2);color:var(--blue-dark);border-radius:999px;padding:4px 9px;font-size:13px;font-weight:900}.pill.low,.pill.Empty,.pill.Missing{background:#fff4ed;color:#b54708}.visual{max-width:100%;border-radius:14px;border:1px solid var(--line);box-shadow:0 8px 20px rgba(15,23,42,.06)}.qr-box{display:inline-block;background:white;padding:12px;border:1px solid var(--line);border-radius:14px}.code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:900;background:#f2f4f7;border:1px solid #e4e7ec;border-radius:10px;padding:4px 8px;display:inline-block}.labels{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.label{background:#fff;border:1px solid #111;border-radius:6px;text-align:center;padding:11px;break-inside:avoid}.label .qr{display:inline-block}.label-toolbar{margin:12px 0}.check{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center;gap:8px!important}.alert{background:#fef3f2;color:var(--danger);border:1px solid #fecdca;border-radius:12px;padding:11px 13px;font-weight:700}.notice{background:#eff8ff;color:#175cd3;border:1px solid #b2ddff;border-radius:12px;padding:11px 13px;font-weight:700}.empty{padding:24px;border:1px dashed var(--line);border-radius:14px;background:#fbfcff;color:var(--muted)}
/* Auth */.auth-body{min-height:100vh!important;display:grid!important;place-items:center!important;padding:28px;background:radial-gradient(circle at top left,rgba(37,99,235,.16),transparent 34%),radial-gradient(circle at bottom right,rgba(16,185,129,.10),transparent 28%),var(--bg)}.auth-shell{width:min(980px,100%);display:grid;grid-template-columns:1.15fr .85fr;gap:18px;align-items:stretch}.auth-panel{background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow)}.auth-copy{padding:36px;display:flex;flex-direction:column;justify-content:center;min-height:440px}.logo-mark{width:54px;height:54px;border-radius:16px;background:#111827;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;letter-spacing:-.04em;margin-bottom:22px}.eyebrow{font-weight:900;color:var(--blue);letter-spacing:.08em;text-transform:uppercase;font-size:13px;margin:0 0 10px}.auth-copy h1{font-size:46px;letter-spacing:-.055em;line-height:1.02;margin:0 0 16px;max-width:620px}.auth-copy .big{font-size:17px;line-height:1.6;max-width:600px;margin:0 0 22px}.feature-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}.feature-list span{background:var(--blue2);color:var(--blue-dark);border:1px solid #dbe7ff;border-radius:999px;padding:8px 11px;font-weight:900;font-size:13px}.auth-card{width:auto!important;padding:30px;display:flex;flex-direction:column;justify-content:center}.auth-card h2{font-size:30px;margin:0 0 8px}.auth-card .muted{margin-top:0;margin-bottom:20px}.auth-card input{height:46px}.subtle-link{font-size:14px;font-weight:800;justify-self:start}.auth-card .actions{margin-top:2px}
@media(max-width:900px){.topbar{align-items:flex-start;flex-direction:column}.top-actions{width:100%;justify-content:space-between}.hero,.grid.two,.grid.cards4{grid-template-columns:1fr}.page-head{display:block}.searchbar,.inline-form{flex-direction:column}.labels{grid-template-columns:repeat(2,1fr)}.auth-shell{grid-template-columns:1fr}.auth-copy{min-height:0;padding:24px}.auth-copy h1{font-size:34px}.auth-card{padding:24px}.site-footer{flex-direction:column}}@media print{body{background:white}.topbar,.page-head,.card:not(.table-wrap),.label-toolbar,.site-footer{display:none!important}.page{padding:0}.labels{grid-template-columns:repeat(4,1fr);gap:8px}.label{page-break-inside:avoid;box-shadow:none}}

/* ItemID QR/template patch */
.section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}.section-head h2{font-size:22px;margin:0 0 4px}.field-builder{display:grid;gap:14px;border:1px solid var(--line);border-radius:16px;padding:16px;background:#fbfcff}.quick-fields{display:flex;gap:8px;flex-wrap:wrap}.field-chip{border:1px solid #dbe7ff;background:#eff4ff;color:#1d4ed8;border-radius:999px;padding:7px 10px;font-weight:800;cursor:pointer}.field-chip:hover{background:#dbe7ff}.fields-list{display:grid;gap:10px}.field-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}.label-sheet{display:grid;grid-template-columns:repeat(var(--label-columns,4),minmax(0,1fr));gap:12px}.print-label-card{background:#fff;border:1px solid #111827;border-radius:10px;text-align:center;padding:12px;break-inside:avoid;min-height:calc(var(--qr-size,120px) + 62px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px}.print-label-card .qr{display:inline-flex;align-items:center;justify-content:center}.print-label-card .print-code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:15px;font-weight:900;letter-spacing:.06em}.print-label-card .print-name{font-size:12px;font-weight:800;color:#344054;line-height:1.25}.row-actions{display:flex;gap:12px;white-space:nowrap}.qr-size-form select{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px 13px;background:white;color:var(--text);font:inherit;outline:none}@media(max-width:700px){.field-row{grid-template-columns:1fr}.label-sheet{grid-template-columns:repeat(2,minmax(0,1fr))}.row-actions{display:grid;gap:6px}}

/* ItemID workflow polish patch */
.mini-action{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;border-radius:10px;padding:7px 10px;font-weight:900;color:#1d4ed8;text-decoration:none;white-space:nowrap}.mini-action:hover{background:#eff4ff;text-decoration:none}.pretty-fields{gap:18px}.pretty-list{gap:12px}.pretty-row{grid-template-columns:1fr 42px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px}.pretty-row input{border:0!important;box-shadow:none!important;padding:9px 10px!important}.icon-button{width:34px;height:34px;border:0;border-radius:10px;background:#f2f4f7;color:#344054;font-size:22px;line-height:1;cursor:pointer;font-weight:900}.icon-button:hover{background:#fee4e2;color:#b42318}.community-check{align-self:end;background:#fbfcff;border:1px solid var(--line);border-radius:14px;padding:12px}.community-check span{display:grid;gap:2px}.community-check small{color:var(--muted);font-weight:600}.field-chip{font-size:13px}.print-label-card{min-height:calc(var(--qr-mm,35mm) + 22mm);padding:8mm 4mm}.print-label-card .print-name{max-width:100%;overflow-wrap:anywhere}.custom-prefix-row{display:none}.item-hero{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.item-hero h2{font-size:24px;margin:4px 0 0}.activity-line{border-bottom:1px solid var(--line);padding:0 0 10px;margin:0 0 10px}.qr-size-form{margin-top:14px;display:flex;gap:10px;align-items:end;flex-wrap:wrap}.qr-size-form label{min-width:190px}.add-item-flow{gap:20px}.flow-step{display:flex;gap:14px;align-items:flex-start;border-top:1px solid var(--line);padding-top:18px}.flow-step:first-of-type{border-top:0;padding-top:0}.flow-step h2{font-size:22px;margin:0 0 4px}.step-badge{width:34px;height:34px;border-radius:999px;background:#111827;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:900;flex:0 0 auto}.field-as-card{border:1px dashed #b7c5df;border-radius:14px;padding:13px;background:#fbfcff}.field-as-card p{margin:4px 0 10px}.code-pill{display:inline-flex;background:#f2f4f7;border:1px solid #e4e7ec;border-radius:10px;padding:5px 9px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:900}@media(max-width:800px){.item-hero{grid-template-columns:1fr}.pretty-row{grid-template-columns:1fr 42px}.qr-size-form{display:grid}.flow-step{display:grid}.field-as-card .btn{width:100%}}


/* ItemID workflow patch 2 */
.beta-badge{display:inline-flex;align-items:center;border:1px solid #c7d7fe;background:#eff4ff;color:#1d4ed8;border-radius:999px;padding:2px 7px;font-size:11px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;line-height:1.4}.template-create-card{display:flex;align-items:center;justify-content:space-between;gap:14px}.template-create-card p{margin:3px 0 0}.compact-check{width:auto!important;display:flex!important;grid-template-columns:auto 1fr!important;align-items:center!important;gap:8px!important;min-width:170px}.compact-check input{width:auto!important}.qr-box canvas,.qr-box img{display:block!important;max-width:100%!important;max-height:100%!important}.print-label-card{overflow:hidden}.print-label-card .dynamic-qr canvas,.print-label-card .dynamic-qr img{display:block!important}.print-label-card .print-code,.print-label-card .print-name{max-width:100%;overflow-wrap:anywhere}.single-print-label{overflow:hidden}@media(max-width:800px){.template-create-card{display:grid}.compact-check{min-width:0}}

/* Items table action-cell border fix */
td.row-actions,
th.row-actions {
    display: table-cell !important;
    white-space: nowrap;
    vertical-align: middle;
    border-bottom: 1px solid var(--line) !important;
}

td.row-actions {
    min-width: 230px;
}

td.row-actions .mini-action {
    margin-right: 8px;
    margin-bottom: 0;
}

td.row-actions .mini-action:last-child {
    margin-right: 0;
}

tr:hover td.row-actions {
    background: #fbfdff;
}

@media (max-width: 760px) {
    td.row-actions {
        min-width: 170px;
    }

    td.row-actions .mini-action {
        display: flex;
        width: 100%;
        margin-right: 0;
        margin-bottom: 6px;
    }

    td.row-actions .mini-action:last-child {
        margin-bottom: 0;
    }
}

/* Stable Beta 0.4 additions */
.btn.danger,
.btn.danger.ghost {
  color: #b42318 !important;
  border-color: #fecdca !important;
  background: #fff !important;
  box-shadow: none !important;
}
.btn.danger:hover,
.btn.danger.ghost:hover {
  background: #fef3f2 !important;
  text-decoration: none;
}
.mini-action.danger {
  color: #b42318 !important;
  border-color: #fecdca !important;
  background: #fff !important;
}
.export-card {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.export-card:hover {
  transform: translateY(-2px);
  text-decoration: none;
  border-color: #b8c7e6;
  box-shadow: 0 18px 42px rgba(15,23,42,.09);
}
.site-footer a { color: inherit; font-weight: 800; }

/* Stable Beta 0.4 template/item field builder polish */
.item-template-field-row {
    display: grid;
    grid-template-columns: minmax(150px, .35fr) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 12px;
    border: 1px solid #d8e0ee;
    border-radius: 14px;
    background: #ffffff;
    margin-bottom: 10px;
}

.template-field-input-wrap {
    display: grid;
    gap: 6px;
}

.template-field-input-wrap input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    margin: 8px 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.field-unit-hint {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 9px;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 900;
}

.small {
    font-size: 12px;
}

@media (max-width: 700px) {
    .item-template-field-row {
        grid-template-columns: 1fr;
    }
}

/* --- Profile/preferences patch CSS --- */

/* Profile and preferences */
.profile-settings-row {
    display: grid;
    grid-template-columns: 112px 1fr;
    gap: 22px;
    align-items: center;
    margin-bottom: 20px;
}

.profile-settings-avatar {
    width: 96px;
    height: 96px;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid #d8e0ee;
    background: #eef4ff;
    color: #1d4ed8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    font-weight: 900;
}

.profile-settings-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.checkbox-line {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    font-weight: 800;
}

.checkbox-line input,
.checkbox-card input {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.checkbox-card {
    min-height: 70px;
    border: 1px solid #d8e0ee;
    border-radius: 14px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}

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

.checkbox-card small {
    margin-top: 4px;
    color: #64748b;
}

@media (max-width: 650px) {
    .profile-settings-row {
        grid-template-columns: 1fr;
    }
}


/* --- Stable Beta 0.4 theme toggle + dark fix --- */

.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,255,255,.94);
    border-bottom: 1px solid #d8e0ee;
    backdrop-filter: blur(14px);
}

.topbar-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    gap: 22px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #0f172a;
    flex: 0 0 auto;
}

.brand:hover {
    text-decoration: none;
}

.brand-name {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1;
}

.beta-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 19px;
    padding: 0 7px;
    border: 1px solid #b8c7e6;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    white-space: nowrap;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 auto;
    min-width: 0;
}

.main-nav a {
    color: #335075;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
}

.main-nav a:hover {
    color: #2563eb;
    text-decoration: none;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

.scan-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 16px;
    border-radius: 12px;
    background: #111827;
    color: #ffffff !important;
    text-decoration: none;
    font-weight: 800;
    font-size: 14px;
    box-shadow: 0 10px 24px rgba(17, 24, 39, .18);
}

.scan-button:hover {
    text-decoration: none;
}

.profile-menu {
    position: relative;
}

.profile-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 4px 8px 4px 4px;
    border: 1px solid #d8e0ee;
    border-radius: 999px;
    background: #ffffff;
    color: #0f172a;
    text-decoration: none;
    font-weight: 800;
    cursor: pointer;
    max-width: 260px;
}

.profile-avatar {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    object-fit: cover;
    background: #eef4ff;
    color: #1d4ed8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    border: 1px solid #c9d7f2;
    overflow: hidden;
    flex: 0 0 auto;
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-label {
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.profile-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 280px;
    border: 1px solid #d8e0ee;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .16);
    padding: 10px;
    display: none;
}

.profile-menu:hover .profile-dropdown,
.profile-menu:focus-within .profile-dropdown {
    display: block;
}

.profile-dropdown-header {
    padding: 10px;
    border-bottom: 1px solid #edf2f7;
    margin-bottom: 8px;
}

.profile-dropdown-header strong,
.profile-dropdown-header span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-dropdown-header span {
    color: #64748b;
    font-size: 13px;
    margin-top: 2px;
}

.profile-dropdown a {
    display: block;
    padding: 10px;
    border-radius: 12px;
    color: #334155;
    text-decoration: none;
    font-weight: 800;
}

.profile-dropdown a:hover {
    background: #f1f5f9;
    color: #0f172a;
    text-decoration: none;
}

.theme-toggle-form {
    margin: 0;
}

.theme-toggle {
    width: 62px;
    height: 34px;
    border: 1px solid #d8e0ee;
    border-radius: 999px;
    background: #eef4ff;
    position: relative;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    box-shadow: none;
}

.theme-toggle-bulb {
    position: absolute;
    left: 8px;
    font-size: 15px;
    line-height: 1;
    z-index: 2;
    opacity: .8;
}

.theme-toggle-knob {
    position: absolute;
    left: 3px;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 3px 10px rgba(15,23,42,.18);
    transition: transform .16s ease;
}

.theme-toggle.is-dark {
    background: #172554;
    border-color: #2563eb;
}

.theme-toggle.is-dark .theme-toggle-bulb {
    left: 36px;
    opacity: 1;
}

.theme-toggle.is-dark .theme-toggle-knob {
    transform: translateX(28px);
    background: #0f172a;
}

.app-shell {
    max-width: 1240px;
    margin: 0 auto;
    padding: 28px 18px 48px;
}

/* Dark theme variables and hard overrides */
body.theme-dark {
    --bg:#0b1220;
    --bg2:#0f172a;
    --card:#111827;
    --text:#f8fafc;
    --muted:#a8b6ca;
    --line:#334155;
    --blue2:#172554;
    background: #0b1220 !important;
    color: #f8fafc !important;
    color-scheme: dark;
}

body.theme-dark .topbar {
    background: rgba(15, 23, 42, .96) !important;
    border-bottom-color: #334155 !important;
}

body.theme-dark .brand,
body.theme-dark .brand-name,
body.theme-dark .profile-label {
    color: #f8fafc !important;
}

body.theme-dark .beta-badge {
    background: #172554 !important;
    border-color: #2563eb !important;
    color: #bfdbfe !important;
}

body.theme-dark .main-nav a {
    color: #cbd5e1 !important;
}

body.theme-dark .main-nav a:hover {
    background: #1e293b !important;
    color: #ffffff !important;
}

body.theme-dark .profile-trigger,
body.theme-dark .profile-dropdown,
body.theme-dark .card,
body.theme-dark section.card,
body.theme-dark form.card,
body.theme-dark details.card,
body.theme-dark .table-wrap,
body.theme-dark .metric-card,
body.theme-dark .filter-panel,
body.theme-dark .template-field-card,
body.theme-dark .template-field-row,
body.theme-dark .location-summary,
body.theme-dark .auth-panel {
    background: #111827 !important;
    background-color: #111827 !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
    box-shadow: 0 18px 45px rgba(0,0,0,.22) !important;
}

body.theme-dark .hero .card:first-child {
    background: linear-gradient(135deg, #111827 0%, #172033 100%) !important;
}

body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark strong,
body.theme-dark label,
body.theme-dark th,
body.theme-dark td {
    color: #f8fafc !important;
}

body.theme-dark .muted,
body.theme-dark .help,
body.theme-dark small,
body.theme-dark .site-footer,
body.theme-dark .metric-card span {
    color: #a8b6ca !important;
}

body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

body.theme-dark input::placeholder,
body.theme-dark textarea::placeholder {
    color: #74839a !important;
}

body.theme-dark table,
body.theme-dark tbody,
body.theme-dark tr {
    background: #111827 !important;
    color: #f8fafc !important;
}

body.theme-dark thead,
body.theme-dark th {
    background: #0f172a !important;
    color: #cbd5e1 !important;
}

body.theme-dark td {
    background: #111827 !important;
    color: #e5edf8 !important;
    border-color: #334155 !important;
}

body.theme-dark tr:hover td {
    background: #172033 !important;
}

body.theme-dark .code-pill,
body.theme-dark .badge,
body.theme-dark .pill,
body.theme-dark .status-pill,
body.theme-dark .tag,
body.theme-dark .field-unit-hint {
    background: #1e293b !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}

body.theme-dark .btn.secondary,
body.theme-dark .btn.ghost,
body.theme-dark a.btn.secondary,
body.theme-dark a.btn.ghost {
    background: #1e293b !important;
    color: #bfdbfe !important;
    border: 1px solid #334155 !important;
    box-shadow: none !important;
}

body.theme-dark .btn.secondary:hover,
body.theme-dark .btn.ghost:hover {
    background: #26344a !important;
    color: #ffffff !important;
}

body.theme-dark .qr-label-preview,
body.theme-dark .qr-preview,
body.theme-dark .qr-card-preview,
body.theme-dark .print-label,
body.theme-dark .label-card,
body.theme-dark .print-sheet,
body.theme-dark .print-sheet .label,
body.theme-dark canvas,
body.theme-dark .qr-box {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #111827 !important;
    border-color: #111827 !important;
}

/* System preference can be selected in profile, but the top toggle only switches light/dark. */
@media (max-width: 900px) {
    .topbar-inner {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 12px;
    }

    .main-nav {
        order: 3;
        width: 100%;
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .topbar-actions {
        margin-left: auto;
    }

    .profile-label {
        display: none;
    }
}


/* --- Stable Beta 0.4 sun/moon theme toggle positioning --- */

.topbar-inner {
    display: flex !important;
    align-items: center !important;
}

.main-nav {
    justify-content: flex-start;
}

.topbar-actions {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.theme-toggle-form {
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}

.theme-toggle {
    width: 66px !important;
    height: 36px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 999px !important;
    background: #e0f2fe !important;
    position: relative !important;
    cursor: pointer !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

.theme-icon {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1 !important;
    font-size: 15px !important;
    line-height: 1 !important;
    pointer-events: none !important;
}

.theme-icon-sun {
    left: 10px !important;
    color: #f59e0b !important;
    opacity: 1 !important;
}

.theme-icon-moon {
    right: 11px !important;
    color: #64748b !important;
    opacity: .55 !important;
}

.theme-toggle-knob {
    position: absolute !important;
    left: 3px !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    box-shadow: 0 3px 10px rgba(15,23,42,.22) !important;
    transition: transform .16s ease, background .16s ease !important;
    z-index: 2 !important;
}

.theme-toggle.is-dark {
    background: #172554 !important;
    border-color: #2563eb !important;
}

.theme-toggle.is-dark .theme-toggle-knob {
    transform: translateX(30px) !important;
    background: #0f172a !important;
}

.theme-toggle.is-dark .theme-icon-sun {
    opacity: .45 !important;
    color: #94a3b8 !important;
}

.theme-toggle.is-dark .theme-icon-moon {
    opacity: 1 !important;
    color: #dbeafe !important;
}

body.theme-dark .theme-toggle {
    background: #172554 !important;
    border-color: #2563eb !important;
}

@media (max-width: 900px) {
    .topbar-actions {
        margin-left: auto !important;
    }
}


/* --- Stable Beta 0.4 dark mode button/pill fix --- */

/* General white button fix in dark mode */
body.theme-dark button,
body.theme-dark input[type="submit"],
body.theme-dark input[type="button"],
body.theme-dark .btn,
body.theme-dark a.btn {
    border-color: #334155;
}

body.theme-dark .btn:not(.danger):not(.primary),
body.theme-dark a.btn:not(.danger):not(.primary),
body.theme-dark button.btn:not(.danger):not(.primary) {
    background: #1e293b !important;
    color: #dbeafe !important;
    border: 1px solid #334155 !important;
    box-shadow: none !important;
}

body.theme-dark .btn:not(.danger):not(.primary):hover,
body.theme-dark a.btn:not(.danger):not(.primary):hover,
body.theme-dark button.btn:not(.danger):not(.primary):hover {
    background: #26344a !important;
    color: #ffffff !important;
}

/* Keep main action buttons blue */
body.theme-dark .btn:first-child,
body.theme-dark .btn.primary,
body.theme-dark button.btn.primary,
body.theme-dark a.btn.primary {
    background: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
}

/* Delete/danger buttons were showing white. */
body.theme-dark .btn.danger,
body.theme-dark a.btn.danger,
body.theme-dark button.btn.danger,
body.theme-dark .danger,
body.theme-dark a[href*="delete.php"],
body.theme-dark button[name*="delete"],
body.theme-dark button[value*="delete"],
body.theme-dark button[value*="clear_reserved"],
body.theme-dark .delete-button,
body.theme-dark .clear-button {
    background: #3f1d1d !important;
    color: #fecaca !important;
    border: 1px solid #7f1d1d !important;
    box-shadow: none !important;
}

body.theme-dark .btn.danger:hover,
body.theme-dark a.btn.danger:hover,
body.theme-dark button.btn.danger:hover,
body.theme-dark .danger:hover,
body.theme-dark a[href*="delete.php"]:hover,
body.theme-dark button[name*="delete"]:hover,
body.theme-dark button[value*="delete"]:hover,
body.theme-dark button[value*="clear_reserved"]:hover,
body.theme-dark .delete-button:hover,
body.theme-dark .clear-button:hover {
    background: #7f1d1d !important;
    color: #ffffff !important;
}

/* Some pages use plain anchors styled as buttons without btn classes. */
body.theme-dark .row-actions a,
body.theme-dark .table-actions-cell a,
body.theme-dark .actions a,
body.theme-dark .actions button {
    border-color: #334155;
}

body.theme-dark .row-actions a:not(.danger):not([href*="delete.php"]),
body.theme-dark .table-actions-cell a:not(.danger):not([href*="delete.php"]) {
    background: #1e293b !important;
    color: #dbeafe !important;
    border: 1px solid #334155 !important;
}

body.theme-dark .row-actions a:not(.danger):not([href*="delete.php"]):hover,
body.theme-dark .table-actions-cell a:not(.danger):not([href*="delete.php"]):hover {
    background: #26344a !important;
    color: #ffffff !important;
}

/* Code pills were still too pale in some table cells. */
body.theme-dark .code-pill,
body.theme-dark td .code-pill,
body.theme-dark .qr-code-pill,
body.theme-dark .item-id-pill {
    background: #1e293b !important;
    color: #e2e8f0 !important;
    border: 1px solid #334155 !important;
}

/* Search filter detail summary was still white on some browsers. */
body.theme-dark details,
body.theme-dark details summary,
body.theme-dark details.card,
body.theme-dark details.card summary {
    background: #111827 !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

/* Preserve white only where it must be white for QR/print. */
body.theme-dark .qr-label-preview,
body.theme-dark .qr-preview,
body.theme-dark .qr-card-preview,
body.theme-dark .print-label,
body.theme-dark .label-card,
body.theme-dark .print-sheet,
body.theme-dark .print-sheet .label,
body.theme-dark canvas,
body.theme-dark .qr-box {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #111827 !important;
    border-color: #111827 !important;
}

/* Same button fixes for system theme when OS is dark. */
@media (prefers-color-scheme: dark) {
    body.theme-system .btn:not(.danger):not(.primary),
    body.theme-system a.btn:not(.danger):not(.primary),
    body.theme-system button.btn:not(.danger):not(.primary) {
        background: #1e293b !important;
        color: #dbeafe !important;
        border: 1px solid #334155 !important;
        box-shadow: none !important;
    }

    body.theme-system .btn.danger,
    body.theme-system a.btn.danger,
    body.theme-system button.btn.danger,
    body.theme-system .danger,
    body.theme-system a[href*="delete.php"],
    body.theme-system button[name*="delete"],
    body.theme-system button[value*="delete"],
    body.theme-system button[value*="clear_reserved"],
    body.theme-system .delete-button,
    body.theme-system .clear-button {
        background: #3f1d1d !important;
        color: #fecaca !important;
        border: 1px solid #7f1d1d !important;
        box-shadow: none !important;
    }

    body.theme-system .code-pill,
    body.theme-system td .code-pill,
    body.theme-system .qr-code-pill,
    body.theme-system .item-id-pill {
        background: #1e293b !important;
        color: #e2e8f0 !important;
        border: 1px solid #334155 !important;
    }

    body.theme-system details,
    body.theme-system details summary,
    body.theme-system details.card,
    body.theme-system details.card summary {
        background: #111827 !important;
        color: #f8fafc !important;
        border-color: #334155 !important;
    }
}


/* --- Stable Beta 0.4 dark cleanup: toggle, white panels, buttons --- */

/* Hide old/broken theme toggle visuals if old CSS is still cached on a page. */
.theme-toggle,
.theme-toggle-form,
.theme-icon,
.theme-option,
.theme-toggle-bulb {
    display: none !important;
}

/* Clean topbar layout */
.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,255,255,.94);
    border-bottom: 1px solid #d8e0ee;
    backdrop-filter: blur(14px);
}

.topbar-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    gap: 22px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #0f172a;
    flex: 0 0 auto;
}

.brand:hover {
    text-decoration: none;
}

.brand-name {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1;
}

.beta-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 19px;
    padding: 0 7px;
    border: 1px solid #b8c7e6;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    white-space: nowrap;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 auto;
    min-width: 0;
}

.main-nav a {
    color: #335075;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
}

.main-nav a:hover {
    color: #2563eb;
    text-decoration: none;
}

.topbar-actions {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex: 0 0 auto;
}

.scan-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 16px;
    border-radius: 12px;
    background: #111827;
    color: #ffffff !important;
    text-decoration: none;
    font-weight: 800;
    font-size: 14px;
    box-shadow: 0 10px 24px rgba(17,24,39,.18);
}

.scan-button:hover {
    text-decoration: none;
}

.scan-icon {
    font-size: 15px;
    line-height: 1;
}

.profile-menu {
    position: relative;
}

.profile-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 4px 8px 4px 4px;
    border: 1px solid #d8e0ee;
    border-radius: 999px;
    background: #ffffff;
    color: #0f172a;
    text-decoration: none;
    font-weight: 800;
    cursor: pointer;
    max-width: 260px;
}

.profile-avatar {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    border: 1px solid #c9d7f2;
    overflow: hidden;
    flex: 0 0 auto;
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-label {
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.profile-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 280px;
    border: 1px solid #d8e0ee;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(15,23,42,.16);
    padding: 10px;
    display: none;
}

.profile-menu:hover .profile-dropdown,
.profile-menu:focus-within .profile-dropdown {
    display: block;
}

.profile-dropdown-header {
    padding: 10px;
    border-bottom: 1px solid #edf2f7;
    margin-bottom: 8px;
}

.profile-dropdown-header strong,
.profile-dropdown-header span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-dropdown-header span {
    color: #64748b;
    font-size: 13px;
    margin-top: 2px;
}

.profile-dropdown a {
    display: block;
    padding: 10px;
    border-radius: 12px;
    color: #334155;
    text-decoration: none;
    font-weight: 800;
}

.profile-dropdown a:hover {
    background: #f1f5f9;
    color: #0f172a;
    text-decoration: none;
}

/* New independent sun/moon switch */
.mode-switch-form {
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}

.mode-switch {
    width: 72px !important;
    height: 38px !important;
    border-radius: 999px !important;
    border: 1px solid #cbd5e1 !important;
    background: #e0f2fe !important;
    position: relative !important;
    cursor: pointer !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: inline-flex !important;
    align-items: center !important;
    box-shadow: none !important;
}

.mode-track-icon {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    pointer-events: none !important;
}

.mode-track-sun {
    left: 11px !important;
    color: #f59e0b !important;
    opacity: .25 !important;
}

.mode-track-moon {
    right: 12px !important;
    color: #64748b !important;
    opacity: .35 !important;
}

.mode-knob {
    position: absolute !important;
    left: 3px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #f59e0b !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    box-shadow: 0 3px 10px rgba(15,23,42,.22) !important;
    transition: transform .16s ease, background .16s ease, color .16s ease !important;
    z-index: 2 !important;
}

.mode-switch.mode-dark {
    background: #172554 !important;
    border-color: #2563eb !important;
}

.mode-switch.mode-dark .mode-knob {
    transform: translateX(34px) !important;
    background: #0f172a !important;
    color: #dbeafe !important;
}

.mode-switch.mode-dark .mode-track-sun {
    color: #94a3b8 !important;
    opacity: .35 !important;
}

.mode-switch.mode-dark .mode-track-moon {
    opacity: .22 !important;
}

/* Dark theme core */
body.theme-dark {
    --bg:#0b1220;
    --bg2:#0f172a;
    --card:#111827;
    --text:#f8fafc;
    --muted:#a8b6ca;
    --line:#334155;
    --blue2:#172554;
    background:#0b1220 !important;
    color:#f8fafc !important;
    color-scheme: dark;
}

body.theme-dark .topbar {
    background: rgba(15,23,42,.96) !important;
    border-bottom-color: #334155 !important;
}

body.theme-dark .brand,
body.theme-dark .brand-name,
body.theme-dark .profile-label {
    color:#f8fafc !important;
}

body.theme-dark .beta-badge {
    background:#172554 !important;
    border-color:#2563eb !important;
    color:#bfdbfe !important;
}

body.theme-dark .main-nav a {
    color:#cbd5e1 !important;
}

body.theme-dark .main-nav a:hover {
    background:#1e293b !important;
    color:#ffffff !important;
}

body.theme-dark .scan-button {
    background:#2563eb !important;
    color:#ffffff !important;
}

body.theme-dark .profile-trigger,
body.theme-dark .profile-dropdown {
    background:#111827 !important;
    border-color:#334155 !important;
    color:#f8fafc !important;
}

body.theme-dark .profile-dropdown-header {
    border-bottom-color:#334155 !important;
}

body.theme-dark .profile-dropdown-header span {
    color:#94a3b8 !important;
}

body.theme-dark .profile-dropdown a {
    color:#cbd5e1 !important;
}

body.theme-dark .profile-dropdown a:hover {
    background:#1e293b !important;
    color:#ffffff !important;
}

/* Kill the stubborn white panels seen in Items/Add Item/Templates/Made QR codes */
body.theme-dark .card,
body.theme-dark section.card,
body.theme-dark form.card,
body.theme-dark details.card,
body.theme-dark .table-wrap,
body.theme-dark .items-filter-panel,
body.theme-dark .items-filter-panel[open],
body.theme-dark .items-filter-panel summary,
body.theme-dark .field-as-card,
body.theme-dark .field-as-card.template-create-card,
body.theme-dark .template-fields-panel,
body.theme-dark .template-field-builder,
body.theme-dark .template-share-card,
body.theme-dark .template-preset,
body.theme-dark .template-field-row,
body.theme-dark .template-field-row-main,
body.theme-dark .template-field-row-extra,
body.theme-dark .template-options-wrap,
body.theme-dark .template-required,
body.theme-dark .template-create-card,
body.theme-dark .location-summary,
body.theme-dark .scanner-box,
body.theme-dark .notice:not(.print-label):not(.label-card),
body.theme-dark .alert,
body.theme-dark .stat-card,
body.theme-dark .metric-card {
    background:#111827 !important;
    background-color:#111827 !important;
    color:#f8fafc !important;
    border-color:#334155 !important;
    box-shadow:0 18px 45px rgba(0,0,0,.22) !important;
}

body.theme-dark .hero .card:first-child {
    background:linear-gradient(135deg,#111827 0%,#172033 100%) !important;
}

body.theme-dark .items-filter-panel *,
body.theme-dark .template-field-builder *,
body.theme-dark .template-share-card *,
body.theme-dark .template-preset *,
body.theme-dark .field-as-card *,
body.theme-dark .template-fields-panel *,
body.theme-dark .card *,
body.theme-dark .table-wrap * {
    color: inherit;
}

body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark strong,
body.theme-dark label,
body.theme-dark th,
body.theme-dark td,
body.theme-dark summary,
body.theme-dark .section-head,
body.theme-dark .page-head {
    color:#f8fafc !important;
}

body.theme-dark .muted,
body.theme-dark .help,
body.theme-dark .hint,
body.theme-dark small,
body.theme-dark .template-help,
body.theme-dark .template-field-hint,
body.theme-dark .site-footer,
body.theme-dark .items-filter-grid label {
    color:#a8b6ca !important;
}

body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea,
body.theme-dark .items-search-row input,
body.theme-dark .items-filter-grid select,
body.theme-dark .template-field-row input,
body.theme-dark .template-field-row select {
    background:#0f172a !important;
    border-color:#334155 !important;
    color:#f8fafc !important;
}

body.theme-dark input::placeholder,
body.theme-dark textarea::placeholder {
    color:#74839a !important;
}

body.theme-dark table,
body.theme-dark tbody,
body.theme-dark tr {
    background:#111827 !important;
    color:#f8fafc !important;
}

body.theme-dark thead,
body.theme-dark th {
    background:#0f172a !important;
    color:#cbd5e1 !important;
}

body.theme-dark td {
    background:#111827 !important;
    color:#e5edf8 !important;
    border-color:#334155 !important;
}

body.theme-dark tr:hover td {
    background:#172033 !important;
}

body.theme-dark .code-pill,
body.theme-dark td .code-pill,
body.theme-dark .qr-code-pill,
body.theme-dark .item-id-pill,
body.theme-dark .badge,
body.theme-dark .pill,
body.theme-dark .status-pill,
body.theme-dark .tag,
body.theme-dark .field-unit-hint {
    background:#1e293b !important;
    color:#e2e8f0 !important;
    border:1px solid #334155 !important;
}

/* Buttons, including delete buttons that were staying white */
body.theme-dark .btn,
body.theme-dark a.btn,
body.theme-dark button.btn,
body.theme-dark .row-actions a,
body.theme-dark .table-actions-cell a,
body.theme-dark .actions a,
body.theme-dark .actions button {
    background:#1e293b !important;
    color:#dbeafe !important;
    border:1px solid #334155 !important;
    box-shadow:none !important;
}

body.theme-dark .btn:hover,
body.theme-dark a.btn:hover,
body.theme-dark button.btn:hover,
body.theme-dark .row-actions a:hover,
body.theme-dark .table-actions-cell a:hover,
body.theme-dark .actions a:hover,
body.theme-dark .actions button:hover {
    background:#26344a !important;
    color:#ffffff !important;
}

body.theme-dark .btn.danger,
body.theme-dark a.btn.danger,
body.theme-dark button.btn.danger,
body.theme-dark a[href*="delete.php"],
body.theme-dark button[name*="delete"],
body.theme-dark button[value*="delete"],
body.theme-dark button[value*="clear_reserved"],
body.theme-dark .delete-button,
body.theme-dark .clear-button {
    background:#3f1d1d !important;
    color:#fecaca !important;
    border:1px solid #7f1d1d !important;
}

body.theme-dark .btn.danger:hover,
body.theme-dark a.btn.danger:hover,
body.theme-dark button.btn.danger:hover,
body.theme-dark a[href*="delete.php"]:hover,
body.theme-dark button[name*="delete"]:hover,
body.theme-dark button[value*="delete"]:hover,
body.theme-dark button[value*="clear_reserved"]:hover {
    background:#7f1d1d !important;
    color:#ffffff !important;
}

/* Primary actions stay blue */
body.theme-dark .btn.primary,
body.theme-dark a.btn.primary,
body.theme-dark .actions > .btn:first-child:not(.danger),
body.theme-dark .page-head .btn:last-child:not(.danger) {
    background:#2563eb !important;
    color:#ffffff !important;
    border-color:#2563eb !important;
}

/* QR and print surfaces stay white deliberately */
body.theme-dark .qr-label-preview,
body.theme-dark .qr-preview,
body.theme-dark .qr-card-preview,
body.theme-dark .print-label,
body.theme-dark .label-card,
body.theme-dark .print-sheet,
body.theme-dark .print-sheet .label,
body.theme-dark canvas,
body.theme-dark .qr-box {
    background:#ffffff !important;
    background-color:#ffffff !important;
    color:#111827 !important;
    border-color:#111827 !important;
}

@media (max-width:900px) {
    .topbar-inner {
        align-items:flex-start;
        flex-wrap:wrap;
        gap:12px;
    }

    .main-nav {
        order:3;
        width:100%;
        overflow-x:auto;
        padding-bottom:4px;
    }

    .topbar-actions {
        margin-left:auto !important;
    }

    .profile-label {
        display:none;
    }
}


/* --- Stable Beta 0.4 profile dropdown hover bridge + demo link polish --- */

.profile-menu {
    position: relative !important;
}

.profile-dropdown {
    top: calc(100% + 6px) !important;
    right: 0 !important;
}

/* Invisible bridge stops the dropdown disappearing while moving from profile button to menu. */
.profile-menu::after {
    content: '' !important;
    position: absolute !important;
    left: -12px !important;
    right: -12px !important;
    top: 100% !important;
    height: 14px !important;
    display: block !important;
    background: transparent !important;
    pointer-events: auto !important;
}

.profile-menu:hover .profile-dropdown,
.profile-menu:focus-within .profile-dropdown,
.profile-dropdown:hover {
    display: block !important;
}

.auth-extra-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.demo-page {
    display: grid;
    gap: 22px;
}

.demo-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, .9fr);
    gap: 18px;
    align-items: stretch;
}

.demo-card-stack {
    display: grid;
    gap: 14px;
}

.demo-steps {
    counter-reset: demoStep;
    display: grid;
    gap: 12px;
}

.demo-step {
    counter-increment: demoStep;
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 12px;
    align-items: start;
    padding: 14px;
    border: 1px solid var(--line, #d8e0ee);
    border-radius: 16px;
    background: var(--card, #fff);
}

.demo-step::before {
    content: counter(demoStep);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #2563eb;
    color: #fff;
    font-weight: 900;
}

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

.demo-mini {
    border: 1px solid var(--line, #d8e0ee);
    border-radius: 18px;
    background: var(--card, #fff);
    padding: 18px;
}

.demo-mini h3 {
    margin-top: 0;
}

.demo-fake-table {
    display: grid;
    gap: 8px;
}

.demo-fake-row {
    display: grid;
    grid-template-columns: 90px 1fr 100px;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--line, #d8e0ee);
    border-radius: 12px;
    align-items: center;
}

.demo-fake-qr {
    width: 54px;
    height: 54px;
    border-radius: 10px;
    background:
        linear-gradient(90deg, #111 10px, transparent 10px) 0 0/18px 18px,
        linear-gradient(#111 10px, transparent 10px) 0 0/18px 18px,
        #fff;
    border: 8px solid #fff;
    box-shadow: 0 0 0 1px #d8e0ee;
}

body.theme-dark .demo-step,
body.theme-dark .demo-mini,
body.theme-dark .demo-fake-row {
    background: #111827 !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

body.theme-dark .demo-fake-qr {
    background:
        linear-gradient(90deg, #111 10px, transparent 10px) 0 0/18px 18px,
        linear-gradient(#111 10px, transparent 10px) 0 0/18px 18px,
        #fff !important;
    border-color: #fff !important;
}

@media (max-width: 900px) {
    .demo-hero,
    .demo-grid {
        grid-template-columns: 1fr;
    }
}


/* --- Stable Beta 0.4 public demo dashboard + login required modal --- */

.public-demo-body {
    min-height: 100vh;
    background: linear-gradient(180deg, #f6f9ff 0%, #eef3fb 260px);
    color: #101828;
}

.public-demo-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,255,255,.94);
    border-bottom: 1px solid #d8e0ee;
    backdrop-filter: blur(14px);
}

.public-demo-topbar-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 18px;
}

.public-demo-nav {
    display: flex;
    gap: 14px;
    align-items: center;
    flex: 1 1 auto;
    overflow-x: auto;
}

.public-demo-nav a,
.public-demo-nav button {
    border: 0;
    background: transparent;
    color: #335075;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    padding: 8px 0;
}

.public-demo-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.demo-shell {
    max-width: 1240px;
    margin: 0 auto;
    padding: 34px 18px 60px;
}

.demo-disabled {
    cursor: pointer;
}

.demo-locked-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 900;
}

.demo-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, .48);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.demo-modal-backdrop.is-open {
    display: flex;
}

.demo-modal {
    width: min(520px, 100%);
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid #d8e0ee;
    box-shadow: 0 28px 80px rgba(15,23,42,.26);
    padding: 24px;
}

.demo-modal h2 {
    margin-top: 0;
}

.demo-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.demo-preview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, .9fr);
    gap: 18px;
    margin-bottom: 22px;
}

.demo-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}

.demo-metric {
    border: 1px solid #d8e0ee;
    background: #ffffff;
    border-radius: 18px;
    padding: 20px;
    text-decoration: none;
    color: #101828;
}

.demo-metric span {
    display: flex;
    justify-content: space-between;
    color: #667085;
}

.demo-metric span::after {
    content: '↗';
    color: #98a2b3;
    font-weight: 900;
}

.demo-metric strong {
    display: block;
    font-size: 34px;
    margin-top: 8px;
}

.demo-fake-table-card {
    overflow: hidden;
}

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

.demo-table th,
.demo-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #e4eaf3;
    text-align: left;
}

.demo-table th {
    color: #667085;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.demo-workflow-list {
    margin: 0;
    padding-left: 22px;
    color: #516173;
    line-height: 1.7;
}

.demo-qr-card {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
    padding: 14px;
    border: 1px solid #d8e0ee;
    border-radius: 18px;
    background: #f8fbff;
}

.demo-qr-box {
    width: 84px;
    height: 84px;
    border-radius: 12px;
    background:
        linear-gradient(90deg, #111 9px, transparent 9px) 0 0/18px 18px,
        linear-gradient(#111 9px, transparent 9px) 0 0/18px 18px,
        #fff;
    border: 10px solid #fff;
    box-shadow: 0 0 0 1px #d8e0ee;
    flex: 0 0 auto;
}

.demo-hint-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.demo-hint {
    border: 1px solid #d8e0ee;
    border-radius: 18px;
    padding: 18px;
    background: #ffffff;
}

.demo-hint h3 {
    margin-top: 0;
}

@media (max-width: 900px) {
    .demo-preview-grid,
    .demo-metrics,
    .demo-hint-row {
        grid-template-columns: 1fr;
    }

    .public-demo-topbar-inner {
        flex-wrap: wrap;
    }

    .public-demo-actions {
        margin-left: auto;
    }
}


/* --- Stable Beta 0.4 scrollable patch history --- */

.patch-history-scroll {
    max-height: 420px;
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid var(--line, #d8e0ee);
    border-radius: 16px;
}

.patch-history-scroll table {
    margin: 0;
}

.patch-history-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f8fbff;
}

.patch-history-scroll td,
.patch-history-scroll th {
    vertical-align: top;
}

.patch-history-note {
    margin-top: 10px;
    color: var(--muted, #667085);
    font-size: 13px;
}

body.theme-dark .patch-history-scroll {
    border-color: #334155 !important;
    background: #111827 !important;
}

body.theme-dark .patch-history-scroll thead th {
    background: #0f172a !important;
    color: #cbd5e1 !important;
}

body.theme-dark .patch-history-note {
    color: #a8b6ca !important;
}

.public-demo-body .patch-history-scroll {
    background: #ffffff;
}

@media (max-width: 700px) {
    .patch-history-scroll {
        max-height: 360px;
    }
}


/* --- Stable Beta 0.4 public pages with login-required modal --- */

.public-preview-note {
    border: 1px solid #b8c7e6;
    background: #eef4ff;
    color: #1d4ed8;
    border-radius: 16px;
    padding: 14px 16px;
    font-weight: 800;
    margin-bottom: 18px;
}

.public-preview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}

.public-preview-card,
.public-preview-table-card {
    border: 1px solid var(--line, #d8e0ee);
    background: var(--card, #fff);
    border-radius: 18px;
    padding: 20px;
}

.public-preview-card span {
    display: flex;
    justify-content: space-between;
    color: var(--muted, #667085);
}

.public-preview-card span::after {
    content: '↗';
    color: #98a2b3;
    font-weight: 900;
}

.public-preview-card strong {
    display: block;
    font-size: 34px;
    margin-top: 8px;
}

.public-login-required {
    cursor: pointer;
}

.demo-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, .48);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.demo-modal-backdrop.is-open {
    display: flex;
}

.demo-modal {
    width: min(520px, 100%);
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid #d8e0ee;
    box-shadow: 0 28px 80px rgba(15,23,42,.26);
    padding: 24px;
}

.demo-modal h2 {
    margin-top: 0;
}

.demo-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

body.theme-dark .public-preview-note {
    background: #172554 !important;
    border-color: #2563eb !important;
    color: #bfdbfe !important;
}

body.theme-dark .public-preview-card,
body.theme-dark .public-preview-table-card,
body.theme-dark .demo-modal {
    background: #111827 !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

body.theme-dark .public-preview-card span,
body.theme-dark .demo-modal .muted {
    color: #a8b6ca !important;
}

@media (max-width: 900px) {
    .public-preview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .public-preview-grid {
        grid-template-columns: 1fr;
    }
}


/* --- Stable Beta 0.4 public theme toggle --- */

body.theme-dark .public-preview-card,
body.theme-dark .public-preview-table-card,
body.theme-dark .public-preview-note,
body.theme-dark .demo-modal,
body.theme-dark .demo-table,
body.theme-dark .demo-table tbody,
body.theme-dark .demo-table tr {
    background: #111827 !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

body.theme-dark .public-preview-note {
    background: #172554 !important;
    color: #bfdbfe !important;
    border-color: #2563eb !important;
}

body.theme-dark .demo-table th {
    background: #0f172a !important;
    color: #cbd5e1 !important;
}

body.theme-dark .demo-table td {
    background: #111827 !important;
    color: #e5edf8 !important;
    border-color: #334155 !important;
}

body.theme-dark .public-demo-body {
    background: #0b1220 !important;
    color: #f8fafc !important;
}

body.theme-dark .public-demo-topbar {
    background: rgba(15,23,42,.96) !important;
    border-bottom-color: #334155 !important;
}

body.theme-dark .public-demo-nav a,
body.theme-dark .public-demo-nav button {
    color: #cbd5e1 !important;
}


/* --- Stable Beta 0.4 login dashboard button --- */

.auth-extra-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.auth-copy .auth-extra-actions {
    margin-top: 22px;
}

body.theme-dark .auth-extra-actions .btn.ghost,
body.theme-dark .auth-extra-actions .btn.secondary {
    background: #1e293b !important;
    color: #dbeafe !important;
    border-color: #334155 !important;
}


/* --- Stable Beta 0.4 login dashboard preview area --- */

.auth-preview-area {
    margin-top: 24px;
    padding: 18px;
    border: 1px solid #d8e0ee;
    border-radius: 18px;
    background: linear-gradient(135deg, #f8fbff 0%, #eef4ff 100%);
    display: grid;
    gap: 14px;
}

.auth-preview-area strong,
.auth-preview-area span {
    display: block;
}

.auth-preview-area strong {
    font-size: 15px;
    color: #101828;
}

.auth-preview-area span {
    margin-top: 4px;
    color: #516173;
    line-height: 1.5;
}

.auth-preview-area .preview-btn {
    width: fit-content;
}

.auth-preview-link {
    margin: 16px 0 0;
    color: #667085;
    font-size: 14px;
}

.auth-preview-link a {
    font-weight: 800;
}

body.theme-dark .auth-preview-area {
    background: linear-gradient(135deg, #111827 0%, #172554 100%) !important;
    border-color: #334155 !important;
}

body.theme-dark .auth-preview-area strong {
    color: #f8fafc !important;
}

body.theme-dark .auth-preview-area span,
body.theme-dark .auth-preview-link {
    color: #a8b6ca !important;
}

@media (max-width: 720px) {
    .auth-preview-area .preview-btn {
        width: 100%;
        justify-content: center;
    }
}


/* --- Stable Beta 0.4 top bar spacing polish --- */

/*
Keeps the main navigation on one clean row on desktop, with brand left and
actions right. It only switches to a wrapping/mobile layout when the viewport
is genuinely narrow.
*/

.topbar {
    min-height: 74px;
}

.topbar-inner {
    max-width: 1480px !important;
    width: 100%;
    padding: 14px 28px !important;
    gap: 26px !important;
    justify-content: flex-start;
}

.brand {
    margin-right: 10px;
}

.main-nav {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    column-gap: 24px !important;
    row-gap: 8px !important;
    min-width: 0 !important;
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
}

.main-nav::-webkit-scrollbar {
    display: none;
}

.main-nav a {
    padding: 8px 0;
    line-height: 1.1;
}

.topbar-actions {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 14px !important;
    flex: 0 0 auto !important;
}

.scan-button {
    gap: 7px;
    min-width: 74px;
}

.profile-trigger {
    max-width: 220px;
}

.mode-switch-form {
    flex: 0 0 auto;
}

@media (min-width: 1200px) {
    .topbar-inner {
        flex-wrap: nowrap !important;
    }

    .main-nav {
        flex-wrap: nowrap !important;
    }
}

@media (max-width: 1199px) {
    .topbar {
        min-height: auto;
    }

    .topbar-inner {
        align-items: flex-start !important;
        flex-wrap: wrap !important;
        gap: 12px 18px !important;
    }

    .main-nav {
        order: 3;
        width: 100%;
        flex-basis: 100% !important;
        padding-bottom: 4px;
        column-gap: 18px !important;
    }

    .topbar-actions {
        margin-left: auto !important;
    }
}

@media (max-width: 700px) {
    .topbar-inner {
        padding: 12px 16px !important;
    }

    .main-nav {
        column-gap: 16px !important;
    }

    .scan-button span:last-child {
        display: none;
    }

    .scan-button {
        min-width: 42px;
        padding-inline: 12px;
    }
}


/* --- Stable Beta 0.4 footer bottom placement --- */

/*
Keeps the footer at the bottom of the viewport on short pages,
without making it fixed or covering content.
*/

html,
body {
    min-height: 100%;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.topbar {
    flex: 0 0 auto;
}

.app-shell {
    flex: 1 0 auto;
    width: 100%;
}

.site-footer {
    flex: 0 0 auto;
    width: 100%;
    margin-top: auto !important;
    padding-top: 24px;
    padding-bottom: 28px;
}

.site-footer-inner,
.site-footer .footer-inner {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 700px) {
    .site-footer {
        padding-bottom: 22px;
    }
}


/* --- Stable Beta 0.4 mobile top bar cleanup --- */

/*
Mobile top bar:
- Brand and account controls stay in one compact row.
- Navigation becomes a horizontal scroll strip instead of wrapping into a tall block.
- Scan becomes an icon-only square on mobile.
- Profile name hides on mobile, leaving the avatar.
*/

@media (max-width: 760px) {
    .topbar {
        min-height: auto !important;
    }

    .topbar-inner {
        padding: 12px 14px 10px !important;
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        grid-template-areas:
            "brand spacer actions"
            "nav nav nav" !important;
        align-items: center !important;
        gap: 10px 12px !important;
        max-width: 100% !important;
    }

    .brand {
        grid-area: brand !important;
        margin: 0 !important;
        gap: 7px !important;
        min-width: 0 !important;
    }

    .brand-name {
        font-size: 22px !important;
        letter-spacing: -0.05em !important;
    }

    .beta-badge {
        height: 18px !important;
        padding: 0 7px !important;
        font-size: 9px !important;
    }

    .topbar-actions {
        grid-area: actions !important;
        margin-left: 0 !important;
        justify-self: end !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
    }

    .scan-button {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        padding: 0 !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .scan-button span:not(.scan-icon) {
        display: none !important;
    }

    .scan-icon {
        font-size: 17px !important;
    }

    .profile-trigger {
        width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 4px !important;
        border-radius: 999px !important;
        justify-content: center !important;
    }

    .profile-label {
        display: none !important;
    }

    .profile-avatar {
        width: 34px !important;
        height: 34px !important;
    }

    .mode-switch {
        width: 62px !important;
        height: 36px !important;
    }

    .mode-knob {
        width: 30px !important;
        height: 30px !important;
        font-size: 14px !important;
    }

    .mode-switch.mode-dark .mode-knob {
        transform: translateX(26px) !important;
    }

    .mode-track-sun {
        left: 9px !important;
    }

    .mode-track-moon {
        right: 10px !important;
    }

    .main-nav {
        grid-area: nav !important;
        order: unset !important;
        width: 100% !important;
        flex-basis: auto !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        column-gap: 8px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 2px 0 4px !important;
        margin: 0 !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap !important;
    }

    .main-nav::-webkit-scrollbar {
        display: none !important;
    }

    .main-nav a {
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        min-height: 34px !important;
        padding: 0 12px !important;
        border-radius: 999px !important;
        background: #eef4ff !important;
        color: #335075 !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        text-decoration: none !important;
    }

    .main-nav a:hover {
        background: #dbeafe !important;
        color: #1d4ed8 !important;
    }

    body.theme-dark .main-nav a {
        background: #1e293b !important;
        color: #cbd5e1 !important;
    }

    body.theme-dark .main-nav a:hover {
        background: #26344a !important;
        color: #ffffff !important;
    }

    .profile-dropdown {
        right: -74px !important;
        width: min(280px, calc(100vw - 28px)) !important;
    }

    .app-shell {
        padding-top: 22px !important;
    }
}

@media (max-width: 420px) {
    .topbar-inner {
        padding-left: 10px !important;
        padding-right: 10px !important;
        gap: 9px 8px !important;
    }

    .brand-name {
        font-size: 20px !important;
    }

    .beta-badge {
        font-size: 8px !important;
        padding: 0 6px !important;
    }

    .topbar-actions {
        gap: 6px !important;
    }

    .scan-button,
    .profile-trigger {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }

    .profile-avatar {
        width: 31px !important;
        height: 31px !important;
    }

    .mode-switch {
        width: 58px !important;
        height: 34px !important;
    }

    .mode-knob {
        width: 28px !important;
        height: 28px !important;
    }

    .mode-switch.mode-dark .mode-knob {
        transform: translateX(24px) !important;
    }

    .main-nav a {
        min-height: 32px !important;
        padding: 0 10px !important;
        font-size: 12px !important;
    }
}


/* --- Stable Beta 0.4 mobile burger navigation --- */

.mobile-menu-toggle {
    display: none;
}

@media (max-width: 760px) {
    .topbar-inner {
        grid-template-columns: auto auto 1fr auto !important;
        grid-template-areas: "brand menu spacer actions" !important;
    }

    .mobile-menu-toggle {
        grid-area: menu !important;
        display: inline-flex !important;
        width: 42px !important;
        height: 42px !important;
        border: 1px solid #d8e0ee !important;
        border-radius: 14px !important;
        background: #ffffff !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        gap: 4px !important;
        padding: 0 !important;
        cursor: pointer !important;
        box-shadow: none !important;
    }

    .mobile-menu-toggle span {
        width: 18px !important;
        height: 2px !important;
        border-radius: 999px !important;
        background: #101828 !important;
        display: block !important;
        transition: transform .16s ease, opacity .16s ease !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(1) {
        transform: translateY(6px) rotate(45deg) !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(2) {
        opacity: 0 !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg) !important;
    }

    .main-nav {
        grid-area: nav !important;
        display: none !important;
        width: 100% !important;
        padding: 10px !important;
        margin: 0 !important;
        border: 1px solid #d8e0ee !important;
        border-radius: 18px !important;
        background: #ffffff !important;
        box-shadow: 0 18px 45px rgba(15,23,42,.12) !important;
        overflow: visible !important;
        white-space: normal !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .main-nav.is-open {
        display: flex !important;
    }

    .main-nav a {
        min-height: 38px !important;
        padding: 0 13px !important;
        border-radius: 999px !important;
        background: #eef4ff !important;
        color: #335075 !important;
        font-size: 13px !important;
        font-weight: 800 !important;
    }

    body.theme-dark .mobile-menu-toggle {
        background: #111827 !important;
        border-color: #334155 !important;
    }

    body.theme-dark .mobile-menu-toggle span {
        background: #f8fafc !important;
    }

    body.theme-dark .main-nav {
        background: #111827 !important;
        border-color: #334155 !important;
        box-shadow: 0 18px 45px rgba(0,0,0,.22) !important;
    }

    body.theme-dark .main-nav a {
        background: #1e293b !important;
        color: #cbd5e1 !important;
    }

    body.theme-dark .main-nav a:hover {
        background: #26344a !important;
        color: #ffffff !important;
    }
}

@media (max-width: 420px) {
    .mobile-menu-toggle {
        width: 40px !important;
        height: 40px !important;
    }

    .topbar-inner {
        grid-template-columns: auto auto 1fr auto !important;
    }
}


/* --- Stable Beta 0.4 mobile burger force fix --- */

/*
The earlier mobile menu CSS was being overridden by older mobile nav rules.
This block sits at the end of the stylesheet and forcefully:
- shows the burger button
- hides the nav by default on mobile
- only shows the nav after JS adds .is-open
*/

@media (max-width: 760px) {
    .topbar-inner {
        display: grid !important;
        grid-template-columns: auto auto 1fr auto !important;
        grid-template-areas:
            "brand menu spacer actions"
            "nav nav nav nav" !important;
        align-items: center !important;
        gap: 10px 10px !important;
        padding: 12px 14px !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .brand {
        grid-area: brand !important;
        margin: 0 !important;
    }

    .mobile-menu-toggle {
        grid-area: menu !important;
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        border: 1px solid #d8e0ee !important;
        border-radius: 14px !important;
        background: #ffffff !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        gap: 4px !important;
        padding: 0 !important;
        margin: 0 !important;
        cursor: pointer !important;
        box-shadow: none !important;
        appearance: none !important;
        -webkit-appearance: none !important;
    }

    .mobile-menu-toggle span {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 18px !important;
        height: 2px !important;
        min-height: 2px !important;
        border-radius: 999px !important;
        background: #101828 !important;
        transform-origin: center !important;
        transition: transform .16s ease, opacity .16s ease !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(1) {
        transform: translateY(6px) rotate(45deg) !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(2) {
        opacity: 0 !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg) !important;
    }

    .topbar-actions {
        grid-area: actions !important;
        justify-self: end !important;
        margin-left: 0 !important;
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }

    .main-nav,
    .topbar .main-nav,
    header .main-nav {
        grid-area: nav !important;
        order: unset !important;
        width: 100% !important;
        flex-basis: 100% !important;
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .main-nav.is-open,
    .topbar .main-nav.is-open,
    header .main-nav.is-open {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        overflow: visible !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 10px !important;
        margin: 0 !important;
        border: 1px solid #d8e0ee !important;
        border-radius: 18px !important;
        background: #ffffff !important;
        box-shadow: 0 18px 45px rgba(15,23,42,.12) !important;
        white-space: normal !important;
    }

    .main-nav.is-open a {
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        min-height: 38px !important;
        padding: 0 13px !important;
        border-radius: 999px !important;
        background: #eef4ff !important;
        color: #335075 !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        text-decoration: none !important;
    }

    body.theme-dark .mobile-menu-toggle {
        background: #111827 !important;
        border-color: #334155 !important;
    }

    body.theme-dark .mobile-menu-toggle span {
        background: #f8fafc !important;
    }

    body.theme-dark .main-nav.is-open {
        background: #111827 !important;
        border-color: #334155 !important;
        box-shadow: 0 18px 45px rgba(0,0,0,.22) !important;
    }

    body.theme-dark .main-nav.is-open a {
        background: #1e293b !important;
        color: #cbd5e1 !important;
    }
}

@media (min-width: 761px) {
    .mobile-menu-toggle {
        display: none !important;
    }

    .main-nav {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
    }
}


/* --- Stable Beta 0.4 mobile bottom navigation --- */

/*
Mobile now uses a native-app style bottom nav:
Dashboard, Items, Locations, Folders, QR Labels, Scan.
The full desktop nav stays on desktop/tablet.
*/

.mobile-bottom-nav {
    display: none;
}

@media (max-width: 760px) {
    /* Keep mobile header compact and remove the large nav area. */
    .topbar-inner {
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        grid-template-areas: "brand spacer actions" !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 12px 14px !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .brand {
        grid-area: brand !important;
        margin: 0 !important;
    }

    .topbar-actions {
        grid-area: actions !important;
        justify-self: end !important;
        margin-left: 0 !important;
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }

    .main-nav,
    .topbar .main-nav,
    header .main-nav {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
    }

    .mobile-menu-toggle {
        display: none !important;
    }

    .scan-button {
        display: none !important;
    }

    .profile-trigger {
        width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        padding: 4px !important;
        border-radius: 999px !important;
        justify-content: center !important;
    }

    .profile-label {
        display: none !important;
    }

    .profile-avatar {
        width: 32px !important;
        height: 32px !important;
    }

    .mode-switch {
        width: 58px !important;
        height: 34px !important;
    }

    .mode-knob {
        width: 28px !important;
        height: 28px !important;
        font-size: 14px !important;
    }

    .mode-switch.mode-dark .mode-knob {
        transform: translateX(24px) !important;
    }

    .mobile-bottom-nav {
        position: fixed !important;
        left: 10px !important;
        right: 10px !important;
        bottom: calc(10px + env(safe-area-inset-bottom)) !important;
        z-index: 999 !important;
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 4px !important;
        padding: 8px !important;
        border: 1px solid rgba(216, 224, 238, .92) !important;
        border-radius: 24px !important;
        background: rgba(255, 255, 255, .94) !important;
        box-shadow: 0 18px 55px rgba(15, 23, 42, .22) !important;
        backdrop-filter: blur(18px) !important;
        -webkit-backdrop-filter: blur(18px) !important;
    }

    .mobile-bottom-link {
        min-width: 0 !important;
        min-height: 54px !important;
        border-radius: 18px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        text-decoration: none !important;
        color: #475467 !important;
        font-size: 10px !important;
        font-weight: 850 !important;
        line-height: 1 !important;
        letter-spacing: -0.01em !important;
        white-space: nowrap !important;
    }

    .mobile-bottom-icon {
        font-size: 18px !important;
        line-height: 1 !important;
        display: block !important;
    }

    .mobile-bottom-link:hover,
    .mobile-bottom-link:focus {
        background: #eef4ff !important;
        color: #1d4ed8 !important;
        text-decoration: none !important;
    }

    .mobile-bottom-scan {
        background: #2563eb !important;
        color: #ffffff !important;
        box-shadow: 0 10px 24px rgba(37, 99, 235, .28) !important;
    }

    .mobile-bottom-scan:hover,
    .mobile-bottom-scan:focus {
        background: #1d4ed8 !important;
        color: #ffffff !important;
    }

    .app-shell {
        padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
    }

    .site-footer {
        padding-bottom: calc(112px + env(safe-area-inset-bottom)) !important;
    }

    body.theme-dark .mobile-bottom-nav {
        background: rgba(15, 23, 42, .94) !important;
        border-color: #334155 !important;
        box-shadow: 0 18px 55px rgba(0, 0, 0, .36) !important;
    }

    body.theme-dark .mobile-bottom-link {
        color: #cbd5e1 !important;
    }

    body.theme-dark .mobile-bottom-link:hover,
    body.theme-dark .mobile-bottom-link:focus {
        background: #1e293b !important;
        color: #ffffff !important;
    }

    body.theme-dark .mobile-bottom-scan {
        background: #2563eb !important;
        color: #ffffff !important;
    }
}

@media (max-width: 390px) {
    .mobile-bottom-nav {
        left: 8px !important;
        right: 8px !important;
        padding: 6px !important;
        gap: 2px !important;
        border-radius: 22px !important;
    }

    .mobile-bottom-link {
        min-height: 50px !important;
        font-size: 9px !important;
        border-radius: 16px !important;
    }

    .mobile-bottom-icon {
        font-size: 17px !important;
    }
}


/* --- Stable Beta 0.4 mobile bottom nav overlay force fix --- */

/*
Strict behaviour:
- Hidden on desktop.
- Fixed overlay on mobile/coarse pointer devices.
- Stays pinned to viewport, not the bottom of the document.
*/

.mobile-bottom-nav {
    display: none !important;
}

/* Desktop and laptop safety: never show bottom nav on normal desktop widths. */
@media (min-width: 821px) and (hover: hover) and (pointer: fine) {
    .mobile-bottom-nav {
        display: none !important;
    }
}

/* Phones and narrow mobile layouts */
@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 1024px) {
    body {
        padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important;
    }

    .app-shell {
        padding-bottom: calc(112px + env(safe-area-inset-bottom)) !important;
    }

    .site-footer {
        padding-bottom: calc(122px + env(safe-area-inset-bottom)) !important;
    }

    .mobile-bottom-nav {
        position: fixed !important;
        inset-inline: 10px !important;
        left: 10px !important;
        right: 10px !important;
        bottom: calc(10px + env(safe-area-inset-bottom)) !important;
        top: auto !important;
        z-index: 2147483000 !important;
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 4px !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        min-height: 68px !important;
        margin: 0 !important;
        padding: 8px !important;
        border: 1px solid rgba(216, 224, 238, .94) !important;
        border-radius: 24px !important;
        background: rgba(255, 255, 255, .96) !important;
        box-shadow: 0 18px 55px rgba(15, 23, 42, .24) !important;
        backdrop-filter: blur(18px) !important;
        -webkit-backdrop-filter: blur(18px) !important;
        transform: translate3d(0, 0, 0) !important;
        will-change: transform !important;
        pointer-events: auto !important;
    }

    .mobile-bottom-link {
        min-width: 0 !important;
        min-height: 52px !important;
        border-radius: 18px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        text-decoration: none !important;
        color: #475467 !important;
        font-size: 10px !important;
        font-weight: 850 !important;
        line-height: 1 !important;
        letter-spacing: -0.01em !important;
        white-space: nowrap !important;
        overflow: hidden !important;
    }

    .mobile-bottom-icon {
        font-size: 18px !important;
        line-height: 1 !important;
        display: block !important;
    }

    .mobile-bottom-link:hover,
    .mobile-bottom-link:focus {
        background: #eef4ff !important;
        color: #1d4ed8 !important;
        text-decoration: none !important;
    }

    .mobile-bottom-scan {
        background: #2563eb !important;
        color: #ffffff !important;
        box-shadow: 0 10px 24px rgba(37, 99, 235, .28) !important;
    }

    .mobile-bottom-scan:hover,
    .mobile-bottom-scan:focus {
        background: #1d4ed8 !important;
        color: #ffffff !important;
    }

    body.theme-dark .mobile-bottom-nav {
        background: rgba(15, 23, 42, .96) !important;
        border-color: #334155 !important;
        box-shadow: 0 18px 55px rgba(0, 0, 0, .38) !important;
    }

    body.theme-dark .mobile-bottom-link {
        color: #cbd5e1 !important;
    }

    body.theme-dark .mobile-bottom-link:hover,
    body.theme-dark .mobile-bottom-link:focus {
        background: #1e293b !important;
        color: #ffffff !important;
    }

    body.theme-dark .mobile-bottom-scan {
        background: #2563eb !important;
        color: #ffffff !important;
    }
}

@media (max-width: 390px) {
    .mobile-bottom-nav {
        left: 8px !important;
        right: 8px !important;
        inset-inline: 8px !important;
        bottom: calc(8px + env(safe-area-inset-bottom)) !important;
        padding: 6px !important;
        gap: 2px !important;
        border-radius: 22px !important;
        min-height: 64px !important;
    }

    .mobile-bottom-link {
        min-height: 50px !important;
        font-size: 9px !important;
        border-radius: 16px !important;
    }

    .mobile-bottom-icon {
        font-size: 17px !important;
    }
}


/* --- Stable Beta 0.4 JS mobile bottom nav overlay fix --- */

/*
The mobile bottom nav is now created by JS at the end of <body>
and forced with inline fixed-position styles. CSS below handles fallback,
spacing, and hiding top navigation on mobile.
*/

.mobile-bottom-nav {
    display: none !important;
}

@media (min-width: 821px) {
    .mobile-bottom-nav,
    #mobileBottomNav {
        display: none !important;
    }
}

@media (max-width: 820px) {
    body.has-mobile-bottom-nav {
        padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
    }

    body.has-mobile-bottom-nav .app-shell {
        padding-bottom: calc(124px + env(safe-area-inset-bottom)) !important;
    }

    body.has-mobile-bottom-nav .site-footer {
        padding-bottom: calc(132px + env(safe-area-inset-bottom)) !important;
    }

    .topbar .main-nav,
    header .main-nav,
    .main-nav {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .scan-button {
        display: none !important;
    }

    #mobileBottomNav .mobile-bottom-link:hover,
    #mobileBottomNav .mobile-bottom-link:focus {
        background: #eef4ff !important;
        color: #1d4ed8 !important;
    }

    body.theme-dark #mobileBottomNav .mobile-bottom-link:hover,
    body.theme-dark #mobileBottomNav .mobile-bottom-link:focus {
        background: #1e293b !important;
        color: #ffffff !important;
    }
}

@media (max-width: 390px) {
    #mobileBottomNav {
        left: 8px !important;
        right: 8px !important;
        bottom: calc(8px + env(safe-area-inset-bottom)) !important;
        padding: 6px !important;
        gap: 4px !important;
    }

    #mobileBottomNav .mobile-bottom-link {
        min-height: 50px !important;
        font-size: 9px !important;
    }
}


/* --- Stable Beta 0.4 mobile bottom nav: add Scan + remove top mobile nav --- */

/*
Mobile bottom nav now contains:
Dashboard, Items, Locations, Folders, Scan.
Top navigation and top Scan remain hidden on mobile.
*/

@media (max-width: 820px) {
    .topbar .main-nav,
    header .main-nav,
    .main-nav,
    .scan-button {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
    }

    #mobileBottomNav,
    .mobile-bottom-nav {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }

    #mobileBottomNav .mobile-bottom-scan,
    .mobile-bottom-nav .mobile-bottom-scan {
        background: #2563eb !important;
        color: #ffffff !important;
        box-shadow: 0 10px 24px rgba(37, 99, 235, .28) !important;
    }

    #mobileBottomNav .mobile-bottom-scan:hover,
    #mobileBottomNav .mobile-bottom-scan:focus,
    .mobile-bottom-nav .mobile-bottom-scan:hover,
    .mobile-bottom-nav .mobile-bottom-scan:focus {
        background: #1d4ed8 !important;
        color: #ffffff !important;
    }
}

@media (max-width: 390px) {
    #mobileBottomNav .mobile-bottom-link {
        font-size: 8.5px !important;
    }

    #mobileBottomNav .mobile-bottom-icon {
        font-size: 17px !important;
    }
}


/* --- Stable Beta 0.4 force hide top mobile nav --- */

/*
Hard stop: on mobile the header must only show brand/account/theme controls.
Dashboard/Items/Locations/Folders/Scan must not appear in the top bar.
They live in the bottom overlay nav instead.
*/

@media screen and (max-width: 820px) {
    header nav.main-nav,
    .topbar nav.main-nav,
    .topbar .main-nav,
    header .main-nav,
    body .main-nav {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        left: -99999px !important;
        top: -99999px !important;
        width: 0 !important;
        max-width: 0 !important;
        height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        transform: none !important;
    }

    header .scan-button,
    .topbar .scan-button,
    body .topbar .scan-button {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        left: -99999px !important;
        top: -99999px !important;
        width: 0 !important;
        max-width: 0 !important;
        min-width: 0 !important;
        height: 0 !important;
        max-height: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
    }

    .topbar-inner {
        grid-template-areas: "brand spacer actions" !important;
        grid-template-columns: auto 1fr auto !important;
    }
}

@media screen and (min-width: 821px) {
    header nav.main-nav,
    .topbar nav.main-nav,
    .topbar .main-nav {
        position: static !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
}


/* --- Stable Beta 0.4 mobile More burger menu --- */

/*
Bottom mobile nav keeps the primary actions:
Dashboard, Items, Locations, Folders, Scan.
The header burger now holds the remaining pages.
*/

.mobile-more-toggle,
.mobile-more-menu {
    display: none;
}

@media screen and (max-width: 820px) {
    .topbar-inner {
        display: grid !important;
        grid-template-columns: auto auto 1fr auto !important;
        grid-template-areas: "brand more spacer actions" !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 12px 14px !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .mobile-more-toggle {
        grid-area: more !important;
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        border: 1px solid #d8e0ee !important;
        border-radius: 14px !important;
        background: #ffffff !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        gap: 4px !important;
        padding: 0 !important;
        margin: 0 !important;
        cursor: pointer !important;
        box-shadow: none !important;
        appearance: none !important;
        -webkit-appearance: none !important;
    }

    .mobile-more-toggle span {
        width: 18px !important;
        height: 2px !important;
        min-height: 2px !important;
        display: block !important;
        border-radius: 999px !important;
        background: #101828 !important;
        transition: transform .16s ease, opacity .16s ease !important;
    }

    .mobile-more-toggle.is-open span:nth-child(1) {
        transform: translateY(6px) rotate(45deg) !important;
    }

    .mobile-more-toggle.is-open span:nth-child(2) {
        opacity: 0 !important;
    }

    .mobile-more-toggle.is-open span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg) !important;
    }

    .mobile-more-menu {
        position: fixed !important;
        inset: 0 !important;
        z-index: 2147483600 !important;
        display: none !important;
        padding: 74px 12px calc(104px + env(safe-area-inset-bottom)) !important;
        background: rgba(15, 23, 42, .18) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
    }

    .mobile-more-menu.is-open {
        display: block !important;
    }

    .mobile-more-panel {
        width: min(420px, 100%) !important;
        margin: 0 auto !important;
        padding: 14px !important;
        border-radius: 24px !important;
        border: 1px solid #d8e0ee !important;
        background: rgba(255,255,255,.98) !important;
        box-shadow: 0 22px 65px rgba(15,23,42,.24) !important;
    }

    .mobile-more-head {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        margin-bottom: 12px !important;
    }

    .mobile-more-head strong {
        color: #101828 !important;
        font-size: 16px !important;
        font-weight: 900 !important;
    }

    .mobile-more-close {
        width: 38px !important;
        height: 38px !important;
        border-radius: 999px !important;
        border: 1px solid #d8e0ee !important;
        background: #ffffff !important;
        color: #101828 !important;
        font-size: 24px !important;
        line-height: 1 !important;
        cursor: pointer !important;
    }

    .mobile-more-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .mobile-more-grid a {
        display: flex !important;
        align-items: center !important;
        min-height: 46px !important;
        padding: 0 14px !important;
        border-radius: 16px !important;
        background: #eef4ff !important;
        color: #335075 !important;
        font-size: 14px !important;
        font-weight: 850 !important;
        text-decoration: none !important;
    }

    .mobile-more-grid a:hover,
    .mobile-more-grid a:focus {
        background: #dbeafe !important;
        color: #1d4ed8 !important;
        text-decoration: none !important;
    }

    body.theme-dark .mobile-more-toggle {
        background: #111827 !important;
        border-color: #334155 !important;
    }

    body.theme-dark .mobile-more-toggle span {
        background: #f8fafc !important;
    }

    body.theme-dark .mobile-more-menu {
        background: rgba(0, 0, 0, .28) !important;
    }

    body.theme-dark .mobile-more-panel {
        background: rgba(15,23,42,.98) !important;
        border-color: #334155 !important;
        box-shadow: 0 22px 65px rgba(0,0,0,.42) !important;
    }

    body.theme-dark .mobile-more-head strong {
        color: #f8fafc !important;
    }

    body.theme-dark .mobile-more-close {
        background: #111827 !important;
        border-color: #334155 !important;
        color: #f8fafc !important;
    }

    body.theme-dark .mobile-more-grid a {
        background: #1e293b !important;
        color: #cbd5e1 !important;
    }

    body.theme-dark .mobile-more-grid a:hover,
    body.theme-dark .mobile-more-grid a:focus {
        background: #26344a !important;
        color: #ffffff !important;
    }
}

@media screen and (min-width: 821px) {
    .mobile-more-toggle,
    .mobile-more-menu {
        display: none !important;
    }
}


/* --- Stable Beta 0.4 mobile More arrow repair --- */

/*
Repair version:
- Restores the last known working mobile More menu files.
- Keeps the same working menu JS and panel.
- Uses a text dropdown trigger instead of changing the menu structure.
*/

@media screen and (max-width: 820px) {
    .mobile-more-toggle {
        width: auto !important;
        min-width: 74px !important;
        height: 42px !important;
        min-height: 42px !important;
        padding: 0 12px !important;
        flex-direction: row !important;
        gap: 0 !important;
        font: inherit !important;
    }

    .mobile-more-toggle .mobile-more-arrow-icon {
        display: block !important;
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        background: transparent !important;
        color: #101828 !important;
        font-size: 13px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        letter-spacing: -0.01em !important;
        transform: none !important;
        transition: transform .16s ease !important;
        white-space: nowrap !important;
    }

    .mobile-more-toggle .mobile-more-hidden-line {
        display: none !important;
    }

    .mobile-more-toggle.is-open .mobile-more-arrow-icon {
        transform: none !important;
    }

    body.theme-dark .mobile-more-toggle .mobile-more-arrow-icon {
        background: transparent !important;
        color: #f8fafc !important;
    }
}


/* --- Stable Beta 0.4 combined QR navigation --- */

/*
QR Labels and Made QR codes now appear as one navigation item: QR Codes.
The separate page can still exist internally, but the main nav is cleaner.
*/



/* --- Stable Beta 0.4 Registered QR codes safe repair --- */

/*
Safe repair after the previous label patch:
- Restores the last styled CSS file.
- Removes the old mobile " / labels" suffix.
*/

.mobile-more-grid a[href="qr-labels.php"]::after {
    content: "" !important;
    display: none !important;
}


/* --- Stable Beta 0.4 registered QR page labels --- */

/*
User-facing QR wording is now Registered QR codes.
The underlying filenames stay the same so old links keep working.
*/


/* --- Stable Beta 0.4 registered QR duplicate label fix --- */

/*
Fix is mostly PHP text cleanup.
QR Labels remains the label generator.
Registered QR codes remains the registry/list page.
*/


/* --- Stable Beta 0.4 Registered QR codes layout polish --- */

/*
Registered QR codes page layout:
- Better hero/header balance.
- Summary stats become proper cards.
- Search/management sections align better.
- Mobile remains stacked and readable.
*/

.qr-registry-page {
    max-width: 1240px !important;
    margin: 0 auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

.qr-registry-page > .page-head,
.qr-registry-page .page-head,
.qr-registry-page > header:first-child {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 18px !important;
    align-items: start !important;
    margin-bottom: 22px !important;
}

.qr-registry-page h1 {
    margin-bottom: 8px !important;
}

.qr-registry-page h1 + .muted,
.qr-registry-page h1 + p {
    max-width: 720px !important;
    line-height: 1.55 !important;
}

/* The small count links under the header */
.qr-registry-page h1 ~ p a,
.qr-registry-page > p a {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 38px !important;
    padding: 0 13px !important;
    border-radius: 999px !important;
    background: #eef4ff !important;
    color: #1d4ed8 !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    margin: 4px 8px 4px 0 !important;
}

/* Make the count block feel like a proper dashboard strip */
.qr-registry-page > p:has(a) {
    margin: 18px 0 14px !important;
}

/* Management/search cards should not feel narrow and random */
.qr-registry-page .card {
    max-width: none !important;
}

.qr-registry-page .card:has(input[type="search"]),
.qr-registry-page .card:has(input[name="q"]),
.qr-registry-page .card:has(select[name="filter"]),
.qr-registry-page .card:has(select) {
    margin-top: 20px !important;
}

.qr-registry-page .card h2,
.qr-registry-page .card h3 {
    margin-top: 0 !important;
}

/* Better two-column form feel inside the search panel */
.qr-registry-page .form-grid,
.qr-registry-page form .grid,
.qr-registry-page form {
    gap: 16px !important;
}

.qr-registry-page .btn-row,
.qr-registry-page .form-actions {
    gap: 10px !important;
}

/* Registry table/card spacing */
.qr-registry-page table {
    width: 100% !important;
}

.qr-registry-page .table-wrap,
.qr-registry-page .card:has(table) {
    overflow-x: auto !important;
}

/* Make the top action button feel aligned */
.qr-registry-page .page-actions,
.qr-registry-page .actions {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

/* Dark mode */
body.theme-dark .qr-registry-page h1 ~ p a,
body.theme-dark .qr-registry-page > p a {
    background: #1e293b !important;
    color: #dbeafe !important;
}

@media (min-width: 900px) {
    .qr-registry-page {
        padding-top: 34px !important;
    }

    /* Turn the top count links into a neat row */
    .qr-registry-page h1 ~ p,
    .qr-registry-page > p {
        max-width: 900px !important;
    }
}

@media (max-width: 820px) {
    .qr-registry-page {
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-top: 22px !important;
    }

    .qr-registry-page > .page-head,
    .qr-registry-page .page-head,
    .qr-registry-page > header:first-child {
        grid-template-columns: 1fr !important;
    }

    .qr-registry-page .page-actions,
    .qr-registry-page .actions {
        justify-content: flex-start !important;
    }

    .qr-registry-page h1 ~ p a,
    .qr-registry-page > p a {
        width: 100% !important;
        justify-content: space-between !important;
    }
}



/* --- Stable Beta 0.4 QR nav and rotate image fix --- */

/*
QR Labels remains the label printer.
Registered QR codes remains the registry/list page.
Location image rotation now returns to the visual card and uses filemtime cache busting.
*/

#location-visual {
    scroll-margin-top: 110px;
}

.location-visual-actions form {
    margin: 0;
}


/* --- Stable Beta 0.4 Registered QR stat card polish --- */

/*
The Registered QR codes counters are clickable filters,
but they should look like proper stat buttons/cards, not loose blue links.
*/

.qr-registry-stats {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
    margin: 22px 0 24px !important;
    max-width: 1100px !important;
}

.qr-registry-stats .stat-card {
    min-height: 96px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 18px 20px !important;
    border: 1px solid #d8e0ee !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    color: #101828 !important;
    box-shadow: 0 14px 36px rgba(15, 23, 42, .07) !important;
    text-decoration: none !important;
    transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease, background .14s ease !important;
}

.qr-registry-stats .stat-card:hover,
.qr-registry-stats .stat-card:focus {
    transform: translateY(-2px) !important;
    border-color: #9db7ff !important;
    background: #f8fbff !important;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .10) !important;
    color: #101828 !important;
}

.qr-registry-stats .stat-card span {
    display: block !important;
    color: #516173 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
}

.qr-registry-stats .stat-card strong {
    display: block !important;
    color: #101828 !important;
    font-size: 34px !important;
    font-weight: 950 !important;
    line-height: .9 !important;
    letter-spacing: -0.05em !important;
    text-decoration: none !important;
}

/* Small visual accent per card */
.qr-registry-stats .stat-card::before {
    content: "";
    width: 34px !important;
    height: 4px !important;
    border-radius: 999px !important;
    background: #2563eb !important;
    opacity: .85 !important;
}

/* Optional selected filter state based on current URL is not server-rendered yet,
   so hover/focus is kept clean without changing behaviour. */

body.theme-dark .qr-registry-stats .stat-card {
    background: #111827 !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
    box-shadow: 0 14px 36px rgba(0, 0, 0, .24) !important;
}

body.theme-dark .qr-registry-stats .stat-card:hover,
body.theme-dark .qr-registry-stats .stat-card:focus {
    background: #1e293b !important;
    border-color: #3b82f6 !important;
    color: #ffffff !important;
}

body.theme-dark .qr-registry-stats .stat-card span {
    color: #a8b6ca !important;
}

body.theme-dark .qr-registry-stats .stat-card strong {
    color: #f8fafc !important;
}

@media (max-width: 1000px) {
    .qr-registry-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 560px) {
    .qr-registry-stats {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin-top: 18px !important;
    }

    .qr-registry-stats .stat-card {
        min-height: 76px !important;
        padding: 15px 16px !important;
        flex-direction: row !important;
        align-items: center !important;
    }

    .qr-registry-stats .stat-card::before {
        display: none !important;
    }

    .qr-registry-stats .stat-card strong {
        font-size: 30px !important;
    }
}




/* ===== CSS from itemid_blank_labels_wording_patch.zip ===== */

:root{
  --bg:#f5f7fb;--bg2:#eef4ff;--card:#fff;--text:#101828;--muted:#667085;--line:#d9e1ec;
  --blue:#2563eb;--blue-dark:#1d4ed8;--blue2:#eff4ff;--green:#12b76a;--amber:#f79009;--danger:#b42318;
  --shadow:0 18px 45px rgba(15,23,42,.08);--radius:18px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:linear-gradient(180deg,#f8fbff 0%,var(--bg) 260px);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Arial,sans-serif;font-size:15px;line-height:1.5}a{color:var(--blue-dark);text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3{letter-spacing:-.04em;line-height:1.15;margin:0 0 10px}h1{font-size:34px}h2{font-size:28px}h3{font-size:19px}.muted{color:var(--muted)}.big{font-size:17px;line-height:1.65}.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:22px;padding:14px 24px;background:rgba(255,255,255,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}.brand{display:inline-flex;gap:10px;align-items:center;color:var(--text);font-weight:900;font-size:21px}.brand:hover{text-decoration:none}.brand-mark{width:34px;height:34px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;background:#111827;color:white;font-size:13px;letter-spacing:-.04em}.main-nav{display:flex;align-items:center;gap:4px;flex:1;flex-wrap:wrap}.main-nav a{color:#344054;padding:9px 10px;border-radius:10px;font-weight:700;font-size:14px}.main-nav a:hover{background:var(--blue2);text-decoration:none}.top-actions{display:flex;align-items:center;gap:12px}.muted-link{color:var(--muted);font-weight:700}.page{max-width:1180px;margin:0 auto;padding:28px 22px 60px}.site-footer{max-width:1180px;margin:0 auto;padding:22px;color:var(--muted);border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px}.page-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin:0 0 20px}.page-head p{margin:4px 0 0}.card{background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:18px;box-shadow:0 10px 30px rgba(15,23,42,.045)}.hero{display:grid;grid-template-columns:2fr 1fr;gap:18px;margin-bottom:18px}.hero .card:first-child{background:linear-gradient(135deg,#fff 0%,#f4f7ff 100%)}.grid{display:grid;gap:18px}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.cards4{grid-template-columns:repeat(4,minmax(0,1fr))}.cards4 .card{margin:0}.cards4 h2{font-size:34px;margin-top:6px}.wide{max-width:920px}.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;background:var(--blue);color:white;padding:11px 16px;font-weight:900;cursor:pointer;text-decoration:none;box-shadow:0 8px 18px rgba(37,99,235,.18);font:inherit}.btn:hover{text-decoration:none;background:var(--blue-dark)}.btn.secondary{background:#e8efff;color:var(--blue-dark);box-shadow:none}.btn.secondary:hover{background:#dbe7ff}.btn.ghost{background:white;color:#344054;border:1px solid var(--line);box-shadow:none}.btn.small{padding:8px 12px;border-radius:10px;font-size:14px}.scan-link{background:#111827;color:#fff!important}.form{display:grid;gap:15px}.form label{display:grid;gap:7px;color:#344054;font-size:14px;font-weight:700}.form input,.form select,.form textarea,.searchbar input,.inline-form input,.inline-form select{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px 13px;background:white;color:var(--text);font:inherit;outline:none}.form input:focus,.form select:focus,.form textarea:focus,.searchbar input:focus,.inline-form input:focus,.inline-form select:focus{border-color:#9db7ff;box-shadow:0 0 0 4px rgba(37,99,235,.10)}.searchbar,.inline-form{display:flex;gap:10px;margin-bottom:18px}.table-wrap{overflow:auto;padding:0}table{width:100%;border-collapse:collapse;min-width:720px}th,td{text-align:left;border-bottom:1px solid var(--line);padding:14px 16px;vertical-align:top}th{font-size:12px;color:var(--muted);font-weight:900;text-transform:uppercase;letter-spacing:.05em;background:#fbfcff}tr:hover td{background:#fbfdff}.pill{display:inline-flex;background:var(--blue2);color:var(--blue-dark);border-radius:999px;padding:4px 9px;font-size:13px;font-weight:900}.pill.low,.pill.Empty,.pill.Missing{background:#fff4ed;color:#b54708}.visual{max-width:100%;border-radius:14px;border:1px solid var(--line);box-shadow:0 8px 20px rgba(15,23,42,.06)}.qr-box{display:inline-block;background:white;padding:12px;border:1px solid var(--line);border-radius:14px}.code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:900;background:#f2f4f7;border:1px solid #e4e7ec;border-radius:10px;padding:4px 8px;display:inline-block}.labels{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.label{background:#fff;border:1px solid #111;border-radius:6px;text-align:center;padding:11px;break-inside:avoid}.label .qr{display:inline-block}.label-toolbar{margin:12px 0}.check{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center;gap:8px!important}.alert{background:#fef3f2;color:var(--danger);border:1px solid #fecdca;border-radius:12px;padding:11px 13px;font-weight:700}.notice{background:#eff8ff;color:#175cd3;border:1px solid #b2ddff;border-radius:12px;padding:11px 13px;font-weight:700}.empty{padding:24px;border:1px dashed var(--line);border-radius:14px;background:#fbfcff;color:var(--muted)}
/* Auth */.auth-body{min-height:100vh!important;display:grid!important;place-items:center!important;padding:28px;background:radial-gradient(circle at top left,rgba(37,99,235,.16),transparent 34%),radial-gradient(circle at bottom right,rgba(16,185,129,.10),transparent 28%),var(--bg)}.auth-shell{width:min(980px,100%);display:grid;grid-template-columns:1.15fr .85fr;gap:18px;align-items:stretch}.auth-panel{background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow)}.auth-copy{padding:36px;display:flex;flex-direction:column;justify-content:center;min-height:440px}.logo-mark{width:54px;height:54px;border-radius:16px;background:#111827;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;letter-spacing:-.04em;margin-bottom:22px}.eyebrow{font-weight:900;color:var(--blue);letter-spacing:.08em;text-transform:uppercase;font-size:13px;margin:0 0 10px}.auth-copy h1{font-size:46px;letter-spacing:-.055em;line-height:1.02;margin:0 0 16px;max-width:620px}.auth-copy .big{font-size:17px;line-height:1.6;max-width:600px;margin:0 0 22px}.feature-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}.feature-list span{background:var(--blue2);color:var(--blue-dark);border:1px solid #dbe7ff;border-radius:999px;padding:8px 11px;font-weight:900;font-size:13px}.auth-card{width:auto!important;padding:30px;display:flex;flex-direction:column;justify-content:center}.auth-card h2{font-size:30px;margin:0 0 8px}.auth-card .muted{margin-top:0;margin-bottom:20px}.auth-card input{height:46px}.subtle-link{font-size:14px;font-weight:800;justify-self:start}.auth-card .actions{margin-top:2px}
@media(max-width:900px){.topbar{align-items:flex-start;flex-direction:column}.top-actions{width:100%;justify-content:space-between}.hero,.grid.two,.grid.cards4{grid-template-columns:1fr}.page-head{display:block}.searchbar,.inline-form{flex-direction:column}.labels{grid-template-columns:repeat(2,1fr)}.auth-shell{grid-template-columns:1fr}.auth-copy{min-height:0;padding:24px}.auth-copy h1{font-size:34px}.auth-card{padding:24px}.site-footer{flex-direction:column}}@media print{body{background:white}.topbar,.page-head,.card:not(.table-wrap),.label-toolbar,.site-footer{display:none!important}.page{padding:0}.labels{grid-template-columns:repeat(4,1fr);gap:8px}.label{page-break-inside:avoid;box-shadow:none}}

/* ItemID QR/template patch */
.section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}.section-head h2{font-size:22px;margin:0 0 4px}.field-builder{display:grid;gap:14px;border:1px solid var(--line);border-radius:16px;padding:16px;background:#fbfcff}.quick-fields{display:flex;gap:8px;flex-wrap:wrap}.field-chip{border:1px solid #dbe7ff;background:#eff4ff;color:#1d4ed8;border-radius:999px;padding:7px 10px;font-weight:800;cursor:pointer}.field-chip:hover{background:#dbe7ff}.fields-list{display:grid;gap:10px}.field-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}.label-sheet{display:grid;grid-template-columns:repeat(var(--label-columns,4),minmax(0,1fr));gap:12px}.print-label-card{background:#fff;border:1px solid #111827;border-radius:10px;text-align:center;padding:12px;break-inside:avoid;min-height:calc(var(--qr-size,120px) + 62px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px}.print-label-card .qr{display:inline-flex;align-items:center;justify-content:center}.print-label-card .print-code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:15px;font-weight:900;letter-spacing:.06em}.print-label-card .print-name{font-size:12px;font-weight:800;color:#344054;line-height:1.25}.row-actions{display:flex;gap:12px;white-space:nowrap}.qr-size-form select{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px 13px;background:white;color:var(--text);font:inherit;outline:none}@media(max-width:700px){.field-row{grid-template-columns:1fr}.label-sheet{grid-template-columns:repeat(2,minmax(0,1fr))}.row-actions{display:grid;gap:6px}}

/* ItemID workflow polish patch */
.mini-action{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;border-radius:10px;padding:7px 10px;font-weight:900;color:#1d4ed8;text-decoration:none;white-space:nowrap}.mini-action:hover{background:#eff4ff;text-decoration:none}.pretty-fields{gap:18px}.pretty-list{gap:12px}.pretty-row{grid-template-columns:1fr 42px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px}.pretty-row input{border:0!important;box-shadow:none!important;padding:9px 10px!important}.icon-button{width:34px;height:34px;border:0;border-radius:10px;background:#f2f4f7;color:#344054;font-size:22px;line-height:1;cursor:pointer;font-weight:900}.icon-button:hover{background:#fee4e2;color:#b42318}.community-check{align-self:end;background:#fbfcff;border:1px solid var(--line);border-radius:14px;padding:12px}.community-check span{display:grid;gap:2px}.community-check small{color:var(--muted);font-weight:600}.field-chip{font-size:13px}.print-label-card{min-height:calc(var(--qr-mm,35mm) + 22mm);padding:8mm 4mm}.print-label-card .print-name{max-width:100%;overflow-wrap:anywhere}.custom-prefix-row{display:none}.item-hero{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.item-hero h2{font-size:24px;margin:4px 0 0}.activity-line{border-bottom:1px solid var(--line);padding:0 0 10px;margin:0 0 10px}.qr-size-form{margin-top:14px;display:flex;gap:10px;align-items:end;flex-wrap:wrap}.qr-size-form label{min-width:190px}.add-item-flow{gap:20px}.flow-step{display:flex;gap:14px;align-items:flex-start;border-top:1px solid var(--line);padding-top:18px}.flow-step:first-of-type{border-top:0;padding-top:0}.flow-step h2{font-size:22px;margin:0 0 4px}.step-badge{width:34px;height:34px;border-radius:999px;background:#111827;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:900;flex:0 0 auto}.field-as-card{border:1px dashed #b7c5df;border-radius:14px;padding:13px;background:#fbfcff}.field-as-card p{margin:4px 0 10px}.code-pill{display:inline-flex;background:#f2f4f7;border:1px solid #e4e7ec;border-radius:10px;padding:5px 9px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:900}@media(max-width:800px){.item-hero{grid-template-columns:1fr}.pretty-row{grid-template-columns:1fr 42px}.qr-size-form{display:grid}.flow-step{display:grid}.field-as-card .btn{width:100%}}


/* ItemID workflow patch 2 */
.beta-badge{display:inline-flex;align-items:center;border:1px solid #c7d7fe;background:#eff4ff;color:#1d4ed8;border-radius:999px;padding:2px 7px;font-size:11px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;line-height:1.4}.template-create-card{display:flex;align-items:center;justify-content:space-between;gap:14px}.template-create-card p{margin:3px 0 0}.compact-check{width:auto!important;display:flex!important;grid-template-columns:auto 1fr!important;align-items:center!important;gap:8px!important;min-width:170px}.compact-check input{width:auto!important}.qr-box canvas,.qr-box img{display:block!important;max-width:100%!important;max-height:100%!important}.print-label-card{overflow:hidden}.print-label-card .dynamic-qr canvas,.print-label-card .dynamic-qr img{display:block!important}.print-label-card .print-code,.print-label-card .print-name{max-width:100%;overflow-wrap:anywhere}.single-print-label{overflow:hidden}@media(max-width:800px){.template-create-card{display:grid}.compact-check{min-width:0}}

/* Items table action-cell border fix */
td.row-actions,
th.row-actions {
    display: table-cell !important;
    white-space: nowrap;
    vertical-align: middle;
    border-bottom: 1px solid var(--line) !important;
}

td.row-actions {
    min-width: 230px;
}

td.row-actions .mini-action {
    margin-right: 8px;
    margin-bottom: 0;
}

td.row-actions .mini-action:last-child {
    margin-right: 0;
}

tr:hover td.row-actions {
    background: #fbfdff;
}

@media (max-width: 760px) {
    td.row-actions {
        min-width: 170px;
    }

    td.row-actions .mini-action {
        display: flex;
        width: 100%;
        margin-right: 0;
        margin-bottom: 6px;
    }

    td.row-actions .mini-action:last-child {
        margin-bottom: 0;
    }
}

/* Stable Beta 0.4 additions */
.btn.danger,
.btn.danger.ghost {
  color: #b42318 !important;
  border-color: #fecdca !important;
  background: #fff !important;
  box-shadow: none !important;
}
.btn.danger:hover,
.btn.danger.ghost:hover {
  background: #fef3f2 !important;
  text-decoration: none;
}
.mini-action.danger {
  color: #b42318 !important;
  border-color: #fecdca !important;
  background: #fff !important;
}
.export-card {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.export-card:hover {
  transform: translateY(-2px);
  text-decoration: none;
  border-color: #b8c7e6;
  box-shadow: 0 18px 42px rgba(15,23,42,.09);
}
.site-footer a { color: inherit; font-weight: 800; }

/* Stable Beta 0.4 template/item field builder polish */
.item-template-field-row {
    display: grid;
    grid-template-columns: minmax(150px, .35fr) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 12px;
    border: 1px solid #d8e0ee;
    border-radius: 14px;
    background: #ffffff;
    margin-bottom: 10px;
}

.template-field-input-wrap {
    display: grid;
    gap: 6px;
}

.template-field-input-wrap input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    margin: 8px 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.field-unit-hint {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 9px;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 900;
}

.small {
    font-size: 12px;
}

@media (max-width: 700px) {
    .item-template-field-row {
        grid-template-columns: 1fr;
    }
}

/* --- Profile/preferences patch CSS --- */

/* Profile and preferences */
.profile-settings-row {
    display: grid;
    grid-template-columns: 112px 1fr;
    gap: 22px;
    align-items: center;
    margin-bottom: 20px;
}

.profile-settings-avatar {
    width: 96px;
    height: 96px;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid #d8e0ee;
    background: #eef4ff;
    color: #1d4ed8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    font-weight: 900;
}

.profile-settings-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.checkbox-line {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    font-weight: 800;
}

.checkbox-line input,
.checkbox-card input {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.checkbox-card {
    min-height: 70px;
    border: 1px solid #d8e0ee;
    border-radius: 14px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}

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

.checkbox-card small {
    margin-top: 4px;
    color: #64748b;
}

@media (max-width: 650px) {
    .profile-settings-row {
        grid-template-columns: 1fr;
    }
}


/* --- Stable Beta 0.4 theme toggle + dark fix --- */

.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,255,255,.94);
    border-bottom: 1px solid #d8e0ee;
    backdrop-filter: blur(14px);
}

.topbar-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    gap: 22px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #0f172a;
    flex: 0 0 auto;
}

.brand:hover {
    text-decoration: none;
}

.brand-name {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1;
}

.beta-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 19px;
    padding: 0 7px;
    border: 1px solid #b8c7e6;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    white-space: nowrap;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 auto;
    min-width: 0;
}

.main-nav a {
    color: #335075;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
}

.main-nav a:hover {
    color: #2563eb;
    text-decoration: none;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

.scan-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 16px;
    border-radius: 12px;
    background: #111827;
    color: #ffffff !important;
    text-decoration: none;
    font-weight: 800;
    font-size: 14px;
    box-shadow: 0 10px 24px rgba(17, 24, 39, .18);
}

.scan-button:hover {
    text-decoration: none;
}

.profile-menu {
    position: relative;
}

.profile-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 4px 8px 4px 4px;
    border: 1px solid #d8e0ee;
    border-radius: 999px;
    background: #ffffff;
    color: #0f172a;
    text-decoration: none;
    font-weight: 800;
    cursor: pointer;
    max-width: 260px;
}

.profile-avatar {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    object-fit: cover;
    background: #eef4ff;
    color: #1d4ed8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    border: 1px solid #c9d7f2;
    overflow: hidden;
    flex: 0 0 auto;
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-label {
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.profile-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 280px;
    border: 1px solid #d8e0ee;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .16);
    padding: 10px;
    display: none;
}

.profile-menu:hover .profile-dropdown,
.profile-menu:focus-within .profile-dropdown {
    display: block;
}

.profile-dropdown-header {
    padding: 10px;
    border-bottom: 1px solid #edf2f7;
    margin-bottom: 8px;
}

.profile-dropdown-header strong,
.profile-dropdown-header span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-dropdown-header span {
    color: #64748b;
    font-size: 13px;
    margin-top: 2px;
}

.profile-dropdown a {
    display: block;
    padding: 10px;
    border-radius: 12px;
    color: #334155;
    text-decoration: none;
    font-weight: 800;
}

.profile-dropdown a:hover {
    background: #f1f5f9;
    color: #0f172a;
    text-decoration: none;
}

.theme-toggle-form {
    margin: 0;
}

.theme-toggle {
    width: 62px;
    height: 34px;
    border: 1px solid #d8e0ee;
    border-radius: 999px;
    background: #eef4ff;
    position: relative;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    box-shadow: none;
}

.theme-toggle-bulb {
    position: absolute;
    left: 8px;
    font-size: 15px;
    line-height: 1;
    z-index: 2;
    opacity: .8;
}

.theme-toggle-knob {
    position: absolute;
    left: 3px;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 3px 10px rgba(15,23,42,.18);
    transition: transform .16s ease;
}

.theme-toggle.is-dark {
    background: #172554;
    border-color: #2563eb;
}

.theme-toggle.is-dark .theme-toggle-bulb {
    left: 36px;
    opacity: 1;
}

.theme-toggle.is-dark .theme-toggle-knob {
    transform: translateX(28px);
    background: #0f172a;
}

.app-shell {
    max-width: 1240px;
    margin: 0 auto;
    padding: 28px 18px 48px;
}

/* Dark theme variables and hard overrides */
body.theme-dark {
    --bg:#0b1220;
    --bg2:#0f172a;
    --card:#111827;
    --text:#f8fafc;
    --muted:#a8b6ca;
    --line:#334155;
    --blue2:#172554;
    background: #0b1220 !important;
    color: #f8fafc !important;
    color-scheme: dark;
}

body.theme-dark .topbar {
    background: rgba(15, 23, 42, .96) !important;
    border-bottom-color: #334155 !important;
}

body.theme-dark .brand,
body.theme-dark .brand-name,
body.theme-dark .profile-label {
    color: #f8fafc !important;
}

body.theme-dark .beta-badge {
    background: #172554 !important;
    border-color: #2563eb !important;
    color: #bfdbfe !important;
}

body.theme-dark .main-nav a {
    color: #cbd5e1 !important;
}

body.theme-dark .main-nav a:hover {
    background: #1e293b !important;
    color: #ffffff !important;
}

body.theme-dark .profile-trigger,
body.theme-dark .profile-dropdown,
body.theme-dark .card,
body.theme-dark section.card,
body.theme-dark form.card,
body.theme-dark details.card,
body.theme-dark .table-wrap,
body.theme-dark .metric-card,
body.theme-dark .filter-panel,
body.theme-dark .template-field-card,
body.theme-dark .template-field-row,
body.theme-dark .location-summary,
body.theme-dark .auth-panel {
    background: #111827 !important;
    background-color: #111827 !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
    box-shadow: 0 18px 45px rgba(0,0,0,.22) !important;
}

body.theme-dark .hero .card:first-child {
    background: linear-gradient(135deg, #111827 0%, #172033 100%) !important;
}

body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark strong,
body.theme-dark label,
body.theme-dark th,
body.theme-dark td {
    color: #f8fafc !important;
}

body.theme-dark .muted,
body.theme-dark .help,
body.theme-dark small,
body.theme-dark .site-footer,
body.theme-dark .metric-card span {
    color: #a8b6ca !important;
}

body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

body.theme-dark input::placeholder,
body.theme-dark textarea::placeholder {
    color: #74839a !important;
}

body.theme-dark table,
body.theme-dark tbody,
body.theme-dark tr {
    background: #111827 !important;
    color: #f8fafc !important;
}

body.theme-dark thead,
body.theme-dark th {
    background: #0f172a !important;
    color: #cbd5e1 !important;
}

body.theme-dark td {
    background: #111827 !important;
    color: #e5edf8 !important;
    border-color: #334155 !important;
}

body.theme-dark tr:hover td {
    background: #172033 !important;
}

body.theme-dark .code-pill,
body.theme-dark .badge,
body.theme-dark .pill,
body.theme-dark .status-pill,
body.theme-dark .tag,
body.theme-dark .field-unit-hint {
    background: #1e293b !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}

body.theme-dark .btn.secondary,
body.theme-dark .btn.ghost,
body.theme-dark a.btn.secondary,
body.theme-dark a.btn.ghost {
    background: #1e293b !important;
    color: #bfdbfe !important;
    border: 1px solid #334155 !important;
    box-shadow: none !important;
}

body.theme-dark .btn.secondary:hover,
body.theme-dark .btn.ghost:hover {
    background: #26344a !important;
    color: #ffffff !important;
}

body.theme-dark .qr-label-preview,
body.theme-dark .qr-preview,
body.theme-dark .qr-card-preview,
body.theme-dark .print-label,
body.theme-dark .label-card,
body.theme-dark .print-sheet,
body.theme-dark .print-sheet .label,
body.theme-dark canvas,
body.theme-dark .qr-box {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #111827 !important;
    border-color: #111827 !important;
}

/* System preference can be selected in profile, but the top toggle only switches light/dark. */
@media (max-width: 900px) {
    .topbar-inner {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 12px;
    }

    .main-nav {
        order: 3;
        width: 100%;
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .topbar-actions {
        margin-left: auto;
    }

    .profile-label {
        display: none;
    }
}


/* --- Stable Beta 0.4 sun/moon theme toggle positioning --- */

.topbar-inner {
    display: flex !important;
    align-items: center !important;
}

.main-nav {
    justify-content: flex-start;
}

.topbar-actions {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.theme-toggle-form {
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}

.theme-toggle {
    width: 66px !important;
    height: 36px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 999px !important;
    background: #e0f2fe !important;
    position: relative !important;
    cursor: pointer !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

.theme-icon {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1 !important;
    font-size: 15px !important;
    line-height: 1 !important;
    pointer-events: none !important;
}

.theme-icon-sun {
    left: 10px !important;
    color: #f59e0b !important;
    opacity: 1 !important;
}

.theme-icon-moon {
    right: 11px !important;
    color: #64748b !important;
    opacity: .55 !important;
}

.theme-toggle-knob {
    position: absolute !important;
    left: 3px !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    box-shadow: 0 3px 10px rgba(15,23,42,.22) !important;
    transition: transform .16s ease, background .16s ease !important;
    z-index: 2 !important;
}

.theme-toggle.is-dark {
    background: #172554 !important;
    border-color: #2563eb !important;
}

.theme-toggle.is-dark .theme-toggle-knob {
    transform: translateX(30px) !important;
    background: #0f172a !important;
}

.theme-toggle.is-dark .theme-icon-sun {
    opacity: .45 !important;
    color: #94a3b8 !important;
}

.theme-toggle.is-dark .theme-icon-moon {
    opacity: 1 !important;
    color: #dbeafe !important;
}

body.theme-dark .theme-toggle {
    background: #172554 !important;
    border-color: #2563eb !important;
}

@media (max-width: 900px) {
    .topbar-actions {
        margin-left: auto !important;
    }
}


/* --- Stable Beta 0.4 dark mode button/pill fix --- */

/* General white button fix in dark mode */
body.theme-dark button,
body.theme-dark input[type="submit"],
body.theme-dark input[type="button"],
body.theme-dark .btn,
body.theme-dark a.btn {
    border-color: #334155;
}

body.theme-dark .btn:not(.danger):not(.primary),
body.theme-dark a.btn:not(.danger):not(.primary),
body.theme-dark button.btn:not(.danger):not(.primary) {
    background: #1e293b !important;
    color: #dbeafe !important;
    border: 1px solid #334155 !important;
    box-shadow: none !important;
}

body.theme-dark .btn:not(.danger):not(.primary):hover,
body.theme-dark a.btn:not(.danger):not(.primary):hover,
body.theme-dark button.btn:not(.danger):not(.primary):hover {
    background: #26344a !important;
    color: #ffffff !important;
}

/* Keep main action buttons blue */
body.theme-dark .btn:first-child,
body.theme-dark .btn.primary,
body.theme-dark button.btn.primary,
body.theme-dark a.btn.primary {
    background: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
}

/* Delete/danger buttons were showing white. */
body.theme-dark .btn.danger,
body.theme-dark a.btn.danger,
body.theme-dark button.btn.danger,
body.theme-dark .danger,
body.theme-dark a[href*="delete.php"],
body.theme-dark button[name*="delete"],
body.theme-dark button[value*="delete"],
body.theme-dark button[value*="clear_reserved"],
body.theme-dark .delete-button,
body.theme-dark .clear-button {
    background: #3f1d1d !important;
    color: #fecaca !important;
    border: 1px solid #7f1d1d !important;
    box-shadow: none !important;
}

body.theme-dark .btn.danger:hover,
body.theme-dark a.btn.danger:hover,
body.theme-dark button.btn.danger:hover,
body.theme-dark .danger:hover,
body.theme-dark a[href*="delete.php"]:hover,
body.theme-dark button[name*="delete"]:hover,
body.theme-dark button[value*="delete"]:hover,
body.theme-dark button[value*="clear_reserved"]:hover,
body.theme-dark .delete-button:hover,
body.theme-dark .clear-button:hover {
    background: #7f1d1d !important;
    color: #ffffff !important;
}

/* Some pages use plain anchors styled as buttons without btn classes. */
body.theme-dark .row-actions a,
body.theme-dark .table-actions-cell a,
body.theme-dark .actions a,
body.theme-dark .actions button {
    border-color: #334155;
}

body.theme-dark .row-actions a:not(.danger):not([href*="delete.php"]),
body.theme-dark .table-actions-cell a:not(.danger):not([href*="delete.php"]) {
    background: #1e293b !important;
    color: #dbeafe !important;
    border: 1px solid #334155 !important;
}

body.theme-dark .row-actions a:not(.danger):not([href*="delete.php"]):hover,
body.theme-dark .table-actions-cell a:not(.danger):not([href*="delete.php"]):hover {
    background: #26344a !important;
    color: #ffffff !important;
}

/* Code pills were still too pale in some table cells. */
body.theme-dark .code-pill,
body.theme-dark td .code-pill,
body.theme-dark .qr-code-pill,
body.theme-dark .item-id-pill {
    background: #1e293b !important;
    color: #e2e8f0 !important;
    border: 1px solid #334155 !important;
}

/* Search filter detail summary was still white on some browsers. */
body.theme-dark details,
body.theme-dark details summary,
body.theme-dark details.card,
body.theme-dark details.card summary {
    background: #111827 !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

/* Preserve white only where it must be white for QR/print. */
body.theme-dark .qr-label-preview,
body.theme-dark .qr-preview,
body.theme-dark .qr-card-preview,
body.theme-dark .print-label,
body.theme-dark .label-card,
body.theme-dark .print-sheet,
body.theme-dark .print-sheet .label,
body.theme-dark canvas,
body.theme-dark .qr-box {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #111827 !important;
    border-color: #111827 !important;
}

/* Same button fixes for system theme when OS is dark. */
@media (prefers-color-scheme: dark) {
    body.theme-system .btn:not(.danger):not(.primary),
    body.theme-system a.btn:not(.danger):not(.primary),
    body.theme-system button.btn:not(.danger):not(.primary) {
        background: #1e293b !important;
        color: #dbeafe !important;
        border: 1px solid #334155 !important;
        box-shadow: none !important;
    }

    body.theme-system .btn.danger,
    body.theme-system a.btn.danger,
    body.theme-system button.btn.danger,
    body.theme-system .danger,
    body.theme-system a[href*="delete.php"],
    body.theme-system button[name*="delete"],
    body.theme-system button[value*="delete"],
    body.theme-system button[value*="clear_reserved"],
    body.theme-system .delete-button,
    body.theme-system .clear-button {
        background: #3f1d1d !important;
        color: #fecaca !important;
        border: 1px solid #7f1d1d !important;
        box-shadow: none !important;
    }

    body.theme-system .code-pill,
    body.theme-system td .code-pill,
    body.theme-system .qr-code-pill,
    body.theme-system .item-id-pill {
        background: #1e293b !important;
        color: #e2e8f0 !important;
        border: 1px solid #334155 !important;
    }

    body.theme-system details,
    body.theme-system details summary,
    body.theme-system details.card,
    body.theme-system details.card summary {
        background: #111827 !important;
        color: #f8fafc !important;
        border-color: #334155 !important;
    }
}


/* --- Stable Beta 0.4 dark cleanup: toggle, white panels, buttons --- */

/* Hide old/broken theme toggle visuals if old CSS is still cached on a page. */
.theme-toggle,
.theme-toggle-form,
.theme-icon,
.theme-option,
.theme-toggle-bulb {
    display: none !important;
}

/* Clean topbar layout */
.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,255,255,.94);
    border-bottom: 1px solid #d8e0ee;
    backdrop-filter: blur(14px);
}

.topbar-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    gap: 22px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #0f172a;
    flex: 0 0 auto;
}

.brand:hover {
    text-decoration: none;
}

.brand-name {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1;
}

.beta-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 19px;
    padding: 0 7px;
    border: 1px solid #b8c7e6;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    white-space: nowrap;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 auto;
    min-width: 0;
}

.main-nav a {
    color: #335075;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
}

.main-nav a:hover {
    color: #2563eb;
    text-decoration: none;
}

.topbar-actions {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex: 0 0 auto;
}

.scan-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 16px;
    border-radius: 12px;
    background: #111827;
    color: #ffffff !important;
    text-decoration: none;
    font-weight: 800;
    font-size: 14px;
    box-shadow: 0 10px 24px rgba(17,24,39,.18);
}

.scan-button:hover {
    text-decoration: none;
}

.scan-icon {
    font-size: 15px;
    line-height: 1;
}

.profile-menu {
    position: relative;
}

.profile-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 4px 8px 4px 4px;
    border: 1px solid #d8e0ee;
    border-radius: 999px;
    background: #ffffff;
    color: #0f172a;
    text-decoration: none;
    font-weight: 800;
    cursor: pointer;
    max-width: 260px;
}

.profile-avatar {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    border: 1px solid #c9d7f2;
    overflow: hidden;
    flex: 0 0 auto;
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-label {
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.profile-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 280px;
    border: 1px solid #d8e0ee;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(15,23,42,.16);
    padding: 10px;
    display: none;
}

.profile-menu:hover .profile-dropdown,
.profile-menu:focus-within .profile-dropdown {
    display: block;
}

.profile-dropdown-header {
    padding: 10px;
    border-bottom: 1px solid #edf2f7;
    margin-bottom: 8px;
}

.profile-dropdown-header strong,
.profile-dropdown-header span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-dropdown-header span {
    color: #64748b;
    font-size: 13px;
    margin-top: 2px;
}

.profile-dropdown a {
    display: block;
    padding: 10px;
    border-radius: 12px;
    color: #334155;
    text-decoration: none;
    font-weight: 800;
}

.profile-dropdown a:hover {
    background: #f1f5f9;
    color: #0f172a;
    text-decoration: none;
}

/* New independent sun/moon switch */
.mode-switch-form {
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}

.mode-switch {
    width: 72px !important;
    height: 38px !important;
    border-radius: 999px !important;
    border: 1px solid #cbd5e1 !important;
    background: #e0f2fe !important;
    position: relative !important;
    cursor: pointer !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: inline-flex !important;
    align-items: center !important;
    box-shadow: none !important;
}

.mode-track-icon {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    pointer-events: none !important;
}

.mode-track-sun {
    left: 11px !important;
    color: #f59e0b !important;
    opacity: .25 !important;
}

.mode-track-moon {
    right: 12px !important;
    color: #64748b !important;
    opacity: .35 !important;
}

.mode-knob {
    position: absolute !important;
    left: 3px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #f59e0b !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    box-shadow: 0 3px 10px rgba(15,23,42,.22) !important;
    transition: transform .16s ease, background .16s ease, color .16s ease !important;
    z-index: 2 !important;
}

.mode-switch.mode-dark {
    background: #172554 !important;
    border-color: #2563eb !important;
}

.mode-switch.mode-dark .mode-knob {
    transform: translateX(34px) !important;
    background: #0f172a !important;
    color: #dbeafe !important;
}

.mode-switch.mode-dark .mode-track-sun {
    color: #94a3b8 !important;
    opacity: .35 !important;
}

.mode-switch.mode-dark .mode-track-moon {
    opacity: .22 !important;
}

/* Dark theme core */
body.theme-dark {
    --bg:#0b1220;
    --bg2:#0f172a;
    --card:#111827;
    --text:#f8fafc;
    --muted:#a8b6ca;
    --line:#334155;
    --blue2:#172554;
    background:#0b1220 !important;
    color:#f8fafc !important;
    color-scheme: dark;
}

body.theme-dark .topbar {
    background: rgba(15,23,42,.96) !important;
    border-bottom-color: #334155 !important;
}

body.theme-dark .brand,
body.theme-dark .brand-name,
body.theme-dark .profile-label {
    color:#f8fafc !important;
}

body.theme-dark .beta-badge {
    background:#172554 !important;
    border-color:#2563eb !important;
    color:#bfdbfe !important;
}

body.theme-dark .main-nav a {
    color:#cbd5e1 !important;
}

body.theme-dark .main-nav a:hover {
    background:#1e293b !important;
    color:#ffffff !important;
}

body.theme-dark .scan-button {
    background:#2563eb !important;
    color:#ffffff !important;
}

body.theme-dark .profile-trigger,
body.theme-dark .profile-dropdown {
    background:#111827 !important;
    border-color:#334155 !important;
    color:#f8fafc !important;
}

body.theme-dark .profile-dropdown-header {
    border-bottom-color:#334155 !important;
}

body.theme-dark .profile-dropdown-header span {
    color:#94a3b8 !important;
}

body.theme-dark .profile-dropdown a {
    color:#cbd5e1 !important;
}

body.theme-dark .profile-dropdown a:hover {
    background:#1e293b !important;
    color:#ffffff !important;
}

/* Kill the stubborn white panels seen in Items/Add Item/Templates/Made QR codes */
body.theme-dark .card,
body.theme-dark section.card,
body.theme-dark form.card,
body.theme-dark details.card,
body.theme-dark .table-wrap,
body.theme-dark .items-filter-panel,
body.theme-dark .items-filter-panel[open],
body.theme-dark .items-filter-panel summary,
body.theme-dark .field-as-card,
body.theme-dark .field-as-card.template-create-card,
body.theme-dark .template-fields-panel,
body.theme-dark .template-field-builder,
body.theme-dark .template-share-card,
body.theme-dark .template-preset,
body.theme-dark .template-field-row,
body.theme-dark .template-field-row-main,
body.theme-dark .template-field-row-extra,
body.theme-dark .template-options-wrap,
body.theme-dark .template-required,
body.theme-dark .template-create-card,
body.theme-dark .location-summary,
body.theme-dark .scanner-box,
body.theme-dark .notice:not(.print-label):not(.label-card),
body.theme-dark .alert,
body.theme-dark .stat-card,
body.theme-dark .metric-card {
    background:#111827 !important;
    background-color:#111827 !important;
    color:#f8fafc !important;
    border-color:#334155 !important;
    box-shadow:0 18px 45px rgba(0,0,0,.22) !important;
}

body.theme-dark .hero .card:first-child {
    background:linear-gradient(135deg,#111827 0%,#172033 100%) !important;
}

body.theme-dark .items-filter-panel *,
body.theme-dark .template-field-builder *,
body.theme-dark .template-share-card *,
body.theme-dark .template-preset *,
body.theme-dark .field-as-card *,
body.theme-dark .template-fields-panel *,
body.theme-dark .card *,
body.theme-dark .table-wrap * {
    color: inherit;
}

body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark strong,
body.theme-dark label,
body.theme-dark th,
body.theme-dark td,
body.theme-dark summary,
body.theme-dark .section-head,
body.theme-dark .page-head {
    color:#f8fafc !important;
}

body.theme-dark .muted,
body.theme-dark .help,
body.theme-dark .hint,
body.theme-dark small,
body.theme-dark .template-help,
body.theme-dark .template-field-hint,
body.theme-dark .site-footer,
body.theme-dark .items-filter-grid label {
    color:#a8b6ca !important;
}

body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea,
body.theme-dark .items-search-row input,
body.theme-dark .items-filter-grid select,
body.theme-dark .template-field-row input,
body.theme-dark .template-field-row select {
    background:#0f172a !important;
    border-color:#334155 !important;
    color:#f8fafc !important;
}

body.theme-dark input::placeholder,
body.theme-dark textarea::placeholder {
    color:#74839a !important;
}

body.theme-dark table,
body.theme-dark tbody,
body.theme-dark tr {
    background:#111827 !important;
    color:#f8fafc !important;
}

body.theme-dark thead,
body.theme-dark th {
    background:#0f172a !important;
    color:#cbd5e1 !important;
}

body.theme-dark td {
    background:#111827 !important;
    color:#e5edf8 !important;
    border-color:#334155 !important;
}

body.theme-dark tr:hover td {
    background:#172033 !important;
}

body.theme-dark .code-pill,
body.theme-dark td .code-pill,
body.theme-dark .qr-code-pill,
body.theme-dark .item-id-pill,
body.theme-dark .badge,
body.theme-dark .pill,
body.theme-dark .status-pill,
body.theme-dark .tag,
body.theme-dark .field-unit-hint {
    background:#1e293b !important;
    color:#e2e8f0 !important;
    border:1px solid #334155 !important;
}

/* Buttons, including delete buttons that were staying white */
body.theme-dark .btn,
body.theme-dark a.btn,
body.theme-dark button.btn,
body.theme-dark .row-actions a,
body.theme-dark .table-actions-cell a,
body.theme-dark .actions a,
body.theme-dark .actions button {
    background:#1e293b !important;
    color:#dbeafe !important;
    border:1px solid #334155 !important;
    box-shadow:none !important;
}

body.theme-dark .btn:hover,
body.theme-dark a.btn:hover,
body.theme-dark button.btn:hover,
body.theme-dark .row-actions a:hover,
body.theme-dark .table-actions-cell a:hover,
body.theme-dark .actions a:hover,
body.theme-dark .actions button:hover {
    background:#26344a !important;
    color:#ffffff !important;
}

body.theme-dark .btn.danger,
body.theme-dark a.btn.danger,
body.theme-dark button.btn.danger,
body.theme-dark a[href*="delete.php"],
body.theme-dark button[name*="delete"],
body.theme-dark button[value*="delete"],
body.theme-dark button[value*="clear_reserved"],
body.theme-dark .delete-button,
body.theme-dark .clear-button {
    background:#3f1d1d !important;
    color:#fecaca !important;
    border:1px solid #7f1d1d !important;
}

body.theme-dark .btn.danger:hover,
body.theme-dark a.btn.danger:hover,
body.theme-dark button.btn.danger:hover,
body.theme-dark a[href*="delete.php"]:hover,
body.theme-dark button[name*="delete"]:hover,
body.theme-dark button[value*="delete"]:hover,
body.theme-dark button[value*="clear_reserved"]:hover {
    background:#7f1d1d !important;
    color:#ffffff !important;
}

/* Primary actions stay blue */
body.theme-dark .btn.primary,
body.theme-dark a.btn.primary,
body.theme-dark .actions > .btn:first-child:not(.danger),
body.theme-dark .page-head .btn:last-child:not(.danger) {
    background:#2563eb !important;
    color:#ffffff !important;
    border-color:#2563eb !important;
}

/* QR and print surfaces stay white deliberately */
body.theme-dark .qr-label-preview,
body.theme-dark .qr-preview,
body.theme-dark .qr-card-preview,
body.theme-dark .print-label,
body.theme-dark .label-card,
body.theme-dark .print-sheet,
body.theme-dark .print-sheet .label,
body.theme-dark canvas,
body.theme-dark .qr-box {
    background:#ffffff !important;
    background-color:#ffffff !important;
    color:#111827 !important;
    border-color:#111827 !important;
}

@media (max-width:900px) {
    .topbar-inner {
        align-items:flex-start;
        flex-wrap:wrap;
        gap:12px;
    }

    .main-nav {
        order:3;
        width:100%;
        overflow-x:auto;
        padding-bottom:4px;
    }

    .topbar-actions {
        margin-left:auto !important;
    }

    .profile-label {
        display:none;
    }
}


/* --- Stable Beta 0.4 profile dropdown hover bridge + demo link polish --- */

.profile-menu {
    position: relative !important;
}

.profile-dropdown {
    top: calc(100% + 6px) !important;
    right: 0 !important;
}

/* Invisible bridge stops the dropdown disappearing while moving from profile button to menu. */
.profile-menu::after {
    content: '' !important;
    position: absolute !important;
    left: -12px !important;
    right: -12px !important;
    top: 100% !important;
    height: 14px !important;
    display: block !important;
    background: transparent !important;
    pointer-events: auto !important;
}

.profile-menu:hover .profile-dropdown,
.profile-menu:focus-within .profile-dropdown,
.profile-dropdown:hover {
    display: block !important;
}

.auth-extra-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.demo-page {
    display: grid;
    gap: 22px;
}

.demo-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, .9fr);
    gap: 18px;
    align-items: stretch;
}

.demo-card-stack {
    display: grid;
    gap: 14px;
}

.demo-steps {
    counter-reset: demoStep;
    display: grid;
    gap: 12px;
}

.demo-step {
    counter-increment: demoStep;
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 12px;
    align-items: start;
    padding: 14px;
    border: 1px solid var(--line, #d8e0ee);
    border-radius: 16px;
    background: var(--card, #fff);
}

.demo-step::before {
    content: counter(demoStep);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #2563eb;
    color: #fff;
    font-weight: 900;
}

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

.demo-mini {
    border: 1px solid var(--line, #d8e0ee);
    border-radius: 18px;
    background: var(--card, #fff);
    padding: 18px;
}

.demo-mini h3 {
    margin-top: 0;
}

.demo-fake-table {
    display: grid;
    gap: 8px;
}

.demo-fake-row {
    display: grid;
    grid-template-columns: 90px 1fr 100px;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--line, #d8e0ee);
    border-radius: 12px;
    align-items: center;
}

.demo-fake-qr {
    width: 54px;
    height: 54px;
    border-radius: 10px;
    background:
        linear-gradient(90deg, #111 10px, transparent 10px) 0 0/18px 18px,
        linear-gradient(#111 10px, transparent 10px) 0 0/18px 18px,
        #fff;
    border: 8px solid #fff;
    box-shadow: 0 0 0 1px #d8e0ee;
}

body.theme-dark .demo-step,
body.theme-dark .demo-mini,
body.theme-dark .demo-fake-row {
    background: #111827 !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

body.theme-dark .demo-fake-qr {
    background:
        linear-gradient(90deg, #111 10px, transparent 10px) 0 0/18px 18px,
        linear-gradient(#111 10px, transparent 10px) 0 0/18px 18px,
        #fff !important;
    border-color: #fff !important;
}

@media (max-width: 900px) {
    .demo-hero,
    .demo-grid {
        grid-template-columns: 1fr;
    }
}


/* --- Stable Beta 0.4 public demo dashboard + login required modal --- */

.public-demo-body {
    min-height: 100vh;
    background: linear-gradient(180deg, #f6f9ff 0%, #eef3fb 260px);
    color: #101828;
}

.public-demo-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,255,255,.94);
    border-bottom: 1px solid #d8e0ee;
    backdrop-filter: blur(14px);
}

.public-demo-topbar-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 18px;
}

.public-demo-nav {
    display: flex;
    gap: 14px;
    align-items: center;
    flex: 1 1 auto;
    overflow-x: auto;
}

.public-demo-nav a,
.public-demo-nav button {
    border: 0;
    background: transparent;
    color: #335075;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    padding: 8px 0;
}

.public-demo-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.demo-shell {
    max-width: 1240px;
    margin: 0 auto;
    padding: 34px 18px 60px;
}

.demo-disabled {
    cursor: pointer;
}

.demo-locked-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 900;
}

.demo-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, .48);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.demo-modal-backdrop.is-open {
    display: flex;
}

.demo-modal {
    width: min(520px, 100%);
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid #d8e0ee;
    box-shadow: 0 28px 80px rgba(15,23,42,.26);
    padding: 24px;
}

.demo-modal h2 {
    margin-top: 0;
}

.demo-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.demo-preview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, .9fr);
    gap: 18px;
    margin-bottom: 22px;
}

.demo-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}

.demo-metric {
    border: 1px solid #d8e0ee;
    background: #ffffff;
    border-radius: 18px;
    padding: 20px;
    text-decoration: none;
    color: #101828;
}

.demo-metric span {
    display: flex;
    justify-content: space-between;
    color: #667085;
}

.demo-metric span::after {
    content: '↗';
    color: #98a2b3;
    font-weight: 900;
}

.demo-metric strong {
    display: block;
    font-size: 34px;
    margin-top: 8px;
}

.demo-fake-table-card {
    overflow: hidden;
}

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

.demo-table th,
.demo-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #e4eaf3;
    text-align: left;
}

.demo-table th {
    color: #667085;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.demo-workflow-list {
    margin: 0;
    padding-left: 22px;
    color: #516173;
    line-height: 1.7;
}

.demo-qr-card {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
    padding: 14px;
    border: 1px solid #d8e0ee;
    border-radius: 18px;
    background: #f8fbff;
}

.demo-qr-box {
    width: 84px;
    height: 84px;
    border-radius: 12px;
    background:
        linear-gradient(90deg, #111 9px, transparent 9px) 0 0/18px 18px,
        linear-gradient(#111 9px, transparent 9px) 0 0/18px 18px,
        #fff;
    border: 10px solid #fff;
    box-shadow: 0 0 0 1px #d8e0ee;
    flex: 0 0 auto;
}

.demo-hint-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.demo-hint {
    border: 1px solid #d8e0ee;
    border-radius: 18px;
    padding: 18px;
    background: #ffffff;
}

.demo-hint h3 {
    margin-top: 0;
}

@media (max-width: 900px) {
    .demo-preview-grid,
    .demo-metrics,
    .demo-hint-row {
        grid-template-columns: 1fr;
    }

    .public-demo-topbar-inner {
        flex-wrap: wrap;
    }

    .public-demo-actions {
        margin-left: auto;
    }
}


/* --- Stable Beta 0.4 scrollable patch history --- */

.patch-history-scroll {
    max-height: 420px;
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid var(--line, #d8e0ee);
    border-radius: 16px;
}

.patch-history-scroll table {
    margin: 0;
}

.patch-history-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f8fbff;
}

.patch-history-scroll td,
.patch-history-scroll th {
    vertical-align: top;
}

.patch-history-note {
    margin-top: 10px;
    color: var(--muted, #667085);
    font-size: 13px;
}

body.theme-dark .patch-history-scroll {
    border-color: #334155 !important;
    background: #111827 !important;
}

body.theme-dark .patch-history-scroll thead th {
    background: #0f172a !important;
    color: #cbd5e1 !important;
}

body.theme-dark .patch-history-note {
    color: #a8b6ca !important;
}

.public-demo-body .patch-history-scroll {
    background: #ffffff;
}

@media (max-width: 700px) {
    .patch-history-scroll {
        max-height: 360px;
    }
}


/* --- Stable Beta 0.4 public pages with login-required modal --- */

.public-preview-note {
    border: 1px solid #b8c7e6;
    background: #eef4ff;
    color: #1d4ed8;
    border-radius: 16px;
    padding: 14px 16px;
    font-weight: 800;
    margin-bottom: 18px;
}

.public-preview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}

.public-preview-card,
.public-preview-table-card {
    border: 1px solid var(--line, #d8e0ee);
    background: var(--card, #fff);
    border-radius: 18px;
    padding: 20px;
}

.public-preview-card span {
    display: flex;
    justify-content: space-between;
    color: var(--muted, #667085);
}

.public-preview-card span::after {
    content: '↗';
    color: #98a2b3;
    font-weight: 900;
}

.public-preview-card strong {
    display: block;
    font-size: 34px;
    margin-top: 8px;
}

.public-login-required {
    cursor: pointer;
}

.demo-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, .48);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.demo-modal-backdrop.is-open {
    display: flex;
}

.demo-modal {
    width: min(520px, 100%);
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid #d8e0ee;
    box-shadow: 0 28px 80px rgba(15,23,42,.26);
    padding: 24px;
}

.demo-modal h2 {
    margin-top: 0;
}

.demo-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

body.theme-dark .public-preview-note {
    background: #172554 !important;
    border-color: #2563eb !important;
    color: #bfdbfe !important;
}

body.theme-dark .public-preview-card,
body.theme-dark .public-preview-table-card,
body.theme-dark .demo-modal {
    background: #111827 !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

body.theme-dark .public-preview-card span,
body.theme-dark .demo-modal .muted {
    color: #a8b6ca !important;
}

@media (max-width: 900px) {
    .public-preview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .public-preview-grid {
        grid-template-columns: 1fr;
    }
}


/* --- Stable Beta 0.4 public theme toggle --- */

body.theme-dark .public-preview-card,
body.theme-dark .public-preview-table-card,
body.theme-dark .public-preview-note,
body.theme-dark .demo-modal,
body.theme-dark .demo-table,
body.theme-dark .demo-table tbody,
body.theme-dark .demo-table tr {
    background: #111827 !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

body.theme-dark .public-preview-note {
    background: #172554 !important;
    color: #bfdbfe !important;
    border-color: #2563eb !important;
}

body.theme-dark .demo-table th {
    background: #0f172a !important;
    color: #cbd5e1 !important;
}

body.theme-dark .demo-table td {
    background: #111827 !important;
    color: #e5edf8 !important;
    border-color: #334155 !important;
}

body.theme-dark .public-demo-body {
    background: #0b1220 !important;
    color: #f8fafc !important;
}

body.theme-dark .public-demo-topbar {
    background: rgba(15,23,42,.96) !important;
    border-bottom-color: #334155 !important;
}

body.theme-dark .public-demo-nav a,
body.theme-dark .public-demo-nav button {
    color: #cbd5e1 !important;
}


/* --- Stable Beta 0.4 login dashboard button --- */

.auth-extra-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.auth-copy .auth-extra-actions {
    margin-top: 22px;
}

body.theme-dark .auth-extra-actions .btn.ghost,
body.theme-dark .auth-extra-actions .btn.secondary {
    background: #1e293b !important;
    color: #dbeafe !important;
    border-color: #334155 !important;
}


/* --- Stable Beta 0.4 login dashboard preview area --- */

.auth-preview-area {
    margin-top: 24px;
    padding: 18px;
    border: 1px solid #d8e0ee;
    border-radius: 18px;
    background: linear-gradient(135deg, #f8fbff 0%, #eef4ff 100%);
    display: grid;
    gap: 14px;
}

.auth-preview-area strong,
.auth-preview-area span {
    display: block;
}

.auth-preview-area strong {
    font-size: 15px;
    color: #101828;
}

.auth-preview-area span {
    margin-top: 4px;
    color: #516173;
    line-height: 1.5;
}

.auth-preview-area .preview-btn {
    width: fit-content;
}

.auth-preview-link {
    margin: 16px 0 0;
    color: #667085;
    font-size: 14px;
}

.auth-preview-link a {
    font-weight: 800;
}

body.theme-dark .auth-preview-area {
    background: linear-gradient(135deg, #111827 0%, #172554 100%) !important;
    border-color: #334155 !important;
}

body.theme-dark .auth-preview-area strong {
    color: #f8fafc !important;
}

body.theme-dark .auth-preview-area span,
body.theme-dark .auth-preview-link {
    color: #a8b6ca !important;
}

@media (max-width: 720px) {
    .auth-preview-area .preview-btn {
        width: 100%;
        justify-content: center;
    }
}


/* --- Stable Beta 0.4 top bar spacing polish --- */

/*
Keeps the main navigation on one clean row on desktop, with brand left and
actions right. It only switches to a wrapping/mobile layout when the viewport
is genuinely narrow.
*/

.topbar {
    min-height: 74px;
}

.topbar-inner {
    max-width: 1480px !important;
    width: 100%;
    padding: 14px 28px !important;
    gap: 26px !important;
    justify-content: flex-start;
}

.brand {
    margin-right: 10px;
}

.main-nav {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    column-gap: 24px !important;
    row-gap: 8px !important;
    min-width: 0 !important;
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
}

.main-nav::-webkit-scrollbar {
    display: none;
}

.main-nav a {
    padding: 8px 0;
    line-height: 1.1;
}

.topbar-actions {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 14px !important;
    flex: 0 0 auto !important;
}

.scan-button {
    gap: 7px;
    min-width: 74px;
}

.profile-trigger {
    max-width: 220px;
}

.mode-switch-form {
    flex: 0 0 auto;
}

@media (min-width: 1200px) {
    .topbar-inner {
        flex-wrap: nowrap !important;
    }

    .main-nav {
        flex-wrap: nowrap !important;
    }
}

@media (max-width: 1199px) {
    .topbar {
        min-height: auto;
    }

    .topbar-inner {
        align-items: flex-start !important;
        flex-wrap: wrap !important;
        gap: 12px 18px !important;
    }

    .main-nav {
        order: 3;
        width: 100%;
        flex-basis: 100% !important;
        padding-bottom: 4px;
        column-gap: 18px !important;
    }

    .topbar-actions {
        margin-left: auto !important;
    }
}

@media (max-width: 700px) {
    .topbar-inner {
        padding: 12px 16px !important;
    }

    .main-nav {
        column-gap: 16px !important;
    }

    .scan-button span:last-child {
        display: none;
    }

    .scan-button {
        min-width: 42px;
        padding-inline: 12px;
    }
}


/* --- Stable Beta 0.4 footer bottom placement --- */

/*
Keeps the footer at the bottom of the viewport on short pages,
without making it fixed or covering content.
*/

html,
body {
    min-height: 100%;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.topbar {
    flex: 0 0 auto;
}

.app-shell {
    flex: 1 0 auto;
    width: 100%;
}

.site-footer {
    flex: 0 0 auto;
    width: 100%;
    margin-top: auto !important;
    padding-top: 24px;
    padding-bottom: 28px;
}

.site-footer-inner,
.site-footer .footer-inner {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 700px) {
    .site-footer {
        padding-bottom: 22px;
    }
}


/* --- Stable Beta 0.4 mobile top bar cleanup --- */

/*
Mobile top bar:
- Brand and account controls stay in one compact row.
- Navigation becomes a horizontal scroll strip instead of wrapping into a tall block.
- Scan becomes an icon-only square on mobile.
- Profile name hides on mobile, leaving the avatar.
*/

@media (max-width: 760px) {
    .topbar {
        min-height: auto !important;
    }

    .topbar-inner {
        padding: 12px 14px 10px !important;
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        grid-template-areas:
            "brand spacer actions"
            "nav nav nav" !important;
        align-items: center !important;
        gap: 10px 12px !important;
        max-width: 100% !important;
    }

    .brand {
        grid-area: brand !important;
        margin: 0 !important;
        gap: 7px !important;
        min-width: 0 !important;
    }

    .brand-name {
        font-size: 22px !important;
        letter-spacing: -0.05em !important;
    }

    .beta-badge {
        height: 18px !important;
        padding: 0 7px !important;
        font-size: 9px !important;
    }

    .topbar-actions {
        grid-area: actions !important;
        margin-left: 0 !important;
        justify-self: end !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
    }

    .scan-button {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        padding: 0 !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .scan-button span:not(.scan-icon) {
        display: none !important;
    }

    .scan-icon {
        font-size: 17px !important;
    }

    .profile-trigger {
        width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 4px !important;
        border-radius: 999px !important;
        justify-content: center !important;
    }

    .profile-label {
        display: none !important;
    }

    .profile-avatar {
        width: 34px !important;
        height: 34px !important;
    }

    .mode-switch {
        width: 62px !important;
        height: 36px !important;
    }

    .mode-knob {
        width: 30px !important;
        height: 30px !important;
        font-size: 14px !important;
    }

    .mode-switch.mode-dark .mode-knob {
        transform: translateX(26px) !important;
    }

    .mode-track-sun {
        left: 9px !important;
    }

    .mode-track-moon {
        right: 10px !important;
    }

    .main-nav {
        grid-area: nav !important;
        order: unset !important;
        width: 100% !important;
        flex-basis: auto !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        column-gap: 8px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 2px 0 4px !important;
        margin: 0 !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap !important;
    }

    .main-nav::-webkit-scrollbar {
        display: none !important;
    }

    .main-nav a {
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        min-height: 34px !important;
        padding: 0 12px !important;
        border-radius: 999px !important;
        background: #eef4ff !important;
        color: #335075 !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        text-decoration: none !important;
    }

    .main-nav a:hover {
        background: #dbeafe !important;
        color: #1d4ed8 !important;
    }

    body.theme-dark .main-nav a {
        background: #1e293b !important;
        color: #cbd5e1 !important;
    }

    body.theme-dark .main-nav a:hover {
        background: #26344a !important;
        color: #ffffff !important;
    }

    .profile-dropdown {
        right: -74px !important;
        width: min(280px, calc(100vw - 28px)) !important;
    }

    .app-shell {
        padding-top: 22px !important;
    }
}

@media (max-width: 420px) {
    .topbar-inner {
        padding-left: 10px !important;
        padding-right: 10px !important;
        gap: 9px 8px !important;
    }

    .brand-name {
        font-size: 20px !important;
    }

    .beta-badge {
        font-size: 8px !important;
        padding: 0 6px !important;
    }

    .topbar-actions {
        gap: 6px !important;
    }

    .scan-button,
    .profile-trigger {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }

    .profile-avatar {
        width: 31px !important;
        height: 31px !important;
    }

    .mode-switch {
        width: 58px !important;
        height: 34px !important;
    }

    .mode-knob {
        width: 28px !important;
        height: 28px !important;
    }

    .mode-switch.mode-dark .mode-knob {
        transform: translateX(24px) !important;
    }

    .main-nav a {
        min-height: 32px !important;
        padding: 0 10px !important;
        font-size: 12px !important;
    }
}


/* --- Stable Beta 0.4 mobile burger navigation --- */

.mobile-menu-toggle {
    display: none;
}

@media (max-width: 760px) {
    .topbar-inner {
        grid-template-columns: auto auto 1fr auto !important;
        grid-template-areas: "brand menu spacer actions" !important;
    }

    .mobile-menu-toggle {
        grid-area: menu !important;
        display: inline-flex !important;
        width: 42px !important;
        height: 42px !important;
        border: 1px solid #d8e0ee !important;
        border-radius: 14px !important;
        background: #ffffff !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        gap: 4px !important;
        padding: 0 !important;
        cursor: pointer !important;
        box-shadow: none !important;
    }

    .mobile-menu-toggle span {
        width: 18px !important;
        height: 2px !important;
        border-radius: 999px !important;
        background: #101828 !important;
        display: block !important;
        transition: transform .16s ease, opacity .16s ease !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(1) {
        transform: translateY(6px) rotate(45deg) !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(2) {
        opacity: 0 !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg) !important;
    }

    .main-nav {
        grid-area: nav !important;
        display: none !important;
        width: 100% !important;
        padding: 10px !important;
        margin: 0 !important;
        border: 1px solid #d8e0ee !important;
        border-radius: 18px !important;
        background: #ffffff !important;
        box-shadow: 0 18px 45px rgba(15,23,42,.12) !important;
        overflow: visible !important;
        white-space: normal !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .main-nav.is-open {
        display: flex !important;
    }

    .main-nav a {
        min-height: 38px !important;
        padding: 0 13px !important;
        border-radius: 999px !important;
        background: #eef4ff !important;
        color: #335075 !important;
        font-size: 13px !important;
        font-weight: 800 !important;
    }

    body.theme-dark .mobile-menu-toggle {
        background: #111827 !important;
        border-color: #334155 !important;
    }

    body.theme-dark .mobile-menu-toggle span {
        background: #f8fafc !important;
    }

    body.theme-dark .main-nav {
        background: #111827 !important;
        border-color: #334155 !important;
        box-shadow: 0 18px 45px rgba(0,0,0,.22) !important;
    }

    body.theme-dark .main-nav a {
        background: #1e293b !important;
        color: #cbd5e1 !important;
    }

    body.theme-dark .main-nav a:hover {
        background: #26344a !important;
        color: #ffffff !important;
    }
}

@media (max-width: 420px) {
    .mobile-menu-toggle {
        width: 40px !important;
        height: 40px !important;
    }

    .topbar-inner {
        grid-template-columns: auto auto 1fr auto !important;
    }
}


/* --- Stable Beta 0.4 mobile burger force fix --- */

/*
The earlier mobile menu CSS was being overridden by older mobile nav rules.
This block sits at the end of the stylesheet and forcefully:
- shows the burger button
- hides the nav by default on mobile
- only shows the nav after JS adds .is-open
*/

@media (max-width: 760px) {
    .topbar-inner {
        display: grid !important;
        grid-template-columns: auto auto 1fr auto !important;
        grid-template-areas:
            "brand menu spacer actions"
            "nav nav nav nav" !important;
        align-items: center !important;
        gap: 10px 10px !important;
        padding: 12px 14px !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .brand {
        grid-area: brand !important;
        margin: 0 !important;
    }

    .mobile-menu-toggle {
        grid-area: menu !important;
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        border: 1px solid #d8e0ee !important;
        border-radius: 14px !important;
        background: #ffffff !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        gap: 4px !important;
        padding: 0 !important;
        margin: 0 !important;
        cursor: pointer !important;
        box-shadow: none !important;
        appearance: none !important;
        -webkit-appearance: none !important;
    }

    .mobile-menu-toggle span {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 18px !important;
        height: 2px !important;
        min-height: 2px !important;
        border-radius: 999px !important;
        background: #101828 !important;
        transform-origin: center !important;
        transition: transform .16s ease, opacity .16s ease !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(1) {
        transform: translateY(6px) rotate(45deg) !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(2) {
        opacity: 0 !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg) !important;
    }

    .topbar-actions {
        grid-area: actions !important;
        justify-self: end !important;
        margin-left: 0 !important;
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }

    .main-nav,
    .topbar .main-nav,
    header .main-nav {
        grid-area: nav !important;
        order: unset !important;
        width: 100% !important;
        flex-basis: 100% !important;
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .main-nav.is-open,
    .topbar .main-nav.is-open,
    header .main-nav.is-open {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        overflow: visible !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 10px !important;
        margin: 0 !important;
        border: 1px solid #d8e0ee !important;
        border-radius: 18px !important;
        background: #ffffff !important;
        box-shadow: 0 18px 45px rgba(15,23,42,.12) !important;
        white-space: normal !important;
    }

    .main-nav.is-open a {
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        min-height: 38px !important;
        padding: 0 13px !important;
        border-radius: 999px !important;
        background: #eef4ff !important;
        color: #335075 !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        text-decoration: none !important;
    }

    body.theme-dark .mobile-menu-toggle {
        background: #111827 !important;
        border-color: #334155 !important;
    }

    body.theme-dark .mobile-menu-toggle span {
        background: #f8fafc !important;
    }

    body.theme-dark .main-nav.is-open {
        background: #111827 !important;
        border-color: #334155 !important;
        box-shadow: 0 18px 45px rgba(0,0,0,.22) !important;
    }

    body.theme-dark .main-nav.is-open a {
        background: #1e293b !important;
        color: #cbd5e1 !important;
    }
}

@media (min-width: 761px) {
    .mobile-menu-toggle {
        display: none !important;
    }

    .main-nav {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
    }
}


/* --- Stable Beta 0.4 mobile bottom navigation --- */

/*
Mobile now uses a native-app style bottom nav:
Dashboard, Items, Locations, Folders, QR Labels, Scan.
The full desktop nav stays on desktop/tablet.
*/

.mobile-bottom-nav {
    display: none;
}

@media (max-width: 760px) {
    /* Keep mobile header compact and remove the large nav area. */
    .topbar-inner {
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        grid-template-areas: "brand spacer actions" !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 12px 14px !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .brand {
        grid-area: brand !important;
        margin: 0 !important;
    }

    .topbar-actions {
        grid-area: actions !important;
        justify-self: end !important;
        margin-left: 0 !important;
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }

    .main-nav,
    .topbar .main-nav,
    header .main-nav {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
    }

    .mobile-menu-toggle {
        display: none !important;
    }

    .scan-button {
        display: none !important;
    }

    .profile-trigger {
        width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        padding: 4px !important;
        border-radius: 999px !important;
        justify-content: center !important;
    }

    .profile-label {
        display: none !important;
    }

    .profile-avatar {
        width: 32px !important;
        height: 32px !important;
    }

    .mode-switch {
        width: 58px !important;
        height: 34px !important;
    }

    .mode-knob {
        width: 28px !important;
        height: 28px !important;
        font-size: 14px !important;
    }

    .mode-switch.mode-dark .mode-knob {
        transform: translateX(24px) !important;
    }

    .mobile-bottom-nav {
        position: fixed !important;
        left: 10px !important;
        right: 10px !important;
        bottom: calc(10px + env(safe-area-inset-bottom)) !important;
        z-index: 999 !important;
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 4px !important;
        padding: 8px !important;
        border: 1px solid rgba(216, 224, 238, .92) !important;
        border-radius: 24px !important;
        background: rgba(255, 255, 255, .94) !important;
        box-shadow: 0 18px 55px rgba(15, 23, 42, .22) !important;
        backdrop-filter: blur(18px) !important;
        -webkit-backdrop-filter: blur(18px) !important;
    }

    .mobile-bottom-link {
        min-width: 0 !important;
        min-height: 54px !important;
        border-radius: 18px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        text-decoration: none !important;
        color: #475467 !important;
        font-size: 10px !important;
        font-weight: 850 !important;
        line-height: 1 !important;
        letter-spacing: -0.01em !important;
        white-space: nowrap !important;
    }

    .mobile-bottom-icon {
        font-size: 18px !important;
        line-height: 1 !important;
        display: block !important;
    }

    .mobile-bottom-link:hover,
    .mobile-bottom-link:focus {
        background: #eef4ff !important;
        color: #1d4ed8 !important;
        text-decoration: none !important;
    }

    .mobile-bottom-scan {
        background: #2563eb !important;
        color: #ffffff !important;
        box-shadow: 0 10px 24px rgba(37, 99, 235, .28) !important;
    }

    .mobile-bottom-scan:hover,
    .mobile-bottom-scan:focus {
        background: #1d4ed8 !important;
        color: #ffffff !important;
    }

    .app-shell {
        padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
    }

    .site-footer {
        padding-bottom: calc(112px + env(safe-area-inset-bottom)) !important;
    }

    body.theme-dark .mobile-bottom-nav {
        background: rgba(15, 23, 42, .94) !important;
        border-color: #334155 !important;
        box-shadow: 0 18px 55px rgba(0, 0, 0, .36) !important;
    }

    body.theme-dark .mobile-bottom-link {
        color: #cbd5e1 !important;
    }

    body.theme-dark .mobile-bottom-link:hover,
    body.theme-dark .mobile-bottom-link:focus {
        background: #1e293b !important;
        color: #ffffff !important;
    }

    body.theme-dark .mobile-bottom-scan {
        background: #2563eb !important;
        color: #ffffff !important;
    }
}

@media (max-width: 390px) {
    .mobile-bottom-nav {
        left: 8px !important;
        right: 8px !important;
        padding: 6px !important;
        gap: 2px !important;
        border-radius: 22px !important;
    }

    .mobile-bottom-link {
        min-height: 50px !important;
        font-size: 9px !important;
        border-radius: 16px !important;
    }

    .mobile-bottom-icon {
        font-size: 17px !important;
    }
}


/* --- Stable Beta 0.4 mobile bottom nav overlay force fix --- */

/*
Strict behaviour:
- Hidden on desktop.
- Fixed overlay on mobile/coarse pointer devices.
- Stays pinned to viewport, not the bottom of the document.
*/

.mobile-bottom-nav {
    display: none !important;
}

/* Desktop and laptop safety: never show bottom nav on normal desktop widths. */
@media (min-width: 821px) and (hover: hover) and (pointer: fine) {
    .mobile-bottom-nav {
        display: none !important;
    }
}

/* Phones and narrow mobile layouts */
@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 1024px) {
    body {
        padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important;
    }

    .app-shell {
        padding-bottom: calc(112px + env(safe-area-inset-bottom)) !important;
    }

    .site-footer {
        padding-bottom: calc(122px + env(safe-area-inset-bottom)) !important;
    }

    .mobile-bottom-nav {
        position: fixed !important;
        inset-inline: 10px !important;
        left: 10px !important;
        right: 10px !important;
        bottom: calc(10px + env(safe-area-inset-bottom)) !important;
        top: auto !important;
        z-index: 2147483000 !important;
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 4px !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        min-height: 68px !important;
        margin: 0 !important;
        padding: 8px !important;
        border: 1px solid rgba(216, 224, 238, .94) !important;
        border-radius: 24px !important;
        background: rgba(255, 255, 255, .96) !important;
        box-shadow: 0 18px 55px rgba(15, 23, 42, .24) !important;
        backdrop-filter: blur(18px) !important;
        -webkit-backdrop-filter: blur(18px) !important;
        transform: translate3d(0, 0, 0) !important;
        will-change: transform !important;
        pointer-events: auto !important;
    }

    .mobile-bottom-link {
        min-width: 0 !important;
        min-height: 52px !important;
        border-radius: 18px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        text-decoration: none !important;
        color: #475467 !important;
        font-size: 10px !important;
        font-weight: 850 !important;
        line-height: 1 !important;
        letter-spacing: -0.01em !important;
        white-space: nowrap !important;
        overflow: hidden !important;
    }

    .mobile-bottom-icon {
        font-size: 18px !important;
        line-height: 1 !important;
        display: block !important;
    }

    .mobile-bottom-link:hover,
    .mobile-bottom-link:focus {
        background: #eef4ff !important;
        color: #1d4ed8 !important;
        text-decoration: none !important;
    }

    .mobile-bottom-scan {
        background: #2563eb !important;
        color: #ffffff !important;
        box-shadow: 0 10px 24px rgba(37, 99, 235, .28) !important;
    }

    .mobile-bottom-scan:hover,
    .mobile-bottom-scan:focus {
        background: #1d4ed8 !important;
        color: #ffffff !important;
    }

    body.theme-dark .mobile-bottom-nav {
        background: rgba(15, 23, 42, .96) !important;
        border-color: #334155 !important;
        box-shadow: 0 18px 55px rgba(0, 0, 0, .38) !important;
    }

    body.theme-dark .mobile-bottom-link {
        color: #cbd5e1 !important;
    }

    body.theme-dark .mobile-bottom-link:hover,
    body.theme-dark .mobile-bottom-link:focus {
        background: #1e293b !important;
        color: #ffffff !important;
    }

    body.theme-dark .mobile-bottom-scan {
        background: #2563eb !important;
        color: #ffffff !important;
    }
}

@media (max-width: 390px) {
    .mobile-bottom-nav {
        left: 8px !important;
        right: 8px !important;
        inset-inline: 8px !important;
        bottom: calc(8px + env(safe-area-inset-bottom)) !important;
        padding: 6px !important;
        gap: 2px !important;
        border-radius: 22px !important;
        min-height: 64px !important;
    }

    .mobile-bottom-link {
        min-height: 50px !important;
        font-size: 9px !important;
        border-radius: 16px !important;
    }

    .mobile-bottom-icon {
        font-size: 17px !important;
    }
}


/* --- Stable Beta 0.4 JS mobile bottom nav overlay fix --- */

/*
The mobile bottom nav is now created by JS at the end of <body>
and forced with inline fixed-position styles. CSS below handles fallback,
spacing, and hiding top navigation on mobile.
*/

.mobile-bottom-nav {
    display: none !important;
}

@media (min-width: 821px) {
    .mobile-bottom-nav,
    #mobileBottomNav {
        display: none !important;
    }
}

@media (max-width: 820px) {
    body.has-mobile-bottom-nav {
        padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
    }

    body.has-mobile-bottom-nav .app-shell {
        padding-bottom: calc(124px + env(safe-area-inset-bottom)) !important;
    }

    body.has-mobile-bottom-nav .site-footer {
        padding-bottom: calc(132px + env(safe-area-inset-bottom)) !important;
    }

    .topbar .main-nav,
    header .main-nav,
    .main-nav {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .scan-button {
        display: none !important;
    }

    #mobileBottomNav .mobile-bottom-link:hover,
    #mobileBottomNav .mobile-bottom-link:focus {
        background: #eef4ff !important;
        color: #1d4ed8 !important;
    }

    body.theme-dark #mobileBottomNav .mobile-bottom-link:hover,
    body.theme-dark #mobileBottomNav .mobile-bottom-link:focus {
        background: #1e293b !important;
        color: #ffffff !important;
    }
}

@media (max-width: 390px) {
    #mobileBottomNav {
        left: 8px !important;
        right: 8px !important;
        bottom: calc(8px + env(safe-area-inset-bottom)) !important;
        padding: 6px !important;
        gap: 4px !important;
    }

    #mobileBottomNav .mobile-bottom-link {
        min-height: 50px !important;
        font-size: 9px !important;
    }
}


/* --- Stable Beta 0.4 mobile bottom nav: add Scan + remove top mobile nav --- */

/*
Mobile bottom nav now contains:
Dashboard, Items, Locations, Folders, Scan.
Top navigation and top Scan remain hidden on mobile.
*/

@media (max-width: 820px) {
    .topbar .main-nav,
    header .main-nav,
    .main-nav,
    .scan-button {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
    }

    #mobileBottomNav,
    .mobile-bottom-nav {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }

    #mobileBottomNav .mobile-bottom-scan,
    .mobile-bottom-nav .mobile-bottom-scan {
        background: #2563eb !important;
        color: #ffffff !important;
        box-shadow: 0 10px 24px rgba(37, 99, 235, .28) !important;
    }

    #mobileBottomNav .mobile-bottom-scan:hover,
    #mobileBottomNav .mobile-bottom-scan:focus,
    .mobile-bottom-nav .mobile-bottom-scan:hover,
    .mobile-bottom-nav .mobile-bottom-scan:focus {
        background: #1d4ed8 !important;
        color: #ffffff !important;
    }
}

@media (max-width: 390px) {
    #mobileBottomNav .mobile-bottom-link {
        font-size: 8.5px !important;
    }

    #mobileBottomNav .mobile-bottom-icon {
        font-size: 17px !important;
    }
}


/* --- Stable Beta 0.4 force hide top mobile nav --- */

/*
Hard stop: on mobile the header must only show brand/account/theme controls.
Dashboard/Items/Locations/Folders/Scan must not appear in the top bar.
They live in the bottom overlay nav instead.
*/

@media screen and (max-width: 820px) {
    header nav.main-nav,
    .topbar nav.main-nav,
    .topbar .main-nav,
    header .main-nav,
    body .main-nav {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        left: -99999px !important;
        top: -99999px !important;
        width: 0 !important;
        max-width: 0 !important;
        height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        transform: none !important;
    }

    header .scan-button,
    .topbar .scan-button,
    body .topbar .scan-button {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        left: -99999px !important;
        top: -99999px !important;
        width: 0 !important;
        max-width: 0 !important;
        min-width: 0 !important;
        height: 0 !important;
        max-height: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
    }

    .topbar-inner {
        grid-template-areas: "brand spacer actions" !important;
        grid-template-columns: auto 1fr auto !important;
    }
}

@media screen and (min-width: 821px) {
    header nav.main-nav,
    .topbar nav.main-nav,
    .topbar .main-nav {
        position: static !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
}


/* --- Stable Beta 0.4 mobile More burger menu --- */

/*
Bottom mobile nav keeps the primary actions:
Dashboard, Items, Locations, Folders, Scan.
The header burger now holds the remaining pages.
*/

.mobile-more-toggle,
.mobile-more-menu {
    display: none;
}

@media screen and (max-width: 820px) {
    .topbar-inner {
        display: grid !important;
        grid-template-columns: auto auto 1fr auto !important;
        grid-template-areas: "brand more spacer actions" !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 12px 14px !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .mobile-more-toggle {
        grid-area: more !important;
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        border: 1px solid #d8e0ee !important;
        border-radius: 14px !important;
        background: #ffffff !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        gap: 4px !important;
        padding: 0 !important;
        margin: 0 !important;
        cursor: pointer !important;
        box-shadow: none !important;
        appearance: none !important;
        -webkit-appearance: none !important;
    }

    .mobile-more-toggle span {
        width: 18px !important;
        height: 2px !important;
        min-height: 2px !important;
        display: block !important;
        border-radius: 999px !important;
        background: #101828 !important;
        transition: transform .16s ease, opacity .16s ease !important;
    }

    .mobile-more-toggle.is-open span:nth-child(1) {
        transform: translateY(6px) rotate(45deg) !important;
    }

    .mobile-more-toggle.is-open span:nth-child(2) {
        opacity: 0 !important;
    }

    .mobile-more-toggle.is-open span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg) !important;
    }

    .mobile-more-menu {
        position: fixed !important;
        inset: 0 !important;
        z-index: 2147483600 !important;
        display: none !important;
        padding: 74px 12px calc(104px + env(safe-area-inset-bottom)) !important;
        background: rgba(15, 23, 42, .18) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
    }

    .mobile-more-menu.is-open {
        display: block !important;
    }

    .mobile-more-panel {
        width: min(420px, 100%) !important;
        margin: 0 auto !important;
        padding: 14px !important;
        border-radius: 24px !important;
        border: 1px solid #d8e0ee !important;
        background: rgba(255,255,255,.98) !important;
        box-shadow: 0 22px 65px rgba(15,23,42,.24) !important;
    }

    .mobile-more-head {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        margin-bottom: 12px !important;
    }

    .mobile-more-head strong {
        color: #101828 !important;
        font-size: 16px !important;
        font-weight: 900 !important;
    }

    .mobile-more-close {
        width: 38px !important;
        height: 38px !important;
        border-radius: 999px !important;
        border: 1px solid #d8e0ee !important;
        background: #ffffff !important;
        color: #101828 !important;
        font-size: 24px !important;
        line-height: 1 !important;
        cursor: pointer !important;
    }

    .mobile-more-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .mobile-more-grid a {
        display: flex !important;
        align-items: center !important;
        min-height: 46px !important;
        padding: 0 14px !important;
        border-radius: 16px !important;
        background: #eef4ff !important;
        color: #335075 !important;
        font-size: 14px !important;
        font-weight: 850 !important;
        text-decoration: none !important;
    }

    .mobile-more-grid a:hover,
    .mobile-more-grid a:focus {
        background: #dbeafe !important;
        color: #1d4ed8 !important;
        text-decoration: none !important;
    }

    body.theme-dark .mobile-more-toggle {
        background: #111827 !important;
        border-color: #334155 !important;
    }

    body.theme-dark .mobile-more-toggle span {
        background: #f8fafc !important;
    }

    body.theme-dark .mobile-more-menu {
        background: rgba(0, 0, 0, .28) !important;
    }

    body.theme-dark .mobile-more-panel {
        background: rgba(15,23,42,.98) !important;
        border-color: #334155 !important;
        box-shadow: 0 22px 65px rgba(0,0,0,.42) !important;
    }

    body.theme-dark .mobile-more-head strong {
        color: #f8fafc !important;
    }

    body.theme-dark .mobile-more-close {
        background: #111827 !important;
        border-color: #334155 !important;
        color: #f8fafc !important;
    }

    body.theme-dark .mobile-more-grid a {
        background: #1e293b !important;
        color: #cbd5e1 !important;
    }

    body.theme-dark .mobile-more-grid a:hover,
    body.theme-dark .mobile-more-grid a:focus {
        background: #26344a !important;
        color: #ffffff !important;
    }
}

@media screen and (min-width: 821px) {
    .mobile-more-toggle,
    .mobile-more-menu {
        display: none !important;
    }
}


/* --- Stable Beta 0.4 mobile More arrow repair --- */

/*
Repair version:
- Restores the last known working mobile More menu files.
- Keeps the same working menu JS and panel.
- Uses a text dropdown trigger instead of changing the menu structure.
*/

@media screen and (max-width: 820px) {
    .mobile-more-toggle {
        width: auto !important;
        min-width: 74px !important;
        height: 42px !important;
        min-height: 42px !important;
        padding: 0 12px !important;
        flex-direction: row !important;
        gap: 0 !important;
        font: inherit !important;
    }

    .mobile-more-toggle .mobile-more-arrow-icon {
        display: block !important;
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        background: transparent !important;
        color: #101828 !important;
        font-size: 13px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        letter-spacing: -0.01em !important;
        transform: none !important;
        transition: transform .16s ease !important;
        white-space: nowrap !important;
    }

    .mobile-more-toggle .mobile-more-hidden-line {
        display: none !important;
    }

    .mobile-more-toggle.is-open .mobile-more-arrow-icon {
        transform: none !important;
    }

    body.theme-dark .mobile-more-toggle .mobile-more-arrow-icon {
        background: transparent !important;
        color: #f8fafc !important;
    }
}


/* --- Stable Beta 0.4 combined QR navigation --- */

/*
QR Labels and Made QR codes now appear as one navigation item: QR Codes.
The separate page can still exist internally, but the main nav is cleaner.
*/



/* --- Stable Beta 0.4 Registered QR codes safe repair --- */

/*
Safe repair after the previous label patch:
- Restores the last styled CSS file.
- Removes the old mobile " / labels" suffix.
*/

.mobile-more-grid a[href="qr-labels.php"]::after {
    content: "" !important;
    display: none !important;
}


/* --- Stable Beta 0.4 registered QR page labels --- */

/*
User-facing QR wording is now Registered QR codes.
The underlying filenames stay the same so old links keep working.
*/


/* --- Stable Beta 0.4 registered QR duplicate label fix --- */

/*
Fix is mostly PHP text cleanup.
QR Labels remains the label generator.
Registered QR codes remains the registry/list page.
*/


/* --- Stable Beta 0.4 Registered QR codes layout polish --- */

/*
Registered QR codes page layout:
- Better hero/header balance.
- Summary stats become proper cards.
- Search/management sections align better.
- Mobile remains stacked and readable.
*/

.qr-registry-page {
    max-width: 1240px !important;
    margin: 0 auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

.qr-registry-page > .page-head,
.qr-registry-page .page-head,
.qr-registry-page > header:first-child {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 18px !important;
    align-items: start !important;
    margin-bottom: 22px !important;
}

.qr-registry-page h1 {
    margin-bottom: 8px !important;
}

.qr-registry-page h1 + .muted,
.qr-registry-page h1 + p {
    max-width: 720px !important;
    line-height: 1.55 !important;
}

/* The small count links under the header */
.qr-registry-page h1 ~ p a,
.qr-registry-page > p a {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 38px !important;
    padding: 0 13px !important;
    border-radius: 999px !important;
    background: #eef4ff !important;
    color: #1d4ed8 !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    margin: 4px 8px 4px 0 !important;
}

/* Make the count block feel like a proper dashboard strip */
.qr-registry-page > p:has(a) {
    margin: 18px 0 14px !important;
}

/* Management/search cards should not feel narrow and random */
.qr-registry-page .card {
    max-width: none !important;
}

.qr-registry-page .card:has(input[type="search"]),
.qr-registry-page .card:has(input[name="q"]),
.qr-registry-page .card:has(select[name="filter"]),
.qr-registry-page .card:has(select) {
    margin-top: 20px !important;
}

.qr-registry-page .card h2,
.qr-registry-page .card h3 {
    margin-top: 0 !important;
}

/* Better two-column form feel inside the search panel */
.qr-registry-page .form-grid,
.qr-registry-page form .grid,
.qr-registry-page form {
    gap: 16px !important;
}

.qr-registry-page .btn-row,
.qr-registry-page .form-actions {
    gap: 10px !important;
}

/* Registry table/card spacing */
.qr-registry-page table {
    width: 100% !important;
}

.qr-registry-page .table-wrap,
.qr-registry-page .card:has(table) {
    overflow-x: auto !important;
}

/* Make the top action button feel aligned */
.qr-registry-page .page-actions,
.qr-registry-page .actions {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

/* Dark mode */
body.theme-dark .qr-registry-page h1 ~ p a,
body.theme-dark .qr-registry-page > p a {
    background: #1e293b !important;
    color: #dbeafe !important;
}

@media (min-width: 900px) {
    .qr-registry-page {
        padding-top: 34px !important;
    }

    /* Turn the top count links into a neat row */
    .qr-registry-page h1 ~ p,
    .qr-registry-page > p {
        max-width: 900px !important;
    }
}

@media (max-width: 820px) {
    .qr-registry-page {
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-top: 22px !important;
    }

    .qr-registry-page > .page-head,
    .qr-registry-page .page-head,
    .qr-registry-page > header:first-child {
        grid-template-columns: 1fr !important;
    }

    .qr-registry-page .page-actions,
    .qr-registry-page .actions {
        justify-content: flex-start !important;
    }

    .qr-registry-page h1 ~ p a,
    .qr-registry-page > p a {
        width: 100% !important;
        justify-content: space-between !important;
    }
}



/* --- Stable Beta 0.4 QR nav and rotate image fix --- */

/*
QR Labels remains the label printer.
Registered QR codes remains the registry/list page.
Location image rotation now returns to the visual card and uses filemtime cache busting.
*/

#location-visual {
    scroll-margin-top: 110px;
}

.location-visual-actions form {
    margin: 0;
}


/* --- Stable Beta 0.4 Registered QR stat card polish --- */

/*
The Registered QR codes counters are clickable filters,
but they should look like proper stat buttons/cards, not loose blue links.
*/

.qr-registry-stats {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
    margin: 22px 0 24px !important;
    max-width: 1100px !important;
}

.qr-registry-stats .stat-card {
    min-height: 96px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 18px 20px !important;
    border: 1px solid #d8e0ee !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    color: #101828 !important;
    box-shadow: 0 14px 36px rgba(15, 23, 42, .07) !important;
    text-decoration: none !important;
    transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease, background .14s ease !important;
}

.qr-registry-stats .stat-card:hover,
.qr-registry-stats .stat-card:focus {
    transform: translateY(-2px) !important;
    border-color: #9db7ff !important;
    background: #f8fbff !important;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .10) !important;
    color: #101828 !important;
}

.qr-registry-stats .stat-card span {
    display: block !important;
    color: #516173 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
}

.qr-registry-stats .stat-card strong {
    display: block !important;
    color: #101828 !important;
    font-size: 34px !important;
    font-weight: 950 !important;
    line-height: .9 !important;
    letter-spacing: -0.05em !important;
    text-decoration: none !important;
}

/* Small visual accent per card */
.qr-registry-stats .stat-card::before {
    content: "";
    width: 34px !important;
    height: 4px !important;
    border-radius: 999px !important;
    background: #2563eb !important;
    opacity: .85 !important;
}

/* Optional selected filter state based on current URL is not server-rendered yet,
   so hover/focus is kept clean without changing behaviour. */

body.theme-dark .qr-registry-stats .stat-card {
    background: #111827 !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
    box-shadow: 0 14px 36px rgba(0, 0, 0, .24) !important;
}

body.theme-dark .qr-registry-stats .stat-card:hover,
body.theme-dark .qr-registry-stats .stat-card:focus {
    background: #1e293b !important;
    border-color: #3b82f6 !important;
    color: #ffffff !important;
}

body.theme-dark .qr-registry-stats .stat-card span {
    color: #a8b6ca !important;
}

body.theme-dark .qr-registry-stats .stat-card strong {
    color: #f8fafc !important;
}

@media (max-width: 1000px) {
    .qr-registry-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 560px) {
    .qr-registry-stats {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin-top: 18px !important;
    }

    .qr-registry-stats .stat-card {
        min-height: 76px !important;
        padding: 15px 16px !important;
        flex-direction: row !important;
        align-items: center !important;
    }

    .qr-registry-stats .stat-card::before {
        display: none !important;
    }

    .qr-registry-stats .stat-card strong {
        font-size: 30px !important;
    }
}



/* --- Stable Beta 0.4 Blank labels wording --- */

/*
User-facing wording changed from Reserved blank labels to Blank labels.
Internal filter values remain unchanged so existing logic keeps working.
*/



/* ===== CSS from itemid_auth_panels_privacy_upload_patch.zip ===== */

:root{
  --bg:#f5f7fb;--bg2:#eef4ff;--card:#fff;--text:#101828;--muted:#667085;--line:#d9e1ec;
  --blue:#2563eb;--blue-dark:#1d4ed8;--blue2:#eff4ff;--green:#12b76a;--amber:#f79009;--danger:#b42318;
  --shadow:0 18px 45px rgba(15,23,42,.08);--radius:18px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:linear-gradient(180deg,#f8fbff 0%,var(--bg) 260px);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Arial,sans-serif;font-size:15px;line-height:1.5}a{color:var(--blue-dark);text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3{letter-spacing:-.04em;line-height:1.15;margin:0 0 10px}h1{font-size:34px}h2{font-size:28px}h3{font-size:19px}.muted{color:var(--muted)}.big{font-size:17px;line-height:1.65}.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:22px;padding:14px 24px;background:rgba(255,255,255,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}.brand{display:inline-flex;gap:10px;align-items:center;color:var(--text);font-weight:900;font-size:21px}.brand:hover{text-decoration:none}.brand-mark{width:34px;height:34px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;background:#111827;color:white;font-size:13px;letter-spacing:-.04em}.main-nav{display:flex;align-items:center;gap:4px;flex:1;flex-wrap:wrap}.main-nav a{color:#344054;padding:9px 10px;border-radius:10px;font-weight:700;font-size:14px}.main-nav a:hover{background:var(--blue2);text-decoration:none}.top-actions{display:flex;align-items:center;gap:12px}.muted-link{color:var(--muted);font-weight:700}.page{max-width:1180px;margin:0 auto;padding:28px 22px 60px}.site-footer{max-width:1180px;margin:0 auto;padding:22px;color:var(--muted);border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px}.page-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin:0 0 20px}.page-head p{margin:4px 0 0}.card{background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:18px;box-shadow:0 10px 30px rgba(15,23,42,.045)}.hero{display:grid;grid-template-columns:2fr 1fr;gap:18px;margin-bottom:18px}.hero .card:first-child{background:linear-gradient(135deg,#fff 0%,#f4f7ff 100%)}.grid{display:grid;gap:18px}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.cards4{grid-template-columns:repeat(4,minmax(0,1fr))}.cards4 .card{margin:0}.cards4 h2{font-size:34px;margin-top:6px}.wide{max-width:920px}.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;background:var(--blue);color:white;padding:11px 16px;font-weight:900;cursor:pointer;text-decoration:none;box-shadow:0 8px 18px rgba(37,99,235,.18);font:inherit}.btn:hover{text-decoration:none;background:var(--blue-dark)}.btn.secondary{background:#e8efff;color:var(--blue-dark);box-shadow:none}.btn.secondary:hover{background:#dbe7ff}.btn.ghost{background:white;color:#344054;border:1px solid var(--line);box-shadow:none}.btn.small{padding:8px 12px;border-radius:10px;font-size:14px}.scan-link{background:#111827;color:#fff!important}.form{display:grid;gap:15px}.form label{display:grid;gap:7px;color:#344054;font-size:14px;font-weight:700}.form input,.form select,.form textarea,.searchbar input,.inline-form input,.inline-form select{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px 13px;background:white;color:var(--text);font:inherit;outline:none}.form input:focus,.form select:focus,.form textarea:focus,.searchbar input:focus,.inline-form input:focus,.inline-form select:focus{border-color:#9db7ff;box-shadow:0 0 0 4px rgba(37,99,235,.10)}.searchbar,.inline-form{display:flex;gap:10px;margin-bottom:18px}.table-wrap{overflow:auto;padding:0}table{width:100%;border-collapse:collapse;min-width:720px}th,td{text-align:left;border-bottom:1px solid var(--line);padding:14px 16px;vertical-align:top}th{font-size:12px;color:var(--muted);font-weight:900;text-transform:uppercase;letter-spacing:.05em;background:#fbfcff}tr:hover td{background:#fbfdff}.pill{display:inline-flex;background:var(--blue2);color:var(--blue-dark);border-radius:999px;padding:4px 9px;font-size:13px;font-weight:900}.pill.low,.pill.Empty,.pill.Missing{background:#fff4ed;color:#b54708}.visual{max-width:100%;border-radius:14px;border:1px solid var(--line);box-shadow:0 8px 20px rgba(15,23,42,.06)}.qr-box{display:inline-block;background:white;padding:12px;border:1px solid var(--line);border-radius:14px}.code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:900;background:#f2f4f7;border:1px solid #e4e7ec;border-radius:10px;padding:4px 8px;display:inline-block}.labels{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.label{background:#fff;border:1px solid #111;border-radius:6px;text-align:center;padding:11px;break-inside:avoid}.label .qr{display:inline-block}.label-toolbar{margin:12px 0}.check{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center;gap:8px!important}.alert{background:#fef3f2;color:var(--danger);border:1px solid #fecdca;border-radius:12px;padding:11px 13px;font-weight:700}.notice{background:#eff8ff;color:#175cd3;border:1px solid #b2ddff;border-radius:12px;padding:11px 13px;font-weight:700}.empty{padding:24px;border:1px dashed var(--line);border-radius:14px;background:#fbfcff;color:var(--muted)}
/* Auth */.auth-body{min-height:100vh!important;display:grid!important;place-items:center!important;padding:28px;background:radial-gradient(circle at top left,rgba(37,99,235,.16),transparent 34%),radial-gradient(circle at bottom right,rgba(16,185,129,.10),transparent 28%),var(--bg)}.auth-shell{width:min(980px,100%);display:grid;grid-template-columns:1.15fr .85fr;gap:18px;align-items:stretch}.auth-panel{background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow)}.auth-copy{padding:36px;display:flex;flex-direction:column;justify-content:center;min-height:440px}.logo-mark{width:54px;height:54px;border-radius:16px;background:#111827;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;letter-spacing:-.04em;margin-bottom:22px}.eyebrow{font-weight:900;color:var(--blue);letter-spacing:.08em;text-transform:uppercase;font-size:13px;margin:0 0 10px}.auth-copy h1{font-size:46px;letter-spacing:-.055em;line-height:1.02;margin:0 0 16px;max-width:620px}.auth-copy .big{font-size:17px;line-height:1.6;max-width:600px;margin:0 0 22px}.feature-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}.feature-list span{background:var(--blue2);color:var(--blue-dark);border:1px solid #dbe7ff;border-radius:999px;padding:8px 11px;font-weight:900;font-size:13px}.auth-card{width:auto!important;padding:30px;display:flex;flex-direction:column;justify-content:center}.auth-card h2{font-size:30px;margin:0 0 8px}.auth-card .muted{margin-top:0;margin-bottom:20px}.auth-card input{height:46px}.subtle-link{font-size:14px;font-weight:800;justify-self:start}.auth-card .actions{margin-top:2px}
@media(max-width:900px){.topbar{align-items:flex-start;flex-direction:column}.top-actions{width:100%;justify-content:space-between}.hero,.grid.two,.grid.cards4{grid-template-columns:1fr}.page-head{display:block}.searchbar,.inline-form{flex-direction:column}.labels{grid-template-columns:repeat(2,1fr)}.auth-shell{grid-template-columns:1fr}.auth-copy{min-height:0;padding:24px}.auth-copy h1{font-size:34px}.auth-card{padding:24px}.site-footer{flex-direction:column}}@media print{body{background:white}.topbar,.page-head,.card:not(.table-wrap),.label-toolbar,.site-footer{display:none!important}.page{padding:0}.labels{grid-template-columns:repeat(4,1fr);gap:8px}.label{page-break-inside:avoid;box-shadow:none}}

/* ItemID QR/template patch */
.section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}.section-head h2{font-size:22px;margin:0 0 4px}.field-builder{display:grid;gap:14px;border:1px solid var(--line);border-radius:16px;padding:16px;background:#fbfcff}.quick-fields{display:flex;gap:8px;flex-wrap:wrap}.field-chip{border:1px solid #dbe7ff;background:#eff4ff;color:#1d4ed8;border-radius:999px;padding:7px 10px;font-weight:800;cursor:pointer}.field-chip:hover{background:#dbe7ff}.fields-list{display:grid;gap:10px}.field-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}.label-sheet{display:grid;grid-template-columns:repeat(var(--label-columns,4),minmax(0,1fr));gap:12px}.print-label-card{background:#fff;border:1px solid #111827;border-radius:10px;text-align:center;padding:12px;break-inside:avoid;min-height:calc(var(--qr-size,120px) + 62px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px}.print-label-card .qr{display:inline-flex;align-items:center;justify-content:center}.print-label-card .print-code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:15px;font-weight:900;letter-spacing:.06em}.print-label-card .print-name{font-size:12px;font-weight:800;color:#344054;line-height:1.25}.row-actions{display:flex;gap:12px;white-space:nowrap}.qr-size-form select{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px 13px;background:white;color:var(--text);font:inherit;outline:none}@media(max-width:700px){.field-row{grid-template-columns:1fr}.label-sheet{grid-template-columns:repeat(2,minmax(0,1fr))}.row-actions{display:grid;gap:6px}}

/* ItemID workflow polish patch */
.mini-action{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;border-radius:10px;padding:7px 10px;font-weight:900;color:#1d4ed8;text-decoration:none;white-space:nowrap}.mini-action:hover{background:#eff4ff;text-decoration:none}.pretty-fields{gap:18px}.pretty-list{gap:12px}.pretty-row{grid-template-columns:1fr 42px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px}.pretty-row input{border:0!important;box-shadow:none!important;padding:9px 10px!important}.icon-button{width:34px;height:34px;border:0;border-radius:10px;background:#f2f4f7;color:#344054;font-size:22px;line-height:1;cursor:pointer;font-weight:900}.icon-button:hover{background:#fee4e2;color:#b42318}.community-check{align-self:end;background:#fbfcff;border:1px solid var(--line);border-radius:14px;padding:12px}.community-check span{display:grid;gap:2px}.community-check small{color:var(--muted);font-weight:600}.field-chip{font-size:13px}.print-label-card{min-height:calc(var(--qr-mm,35mm) + 22mm);padding:8mm 4mm}.print-label-card .print-name{max-width:100%;overflow-wrap:anywhere}.custom-prefix-row{display:none}.item-hero{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.item-hero h2{font-size:24px;margin:4px 0 0}.activity-line{border-bottom:1px solid var(--line);padding:0 0 10px;margin:0 0 10px}.qr-size-form{margin-top:14px;display:flex;gap:10px;align-items:end;flex-wrap:wrap}.qr-size-form label{min-width:190px}.add-item-flow{gap:20px}.flow-step{display:flex;gap:14px;align-items:flex-start;border-top:1px solid var(--line);padding-top:18px}.flow-step:first-of-type{border-top:0;padding-top:0}.flow-step h2{font-size:22px;margin:0 0 4px}.step-badge{width:34px;height:34px;border-radius:999px;background:#111827;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:900;flex:0 0 auto}.field-as-card{border:1px dashed #b7c5df;border-radius:14px;padding:13px;background:#fbfcff}.field-as-card p{margin:4px 0 10px}.code-pill{display:inline-flex;background:#f2f4f7;border:1px solid #e4e7ec;border-radius:10px;padding:5px 9px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:900}@media(max-width:800px){.item-hero{grid-template-columns:1fr}.pretty-row{grid-template-columns:1fr 42px}.qr-size-form{display:grid}.flow-step{display:grid}.field-as-card .btn{width:100%}}


/* ItemID workflow patch 2 */
.beta-badge{display:inline-flex;align-items:center;border:1px solid #c7d7fe;background:#eff4ff;color:#1d4ed8;border-radius:999px;padding:2px 7px;font-size:11px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;line-height:1.4}.template-create-card{display:flex;align-items:center;justify-content:space-between;gap:14px}.template-create-card p{margin:3px 0 0}.compact-check{width:auto!important;display:flex!important;grid-template-columns:auto 1fr!important;align-items:center!important;gap:8px!important;min-width:170px}.compact-check input{width:auto!important}.qr-box canvas,.qr-box img{display:block!important;max-width:100%!important;max-height:100%!important}.print-label-card{overflow:hidden}.print-label-card .dynamic-qr canvas,.print-label-card .dynamic-qr img{display:block!important}.print-label-card .print-code,.print-label-card .print-name{max-width:100%;overflow-wrap:anywhere}.single-print-label{overflow:hidden}@media(max-width:800px){.template-create-card{display:grid}.compact-check{min-width:0}}

/* Items table action-cell border fix */
td.row-actions,
th.row-actions {
    display: table-cell !important;
    white-space: nowrap;
    vertical-align: middle;
    border-bottom: 1px solid var(--line) !important;
}

td.row-actions {
    min-width: 230px;
}

td.row-actions .mini-action {
    margin-right: 8px;
    margin-bottom: 0;
}

td.row-actions .mini-action:last-child {
    margin-right: 0;
}

tr:hover td.row-actions {
    background: #fbfdff;
}

@media (max-width: 760px) {
    td.row-actions {
        min-width: 170px;
    }

    td.row-actions .mini-action {
        display: flex;
        width: 100%;
        margin-right: 0;
        margin-bottom: 6px;
    }

    td.row-actions .mini-action:last-child {
        margin-bottom: 0;
    }
}

/* Stable Beta 0.4 additions */
.btn.danger,
.btn.danger.ghost {
  color: #b42318 !important;
  border-color: #fecdca !important;
  background: #fff !important;
  box-shadow: none !important;
}
.btn.danger:hover,
.btn.danger.ghost:hover {
  background: #fef3f2 !important;
  text-decoration: none;
}
.mini-action.danger {
  color: #b42318 !important;
  border-color: #fecdca !important;
  background: #fff !important;
}
.export-card {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.export-card:hover {
  transform: translateY(-2px);
  text-decoration: none;
  border-color: #b8c7e6;
  box-shadow: 0 18px 42px rgba(15,23,42,.09);
}
.site-footer a { color: inherit; font-weight: 800; }

/* Stable Beta 0.4 template/item field builder polish */
.item-template-field-row {
    display: grid;
    grid-template-columns: minmax(150px, .35fr) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 12px;
    border: 1px solid #d8e0ee;
    border-radius: 14px;
    background: #ffffff;
    margin-bottom: 10px;
}

.template-field-input-wrap {
    display: grid;
    gap: 6px;
}

.template-field-input-wrap input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    margin: 8px 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.field-unit-hint {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 9px;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 900;
}

.small {
    font-size: 12px;
}

@media (max-width: 700px) {
    .item-template-field-row {
        grid-template-columns: 1fr;
    }
}

/* --- Profile/preferences patch CSS --- */

/* Profile and preferences */
.profile-settings-row {
    display: grid;
    grid-template-columns: 112px 1fr;
    gap: 22px;
    align-items: center;
    margin-bottom: 20px;
}

.profile-settings-avatar {
    width: 96px;
    height: 96px;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid #d8e0ee;
    background: #eef4ff;
    color: #1d4ed8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    font-weight: 900;
}

.profile-settings-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.checkbox-line {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    font-weight: 800;
}

.checkbox-line input,
.checkbox-card input {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.checkbox-card {
    min-height: 70px;
    border: 1px solid #d8e0ee;
    border-radius: 14px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}

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

.checkbox-card small {
    margin-top: 4px;
    color: #64748b;
}

@media (max-width: 650px) {
    .profile-settings-row {
        grid-template-columns: 1fr;
    }
}


/* --- Stable Beta 0.4 theme toggle + dark fix --- */

.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,255,255,.94);
    border-bottom: 1px solid #d8e0ee;
    backdrop-filter: blur(14px);
}

.topbar-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    gap: 22px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #0f172a;
    flex: 0 0 auto;
}

.brand:hover {
    text-decoration: none;
}

.brand-name {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1;
}

.beta-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 19px;
    padding: 0 7px;
    border: 1px solid #b8c7e6;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    white-space: nowrap;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 auto;
    min-width: 0;
}

.main-nav a {
    color: #335075;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
}

.main-nav a:hover {
    color: #2563eb;
    text-decoration: none;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

.scan-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 16px;
    border-radius: 12px;
    background: #111827;
    color: #ffffff !important;
    text-decoration: none;
    font-weight: 800;
    font-size: 14px;
    box-shadow: 0 10px 24px rgba(17, 24, 39, .18);
}

.scan-button:hover {
    text-decoration: none;
}

.profile-menu {
    position: relative;
}

.profile-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 4px 8px 4px 4px;
    border: 1px solid #d8e0ee;
    border-radius: 999px;
    background: #ffffff;
    color: #0f172a;
    text-decoration: none;
    font-weight: 800;
    cursor: pointer;
    max-width: 260px;
}

.profile-avatar {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    object-fit: cover;
    background: #eef4ff;
    color: #1d4ed8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    border: 1px solid #c9d7f2;
    overflow: hidden;
    flex: 0 0 auto;
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-label {
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.profile-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 280px;
    border: 1px solid #d8e0ee;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .16);
    padding: 10px;
    display: none;
}

.profile-menu:hover .profile-dropdown,
.profile-menu:focus-within .profile-dropdown {
    display: block;
}

.profile-dropdown-header {
    padding: 10px;
    border-bottom: 1px solid #edf2f7;
    margin-bottom: 8px;
}

.profile-dropdown-header strong,
.profile-dropdown-header span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-dropdown-header span {
    color: #64748b;
    font-size: 13px;
    margin-top: 2px;
}

.profile-dropdown a {
    display: block;
    padding: 10px;
    border-radius: 12px;
    color: #334155;
    text-decoration: none;
    font-weight: 800;
}

.profile-dropdown a:hover {
    background: #f1f5f9;
    color: #0f172a;
    text-decoration: none;
}

.theme-toggle-form {
    margin: 0;
}

.theme-toggle {
    width: 62px;
    height: 34px;
    border: 1px solid #d8e0ee;
    border-radius: 999px;
    background: #eef4ff;
    position: relative;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    box-shadow: none;
}

.theme-toggle-bulb {
    position: absolute;
    left: 8px;
    font-size: 15px;
    line-height: 1;
    z-index: 2;
    opacity: .8;
}

.theme-toggle-knob {
    position: absolute;
    left: 3px;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 3px 10px rgba(15,23,42,.18);
    transition: transform .16s ease;
}

.theme-toggle.is-dark {
    background: #172554;
    border-color: #2563eb;
}

.theme-toggle.is-dark .theme-toggle-bulb {
    left: 36px;
    opacity: 1;
}

.theme-toggle.is-dark .theme-toggle-knob {
    transform: translateX(28px);
    background: #0f172a;
}

.app-shell {
    max-width: 1240px;
    margin: 0 auto;
    padding: 28px 18px 48px;
}

/* Dark theme variables and hard overrides */
body.theme-dark {
    --bg:#0b1220;
    --bg2:#0f172a;
    --card:#111827;
    --text:#f8fafc;
    --muted:#a8b6ca;
    --line:#334155;
    --blue2:#172554;
    background: #0b1220 !important;
    color: #f8fafc !important;
    color-scheme: dark;
}

body.theme-dark .topbar {
    background: rgba(15, 23, 42, .96) !important;
    border-bottom-color: #334155 !important;
}

body.theme-dark .brand,
body.theme-dark .brand-name,
body.theme-dark .profile-label {
    color: #f8fafc !important;
}

body.theme-dark .beta-badge {
    background: #172554 !important;
    border-color: #2563eb !important;
    color: #bfdbfe !important;
}

body.theme-dark .main-nav a {
    color: #cbd5e1 !important;
}

body.theme-dark .main-nav a:hover {
    background: #1e293b !important;
    color: #ffffff !important;
}

body.theme-dark .profile-trigger,
body.theme-dark .profile-dropdown,
body.theme-dark .card,
body.theme-dark section.card,
body.theme-dark form.card,
body.theme-dark details.card,
body.theme-dark .table-wrap,
body.theme-dark .metric-card,
body.theme-dark .filter-panel,
body.theme-dark .template-field-card,
body.theme-dark .template-field-row,
body.theme-dark .location-summary,
body.theme-dark .auth-panel {
    background: #111827 !important;
    background-color: #111827 !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
    box-shadow: 0 18px 45px rgba(0,0,0,.22) !important;
}

body.theme-dark .hero .card:first-child {
    background: linear-gradient(135deg, #111827 0%, #172033 100%) !important;
}

body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark strong,
body.theme-dark label,
body.theme-dark th,
body.theme-dark td {
    color: #f8fafc !important;
}

body.theme-dark .muted,
body.theme-dark .help,
body.theme-dark small,
body.theme-dark .site-footer,
body.theme-dark .metric-card span {
    color: #a8b6ca !important;
}

body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

body.theme-dark input::placeholder,
body.theme-dark textarea::placeholder {
    color: #74839a !important;
}

body.theme-dark table,
body.theme-dark tbody,
body.theme-dark tr {
    background: #111827 !important;
    color: #f8fafc !important;
}

body.theme-dark thead,
body.theme-dark th {
    background: #0f172a !important;
    color: #cbd5e1 !important;
}

body.theme-dark td {
    background: #111827 !important;
    color: #e5edf8 !important;
    border-color: #334155 !important;
}

body.theme-dark tr:hover td {
    background: #172033 !important;
}

body.theme-dark .code-pill,
body.theme-dark .badge,
body.theme-dark .pill,
body.theme-dark .status-pill,
body.theme-dark .tag,
body.theme-dark .field-unit-hint {
    background: #1e293b !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}

body.theme-dark .btn.secondary,
body.theme-dark .btn.ghost,
body.theme-dark a.btn.secondary,
body.theme-dark a.btn.ghost {
    background: #1e293b !important;
    color: #bfdbfe !important;
    border: 1px solid #334155 !important;
    box-shadow: none !important;
}

body.theme-dark .btn.secondary:hover,
body.theme-dark .btn.ghost:hover {
    background: #26344a !important;
    color: #ffffff !important;
}

body.theme-dark .qr-label-preview,
body.theme-dark .qr-preview,
body.theme-dark .qr-card-preview,
body.theme-dark .print-label,
body.theme-dark .label-card,
body.theme-dark .print-sheet,
body.theme-dark .print-sheet .label,
body.theme-dark canvas,
body.theme-dark .qr-box {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #111827 !important;
    border-color: #111827 !important;
}

/* System preference can be selected in profile, but the top toggle only switches light/dark. */
@media (max-width: 900px) {
    .topbar-inner {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 12px;
    }

    .main-nav {
        order: 3;
        width: 100%;
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .topbar-actions {
        margin-left: auto;
    }

    .profile-label {
        display: none;
    }
}


/* --- Stable Beta 0.4 sun/moon theme toggle positioning --- */

.topbar-inner {
    display: flex !important;
    align-items: center !important;
}

.main-nav {
    justify-content: flex-start;
}

.topbar-actions {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.theme-toggle-form {
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}

.theme-toggle {
    width: 66px !important;
    height: 36px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 999px !important;
    background: #e0f2fe !important;
    position: relative !important;
    cursor: pointer !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

.theme-icon {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1 !important;
    font-size: 15px !important;
    line-height: 1 !important;
    pointer-events: none !important;
}

.theme-icon-sun {
    left: 10px !important;
    color: #f59e0b !important;
    opacity: 1 !important;
}

.theme-icon-moon {
    right: 11px !important;
    color: #64748b !important;
    opacity: .55 !important;
}

.theme-toggle-knob {
    position: absolute !important;
    left: 3px !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    box-shadow: 0 3px 10px rgba(15,23,42,.22) !important;
    transition: transform .16s ease, background .16s ease !important;
    z-index: 2 !important;
}

.theme-toggle.is-dark {
    background: #172554 !important;
    border-color: #2563eb !important;
}

.theme-toggle.is-dark .theme-toggle-knob {
    transform: translateX(30px) !important;
    background: #0f172a !important;
}

.theme-toggle.is-dark .theme-icon-sun {
    opacity: .45 !important;
    color: #94a3b8 !important;
}

.theme-toggle.is-dark .theme-icon-moon {
    opacity: 1 !important;
    color: #dbeafe !important;
}

body.theme-dark .theme-toggle {
    background: #172554 !important;
    border-color: #2563eb !important;
}

@media (max-width: 900px) {
    .topbar-actions {
        margin-left: auto !important;
    }
}


/* --- Stable Beta 0.4 dark mode button/pill fix --- */

/* General white button fix in dark mode */
body.theme-dark button,
body.theme-dark input[type="submit"],
body.theme-dark input[type="button"],
body.theme-dark .btn,
body.theme-dark a.btn {
    border-color: #334155;
}

body.theme-dark .btn:not(.danger):not(.primary),
body.theme-dark a.btn:not(.danger):not(.primary),
body.theme-dark button.btn:not(.danger):not(.primary) {
    background: #1e293b !important;
    color: #dbeafe !important;
    border: 1px solid #334155 !important;
    box-shadow: none !important;
}

body.theme-dark .btn:not(.danger):not(.primary):hover,
body.theme-dark a.btn:not(.danger):not(.primary):hover,
body.theme-dark button.btn:not(.danger):not(.primary):hover {
    background: #26344a !important;
    color: #ffffff !important;
}

/* Keep main action buttons blue */
body.theme-dark .btn:first-child,
body.theme-dark .btn.primary,
body.theme-dark button.btn.primary,
body.theme-dark a.btn.primary {
    background: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
}

/* Delete/danger buttons were showing white. */
body.theme-dark .btn.danger,
body.theme-dark a.btn.danger,
body.theme-dark button.btn.danger,
body.theme-dark .danger,
body.theme-dark a[href*="delete.php"],
body.theme-dark button[name*="delete"],
body.theme-dark button[value*="delete"],
body.theme-dark button[value*="clear_reserved"],
body.theme-dark .delete-button,
body.theme-dark .clear-button {
    background: #3f1d1d !important;
    color: #fecaca !important;
    border: 1px solid #7f1d1d !important;
    box-shadow: none !important;
}

body.theme-dark .btn.danger:hover,
body.theme-dark a.btn.danger:hover,
body.theme-dark button.btn.danger:hover,
body.theme-dark .danger:hover,
body.theme-dark a[href*="delete.php"]:hover,
body.theme-dark button[name*="delete"]:hover,
body.theme-dark button[value*="delete"]:hover,
body.theme-dark button[value*="clear_reserved"]:hover,
body.theme-dark .delete-button:hover,
body.theme-dark .clear-button:hover {
    background: #7f1d1d !important;
    color: #ffffff !important;
}

/* Some pages use plain anchors styled as buttons without btn classes. */
body.theme-dark .row-actions a,
body.theme-dark .table-actions-cell a,
body.theme-dark .actions a,
body.theme-dark .actions button {
    border-color: #334155;
}

body.theme-dark .row-actions a:not(.danger):not([href*="delete.php"]),
body.theme-dark .table-actions-cell a:not(.danger):not([href*="delete.php"]) {
    background: #1e293b !important;
    color: #dbeafe !important;
    border: 1px solid #334155 !important;
}

body.theme-dark .row-actions a:not(.danger):not([href*="delete.php"]):hover,
body.theme-dark .table-actions-cell a:not(.danger):not([href*="delete.php"]):hover {
    background: #26344a !important;
    color: #ffffff !important;
}

/* Code pills were still too pale in some table cells. */
body.theme-dark .code-pill,
body.theme-dark td .code-pill,
body.theme-dark .qr-code-pill,
body.theme-dark .item-id-pill {
    background: #1e293b !important;
    color: #e2e8f0 !important;
    border: 1px solid #334155 !important;
}

/* Search filter detail summary was still white on some browsers. */
body.theme-dark details,
body.theme-dark details summary,
body.theme-dark details.card,
body.theme-dark details.card summary {
    background: #111827 !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

/* Preserve white only where it must be white for QR/print. */
body.theme-dark .qr-label-preview,
body.theme-dark .qr-preview,
body.theme-dark .qr-card-preview,
body.theme-dark .print-label,
body.theme-dark .label-card,
body.theme-dark .print-sheet,
body.theme-dark .print-sheet .label,
body.theme-dark canvas,
body.theme-dark .qr-box {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #111827 !important;
    border-color: #111827 !important;
}

/* Same button fixes for system theme when OS is dark. */
@media (prefers-color-scheme: dark) {
    body.theme-system .btn:not(.danger):not(.primary),
    body.theme-system a.btn:not(.danger):not(.primary),
    body.theme-system button.btn:not(.danger):not(.primary) {
        background: #1e293b !important;
        color: #dbeafe !important;
        border: 1px solid #334155 !important;
        box-shadow: none !important;
    }

    body.theme-system .btn.danger,
    body.theme-system a.btn.danger,
    body.theme-system button.btn.danger,
    body.theme-system .danger,
    body.theme-system a[href*="delete.php"],
    body.theme-system button[name*="delete"],
    body.theme-system button[value*="delete"],
    body.theme-system button[value*="clear_reserved"],
    body.theme-system .delete-button,
    body.theme-system .clear-button {
        background: #3f1d1d !important;
        color: #fecaca !important;
        border: 1px solid #7f1d1d !important;
        box-shadow: none !important;
    }

    body.theme-system .code-pill,
    body.theme-system td .code-pill,
    body.theme-system .qr-code-pill,
    body.theme-system .item-id-pill {
        background: #1e293b !important;
        color: #e2e8f0 !important;
        border: 1px solid #334155 !important;
    }

    body.theme-system details,
    body.theme-system details summary,
    body.theme-system details.card,
    body.theme-system details.card summary {
        background: #111827 !important;
        color: #f8fafc !important;
        border-color: #334155 !important;
    }
}


/* --- Stable Beta 0.4 dark cleanup: toggle, white panels, buttons --- */

/* Hide old/broken theme toggle visuals if old CSS is still cached on a page. */
.theme-toggle,
.theme-toggle-form,
.theme-icon,
.theme-option,
.theme-toggle-bulb {
    display: none !important;
}

/* Clean topbar layout */
.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,255,255,.94);
    border-bottom: 1px solid #d8e0ee;
    backdrop-filter: blur(14px);
}

.topbar-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    gap: 22px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #0f172a;
    flex: 0 0 auto;
}

.brand:hover {
    text-decoration: none;
}

.brand-name {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1;
}

.beta-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 19px;
    padding: 0 7px;
    border: 1px solid #b8c7e6;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    white-space: nowrap;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 auto;
    min-width: 0;
}

.main-nav a {
    color: #335075;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
}

.main-nav a:hover {
    color: #2563eb;
    text-decoration: none;
}

.topbar-actions {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex: 0 0 auto;
}

.scan-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 16px;
    border-radius: 12px;
    background: #111827;
    color: #ffffff !important;
    text-decoration: none;
    font-weight: 800;
    font-size: 14px;
    box-shadow: 0 10px 24px rgba(17,24,39,.18);
}

.scan-button:hover {
    text-decoration: none;
}

.scan-icon {
    font-size: 15px;
    line-height: 1;
}

.profile-menu {
    position: relative;
}

.profile-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 4px 8px 4px 4px;
    border: 1px solid #d8e0ee;
    border-radius: 999px;
    background: #ffffff;
    color: #0f172a;
    text-decoration: none;
    font-weight: 800;
    cursor: pointer;
    max-width: 260px;
}

.profile-avatar {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    border: 1px solid #c9d7f2;
    overflow: hidden;
    flex: 0 0 auto;
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-label {
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.profile-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 280px;
    border: 1px solid #d8e0ee;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(15,23,42,.16);
    padding: 10px;
    display: none;
}

.profile-menu:hover .profile-dropdown,
.profile-menu:focus-within .profile-dropdown {
    display: block;
}

.profile-dropdown-header {
    padding: 10px;
    border-bottom: 1px solid #edf2f7;
    margin-bottom: 8px;
}

.profile-dropdown-header strong,
.profile-dropdown-header span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-dropdown-header span {
    color: #64748b;
    font-size: 13px;
    margin-top: 2px;
}

.profile-dropdown a {
    display: block;
    padding: 10px;
    border-radius: 12px;
    color: #334155;
    text-decoration: none;
    font-weight: 800;
}

.profile-dropdown a:hover {
    background: #f1f5f9;
    color: #0f172a;
    text-decoration: none;
}

/* New independent sun/moon switch */
.mode-switch-form {
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}

.mode-switch {
    width: 72px !important;
    height: 38px !important;
    border-radius: 999px !important;
    border: 1px solid #cbd5e1 !important;
    background: #e0f2fe !important;
    position: relative !important;
    cursor: pointer !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: inline-flex !important;
    align-items: center !important;
    box-shadow: none !important;
}

.mode-track-icon {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    pointer-events: none !important;
}

.mode-track-sun {
    left: 11px !important;
    color: #f59e0b !important;
    opacity: .25 !important;
}

.mode-track-moon {
    right: 12px !important;
    color: #64748b !important;
    opacity: .35 !important;
}

.mode-knob {
    position: absolute !important;
    left: 3px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #f59e0b !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    box-shadow: 0 3px 10px rgba(15,23,42,.22) !important;
    transition: transform .16s ease, background .16s ease, color .16s ease !important;
    z-index: 2 !important;
}

.mode-switch.mode-dark {
    background: #172554 !important;
    border-color: #2563eb !important;
}

.mode-switch.mode-dark .mode-knob {
    transform: translateX(34px) !important;
    background: #0f172a !important;
    color: #dbeafe !important;
}

.mode-switch.mode-dark .mode-track-sun {
    color: #94a3b8 !important;
    opacity: .35 !important;
}

.mode-switch.mode-dark .mode-track-moon {
    opacity: .22 !important;
}

/* Dark theme core */
body.theme-dark {
    --bg:#0b1220;
    --bg2:#0f172a;
    --card:#111827;
    --text:#f8fafc;
    --muted:#a8b6ca;
    --line:#334155;
    --blue2:#172554;
    background:#0b1220 !important;
    color:#f8fafc !important;
    color-scheme: dark;
}

body.theme-dark .topbar {
    background: rgba(15,23,42,.96) !important;
    border-bottom-color: #334155 !important;
}

body.theme-dark .brand,
body.theme-dark .brand-name,
body.theme-dark .profile-label {
    color:#f8fafc !important;
}

body.theme-dark .beta-badge {
    background:#172554 !important;
    border-color:#2563eb !important;
    color:#bfdbfe !important;
}

body.theme-dark .main-nav a {
    color:#cbd5e1 !important;
}

body.theme-dark .main-nav a:hover {
    background:#1e293b !important;
    color:#ffffff !important;
}

body.theme-dark .scan-button {
    background:#2563eb !important;
    color:#ffffff !important;
}

body.theme-dark .profile-trigger,
body.theme-dark .profile-dropdown {
    background:#111827 !important;
    border-color:#334155 !important;
    color:#f8fafc !important;
}

body.theme-dark .profile-dropdown-header {
    border-bottom-color:#334155 !important;
}

body.theme-dark .profile-dropdown-header span {
    color:#94a3b8 !important;
}

body.theme-dark .profile-dropdown a {
    color:#cbd5e1 !important;
}

body.theme-dark .profile-dropdown a:hover {
    background:#1e293b !important;
    color:#ffffff !important;
}

/* Kill the stubborn white panels seen in Items/Add Item/Templates/Made QR codes */
body.theme-dark .card,
body.theme-dark section.card,
body.theme-dark form.card,
body.theme-dark details.card,
body.theme-dark .table-wrap,
body.theme-dark .items-filter-panel,
body.theme-dark .items-filter-panel[open],
body.theme-dark .items-filter-panel summary,
body.theme-dark .field-as-card,
body.theme-dark .field-as-card.template-create-card,
body.theme-dark .template-fields-panel,
body.theme-dark .template-field-builder,
body.theme-dark .template-share-card,
body.theme-dark .template-preset,
body.theme-dark .template-field-row,
body.theme-dark .template-field-row-main,
body.theme-dark .template-field-row-extra,
body.theme-dark .template-options-wrap,
body.theme-dark .template-required,
body.theme-dark .template-create-card,
body.theme-dark .location-summary,
body.theme-dark .scanner-box,
body.theme-dark .notice:not(.print-label):not(.label-card),
body.theme-dark .alert,
body.theme-dark .stat-card,
body.theme-dark .metric-card {
    background:#111827 !important;
    background-color:#111827 !important;
    color:#f8fafc !important;
    border-color:#334155 !important;
    box-shadow:0 18px 45px rgba(0,0,0,.22) !important;
}

body.theme-dark .hero .card:first-child {
    background:linear-gradient(135deg,#111827 0%,#172033 100%) !important;
}

body.theme-dark .items-filter-panel *,
body.theme-dark .template-field-builder *,
body.theme-dark .template-share-card *,
body.theme-dark .template-preset *,
body.theme-dark .field-as-card *,
body.theme-dark .template-fields-panel *,
body.theme-dark .card *,
body.theme-dark .table-wrap * {
    color: inherit;
}

body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark strong,
body.theme-dark label,
body.theme-dark th,
body.theme-dark td,
body.theme-dark summary,
body.theme-dark .section-head,
body.theme-dark .page-head {
    color:#f8fafc !important;
}

body.theme-dark .muted,
body.theme-dark .help,
body.theme-dark .hint,
body.theme-dark small,
body.theme-dark .template-help,
body.theme-dark .template-field-hint,
body.theme-dark .site-footer,
body.theme-dark .items-filter-grid label {
    color:#a8b6ca !important;
}

body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea,
body.theme-dark .items-search-row input,
body.theme-dark .items-filter-grid select,
body.theme-dark .template-field-row input,
body.theme-dark .template-field-row select {
    background:#0f172a !important;
    border-color:#334155 !important;
    color:#f8fafc !important;
}

body.theme-dark input::placeholder,
body.theme-dark textarea::placeholder {
    color:#74839a !important;
}

body.theme-dark table,
body.theme-dark tbody,
body.theme-dark tr {
    background:#111827 !important;
    color:#f8fafc !important;
}

body.theme-dark thead,
body.theme-dark th {
    background:#0f172a !important;
    color:#cbd5e1 !important;
}

body.theme-dark td {
    background:#111827 !important;
    color:#e5edf8 !important;
    border-color:#334155 !important;
}

body.theme-dark tr:hover td {
    background:#172033 !important;
}

body.theme-dark .code-pill,
body.theme-dark td .code-pill,
body.theme-dark .qr-code-pill,
body.theme-dark .item-id-pill,
body.theme-dark .badge,
body.theme-dark .pill,
body.theme-dark .status-pill,
body.theme-dark .tag,
body.theme-dark .field-unit-hint {
    background:#1e293b !important;
    color:#e2e8f0 !important;
    border:1px solid #334155 !important;
}

/* Buttons, including delete buttons that were staying white */
body.theme-dark .btn,
body.theme-dark a.btn,
body.theme-dark button.btn,
body.theme-dark .row-actions a,
body.theme-dark .table-actions-cell a,
body.theme-dark .actions a,
body.theme-dark .actions button {
    background:#1e293b !important;
    color:#dbeafe !important;
    border:1px solid #334155 !important;
    box-shadow:none !important;
}

body.theme-dark .btn:hover,
body.theme-dark a.btn:hover,
body.theme-dark button.btn:hover,
body.theme-dark .row-actions a:hover,
body.theme-dark .table-actions-cell a:hover,
body.theme-dark .actions a:hover,
body.theme-dark .actions button:hover {
    background:#26344a !important;
    color:#ffffff !important;
}

body.theme-dark .btn.danger,
body.theme-dark a.btn.danger,
body.theme-dark button.btn.danger,
body.theme-dark a[href*="delete.php"],
body.theme-dark button[name*="delete"],
body.theme-dark button[value*="delete"],
body.theme-dark button[value*="clear_reserved"],
body.theme-dark .delete-button,
body.theme-dark .clear-button {
    background:#3f1d1d !important;
    color:#fecaca !important;
    border:1px solid #7f1d1d !important;
}

body.theme-dark .btn.danger:hover,
body.theme-dark a.btn.danger:hover,
body.theme-dark button.btn.danger:hover,
body.theme-dark a[href*="delete.php"]:hover,
body.theme-dark button[name*="delete"]:hover,
body.theme-dark button[value*="delete"]:hover,
body.theme-dark button[value*="clear_reserved"]:hover {
    background:#7f1d1d !important;
    color:#ffffff !important;
}

/* Primary actions stay blue */
body.theme-dark .btn.primary,
body.theme-dark a.btn.primary,
body.theme-dark .actions > .btn:first-child:not(.danger),
body.theme-dark .page-head .btn:last-child:not(.danger) {
    background:#2563eb !important;
    color:#ffffff !important;
    border-color:#2563eb !important;
}

/* QR and print surfaces stay white deliberately */
body.theme-dark .qr-label-preview,
body.theme-dark .qr-preview,
body.theme-dark .qr-card-preview,
body.theme-dark .print-label,
body.theme-dark .label-card,
body.theme-dark .print-sheet,
body.theme-dark .print-sheet .label,
body.theme-dark canvas,
body.theme-dark .qr-box {
    background:#ffffff !important;
    background-color:#ffffff !important;
    color:#111827 !important;
    border-color:#111827 !important;
}

@media (max-width:900px) {
    .topbar-inner {
        align-items:flex-start;
        flex-wrap:wrap;
        gap:12px;
    }

    .main-nav {
        order:3;
        width:100%;
        overflow-x:auto;
        padding-bottom:4px;
    }

    .topbar-actions {
        margin-left:auto !important;
    }

    .profile-label {
        display:none;
    }
}


/* --- Stable Beta 0.4 profile dropdown hover bridge + demo link polish --- */

.profile-menu {
    position: relative !important;
}

.profile-dropdown {
    top: calc(100% + 6px) !important;
    right: 0 !important;
}

/* Invisible bridge stops the dropdown disappearing while moving from profile button to menu. */
.profile-menu::after {
    content: '' !important;
    position: absolute !important;
    left: -12px !important;
    right: -12px !important;
    top: 100% !important;
    height: 14px !important;
    display: block !important;
    background: transparent !important;
    pointer-events: auto !important;
}

.profile-menu:hover .profile-dropdown,
.profile-menu:focus-within .profile-dropdown,
.profile-dropdown:hover {
    display: block !important;
}

.auth-extra-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.demo-page {
    display: grid;
    gap: 22px;
}

.demo-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, .9fr);
    gap: 18px;
    align-items: stretch;
}

.demo-card-stack {
    display: grid;
    gap: 14px;
}

.demo-steps {
    counter-reset: demoStep;
    display: grid;
    gap: 12px;
}

.demo-step {
    counter-increment: demoStep;
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 12px;
    align-items: start;
    padding: 14px;
    border: 1px solid var(--line, #d8e0ee);
    border-radius: 16px;
    background: var(--card, #fff);
}

.demo-step::before {
    content: counter(demoStep);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #2563eb;
    color: #fff;
    font-weight: 900;
}

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

.demo-mini {
    border: 1px solid var(--line, #d8e0ee);
    border-radius: 18px;
    background: var(--card, #fff);
    padding: 18px;
}

.demo-mini h3 {
    margin-top: 0;
}

.demo-fake-table {
    display: grid;
    gap: 8px;
}

.demo-fake-row {
    display: grid;
    grid-template-columns: 90px 1fr 100px;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--line, #d8e0ee);
    border-radius: 12px;
    align-items: center;
}

.demo-fake-qr {
    width: 54px;
    height: 54px;
    border-radius: 10px;
    background:
        linear-gradient(90deg, #111 10px, transparent 10px) 0 0/18px 18px,
        linear-gradient(#111 10px, transparent 10px) 0 0/18px 18px,
        #fff;
    border: 8px solid #fff;
    box-shadow: 0 0 0 1px #d8e0ee;
}

body.theme-dark .demo-step,
body.theme-dark .demo-mini,
body.theme-dark .demo-fake-row {
    background: #111827 !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

body.theme-dark .demo-fake-qr {
    background:
        linear-gradient(90deg, #111 10px, transparent 10px) 0 0/18px 18px,
        linear-gradient(#111 10px, transparent 10px) 0 0/18px 18px,
        #fff !important;
    border-color: #fff !important;
}

@media (max-width: 900px) {
    .demo-hero,
    .demo-grid {
        grid-template-columns: 1fr;
    }
}


/* --- Stable Beta 0.4 public demo dashboard + login required modal --- */

.public-demo-body {
    min-height: 100vh;
    background: linear-gradient(180deg, #f6f9ff 0%, #eef3fb 260px);
    color: #101828;
}

.public-demo-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,255,255,.94);
    border-bottom: 1px solid #d8e0ee;
    backdrop-filter: blur(14px);
}

.public-demo-topbar-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 18px;
}

.public-demo-nav {
    display: flex;
    gap: 14px;
    align-items: center;
    flex: 1 1 auto;
    overflow-x: auto;
}

.public-demo-nav a,
.public-demo-nav button {
    border: 0;
    background: transparent;
    color: #335075;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    padding: 8px 0;
}

.public-demo-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.demo-shell {
    max-width: 1240px;
    margin: 0 auto;
    padding: 34px 18px 60px;
}

.demo-disabled {
    cursor: pointer;
}

.demo-locked-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 900;
}

.demo-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, .48);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.demo-modal-backdrop.is-open {
    display: flex;
}

.demo-modal {
    width: min(520px, 100%);
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid #d8e0ee;
    box-shadow: 0 28px 80px rgba(15,23,42,.26);
    padding: 24px;
}

.demo-modal h2 {
    margin-top: 0;
}

.demo-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.demo-preview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, .9fr);
    gap: 18px;
    margin-bottom: 22px;
}

.demo-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}

.demo-metric {
    border: 1px solid #d8e0ee;
    background: #ffffff;
    border-radius: 18px;
    padding: 20px;
    text-decoration: none;
    color: #101828;
}

.demo-metric span {
    display: flex;
    justify-content: space-between;
    color: #667085;
}

.demo-metric span::after {
    content: '↗';
    color: #98a2b3;
    font-weight: 900;
}

.demo-metric strong {
    display: block;
    font-size: 34px;
    margin-top: 8px;
}

.demo-fake-table-card {
    overflow: hidden;
}

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

.demo-table th,
.demo-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #e4eaf3;
    text-align: left;
}

.demo-table th {
    color: #667085;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.demo-workflow-list {
    margin: 0;
    padding-left: 22px;
    color: #516173;
    line-height: 1.7;
}

.demo-qr-card {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
    padding: 14px;
    border: 1px solid #d8e0ee;
    border-radius: 18px;
    background: #f8fbff;
}

.demo-qr-box {
    width: 84px;
    height: 84px;
    border-radius: 12px;
    background:
        linear-gradient(90deg, #111 9px, transparent 9px) 0 0/18px 18px,
        linear-gradient(#111 9px, transparent 9px) 0 0/18px 18px,
        #fff;
    border: 10px solid #fff;
    box-shadow: 0 0 0 1px #d8e0ee;
    flex: 0 0 auto;
}

.demo-hint-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.demo-hint {
    border: 1px solid #d8e0ee;
    border-radius: 18px;
    padding: 18px;
    background: #ffffff;
}

.demo-hint h3 {
    margin-top: 0;
}

@media (max-width: 900px) {
    .demo-preview-grid,
    .demo-metrics,
    .demo-hint-row {
        grid-template-columns: 1fr;
    }

    .public-demo-topbar-inner {
        flex-wrap: wrap;
    }

    .public-demo-actions {
        margin-left: auto;
    }
}


/* --- Stable Beta 0.4 scrollable patch history --- */

.patch-history-scroll {
    max-height: 420px;
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid var(--line, #d8e0ee);
    border-radius: 16px;
}

.patch-history-scroll table {
    margin: 0;
}

.patch-history-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f8fbff;
}

.patch-history-scroll td,
.patch-history-scroll th {
    vertical-align: top;
}

.patch-history-note {
    margin-top: 10px;
    color: var(--muted, #667085);
    font-size: 13px;
}

body.theme-dark .patch-history-scroll {
    border-color: #334155 !important;
    background: #111827 !important;
}

body.theme-dark .patch-history-scroll thead th {
    background: #0f172a !important;
    color: #cbd5e1 !important;
}

body.theme-dark .patch-history-note {
    color: #a8b6ca !important;
}

.public-demo-body .patch-history-scroll {
    background: #ffffff;
}

@media (max-width: 700px) {
    .patch-history-scroll {
        max-height: 360px;
    }
}


/* --- Stable Beta 0.4 public pages with login-required modal --- */

.public-preview-note {
    border: 1px solid #b8c7e6;
    background: #eef4ff;
    color: #1d4ed8;
    border-radius: 16px;
    padding: 14px 16px;
    font-weight: 800;
    margin-bottom: 18px;
}

.public-preview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}

.public-preview-card,
.public-preview-table-card {
    border: 1px solid var(--line, #d8e0ee);
    background: var(--card, #fff);
    border-radius: 18px;
    padding: 20px;
}

.public-preview-card span {
    display: flex;
    justify-content: space-between;
    color: var(--muted, #667085);
}

.public-preview-card span::after {
    content: '↗';
    color: #98a2b3;
    font-weight: 900;
}

.public-preview-card strong {
    display: block;
    font-size: 34px;
    margin-top: 8px;
}

.public-login-required {
    cursor: pointer;
}

.demo-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, .48);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.demo-modal-backdrop.is-open {
    display: flex;
}

.demo-modal {
    width: min(520px, 100%);
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid #d8e0ee;
    box-shadow: 0 28px 80px rgba(15,23,42,.26);
    padding: 24px;
}

.demo-modal h2 {
    margin-top: 0;
}

.demo-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

body.theme-dark .public-preview-note {
    background: #172554 !important;
    border-color: #2563eb !important;
    color: #bfdbfe !important;
}

body.theme-dark .public-preview-card,
body.theme-dark .public-preview-table-card,
body.theme-dark .demo-modal {
    background: #111827 !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

body.theme-dark .public-preview-card span,
body.theme-dark .demo-modal .muted {
    color: #a8b6ca !important;
}

@media (max-width: 900px) {
    .public-preview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .public-preview-grid {
        grid-template-columns: 1fr;
    }
}


/* --- Stable Beta 0.4 public theme toggle --- */

body.theme-dark .public-preview-card,
body.theme-dark .public-preview-table-card,
body.theme-dark .public-preview-note,
body.theme-dark .demo-modal,
body.theme-dark .demo-table,
body.theme-dark .demo-table tbody,
body.theme-dark .demo-table tr {
    background: #111827 !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

body.theme-dark .public-preview-note {
    background: #172554 !important;
    color: #bfdbfe !important;
    border-color: #2563eb !important;
}

body.theme-dark .demo-table th {
    background: #0f172a !important;
    color: #cbd5e1 !important;
}

body.theme-dark .demo-table td {
    background: #111827 !important;
    color: #e5edf8 !important;
    border-color: #334155 !important;
}

body.theme-dark .public-demo-body {
    background: #0b1220 !important;
    color: #f8fafc !important;
}

body.theme-dark .public-demo-topbar {
    background: rgba(15,23,42,.96) !important;
    border-bottom-color: #334155 !important;
}

body.theme-dark .public-demo-nav a,
body.theme-dark .public-demo-nav button {
    color: #cbd5e1 !important;
}


/* --- Stable Beta 0.4 login dashboard button --- */

.auth-extra-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.auth-copy .auth-extra-actions {
    margin-top: 22px;
}

body.theme-dark .auth-extra-actions .btn.ghost,
body.theme-dark .auth-extra-actions .btn.secondary {
    background: #1e293b !important;
    color: #dbeafe !important;
    border-color: #334155 !important;
}


/* --- Stable Beta 0.4 login dashboard preview area --- */

.auth-preview-area {
    margin-top: 24px;
    padding: 18px;
    border: 1px solid #d8e0ee;
    border-radius: 18px;
    background: linear-gradient(135deg, #f8fbff 0%, #eef4ff 100%);
    display: grid;
    gap: 14px;
}

.auth-preview-area strong,
.auth-preview-area span {
    display: block;
}

.auth-preview-area strong {
    font-size: 15px;
    color: #101828;
}

.auth-preview-area span {
    margin-top: 4px;
    color: #516173;
    line-height: 1.5;
}

.auth-preview-area .preview-btn {
    width: fit-content;
}

.auth-preview-link {
    margin: 16px 0 0;
    color: #667085;
    font-size: 14px;
}

.auth-preview-link a {
    font-weight: 800;
}

body.theme-dark .auth-preview-area {
    background: linear-gradient(135deg, #111827 0%, #172554 100%) !important;
    border-color: #334155 !important;
}

body.theme-dark .auth-preview-area strong {
    color: #f8fafc !important;
}

body.theme-dark .auth-preview-area span,
body.theme-dark .auth-preview-link {
    color: #a8b6ca !important;
}

@media (max-width: 720px) {
    .auth-preview-area .preview-btn {
        width: 100%;
        justify-content: center;
    }
}


/* --- Stable Beta 0.4 top bar spacing polish --- */

/*
Keeps the main navigation on one clean row on desktop, with brand left and
actions right. It only switches to a wrapping/mobile layout when the viewport
is genuinely narrow.
*/

.topbar {
    min-height: 74px;
}

.topbar-inner {
    max-width: 1480px !important;
    width: 100%;
    padding: 14px 28px !important;
    gap: 26px !important;
    justify-content: flex-start;
}

.brand {
    margin-right: 10px;
}

.main-nav {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    column-gap: 24px !important;
    row-gap: 8px !important;
    min-width: 0 !important;
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
}

.main-nav::-webkit-scrollbar {
    display: none;
}

.main-nav a {
    padding: 8px 0;
    line-height: 1.1;
}

.topbar-actions {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 14px !important;
    flex: 0 0 auto !important;
}

.scan-button {
    gap: 7px;
    min-width: 74px;
}

.profile-trigger {
    max-width: 220px;
}

.mode-switch-form {
    flex: 0 0 auto;
}

@media (min-width: 1200px) {
    .topbar-inner {
        flex-wrap: nowrap !important;
    }

    .main-nav {
        flex-wrap: nowrap !important;
    }
}

@media (max-width: 1199px) {
    .topbar {
        min-height: auto;
    }

    .topbar-inner {
        align-items: flex-start !important;
        flex-wrap: wrap !important;
        gap: 12px 18px !important;
    }

    .main-nav {
        order: 3;
        width: 100%;
        flex-basis: 100% !important;
        padding-bottom: 4px;
        column-gap: 18px !important;
    }

    .topbar-actions {
        margin-left: auto !important;
    }
}

@media (max-width: 700px) {
    .topbar-inner {
        padding: 12px 16px !important;
    }

    .main-nav {
        column-gap: 16px !important;
    }

    .scan-button span:last-child {
        display: none;
    }

    .scan-button {
        min-width: 42px;
        padding-inline: 12px;
    }
}


/* --- Stable Beta 0.4 footer bottom placement --- */

/*
Keeps the footer at the bottom of the viewport on short pages,
without making it fixed or covering content.
*/

html,
body {
    min-height: 100%;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.topbar {
    flex: 0 0 auto;
}

.app-shell {
    flex: 1 0 auto;
    width: 100%;
}

.site-footer {
    flex: 0 0 auto;
    width: 100%;
    margin-top: auto !important;
    padding-top: 24px;
    padding-bottom: 28px;
}

.site-footer-inner,
.site-footer .footer-inner {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 700px) {
    .site-footer {
        padding-bottom: 22px;
    }
}


/* --- Stable Beta 0.4 mobile top bar cleanup --- */

/*
Mobile top bar:
- Brand and account controls stay in one compact row.
- Navigation becomes a horizontal scroll strip instead of wrapping into a tall block.
- Scan becomes an icon-only square on mobile.
- Profile name hides on mobile, leaving the avatar.
*/

@media (max-width: 760px) {
    .topbar {
        min-height: auto !important;
    }

    .topbar-inner {
        padding: 12px 14px 10px !important;
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        grid-template-areas:
            "brand spacer actions"
            "nav nav nav" !important;
        align-items: center !important;
        gap: 10px 12px !important;
        max-width: 100% !important;
    }

    .brand {
        grid-area: brand !important;
        margin: 0 !important;
        gap: 7px !important;
        min-width: 0 !important;
    }

    .brand-name {
        font-size: 22px !important;
        letter-spacing: -0.05em !important;
    }

    .beta-badge {
        height: 18px !important;
        padding: 0 7px !important;
        font-size: 9px !important;
    }

    .topbar-actions {
        grid-area: actions !important;
        margin-left: 0 !important;
        justify-self: end !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
    }

    .scan-button {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        padding: 0 !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .scan-button span:not(.scan-icon) {
        display: none !important;
    }

    .scan-icon {
        font-size: 17px !important;
    }

    .profile-trigger {
        width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 4px !important;
        border-radius: 999px !important;
        justify-content: center !important;
    }

    .profile-label {
        display: none !important;
    }

    .profile-avatar {
        width: 34px !important;
        height: 34px !important;
    }

    .mode-switch {
        width: 62px !important;
        height: 36px !important;
    }

    .mode-knob {
        width: 30px !important;
        height: 30px !important;
        font-size: 14px !important;
    }

    .mode-switch.mode-dark .mode-knob {
        transform: translateX(26px) !important;
    }

    .mode-track-sun {
        left: 9px !important;
    }

    .mode-track-moon {
        right: 10px !important;
    }

    .main-nav {
        grid-area: nav !important;
        order: unset !important;
        width: 100% !important;
        flex-basis: auto !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        column-gap: 8px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 2px 0 4px !important;
        margin: 0 !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap !important;
    }

    .main-nav::-webkit-scrollbar {
        display: none !important;
    }

    .main-nav a {
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        min-height: 34px !important;
        padding: 0 12px !important;
        border-radius: 999px !important;
        background: #eef4ff !important;
        color: #335075 !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        text-decoration: none !important;
    }

    .main-nav a:hover {
        background: #dbeafe !important;
        color: #1d4ed8 !important;
    }

    body.theme-dark .main-nav a {
        background: #1e293b !important;
        color: #cbd5e1 !important;
    }

    body.theme-dark .main-nav a:hover {
        background: #26344a !important;
        color: #ffffff !important;
    }

    .profile-dropdown {
        right: -74px !important;
        width: min(280px, calc(100vw - 28px)) !important;
    }

    .app-shell {
        padding-top: 22px !important;
    }
}

@media (max-width: 420px) {
    .topbar-inner {
        padding-left: 10px !important;
        padding-right: 10px !important;
        gap: 9px 8px !important;
    }

    .brand-name {
        font-size: 20px !important;
    }

    .beta-badge {
        font-size: 8px !important;
        padding: 0 6px !important;
    }

    .topbar-actions {
        gap: 6px !important;
    }

    .scan-button,
    .profile-trigger {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }

    .profile-avatar {
        width: 31px !important;
        height: 31px !important;
    }

    .mode-switch {
        width: 58px !important;
        height: 34px !important;
    }

    .mode-knob {
        width: 28px !important;
        height: 28px !important;
    }

    .mode-switch.mode-dark .mode-knob {
        transform: translateX(24px) !important;
    }

    .main-nav a {
        min-height: 32px !important;
        padding: 0 10px !important;
        font-size: 12px !important;
    }
}


/* --- Stable Beta 0.4 mobile burger navigation --- */

.mobile-menu-toggle {
    display: none;
}

@media (max-width: 760px) {
    .topbar-inner {
        grid-template-columns: auto auto 1fr auto !important;
        grid-template-areas: "brand menu spacer actions" !important;
    }

    .mobile-menu-toggle {
        grid-area: menu !important;
        display: inline-flex !important;
        width: 42px !important;
        height: 42px !important;
        border: 1px solid #d8e0ee !important;
        border-radius: 14px !important;
        background: #ffffff !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        gap: 4px !important;
        padding: 0 !important;
        cursor: pointer !important;
        box-shadow: none !important;
    }

    .mobile-menu-toggle span {
        width: 18px !important;
        height: 2px !important;
        border-radius: 999px !important;
        background: #101828 !important;
        display: block !important;
        transition: transform .16s ease, opacity .16s ease !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(1) {
        transform: translateY(6px) rotate(45deg) !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(2) {
        opacity: 0 !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg) !important;
    }

    .main-nav {
        grid-area: nav !important;
        display: none !important;
        width: 100% !important;
        padding: 10px !important;
        margin: 0 !important;
        border: 1px solid #d8e0ee !important;
        border-radius: 18px !important;
        background: #ffffff !important;
        box-shadow: 0 18px 45px rgba(15,23,42,.12) !important;
        overflow: visible !important;
        white-space: normal !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .main-nav.is-open {
        display: flex !important;
    }

    .main-nav a {
        min-height: 38px !important;
        padding: 0 13px !important;
        border-radius: 999px !important;
        background: #eef4ff !important;
        color: #335075 !important;
        font-size: 13px !important;
        font-weight: 800 !important;
    }

    body.theme-dark .mobile-menu-toggle {
        background: #111827 !important;
        border-color: #334155 !important;
    }

    body.theme-dark .mobile-menu-toggle span {
        background: #f8fafc !important;
    }

    body.theme-dark .main-nav {
        background: #111827 !important;
        border-color: #334155 !important;
        box-shadow: 0 18px 45px rgba(0,0,0,.22) !important;
    }

    body.theme-dark .main-nav a {
        background: #1e293b !important;
        color: #cbd5e1 !important;
    }

    body.theme-dark .main-nav a:hover {
        background: #26344a !important;
        color: #ffffff !important;
    }
}

@media (max-width: 420px) {
    .mobile-menu-toggle {
        width: 40px !important;
        height: 40px !important;
    }

    .topbar-inner {
        grid-template-columns: auto auto 1fr auto !important;
    }
}


/* --- Stable Beta 0.4 mobile burger force fix --- */

/*
The earlier mobile menu CSS was being overridden by older mobile nav rules.
This block sits at the end of the stylesheet and forcefully:
- shows the burger button
- hides the nav by default on mobile
- only shows the nav after JS adds .is-open
*/

@media (max-width: 760px) {
    .topbar-inner {
        display: grid !important;
        grid-template-columns: auto auto 1fr auto !important;
        grid-template-areas:
            "brand menu spacer actions"
            "nav nav nav nav" !important;
        align-items: center !important;
        gap: 10px 10px !important;
        padding: 12px 14px !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .brand {
        grid-area: brand !important;
        margin: 0 !important;
    }

    .mobile-menu-toggle {
        grid-area: menu !important;
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        border: 1px solid #d8e0ee !important;
        border-radius: 14px !important;
        background: #ffffff !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        gap: 4px !important;
        padding: 0 !important;
        margin: 0 !important;
        cursor: pointer !important;
        box-shadow: none !important;
        appearance: none !important;
        -webkit-appearance: none !important;
    }

    .mobile-menu-toggle span {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 18px !important;
        height: 2px !important;
        min-height: 2px !important;
        border-radius: 999px !important;
        background: #101828 !important;
        transform-origin: center !important;
        transition: transform .16s ease, opacity .16s ease !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(1) {
        transform: translateY(6px) rotate(45deg) !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(2) {
        opacity: 0 !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg) !important;
    }

    .topbar-actions {
        grid-area: actions !important;
        justify-self: end !important;
        margin-left: 0 !important;
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }

    .main-nav,
    .topbar .main-nav,
    header .main-nav {
        grid-area: nav !important;
        order: unset !important;
        width: 100% !important;
        flex-basis: 100% !important;
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .main-nav.is-open,
    .topbar .main-nav.is-open,
    header .main-nav.is-open {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        overflow: visible !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 10px !important;
        margin: 0 !important;
        border: 1px solid #d8e0ee !important;
        border-radius: 18px !important;
        background: #ffffff !important;
        box-shadow: 0 18px 45px rgba(15,23,42,.12) !important;
        white-space: normal !important;
    }

    .main-nav.is-open a {
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        min-height: 38px !important;
        padding: 0 13px !important;
        border-radius: 999px !important;
        background: #eef4ff !important;
        color: #335075 !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        text-decoration: none !important;
    }

    body.theme-dark .mobile-menu-toggle {
        background: #111827 !important;
        border-color: #334155 !important;
    }

    body.theme-dark .mobile-menu-toggle span {
        background: #f8fafc !important;
    }

    body.theme-dark .main-nav.is-open {
        background: #111827 !important;
        border-color: #334155 !important;
        box-shadow: 0 18px 45px rgba(0,0,0,.22) !important;
    }

    body.theme-dark .main-nav.is-open a {
        background: #1e293b !important;
        color: #cbd5e1 !important;
    }
}

@media (min-width: 761px) {
    .mobile-menu-toggle {
        display: none !important;
    }

    .main-nav {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
    }
}


/* --- Stable Beta 0.4 mobile bottom navigation --- */

/*
Mobile now uses a native-app style bottom nav:
Dashboard, Items, Locations, Folders, QR Labels, Scan.
The full desktop nav stays on desktop/tablet.
*/

.mobile-bottom-nav {
    display: none;
}

@media (max-width: 760px) {
    /* Keep mobile header compact and remove the large nav area. */
    .topbar-inner {
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        grid-template-areas: "brand spacer actions" !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 12px 14px !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .brand {
        grid-area: brand !important;
        margin: 0 !important;
    }

    .topbar-actions {
        grid-area: actions !important;
        justify-self: end !important;
        margin-left: 0 !important;
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }

    .main-nav,
    .topbar .main-nav,
    header .main-nav {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
    }

    .mobile-menu-toggle {
        display: none !important;
    }

    .scan-button {
        display: none !important;
    }

    .profile-trigger {
        width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        padding: 4px !important;
        border-radius: 999px !important;
        justify-content: center !important;
    }

    .profile-label {
        display: none !important;
    }

    .profile-avatar {
        width: 32px !important;
        height: 32px !important;
    }

    .mode-switch {
        width: 58px !important;
        height: 34px !important;
    }

    .mode-knob {
        width: 28px !important;
        height: 28px !important;
        font-size: 14px !important;
    }

    .mode-switch.mode-dark .mode-knob {
        transform: translateX(24px) !important;
    }

    .mobile-bottom-nav {
        position: fixed !important;
        left: 10px !important;
        right: 10px !important;
        bottom: calc(10px + env(safe-area-inset-bottom)) !important;
        z-index: 999 !important;
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 4px !important;
        padding: 8px !important;
        border: 1px solid rgba(216, 224, 238, .92) !important;
        border-radius: 24px !important;
        background: rgba(255, 255, 255, .94) !important;
        box-shadow: 0 18px 55px rgba(15, 23, 42, .22) !important;
        backdrop-filter: blur(18px) !important;
        -webkit-backdrop-filter: blur(18px) !important;
    }

    .mobile-bottom-link {
        min-width: 0 !important;
        min-height: 54px !important;
        border-radius: 18px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        text-decoration: none !important;
        color: #475467 !important;
        font-size: 10px !important;
        font-weight: 850 !important;
        line-height: 1 !important;
        letter-spacing: -0.01em !important;
        white-space: nowrap !important;
    }

    .mobile-bottom-icon {
        font-size: 18px !important;
        line-height: 1 !important;
        display: block !important;
    }

    .mobile-bottom-link:hover,
    .mobile-bottom-link:focus {
        background: #eef4ff !important;
        color: #1d4ed8 !important;
        text-decoration: none !important;
    }

    .mobile-bottom-scan {
        background: #2563eb !important;
        color: #ffffff !important;
        box-shadow: 0 10px 24px rgba(37, 99, 235, .28) !important;
    }

    .mobile-bottom-scan:hover,
    .mobile-bottom-scan:focus {
        background: #1d4ed8 !important;
        color: #ffffff !important;
    }

    .app-shell {
        padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
    }

    .site-footer {
        padding-bottom: calc(112px + env(safe-area-inset-bottom)) !important;
    }

    body.theme-dark .mobile-bottom-nav {
        background: rgba(15, 23, 42, .94) !important;
        border-color: #334155 !important;
        box-shadow: 0 18px 55px rgba(0, 0, 0, .36) !important;
    }

    body.theme-dark .mobile-bottom-link {
        color: #cbd5e1 !important;
    }

    body.theme-dark .mobile-bottom-link:hover,
    body.theme-dark .mobile-bottom-link:focus {
        background: #1e293b !important;
        color: #ffffff !important;
    }

    body.theme-dark .mobile-bottom-scan {
        background: #2563eb !important;
        color: #ffffff !important;
    }
}

@media (max-width: 390px) {
    .mobile-bottom-nav {
        left: 8px !important;
        right: 8px !important;
        padding: 6px !important;
        gap: 2px !important;
        border-radius: 22px !important;
    }

    .mobile-bottom-link {
        min-height: 50px !important;
        font-size: 9px !important;
        border-radius: 16px !important;
    }

    .mobile-bottom-icon {
        font-size: 17px !important;
    }
}


/* --- Stable Beta 0.4 mobile bottom nav overlay force fix --- */

/*
Strict behaviour:
- Hidden on desktop.
- Fixed overlay on mobile/coarse pointer devices.
- Stays pinned to viewport, not the bottom of the document.
*/

.mobile-bottom-nav {
    display: none !important;
}

/* Desktop and laptop safety: never show bottom nav on normal desktop widths. */
@media (min-width: 821px) and (hover: hover) and (pointer: fine) {
    .mobile-bottom-nav {
        display: none !important;
    }
}

/* Phones and narrow mobile layouts */
@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 1024px) {
    body {
        padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important;
    }

    .app-shell {
        padding-bottom: calc(112px + env(safe-area-inset-bottom)) !important;
    }

    .site-footer {
        padding-bottom: calc(122px + env(safe-area-inset-bottom)) !important;
    }

    .mobile-bottom-nav {
        position: fixed !important;
        inset-inline: 10px !important;
        left: 10px !important;
        right: 10px !important;
        bottom: calc(10px + env(safe-area-inset-bottom)) !important;
        top: auto !important;
        z-index: 2147483000 !important;
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 4px !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        min-height: 68px !important;
        margin: 0 !important;
        padding: 8px !important;
        border: 1px solid rgba(216, 224, 238, .94) !important;
        border-radius: 24px !important;
        background: rgba(255, 255, 255, .96) !important;
        box-shadow: 0 18px 55px rgba(15, 23, 42, .24) !important;
        backdrop-filter: blur(18px) !important;
        -webkit-backdrop-filter: blur(18px) !important;
        transform: translate3d(0, 0, 0) !important;
        will-change: transform !important;
        pointer-events: auto !important;
    }

    .mobile-bottom-link {
        min-width: 0 !important;
        min-height: 52px !important;
        border-radius: 18px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        text-decoration: none !important;
        color: #475467 !important;
        font-size: 10px !important;
        font-weight: 850 !important;
        line-height: 1 !important;
        letter-spacing: -0.01em !important;
        white-space: nowrap !important;
        overflow: hidden !important;
    }

    .mobile-bottom-icon {
        font-size: 18px !important;
        line-height: 1 !important;
        display: block !important;
    }

    .mobile-bottom-link:hover,
    .mobile-bottom-link:focus {
        background: #eef4ff !important;
        color: #1d4ed8 !important;
        text-decoration: none !important;
    }

    .mobile-bottom-scan {
        background: #2563eb !important;
        color: #ffffff !important;
        box-shadow: 0 10px 24px rgba(37, 99, 235, .28) !important;
    }

    .mobile-bottom-scan:hover,
    .mobile-bottom-scan:focus {
        background: #1d4ed8 !important;
        color: #ffffff !important;
    }

    body.theme-dark .mobile-bottom-nav {
        background: rgba(15, 23, 42, .96) !important;
        border-color: #334155 !important;
        box-shadow: 0 18px 55px rgba(0, 0, 0, .38) !important;
    }

    body.theme-dark .mobile-bottom-link {
        color: #cbd5e1 !important;
    }

    body.theme-dark .mobile-bottom-link:hover,
    body.theme-dark .mobile-bottom-link:focus {
        background: #1e293b !important;
        color: #ffffff !important;
    }

    body.theme-dark .mobile-bottom-scan {
        background: #2563eb !important;
        color: #ffffff !important;
    }
}

@media (max-width: 390px) {
    .mobile-bottom-nav {
        left: 8px !important;
        right: 8px !important;
        inset-inline: 8px !important;
        bottom: calc(8px + env(safe-area-inset-bottom)) !important;
        padding: 6px !important;
        gap: 2px !important;
        border-radius: 22px !important;
        min-height: 64px !important;
    }

    .mobile-bottom-link {
        min-height: 50px !important;
        font-size: 9px !important;
        border-radius: 16px !important;
    }

    .mobile-bottom-icon {
        font-size: 17px !important;
    }
}


/* --- Stable Beta 0.4 JS mobile bottom nav overlay fix --- */

/*
The mobile bottom nav is now created by JS at the end of <body>
and forced with inline fixed-position styles. CSS below handles fallback,
spacing, and hiding top navigation on mobile.
*/

.mobile-bottom-nav {
    display: none !important;
}

@media (min-width: 821px) {
    .mobile-bottom-nav,
    #mobileBottomNav {
        display: none !important;
    }
}

@media (max-width: 820px) {
    body.has-mobile-bottom-nav {
        padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
    }

    body.has-mobile-bottom-nav .app-shell {
        padding-bottom: calc(124px + env(safe-area-inset-bottom)) !important;
    }

    body.has-mobile-bottom-nav .site-footer {
        padding-bottom: calc(132px + env(safe-area-inset-bottom)) !important;
    }

    .topbar .main-nav,
    header .main-nav,
    .main-nav {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .scan-button {
        display: none !important;
    }

    #mobileBottomNav .mobile-bottom-link:hover,
    #mobileBottomNav .mobile-bottom-link:focus {
        background: #eef4ff !important;
        color: #1d4ed8 !important;
    }

    body.theme-dark #mobileBottomNav .mobile-bottom-link:hover,
    body.theme-dark #mobileBottomNav .mobile-bottom-link:focus {
        background: #1e293b !important;
        color: #ffffff !important;
    }
}

@media (max-width: 390px) {
    #mobileBottomNav {
        left: 8px !important;
        right: 8px !important;
        bottom: calc(8px + env(safe-area-inset-bottom)) !important;
        padding: 6px !important;
        gap: 4px !important;
    }

    #mobileBottomNav .mobile-bottom-link {
        min-height: 50px !important;
        font-size: 9px !important;
    }
}


/* --- Stable Beta 0.4 mobile bottom nav: add Scan + remove top mobile nav --- */

/*
Mobile bottom nav now contains:
Dashboard, Items, Locations, Folders, Scan.
Top navigation and top Scan remain hidden on mobile.
*/

@media (max-width: 820px) {
    .topbar .main-nav,
    header .main-nav,
    .main-nav,
    .scan-button {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
    }

    #mobileBottomNav,
    .mobile-bottom-nav {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }

    #mobileBottomNav .mobile-bottom-scan,
    .mobile-bottom-nav .mobile-bottom-scan {
        background: #2563eb !important;
        color: #ffffff !important;
        box-shadow: 0 10px 24px rgba(37, 99, 235, .28) !important;
    }

    #mobileBottomNav .mobile-bottom-scan:hover,
    #mobileBottomNav .mobile-bottom-scan:focus,
    .mobile-bottom-nav .mobile-bottom-scan:hover,
    .mobile-bottom-nav .mobile-bottom-scan:focus {
        background: #1d4ed8 !important;
        color: #ffffff !important;
    }
}

@media (max-width: 390px) {
    #mobileBottomNav .mobile-bottom-link {
        font-size: 8.5px !important;
    }

    #mobileBottomNav .mobile-bottom-icon {
        font-size: 17px !important;
    }
}


/* --- Stable Beta 0.4 force hide top mobile nav --- */

/*
Hard stop: on mobile the header must only show brand/account/theme controls.
Dashboard/Items/Locations/Folders/Scan must not appear in the top bar.
They live in the bottom overlay nav instead.
*/

@media screen and (max-width: 820px) {
    header nav.main-nav,
    .topbar nav.main-nav,
    .topbar .main-nav,
    header .main-nav,
    body .main-nav {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        left: -99999px !important;
        top: -99999px !important;
        width: 0 !important;
        max-width: 0 !important;
        height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        transform: none !important;
    }

    header .scan-button,
    .topbar .scan-button,
    body .topbar .scan-button {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        left: -99999px !important;
        top: -99999px !important;
        width: 0 !important;
        max-width: 0 !important;
        min-width: 0 !important;
        height: 0 !important;
        max-height: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
    }

    .topbar-inner {
        grid-template-areas: "brand spacer actions" !important;
        grid-template-columns: auto 1fr auto !important;
    }
}

@media screen and (min-width: 821px) {
    header nav.main-nav,
    .topbar nav.main-nav,
    .topbar .main-nav {
        position: static !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
}


/* --- Stable Beta 0.4 mobile More burger menu --- */

/*
Bottom mobile nav keeps the primary actions:
Dashboard, Items, Locations, Folders, Scan.
The header burger now holds the remaining pages.
*/

.mobile-more-toggle,
.mobile-more-menu {
    display: none;
}

@media screen and (max-width: 820px) {
    .topbar-inner {
        display: grid !important;
        grid-template-columns: auto auto 1fr auto !important;
        grid-template-areas: "brand more spacer actions" !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 12px 14px !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .mobile-more-toggle {
        grid-area: more !important;
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        border: 1px solid #d8e0ee !important;
        border-radius: 14px !important;
        background: #ffffff !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        gap: 4px !important;
        padding: 0 !important;
        margin: 0 !important;
        cursor: pointer !important;
        box-shadow: none !important;
        appearance: none !important;
        -webkit-appearance: none !important;
    }

    .mobile-more-toggle span {
        width: 18px !important;
        height: 2px !important;
        min-height: 2px !important;
        display: block !important;
        border-radius: 999px !important;
        background: #101828 !important;
        transition: transform .16s ease, opacity .16s ease !important;
    }

    .mobile-more-toggle.is-open span:nth-child(1) {
        transform: translateY(6px) rotate(45deg) !important;
    }

    .mobile-more-toggle.is-open span:nth-child(2) {
        opacity: 0 !important;
    }

    .mobile-more-toggle.is-open span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg) !important;
    }

    .mobile-more-menu {
        position: fixed !important;
        inset: 0 !important;
        z-index: 2147483600 !important;
        display: none !important;
        padding: 74px 12px calc(104px + env(safe-area-inset-bottom)) !important;
        background: rgba(15, 23, 42, .18) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
    }

    .mobile-more-menu.is-open {
        display: block !important;
    }

    .mobile-more-panel {
        width: min(420px, 100%) !important;
        margin: 0 auto !important;
        padding: 14px !important;
        border-radius: 24px !important;
        border: 1px solid #d8e0ee !important;
        background: rgba(255,255,255,.98) !important;
        box-shadow: 0 22px 65px rgba(15,23,42,.24) !important;
    }

    .mobile-more-head {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        margin-bottom: 12px !important;
    }

    .mobile-more-head strong {
        color: #101828 !important;
        font-size: 16px !important;
        font-weight: 900 !important;
    }

    .mobile-more-close {
        width: 38px !important;
        height: 38px !important;
        border-radius: 999px !important;
        border: 1px solid #d8e0ee !important;
        background: #ffffff !important;
        color: #101828 !important;
        font-size: 24px !important;
        line-height: 1 !important;
        cursor: pointer !important;
    }

    .mobile-more-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .mobile-more-grid a {
        display: flex !important;
        align-items: center !important;
        min-height: 46px !important;
        padding: 0 14px !important;
        border-radius: 16px !important;
        background: #eef4ff !important;
        color: #335075 !important;
        font-size: 14px !important;
        font-weight: 850 !important;
        text-decoration: none !important;
    }

    .mobile-more-grid a:hover,
    .mobile-more-grid a:focus {
        background: #dbeafe !important;
        color: #1d4ed8 !important;
        text-decoration: none !important;
    }

    body.theme-dark .mobile-more-toggle {
        background: #111827 !important;
        border-color: #334155 !important;
    }

    body.theme-dark .mobile-more-toggle span {
        background: #f8fafc !important;
    }

    body.theme-dark .mobile-more-menu {
        background: rgba(0, 0, 0, .28) !important;
    }

    body.theme-dark .mobile-more-panel {
        background: rgba(15,23,42,.98) !important;
        border-color: #334155 !important;
        box-shadow: 0 22px 65px rgba(0,0,0,.42) !important;
    }

    body.theme-dark .mobile-more-head strong {
        color: #f8fafc !important;
    }

    body.theme-dark .mobile-more-close {
        background: #111827 !important;
        border-color: #334155 !important;
        color: #f8fafc !important;
    }

    body.theme-dark .mobile-more-grid a {
        background: #1e293b !important;
        color: #cbd5e1 !important;
    }

    body.theme-dark .mobile-more-grid a:hover,
    body.theme-dark .mobile-more-grid a:focus {
        background: #26344a !important;
        color: #ffffff !important;
    }
}

@media screen and (min-width: 821px) {
    .mobile-more-toggle,
    .mobile-more-menu {
        display: none !important;
    }
}


/* --- Stable Beta 0.4 mobile More arrow repair --- */

/*
Repair version:
- Restores the last known working mobile More menu files.
- Keeps the same working menu JS and panel.
- Uses a text dropdown trigger instead of changing the menu structure.
*/

@media screen and (max-width: 820px) {
    .mobile-more-toggle {
        width: auto !important;
        min-width: 74px !important;
        height: 42px !important;
        min-height: 42px !important;
        padding: 0 12px !important;
        flex-direction: row !important;
        gap: 0 !important;
        font: inherit !important;
    }

    .mobile-more-toggle .mobile-more-arrow-icon {
        display: block !important;
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        background: transparent !important;
        color: #101828 !important;
        font-size: 13px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        letter-spacing: -0.01em !important;
        transform: none !important;
        transition: transform .16s ease !important;
        white-space: nowrap !important;
    }

    .mobile-more-toggle .mobile-more-hidden-line {
        display: none !important;
    }

    .mobile-more-toggle.is-open .mobile-more-arrow-icon {
        transform: none !important;
    }

    body.theme-dark .mobile-more-toggle .mobile-more-arrow-icon {
        background: transparent !important;
        color: #f8fafc !important;
    }
}


/* --- Stable Beta 0.4 combined QR navigation --- */

/*
QR Labels and Made QR codes now appear as one navigation item: QR Codes.
The separate page can still exist internally, but the main nav is cleaner.
*/



/* --- Stable Beta 0.4 Registered QR codes safe repair --- */

/*
Safe repair after the previous label patch:
- Restores the last styled CSS file.
- Removes the old mobile " / labels" suffix.
*/

.mobile-more-grid a[href="qr-labels.php"]::after {
    content: "" !important;
    display: none !important;
}


/* --- Stable Beta 0.4 registered QR page labels --- */

/*
User-facing QR wording is now Registered QR codes.
The underlying filenames stay the same so old links keep working.
*/


/* --- Stable Beta 0.4 registered QR duplicate label fix --- */

/*
Fix is mostly PHP text cleanup.
QR Labels remains the label generator.
Registered QR codes remains the registry/list page.
*/


/* --- Stable Beta 0.4 Registered QR codes layout polish --- */

/*
Registered QR codes page layout:
- Better hero/header balance.
- Summary stats become proper cards.
- Search/management sections align better.
- Mobile remains stacked and readable.
*/

.qr-registry-page {
    max-width: 1240px !important;
    margin: 0 auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

.qr-registry-page > .page-head,
.qr-registry-page .page-head,
.qr-registry-page > header:first-child {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 18px !important;
    align-items: start !important;
    margin-bottom: 22px !important;
}

.qr-registry-page h1 {
    margin-bottom: 8px !important;
}

.qr-registry-page h1 + .muted,
.qr-registry-page h1 + p {
    max-width: 720px !important;
    line-height: 1.55 !important;
}

/* The small count links under the header */
.qr-registry-page h1 ~ p a,
.qr-registry-page > p a {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 38px !important;
    padding: 0 13px !important;
    border-radius: 999px !important;
    background: #eef4ff !important;
    color: #1d4ed8 !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    margin: 4px 8px 4px 0 !important;
}

/* Make the count block feel like a proper dashboard strip */
.qr-registry-page > p:has(a) {
    margin: 18px 0 14px !important;
}

/* Management/search cards should not feel narrow and random */
.qr-registry-page .card {
    max-width: none !important;
}

.qr-registry-page .card:has(input[type="search"]),
.qr-registry-page .card:has(input[name="q"]),
.qr-registry-page .card:has(select[name="filter"]),
.qr-registry-page .card:has(select) {
    margin-top: 20px !important;
}

.qr-registry-page .card h2,
.qr-registry-page .card h3 {
    margin-top: 0 !important;
}

/* Better two-column form feel inside the search panel */
.qr-registry-page .form-grid,
.qr-registry-page form .grid,
.qr-registry-page form {
    gap: 16px !important;
}

.qr-registry-page .btn-row,
.qr-registry-page .form-actions {
    gap: 10px !important;
}

/* Registry table/card spacing */
.qr-registry-page table {
    width: 100% !important;
}

.qr-registry-page .table-wrap,
.qr-registry-page .card:has(table) {
    overflow-x: auto !important;
}

/* Make the top action button feel aligned */
.qr-registry-page .page-actions,
.qr-registry-page .actions {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

/* Dark mode */
body.theme-dark .qr-registry-page h1 ~ p a,
body.theme-dark .qr-registry-page > p a {
    background: #1e293b !important;
    color: #dbeafe !important;
}

@media (min-width: 900px) {
    .qr-registry-page {
        padding-top: 34px !important;
    }

    /* Turn the top count links into a neat row */
    .qr-registry-page h1 ~ p,
    .qr-registry-page > p {
        max-width: 900px !important;
    }
}

@media (max-width: 820px) {
    .qr-registry-page {
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-top: 22px !important;
    }

    .qr-registry-page > .page-head,
    .qr-registry-page .page-head,
    .qr-registry-page > header:first-child {
        grid-template-columns: 1fr !important;
    }

    .qr-registry-page .page-actions,
    .qr-registry-page .actions {
        justify-content: flex-start !important;
    }

    .qr-registry-page h1 ~ p a,
    .qr-registry-page > p a {
        width: 100% !important;
        justify-content: space-between !important;
    }
}



/* --- Stable Beta 0.4 QR nav and rotate image fix --- */

/*
QR Labels remains the label printer.
Registered QR codes remains the registry/list page.
Location image rotation now returns to the visual card and uses filemtime cache busting.
*/

#location-visual {
    scroll-margin-top: 110px;
}

.location-visual-actions form {
    margin: 0;
}


/* --- Stable Beta 0.4 Registered QR stat card polish --- */

/*
The Registered QR codes counters are clickable filters,
but they should look like proper stat buttons/cards, not loose blue links.
*/

.qr-registry-stats {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
    margin: 22px 0 24px !important;
    max-width: 1100px !important;
}

.qr-registry-stats .stat-card {
    min-height: 96px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 18px 20px !important;
    border: 1px solid #d8e0ee !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    color: #101828 !important;
    box-shadow: 0 14px 36px rgba(15, 23, 42, .07) !important;
    text-decoration: none !important;
    transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease, background .14s ease !important;
}

.qr-registry-stats .stat-card:hover,
.qr-registry-stats .stat-card:focus {
    transform: translateY(-2px) !important;
    border-color: #9db7ff !important;
    background: #f8fbff !important;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .10) !important;
    color: #101828 !important;
}

.qr-registry-stats .stat-card span {
    display: block !important;
    color: #516173 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
}

.qr-registry-stats .stat-card strong {
    display: block !important;
    color: #101828 !important;
    font-size: 34px !important;
    font-weight: 950 !important;
    line-height: .9 !important;
    letter-spacing: -0.05em !important;
    text-decoration: none !important;
}

/* Small visual accent per card */
.qr-registry-stats .stat-card::before {
    content: "";
    width: 34px !important;
    height: 4px !important;
    border-radius: 999px !important;
    background: #2563eb !important;
    opacity: .85 !important;
}

/* Optional selected filter state based on current URL is not server-rendered yet,
   so hover/focus is kept clean without changing behaviour. */

body.theme-dark .qr-registry-stats .stat-card {
    background: #111827 !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
    box-shadow: 0 14px 36px rgba(0, 0, 0, .24) !important;
}

body.theme-dark .qr-registry-stats .stat-card:hover,
body.theme-dark .qr-registry-stats .stat-card:focus {
    background: #1e293b !important;
    border-color: #3b82f6 !important;
    color: #ffffff !important;
}

body.theme-dark .qr-registry-stats .stat-card span {
    color: #a8b6ca !important;
}

body.theme-dark .qr-registry-stats .stat-card strong {
    color: #f8fafc !important;
}

@media (max-width: 1000px) {
    .qr-registry-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 560px) {
    .qr-registry-stats {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin-top: 18px !important;
    }

    .qr-registry-stats .stat-card {
        min-height: 76px !important;
        padding: 15px 16px !important;
        flex-direction: row !important;
        align-items: center !important;
    }

    .qr-registry-stats .stat-card::before {
        display: none !important;
    }

    .qr-registry-stats .stat-card strong {
        font-size: 30px !important;
    }
}



/* --- Stable Beta 0.4 Blank labels wording --- */

/*
User-facing wording changed from Reserved blank labels to Blank labels.
Internal filter values remain unchanged so existing logic keeps working.
*/


/* --- Stable Beta 0.4 auth left panel match --- */

/*
Login and Create account now share the same left intro panel.
Visible brand casing should be ItemID, with Stable Beta 0.4.
*/

.auth-intro .eyebrow,
.auth-intro .auth-eyebrow {
    text-transform: none !important;
    letter-spacing: .08em !important;
}

.auth-intro .eyebrow::first-letter,
.auth-intro .auth-eyebrow::first-letter {
    text-transform: uppercase !important;
}

.auth-preview-area strong {
    text-transform: none !important;
}


/* --- Stable Beta 0.4 auth panel matching and ItemID casing fix --- */

/*
Login and create account left panels now share the same markup.
The small brand line is forced to normal casing so it reads "ItemID Stable Beta 0.4",
not "ItemID STABLE BETA 0.4". It uses the same font family as the header.
*/

.auth-intro,
.auth-intro * {
    font-family: inherit !important;
}

.auth-brand,
.auth-intro .auth-brand,
.auth-intro .eyebrow,
.auth-intro .auth-eyebrow {
    text-transform: none !important;
    letter-spacing: .08em !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    color: #2563eb !important;
}

.auth-intro h1 {
    font-family: inherit !important;
}

.auth-pills span {
    text-transform: none !important;
}


/* --- Stable Beta 0.4 auth panels and upload privacy note --- */

/*
Auth pages:
- Login and Create account use the same left panel.
- The small brand line keeps normal ItemID casing and the same app font.
*/

.auth-panel.auth-copy .eyebrow,
.auth-panel.auth-copy .brand-lock,
.auth-body .eyebrow.brand-lock {
    text-transform: none !important;
    font-family: inherit !important;
    letter-spacing: .08em !important;
    color: #2563eb !important;
    font-weight: 900 !important;
}

.auth-panel.auth-copy,
.auth-panel.auth-copy * {
    font-family: inherit !important;
}

.auth-panel.auth-copy h1 {
    font-family: inherit !important;
}

/* Location visual privacy note */
.privacy-note {
    display: grid;
    gap: 5px;
    padding: 14px 16px;
    border: 1px solid #bfdbfe;
    border-radius: 16px;
    background: #eff6ff;
    color: #1e3a8a;
    margin: 10px 0 18px;
}

.privacy-note strong {
    font-size: 14px;
    font-weight: 900;
    color: #1e3a8a;
}

.privacy-note span {
    color: #335075;
    line-height: 1.5;
}

body.theme-dark .privacy-note {
    background: #102033;
    border-color: #1d4ed8;
    color: #dbeafe;
}

body.theme-dark .privacy-note strong {
    color: #dbeafe;
}

body.theme-dark .privacy-note span {
    color: #bfd3f7;
}




/* ===== CSS from itemid_login_redirect_loop_fix_patch.zip ===== */

:root{
  --bg:#f5f7fb;--bg2:#eef4ff;--card:#fff;--text:#101828;--muted:#667085;--line:#d9e1ec;
  --blue:#2563eb;--blue-dark:#1d4ed8;--blue2:#eff4ff;--green:#12b76a;--amber:#f79009;--danger:#b42318;
  --shadow:0 18px 45px rgba(15,23,42,.08);--radius:18px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:linear-gradient(180deg,#f8fbff 0%,var(--bg) 260px);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Arial,sans-serif;font-size:15px;line-height:1.5}a{color:var(--blue-dark);text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3{letter-spacing:-.04em;line-height:1.15;margin:0 0 10px}h1{font-size:34px}h2{font-size:28px}h3{font-size:19px}.muted{color:var(--muted)}.big{font-size:17px;line-height:1.65}.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:22px;padding:14px 24px;background:rgba(255,255,255,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}.brand{display:inline-flex;gap:10px;align-items:center;color:var(--text);font-weight:900;font-size:21px}.brand:hover{text-decoration:none}.brand-mark{width:34px;height:34px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;background:#111827;color:white;font-size:13px;letter-spacing:-.04em}.main-nav{display:flex;align-items:center;gap:4px;flex:1;flex-wrap:wrap}.main-nav a{color:#344054;padding:9px 10px;border-radius:10px;font-weight:700;font-size:14px}.main-nav a:hover{background:var(--blue2);text-decoration:none}.top-actions{display:flex;align-items:center;gap:12px}.muted-link{color:var(--muted);font-weight:700}.page{max-width:1180px;margin:0 auto;padding:28px 22px 60px}.site-footer{max-width:1180px;margin:0 auto;padding:22px;color:var(--muted);border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px}.page-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin:0 0 20px}.page-head p{margin:4px 0 0}.card{background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:18px;box-shadow:0 10px 30px rgba(15,23,42,.045)}.hero{display:grid;grid-template-columns:2fr 1fr;gap:18px;margin-bottom:18px}.hero .card:first-child{background:linear-gradient(135deg,#fff 0%,#f4f7ff 100%)}.grid{display:grid;gap:18px}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.cards4{grid-template-columns:repeat(4,minmax(0,1fr))}.cards4 .card{margin:0}.cards4 h2{font-size:34px;margin-top:6px}.wide{max-width:920px}.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;background:var(--blue);color:white;padding:11px 16px;font-weight:900;cursor:pointer;text-decoration:none;box-shadow:0 8px 18px rgba(37,99,235,.18);font:inherit}.btn:hover{text-decoration:none;background:var(--blue-dark)}.btn.secondary{background:#e8efff;color:var(--blue-dark);box-shadow:none}.btn.secondary:hover{background:#dbe7ff}.btn.ghost{background:white;color:#344054;border:1px solid var(--line);box-shadow:none}.btn.small{padding:8px 12px;border-radius:10px;font-size:14px}.scan-link{background:#111827;color:#fff!important}.form{display:grid;gap:15px}.form label{display:grid;gap:7px;color:#344054;font-size:14px;font-weight:700}.form input,.form select,.form textarea,.searchbar input,.inline-form input,.inline-form select{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px 13px;background:white;color:var(--text);font:inherit;outline:none}.form input:focus,.form select:focus,.form textarea:focus,.searchbar input:focus,.inline-form input:focus,.inline-form select:focus{border-color:#9db7ff;box-shadow:0 0 0 4px rgba(37,99,235,.10)}.searchbar,.inline-form{display:flex;gap:10px;margin-bottom:18px}.table-wrap{overflow:auto;padding:0}table{width:100%;border-collapse:collapse;min-width:720px}th,td{text-align:left;border-bottom:1px solid var(--line);padding:14px 16px;vertical-align:top}th{font-size:12px;color:var(--muted);font-weight:900;text-transform:uppercase;letter-spacing:.05em;background:#fbfcff}tr:hover td{background:#fbfdff}.pill{display:inline-flex;background:var(--blue2);color:var(--blue-dark);border-radius:999px;padding:4px 9px;font-size:13px;font-weight:900}.pill.low,.pill.Empty,.pill.Missing{background:#fff4ed;color:#b54708}.visual{max-width:100%;border-radius:14px;border:1px solid var(--line);box-shadow:0 8px 20px rgba(15,23,42,.06)}.qr-box{display:inline-block;background:white;padding:12px;border:1px solid var(--line);border-radius:14px}.code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:900;background:#f2f4f7;border:1px solid #e4e7ec;border-radius:10px;padding:4px 8px;display:inline-block}.labels{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.label{background:#fff;border:1px solid #111;border-radius:6px;text-align:center;padding:11px;break-inside:avoid}.label .qr{display:inline-block}.label-toolbar{margin:12px 0}.check{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center;gap:8px!important}.alert{background:#fef3f2;color:var(--danger);border:1px solid #fecdca;border-radius:12px;padding:11px 13px;font-weight:700}.notice{background:#eff8ff;color:#175cd3;border:1px solid #b2ddff;border-radius:12px;padding:11px 13px;font-weight:700}.empty{padding:24px;border:1px dashed var(--line);border-radius:14px;background:#fbfcff;color:var(--muted)}
/* Auth */.auth-body{min-height:100vh!important;display:grid!important;place-items:center!important;padding:28px;background:radial-gradient(circle at top left,rgba(37,99,235,.16),transparent 34%),radial-gradient(circle at bottom right,rgba(16,185,129,.10),transparent 28%),var(--bg)}.auth-shell{width:min(980px,100%);display:grid;grid-template-columns:1.15fr .85fr;gap:18px;align-items:stretch}.auth-panel{background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow)}.auth-copy{padding:36px;display:flex;flex-direction:column;justify-content:center;min-height:440px}.logo-mark{width:54px;height:54px;border-radius:16px;background:#111827;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;letter-spacing:-.04em;margin-bottom:22px}.eyebrow{font-weight:900;color:var(--blue);letter-spacing:.08em;text-transform:uppercase;font-size:13px;margin:0 0 10px}.auth-copy h1{font-size:46px;letter-spacing:-.055em;line-height:1.02;margin:0 0 16px;max-width:620px}.auth-copy .big{font-size:17px;line-height:1.6;max-width:600px;margin:0 0 22px}.feature-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}.feature-list span{background:var(--blue2);color:var(--blue-dark);border:1px solid #dbe7ff;border-radius:999px;padding:8px 11px;font-weight:900;font-size:13px}.auth-card{width:auto!important;padding:30px;display:flex;flex-direction:column;justify-content:center}.auth-card h2{font-size:30px;margin:0 0 8px}.auth-card .muted{margin-top:0;margin-bottom:20px}.auth-card input{height:46px}.subtle-link{font-size:14px;font-weight:800;justify-self:start}.auth-card .actions{margin-top:2px}
@media(max-width:900px){.topbar{align-items:flex-start;flex-direction:column}.top-actions{width:100%;justify-content:space-between}.hero,.grid.two,.grid.cards4{grid-template-columns:1fr}.page-head{display:block}.searchbar,.inline-form{flex-direction:column}.labels{grid-template-columns:repeat(2,1fr)}.auth-shell{grid-template-columns:1fr}.auth-copy{min-height:0;padding:24px}.auth-copy h1{font-size:34px}.auth-card{padding:24px}.site-footer{flex-direction:column}}@media print{body{background:white}.topbar,.page-head,.card:not(.table-wrap),.label-toolbar,.site-footer{display:none!important}.page{padding:0}.labels{grid-template-columns:repeat(4,1fr);gap:8px}.label{page-break-inside:avoid;box-shadow:none}}

/* ItemID QR/template patch */
.section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}.section-head h2{font-size:22px;margin:0 0 4px}.field-builder{display:grid;gap:14px;border:1px solid var(--line);border-radius:16px;padding:16px;background:#fbfcff}.quick-fields{display:flex;gap:8px;flex-wrap:wrap}.field-chip{border:1px solid #dbe7ff;background:#eff4ff;color:#1d4ed8;border-radius:999px;padding:7px 10px;font-weight:800;cursor:pointer}.field-chip:hover{background:#dbe7ff}.fields-list{display:grid;gap:10px}.field-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}.label-sheet{display:grid;grid-template-columns:repeat(var(--label-columns,4),minmax(0,1fr));gap:12px}.print-label-card{background:#fff;border:1px solid #111827;border-radius:10px;text-align:center;padding:12px;break-inside:avoid;min-height:calc(var(--qr-size,120px) + 62px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px}.print-label-card .qr{display:inline-flex;align-items:center;justify-content:center}.print-label-card .print-code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:15px;font-weight:900;letter-spacing:.06em}.print-label-card .print-name{font-size:12px;font-weight:800;color:#344054;line-height:1.25}.row-actions{display:flex;gap:12px;white-space:nowrap}.qr-size-form select{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px 13px;background:white;color:var(--text);font:inherit;outline:none}@media(max-width:700px){.field-row{grid-template-columns:1fr}.label-sheet{grid-template-columns:repeat(2,minmax(0,1fr))}.row-actions{display:grid;gap:6px}}

/* ItemID workflow polish patch */
.mini-action{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;border-radius:10px;padding:7px 10px;font-weight:900;color:#1d4ed8;text-decoration:none;white-space:nowrap}.mini-action:hover{background:#eff4ff;text-decoration:none}.pretty-fields{gap:18px}.pretty-list{gap:12px}.pretty-row{grid-template-columns:1fr 42px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px}.pretty-row input{border:0!important;box-shadow:none!important;padding:9px 10px!important}.icon-button{width:34px;height:34px;border:0;border-radius:10px;background:#f2f4f7;color:#344054;font-size:22px;line-height:1;cursor:pointer;font-weight:900}.icon-button:hover{background:#fee4e2;color:#b42318}.community-check{align-self:end;background:#fbfcff;border:1px solid var(--line);border-radius:14px;padding:12px}.community-check span{display:grid;gap:2px}.community-check small{color:var(--muted);font-weight:600}.field-chip{font-size:13px}.print-label-card{min-height:calc(var(--qr-mm,35mm) + 22mm);padding:8mm 4mm}.print-label-card .print-name{max-width:100%;overflow-wrap:anywhere}.custom-prefix-row{display:none}.item-hero{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.item-hero h2{font-size:24px;margin:4px 0 0}.activity-line{border-bottom:1px solid var(--line);padding:0 0 10px;margin:0 0 10px}.qr-size-form{margin-top:14px;display:flex;gap:10px;align-items:end;flex-wrap:wrap}.qr-size-form label{min-width:190px}.add-item-flow{gap:20px}.flow-step{display:flex;gap:14px;align-items:flex-start;border-top:1px solid var(--line);padding-top:18px}.flow-step:first-of-type{border-top:0;padding-top:0}.flow-step h2{font-size:22px;margin:0 0 4px}.step-badge{width:34px;height:34px;border-radius:999px;background:#111827;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:900;flex:0 0 auto}.field-as-card{border:1px dashed #b7c5df;border-radius:14px;padding:13px;background:#fbfcff}.field-as-card p{margin:4px 0 10px}.code-pill{display:inline-flex;background:#f2f4f7;border:1px solid #e4e7ec;border-radius:10px;padding:5px 9px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:900}@media(max-width:800px){.item-hero{grid-template-columns:1fr}.pretty-row{grid-template-columns:1fr 42px}.qr-size-form{display:grid}.flow-step{display:grid}.field-as-card .btn{width:100%}}


/* ItemID workflow patch 2 */
.beta-badge{display:inline-flex;align-items:center;border:1px solid #c7d7fe;background:#eff4ff;color:#1d4ed8;border-radius:999px;padding:2px 7px;font-size:11px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;line-height:1.4}.template-create-card{display:flex;align-items:center;justify-content:space-between;gap:14px}.template-create-card p{margin:3px 0 0}.compact-check{width:auto!important;display:flex!important;grid-template-columns:auto 1fr!important;align-items:center!important;gap:8px!important;min-width:170px}.compact-check input{width:auto!important}.qr-box canvas,.qr-box img{display:block!important;max-width:100%!important;max-height:100%!important}.print-label-card{overflow:hidden}.print-label-card .dynamic-qr canvas,.print-label-card .dynamic-qr img{display:block!important}.print-label-card .print-code,.print-label-card .print-name{max-width:100%;overflow-wrap:anywhere}.single-print-label{overflow:hidden}@media(max-width:800px){.template-create-card{display:grid}.compact-check{min-width:0}}

/* Items table action-cell border fix */
td.row-actions,
th.row-actions {
    display: table-cell !important;
    white-space: nowrap;
    vertical-align: middle;
    border-bottom: 1px solid var(--line) !important;
}

td.row-actions {
    min-width: 230px;
}

td.row-actions .mini-action {
    margin-right: 8px;
    margin-bottom: 0;
}

td.row-actions .mini-action:last-child {
    margin-right: 0;
}

tr:hover td.row-actions {
    background: #fbfdff;
}

@media (max-width: 760px) {
    td.row-actions {
        min-width: 170px;
    }

    td.row-actions .mini-action {
        display: flex;
        width: 100%;
        margin-right: 0;
        margin-bottom: 6px;
    }

    td.row-actions .mini-action:last-child {
        margin-bottom: 0;
    }
}

/* Stable Beta 0.4 additions */
.btn.danger,
.btn.danger.ghost {
  color: #b42318 !important;
  border-color: #fecdca !important;
  background: #fff !important;
  box-shadow: none !important;
}
.btn.danger:hover,
.btn.danger.ghost:hover {
  background: #fef3f2 !important;
  text-decoration: none;
}
.mini-action.danger {
  color: #b42318 !important;
  border-color: #fecdca !important;
  background: #fff !important;
}
.export-card {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.export-card:hover {
  transform: translateY(-2px);
  text-decoration: none;
  border-color: #b8c7e6;
  box-shadow: 0 18px 42px rgba(15,23,42,.09);
}
.site-footer a { color: inherit; font-weight: 800; }

/* Stable Beta 0.4 template/item field builder polish */
.item-template-field-row {
    display: grid;
    grid-template-columns: minmax(150px, .35fr) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 12px;
    border: 1px solid #d8e0ee;
    border-radius: 14px;
    background: #ffffff;
    margin-bottom: 10px;
}

.template-field-input-wrap {
    display: grid;
    gap: 6px;
}

.template-field-input-wrap input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    margin: 8px 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.field-unit-hint {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 9px;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 900;
}

.small {
    font-size: 12px;
}

@media (max-width: 700px) {
    .item-template-field-row {
        grid-template-columns: 1fr;
    }
}

/* --- Profile/preferences patch CSS --- */

/* Profile and preferences */
.profile-settings-row {
    display: grid;
    grid-template-columns: 112px 1fr;
    gap: 22px;
    align-items: center;
    margin-bottom: 20px;
}

.profile-settings-avatar {
    width: 96px;
    height: 96px;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid #d8e0ee;
    background: #eef4ff;
    color: #1d4ed8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    font-weight: 900;
}

.profile-settings-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.checkbox-line {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    font-weight: 800;
}

.checkbox-line input,
.checkbox-card input {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.checkbox-card {
    min-height: 70px;
    border: 1px solid #d8e0ee;
    border-radius: 14px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}

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

.checkbox-card small {
    margin-top: 4px;
    color: #64748b;
}

@media (max-width: 650px) {
    .profile-settings-row {
        grid-template-columns: 1fr;
    }
}


/* --- Stable Beta 0.4 theme toggle + dark fix --- */

.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,255,255,.94);
    border-bottom: 1px solid #d8e0ee;
    backdrop-filter: blur(14px);
}

.topbar-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    gap: 22px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #0f172a;
    flex: 0 0 auto;
}

.brand:hover {
    text-decoration: none;
}

.brand-name {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1;
}

.beta-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 19px;
    padding: 0 7px;
    border: 1px solid #b8c7e6;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    white-space: nowrap;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 auto;
    min-width: 0;
}

.main-nav a {
    color: #335075;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
}

.main-nav a:hover {
    color: #2563eb;
    text-decoration: none;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

.scan-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 16px;
    border-radius: 12px;
    background: #111827;
    color: #ffffff !important;
    text-decoration: none;
    font-weight: 800;
    font-size: 14px;
    box-shadow: 0 10px 24px rgba(17, 24, 39, .18);
}

.scan-button:hover {
    text-decoration: none;
}

.profile-menu {
    position: relative;
}

.profile-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 4px 8px 4px 4px;
    border: 1px solid #d8e0ee;
    border-radius: 999px;
    background: #ffffff;
    color: #0f172a;
    text-decoration: none;
    font-weight: 800;
    cursor: pointer;
    max-width: 260px;
}

.profile-avatar {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    object-fit: cover;
    background: #eef4ff;
    color: #1d4ed8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    border: 1px solid #c9d7f2;
    overflow: hidden;
    flex: 0 0 auto;
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-label {
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.profile-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 280px;
    border: 1px solid #d8e0ee;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .16);
    padding: 10px;
    display: none;
}

.profile-menu:hover .profile-dropdown,
.profile-menu:focus-within .profile-dropdown {
    display: block;
}

.profile-dropdown-header {
    padding: 10px;
    border-bottom: 1px solid #edf2f7;
    margin-bottom: 8px;
}

.profile-dropdown-header strong,
.profile-dropdown-header span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-dropdown-header span {
    color: #64748b;
    font-size: 13px;
    margin-top: 2px;
}

.profile-dropdown a {
    display: block;
    padding: 10px;
    border-radius: 12px;
    color: #334155;
    text-decoration: none;
    font-weight: 800;
}

.profile-dropdown a:hover {
    background: #f1f5f9;
    color: #0f172a;
    text-decoration: none;
}

.theme-toggle-form {
    margin: 0;
}

.theme-toggle {
    width: 62px;
    height: 34px;
    border: 1px solid #d8e0ee;
    border-radius: 999px;
    background: #eef4ff;
    position: relative;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    box-shadow: none;
}

.theme-toggle-bulb {
    position: absolute;
    left: 8px;
    font-size: 15px;
    line-height: 1;
    z-index: 2;
    opacity: .8;
}

.theme-toggle-knob {
    position: absolute;
    left: 3px;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 3px 10px rgba(15,23,42,.18);
    transition: transform .16s ease;
}

.theme-toggle.is-dark {
    background: #172554;
    border-color: #2563eb;
}

.theme-toggle.is-dark .theme-toggle-bulb {
    left: 36px;
    opacity: 1;
}

.theme-toggle.is-dark .theme-toggle-knob {
    transform: translateX(28px);
    background: #0f172a;
}

.app-shell {
    max-width: 1240px;
    margin: 0 auto;
    padding: 28px 18px 48px;
}

/* Dark theme variables and hard overrides */
body.theme-dark {
    --bg:#0b1220;
    --bg2:#0f172a;
    --card:#111827;
    --text:#f8fafc;
    --muted:#a8b6ca;
    --line:#334155;
    --blue2:#172554;
    background: #0b1220 !important;
    color: #f8fafc !important;
    color-scheme: dark;
}

body.theme-dark .topbar {
    background: rgba(15, 23, 42, .96) !important;
    border-bottom-color: #334155 !important;
}

body.theme-dark .brand,
body.theme-dark .brand-name,
body.theme-dark .profile-label {
    color: #f8fafc !important;
}

body.theme-dark .beta-badge {
    background: #172554 !important;
    border-color: #2563eb !important;
    color: #bfdbfe !important;
}

body.theme-dark .main-nav a {
    color: #cbd5e1 !important;
}

body.theme-dark .main-nav a:hover {
    background: #1e293b !important;
    color: #ffffff !important;
}

body.theme-dark .profile-trigger,
body.theme-dark .profile-dropdown,
body.theme-dark .card,
body.theme-dark section.card,
body.theme-dark form.card,
body.theme-dark details.card,
body.theme-dark .table-wrap,
body.theme-dark .metric-card,
body.theme-dark .filter-panel,
body.theme-dark .template-field-card,
body.theme-dark .template-field-row,
body.theme-dark .location-summary,
body.theme-dark .auth-panel {
    background: #111827 !important;
    background-color: #111827 !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
    box-shadow: 0 18px 45px rgba(0,0,0,.22) !important;
}

body.theme-dark .hero .card:first-child {
    background: linear-gradient(135deg, #111827 0%, #172033 100%) !important;
}

body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark strong,
body.theme-dark label,
body.theme-dark th,
body.theme-dark td {
    color: #f8fafc !important;
}

body.theme-dark .muted,
body.theme-dark .help,
body.theme-dark small,
body.theme-dark .site-footer,
body.theme-dark .metric-card span {
    color: #a8b6ca !important;
}

body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

body.theme-dark input::placeholder,
body.theme-dark textarea::placeholder {
    color: #74839a !important;
}

body.theme-dark table,
body.theme-dark tbody,
body.theme-dark tr {
    background: #111827 !important;
    color: #f8fafc !important;
}

body.theme-dark thead,
body.theme-dark th {
    background: #0f172a !important;
    color: #cbd5e1 !important;
}

body.theme-dark td {
    background: #111827 !important;
    color: #e5edf8 !important;
    border-color: #334155 !important;
}

body.theme-dark tr:hover td {
    background: #172033 !important;
}

body.theme-dark .code-pill,
body.theme-dark .badge,
body.theme-dark .pill,
body.theme-dark .status-pill,
body.theme-dark .tag,
body.theme-dark .field-unit-hint {
    background: #1e293b !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}

body.theme-dark .btn.secondary,
body.theme-dark .btn.ghost,
body.theme-dark a.btn.secondary,
body.theme-dark a.btn.ghost {
    background: #1e293b !important;
    color: #bfdbfe !important;
    border: 1px solid #334155 !important;
    box-shadow: none !important;
}

body.theme-dark .btn.secondary:hover,
body.theme-dark .btn.ghost:hover {
    background: #26344a !important;
    color: #ffffff !important;
}

body.theme-dark .qr-label-preview,
body.theme-dark .qr-preview,
body.theme-dark .qr-card-preview,
body.theme-dark .print-label,
body.theme-dark .label-card,
body.theme-dark .print-sheet,
body.theme-dark .print-sheet .label,
body.theme-dark canvas,
body.theme-dark .qr-box {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #111827 !important;
    border-color: #111827 !important;
}

/* System preference can be selected in profile, but the top toggle only switches light/dark. */
@media (max-width: 900px) {
    .topbar-inner {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 12px;
    }

    .main-nav {
        order: 3;
        width: 100%;
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .topbar-actions {
        margin-left: auto;
    }

    .profile-label {
        display: none;
    }
}


/* --- Stable Beta 0.4 sun/moon theme toggle positioning --- */

.topbar-inner {
    display: flex !important;
    align-items: center !important;
}

.main-nav {
    justify-content: flex-start;
}

.topbar-actions {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.theme-toggle-form {
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}

.theme-toggle {
    width: 66px !important;
    height: 36px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 999px !important;
    background: #e0f2fe !important;
    position: relative !important;
    cursor: pointer !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

.theme-icon {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1 !important;
    font-size: 15px !important;
    line-height: 1 !important;
    pointer-events: none !important;
}

.theme-icon-sun {
    left: 10px !important;
    color: #f59e0b !important;
    opacity: 1 !important;
}

.theme-icon-moon {
    right: 11px !important;
    color: #64748b !important;
    opacity: .55 !important;
}

.theme-toggle-knob {
    position: absolute !important;
    left: 3px !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    box-shadow: 0 3px 10px rgba(15,23,42,.22) !important;
    transition: transform .16s ease, background .16s ease !important;
    z-index: 2 !important;
}

.theme-toggle.is-dark {
    background: #172554 !important;
    border-color: #2563eb !important;
}

.theme-toggle.is-dark .theme-toggle-knob {
    transform: translateX(30px) !important;
    background: #0f172a !important;
}

.theme-toggle.is-dark .theme-icon-sun {
    opacity: .45 !important;
    color: #94a3b8 !important;
}

.theme-toggle.is-dark .theme-icon-moon {
    opacity: 1 !important;
    color: #dbeafe !important;
}

body.theme-dark .theme-toggle {
    background: #172554 !important;
    border-color: #2563eb !important;
}

@media (max-width: 900px) {
    .topbar-actions {
        margin-left: auto !important;
    }
}


/* --- Stable Beta 0.4 dark mode button/pill fix --- */

/* General white button fix in dark mode */
body.theme-dark button,
body.theme-dark input[type="submit"],
body.theme-dark input[type="button"],
body.theme-dark .btn,
body.theme-dark a.btn {
    border-color: #334155;
}

body.theme-dark .btn:not(.danger):not(.primary),
body.theme-dark a.btn:not(.danger):not(.primary),
body.theme-dark button.btn:not(.danger):not(.primary) {
    background: #1e293b !important;
    color: #dbeafe !important;
    border: 1px solid #334155 !important;
    box-shadow: none !important;
}

body.theme-dark .btn:not(.danger):not(.primary):hover,
body.theme-dark a.btn:not(.danger):not(.primary):hover,
body.theme-dark button.btn:not(.danger):not(.primary):hover {
    background: #26344a !important;
    color: #ffffff !important;
}

/* Keep main action buttons blue */
body.theme-dark .btn:first-child,
body.theme-dark .btn.primary,
body.theme-dark button.btn.primary,
body.theme-dark a.btn.primary {
    background: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
}

/* Delete/danger buttons were showing white. */
body.theme-dark .btn.danger,
body.theme-dark a.btn.danger,
body.theme-dark button.btn.danger,
body.theme-dark .danger,
body.theme-dark a[href*="delete.php"],
body.theme-dark button[name*="delete"],
body.theme-dark button[value*="delete"],
body.theme-dark button[value*="clear_reserved"],
body.theme-dark .delete-button,
body.theme-dark .clear-button {
    background: #3f1d1d !important;
    color: #fecaca !important;
    border: 1px solid #7f1d1d !important;
    box-shadow: none !important;
}

body.theme-dark .btn.danger:hover,
body.theme-dark a.btn.danger:hover,
body.theme-dark button.btn.danger:hover,
body.theme-dark .danger:hover,
body.theme-dark a[href*="delete.php"]:hover,
body.theme-dark button[name*="delete"]:hover,
body.theme-dark button[value*="delete"]:hover,
body.theme-dark button[value*="clear_reserved"]:hover,
body.theme-dark .delete-button:hover,
body.theme-dark .clear-button:hover {
    background: #7f1d1d !important;
    color: #ffffff !important;
}

/* Some pages use plain anchors styled as buttons without btn classes. */
body.theme-dark .row-actions a,
body.theme-dark .table-actions-cell a,
body.theme-dark .actions a,
body.theme-dark .actions button {
    border-color: #334155;
}

body.theme-dark .row-actions a:not(.danger):not([href*="delete.php"]),
body.theme-dark .table-actions-cell a:not(.danger):not([href*="delete.php"]) {
    background: #1e293b !important;
    color: #dbeafe !important;
    border: 1px solid #334155 !important;
}

body.theme-dark .row-actions a:not(.danger):not([href*="delete.php"]):hover,
body.theme-dark .table-actions-cell a:not(.danger):not([href*="delete.php"]):hover {
    background: #26344a !important;
    color: #ffffff !important;
}

/* Code pills were still too pale in some table cells. */
body.theme-dark .code-pill,
body.theme-dark td .code-pill,
body.theme-dark .qr-code-pill,
body.theme-dark .item-id-pill {
    background: #1e293b !important;
    color: #e2e8f0 !important;
    border: 1px solid #334155 !important;
}

/* Search filter detail summary was still white on some browsers. */
body.theme-dark details,
body.theme-dark details summary,
body.theme-dark details.card,
body.theme-dark details.card summary {
    background: #111827 !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

/* Preserve white only where it must be white for QR/print. */
body.theme-dark .qr-label-preview,
body.theme-dark .qr-preview,
body.theme-dark .qr-card-preview,
body.theme-dark .print-label,
body.theme-dark .label-card,
body.theme-dark .print-sheet,
body.theme-dark .print-sheet .label,
body.theme-dark canvas,
body.theme-dark .qr-box {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #111827 !important;
    border-color: #111827 !important;
}

/* Same button fixes for system theme when OS is dark. */
@media (prefers-color-scheme: dark) {
    body.theme-system .btn:not(.danger):not(.primary),
    body.theme-system a.btn:not(.danger):not(.primary),
    body.theme-system button.btn:not(.danger):not(.primary) {
        background: #1e293b !important;
        color: #dbeafe !important;
        border: 1px solid #334155 !important;
        box-shadow: none !important;
    }

    body.theme-system .btn.danger,
    body.theme-system a.btn.danger,
    body.theme-system button.btn.danger,
    body.theme-system .danger,
    body.theme-system a[href*="delete.php"],
    body.theme-system button[name*="delete"],
    body.theme-system button[value*="delete"],
    body.theme-system button[value*="clear_reserved"],
    body.theme-system .delete-button,
    body.theme-system .clear-button {
        background: #3f1d1d !important;
        color: #fecaca !important;
        border: 1px solid #7f1d1d !important;
        box-shadow: none !important;
    }

    body.theme-system .code-pill,
    body.theme-system td .code-pill,
    body.theme-system .qr-code-pill,
    body.theme-system .item-id-pill {
        background: #1e293b !important;
        color: #e2e8f0 !important;
        border: 1px solid #334155 !important;
    }

    body.theme-system details,
    body.theme-system details summary,
    body.theme-system details.card,
    body.theme-system details.card summary {
        background: #111827 !important;
        color: #f8fafc !important;
        border-color: #334155 !important;
    }
}


/* --- Stable Beta 0.4 dark cleanup: toggle, white panels, buttons --- */

/* Hide old/broken theme toggle visuals if old CSS is still cached on a page. */
.theme-toggle,
.theme-toggle-form,
.theme-icon,
.theme-option,
.theme-toggle-bulb {
    display: none !important;
}

/* Clean topbar layout */
.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,255,255,.94);
    border-bottom: 1px solid #d8e0ee;
    backdrop-filter: blur(14px);
}

.topbar-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    gap: 22px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #0f172a;
    flex: 0 0 auto;
}

.brand:hover {
    text-decoration: none;
}

.brand-name {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1;
}

.beta-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 19px;
    padding: 0 7px;
    border: 1px solid #b8c7e6;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    white-space: nowrap;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 auto;
    min-width: 0;
}

.main-nav a {
    color: #335075;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
}

.main-nav a:hover {
    color: #2563eb;
    text-decoration: none;
}

.topbar-actions {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex: 0 0 auto;
}

.scan-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 16px;
    border-radius: 12px;
    background: #111827;
    color: #ffffff !important;
    text-decoration: none;
    font-weight: 800;
    font-size: 14px;
    box-shadow: 0 10px 24px rgba(17,24,39,.18);
}

.scan-button:hover {
    text-decoration: none;
}

.scan-icon {
    font-size: 15px;
    line-height: 1;
}

.profile-menu {
    position: relative;
}

.profile-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 4px 8px 4px 4px;
    border: 1px solid #d8e0ee;
    border-radius: 999px;
    background: #ffffff;
    color: #0f172a;
    text-decoration: none;
    font-weight: 800;
    cursor: pointer;
    max-width: 260px;
}

.profile-avatar {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    border: 1px solid #c9d7f2;
    overflow: hidden;
    flex: 0 0 auto;
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-label {
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.profile-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 280px;
    border: 1px solid #d8e0ee;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(15,23,42,.16);
    padding: 10px;
    display: none;
}

.profile-menu:hover .profile-dropdown,
.profile-menu:focus-within .profile-dropdown {
    display: block;
}

.profile-dropdown-header {
    padding: 10px;
    border-bottom: 1px solid #edf2f7;
    margin-bottom: 8px;
}

.profile-dropdown-header strong,
.profile-dropdown-header span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-dropdown-header span {
    color: #64748b;
    font-size: 13px;
    margin-top: 2px;
}

.profile-dropdown a {
    display: block;
    padding: 10px;
    border-radius: 12px;
    color: #334155;
    text-decoration: none;
    font-weight: 800;
}

.profile-dropdown a:hover {
    background: #f1f5f9;
    color: #0f172a;
    text-decoration: none;
}

/* New independent sun/moon switch */
.mode-switch-form {
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}

.mode-switch {
    width: 72px !important;
    height: 38px !important;
    border-radius: 999px !important;
    border: 1px solid #cbd5e1 !important;
    background: #e0f2fe !important;
    position: relative !important;
    cursor: pointer !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: inline-flex !important;
    align-items: center !important;
    box-shadow: none !important;
}

.mode-track-icon {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    pointer-events: none !important;
}

.mode-track-sun {
    left: 11px !important;
    color: #f59e0b !important;
    opacity: .25 !important;
}

.mode-track-moon {
    right: 12px !important;
    color: #64748b !important;
    opacity: .35 !important;
}

.mode-knob {
    position: absolute !important;
    left: 3px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #f59e0b !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    box-shadow: 0 3px 10px rgba(15,23,42,.22) !important;
    transition: transform .16s ease, background .16s ease, color .16s ease !important;
    z-index: 2 !important;
}

.mode-switch.mode-dark {
    background: #172554 !important;
    border-color: #2563eb !important;
}

.mode-switch.mode-dark .mode-knob {
    transform: translateX(34px) !important;
    background: #0f172a !important;
    color: #dbeafe !important;
}

.mode-switch.mode-dark .mode-track-sun {
    color: #94a3b8 !important;
    opacity: .35 !important;
}

.mode-switch.mode-dark .mode-track-moon {
    opacity: .22 !important;
}

/* Dark theme core */
body.theme-dark {
    --bg:#0b1220;
    --bg2:#0f172a;
    --card:#111827;
    --text:#f8fafc;
    --muted:#a8b6ca;
    --line:#334155;
    --blue2:#172554;
    background:#0b1220 !important;
    color:#f8fafc !important;
    color-scheme: dark;
}

body.theme-dark .topbar {
    background: rgba(15,23,42,.96) !important;
    border-bottom-color: #334155 !important;
}

body.theme-dark .brand,
body.theme-dark .brand-name,
body.theme-dark .profile-label {
    color:#f8fafc !important;
}

body.theme-dark .beta-badge {
    background:#172554 !important;
    border-color:#2563eb !important;
    color:#bfdbfe !important;
}

body.theme-dark .main-nav a {
    color:#cbd5e1 !important;
}

body.theme-dark .main-nav a:hover {
    background:#1e293b !important;
    color:#ffffff !important;
}

body.theme-dark .scan-button {
    background:#2563eb !important;
    color:#ffffff !important;
}

body.theme-dark .profile-trigger,
body.theme-dark .profile-dropdown {
    background:#111827 !important;
    border-color:#334155 !important;
    color:#f8fafc !important;
}

body.theme-dark .profile-dropdown-header {
    border-bottom-color:#334155 !important;
}

body.theme-dark .profile-dropdown-header span {
    color:#94a3b8 !important;
}

body.theme-dark .profile-dropdown a {
    color:#cbd5e1 !important;
}

body.theme-dark .profile-dropdown a:hover {
    background:#1e293b !important;
    color:#ffffff !important;
}

/* Kill the stubborn white panels seen in Items/Add Item/Templates/Made QR codes */
body.theme-dark .card,
body.theme-dark section.card,
body.theme-dark form.card,
body.theme-dark details.card,
body.theme-dark .table-wrap,
body.theme-dark .items-filter-panel,
body.theme-dark .items-filter-panel[open],
body.theme-dark .items-filter-panel summary,
body.theme-dark .field-as-card,
body.theme-dark .field-as-card.template-create-card,
body.theme-dark .template-fields-panel,
body.theme-dark .template-field-builder,
body.theme-dark .template-share-card,
body.theme-dark .template-preset,
body.theme-dark .template-field-row,
body.theme-dark .template-field-row-main,
body.theme-dark .template-field-row-extra,
body.theme-dark .template-options-wrap,
body.theme-dark .template-required,
body.theme-dark .template-create-card,
body.theme-dark .location-summary,
body.theme-dark .scanner-box,
body.theme-dark .notice:not(.print-label):not(.label-card),
body.theme-dark .alert,
body.theme-dark .stat-card,
body.theme-dark .metric-card {
    background:#111827 !important;
    background-color:#111827 !important;
    color:#f8fafc !important;
    border-color:#334155 !important;
    box-shadow:0 18px 45px rgba(0,0,0,.22) !important;
}

body.theme-dark .hero .card:first-child {
    background:linear-gradient(135deg,#111827 0%,#172033 100%) !important;
}

body.theme-dark .items-filter-panel *,
body.theme-dark .template-field-builder *,
body.theme-dark .template-share-card *,
body.theme-dark .template-preset *,
body.theme-dark .field-as-card *,
body.theme-dark .template-fields-panel *,
body.theme-dark .card *,
body.theme-dark .table-wrap * {
    color: inherit;
}

body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark strong,
body.theme-dark label,
body.theme-dark th,
body.theme-dark td,
body.theme-dark summary,
body.theme-dark .section-head,
body.theme-dark .page-head {
    color:#f8fafc !important;
}

body.theme-dark .muted,
body.theme-dark .help,
body.theme-dark .hint,
body.theme-dark small,
body.theme-dark .template-help,
body.theme-dark .template-field-hint,
body.theme-dark .site-footer,
body.theme-dark .items-filter-grid label {
    color:#a8b6ca !important;
}

body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea,
body.theme-dark .items-search-row input,
body.theme-dark .items-filter-grid select,
body.theme-dark .template-field-row input,
body.theme-dark .template-field-row select {
    background:#0f172a !important;
    border-color:#334155 !important;
    color:#f8fafc !important;
}

body.theme-dark input::placeholder,
body.theme-dark textarea::placeholder {
    color:#74839a !important;
}

body.theme-dark table,
body.theme-dark tbody,
body.theme-dark tr {
    background:#111827 !important;
    color:#f8fafc !important;
}

body.theme-dark thead,
body.theme-dark th {
    background:#0f172a !important;
    color:#cbd5e1 !important;
}

body.theme-dark td {
    background:#111827 !important;
    color:#e5edf8 !important;
    border-color:#334155 !important;
}

body.theme-dark tr:hover td {
    background:#172033 !important;
}

body.theme-dark .code-pill,
body.theme-dark td .code-pill,
body.theme-dark .qr-code-pill,
body.theme-dark .item-id-pill,
body.theme-dark .badge,
body.theme-dark .pill,
body.theme-dark .status-pill,
body.theme-dark .tag,
body.theme-dark .field-unit-hint {
    background:#1e293b !important;
    color:#e2e8f0 !important;
    border:1px solid #334155 !important;
}

/* Buttons, including delete buttons that were staying white */
body.theme-dark .btn,
body.theme-dark a.btn,
body.theme-dark button.btn,
body.theme-dark .row-actions a,
body.theme-dark .table-actions-cell a,
body.theme-dark .actions a,
body.theme-dark .actions button {
    background:#1e293b !important;
    color:#dbeafe !important;
    border:1px solid #334155 !important;
    box-shadow:none !important;
}

body.theme-dark .btn:hover,
body.theme-dark a.btn:hover,
body.theme-dark button.btn:hover,
body.theme-dark .row-actions a:hover,
body.theme-dark .table-actions-cell a:hover,
body.theme-dark .actions a:hover,
body.theme-dark .actions button:hover {
    background:#26344a !important;
    color:#ffffff !important;
}

body.theme-dark .btn.danger,
body.theme-dark a.btn.danger,
body.theme-dark button.btn.danger,
body.theme-dark a[href*="delete.php"],
body.theme-dark button[name*="delete"],
body.theme-dark button[value*="delete"],
body.theme-dark button[value*="clear_reserved"],
body.theme-dark .delete-button,
body.theme-dark .clear-button {
    background:#3f1d1d !important;
    color:#fecaca !important;
    border:1px solid #7f1d1d !important;
}

body.theme-dark .btn.danger:hover,
body.theme-dark a.btn.danger:hover,
body.theme-dark button.btn.danger:hover,
body.theme-dark a[href*="delete.php"]:hover,
body.theme-dark button[name*="delete"]:hover,
body.theme-dark button[value*="delete"]:hover,
body.theme-dark button[value*="clear_reserved"]:hover {
    background:#7f1d1d !important;
    color:#ffffff !important;
}

/* Primary actions stay blue */
body.theme-dark .btn.primary,
body.theme-dark a.btn.primary,
body.theme-dark .actions > .btn:first-child:not(.danger),
body.theme-dark .page-head .btn:last-child:not(.danger) {
    background:#2563eb !important;
    color:#ffffff !important;
    border-color:#2563eb !important;
}

/* QR and print surfaces stay white deliberately */
body.theme-dark .qr-label-preview,
body.theme-dark .qr-preview,
body.theme-dark .qr-card-preview,
body.theme-dark .print-label,
body.theme-dark .label-card,
body.theme-dark .print-sheet,
body.theme-dark .print-sheet .label,
body.theme-dark canvas,
body.theme-dark .qr-box {
    background:#ffffff !important;
    background-color:#ffffff !important;
    color:#111827 !important;
    border-color:#111827 !important;
}

@media (max-width:900px) {
    .topbar-inner {
        align-items:flex-start;
        flex-wrap:wrap;
        gap:12px;
    }

    .main-nav {
        order:3;
        width:100%;
        overflow-x:auto;
        padding-bottom:4px;
    }

    .topbar-actions {
        margin-left:auto !important;
    }

    .profile-label {
        display:none;
    }
}


/* --- Stable Beta 0.4 profile dropdown hover bridge + demo link polish --- */

.profile-menu {
    position: relative !important;
}

.profile-dropdown {
    top: calc(100% + 6px) !important;
    right: 0 !important;
}

/* Invisible bridge stops the dropdown disappearing while moving from profile button to menu. */
.profile-menu::after {
    content: '' !important;
    position: absolute !important;
    left: -12px !important;
    right: -12px !important;
    top: 100% !important;
    height: 14px !important;
    display: block !important;
    background: transparent !important;
    pointer-events: auto !important;
}

.profile-menu:hover .profile-dropdown,
.profile-menu:focus-within .profile-dropdown,
.profile-dropdown:hover {
    display: block !important;
}

.auth-extra-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.demo-page {
    display: grid;
    gap: 22px;
}

.demo-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, .9fr);
    gap: 18px;
    align-items: stretch;
}

.demo-card-stack {
    display: grid;
    gap: 14px;
}

.demo-steps {
    counter-reset: demoStep;
    display: grid;
    gap: 12px;
}

.demo-step {
    counter-increment: demoStep;
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 12px;
    align-items: start;
    padding: 14px;
    border: 1px solid var(--line, #d8e0ee);
    border-radius: 16px;
    background: var(--card, #fff);
}

.demo-step::before {
    content: counter(demoStep);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #2563eb;
    color: #fff;
    font-weight: 900;
}

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

.demo-mini {
    border: 1px solid var(--line, #d8e0ee);
    border-radius: 18px;
    background: var(--card, #fff);
    padding: 18px;
}

.demo-mini h3 {
    margin-top: 0;
}

.demo-fake-table {
    display: grid;
    gap: 8px;
}

.demo-fake-row {
    display: grid;
    grid-template-columns: 90px 1fr 100px;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--line, #d8e0ee);
    border-radius: 12px;
    align-items: center;
}

.demo-fake-qr {
    width: 54px;
    height: 54px;
    border-radius: 10px;
    background:
        linear-gradient(90deg, #111 10px, transparent 10px) 0 0/18px 18px,
        linear-gradient(#111 10px, transparent 10px) 0 0/18px 18px,
        #fff;
    border: 8px solid #fff;
    box-shadow: 0 0 0 1px #d8e0ee;
}

body.theme-dark .demo-step,
body.theme-dark .demo-mini,
body.theme-dark .demo-fake-row {
    background: #111827 !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

body.theme-dark .demo-fake-qr {
    background:
        linear-gradient(90deg, #111 10px, transparent 10px) 0 0/18px 18px,
        linear-gradient(#111 10px, transparent 10px) 0 0/18px 18px,
        #fff !important;
    border-color: #fff !important;
}

@media (max-width: 900px) {
    .demo-hero,
    .demo-grid {
        grid-template-columns: 1fr;
    }
}


/* --- Stable Beta 0.4 public demo dashboard + login required modal --- */

.public-demo-body {
    min-height: 100vh;
    background: linear-gradient(180deg, #f6f9ff 0%, #eef3fb 260px);
    color: #101828;
}

.public-demo-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,255,255,.94);
    border-bottom: 1px solid #d8e0ee;
    backdrop-filter: blur(14px);
}

.public-demo-topbar-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 18px;
}

.public-demo-nav {
    display: flex;
    gap: 14px;
    align-items: center;
    flex: 1 1 auto;
    overflow-x: auto;
}

.public-demo-nav a,
.public-demo-nav button {
    border: 0;
    background: transparent;
    color: #335075;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    padding: 8px 0;
}

.public-demo-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.demo-shell {
    max-width: 1240px;
    margin: 0 auto;
    padding: 34px 18px 60px;
}

.demo-disabled {
    cursor: pointer;
}

.demo-locked-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 900;
}

.demo-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, .48);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.demo-modal-backdrop.is-open {
    display: flex;
}

.demo-modal {
    width: min(520px, 100%);
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid #d8e0ee;
    box-shadow: 0 28px 80px rgba(15,23,42,.26);
    padding: 24px;
}

.demo-modal h2 {
    margin-top: 0;
}

.demo-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.demo-preview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, .9fr);
    gap: 18px;
    margin-bottom: 22px;
}

.demo-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}

.demo-metric {
    border: 1px solid #d8e0ee;
    background: #ffffff;
    border-radius: 18px;
    padding: 20px;
    text-decoration: none;
    color: #101828;
}

.demo-metric span {
    display: flex;
    justify-content: space-between;
    color: #667085;
}

.demo-metric span::after {
    content: '↗';
    color: #98a2b3;
    font-weight: 900;
}

.demo-metric strong {
    display: block;
    font-size: 34px;
    margin-top: 8px;
}

.demo-fake-table-card {
    overflow: hidden;
}

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

.demo-table th,
.demo-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #e4eaf3;
    text-align: left;
}

.demo-table th {
    color: #667085;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.demo-workflow-list {
    margin: 0;
    padding-left: 22px;
    color: #516173;
    line-height: 1.7;
}

.demo-qr-card {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
    padding: 14px;
    border: 1px solid #d8e0ee;
    border-radius: 18px;
    background: #f8fbff;
}

.demo-qr-box {
    width: 84px;
    height: 84px;
    border-radius: 12px;
    background:
        linear-gradient(90deg, #111 9px, transparent 9px) 0 0/18px 18px,
        linear-gradient(#111 9px, transparent 9px) 0 0/18px 18px,
        #fff;
    border: 10px solid #fff;
    box-shadow: 0 0 0 1px #d8e0ee;
    flex: 0 0 auto;
}

.demo-hint-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.demo-hint {
    border: 1px solid #d8e0ee;
    border-radius: 18px;
    padding: 18px;
    background: #ffffff;
}

.demo-hint h3 {
    margin-top: 0;
}

@media (max-width: 900px) {
    .demo-preview-grid,
    .demo-metrics,
    .demo-hint-row {
        grid-template-columns: 1fr;
    }

    .public-demo-topbar-inner {
        flex-wrap: wrap;
    }

    .public-demo-actions {
        margin-left: auto;
    }
}


/* --- Stable Beta 0.4 scrollable patch history --- */

.patch-history-scroll {
    max-height: 420px;
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid var(--line, #d8e0ee);
    border-radius: 16px;
}

.patch-history-scroll table {
    margin: 0;
}

.patch-history-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f8fbff;
}

.patch-history-scroll td,
.patch-history-scroll th {
    vertical-align: top;
}

.patch-history-note {
    margin-top: 10px;
    color: var(--muted, #667085);
    font-size: 13px;
}

body.theme-dark .patch-history-scroll {
    border-color: #334155 !important;
    background: #111827 !important;
}

body.theme-dark .patch-history-scroll thead th {
    background: #0f172a !important;
    color: #cbd5e1 !important;
}

body.theme-dark .patch-history-note {
    color: #a8b6ca !important;
}

.public-demo-body .patch-history-scroll {
    background: #ffffff;
}

@media (max-width: 700px) {
    .patch-history-scroll {
        max-height: 360px;
    }
}


/* --- Stable Beta 0.4 public pages with login-required modal --- */

.public-preview-note {
    border: 1px solid #b8c7e6;
    background: #eef4ff;
    color: #1d4ed8;
    border-radius: 16px;
    padding: 14px 16px;
    font-weight: 800;
    margin-bottom: 18px;
}

.public-preview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}

.public-preview-card,
.public-preview-table-card {
    border: 1px solid var(--line, #d8e0ee);
    background: var(--card, #fff);
    border-radius: 18px;
    padding: 20px;
}

.public-preview-card span {
    display: flex;
    justify-content: space-between;
    color: var(--muted, #667085);
}

.public-preview-card span::after {
    content: '↗';
    color: #98a2b3;
    font-weight: 900;
}

.public-preview-card strong {
    display: block;
    font-size: 34px;
    margin-top: 8px;
}

.public-login-required {
    cursor: pointer;
}

.demo-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, .48);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.demo-modal-backdrop.is-open {
    display: flex;
}

.demo-modal {
    width: min(520px, 100%);
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid #d8e0ee;
    box-shadow: 0 28px 80px rgba(15,23,42,.26);
    padding: 24px;
}

.demo-modal h2 {
    margin-top: 0;
}

.demo-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

body.theme-dark .public-preview-note {
    background: #172554 !important;
    border-color: #2563eb !important;
    color: #bfdbfe !important;
}

body.theme-dark .public-preview-card,
body.theme-dark .public-preview-table-card,
body.theme-dark .demo-modal {
    background: #111827 !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

body.theme-dark .public-preview-card span,
body.theme-dark .demo-modal .muted {
    color: #a8b6ca !important;
}

@media (max-width: 900px) {
    .public-preview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .public-preview-grid {
        grid-template-columns: 1fr;
    }
}


/* --- Stable Beta 0.4 public theme toggle --- */

body.theme-dark .public-preview-card,
body.theme-dark .public-preview-table-card,
body.theme-dark .public-preview-note,
body.theme-dark .demo-modal,
body.theme-dark .demo-table,
body.theme-dark .demo-table tbody,
body.theme-dark .demo-table tr {
    background: #111827 !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

body.theme-dark .public-preview-note {
    background: #172554 !important;
    color: #bfdbfe !important;
    border-color: #2563eb !important;
}

body.theme-dark .demo-table th {
    background: #0f172a !important;
    color: #cbd5e1 !important;
}

body.theme-dark .demo-table td {
    background: #111827 !important;
    color: #e5edf8 !important;
    border-color: #334155 !important;
}

body.theme-dark .public-demo-body {
    background: #0b1220 !important;
    color: #f8fafc !important;
}

body.theme-dark .public-demo-topbar {
    background: rgba(15,23,42,.96) !important;
    border-bottom-color: #334155 !important;
}

body.theme-dark .public-demo-nav a,
body.theme-dark .public-demo-nav button {
    color: #cbd5e1 !important;
}


/* --- Stable Beta 0.4 login dashboard button --- */

.auth-extra-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.auth-copy .auth-extra-actions {
    margin-top: 22px;
}

body.theme-dark .auth-extra-actions .btn.ghost,
body.theme-dark .auth-extra-actions .btn.secondary {
    background: #1e293b !important;
    color: #dbeafe !important;
    border-color: #334155 !important;
}


/* --- Stable Beta 0.4 login dashboard preview area --- */

.auth-preview-area {
    margin-top: 24px;
    padding: 18px;
    border: 1px solid #d8e0ee;
    border-radius: 18px;
    background: linear-gradient(135deg, #f8fbff 0%, #eef4ff 100%);
    display: grid;
    gap: 14px;
}

.auth-preview-area strong,
.auth-preview-area span {
    display: block;
}

.auth-preview-area strong {
    font-size: 15px;
    color: #101828;
}

.auth-preview-area span {
    margin-top: 4px;
    color: #516173;
    line-height: 1.5;
}

.auth-preview-area .preview-btn {
    width: fit-content;
}

.auth-preview-link {
    margin: 16px 0 0;
    color: #667085;
    font-size: 14px;
}

.auth-preview-link a {
    font-weight: 800;
}

body.theme-dark .auth-preview-area {
    background: linear-gradient(135deg, #111827 0%, #172554 100%) !important;
    border-color: #334155 !important;
}

body.theme-dark .auth-preview-area strong {
    color: #f8fafc !important;
}

body.theme-dark .auth-preview-area span,
body.theme-dark .auth-preview-link {
    color: #a8b6ca !important;
}

@media (max-width: 720px) {
    .auth-preview-area .preview-btn {
        width: 100%;
        justify-content: center;
    }
}


/* --- Stable Beta 0.4 top bar spacing polish --- */

/*
Keeps the main navigation on one clean row on desktop, with brand left and
actions right. It only switches to a wrapping/mobile layout when the viewport
is genuinely narrow.
*/

.topbar {
    min-height: 74px;
}

.topbar-inner {
    max-width: 1480px !important;
    width: 100%;
    padding: 14px 28px !important;
    gap: 26px !important;
    justify-content: flex-start;
}

.brand {
    margin-right: 10px;
}

.main-nav {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    column-gap: 24px !important;
    row-gap: 8px !important;
    min-width: 0 !important;
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
}

.main-nav::-webkit-scrollbar {
    display: none;
}

.main-nav a {
    padding: 8px 0;
    line-height: 1.1;
}

.topbar-actions {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 14px !important;
    flex: 0 0 auto !important;
}

.scan-button {
    gap: 7px;
    min-width: 74px;
}

.profile-trigger {
    max-width: 220px;
}

.mode-switch-form {
    flex: 0 0 auto;
}

@media (min-width: 1200px) {
    .topbar-inner {
        flex-wrap: nowrap !important;
    }

    .main-nav {
        flex-wrap: nowrap !important;
    }
}

@media (max-width: 1199px) {
    .topbar {
        min-height: auto;
    }

    .topbar-inner {
        align-items: flex-start !important;
        flex-wrap: wrap !important;
        gap: 12px 18px !important;
    }

    .main-nav {
        order: 3;
        width: 100%;
        flex-basis: 100% !important;
        padding-bottom: 4px;
        column-gap: 18px !important;
    }

    .topbar-actions {
        margin-left: auto !important;
    }
}

@media (max-width: 700px) {
    .topbar-inner {
        padding: 12px 16px !important;
    }

    .main-nav {
        column-gap: 16px !important;
    }

    .scan-button span:last-child {
        display: none;
    }

    .scan-button {
        min-width: 42px;
        padding-inline: 12px;
    }
}


/* --- Stable Beta 0.4 footer bottom placement --- */

/*
Keeps the footer at the bottom of the viewport on short pages,
without making it fixed or covering content.
*/

html,
body {
    min-height: 100%;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.topbar {
    flex: 0 0 auto;
}

.app-shell {
    flex: 1 0 auto;
    width: 100%;
}

.site-footer {
    flex: 0 0 auto;
    width: 100%;
    margin-top: auto !important;
    padding-top: 24px;
    padding-bottom: 28px;
}

.site-footer-inner,
.site-footer .footer-inner {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 700px) {
    .site-footer {
        padding-bottom: 22px;
    }
}


/* --- Stable Beta 0.4 mobile top bar cleanup --- */

/*
Mobile top bar:
- Brand and account controls stay in one compact row.
- Navigation becomes a horizontal scroll strip instead of wrapping into a tall block.
- Scan becomes an icon-only square on mobile.
- Profile name hides on mobile, leaving the avatar.
*/

@media (max-width: 760px) {
    .topbar {
        min-height: auto !important;
    }

    .topbar-inner {
        padding: 12px 14px 10px !important;
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        grid-template-areas:
            "brand spacer actions"
            "nav nav nav" !important;
        align-items: center !important;
        gap: 10px 12px !important;
        max-width: 100% !important;
    }

    .brand {
        grid-area: brand !important;
        margin: 0 !important;
        gap: 7px !important;
        min-width: 0 !important;
    }

    .brand-name {
        font-size: 22px !important;
        letter-spacing: -0.05em !important;
    }

    .beta-badge {
        height: 18px !important;
        padding: 0 7px !important;
        font-size: 9px !important;
    }

    .topbar-actions {
        grid-area: actions !important;
        margin-left: 0 !important;
        justify-self: end !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
    }

    .scan-button {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        padding: 0 !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .scan-button span:not(.scan-icon) {
        display: none !important;
    }

    .scan-icon {
        font-size: 17px !important;
    }

    .profile-trigger {
        width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 4px !important;
        border-radius: 999px !important;
        justify-content: center !important;
    }

    .profile-label {
        display: none !important;
    }

    .profile-avatar {
        width: 34px !important;
        height: 34px !important;
    }

    .mode-switch {
        width: 62px !important;
        height: 36px !important;
    }

    .mode-knob {
        width: 30px !important;
        height: 30px !important;
        font-size: 14px !important;
    }

    .mode-switch.mode-dark .mode-knob {
        transform: translateX(26px) !important;
    }

    .mode-track-sun {
        left: 9px !important;
    }

    .mode-track-moon {
        right: 10px !important;
    }

    .main-nav {
        grid-area: nav !important;
        order: unset !important;
        width: 100% !important;
        flex-basis: auto !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        column-gap: 8px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 2px 0 4px !important;
        margin: 0 !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap !important;
    }

    .main-nav::-webkit-scrollbar {
        display: none !important;
    }

    .main-nav a {
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        min-height: 34px !important;
        padding: 0 12px !important;
        border-radius: 999px !important;
        background: #eef4ff !important;
        color: #335075 !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        text-decoration: none !important;
    }

    .main-nav a:hover {
        background: #dbeafe !important;
        color: #1d4ed8 !important;
    }

    body.theme-dark .main-nav a {
        background: #1e293b !important;
        color: #cbd5e1 !important;
    }

    body.theme-dark .main-nav a:hover {
        background: #26344a !important;
        color: #ffffff !important;
    }

    .profile-dropdown {
        right: -74px !important;
        width: min(280px, calc(100vw - 28px)) !important;
    }

    .app-shell {
        padding-top: 22px !important;
    }
}

@media (max-width: 420px) {
    .topbar-inner {
        padding-left: 10px !important;
        padding-right: 10px !important;
        gap: 9px 8px !important;
    }

    .brand-name {
        font-size: 20px !important;
    }

    .beta-badge {
        font-size: 8px !important;
        padding: 0 6px !important;
    }

    .topbar-actions {
        gap: 6px !important;
    }

    .scan-button,
    .profile-trigger {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }

    .profile-avatar {
        width: 31px !important;
        height: 31px !important;
    }

    .mode-switch {
        width: 58px !important;
        height: 34px !important;
    }

    .mode-knob {
        width: 28px !important;
        height: 28px !important;
    }

    .mode-switch.mode-dark .mode-knob {
        transform: translateX(24px) !important;
    }

    .main-nav a {
        min-height: 32px !important;
        padding: 0 10px !important;
        font-size: 12px !important;
    }
}


/* --- Stable Beta 0.4 mobile burger navigation --- */

.mobile-menu-toggle {
    display: none;
}

@media (max-width: 760px) {
    .topbar-inner {
        grid-template-columns: auto auto 1fr auto !important;
        grid-template-areas: "brand menu spacer actions" !important;
    }

    .mobile-menu-toggle {
        grid-area: menu !important;
        display: inline-flex !important;
        width: 42px !important;
        height: 42px !important;
        border: 1px solid #d8e0ee !important;
        border-radius: 14px !important;
        background: #ffffff !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        gap: 4px !important;
        padding: 0 !important;
        cursor: pointer !important;
        box-shadow: none !important;
    }

    .mobile-menu-toggle span {
        width: 18px !important;
        height: 2px !important;
        border-radius: 999px !important;
        background: #101828 !important;
        display: block !important;
        transition: transform .16s ease, opacity .16s ease !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(1) {
        transform: translateY(6px) rotate(45deg) !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(2) {
        opacity: 0 !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg) !important;
    }

    .main-nav {
        grid-area: nav !important;
        display: none !important;
        width: 100% !important;
        padding: 10px !important;
        margin: 0 !important;
        border: 1px solid #d8e0ee !important;
        border-radius: 18px !important;
        background: #ffffff !important;
        box-shadow: 0 18px 45px rgba(15,23,42,.12) !important;
        overflow: visible !important;
        white-space: normal !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .main-nav.is-open {
        display: flex !important;
    }

    .main-nav a {
        min-height: 38px !important;
        padding: 0 13px !important;
        border-radius: 999px !important;
        background: #eef4ff !important;
        color: #335075 !important;
        font-size: 13px !important;
        font-weight: 800 !important;
    }

    body.theme-dark .mobile-menu-toggle {
        background: #111827 !important;
        border-color: #334155 !important;
    }

    body.theme-dark .mobile-menu-toggle span {
        background: #f8fafc !important;
    }

    body.theme-dark .main-nav {
        background: #111827 !important;
        border-color: #334155 !important;
        box-shadow: 0 18px 45px rgba(0,0,0,.22) !important;
    }

    body.theme-dark .main-nav a {
        background: #1e293b !important;
        color: #cbd5e1 !important;
    }

    body.theme-dark .main-nav a:hover {
        background: #26344a !important;
        color: #ffffff !important;
    }
}

@media (max-width: 420px) {
    .mobile-menu-toggle {
        width: 40px !important;
        height: 40px !important;
    }

    .topbar-inner {
        grid-template-columns: auto auto 1fr auto !important;
    }
}


/* --- Stable Beta 0.4 mobile burger force fix --- */

/*
The earlier mobile menu CSS was being overridden by older mobile nav rules.
This block sits at the end of the stylesheet and forcefully:
- shows the burger button
- hides the nav by default on mobile
- only shows the nav after JS adds .is-open
*/

@media (max-width: 760px) {
    .topbar-inner {
        display: grid !important;
        grid-template-columns: auto auto 1fr auto !important;
        grid-template-areas:
            "brand menu spacer actions"
            "nav nav nav nav" !important;
        align-items: center !important;
        gap: 10px 10px !important;
        padding: 12px 14px !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .brand {
        grid-area: brand !important;
        margin: 0 !important;
    }

    .mobile-menu-toggle {
        grid-area: menu !important;
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        border: 1px solid #d8e0ee !important;
        border-radius: 14px !important;
        background: #ffffff !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        gap: 4px !important;
        padding: 0 !important;
        margin: 0 !important;
        cursor: pointer !important;
        box-shadow: none !important;
        appearance: none !important;
        -webkit-appearance: none !important;
    }

    .mobile-menu-toggle span {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 18px !important;
        height: 2px !important;
        min-height: 2px !important;
        border-radius: 999px !important;
        background: #101828 !important;
        transform-origin: center !important;
        transition: transform .16s ease, opacity .16s ease !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(1) {
        transform: translateY(6px) rotate(45deg) !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(2) {
        opacity: 0 !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg) !important;
    }

    .topbar-actions {
        grid-area: actions !important;
        justify-self: end !important;
        margin-left: 0 !important;
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }

    .main-nav,
    .topbar .main-nav,
    header .main-nav {
        grid-area: nav !important;
        order: unset !important;
        width: 100% !important;
        flex-basis: 100% !important;
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .main-nav.is-open,
    .topbar .main-nav.is-open,
    header .main-nav.is-open {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        overflow: visible !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 10px !important;
        margin: 0 !important;
        border: 1px solid #d8e0ee !important;
        border-radius: 18px !important;
        background: #ffffff !important;
        box-shadow: 0 18px 45px rgba(15,23,42,.12) !important;
        white-space: normal !important;
    }

    .main-nav.is-open a {
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        min-height: 38px !important;
        padding: 0 13px !important;
        border-radius: 999px !important;
        background: #eef4ff !important;
        color: #335075 !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        text-decoration: none !important;
    }

    body.theme-dark .mobile-menu-toggle {
        background: #111827 !important;
        border-color: #334155 !important;
    }

    body.theme-dark .mobile-menu-toggle span {
        background: #f8fafc !important;
    }

    body.theme-dark .main-nav.is-open {
        background: #111827 !important;
        border-color: #334155 !important;
        box-shadow: 0 18px 45px rgba(0,0,0,.22) !important;
    }

    body.theme-dark .main-nav.is-open a {
        background: #1e293b !important;
        color: #cbd5e1 !important;
    }
}

@media (min-width: 761px) {
    .mobile-menu-toggle {
        display: none !important;
    }

    .main-nav {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
    }
}


/* --- Stable Beta 0.4 mobile bottom navigation --- */

/*
Mobile now uses a native-app style bottom nav:
Dashboard, Items, Locations, Folders, QR Labels, Scan.
The full desktop nav stays on desktop/tablet.
*/

.mobile-bottom-nav {
    display: none;
}

@media (max-width: 760px) {
    /* Keep mobile header compact and remove the large nav area. */
    .topbar-inner {
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        grid-template-areas: "brand spacer actions" !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 12px 14px !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .brand {
        grid-area: brand !important;
        margin: 0 !important;
    }

    .topbar-actions {
        grid-area: actions !important;
        justify-self: end !important;
        margin-left: 0 !important;
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }

    .main-nav,
    .topbar .main-nav,
    header .main-nav {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
    }

    .mobile-menu-toggle {
        display: none !important;
    }

    .scan-button {
        display: none !important;
    }

    .profile-trigger {
        width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        padding: 4px !important;
        border-radius: 999px !important;
        justify-content: center !important;
    }

    .profile-label {
        display: none !important;
    }

    .profile-avatar {
        width: 32px !important;
        height: 32px !important;
    }

    .mode-switch {
        width: 58px !important;
        height: 34px !important;
    }

    .mode-knob {
        width: 28px !important;
        height: 28px !important;
        font-size: 14px !important;
    }

    .mode-switch.mode-dark .mode-knob {
        transform: translateX(24px) !important;
    }

    .mobile-bottom-nav {
        position: fixed !important;
        left: 10px !important;
        right: 10px !important;
        bottom: calc(10px + env(safe-area-inset-bottom)) !important;
        z-index: 999 !important;
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 4px !important;
        padding: 8px !important;
        border: 1px solid rgba(216, 224, 238, .92) !important;
        border-radius: 24px !important;
        background: rgba(255, 255, 255, .94) !important;
        box-shadow: 0 18px 55px rgba(15, 23, 42, .22) !important;
        backdrop-filter: blur(18px) !important;
        -webkit-backdrop-filter: blur(18px) !important;
    }

    .mobile-bottom-link {
        min-width: 0 !important;
        min-height: 54px !important;
        border-radius: 18px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        text-decoration: none !important;
        color: #475467 !important;
        font-size: 10px !important;
        font-weight: 850 !important;
        line-height: 1 !important;
        letter-spacing: -0.01em !important;
        white-space: nowrap !important;
    }

    .mobile-bottom-icon {
        font-size: 18px !important;
        line-height: 1 !important;
        display: block !important;
    }

    .mobile-bottom-link:hover,
    .mobile-bottom-link:focus {
        background: #eef4ff !important;
        color: #1d4ed8 !important;
        text-decoration: none !important;
    }

    .mobile-bottom-scan {
        background: #2563eb !important;
        color: #ffffff !important;
        box-shadow: 0 10px 24px rgba(37, 99, 235, .28) !important;
    }

    .mobile-bottom-scan:hover,
    .mobile-bottom-scan:focus {
        background: #1d4ed8 !important;
        color: #ffffff !important;
    }

    .app-shell {
        padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
    }

    .site-footer {
        padding-bottom: calc(112px + env(safe-area-inset-bottom)) !important;
    }

    body.theme-dark .mobile-bottom-nav {
        background: rgba(15, 23, 42, .94) !important;
        border-color: #334155 !important;
        box-shadow: 0 18px 55px rgba(0, 0, 0, .36) !important;
    }

    body.theme-dark .mobile-bottom-link {
        color: #cbd5e1 !important;
    }

    body.theme-dark .mobile-bottom-link:hover,
    body.theme-dark .mobile-bottom-link:focus {
        background: #1e293b !important;
        color: #ffffff !important;
    }

    body.theme-dark .mobile-bottom-scan {
        background: #2563eb !important;
        color: #ffffff !important;
    }
}

@media (max-width: 390px) {
    .mobile-bottom-nav {
        left: 8px !important;
        right: 8px !important;
        padding: 6px !important;
        gap: 2px !important;
        border-radius: 22px !important;
    }

    .mobile-bottom-link {
        min-height: 50px !important;
        font-size: 9px !important;
        border-radius: 16px !important;
    }

    .mobile-bottom-icon {
        font-size: 17px !important;
    }
}


/* --- Stable Beta 0.4 mobile bottom nav overlay force fix --- */

/*
Strict behaviour:
- Hidden on desktop.
- Fixed overlay on mobile/coarse pointer devices.
- Stays pinned to viewport, not the bottom of the document.
*/

.mobile-bottom-nav {
    display: none !important;
}

/* Desktop and laptop safety: never show bottom nav on normal desktop widths. */
@media (min-width: 821px) and (hover: hover) and (pointer: fine) {
    .mobile-bottom-nav {
        display: none !important;
    }
}

/* Phones and narrow mobile layouts */
@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 1024px) {
    body {
        padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important;
    }

    .app-shell {
        padding-bottom: calc(112px + env(safe-area-inset-bottom)) !important;
    }

    .site-footer {
        padding-bottom: calc(122px + env(safe-area-inset-bottom)) !important;
    }

    .mobile-bottom-nav {
        position: fixed !important;
        inset-inline: 10px !important;
        left: 10px !important;
        right: 10px !important;
        bottom: calc(10px + env(safe-area-inset-bottom)) !important;
        top: auto !important;
        z-index: 2147483000 !important;
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 4px !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        min-height: 68px !important;
        margin: 0 !important;
        padding: 8px !important;
        border: 1px solid rgba(216, 224, 238, .94) !important;
        border-radius: 24px !important;
        background: rgba(255, 255, 255, .96) !important;
        box-shadow: 0 18px 55px rgba(15, 23, 42, .24) !important;
        backdrop-filter: blur(18px) !important;
        -webkit-backdrop-filter: blur(18px) !important;
        transform: translate3d(0, 0, 0) !important;
        will-change: transform !important;
        pointer-events: auto !important;
    }

    .mobile-bottom-link {
        min-width: 0 !important;
        min-height: 52px !important;
        border-radius: 18px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        text-decoration: none !important;
        color: #475467 !important;
        font-size: 10px !important;
        font-weight: 850 !important;
        line-height: 1 !important;
        letter-spacing: -0.01em !important;
        white-space: nowrap !important;
        overflow: hidden !important;
    }

    .mobile-bottom-icon {
        font-size: 18px !important;
        line-height: 1 !important;
        display: block !important;
    }

    .mobile-bottom-link:hover,
    .mobile-bottom-link:focus {
        background: #eef4ff !important;
        color: #1d4ed8 !important;
        text-decoration: none !important;
    }

    .mobile-bottom-scan {
        background: #2563eb !important;
        color: #ffffff !important;
        box-shadow: 0 10px 24px rgba(37, 99, 235, .28) !important;
    }

    .mobile-bottom-scan:hover,
    .mobile-bottom-scan:focus {
        background: #1d4ed8 !important;
        color: #ffffff !important;
    }

    body.theme-dark .mobile-bottom-nav {
        background: rgba(15, 23, 42, .96) !important;
        border-color: #334155 !important;
        box-shadow: 0 18px 55px rgba(0, 0, 0, .38) !important;
    }

    body.theme-dark .mobile-bottom-link {
        color: #cbd5e1 !important;
    }

    body.theme-dark .mobile-bottom-link:hover,
    body.theme-dark .mobile-bottom-link:focus {
        background: #1e293b !important;
        color: #ffffff !important;
    }

    body.theme-dark .mobile-bottom-scan {
        background: #2563eb !important;
        color: #ffffff !important;
    }
}

@media (max-width: 390px) {
    .mobile-bottom-nav {
        left: 8px !important;
        right: 8px !important;
        inset-inline: 8px !important;
        bottom: calc(8px + env(safe-area-inset-bottom)) !important;
        padding: 6px !important;
        gap: 2px !important;
        border-radius: 22px !important;
        min-height: 64px !important;
    }

    .mobile-bottom-link {
        min-height: 50px !important;
        font-size: 9px !important;
        border-radius: 16px !important;
    }

    .mobile-bottom-icon {
        font-size: 17px !important;
    }
}


/* --- Stable Beta 0.4 JS mobile bottom nav overlay fix --- */

/*
The mobile bottom nav is now created by JS at the end of <body>
and forced with inline fixed-position styles. CSS below handles fallback,
spacing, and hiding top navigation on mobile.
*/

.mobile-bottom-nav {
    display: none !important;
}

@media (min-width: 821px) {
    .mobile-bottom-nav,
    #mobileBottomNav {
        display: none !important;
    }
}

@media (max-width: 820px) {
    body.has-mobile-bottom-nav {
        padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
    }

    body.has-mobile-bottom-nav .app-shell {
        padding-bottom: calc(124px + env(safe-area-inset-bottom)) !important;
    }

    body.has-mobile-bottom-nav .site-footer {
        padding-bottom: calc(132px + env(safe-area-inset-bottom)) !important;
    }

    .topbar .main-nav,
    header .main-nav,
    .main-nav {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .scan-button {
        display: none !important;
    }

    #mobileBottomNav .mobile-bottom-link:hover,
    #mobileBottomNav .mobile-bottom-link:focus {
        background: #eef4ff !important;
        color: #1d4ed8 !important;
    }

    body.theme-dark #mobileBottomNav .mobile-bottom-link:hover,
    body.theme-dark #mobileBottomNav .mobile-bottom-link:focus {
        background: #1e293b !important;
        color: #ffffff !important;
    }
}

@media (max-width: 390px) {
    #mobileBottomNav {
        left: 8px !important;
        right: 8px !important;
        bottom: calc(8px + env(safe-area-inset-bottom)) !important;
        padding: 6px !important;
        gap: 4px !important;
    }

    #mobileBottomNav .mobile-bottom-link {
        min-height: 50px !important;
        font-size: 9px !important;
    }
}


/* --- Stable Beta 0.4 mobile bottom nav: add Scan + remove top mobile nav --- */

/*
Mobile bottom nav now contains:
Dashboard, Items, Locations, Folders, Scan.
Top navigation and top Scan remain hidden on mobile.
*/

@media (max-width: 820px) {
    .topbar .main-nav,
    header .main-nav,
    .main-nav,
    .scan-button {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
    }

    #mobileBottomNav,
    .mobile-bottom-nav {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }

    #mobileBottomNav .mobile-bottom-scan,
    .mobile-bottom-nav .mobile-bottom-scan {
        background: #2563eb !important;
        color: #ffffff !important;
        box-shadow: 0 10px 24px rgba(37, 99, 235, .28) !important;
    }

    #mobileBottomNav .mobile-bottom-scan:hover,
    #mobileBottomNav .mobile-bottom-scan:focus,
    .mobile-bottom-nav .mobile-bottom-scan:hover,
    .mobile-bottom-nav .mobile-bottom-scan:focus {
        background: #1d4ed8 !important;
        color: #ffffff !important;
    }
}

@media (max-width: 390px) {
    #mobileBottomNav .mobile-bottom-link {
        font-size: 8.5px !important;
    }

    #mobileBottomNav .mobile-bottom-icon {
        font-size: 17px !important;
    }
}


/* --- Stable Beta 0.4 force hide top mobile nav --- */

/*
Hard stop: on mobile the header must only show brand/account/theme controls.
Dashboard/Items/Locations/Folders/Scan must not appear in the top bar.
They live in the bottom overlay nav instead.
*/

@media screen and (max-width: 820px) {
    header nav.main-nav,
    .topbar nav.main-nav,
    .topbar .main-nav,
    header .main-nav,
    body .main-nav {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        left: -99999px !important;
        top: -99999px !important;
        width: 0 !important;
        max-width: 0 !important;
        height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        transform: none !important;
    }

    header .scan-button,
    .topbar .scan-button,
    body .topbar .scan-button {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        left: -99999px !important;
        top: -99999px !important;
        width: 0 !important;
        max-width: 0 !important;
        min-width: 0 !important;
        height: 0 !important;
        max-height: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
    }

    .topbar-inner {
        grid-template-areas: "brand spacer actions" !important;
        grid-template-columns: auto 1fr auto !important;
    }
}

@media screen and (min-width: 821px) {
    header nav.main-nav,
    .topbar nav.main-nav,
    .topbar .main-nav {
        position: static !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
}


/* --- Stable Beta 0.4 mobile More burger menu --- */

/*
Bottom mobile nav keeps the primary actions:
Dashboard, Items, Locations, Folders, Scan.
The header burger now holds the remaining pages.
*/

.mobile-more-toggle,
.mobile-more-menu {
    display: none;
}

@media screen and (max-width: 820px) {
    .topbar-inner {
        display: grid !important;
        grid-template-columns: auto auto 1fr auto !important;
        grid-template-areas: "brand more spacer actions" !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 12px 14px !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .mobile-more-toggle {
        grid-area: more !important;
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        border: 1px solid #d8e0ee !important;
        border-radius: 14px !important;
        background: #ffffff !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        gap: 4px !important;
        padding: 0 !important;
        margin: 0 !important;
        cursor: pointer !important;
        box-shadow: none !important;
        appearance: none !important;
        -webkit-appearance: none !important;
    }

    .mobile-more-toggle span {
        width: 18px !important;
        height: 2px !important;
        min-height: 2px !important;
        display: block !important;
        border-radius: 999px !important;
        background: #101828 !important;
        transition: transform .16s ease, opacity .16s ease !important;
    }

    .mobile-more-toggle.is-open span:nth-child(1) {
        transform: translateY(6px) rotate(45deg) !important;
    }

    .mobile-more-toggle.is-open span:nth-child(2) {
        opacity: 0 !important;
    }

    .mobile-more-toggle.is-open span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg) !important;
    }

    .mobile-more-menu {
        position: fixed !important;
        inset: 0 !important;
        z-index: 2147483600 !important;
        display: none !important;
        padding: 74px 12px calc(104px + env(safe-area-inset-bottom)) !important;
        background: rgba(15, 23, 42, .18) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
    }

    .mobile-more-menu.is-open {
        display: block !important;
    }

    .mobile-more-panel {
        width: min(420px, 100%) !important;
        margin: 0 auto !important;
        padding: 14px !important;
        border-radius: 24px !important;
        border: 1px solid #d8e0ee !important;
        background: rgba(255,255,255,.98) !important;
        box-shadow: 0 22px 65px rgba(15,23,42,.24) !important;
    }

    .mobile-more-head {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        margin-bottom: 12px !important;
    }

    .mobile-more-head strong {
        color: #101828 !important;
        font-size: 16px !important;
        font-weight: 900 !important;
    }

    .mobile-more-close {
        width: 38px !important;
        height: 38px !important;
        border-radius: 999px !important;
        border: 1px solid #d8e0ee !important;
        background: #ffffff !important;
        color: #101828 !important;
        font-size: 24px !important;
        line-height: 1 !important;
        cursor: pointer !important;
    }

    .mobile-more-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .mobile-more-grid a {
        display: flex !important;
        align-items: center !important;
        min-height: 46px !important;
        padding: 0 14px !important;
        border-radius: 16px !important;
        background: #eef4ff !important;
        color: #335075 !important;
        font-size: 14px !important;
        font-weight: 850 !important;
        text-decoration: none !important;
    }

    .mobile-more-grid a:hover,
    .mobile-more-grid a:focus {
        background: #dbeafe !important;
        color: #1d4ed8 !important;
        text-decoration: none !important;
    }

    body.theme-dark .mobile-more-toggle {
        background: #111827 !important;
        border-color: #334155 !important;
    }

    body.theme-dark .mobile-more-toggle span {
        background: #f8fafc !important;
    }

    body.theme-dark .mobile-more-menu {
        background: rgba(0, 0, 0, .28) !important;
    }

    body.theme-dark .mobile-more-panel {
        background: rgba(15,23,42,.98) !important;
        border-color: #334155 !important;
        box-shadow: 0 22px 65px rgba(0,0,0,.42) !important;
    }

    body.theme-dark .mobile-more-head strong {
        color: #f8fafc !important;
    }

    body.theme-dark .mobile-more-close {
        background: #111827 !important;
        border-color: #334155 !important;
        color: #f8fafc !important;
    }

    body.theme-dark .mobile-more-grid a {
        background: #1e293b !important;
        color: #cbd5e1 !important;
    }

    body.theme-dark .mobile-more-grid a:hover,
    body.theme-dark .mobile-more-grid a:focus {
        background: #26344a !important;
        color: #ffffff !important;
    }
}

@media screen and (min-width: 821px) {
    .mobile-more-toggle,
    .mobile-more-menu {
        display: none !important;
    }
}


/* --- Stable Beta 0.4 mobile More arrow repair --- */

/*
Repair version:
- Restores the last known working mobile More menu files.
- Keeps the same working menu JS and panel.
- Uses a text dropdown trigger instead of changing the menu structure.
*/

@media screen and (max-width: 820px) {
    .mobile-more-toggle {
        width: auto !important;
        min-width: 74px !important;
        height: 42px !important;
        min-height: 42px !important;
        padding: 0 12px !important;
        flex-direction: row !important;
        gap: 0 !important;
        font: inherit !important;
    }

    .mobile-more-toggle .mobile-more-arrow-icon {
        display: block !important;
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        background: transparent !important;
        color: #101828 !important;
        font-size: 13px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        letter-spacing: -0.01em !important;
        transform: none !important;
        transition: transform .16s ease !important;
        white-space: nowrap !important;
    }

    .mobile-more-toggle .mobile-more-hidden-line {
        display: none !important;
    }

    .mobile-more-toggle.is-open .mobile-more-arrow-icon {
        transform: none !important;
    }

    body.theme-dark .mobile-more-toggle .mobile-more-arrow-icon {
        background: transparent !important;
        color: #f8fafc !important;
    }
}


/* --- Stable Beta 0.4 combined QR navigation --- */

/*
QR Labels and Made QR codes now appear as one navigation item: QR Codes.
The separate page can still exist internally, but the main nav is cleaner.
*/



/* --- Stable Beta 0.4 Registered QR codes safe repair --- */

/*
Safe repair after the previous label patch:
- Restores the last styled CSS file.
- Removes the old mobile " / labels" suffix.
*/

.mobile-more-grid a[href="qr-labels.php"]::after {
    content: "" !important;
    display: none !important;
}


/* --- Stable Beta 0.4 registered QR page labels --- */

/*
User-facing QR wording is now Registered QR codes.
The underlying filenames stay the same so old links keep working.
*/


/* --- Stable Beta 0.4 registered QR duplicate label fix --- */

/*
Fix is mostly PHP text cleanup.
QR Labels remains the label generator.
Registered QR codes remains the registry/list page.
*/


/* --- Stable Beta 0.4 Registered QR codes layout polish --- */

/*
Registered QR codes page layout:
- Better hero/header balance.
- Summary stats become proper cards.
- Search/management sections align better.
- Mobile remains stacked and readable.
*/

.qr-registry-page {
    max-width: 1240px !important;
    margin: 0 auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

.qr-registry-page > .page-head,
.qr-registry-page .page-head,
.qr-registry-page > header:first-child {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 18px !important;
    align-items: start !important;
    margin-bottom: 22px !important;
}

.qr-registry-page h1 {
    margin-bottom: 8px !important;
}

.qr-registry-page h1 + .muted,
.qr-registry-page h1 + p {
    max-width: 720px !important;
    line-height: 1.55 !important;
}

/* The small count links under the header */
.qr-registry-page h1 ~ p a,
.qr-registry-page > p a {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 38px !important;
    padding: 0 13px !important;
    border-radius: 999px !important;
    background: #eef4ff !important;
    color: #1d4ed8 !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    margin: 4px 8px 4px 0 !important;
}

/* Make the count block feel like a proper dashboard strip */
.qr-registry-page > p:has(a) {
    margin: 18px 0 14px !important;
}

/* Management/search cards should not feel narrow and random */
.qr-registry-page .card {
    max-width: none !important;
}

.qr-registry-page .card:has(input[type="search"]),
.qr-registry-page .card:has(input[name="q"]),
.qr-registry-page .card:has(select[name="filter"]),
.qr-registry-page .card:has(select) {
    margin-top: 20px !important;
}

.qr-registry-page .card h2,
.qr-registry-page .card h3 {
    margin-top: 0 !important;
}

/* Better two-column form feel inside the search panel */
.qr-registry-page .form-grid,
.qr-registry-page form .grid,
.qr-registry-page form {
    gap: 16px !important;
}

.qr-registry-page .btn-row,
.qr-registry-page .form-actions {
    gap: 10px !important;
}

/* Registry table/card spacing */
.qr-registry-page table {
    width: 100% !important;
}

.qr-registry-page .table-wrap,
.qr-registry-page .card:has(table) {
    overflow-x: auto !important;
}

/* Make the top action button feel aligned */
.qr-registry-page .page-actions,
.qr-registry-page .actions {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

/* Dark mode */
body.theme-dark .qr-registry-page h1 ~ p a,
body.theme-dark .qr-registry-page > p a {
    background: #1e293b !important;
    color: #dbeafe !important;
}

@media (min-width: 900px) {
    .qr-registry-page {
        padding-top: 34px !important;
    }

    /* Turn the top count links into a neat row */
    .qr-registry-page h1 ~ p,
    .qr-registry-page > p {
        max-width: 900px !important;
    }
}

@media (max-width: 820px) {
    .qr-registry-page {
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-top: 22px !important;
    }

    .qr-registry-page > .page-head,
    .qr-registry-page .page-head,
    .qr-registry-page > header:first-child {
        grid-template-columns: 1fr !important;
    }

    .qr-registry-page .page-actions,
    .qr-registry-page .actions {
        justify-content: flex-start !important;
    }

    .qr-registry-page h1 ~ p a,
    .qr-registry-page > p a {
        width: 100% !important;
        justify-content: space-between !important;
    }
}



/* --- Stable Beta 0.4 QR nav and rotate image fix --- */

/*
QR Labels remains the label printer.
Registered QR codes remains the registry/list page.
Location image rotation now returns to the visual card and uses filemtime cache busting.
*/

#location-visual {
    scroll-margin-top: 110px;
}

.location-visual-actions form {
    margin: 0;
}


/* --- Stable Beta 0.4 Registered QR stat card polish --- */

/*
The Registered QR codes counters are clickable filters,
but they should look like proper stat buttons/cards, not loose blue links.
*/

.qr-registry-stats {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
    margin: 22px 0 24px !important;
    max-width: 1100px !important;
}

.qr-registry-stats .stat-card {
    min-height: 96px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 18px 20px !important;
    border: 1px solid #d8e0ee !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    color: #101828 !important;
    box-shadow: 0 14px 36px rgba(15, 23, 42, .07) !important;
    text-decoration: none !important;
    transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease, background .14s ease !important;
}

.qr-registry-stats .stat-card:hover,
.qr-registry-stats .stat-card:focus {
    transform: translateY(-2px) !important;
    border-color: #9db7ff !important;
    background: #f8fbff !important;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .10) !important;
    color: #101828 !important;
}

.qr-registry-stats .stat-card span {
    display: block !important;
    color: #516173 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
}

.qr-registry-stats .stat-card strong {
    display: block !important;
    color: #101828 !important;
    font-size: 34px !important;
    font-weight: 950 !important;
    line-height: .9 !important;
    letter-spacing: -0.05em !important;
    text-decoration: none !important;
}

/* Small visual accent per card */
.qr-registry-stats .stat-card::before {
    content: "";
    width: 34px !important;
    height: 4px !important;
    border-radius: 999px !important;
    background: #2563eb !important;
    opacity: .85 !important;
}

/* Optional selected filter state based on current URL is not server-rendered yet,
   so hover/focus is kept clean without changing behaviour. */

body.theme-dark .qr-registry-stats .stat-card {
    background: #111827 !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
    box-shadow: 0 14px 36px rgba(0, 0, 0, .24) !important;
}

body.theme-dark .qr-registry-stats .stat-card:hover,
body.theme-dark .qr-registry-stats .stat-card:focus {
    background: #1e293b !important;
    border-color: #3b82f6 !important;
    color: #ffffff !important;
}

body.theme-dark .qr-registry-stats .stat-card span {
    color: #a8b6ca !important;
}

body.theme-dark .qr-registry-stats .stat-card strong {
    color: #f8fafc !important;
}

@media (max-width: 1000px) {
    .qr-registry-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 560px) {
    .qr-registry-stats {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin-top: 18px !important;
    }

    .qr-registry-stats .stat-card {
        min-height: 76px !important;
        padding: 15px 16px !important;
        flex-direction: row !important;
        align-items: center !important;
    }

    .qr-registry-stats .stat-card::before {
        display: none !important;
    }

    .qr-registry-stats .stat-card strong {
        font-size: 30px !important;
    }
}



/* --- Stable Beta 0.4 Blank labels wording --- */

/*
User-facing wording changed from Reserved blank labels to Blank labels.
Internal filter values remain unchanged so existing logic keeps working.
*/


/* --- Stable Beta 0.4 auth left panel match --- */

/*
Login and Create account now share the same left intro panel.
Visible brand casing should be ItemID, with Stable Beta 0.4.
*/

.auth-intro .eyebrow,
.auth-intro .auth-eyebrow {
    text-transform: none !important;
    letter-spacing: .08em !important;
}

.auth-intro .eyebrow::first-letter,
.auth-intro .auth-eyebrow::first-letter {
    text-transform: uppercase !important;
}

.auth-preview-area strong {
    text-transform: none !important;
}


/* --- Stable Beta 0.4 auth panel matching and ItemID casing fix --- */

/*
Login and create account left panels now share the same markup.
The small brand line is forced to normal casing so it reads "ItemID Stable Beta 0.4",
not "ItemID STABLE BETA 0.4". It uses the same font family as the header.
*/

.auth-intro,
.auth-intro * {
    font-family: inherit !important;
}

.auth-brand,
.auth-intro .auth-brand,
.auth-intro .eyebrow,
.auth-intro .auth-eyebrow {
    text-transform: none !important;
    letter-spacing: .08em !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    color: #2563eb !important;
}

.auth-intro h1 {
    font-family: inherit !important;
}

.auth-pills span {
    text-transform: none !important;
}


/* --- Stable Beta 0.4 auth panels and upload privacy note --- */

/*
Auth pages:
- Login and Create account use the same left panel.
- The small brand line keeps normal ItemID casing and the same app font.
*/

.auth-panel.auth-copy .eyebrow,
.auth-panel.auth-copy .brand-lock,
.auth-body .eyebrow.brand-lock {
    text-transform: none !important;
    font-family: inherit !important;
    letter-spacing: .08em !important;
    color: #2563eb !important;
    font-weight: 900 !important;
}

.auth-panel.auth-copy,
.auth-panel.auth-copy * {
    font-family: inherit !important;
}

.auth-panel.auth-copy h1 {
    font-family: inherit !important;
}

/* Location visual privacy note */
.privacy-note {
    display: grid;
    gap: 5px;
    padding: 14px 16px;
    border: 1px solid #bfdbfe;
    border-radius: 16px;
    background: #eff6ff;
    color: #1e3a8a;
    margin: 10px 0 18px;
}

.privacy-note strong {
    font-size: 14px;
    font-weight: 900;
    color: #1e3a8a;
}

.privacy-note span {
    color: #335075;
    line-height: 1.5;
}

body.theme-dark .privacy-note {
    background: #102033;
    border-color: #1d4ed8;
    color: #dbeafe;
}

body.theme-dark .privacy-note strong {
    color: #dbeafe;
}

body.theme-dark .privacy-note span {
    color: #bfd3f7;
}


/* --- Stable Beta 0.4 login redirect loop fix --- */

.auth-card .notice,
.auth-panel .notice {
    margin: 14px 0;
}

.auth-card .notice + .actions,
.auth-panel .notice + .actions {
    margin-bottom: 18px;
}




/* ===== CSS from itemid_location_links_hard_fix_patch.zip ===== */

:root{
  --bg:#f5f7fb;--bg2:#eef4ff;--card:#fff;--text:#101828;--muted:#667085;--line:#d9e1ec;
  --blue:#2563eb;--blue-dark:#1d4ed8;--blue2:#eff4ff;--green:#12b76a;--amber:#f79009;--danger:#b42318;
  --shadow:0 18px 45px rgba(15,23,42,.08);--radius:18px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:linear-gradient(180deg,#f8fbff 0%,var(--bg) 260px);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Arial,sans-serif;font-size:15px;line-height:1.5}a{color:var(--blue-dark);text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3{letter-spacing:-.04em;line-height:1.15;margin:0 0 10px}h1{font-size:34px}h2{font-size:28px}h3{font-size:19px}.muted{color:var(--muted)}.big{font-size:17px;line-height:1.65}.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:22px;padding:14px 24px;background:rgba(255,255,255,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}.brand{display:inline-flex;gap:10px;align-items:center;color:var(--text);font-weight:900;font-size:21px}.brand:hover{text-decoration:none}.brand-mark{width:34px;height:34px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;background:#111827;color:white;font-size:13px;letter-spacing:-.04em}.main-nav{display:flex;align-items:center;gap:4px;flex:1;flex-wrap:wrap}.main-nav a{color:#344054;padding:9px 10px;border-radius:10px;font-weight:700;font-size:14px}.main-nav a:hover{background:var(--blue2);text-decoration:none}.top-actions{display:flex;align-items:center;gap:12px}.muted-link{color:var(--muted);font-weight:700}.page{max-width:1180px;margin:0 auto;padding:28px 22px 60px}.site-footer{max-width:1180px;margin:0 auto;padding:22px;color:var(--muted);border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px}.page-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin:0 0 20px}.page-head p{margin:4px 0 0}.card{background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:18px;box-shadow:0 10px 30px rgba(15,23,42,.045)}.hero{display:grid;grid-template-columns:2fr 1fr;gap:18px;margin-bottom:18px}.hero .card:first-child{background:linear-gradient(135deg,#fff 0%,#f4f7ff 100%)}.grid{display:grid;gap:18px}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.cards4{grid-template-columns:repeat(4,minmax(0,1fr))}.cards4 .card{margin:0}.cards4 h2{font-size:34px;margin-top:6px}.wide{max-width:920px}.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;background:var(--blue);color:white;padding:11px 16px;font-weight:900;cursor:pointer;text-decoration:none;box-shadow:0 8px 18px rgba(37,99,235,.18);font:inherit}.btn:hover{text-decoration:none;background:var(--blue-dark)}.btn.secondary{background:#e8efff;color:var(--blue-dark);box-shadow:none}.btn.secondary:hover{background:#dbe7ff}.btn.ghost{background:white;color:#344054;border:1px solid var(--line);box-shadow:none}.btn.small{padding:8px 12px;border-radius:10px;font-size:14px}.scan-link{background:#111827;color:#fff!important}.form{display:grid;gap:15px}.form label{display:grid;gap:7px;color:#344054;font-size:14px;font-weight:700}.form input,.form select,.form textarea,.searchbar input,.inline-form input,.inline-form select{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px 13px;background:white;color:var(--text);font:inherit;outline:none}.form input:focus,.form select:focus,.form textarea:focus,.searchbar input:focus,.inline-form input:focus,.inline-form select:focus{border-color:#9db7ff;box-shadow:0 0 0 4px rgba(37,99,235,.10)}.searchbar,.inline-form{display:flex;gap:10px;margin-bottom:18px}.table-wrap{overflow:auto;padding:0}table{width:100%;border-collapse:collapse;min-width:720px}th,td{text-align:left;border-bottom:1px solid var(--line);padding:14px 16px;vertical-align:top}th{font-size:12px;color:var(--muted);font-weight:900;text-transform:uppercase;letter-spacing:.05em;background:#fbfcff}tr:hover td{background:#fbfdff}.pill{display:inline-flex;background:var(--blue2);color:var(--blue-dark);border-radius:999px;padding:4px 9px;font-size:13px;font-weight:900}.pill.low,.pill.Empty,.pill.Missing{background:#fff4ed;color:#b54708}.visual{max-width:100%;border-radius:14px;border:1px solid var(--line);box-shadow:0 8px 20px rgba(15,23,42,.06)}.qr-box{display:inline-block;background:white;padding:12px;border:1px solid var(--line);border-radius:14px}.code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:900;background:#f2f4f7;border:1px solid #e4e7ec;border-radius:10px;padding:4px 8px;display:inline-block}.labels{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.label{background:#fff;border:1px solid #111;border-radius:6px;text-align:center;padding:11px;break-inside:avoid}.label .qr{display:inline-block}.label-toolbar{margin:12px 0}.check{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center;gap:8px!important}.alert{background:#fef3f2;color:var(--danger);border:1px solid #fecdca;border-radius:12px;padding:11px 13px;font-weight:700}.notice{background:#eff8ff;color:#175cd3;border:1px solid #b2ddff;border-radius:12px;padding:11px 13px;font-weight:700}.empty{padding:24px;border:1px dashed var(--line);border-radius:14px;background:#fbfcff;color:var(--muted)}
/* Auth */.auth-body{min-height:100vh!important;display:grid!important;place-items:center!important;padding:28px;background:radial-gradient(circle at top left,rgba(37,99,235,.16),transparent 34%),radial-gradient(circle at bottom right,rgba(16,185,129,.10),transparent 28%),var(--bg)}.auth-shell{width:min(980px,100%);display:grid;grid-template-columns:1.15fr .85fr;gap:18px;align-items:stretch}.auth-panel{background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow)}.auth-copy{padding:36px;display:flex;flex-direction:column;justify-content:center;min-height:440px}.logo-mark{width:54px;height:54px;border-radius:16px;background:#111827;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;letter-spacing:-.04em;margin-bottom:22px}.eyebrow{font-weight:900;color:var(--blue);letter-spacing:.08em;text-transform:uppercase;font-size:13px;margin:0 0 10px}.auth-copy h1{font-size:46px;letter-spacing:-.055em;line-height:1.02;margin:0 0 16px;max-width:620px}.auth-copy .big{font-size:17px;line-height:1.6;max-width:600px;margin:0 0 22px}.feature-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}.feature-list span{background:var(--blue2);color:var(--blue-dark);border:1px solid #dbe7ff;border-radius:999px;padding:8px 11px;font-weight:900;font-size:13px}.auth-card{width:auto!important;padding:30px;display:flex;flex-direction:column;justify-content:center}.auth-card h2{font-size:30px;margin:0 0 8px}.auth-card .muted{margin-top:0;margin-bottom:20px}.auth-card input{height:46px}.subtle-link{font-size:14px;font-weight:800;justify-self:start}.auth-card .actions{margin-top:2px}
@media(max-width:900px){.topbar{align-items:flex-start;flex-direction:column}.top-actions{width:100%;justify-content:space-between}.hero,.grid.two,.grid.cards4{grid-template-columns:1fr}.page-head{display:block}.searchbar,.inline-form{flex-direction:column}.labels{grid-template-columns:repeat(2,1fr)}.auth-shell{grid-template-columns:1fr}.auth-copy{min-height:0;padding:24px}.auth-copy h1{font-size:34px}.auth-card{padding:24px}.site-footer{flex-direction:column}}@media print{body{background:white}.topbar,.page-head,.card:not(.table-wrap),.label-toolbar,.site-footer{display:none!important}.page{padding:0}.labels{grid-template-columns:repeat(4,1fr);gap:8px}.label{page-break-inside:avoid;box-shadow:none}}

/* ItemID QR/template patch */
.section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}.section-head h2{font-size:22px;margin:0 0 4px}.field-builder{display:grid;gap:14px;border:1px solid var(--line);border-radius:16px;padding:16px;background:#fbfcff}.quick-fields{display:flex;gap:8px;flex-wrap:wrap}.field-chip{border:1px solid #dbe7ff;background:#eff4ff;color:#1d4ed8;border-radius:999px;padding:7px 10px;font-weight:800;cursor:pointer}.field-chip:hover{background:#dbe7ff}.fields-list{display:grid;gap:10px}.field-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}.label-sheet{display:grid;grid-template-columns:repeat(var(--label-columns,4),minmax(0,1fr));gap:12px}.print-label-card{background:#fff;border:1px solid #111827;border-radius:10px;text-align:center;padding:12px;break-inside:avoid;min-height:calc(var(--qr-size,120px) + 62px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px}.print-label-card .qr{display:inline-flex;align-items:center;justify-content:center}.print-label-card .print-code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:15px;font-weight:900;letter-spacing:.06em}.print-label-card .print-name{font-size:12px;font-weight:800;color:#344054;line-height:1.25}.row-actions{display:flex;gap:12px;white-space:nowrap}.qr-size-form select{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px 13px;background:white;color:var(--text);font:inherit;outline:none}@media(max-width:700px){.field-row{grid-template-columns:1fr}.label-sheet{grid-template-columns:repeat(2,minmax(0,1fr))}.row-actions{display:grid;gap:6px}}

/* ItemID workflow polish patch */
.mini-action{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;border-radius:10px;padding:7px 10px;font-weight:900;color:#1d4ed8;text-decoration:none;white-space:nowrap}.mini-action:hover{background:#eff4ff;text-decoration:none}.pretty-fields{gap:18px}.pretty-list{gap:12px}.pretty-row{grid-template-columns:1fr 42px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px}.pretty-row input{border:0!important;box-shadow:none!important;padding:9px 10px!important}.icon-button{width:34px;height:34px;border:0;border-radius:10px;background:#f2f4f7;color:#344054;font-size:22px;line-height:1;cursor:pointer;font-weight:900}.icon-button:hover{background:#fee4e2;color:#b42318}.community-check{align-self:end;background:#fbfcff;border:1px solid var(--line);border-radius:14px;padding:12px}.community-check span{display:grid;gap:2px}.community-check small{color:var(--muted);font-weight:600}.field-chip{font-size:13px}.print-label-card{min-height:calc(var(--qr-mm,35mm) + 22mm);padding:8mm 4mm}.print-label-card .print-name{max-width:100%;overflow-wrap:anywhere}.custom-prefix-row{display:none}.item-hero{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.item-hero h2{font-size:24px;margin:4px 0 0}.activity-line{border-bottom:1px solid var(--line);padding:0 0 10px;margin:0 0 10px}.qr-size-form{margin-top:14px;display:flex;gap:10px;align-items:end;flex-wrap:wrap}.qr-size-form label{min-width:190px}.add-item-flow{gap:20px}.flow-step{display:flex;gap:14px;align-items:flex-start;border-top:1px solid var(--line);padding-top:18px}.flow-step:first-of-type{border-top:0;padding-top:0}.flow-step h2{font-size:22px;margin:0 0 4px}.step-badge{width:34px;height:34px;border-radius:999px;background:#111827;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:900;flex:0 0 auto}.field-as-card{border:1px dashed #b7c5df;border-radius:14px;padding:13px;background:#fbfcff}.field-as-card p{margin:4px 0 10px}.code-pill{display:inline-flex;background:#f2f4f7;border:1px solid #e4e7ec;border-radius:10px;padding:5px 9px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:900}@media(max-width:800px){.item-hero{grid-template-columns:1fr}.pretty-row{grid-template-columns:1fr 42px}.qr-size-form{display:grid}.flow-step{display:grid}.field-as-card .btn{width:100%}}


/* ItemID workflow patch 2 */
.beta-badge{display:inline-flex;align-items:center;border:1px solid #c7d7fe;background:#eff4ff;color:#1d4ed8;border-radius:999px;padding:2px 7px;font-size:11px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;line-height:1.4}.template-create-card{display:flex;align-items:center;justify-content:space-between;gap:14px}.template-create-card p{margin:3px 0 0}.compact-check{width:auto!important;display:flex!important;grid-template-columns:auto 1fr!important;align-items:center!important;gap:8px!important;min-width:170px}.compact-check input{width:auto!important}.qr-box canvas,.qr-box img{display:block!important;max-width:100%!important;max-height:100%!important}.print-label-card{overflow:hidden}.print-label-card .dynamic-qr canvas,.print-label-card .dynamic-qr img{display:block!important}.print-label-card .print-code,.print-label-card .print-name{max-width:100%;overflow-wrap:anywhere}.single-print-label{overflow:hidden}@media(max-width:800px){.template-create-card{display:grid}.compact-check{min-width:0}}

/* Items table action-cell border fix */
td.row-actions,
th.row-actions {
    display: table-cell !important;
    white-space: nowrap;
    vertical-align: middle;
    border-bottom: 1px solid var(--line) !important;
}

td.row-actions {
    min-width: 230px;
}

td.row-actions .mini-action {
    margin-right: 8px;
    margin-bottom: 0;
}

td.row-actions .mini-action:last-child {
    margin-right: 0;
}

tr:hover td.row-actions {
    background: #fbfdff;
}

@media (max-width: 760px) {
    td.row-actions {
        min-width: 170px;
    }

    td.row-actions .mini-action {
        display: flex;
        width: 100%;
        margin-right: 0;
        margin-bottom: 6px;
    }

    td.row-actions .mini-action:last-child {
        margin-bottom: 0;
    }
}

/* Stable Beta 0.4 additions */
.btn.danger,
.btn.danger.ghost {
  color: #b42318 !important;
  border-color: #fecdca !important;
  background: #fff !important;
  box-shadow: none !important;
}
.btn.danger:hover,
.btn.danger.ghost:hover {
  background: #fef3f2 !important;
  text-decoration: none;
}
.mini-action.danger {
  color: #b42318 !important;
  border-color: #fecdca !important;
  background: #fff !important;
}
.export-card {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.export-card:hover {
  transform: translateY(-2px);
  text-decoration: none;
  border-color: #b8c7e6;
  box-shadow: 0 18px 42px rgba(15,23,42,.09);
}
.site-footer a { color: inherit; font-weight: 800; }

/* Stable Beta 0.4 template/item field builder polish */
.item-template-field-row {
    display: grid;
    grid-template-columns: minmax(150px, .35fr) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 12px;
    border: 1px solid #d8e0ee;
    border-radius: 14px;
    background: #ffffff;
    margin-bottom: 10px;
}

.template-field-input-wrap {
    display: grid;
    gap: 6px;
}

.template-field-input-wrap input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    margin: 8px 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.field-unit-hint {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 9px;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 900;
}

.small {
    font-size: 12px;
}

@media (max-width: 700px) {
    .item-template-field-row {
        grid-template-columns: 1fr;
    }
}

/* --- Profile/preferences patch CSS --- */

/* Profile and preferences */
.profile-settings-row {
    display: grid;
    grid-template-columns: 112px 1fr;
    gap: 22px;
    align-items: center;
    margin-bottom: 20px;
}

.profile-settings-avatar {
    width: 96px;
    height: 96px;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid #d8e0ee;
    background: #eef4ff;
    color: #1d4ed8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    font-weight: 900;
}

.profile-settings-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.checkbox-line {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    font-weight: 800;
}

.checkbox-line input,
.checkbox-card input {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.checkbox-card {
    min-height: 70px;
    border: 1px solid #d8e0ee;
    border-radius: 14px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}

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

.checkbox-card small {
    margin-top: 4px;
    color: #64748b;
}

@media (max-width: 650px) {
    .profile-settings-row {
        grid-template-columns: 1fr;
    }
}


/* --- Stable Beta 0.4 theme toggle + dark fix --- */

.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,255,255,.94);
    border-bottom: 1px solid #d8e0ee;
    backdrop-filter: blur(14px);
}

.topbar-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    gap: 22px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #0f172a;
    flex: 0 0 auto;
}

.brand:hover {
    text-decoration: none;
}

.brand-name {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1;
}

.beta-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 19px;
    padding: 0 7px;
    border: 1px solid #b8c7e6;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    white-space: nowrap;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 auto;
    min-width: 0;
}

.main-nav a {
    color: #335075;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
}

.main-nav a:hover {
    color: #2563eb;
    text-decoration: none;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

.scan-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 16px;
    border-radius: 12px;
    background: #111827;
    color: #ffffff !important;
    text-decoration: none;
    font-weight: 800;
    font-size: 14px;
    box-shadow: 0 10px 24px rgba(17, 24, 39, .18);
}

.scan-button:hover {
    text-decoration: none;
}

.profile-menu {
    position: relative;
}

.profile-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 4px 8px 4px 4px;
    border: 1px solid #d8e0ee;
    border-radius: 999px;
    background: #ffffff;
    color: #0f172a;
    text-decoration: none;
    font-weight: 800;
    cursor: pointer;
    max-width: 260px;
}

.profile-avatar {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    object-fit: cover;
    background: #eef4ff;
    color: #1d4ed8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    border: 1px solid #c9d7f2;
    overflow: hidden;
    flex: 0 0 auto;
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-label {
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.profile-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 280px;
    border: 1px solid #d8e0ee;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .16);
    padding: 10px;
    display: none;
}

.profile-menu:hover .profile-dropdown,
.profile-menu:focus-within .profile-dropdown {
    display: block;
}

.profile-dropdown-header {
    padding: 10px;
    border-bottom: 1px solid #edf2f7;
    margin-bottom: 8px;
}

.profile-dropdown-header strong,
.profile-dropdown-header span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-dropdown-header span {
    color: #64748b;
    font-size: 13px;
    margin-top: 2px;
}

.profile-dropdown a {
    display: block;
    padding: 10px;
    border-radius: 12px;
    color: #334155;
    text-decoration: none;
    font-weight: 800;
}

.profile-dropdown a:hover {
    background: #f1f5f9;
    color: #0f172a;
    text-decoration: none;
}

.theme-toggle-form {
    margin: 0;
}

.theme-toggle {
    width: 62px;
    height: 34px;
    border: 1px solid #d8e0ee;
    border-radius: 999px;
    background: #eef4ff;
    position: relative;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    box-shadow: none;
}

.theme-toggle-bulb {
    position: absolute;
    left: 8px;
    font-size: 15px;
    line-height: 1;
    z-index: 2;
    opacity: .8;
}

.theme-toggle-knob {
    position: absolute;
    left: 3px;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 3px 10px rgba(15,23,42,.18);
    transition: transform .16s ease;
}

.theme-toggle.is-dark {
    background: #172554;
    border-color: #2563eb;
}

.theme-toggle.is-dark .theme-toggle-bulb {
    left: 36px;
    opacity: 1;
}

.theme-toggle.is-dark .theme-toggle-knob {
    transform: translateX(28px);
    background: #0f172a;
}

.app-shell {
    max-width: 1240px;
    margin: 0 auto;
    padding: 28px 18px 48px;
}

/* Dark theme variables and hard overrides */
body.theme-dark {
    --bg:#0b1220;
    --bg2:#0f172a;
    --card:#111827;
    --text:#f8fafc;
    --muted:#a8b6ca;
    --line:#334155;
    --blue2:#172554;
    background: #0b1220 !important;
    color: #f8fafc !important;
    color-scheme: dark;
}

body.theme-dark .topbar {
    background: rgba(15, 23, 42, .96) !important;
    border-bottom-color: #334155 !important;
}

body.theme-dark .brand,
body.theme-dark .brand-name,
body.theme-dark .profile-label {
    color: #f8fafc !important;
}

body.theme-dark .beta-badge {
    background: #172554 !important;
    border-color: #2563eb !important;
    color: #bfdbfe !important;
}

body.theme-dark .main-nav a {
    color: #cbd5e1 !important;
}

body.theme-dark .main-nav a:hover {
    background: #1e293b !important;
    color: #ffffff !important;
}

body.theme-dark .profile-trigger,
body.theme-dark .profile-dropdown,
body.theme-dark .card,
body.theme-dark section.card,
body.theme-dark form.card,
body.theme-dark details.card,
body.theme-dark .table-wrap,
body.theme-dark .metric-card,
body.theme-dark .filter-panel,
body.theme-dark .template-field-card,
body.theme-dark .template-field-row,
body.theme-dark .location-summary,
body.theme-dark .auth-panel {
    background: #111827 !important;
    background-color: #111827 !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
    box-shadow: 0 18px 45px rgba(0,0,0,.22) !important;
}

body.theme-dark .hero .card:first-child {
    background: linear-gradient(135deg, #111827 0%, #172033 100%) !important;
}

body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark strong,
body.theme-dark label,
body.theme-dark th,
body.theme-dark td {
    color: #f8fafc !important;
}

body.theme-dark .muted,
body.theme-dark .help,
body.theme-dark small,
body.theme-dark .site-footer,
body.theme-dark .metric-card span {
    color: #a8b6ca !important;
}

body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

body.theme-dark input::placeholder,
body.theme-dark textarea::placeholder {
    color: #74839a !important;
}

body.theme-dark table,
body.theme-dark tbody,
body.theme-dark tr {
    background: #111827 !important;
    color: #f8fafc !important;
}

body.theme-dark thead,
body.theme-dark th {
    background: #0f172a !important;
    color: #cbd5e1 !important;
}

body.theme-dark td {
    background: #111827 !important;
    color: #e5edf8 !important;
    border-color: #334155 !important;
}

body.theme-dark tr:hover td {
    background: #172033 !important;
}

body.theme-dark .code-pill,
body.theme-dark .badge,
body.theme-dark .pill,
body.theme-dark .status-pill,
body.theme-dark .tag,
body.theme-dark .field-unit-hint {
    background: #1e293b !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}

body.theme-dark .btn.secondary,
body.theme-dark .btn.ghost,
body.theme-dark a.btn.secondary,
body.theme-dark a.btn.ghost {
    background: #1e293b !important;
    color: #bfdbfe !important;
    border: 1px solid #334155 !important;
    box-shadow: none !important;
}

body.theme-dark .btn.secondary:hover,
body.theme-dark .btn.ghost:hover {
    background: #26344a !important;
    color: #ffffff !important;
}

body.theme-dark .qr-label-preview,
body.theme-dark .qr-preview,
body.theme-dark .qr-card-preview,
body.theme-dark .print-label,
body.theme-dark .label-card,
body.theme-dark .print-sheet,
body.theme-dark .print-sheet .label,
body.theme-dark canvas,
body.theme-dark .qr-box {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #111827 !important;
    border-color: #111827 !important;
}

/* System preference can be selected in profile, but the top toggle only switches light/dark. */
@media (max-width: 900px) {
    .topbar-inner {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 12px;
    }

    .main-nav {
        order: 3;
        width: 100%;
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .topbar-actions {
        margin-left: auto;
    }

    .profile-label {
        display: none;
    }
}


/* --- Stable Beta 0.4 sun/moon theme toggle positioning --- */

.topbar-inner {
    display: flex !important;
    align-items: center !important;
}

.main-nav {
    justify-content: flex-start;
}

.topbar-actions {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.theme-toggle-form {
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}

.theme-toggle {
    width: 66px !important;
    height: 36px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 999px !important;
    background: #e0f2fe !important;
    position: relative !important;
    cursor: pointer !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

.theme-icon {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1 !important;
    font-size: 15px !important;
    line-height: 1 !important;
    pointer-events: none !important;
}

.theme-icon-sun {
    left: 10px !important;
    color: #f59e0b !important;
    opacity: 1 !important;
}

.theme-icon-moon {
    right: 11px !important;
    color: #64748b !important;
    opacity: .55 !important;
}

.theme-toggle-knob {
    position: absolute !important;
    left: 3px !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    box-shadow: 0 3px 10px rgba(15,23,42,.22) !important;
    transition: transform .16s ease, background .16s ease !important;
    z-index: 2 !important;
}

.theme-toggle.is-dark {
    background: #172554 !important;
    border-color: #2563eb !important;
}

.theme-toggle.is-dark .theme-toggle-knob {
    transform: translateX(30px) !important;
    background: #0f172a !important;
}

.theme-toggle.is-dark .theme-icon-sun {
    opacity: .45 !important;
    color: #94a3b8 !important;
}

.theme-toggle.is-dark .theme-icon-moon {
    opacity: 1 !important;
    color: #dbeafe !important;
}

body.theme-dark .theme-toggle {
    background: #172554 !important;
    border-color: #2563eb !important;
}

@media (max-width: 900px) {
    .topbar-actions {
        margin-left: auto !important;
    }
}


/* --- Stable Beta 0.4 dark mode button/pill fix --- */

/* General white button fix in dark mode */
body.theme-dark button,
body.theme-dark input[type="submit"],
body.theme-dark input[type="button"],
body.theme-dark .btn,
body.theme-dark a.btn {
    border-color: #334155;
}

body.theme-dark .btn:not(.danger):not(.primary),
body.theme-dark a.btn:not(.danger):not(.primary),
body.theme-dark button.btn:not(.danger):not(.primary) {
    background: #1e293b !important;
    color: #dbeafe !important;
    border: 1px solid #334155 !important;
    box-shadow: none !important;
}

body.theme-dark .btn:not(.danger):not(.primary):hover,
body.theme-dark a.btn:not(.danger):not(.primary):hover,
body.theme-dark button.btn:not(.danger):not(.primary):hover {
    background: #26344a !important;
    color: #ffffff !important;
}

/* Keep main action buttons blue */
body.theme-dark .btn:first-child,
body.theme-dark .btn.primary,
body.theme-dark button.btn.primary,
body.theme-dark a.btn.primary {
    background: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
}

/* Delete/danger buttons were showing white. */
body.theme-dark .btn.danger,
body.theme-dark a.btn.danger,
body.theme-dark button.btn.danger,
body.theme-dark .danger,
body.theme-dark a[href*="delete.php"],
body.theme-dark button[name*="delete"],
body.theme-dark button[value*="delete"],
body.theme-dark button[value*="clear_reserved"],
body.theme-dark .delete-button,
body.theme-dark .clear-button {
    background: #3f1d1d !important;
    color: #fecaca !important;
    border: 1px solid #7f1d1d !important;
    box-shadow: none !important;
}

body.theme-dark .btn.danger:hover,
body.theme-dark a.btn.danger:hover,
body.theme-dark button.btn.danger:hover,
body.theme-dark .danger:hover,
body.theme-dark a[href*="delete.php"]:hover,
body.theme-dark button[name*="delete"]:hover,
body.theme-dark button[value*="delete"]:hover,
body.theme-dark button[value*="clear_reserved"]:hover,
body.theme-dark .delete-button:hover,
body.theme-dark .clear-button:hover {
    background: #7f1d1d !important;
    color: #ffffff !important;
}

/* Some pages use plain anchors styled as buttons without btn classes. */
body.theme-dark .row-actions a,
body.theme-dark .table-actions-cell a,
body.theme-dark .actions a,
body.theme-dark .actions button {
    border-color: #334155;
}

body.theme-dark .row-actions a:not(.danger):not([href*="delete.php"]),
body.theme-dark .table-actions-cell a:not(.danger):not([href*="delete.php"]) {
    background: #1e293b !important;
    color: #dbeafe !important;
    border: 1px solid #334155 !important;
}

body.theme-dark .row-actions a:not(.danger):not([href*="delete.php"]):hover,
body.theme-dark .table-actions-cell a:not(.danger):not([href*="delete.php"]):hover {
    background: #26344a !important;
    color: #ffffff !important;
}

/* Code pills were still too pale in some table cells. */
body.theme-dark .code-pill,
body.theme-dark td .code-pill,
body.theme-dark .qr-code-pill,
body.theme-dark .item-id-pill {
    background: #1e293b !important;
    color: #e2e8f0 !important;
    border: 1px solid #334155 !important;
}

/* Search filter detail summary was still white on some browsers. */
body.theme-dark details,
body.theme-dark details summary,
body.theme-dark details.card,
body.theme-dark details.card summary {
    background: #111827 !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

/* Preserve white only where it must be white for QR/print. */
body.theme-dark .qr-label-preview,
body.theme-dark .qr-preview,
body.theme-dark .qr-card-preview,
body.theme-dark .print-label,
body.theme-dark .label-card,
body.theme-dark .print-sheet,
body.theme-dark .print-sheet .label,
body.theme-dark canvas,
body.theme-dark .qr-box {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #111827 !important;
    border-color: #111827 !important;
}

/* Same button fixes for system theme when OS is dark. */
@media (prefers-color-scheme: dark) {
    body.theme-system .btn:not(.danger):not(.primary),
    body.theme-system a.btn:not(.danger):not(.primary),
    body.theme-system button.btn:not(.danger):not(.primary) {
        background: #1e293b !important;
        color: #dbeafe !important;
        border: 1px solid #334155 !important;
        box-shadow: none !important;
    }

    body.theme-system .btn.danger,
    body.theme-system a.btn.danger,
    body.theme-system button.btn.danger,
    body.theme-system .danger,
    body.theme-system a[href*="delete.php"],
    body.theme-system button[name*="delete"],
    body.theme-system button[value*="delete"],
    body.theme-system button[value*="clear_reserved"],
    body.theme-system .delete-button,
    body.theme-system .clear-button {
        background: #3f1d1d !important;
        color: #fecaca !important;
        border: 1px solid #7f1d1d !important;
        box-shadow: none !important;
    }

    body.theme-system .code-pill,
    body.theme-system td .code-pill,
    body.theme-system .qr-code-pill,
    body.theme-system .item-id-pill {
        background: #1e293b !important;
        color: #e2e8f0 !important;
        border: 1px solid #334155 !important;
    }

    body.theme-system details,
    body.theme-system details summary,
    body.theme-system details.card,
    body.theme-system details.card summary {
        background: #111827 !important;
        color: #f8fafc !important;
        border-color: #334155 !important;
    }
}


/* --- Stable Beta 0.4 dark cleanup: toggle, white panels, buttons --- */

/* Hide old/broken theme toggle visuals if old CSS is still cached on a page. */
.theme-toggle,
.theme-toggle-form,
.theme-icon,
.theme-option,
.theme-toggle-bulb {
    display: none !important;
}

/* Clean topbar layout */
.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,255,255,.94);
    border-bottom: 1px solid #d8e0ee;
    backdrop-filter: blur(14px);
}

.topbar-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    gap: 22px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #0f172a;
    flex: 0 0 auto;
}

.brand:hover {
    text-decoration: none;
}

.brand-name {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1;
}

.beta-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 19px;
    padding: 0 7px;
    border: 1px solid #b8c7e6;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    white-space: nowrap;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 auto;
    min-width: 0;
}

.main-nav a {
    color: #335075;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
}

.main-nav a:hover {
    color: #2563eb;
    text-decoration: none;
}

.topbar-actions {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex: 0 0 auto;
}

.scan-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 16px;
    border-radius: 12px;
    background: #111827;
    color: #ffffff !important;
    text-decoration: none;
    font-weight: 800;
    font-size: 14px;
    box-shadow: 0 10px 24px rgba(17,24,39,.18);
}

.scan-button:hover {
    text-decoration: none;
}

.scan-icon {
    font-size: 15px;
    line-height: 1;
}

.profile-menu {
    position: relative;
}

.profile-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 4px 8px 4px 4px;
    border: 1px solid #d8e0ee;
    border-radius: 999px;
    background: #ffffff;
    color: #0f172a;
    text-decoration: none;
    font-weight: 800;
    cursor: pointer;
    max-width: 260px;
}

.profile-avatar {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    border: 1px solid #c9d7f2;
    overflow: hidden;
    flex: 0 0 auto;
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-label {
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.profile-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 280px;
    border: 1px solid #d8e0ee;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(15,23,42,.16);
    padding: 10px;
    display: none;
}

.profile-menu:hover .profile-dropdown,
.profile-menu:focus-within .profile-dropdown {
    display: block;
}

.profile-dropdown-header {
    padding: 10px;
    border-bottom: 1px solid #edf2f7;
    margin-bottom: 8px;
}

.profile-dropdown-header strong,
.profile-dropdown-header span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-dropdown-header span {
    color: #64748b;
    font-size: 13px;
    margin-top: 2px;
}

.profile-dropdown a {
    display: block;
    padding: 10px;
    border-radius: 12px;
    color: #334155;
    text-decoration: none;
    font-weight: 800;
}

.profile-dropdown a:hover {
    background: #f1f5f9;
    color: #0f172a;
    text-decoration: none;
}

/* New independent sun/moon switch */
.mode-switch-form {
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}

.mode-switch {
    width: 72px !important;
    height: 38px !important;
    border-radius: 999px !important;
    border: 1px solid #cbd5e1 !important;
    background: #e0f2fe !important;
    position: relative !important;
    cursor: pointer !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: inline-flex !important;
    align-items: center !important;
    box-shadow: none !important;
}

.mode-track-icon {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    pointer-events: none !important;
}

.mode-track-sun {
    left: 11px !important;
    color: #f59e0b !important;
    opacity: .25 !important;
}

.mode-track-moon {
    right: 12px !important;
    color: #64748b !important;
    opacity: .35 !important;
}

.mode-knob {
    position: absolute !important;
    left: 3px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #f59e0b !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    box-shadow: 0 3px 10px rgba(15,23,42,.22) !important;
    transition: transform .16s ease, background .16s ease, color .16s ease !important;
    z-index: 2 !important;
}

.mode-switch.mode-dark {
    background: #172554 !important;
    border-color: #2563eb !important;
}

.mode-switch.mode-dark .mode-knob {
    transform: translateX(34px) !important;
    background: #0f172a !important;
    color: #dbeafe !important;
}

.mode-switch.mode-dark .mode-track-sun {
    color: #94a3b8 !important;
    opacity: .35 !important;
}

.mode-switch.mode-dark .mode-track-moon {
    opacity: .22 !important;
}

/* Dark theme core */
body.theme-dark {
    --bg:#0b1220;
    --bg2:#0f172a;
    --card:#111827;
    --text:#f8fafc;
    --muted:#a8b6ca;
    --line:#334155;
    --blue2:#172554;
    background:#0b1220 !important;
    color:#f8fafc !important;
    color-scheme: dark;
}

body.theme-dark .topbar {
    background: rgba(15,23,42,.96) !important;
    border-bottom-color: #334155 !important;
}

body.theme-dark .brand,
body.theme-dark .brand-name,
body.theme-dark .profile-label {
    color:#f8fafc !important;
}

body.theme-dark .beta-badge {
    background:#172554 !important;
    border-color:#2563eb !important;
    color:#bfdbfe !important;
}

body.theme-dark .main-nav a {
    color:#cbd5e1 !important;
}

body.theme-dark .main-nav a:hover {
    background:#1e293b !important;
    color:#ffffff !important;
}

body.theme-dark .scan-button {
    background:#2563eb !important;
    color:#ffffff !important;
}

body.theme-dark .profile-trigger,
body.theme-dark .profile-dropdown {
    background:#111827 !important;
    border-color:#334155 !important;
    color:#f8fafc !important;
}

body.theme-dark .profile-dropdown-header {
    border-bottom-color:#334155 !important;
}

body.theme-dark .profile-dropdown-header span {
    color:#94a3b8 !important;
}

body.theme-dark .profile-dropdown a {
    color:#cbd5e1 !important;
}

body.theme-dark .profile-dropdown a:hover {
    background:#1e293b !important;
    color:#ffffff !important;
}

/* Kill the stubborn white panels seen in Items/Add Item/Templates/Made QR codes */
body.theme-dark .card,
body.theme-dark section.card,
body.theme-dark form.card,
body.theme-dark details.card,
body.theme-dark .table-wrap,
body.theme-dark .items-filter-panel,
body.theme-dark .items-filter-panel[open],
body.theme-dark .items-filter-panel summary,
body.theme-dark .field-as-card,
body.theme-dark .field-as-card.template-create-card,
body.theme-dark .template-fields-panel,
body.theme-dark .template-field-builder,
body.theme-dark .template-share-card,
body.theme-dark .template-preset,
body.theme-dark .template-field-row,
body.theme-dark .template-field-row-main,
body.theme-dark .template-field-row-extra,
body.theme-dark .template-options-wrap,
body.theme-dark .template-required,
body.theme-dark .template-create-card,
body.theme-dark .location-summary,
body.theme-dark .scanner-box,
body.theme-dark .notice:not(.print-label):not(.label-card),
body.theme-dark .alert,
body.theme-dark .stat-card,
body.theme-dark .metric-card {
    background:#111827 !important;
    background-color:#111827 !important;
    color:#f8fafc !important;
    border-color:#334155 !important;
    box-shadow:0 18px 45px rgba(0,0,0,.22) !important;
}

body.theme-dark .hero .card:first-child {
    background:linear-gradient(135deg,#111827 0%,#172033 100%) !important;
}

body.theme-dark .items-filter-panel *,
body.theme-dark .template-field-builder *,
body.theme-dark .template-share-card *,
body.theme-dark .template-preset *,
body.theme-dark .field-as-card *,
body.theme-dark .template-fields-panel *,
body.theme-dark .card *,
body.theme-dark .table-wrap * {
    color: inherit;
}

body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark strong,
body.theme-dark label,
body.theme-dark th,
body.theme-dark td,
body.theme-dark summary,
body.theme-dark .section-head,
body.theme-dark .page-head {
    color:#f8fafc !important;
}

body.theme-dark .muted,
body.theme-dark .help,
body.theme-dark .hint,
body.theme-dark small,
body.theme-dark .template-help,
body.theme-dark .template-field-hint,
body.theme-dark .site-footer,
body.theme-dark .items-filter-grid label {
    color:#a8b6ca !important;
}

body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea,
body.theme-dark .items-search-row input,
body.theme-dark .items-filter-grid select,
body.theme-dark .template-field-row input,
body.theme-dark .template-field-row select {
    background:#0f172a !important;
    border-color:#334155 !important;
    color:#f8fafc !important;
}

body.theme-dark input::placeholder,
body.theme-dark textarea::placeholder {
    color:#74839a !important;
}

body.theme-dark table,
body.theme-dark tbody,
body.theme-dark tr {
    background:#111827 !important;
    color:#f8fafc !important;
}

body.theme-dark thead,
body.theme-dark th {
    background:#0f172a !important;
    color:#cbd5e1 !important;
}

body.theme-dark td {
    background:#111827 !important;
    color:#e5edf8 !important;
    border-color:#334155 !important;
}

body.theme-dark tr:hover td {
    background:#172033 !important;
}

body.theme-dark .code-pill,
body.theme-dark td .code-pill,
body.theme-dark .qr-code-pill,
body.theme-dark .item-id-pill,
body.theme-dark .badge,
body.theme-dark .pill,
body.theme-dark .status-pill,
body.theme-dark .tag,
body.theme-dark .field-unit-hint {
    background:#1e293b !important;
    color:#e2e8f0 !important;
    border:1px solid #334155 !important;
}

/* Buttons, including delete buttons that were staying white */
body.theme-dark .btn,
body.theme-dark a.btn,
body.theme-dark button.btn,
body.theme-dark .row-actions a,
body.theme-dark .table-actions-cell a,
body.theme-dark .actions a,
body.theme-dark .actions button {
    background:#1e293b !important;
    color:#dbeafe !important;
    border:1px solid #334155 !important;
    box-shadow:none !important;
}

body.theme-dark .btn:hover,
body.theme-dark a.btn:hover,
body.theme-dark button.btn:hover,
body.theme-dark .row-actions a:hover,
body.theme-dark .table-actions-cell a:hover,
body.theme-dark .actions a:hover,
body.theme-dark .actions button:hover {
    background:#26344a !important;
    color:#ffffff !important;
}

body.theme-dark .btn.danger,
body.theme-dark a.btn.danger,
body.theme-dark button.btn.danger,
body.theme-dark a[href*="delete.php"],
body.theme-dark button[name*="delete"],
body.theme-dark button[value*="delete"],
body.theme-dark button[value*="clear_reserved"],
body.theme-dark .delete-button,
body.theme-dark .clear-button {
    background:#3f1d1d !important;
    color:#fecaca !important;
    border:1px solid #7f1d1d !important;
}

body.theme-dark .btn.danger:hover,
body.theme-dark a.btn.danger:hover,
body.theme-dark button.btn.danger:hover,
body.theme-dark a[href*="delete.php"]:hover,
body.theme-dark button[name*="delete"]:hover,
body.theme-dark button[value*="delete"]:hover,
body.theme-dark button[value*="clear_reserved"]:hover {
    background:#7f1d1d !important;
    color:#ffffff !important;
}

/* Primary actions stay blue */
body.theme-dark .btn.primary,
body.theme-dark a.btn.primary,
body.theme-dark .actions > .btn:first-child:not(.danger),
body.theme-dark .page-head .btn:last-child:not(.danger) {
    background:#2563eb !important;
    color:#ffffff !important;
    border-color:#2563eb !important;
}

/* QR and print surfaces stay white deliberately */
body.theme-dark .qr-label-preview,
body.theme-dark .qr-preview,
body.theme-dark .qr-card-preview,
body.theme-dark .print-label,
body.theme-dark .label-card,
body.theme-dark .print-sheet,
body.theme-dark .print-sheet .label,
body.theme-dark canvas,
body.theme-dark .qr-box {
    background:#ffffff !important;
    background-color:#ffffff !important;
    color:#111827 !important;
    border-color:#111827 !important;
}

@media (max-width:900px) {
    .topbar-inner {
        align-items:flex-start;
        flex-wrap:wrap;
        gap:12px;
    }

    .main-nav {
        order:3;
        width:100%;
        overflow-x:auto;
        padding-bottom:4px;
    }

    .topbar-actions {
        margin-left:auto !important;
    }

    .profile-label {
        display:none;
    }
}


/* --- Stable Beta 0.4 profile dropdown hover bridge + demo link polish --- */

.profile-menu {
    position: relative !important;
}

.profile-dropdown {
    top: calc(100% + 6px) !important;
    right: 0 !important;
}

/* Invisible bridge stops the dropdown disappearing while moving from profile button to menu. */
.profile-menu::after {
    content: '' !important;
    position: absolute !important;
    left: -12px !important;
    right: -12px !important;
    top: 100% !important;
    height: 14px !important;
    display: block !important;
    background: transparent !important;
    pointer-events: auto !important;
}

.profile-menu:hover .profile-dropdown,
.profile-menu:focus-within .profile-dropdown,
.profile-dropdown:hover {
    display: block !important;
}

.auth-extra-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.demo-page {
    display: grid;
    gap: 22px;
}

.demo-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, .9fr);
    gap: 18px;
    align-items: stretch;
}

.demo-card-stack {
    display: grid;
    gap: 14px;
}

.demo-steps {
    counter-reset: demoStep;
    display: grid;
    gap: 12px;
}

.demo-step {
    counter-increment: demoStep;
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 12px;
    align-items: start;
    padding: 14px;
    border: 1px solid var(--line, #d8e0ee);
    border-radius: 16px;
    background: var(--card, #fff);
}

.demo-step::before {
    content: counter(demoStep);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #2563eb;
    color: #fff;
    font-weight: 900;
}

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

.demo-mini {
    border: 1px solid var(--line, #d8e0ee);
    border-radius: 18px;
    background: var(--card, #fff);
    padding: 18px;
}

.demo-mini h3 {
    margin-top: 0;
}

.demo-fake-table {
    display: grid;
    gap: 8px;
}

.demo-fake-row {
    display: grid;
    grid-template-columns: 90px 1fr 100px;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--line, #d8e0ee);
    border-radius: 12px;
    align-items: center;
}

.demo-fake-qr {
    width: 54px;
    height: 54px;
    border-radius: 10px;
    background:
        linear-gradient(90deg, #111 10px, transparent 10px) 0 0/18px 18px,
        linear-gradient(#111 10px, transparent 10px) 0 0/18px 18px,
        #fff;
    border: 8px solid #fff;
    box-shadow: 0 0 0 1px #d8e0ee;
}

body.theme-dark .demo-step,
body.theme-dark .demo-mini,
body.theme-dark .demo-fake-row {
    background: #111827 !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

body.theme-dark .demo-fake-qr {
    background:
        linear-gradient(90deg, #111 10px, transparent 10px) 0 0/18px 18px,
        linear-gradient(#111 10px, transparent 10px) 0 0/18px 18px,
        #fff !important;
    border-color: #fff !important;
}

@media (max-width: 900px) {
    .demo-hero,
    .demo-grid {
        grid-template-columns: 1fr;
    }
}


/* --- Stable Beta 0.4 public demo dashboard + login required modal --- */

.public-demo-body {
    min-height: 100vh;
    background: linear-gradient(180deg, #f6f9ff 0%, #eef3fb 260px);
    color: #101828;
}

.public-demo-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,255,255,.94);
    border-bottom: 1px solid #d8e0ee;
    backdrop-filter: blur(14px);
}

.public-demo-topbar-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 18px;
}

.public-demo-nav {
    display: flex;
    gap: 14px;
    align-items: center;
    flex: 1 1 auto;
    overflow-x: auto;
}

.public-demo-nav a,
.public-demo-nav button {
    border: 0;
    background: transparent;
    color: #335075;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    padding: 8px 0;
}

.public-demo-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.demo-shell {
    max-width: 1240px;
    margin: 0 auto;
    padding: 34px 18px 60px;
}

.demo-disabled {
    cursor: pointer;
}

.demo-locked-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 900;
}

.demo-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, .48);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.demo-modal-backdrop.is-open {
    display: flex;
}

.demo-modal {
    width: min(520px, 100%);
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid #d8e0ee;
    box-shadow: 0 28px 80px rgba(15,23,42,.26);
    padding: 24px;
}

.demo-modal h2 {
    margin-top: 0;
}

.demo-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.demo-preview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, .9fr);
    gap: 18px;
    margin-bottom: 22px;
}

.demo-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}

.demo-metric {
    border: 1px solid #d8e0ee;
    background: #ffffff;
    border-radius: 18px;
    padding: 20px;
    text-decoration: none;
    color: #101828;
}

.demo-metric span {
    display: flex;
    justify-content: space-between;
    color: #667085;
}

.demo-metric span::after {
    content: '↗';
    color: #98a2b3;
    font-weight: 900;
}

.demo-metric strong {
    display: block;
    font-size: 34px;
    margin-top: 8px;
}

.demo-fake-table-card {
    overflow: hidden;
}

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

.demo-table th,
.demo-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #e4eaf3;
    text-align: left;
}

.demo-table th {
    color: #667085;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.demo-workflow-list {
    margin: 0;
    padding-left: 22px;
    color: #516173;
    line-height: 1.7;
}

.demo-qr-card {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
    padding: 14px;
    border: 1px solid #d8e0ee;
    border-radius: 18px;
    background: #f8fbff;
}

.demo-qr-box {
    width: 84px;
    height: 84px;
    border-radius: 12px;
    background:
        linear-gradient(90deg, #111 9px, transparent 9px) 0 0/18px 18px,
        linear-gradient(#111 9px, transparent 9px) 0 0/18px 18px,
        #fff;
    border: 10px solid #fff;
    box-shadow: 0 0 0 1px #d8e0ee;
    flex: 0 0 auto;
}

.demo-hint-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.demo-hint {
    border: 1px solid #d8e0ee;
    border-radius: 18px;
    padding: 18px;
    background: #ffffff;
}

.demo-hint h3 {
    margin-top: 0;
}

@media (max-width: 900px) {
    .demo-preview-grid,
    .demo-metrics,
    .demo-hint-row {
        grid-template-columns: 1fr;
    }

    .public-demo-topbar-inner {
        flex-wrap: wrap;
    }

    .public-demo-actions {
        margin-left: auto;
    }
}


/* --- Stable Beta 0.4 scrollable patch history --- */

.patch-history-scroll {
    max-height: 420px;
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid var(--line, #d8e0ee);
    border-radius: 16px;
}

.patch-history-scroll table {
    margin: 0;
}

.patch-history-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f8fbff;
}

.patch-history-scroll td,
.patch-history-scroll th {
    vertical-align: top;
}

.patch-history-note {
    margin-top: 10px;
    color: var(--muted, #667085);
    font-size: 13px;
}

body.theme-dark .patch-history-scroll {
    border-color: #334155 !important;
    background: #111827 !important;
}

body.theme-dark .patch-history-scroll thead th {
    background: #0f172a !important;
    color: #cbd5e1 !important;
}

body.theme-dark .patch-history-note {
    color: #a8b6ca !important;
}

.public-demo-body .patch-history-scroll {
    background: #ffffff;
}

@media (max-width: 700px) {
    .patch-history-scroll {
        max-height: 360px;
    }
}


/* --- Stable Beta 0.4 public pages with login-required modal --- */

.public-preview-note {
    border: 1px solid #b8c7e6;
    background: #eef4ff;
    color: #1d4ed8;
    border-radius: 16px;
    padding: 14px 16px;
    font-weight: 800;
    margin-bottom: 18px;
}

.public-preview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}

.public-preview-card,
.public-preview-table-card {
    border: 1px solid var(--line, #d8e0ee);
    background: var(--card, #fff);
    border-radius: 18px;
    padding: 20px;
}

.public-preview-card span {
    display: flex;
    justify-content: space-between;
    color: var(--muted, #667085);
}

.public-preview-card span::after {
    content: '↗';
    color: #98a2b3;
    font-weight: 900;
}

.public-preview-card strong {
    display: block;
    font-size: 34px;
    margin-top: 8px;
}

.public-login-required {
    cursor: pointer;
}

.demo-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, .48);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.demo-modal-backdrop.is-open {
    display: flex;
}

.demo-modal {
    width: min(520px, 100%);
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid #d8e0ee;
    box-shadow: 0 28px 80px rgba(15,23,42,.26);
    padding: 24px;
}

.demo-modal h2 {
    margin-top: 0;
}

.demo-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

body.theme-dark .public-preview-note {
    background: #172554 !important;
    border-color: #2563eb !important;
    color: #bfdbfe !important;
}

body.theme-dark .public-preview-card,
body.theme-dark .public-preview-table-card,
body.theme-dark .demo-modal {
    background: #111827 !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

body.theme-dark .public-preview-card span,
body.theme-dark .demo-modal .muted {
    color: #a8b6ca !important;
}

@media (max-width: 900px) {
    .public-preview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .public-preview-grid {
        grid-template-columns: 1fr;
    }
}


/* --- Stable Beta 0.4 public theme toggle --- */

body.theme-dark .public-preview-card,
body.theme-dark .public-preview-table-card,
body.theme-dark .public-preview-note,
body.theme-dark .demo-modal,
body.theme-dark .demo-table,
body.theme-dark .demo-table tbody,
body.theme-dark .demo-table tr {
    background: #111827 !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

body.theme-dark .public-preview-note {
    background: #172554 !important;
    color: #bfdbfe !important;
    border-color: #2563eb !important;
}

body.theme-dark .demo-table th {
    background: #0f172a !important;
    color: #cbd5e1 !important;
}

body.theme-dark .demo-table td {
    background: #111827 !important;
    color: #e5edf8 !important;
    border-color: #334155 !important;
}

body.theme-dark .public-demo-body {
    background: #0b1220 !important;
    color: #f8fafc !important;
}

body.theme-dark .public-demo-topbar {
    background: rgba(15,23,42,.96) !important;
    border-bottom-color: #334155 !important;
}

body.theme-dark .public-demo-nav a,
body.theme-dark .public-demo-nav button {
    color: #cbd5e1 !important;
}


/* --- Stable Beta 0.4 login dashboard button --- */

.auth-extra-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.auth-copy .auth-extra-actions {
    margin-top: 22px;
}

body.theme-dark .auth-extra-actions .btn.ghost,
body.theme-dark .auth-extra-actions .btn.secondary {
    background: #1e293b !important;
    color: #dbeafe !important;
    border-color: #334155 !important;
}


/* --- Stable Beta 0.4 login dashboard preview area --- */

.auth-preview-area {
    margin-top: 24px;
    padding: 18px;
    border: 1px solid #d8e0ee;
    border-radius: 18px;
    background: linear-gradient(135deg, #f8fbff 0%, #eef4ff 100%);
    display: grid;
    gap: 14px;
}

.auth-preview-area strong,
.auth-preview-area span {
    display: block;
}

.auth-preview-area strong {
    font-size: 15px;
    color: #101828;
}

.auth-preview-area span {
    margin-top: 4px;
    color: #516173;
    line-height: 1.5;
}

.auth-preview-area .preview-btn {
    width: fit-content;
}

.auth-preview-link {
    margin: 16px 0 0;
    color: #667085;
    font-size: 14px;
}

.auth-preview-link a {
    font-weight: 800;
}

body.theme-dark .auth-preview-area {
    background: linear-gradient(135deg, #111827 0%, #172554 100%) !important;
    border-color: #334155 !important;
}

body.theme-dark .auth-preview-area strong {
    color: #f8fafc !important;
}

body.theme-dark .auth-preview-area span,
body.theme-dark .auth-preview-link {
    color: #a8b6ca !important;
}

@media (max-width: 720px) {
    .auth-preview-area .preview-btn {
        width: 100%;
        justify-content: center;
    }
}


/* --- Stable Beta 0.4 top bar spacing polish --- */

/*
Keeps the main navigation on one clean row on desktop, with brand left and
actions right. It only switches to a wrapping/mobile layout when the viewport
is genuinely narrow.
*/

.topbar {
    min-height: 74px;
}

.topbar-inner {
    max-width: 1480px !important;
    width: 100%;
    padding: 14px 28px !important;
    gap: 26px !important;
    justify-content: flex-start;
}

.brand {
    margin-right: 10px;
}

.main-nav {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    column-gap: 24px !important;
    row-gap: 8px !important;
    min-width: 0 !important;
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
}

.main-nav::-webkit-scrollbar {
    display: none;
}

.main-nav a {
    padding: 8px 0;
    line-height: 1.1;
}

.topbar-actions {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 14px !important;
    flex: 0 0 auto !important;
}

.scan-button {
    gap: 7px;
    min-width: 74px;
}

.profile-trigger {
    max-width: 220px;
}

.mode-switch-form {
    flex: 0 0 auto;
}

@media (min-width: 1200px) {
    .topbar-inner {
        flex-wrap: nowrap !important;
    }

    .main-nav {
        flex-wrap: nowrap !important;
    }
}

@media (max-width: 1199px) {
    .topbar {
        min-height: auto;
    }

    .topbar-inner {
        align-items: flex-start !important;
        flex-wrap: wrap !important;
        gap: 12px 18px !important;
    }

    .main-nav {
        order: 3;
        width: 100%;
        flex-basis: 100% !important;
        padding-bottom: 4px;
        column-gap: 18px !important;
    }

    .topbar-actions {
        margin-left: auto !important;
    }
}

@media (max-width: 700px) {
    .topbar-inner {
        padding: 12px 16px !important;
    }

    .main-nav {
        column-gap: 16px !important;
    }

    .scan-button span:last-child {
        display: none;
    }

    .scan-button {
        min-width: 42px;
        padding-inline: 12px;
    }
}


/* --- Stable Beta 0.4 footer bottom placement --- */

/*
Keeps the footer at the bottom of the viewport on short pages,
without making it fixed or covering content.
*/

html,
body {
    min-height: 100%;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.topbar {
    flex: 0 0 auto;
}

.app-shell {
    flex: 1 0 auto;
    width: 100%;
}

.site-footer {
    flex: 0 0 auto;
    width: 100%;
    margin-top: auto !important;
    padding-top: 24px;
    padding-bottom: 28px;
}

.site-footer-inner,
.site-footer .footer-inner {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 700px) {
    .site-footer {
        padding-bottom: 22px;
    }
}


/* --- Stable Beta 0.4 mobile top bar cleanup --- */

/*
Mobile top bar:
- Brand and account controls stay in one compact row.
- Navigation becomes a horizontal scroll strip instead of wrapping into a tall block.
- Scan becomes an icon-only square on mobile.
- Profile name hides on mobile, leaving the avatar.
*/

@media (max-width: 760px) {
    .topbar {
        min-height: auto !important;
    }

    .topbar-inner {
        padding: 12px 14px 10px !important;
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        grid-template-areas:
            "brand spacer actions"
            "nav nav nav" !important;
        align-items: center !important;
        gap: 10px 12px !important;
        max-width: 100% !important;
    }

    .brand {
        grid-area: brand !important;
        margin: 0 !important;
        gap: 7px !important;
        min-width: 0 !important;
    }

    .brand-name {
        font-size: 22px !important;
        letter-spacing: -0.05em !important;
    }

    .beta-badge {
        height: 18px !important;
        padding: 0 7px !important;
        font-size: 9px !important;
    }

    .topbar-actions {
        grid-area: actions !important;
        margin-left: 0 !important;
        justify-self: end !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
    }

    .scan-button {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        padding: 0 !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .scan-button span:not(.scan-icon) {
        display: none !important;
    }

    .scan-icon {
        font-size: 17px !important;
    }

    .profile-trigger {
        width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 4px !important;
        border-radius: 999px !important;
        justify-content: center !important;
    }

    .profile-label {
        display: none !important;
    }

    .profile-avatar {
        width: 34px !important;
        height: 34px !important;
    }

    .mode-switch {
        width: 62px !important;
        height: 36px !important;
    }

    .mode-knob {
        width: 30px !important;
        height: 30px !important;
        font-size: 14px !important;
    }

    .mode-switch.mode-dark .mode-knob {
        transform: translateX(26px) !important;
    }

    .mode-track-sun {
        left: 9px !important;
    }

    .mode-track-moon {
        right: 10px !important;
    }

    .main-nav {
        grid-area: nav !important;
        order: unset !important;
        width: 100% !important;
        flex-basis: auto !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        column-gap: 8px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 2px 0 4px !important;
        margin: 0 !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap !important;
    }

    .main-nav::-webkit-scrollbar {
        display: none !important;
    }

    .main-nav a {
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        min-height: 34px !important;
        padding: 0 12px !important;
        border-radius: 999px !important;
        background: #eef4ff !important;
        color: #335075 !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        text-decoration: none !important;
    }

    .main-nav a:hover {
        background: #dbeafe !important;
        color: #1d4ed8 !important;
    }

    body.theme-dark .main-nav a {
        background: #1e293b !important;
        color: #cbd5e1 !important;
    }

    body.theme-dark .main-nav a:hover {
        background: #26344a !important;
        color: #ffffff !important;
    }

    .profile-dropdown {
        right: -74px !important;
        width: min(280px, calc(100vw - 28px)) !important;
    }

    .app-shell {
        padding-top: 22px !important;
    }
}

@media (max-width: 420px) {
    .topbar-inner {
        padding-left: 10px !important;
        padding-right: 10px !important;
        gap: 9px 8px !important;
    }

    .brand-name {
        font-size: 20px !important;
    }

    .beta-badge {
        font-size: 8px !important;
        padding: 0 6px !important;
    }

    .topbar-actions {
        gap: 6px !important;
    }

    .scan-button,
    .profile-trigger {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }

    .profile-avatar {
        width: 31px !important;
        height: 31px !important;
    }

    .mode-switch {
        width: 58px !important;
        height: 34px !important;
    }

    .mode-knob {
        width: 28px !important;
        height: 28px !important;
    }

    .mode-switch.mode-dark .mode-knob {
        transform: translateX(24px) !important;
    }

    .main-nav a {
        min-height: 32px !important;
        padding: 0 10px !important;
        font-size: 12px !important;
    }
}


/* --- Stable Beta 0.4 mobile burger navigation --- */

.mobile-menu-toggle {
    display: none;
}

@media (max-width: 760px) {
    .topbar-inner {
        grid-template-columns: auto auto 1fr auto !important;
        grid-template-areas: "brand menu spacer actions" !important;
    }

    .mobile-menu-toggle {
        grid-area: menu !important;
        display: inline-flex !important;
        width: 42px !important;
        height: 42px !important;
        border: 1px solid #d8e0ee !important;
        border-radius: 14px !important;
        background: #ffffff !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        gap: 4px !important;
        padding: 0 !important;
        cursor: pointer !important;
        box-shadow: none !important;
    }

    .mobile-menu-toggle span {
        width: 18px !important;
        height: 2px !important;
        border-radius: 999px !important;
        background: #101828 !important;
        display: block !important;
        transition: transform .16s ease, opacity .16s ease !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(1) {
        transform: translateY(6px) rotate(45deg) !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(2) {
        opacity: 0 !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg) !important;
    }

    .main-nav {
        grid-area: nav !important;
        display: none !important;
        width: 100% !important;
        padding: 10px !important;
        margin: 0 !important;
        border: 1px solid #d8e0ee !important;
        border-radius: 18px !important;
        background: #ffffff !important;
        box-shadow: 0 18px 45px rgba(15,23,42,.12) !important;
        overflow: visible !important;
        white-space: normal !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .main-nav.is-open {
        display: flex !important;
    }

    .main-nav a {
        min-height: 38px !important;
        padding: 0 13px !important;
        border-radius: 999px !important;
        background: #eef4ff !important;
        color: #335075 !important;
        font-size: 13px !important;
        font-weight: 800 !important;
    }

    body.theme-dark .mobile-menu-toggle {
        background: #111827 !important;
        border-color: #334155 !important;
    }

    body.theme-dark .mobile-menu-toggle span {
        background: #f8fafc !important;
    }

    body.theme-dark .main-nav {
        background: #111827 !important;
        border-color: #334155 !important;
        box-shadow: 0 18px 45px rgba(0,0,0,.22) !important;
    }

    body.theme-dark .main-nav a {
        background: #1e293b !important;
        color: #cbd5e1 !important;
    }

    body.theme-dark .main-nav a:hover {
        background: #26344a !important;
        color: #ffffff !important;
    }
}

@media (max-width: 420px) {
    .mobile-menu-toggle {
        width: 40px !important;
        height: 40px !important;
    }

    .topbar-inner {
        grid-template-columns: auto auto 1fr auto !important;
    }
}


/* --- Stable Beta 0.4 mobile burger force fix --- */

/*
The earlier mobile menu CSS was being overridden by older mobile nav rules.
This block sits at the end of the stylesheet and forcefully:
- shows the burger button
- hides the nav by default on mobile
- only shows the nav after JS adds .is-open
*/

@media (max-width: 760px) {
    .topbar-inner {
        display: grid !important;
        grid-template-columns: auto auto 1fr auto !important;
        grid-template-areas:
            "brand menu spacer actions"
            "nav nav nav nav" !important;
        align-items: center !important;
        gap: 10px 10px !important;
        padding: 12px 14px !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .brand {
        grid-area: brand !important;
        margin: 0 !important;
    }

    .mobile-menu-toggle {
        grid-area: menu !important;
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        border: 1px solid #d8e0ee !important;
        border-radius: 14px !important;
        background: #ffffff !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        gap: 4px !important;
        padding: 0 !important;
        margin: 0 !important;
        cursor: pointer !important;
        box-shadow: none !important;
        appearance: none !important;
        -webkit-appearance: none !important;
    }

    .mobile-menu-toggle span {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 18px !important;
        height: 2px !important;
        min-height: 2px !important;
        border-radius: 999px !important;
        background: #101828 !important;
        transform-origin: center !important;
        transition: transform .16s ease, opacity .16s ease !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(1) {
        transform: translateY(6px) rotate(45deg) !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(2) {
        opacity: 0 !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg) !important;
    }

    .topbar-actions {
        grid-area: actions !important;
        justify-self: end !important;
        margin-left: 0 !important;
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }

    .main-nav,
    .topbar .main-nav,
    header .main-nav {
        grid-area: nav !important;
        order: unset !important;
        width: 100% !important;
        flex-basis: 100% !important;
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .main-nav.is-open,
    .topbar .main-nav.is-open,
    header .main-nav.is-open {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        overflow: visible !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 10px !important;
        margin: 0 !important;
        border: 1px solid #d8e0ee !important;
        border-radius: 18px !important;
        background: #ffffff !important;
        box-shadow: 0 18px 45px rgba(15,23,42,.12) !important;
        white-space: normal !important;
    }

    .main-nav.is-open a {
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        min-height: 38px !important;
        padding: 0 13px !important;
        border-radius: 999px !important;
        background: #eef4ff !important;
        color: #335075 !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        text-decoration: none !important;
    }

    body.theme-dark .mobile-menu-toggle {
        background: #111827 !important;
        border-color: #334155 !important;
    }

    body.theme-dark .mobile-menu-toggle span {
        background: #f8fafc !important;
    }

    body.theme-dark .main-nav.is-open {
        background: #111827 !important;
        border-color: #334155 !important;
        box-shadow: 0 18px 45px rgba(0,0,0,.22) !important;
    }

    body.theme-dark .main-nav.is-open a {
        background: #1e293b !important;
        color: #cbd5e1 !important;
    }
}

@media (min-width: 761px) {
    .mobile-menu-toggle {
        display: none !important;
    }

    .main-nav {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
    }
}


/* --- Stable Beta 0.4 mobile bottom navigation --- */

/*
Mobile now uses a native-app style bottom nav:
Dashboard, Items, Locations, Folders, QR Labels, Scan.
The full desktop nav stays on desktop/tablet.
*/

.mobile-bottom-nav {
    display: none;
}

@media (max-width: 760px) {
    /* Keep mobile header compact and remove the large nav area. */
    .topbar-inner {
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        grid-template-areas: "brand spacer actions" !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 12px 14px !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .brand {
        grid-area: brand !important;
        margin: 0 !important;
    }

    .topbar-actions {
        grid-area: actions !important;
        justify-self: end !important;
        margin-left: 0 !important;
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }

    .main-nav,
    .topbar .main-nav,
    header .main-nav {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
    }

    .mobile-menu-toggle {
        display: none !important;
    }

    .scan-button {
        display: none !important;
    }

    .profile-trigger {
        width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        padding: 4px !important;
        border-radius: 999px !important;
        justify-content: center !important;
    }

    .profile-label {
        display: none !important;
    }

    .profile-avatar {
        width: 32px !important;
        height: 32px !important;
    }

    .mode-switch {
        width: 58px !important;
        height: 34px !important;
    }

    .mode-knob {
        width: 28px !important;
        height: 28px !important;
        font-size: 14px !important;
    }

    .mode-switch.mode-dark .mode-knob {
        transform: translateX(24px) !important;
    }

    .mobile-bottom-nav {
        position: fixed !important;
        left: 10px !important;
        right: 10px !important;
        bottom: calc(10px + env(safe-area-inset-bottom)) !important;
        z-index: 999 !important;
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 4px !important;
        padding: 8px !important;
        border: 1px solid rgba(216, 224, 238, .92) !important;
        border-radius: 24px !important;
        background: rgba(255, 255, 255, .94) !important;
        box-shadow: 0 18px 55px rgba(15, 23, 42, .22) !important;
        backdrop-filter: blur(18px) !important;
        -webkit-backdrop-filter: blur(18px) !important;
    }

    .mobile-bottom-link {
        min-width: 0 !important;
        min-height: 54px !important;
        border-radius: 18px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        text-decoration: none !important;
        color: #475467 !important;
        font-size: 10px !important;
        font-weight: 850 !important;
        line-height: 1 !important;
        letter-spacing: -0.01em !important;
        white-space: nowrap !important;
    }

    .mobile-bottom-icon {
        font-size: 18px !important;
        line-height: 1 !important;
        display: block !important;
    }

    .mobile-bottom-link:hover,
    .mobile-bottom-link:focus {
        background: #eef4ff !important;
        color: #1d4ed8 !important;
        text-decoration: none !important;
    }

    .mobile-bottom-scan {
        background: #2563eb !important;
        color: #ffffff !important;
        box-shadow: 0 10px 24px rgba(37, 99, 235, .28) !important;
    }

    .mobile-bottom-scan:hover,
    .mobile-bottom-scan:focus {
        background: #1d4ed8 !important;
        color: #ffffff !important;
    }

    .app-shell {
        padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
    }

    .site-footer {
        padding-bottom: calc(112px + env(safe-area-inset-bottom)) !important;
    }

    body.theme-dark .mobile-bottom-nav {
        background: rgba(15, 23, 42, .94) !important;
        border-color: #334155 !important;
        box-shadow: 0 18px 55px rgba(0, 0, 0, .36) !important;
    }

    body.theme-dark .mobile-bottom-link {
        color: #cbd5e1 !important;
    }

    body.theme-dark .mobile-bottom-link:hover,
    body.theme-dark .mobile-bottom-link:focus {
        background: #1e293b !important;
        color: #ffffff !important;
    }

    body.theme-dark .mobile-bottom-scan {
        background: #2563eb !important;
        color: #ffffff !important;
    }
}

@media (max-width: 390px) {
    .mobile-bottom-nav {
        left: 8px !important;
        right: 8px !important;
        padding: 6px !important;
        gap: 2px !important;
        border-radius: 22px !important;
    }

    .mobile-bottom-link {
        min-height: 50px !important;
        font-size: 9px !important;
        border-radius: 16px !important;
    }

    .mobile-bottom-icon {
        font-size: 17px !important;
    }
}


/* --- Stable Beta 0.4 mobile bottom nav overlay force fix --- */

/*
Strict behaviour:
- Hidden on desktop.
- Fixed overlay on mobile/coarse pointer devices.
- Stays pinned to viewport, not the bottom of the document.
*/

.mobile-bottom-nav {
    display: none !important;
}

/* Desktop and laptop safety: never show bottom nav on normal desktop widths. */
@media (min-width: 821px) and (hover: hover) and (pointer: fine) {
    .mobile-bottom-nav {
        display: none !important;
    }
}

/* Phones and narrow mobile layouts */
@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 1024px) {
    body {
        padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important;
    }

    .app-shell {
        padding-bottom: calc(112px + env(safe-area-inset-bottom)) !important;
    }

    .site-footer {
        padding-bottom: calc(122px + env(safe-area-inset-bottom)) !important;
    }

    .mobile-bottom-nav {
        position: fixed !important;
        inset-inline: 10px !important;
        left: 10px !important;
        right: 10px !important;
        bottom: calc(10px + env(safe-area-inset-bottom)) !important;
        top: auto !important;
        z-index: 2147483000 !important;
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 4px !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        min-height: 68px !important;
        margin: 0 !important;
        padding: 8px !important;
        border: 1px solid rgba(216, 224, 238, .94) !important;
        border-radius: 24px !important;
        background: rgba(255, 255, 255, .96) !important;
        box-shadow: 0 18px 55px rgba(15, 23, 42, .24) !important;
        backdrop-filter: blur(18px) !important;
        -webkit-backdrop-filter: blur(18px) !important;
        transform: translate3d(0, 0, 0) !important;
        will-change: transform !important;
        pointer-events: auto !important;
    }

    .mobile-bottom-link {
        min-width: 0 !important;
        min-height: 52px !important;
        border-radius: 18px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        text-decoration: none !important;
        color: #475467 !important;
        font-size: 10px !important;
        font-weight: 850 !important;
        line-height: 1 !important;
        letter-spacing: -0.01em !important;
        white-space: nowrap !important;
        overflow: hidden !important;
    }

    .mobile-bottom-icon {
        font-size: 18px !important;
        line-height: 1 !important;
        display: block !important;
    }

    .mobile-bottom-link:hover,
    .mobile-bottom-link:focus {
        background: #eef4ff !important;
        color: #1d4ed8 !important;
        text-decoration: none !important;
    }

    .mobile-bottom-scan {
        background: #2563eb !important;
        color: #ffffff !important;
        box-shadow: 0 10px 24px rgba(37, 99, 235, .28) !important;
    }

    .mobile-bottom-scan:hover,
    .mobile-bottom-scan:focus {
        background: #1d4ed8 !important;
        color: #ffffff !important;
    }

    body.theme-dark .mobile-bottom-nav {
        background: rgba(15, 23, 42, .96) !important;
        border-color: #334155 !important;
        box-shadow: 0 18px 55px rgba(0, 0, 0, .38) !important;
    }

    body.theme-dark .mobile-bottom-link {
        color: #cbd5e1 !important;
    }

    body.theme-dark .mobile-bottom-link:hover,
    body.theme-dark .mobile-bottom-link:focus {
        background: #1e293b !important;
        color: #ffffff !important;
    }

    body.theme-dark .mobile-bottom-scan {
        background: #2563eb !important;
        color: #ffffff !important;
    }
}

@media (max-width: 390px) {
    .mobile-bottom-nav {
        left: 8px !important;
        right: 8px !important;
        inset-inline: 8px !important;
        bottom: calc(8px + env(safe-area-inset-bottom)) !important;
        padding: 6px !important;
        gap: 2px !important;
        border-radius: 22px !important;
        min-height: 64px !important;
    }

    .mobile-bottom-link {
        min-height: 50px !important;
        font-size: 9px !important;
        border-radius: 16px !important;
    }

    .mobile-bottom-icon {
        font-size: 17px !important;
    }
}


/* --- Stable Beta 0.4 JS mobile bottom nav overlay fix --- */

/*
The mobile bottom nav is now created by JS at the end of <body>
and forced with inline fixed-position styles. CSS below handles fallback,
spacing, and hiding top navigation on mobile.
*/

.mobile-bottom-nav {
    display: none !important;
}

@media (min-width: 821px) {
    .mobile-bottom-nav,
    #mobileBottomNav {
        display: none !important;
    }
}

@media (max-width: 820px) {
    body.has-mobile-bottom-nav {
        padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
    }

    body.has-mobile-bottom-nav .app-shell {
        padding-bottom: calc(124px + env(safe-area-inset-bottom)) !important;
    }

    body.has-mobile-bottom-nav .site-footer {
        padding-bottom: calc(132px + env(safe-area-inset-bottom)) !important;
    }

    .topbar .main-nav,
    header .main-nav,
    .main-nav {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .scan-button {
        display: none !important;
    }

    #mobileBottomNav .mobile-bottom-link:hover,
    #mobileBottomNav .mobile-bottom-link:focus {
        background: #eef4ff !important;
        color: #1d4ed8 !important;
    }

    body.theme-dark #mobileBottomNav .mobile-bottom-link:hover,
    body.theme-dark #mobileBottomNav .mobile-bottom-link:focus {
        background: #1e293b !important;
        color: #ffffff !important;
    }
}

@media (max-width: 390px) {
    #mobileBottomNav {
        left: 8px !important;
        right: 8px !important;
        bottom: calc(8px + env(safe-area-inset-bottom)) !important;
        padding: 6px !important;
        gap: 4px !important;
    }

    #mobileBottomNav .mobile-bottom-link {
        min-height: 50px !important;
        font-size: 9px !important;
    }
}


/* --- Stable Beta 0.4 mobile bottom nav: add Scan + remove top mobile nav --- */

/*
Mobile bottom nav now contains:
Dashboard, Items, Locations, Folders, Scan.
Top navigation and top Scan remain hidden on mobile.
*/

@media (max-width: 820px) {
    .topbar .main-nav,
    header .main-nav,
    .main-nav,
    .scan-button {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
    }

    #mobileBottomNav,
    .mobile-bottom-nav {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }

    #mobileBottomNav .mobile-bottom-scan,
    .mobile-bottom-nav .mobile-bottom-scan {
        background: #2563eb !important;
        color: #ffffff !important;
        box-shadow: 0 10px 24px rgba(37, 99, 235, .28) !important;
    }

    #mobileBottomNav .mobile-bottom-scan:hover,
    #mobileBottomNav .mobile-bottom-scan:focus,
    .mobile-bottom-nav .mobile-bottom-scan:hover,
    .mobile-bottom-nav .mobile-bottom-scan:focus {
        background: #1d4ed8 !important;
        color: #ffffff !important;
    }
}

@media (max-width: 390px) {
    #mobileBottomNav .mobile-bottom-link {
        font-size: 8.5px !important;
    }

    #mobileBottomNav .mobile-bottom-icon {
        font-size: 17px !important;
    }
}


/* --- Stable Beta 0.4 force hide top mobile nav --- */

/*
Hard stop: on mobile the header must only show brand/account/theme controls.
Dashboard/Items/Locations/Folders/Scan must not appear in the top bar.
They live in the bottom overlay nav instead.
*/

@media screen and (max-width: 820px) {
    header nav.main-nav,
    .topbar nav.main-nav,
    .topbar .main-nav,
    header .main-nav,
    body .main-nav {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        left: -99999px !important;
        top: -99999px !important;
        width: 0 !important;
        max-width: 0 !important;
        height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        transform: none !important;
    }

    header .scan-button,
    .topbar .scan-button,
    body .topbar .scan-button {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        left: -99999px !important;
        top: -99999px !important;
        width: 0 !important;
        max-width: 0 !important;
        min-width: 0 !important;
        height: 0 !important;
        max-height: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
    }

    .topbar-inner {
        grid-template-areas: "brand spacer actions" !important;
        grid-template-columns: auto 1fr auto !important;
    }
}

@media screen and (min-width: 821px) {
    header nav.main-nav,
    .topbar nav.main-nav,
    .topbar .main-nav {
        position: static !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
}


/* --- Stable Beta 0.4 mobile More burger menu --- */

/*
Bottom mobile nav keeps the primary actions:
Dashboard, Items, Locations, Folders, Scan.
The header burger now holds the remaining pages.
*/

.mobile-more-toggle,
.mobile-more-menu {
    display: none;
}

@media screen and (max-width: 820px) {
    .topbar-inner {
        display: grid !important;
        grid-template-columns: auto auto 1fr auto !important;
        grid-template-areas: "brand more spacer actions" !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 12px 14px !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .mobile-more-toggle {
        grid-area: more !important;
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        border: 1px solid #d8e0ee !important;
        border-radius: 14px !important;
        background: #ffffff !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        gap: 4px !important;
        padding: 0 !important;
        margin: 0 !important;
        cursor: pointer !important;
        box-shadow: none !important;
        appearance: none !important;
        -webkit-appearance: none !important;
    }

    .mobile-more-toggle span {
        width: 18px !important;
        height: 2px !important;
        min-height: 2px !important;
        display: block !important;
        border-radius: 999px !important;
        background: #101828 !important;
        transition: transform .16s ease, opacity .16s ease !important;
    }

    .mobile-more-toggle.is-open span:nth-child(1) {
        transform: translateY(6px) rotate(45deg) !important;
    }

    .mobile-more-toggle.is-open span:nth-child(2) {
        opacity: 0 !important;
    }

    .mobile-more-toggle.is-open span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg) !important;
    }

    .mobile-more-menu {
        position: fixed !important;
        inset: 0 !important;
        z-index: 2147483600 !important;
        display: none !important;
        padding: 74px 12px calc(104px + env(safe-area-inset-bottom)) !important;
        background: rgba(15, 23, 42, .18) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
    }

    .mobile-more-menu.is-open {
        display: block !important;
    }

    .mobile-more-panel {
        width: min(420px, 100%) !important;
        margin: 0 auto !important;
        padding: 14px !important;
        border-radius: 24px !important;
        border: 1px solid #d8e0ee !important;
        background: rgba(255,255,255,.98) !important;
        box-shadow: 0 22px 65px rgba(15,23,42,.24) !important;
    }

    .mobile-more-head {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        margin-bottom: 12px !important;
    }

    .mobile-more-head strong {
        color: #101828 !important;
        font-size: 16px !important;
        font-weight: 900 !important;
    }

    .mobile-more-close {
        width: 38px !important;
        height: 38px !important;
        border-radius: 999px !important;
        border: 1px solid #d8e0ee !important;
        background: #ffffff !important;
        color: #101828 !important;
        font-size: 24px !important;
        line-height: 1 !important;
        cursor: pointer !important;
    }

    .mobile-more-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .mobile-more-grid a {
        display: flex !important;
        align-items: center !important;
        min-height: 46px !important;
        padding: 0 14px !important;
        border-radius: 16px !important;
        background: #eef4ff !important;
        color: #335075 !important;
        font-size: 14px !important;
        font-weight: 850 !important;
        text-decoration: none !important;
    }

    .mobile-more-grid a:hover,
    .mobile-more-grid a:focus {
        background: #dbeafe !important;
        color: #1d4ed8 !important;
        text-decoration: none !important;
    }

    body.theme-dark .mobile-more-toggle {
        background: #111827 !important;
        border-color: #334155 !important;
    }

    body.theme-dark .mobile-more-toggle span {
        background: #f8fafc !important;
    }

    body.theme-dark .mobile-more-menu {
        background: rgba(0, 0, 0, .28) !important;
    }

    body.theme-dark .mobile-more-panel {
        background: rgba(15,23,42,.98) !important;
        border-color: #334155 !important;
        box-shadow: 0 22px 65px rgba(0,0,0,.42) !important;
    }

    body.theme-dark .mobile-more-head strong {
        color: #f8fafc !important;
    }

    body.theme-dark .mobile-more-close {
        background: #111827 !important;
        border-color: #334155 !important;
        color: #f8fafc !important;
    }

    body.theme-dark .mobile-more-grid a {
        background: #1e293b !important;
        color: #cbd5e1 !important;
    }

    body.theme-dark .mobile-more-grid a:hover,
    body.theme-dark .mobile-more-grid a:focus {
        background: #26344a !important;
        color: #ffffff !important;
    }
}

@media screen and (min-width: 821px) {
    .mobile-more-toggle,
    .mobile-more-menu {
        display: none !important;
    }
}


/* --- Stable Beta 0.4 mobile More arrow repair --- */

/*
Repair version:
- Restores the last known working mobile More menu files.
- Keeps the same working menu JS and panel.
- Uses a text dropdown trigger instead of changing the menu structure.
*/

@media screen and (max-width: 820px) {
    .mobile-more-toggle {
        width: auto !important;
        min-width: 74px !important;
        height: 42px !important;
        min-height: 42px !important;
        padding: 0 12px !important;
        flex-direction: row !important;
        gap: 0 !important;
        font: inherit !important;
    }

    .mobile-more-toggle .mobile-more-arrow-icon {
        display: block !important;
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        background: transparent !important;
        color: #101828 !important;
        font-size: 13px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        letter-spacing: -0.01em !important;
        transform: none !important;
        transition: transform .16s ease !important;
        white-space: nowrap !important;
    }

    .mobile-more-toggle .mobile-more-hidden-line {
        display: none !important;
    }

    .mobile-more-toggle.is-open .mobile-more-arrow-icon {
        transform: none !important;
    }

    body.theme-dark .mobile-more-toggle .mobile-more-arrow-icon {
        background: transparent !important;
        color: #f8fafc !important;
    }
}


/* --- Stable Beta 0.4 combined QR navigation --- */

/*
QR Labels and Made QR codes now appear as one navigation item: QR Codes.
The separate page can still exist internally, but the main nav is cleaner.
*/



/* --- Stable Beta 0.4 Registered QR codes safe repair --- */

/*
Safe repair after the previous label patch:
- Restores the last styled CSS file.
- Removes the old mobile " / labels" suffix.
*/

.mobile-more-grid a[href="qr-labels.php"]::after {
    content: "" !important;
    display: none !important;
}


/* --- Stable Beta 0.4 registered QR page labels --- */

/*
User-facing QR wording is now Registered QR codes.
The underlying filenames stay the same so old links keep working.
*/


/* --- Stable Beta 0.4 registered QR duplicate label fix --- */

/*
Fix is mostly PHP text cleanup.
QR Labels remains the label generator.
Registered QR codes remains the registry/list page.
*/


/* --- Stable Beta 0.4 Registered QR codes layout polish --- */

/*
Registered QR codes page layout:
- Better hero/header balance.
- Summary stats become proper cards.
- Search/management sections align better.
- Mobile remains stacked and readable.
*/

.qr-registry-page {
    max-width: 1240px !important;
    margin: 0 auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

.qr-registry-page > .page-head,
.qr-registry-page .page-head,
.qr-registry-page > header:first-child {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 18px !important;
    align-items: start !important;
    margin-bottom: 22px !important;
}

.qr-registry-page h1 {
    margin-bottom: 8px !important;
}

.qr-registry-page h1 + .muted,
.qr-registry-page h1 + p {
    max-width: 720px !important;
    line-height: 1.55 !important;
}

/* The small count links under the header */
.qr-registry-page h1 ~ p a,
.qr-registry-page > p a {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 38px !important;
    padding: 0 13px !important;
    border-radius: 999px !important;
    background: #eef4ff !important;
    color: #1d4ed8 !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    margin: 4px 8px 4px 0 !important;
}

/* Make the count block feel like a proper dashboard strip */
.qr-registry-page > p:has(a) {
    margin: 18px 0 14px !important;
}

/* Management/search cards should not feel narrow and random */
.qr-registry-page .card {
    max-width: none !important;
}

.qr-registry-page .card:has(input[type="search"]),
.qr-registry-page .card:has(input[name="q"]),
.qr-registry-page .card:has(select[name="filter"]),
.qr-registry-page .card:has(select) {
    margin-top: 20px !important;
}

.qr-registry-page .card h2,
.qr-registry-page .card h3 {
    margin-top: 0 !important;
}

/* Better two-column form feel inside the search panel */
.qr-registry-page .form-grid,
.qr-registry-page form .grid,
.qr-registry-page form {
    gap: 16px !important;
}

.qr-registry-page .btn-row,
.qr-registry-page .form-actions {
    gap: 10px !important;
}

/* Registry table/card spacing */
.qr-registry-page table {
    width: 100% !important;
}

.qr-registry-page .table-wrap,
.qr-registry-page .card:has(table) {
    overflow-x: auto !important;
}

/* Make the top action button feel aligned */
.qr-registry-page .page-actions,
.qr-registry-page .actions {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

/* Dark mode */
body.theme-dark .qr-registry-page h1 ~ p a,
body.theme-dark .qr-registry-page > p a {
    background: #1e293b !important;
    color: #dbeafe !important;
}

@media (min-width: 900px) {
    .qr-registry-page {
        padding-top: 34px !important;
    }

    /* Turn the top count links into a neat row */
    .qr-registry-page h1 ~ p,
    .qr-registry-page > p {
        max-width: 900px !important;
    }
}

@media (max-width: 820px) {
    .qr-registry-page {
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-top: 22px !important;
    }

    .qr-registry-page > .page-head,
    .qr-registry-page .page-head,
    .qr-registry-page > header:first-child {
        grid-template-columns: 1fr !important;
    }

    .qr-registry-page .page-actions,
    .qr-registry-page .actions {
        justify-content: flex-start !important;
    }

    .qr-registry-page h1 ~ p a,
    .qr-registry-page > p a {
        width: 100% !important;
        justify-content: space-between !important;
    }
}



/* --- Stable Beta 0.4 QR nav and rotate image fix --- */

/*
QR Labels remains the label printer.
Registered QR codes remains the registry/list page.
Location image rotation now returns to the visual card and uses filemtime cache busting.
*/

#location-visual {
    scroll-margin-top: 110px;
}

.location-visual-actions form {
    margin: 0;
}


/* --- Stable Beta 0.4 location edit link repair --- */

/*
Location edit links now point to location-edit.php instead of Beta notes.
*/


/* --- Stable Beta 0.4 hard location link repair --- */

/*
Location add/edit links are corrected in PHP and also protected by page-local JS.
This prevents stale or corrupted hrefs sending users to Beta notes.
*/


/* --- Stable Beta 0.4 release label --- */

.beta-badge {
    white-space: nowrap;
}

.auth-panel.auth-copy .eyebrow,
.auth-body .eyebrow,
.auth-brand,
.brand-name {
    font-family: inherit;
}



/* --- Stable Beta 0.4 badge duplicate fix --- */

.beta-badge {
    text-transform: uppercase;
    white-space: nowrap;
}


/* --- Stable Beta 0.4 QR label size/style fix --- */

/*
QR Labels page now controls physical QR size using mm-based CSS and JS.
Quantity is compacted and QR style options are available:
Standard, Branded ItemID centre, Rounded, Dot style.
*/


/* --- Stable Beta 0.4 10mm QR size option --- */

/*
Adds a 10mm Tiny QR size.
Tiny QR codes are useful for small labels, but should be test-scanned after printing.
*/

@media screen, print {
    .print-label-card {
        min-width: calc(var(--qr-mm) + 16mm);
    }

    .qr-wrap[data-mm="10"] + .print-code {
        overflow-wrap: anywhere;
        font-size: 10px;
        letter-spacing: .02em;
    }

    .qr-wrap[data-mm="10"] .qr-centre-badge {
        min-width: 6mm;
        height: 3.2mm;
        font-size: 1.55mm;
        border-radius: 1mm;
        padding: 0 .8mm;
    }
}


/* --- QR label custom printed fields --- */

/*
QR code links remain canonical.
Printed labels can show selected record fields such as location and notes.
*/


/* ===== Stable Beta 0.6 latest global CSS overrides ===== */



/* ===== CSS from itemid_beta_0_3_clean_reupload.zip ===== */

:root{
  --bg:#f5f7fb;--bg2:#eef4ff;--card:#fff;--text:#101828;--muted:#667085;--line:#d9e1ec;
  --blue:#2563eb;--blue-dark:#1d4ed8;--blue2:#eff4ff;--green:#12b76a;--amber:#f79009;--danger:#b42318;
  --shadow:0 18px 45px rgba(15,23,42,.08);--radius:18px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:linear-gradient(180deg,#f8fbff 0%,var(--bg) 260px);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Arial,sans-serif;font-size:15px;line-height:1.5}a{color:var(--blue-dark);text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3{letter-spacing:-.04em;line-height:1.15;margin:0 0 10px}h1{font-size:34px}h2{font-size:28px}h3{font-size:19px}.muted{color:var(--muted)}.big{font-size:17px;line-height:1.65}.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:22px;padding:14px 24px;background:rgba(255,255,255,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}.brand{display:inline-flex;gap:10px;align-items:center;color:var(--text);font-weight:900;font-size:21px}.brand:hover{text-decoration:none}.brand-mark{width:34px;height:34px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;background:#111827;color:white;font-size:13px;letter-spacing:-.04em}.main-nav{display:flex;align-items:center;gap:4px;flex:1;flex-wrap:wrap}.main-nav a{color:#344054;padding:9px 10px;border-radius:10px;font-weight:700;font-size:14px}.main-nav a:hover{background:var(--blue2);text-decoration:none}.top-actions{display:flex;align-items:center;gap:12px}.muted-link{color:var(--muted);font-weight:700}.page{max-width:1180px;margin:0 auto;padding:28px 22px 60px}.site-footer{max-width:1180px;margin:0 auto;padding:22px;color:var(--muted);border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px}.page-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin:0 0 20px}.page-head p{margin:4px 0 0}.card{background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:18px;box-shadow:0 10px 30px rgba(15,23,42,.045)}.hero{display:grid;grid-template-columns:2fr 1fr;gap:18px;margin-bottom:18px}.hero .card:first-child{background:linear-gradient(135deg,#fff 0%,#f4f7ff 100%)}.grid{display:grid;gap:18px}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.cards4{grid-template-columns:repeat(4,minmax(0,1fr))}.cards4 .card{margin:0}.cards4 h2{font-size:34px;margin-top:6px}.wide{max-width:920px}.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;background:var(--blue);color:white;padding:11px 16px;font-weight:900;cursor:pointer;text-decoration:none;box-shadow:0 8px 18px rgba(37,99,235,.18);font:inherit}.btn:hover{text-decoration:none;background:var(--blue-dark)}.btn.secondary{background:#e8efff;color:var(--blue-dark);box-shadow:none}.btn.secondary:hover{background:#dbe7ff}.btn.ghost{background:white;color:#344054;border:1px solid var(--line);box-shadow:none}.btn.small{padding:8px 12px;border-radius:10px;font-size:14px}.scan-link{background:#111827;color:#fff!important}.form{display:grid;gap:15px}.form label{display:grid;gap:7px;color:#344054;font-size:14px;font-weight:700}.form input,.form select,.form textarea,.searchbar input,.inline-form input,.inline-form select{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px 13px;background:white;color:var(--text);font:inherit;outline:none}.form input:focus,.form select:focus,.form textarea:focus,.searchbar input:focus,.inline-form input:focus,.inline-form select:focus{border-color:#9db7ff;box-shadow:0 0 0 4px rgba(37,99,235,.10)}.searchbar,.inline-form{display:flex;gap:10px;margin-bottom:18px}.table-wrap{overflow:auto;padding:0}table{width:100%;border-collapse:collapse;min-width:720px}th,td{text-align:left;border-bottom:1px solid var(--line);padding:14px 16px;vertical-align:top}th{font-size:12px;color:var(--muted);font-weight:900;text-transform:uppercase;letter-spacing:.05em;background:#fbfcff}tr:hover td{background:#fbfdff}.pill{display:inline-flex;background:var(--blue2);color:var(--blue-dark);border-radius:999px;padding:4px 9px;font-size:13px;font-weight:900}.pill.low,.pill.Empty,.pill.Missing{background:#fff4ed;color:#b54708}.visual{max-width:100%;border-radius:14px;border:1px solid var(--line);box-shadow:0 8px 20px rgba(15,23,42,.06)}.qr-box{display:inline-block;background:white;padding:12px;border:1px solid var(--line);border-radius:14px}.code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:900;background:#f2f4f7;border:1px solid #e4e7ec;border-radius:10px;padding:4px 8px;display:inline-block}.labels{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.label{background:#fff;border:1px solid #111;border-radius:6px;text-align:center;padding:11px;break-inside:avoid}.label .qr{display:inline-block}.label-toolbar{margin:12px 0}.check{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center;gap:8px!important}.alert{background:#fef3f2;color:var(--danger);border:1px solid #fecdca;border-radius:12px;padding:11px 13px;font-weight:700}.notice{background:#eff8ff;color:#175cd3;border:1px solid #b2ddff;border-radius:12px;padding:11px 13px;font-weight:700}.empty{padding:24px;border:1px dashed var(--line);border-radius:14px;background:#fbfcff;color:var(--muted)}
/* Auth */.auth-body{min-height:100vh!important;display:grid!important;place-items:center!important;padding:28px;background:radial-gradient(circle at top left,rgba(37,99,235,.16),transparent 34%),radial-gradient(circle at bottom right,rgba(16,185,129,.10),transparent 28%),var(--bg)}.auth-shell{width:min(980px,100%);display:grid;grid-template-columns:1.15fr .85fr;gap:18px;align-items:stretch}.auth-panel{background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow)}.auth-copy{padding:36px;display:flex;flex-direction:column;justify-content:center;min-height:440px}.logo-mark{width:54px;height:54px;border-radius:16px;background:#111827;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;letter-spacing:-.04em;margin-bottom:22px}.eyebrow{font-weight:900;color:var(--blue);letter-spacing:.08em;text-transform:uppercase;font-size:13px;margin:0 0 10px}.auth-copy h1{font-size:46px;letter-spacing:-.055em;line-height:1.02;margin:0 0 16px;max-width:620px}.auth-copy .big{font-size:17px;line-height:1.6;max-width:600px;margin:0 0 22px}.feature-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}.feature-list span{background:var(--blue2);color:var(--blue-dark);border:1px solid #dbe7ff;border-radius:999px;padding:8px 11px;font-weight:900;font-size:13px}.auth-card{width:auto!important;padding:30px;display:flex;flex-direction:column;justify-content:center}.auth-card h2{font-size:30px;margin:0 0 8px}.auth-card .muted{margin-top:0;margin-bottom:20px}.auth-card input{height:46px}.subtle-link{font-size:14px;font-weight:800;justify-self:start}.auth-card .actions{margin-top:2px}
@media(max-width:900px){.topbar{align-items:flex-start;flex-direction:column}.top-actions{width:100%;justify-content:space-between}.hero,.grid.two,.grid.cards4{grid-template-columns:1fr}.page-head{display:block}.searchbar,.inline-form{flex-direction:column}.labels{grid-template-columns:repeat(2,1fr)}.auth-shell{grid-template-columns:1fr}.auth-copy{min-height:0;padding:24px}.auth-copy h1{font-size:34px}.auth-card{padding:24px}.site-footer{flex-direction:column}}@media print{body{background:white}.topbar,.page-head,.card:not(.table-wrap),.label-toolbar,.site-footer{display:none!important}.page{padding:0}.labels{grid-template-columns:repeat(4,1fr);gap:8px}.label{page-break-inside:avoid;box-shadow:none}}

/* ItemID QR/template patch */
.section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}.section-head h2{font-size:22px;margin:0 0 4px}.field-builder{display:grid;gap:14px;border:1px solid var(--line);border-radius:16px;padding:16px;background:#fbfcff}.quick-fields{display:flex;gap:8px;flex-wrap:wrap}.field-chip{border:1px solid #dbe7ff;background:#eff4ff;color:#1d4ed8;border-radius:999px;padding:7px 10px;font-weight:800;cursor:pointer}.field-chip:hover{background:#dbe7ff}.fields-list{display:grid;gap:10px}.field-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}.label-sheet{display:grid;grid-template-columns:repeat(var(--label-columns,4),minmax(0,1fr));gap:12px}.print-label-card{background:#fff;border:1px solid #111827;border-radius:10px;text-align:center;padding:12px;break-inside:avoid;min-height:calc(var(--qr-size,120px) + 62px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px}.print-label-card .qr{display:inline-flex;align-items:center;justify-content:center}.print-label-card .print-code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:15px;font-weight:900;letter-spacing:.06em}.print-label-card .print-name{font-size:12px;font-weight:800;color:#344054;line-height:1.25}.row-actions{display:flex;gap:12px;white-space:nowrap}.qr-size-form select{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px 13px;background:white;color:var(--text);font:inherit;outline:none}@media(max-width:700px){.field-row{grid-template-columns:1fr}.label-sheet{grid-template-columns:repeat(2,minmax(0,1fr))}.row-actions{display:grid;gap:6px}}

/* ItemID workflow polish patch */
.mini-action{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;border-radius:10px;padding:7px 10px;font-weight:900;color:#1d4ed8;text-decoration:none;white-space:nowrap}.mini-action:hover{background:#eff4ff;text-decoration:none}.pretty-fields{gap:18px}.pretty-list{gap:12px}.pretty-row{grid-template-columns:1fr 42px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px}.pretty-row input{border:0!important;box-shadow:none!important;padding:9px 10px!important}.icon-button{width:34px;height:34px;border:0;border-radius:10px;background:#f2f4f7;color:#344054;font-size:22px;line-height:1;cursor:pointer;font-weight:900}.icon-button:hover{background:#fee4e2;color:#b42318}.community-check{align-self:end;background:#fbfcff;border:1px solid var(--line);border-radius:14px;padding:12px}.community-check span{display:grid;gap:2px}.community-check small{color:var(--muted);font-weight:600}.field-chip{font-size:13px}.print-label-card{min-height:calc(var(--qr-mm,35mm) + 22mm);padding:8mm 4mm}.print-label-card .print-name{max-width:100%;overflow-wrap:anywhere}.custom-prefix-row{display:none}.item-hero{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.item-hero h2{font-size:24px;margin:4px 0 0}.activity-line{border-bottom:1px solid var(--line);padding:0 0 10px;margin:0 0 10px}.qr-size-form{margin-top:14px;display:flex;gap:10px;align-items:end;flex-wrap:wrap}.qr-size-form label{min-width:190px}.add-item-flow{gap:20px}.flow-step{display:flex;gap:14px;align-items:flex-start;border-top:1px solid var(--line);padding-top:18px}.flow-step:first-of-type{border-top:0;padding-top:0}.flow-step h2{font-size:22px;margin:0 0 4px}.step-badge{width:34px;height:34px;border-radius:999px;background:#111827;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:900;flex:0 0 auto}.field-as-card{border:1px dashed #b7c5df;border-radius:14px;padding:13px;background:#fbfcff}.field-as-card p{margin:4px 0 10px}.code-pill{display:inline-flex;background:#f2f4f7;border:1px solid #e4e7ec;border-radius:10px;padding:5px 9px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:900}@media(max-width:800px){.item-hero{grid-template-columns:1fr}.pretty-row{grid-template-columns:1fr 42px}.qr-size-form{display:grid}.flow-step{display:grid}.field-as-card .btn{width:100%}}


/* ItemID workflow patch 2 */
.beta-badge{display:inline-flex;align-items:center;border:1px solid #c7d7fe;background:#eff4ff;color:#1d4ed8;border-radius:999px;padding:2px 7px;font-size:11px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;line-height:1.4}.template-create-card{display:flex;align-items:center;justify-content:space-between;gap:14px}.template-create-card p{margin:3px 0 0}.compact-check{width:auto!important;display:flex!important;grid-template-columns:auto 1fr!important;align-items:center!important;gap:8px!important;min-width:170px}.compact-check input{width:auto!important}.qr-box canvas,.qr-box img{display:block!important;max-width:100%!important;max-height:100%!important}.print-label-card{overflow:hidden}.print-label-card .dynamic-qr canvas,.print-label-card .dynamic-qr img{display:block!important}.print-label-card .print-code,.print-label-card .print-name{max-width:100%;overflow-wrap:anywhere}.single-print-label{overflow:hidden}@media(max-width:800px){.template-create-card{display:grid}.compact-check{min-width:0}}

/* Items table action-cell border fix */
td.row-actions,
th.row-actions {
    display: table-cell !important;
    white-space: nowrap;
    vertical-align: middle;
    border-bottom: 1px solid var(--line) !important;
}

td.row-actions {
    min-width: 230px;
}

td.row-actions .mini-action {
    margin-right: 8px;
    margin-bottom: 0;
}

td.row-actions .mini-action:last-child {
    margin-right: 0;
}

tr:hover td.row-actions {
    background: #fbfdff;
}

@media (max-width: 760px) {
    td.row-actions {
        min-width: 170px;
    }

    td.row-actions .mini-action {
        display: flex;
        width: 100%;
        margin-right: 0;
        margin-bottom: 6px;
    }

    td.row-actions .mini-action:last-child {
        margin-bottom: 0;
    }
}

/* Stable Beta 0.4 additions */
.btn.danger,
.btn.danger.ghost {
  color: #b42318 !important;
  border-color: #fecdca !important;
  background: #fff !important;
  box-shadow: none !important;
}
.btn.danger:hover,
.btn.danger.ghost:hover {
  background: #fef3f2 !important;
  text-decoration: none;
}
.mini-action.danger {
  color: #b42318 !important;
  border-color: #fecdca !important;
  background: #fff !important;
}
.export-card {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.export-card:hover {
  transform: translateY(-2px);
  text-decoration: none;
  border-color: #b8c7e6;
  box-shadow: 0 18px 42px rgba(15,23,42,.09);
}
.site-footer a { color: inherit; font-weight: 800; }

/* Stable Beta 0.4 template/item field builder polish */
.item-template-field-row {
    display: grid;
    grid-template-columns: minmax(150px, .35fr) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 12px;
    border: 1px solid #d8e0ee;
    border-radius: 14px;
    background: #ffffff;
    margin-bottom: 10px;
}

.template-field-input-wrap {
    display: grid;
    gap: 6px;
}

.template-field-input-wrap input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    margin: 8px 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.field-unit-hint {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 9px;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 900;
}

.small {
    font-size: 12px;
}

@media (max-width: 700px) {
    .item-template-field-row {
        grid-template-columns: 1fr;
    }
}

/* --- Profile/preferences patch CSS --- */

/* Profile and preferences */
.profile-settings-row {
    display: grid;
    grid-template-columns: 112px 1fr;
    gap: 22px;
    align-items: center;
    margin-bottom: 20px;
}

.profile-settings-avatar {
    width: 96px;
    height: 96px;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid #d8e0ee;
    background: #eef4ff;
    color: #1d4ed8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    font-weight: 900;
}

.profile-settings-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.checkbox-line {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    font-weight: 800;
}

.checkbox-line input,
.checkbox-card input {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.checkbox-card {
    min-height: 70px;
    border: 1px solid #d8e0ee;
    border-radius: 14px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}

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

.checkbox-card small {
    margin-top: 4px;
    color: #64748b;
}

@media (max-width: 650px) {
    .profile-settings-row {
        grid-template-columns: 1fr;
    }
}



/* ===== CSS from itemid_qr_nav_rotate_fix_patch.zip ===== */

:root{
  --bg:#f5f7fb;--bg2:#eef4ff;--card:#fff;--text:#101828;--muted:#667085;--line:#d9e1ec;
  --blue:#2563eb;--blue-dark:#1d4ed8;--blue2:#eff4ff;--green:#12b76a;--amber:#f79009;--danger:#b42318;
  --shadow:0 18px 45px rgba(15,23,42,.08);--radius:18px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:linear-gradient(180deg,#f8fbff 0%,var(--bg) 260px);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Arial,sans-serif;font-size:15px;line-height:1.5}a{color:var(--blue-dark);text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3{letter-spacing:-.04em;line-height:1.15;margin:0 0 10px}h1{font-size:34px}h2{font-size:28px}h3{font-size:19px}.muted{color:var(--muted)}.big{font-size:17px;line-height:1.65}.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:22px;padding:14px 24px;background:rgba(255,255,255,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}.brand{display:inline-flex;gap:10px;align-items:center;color:var(--text);font-weight:900;font-size:21px}.brand:hover{text-decoration:none}.brand-mark{width:34px;height:34px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;background:#111827;color:white;font-size:13px;letter-spacing:-.04em}.main-nav{display:flex;align-items:center;gap:4px;flex:1;flex-wrap:wrap}.main-nav a{color:#344054;padding:9px 10px;border-radius:10px;font-weight:700;font-size:14px}.main-nav a:hover{background:var(--blue2);text-decoration:none}.top-actions{display:flex;align-items:center;gap:12px}.muted-link{color:var(--muted);font-weight:700}.page{max-width:1180px;margin:0 auto;padding:28px 22px 60px}.site-footer{max-width:1180px;margin:0 auto;padding:22px;color:var(--muted);border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px}.page-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin:0 0 20px}.page-head p{margin:4px 0 0}.card{background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:18px;box-shadow:0 10px 30px rgba(15,23,42,.045)}.hero{display:grid;grid-template-columns:2fr 1fr;gap:18px;margin-bottom:18px}.hero .card:first-child{background:linear-gradient(135deg,#fff 0%,#f4f7ff 100%)}.grid{display:grid;gap:18px}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.cards4{grid-template-columns:repeat(4,minmax(0,1fr))}.cards4 .card{margin:0}.cards4 h2{font-size:34px;margin-top:6px}.wide{max-width:920px}.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;background:var(--blue);color:white;padding:11px 16px;font-weight:900;cursor:pointer;text-decoration:none;box-shadow:0 8px 18px rgba(37,99,235,.18);font:inherit}.btn:hover{text-decoration:none;background:var(--blue-dark)}.btn.secondary{background:#e8efff;color:var(--blue-dark);box-shadow:none}.btn.secondary:hover{background:#dbe7ff}.btn.ghost{background:white;color:#344054;border:1px solid var(--line);box-shadow:none}.btn.small{padding:8px 12px;border-radius:10px;font-size:14px}.scan-link{background:#111827;color:#fff!important}.form{display:grid;gap:15px}.form label{display:grid;gap:7px;color:#344054;font-size:14px;font-weight:700}.form input,.form select,.form textarea,.searchbar input,.inline-form input,.inline-form select{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px 13px;background:white;color:var(--text);font:inherit;outline:none}.form input:focus,.form select:focus,.form textarea:focus,.searchbar input:focus,.inline-form input:focus,.inline-form select:focus{border-color:#9db7ff;box-shadow:0 0 0 4px rgba(37,99,235,.10)}.searchbar,.inline-form{display:flex;gap:10px;margin-bottom:18px}.table-wrap{overflow:auto;padding:0}table{width:100%;border-collapse:collapse;min-width:720px}th,td{text-align:left;border-bottom:1px solid var(--line);padding:14px 16px;vertical-align:top}th{font-size:12px;color:var(--muted);font-weight:900;text-transform:uppercase;letter-spacing:.05em;background:#fbfcff}tr:hover td{background:#fbfdff}.pill{display:inline-flex;background:var(--blue2);color:var(--blue-dark);border-radius:999px;padding:4px 9px;font-size:13px;font-weight:900}.pill.low,.pill.Empty,.pill.Missing{background:#fff4ed;color:#b54708}.visual{max-width:100%;border-radius:14px;border:1px solid var(--line);box-shadow:0 8px 20px rgba(15,23,42,.06)}.qr-box{display:inline-block;background:white;padding:12px;border:1px solid var(--line);border-radius:14px}.code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:900;background:#f2f4f7;border:1px solid #e4e7ec;border-radius:10px;padding:4px 8px;display:inline-block}.labels{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.label{background:#fff;border:1px solid #111;border-radius:6px;text-align:center;padding:11px;break-inside:avoid}.label .qr{display:inline-block}.label-toolbar{margin:12px 0}.check{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center;gap:8px!important}.alert{background:#fef3f2;color:var(--danger);border:1px solid #fecdca;border-radius:12px;padding:11px 13px;font-weight:700}.notice{background:#eff8ff;color:#175cd3;border:1px solid #b2ddff;border-radius:12px;padding:11px 13px;font-weight:700}.empty{padding:24px;border:1px dashed var(--line);border-radius:14px;background:#fbfcff;color:var(--muted)}
/* Auth */.auth-body{min-height:100vh!important;display:grid!important;place-items:center!important;padding:28px;background:radial-gradient(circle at top left,rgba(37,99,235,.16),transparent 34%),radial-gradient(circle at bottom right,rgba(16,185,129,.10),transparent 28%),var(--bg)}.auth-shell{width:min(980px,100%);display:grid;grid-template-columns:1.15fr .85fr;gap:18px;align-items:stretch}.auth-panel{background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow)}.auth-copy{padding:36px;display:flex;flex-direction:column;justify-content:center;min-height:440px}.logo-mark{width:54px;height:54px;border-radius:16px;background:#111827;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;letter-spacing:-.04em;margin-bottom:22px}.eyebrow{font-weight:900;color:var(--blue);letter-spacing:.08em;text-transform:uppercase;font-size:13px;margin:0 0 10px}.auth-copy h1{font-size:46px;letter-spacing:-.055em;line-height:1.02;margin:0 0 16px;max-width:620px}.auth-copy .big{font-size:17px;line-height:1.6;max-width:600px;margin:0 0 22px}.feature-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}.feature-list span{background:var(--blue2);color:var(--blue-dark);border:1px solid #dbe7ff;border-radius:999px;padding:8px 11px;font-weight:900;font-size:13px}.auth-card{width:auto!important;padding:30px;display:flex;flex-direction:column;justify-content:center}.auth-card h2{font-size:30px;margin:0 0 8px}.auth-card .muted{margin-top:0;margin-bottom:20px}.auth-card input{height:46px}.subtle-link{font-size:14px;font-weight:800;justify-self:start}.auth-card .actions{margin-top:2px}
@media(max-width:900px){.topbar{align-items:flex-start;flex-direction:column}.top-actions{width:100%;justify-content:space-between}.hero,.grid.two,.grid.cards4{grid-template-columns:1fr}.page-head{display:block}.searchbar,.inline-form{flex-direction:column}.labels{grid-template-columns:repeat(2,1fr)}.auth-shell{grid-template-columns:1fr}.auth-copy{min-height:0;padding:24px}.auth-copy h1{font-size:34px}.auth-card{padding:24px}.site-footer{flex-direction:column}}@media print{body{background:white}.topbar,.page-head,.card:not(.table-wrap),.label-toolbar,.site-footer{display:none!important}.page{padding:0}.labels{grid-template-columns:repeat(4,1fr);gap:8px}.label{page-break-inside:avoid;box-shadow:none}}

/* ItemID QR/template patch */
.section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}.section-head h2{font-size:22px;margin:0 0 4px}.field-builder{display:grid;gap:14px;border:1px solid var(--line);border-radius:16px;padding:16px;background:#fbfcff}.quick-fields{display:flex;gap:8px;flex-wrap:wrap}.field-chip{border:1px solid #dbe7ff;background:#eff4ff;color:#1d4ed8;border-radius:999px;padding:7px 10px;font-weight:800;cursor:pointer}.field-chip:hover{background:#dbe7ff}.fields-list{display:grid;gap:10px}.field-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}.label-sheet{display:grid;grid-template-columns:repeat(var(--label-columns,4),minmax(0,1fr));gap:12px}.print-label-card{background:#fff;border:1px solid #111827;border-radius:10px;text-align:center;padding:12px;break-inside:avoid;min-height:calc(var(--qr-size,120px) + 62px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px}.print-label-card .qr{display:inline-flex;align-items:center;justify-content:center}.print-label-card .print-code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:15px;font-weight:900;letter-spacing:.06em}.print-label-card .print-name{font-size:12px;font-weight:800;color:#344054;line-height:1.25}.row-actions{display:flex;gap:12px;white-space:nowrap}.qr-size-form select{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px 13px;background:white;color:var(--text);font:inherit;outline:none}@media(max-width:700px){.field-row{grid-template-columns:1fr}.label-sheet{grid-template-columns:repeat(2,minmax(0,1fr))}.row-actions{display:grid;gap:6px}}

/* ItemID workflow polish patch */
.mini-action{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;border-radius:10px;padding:7px 10px;font-weight:900;color:#1d4ed8;text-decoration:none;white-space:nowrap}.mini-action:hover{background:#eff4ff;text-decoration:none}.pretty-fields{gap:18px}.pretty-list{gap:12px}.pretty-row{grid-template-columns:1fr 42px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px}.pretty-row input{border:0!important;box-shadow:none!important;padding:9px 10px!important}.icon-button{width:34px;height:34px;border:0;border-radius:10px;background:#f2f4f7;color:#344054;font-size:22px;line-height:1;cursor:pointer;font-weight:900}.icon-button:hover{background:#fee4e2;color:#b42318}.community-check{align-self:end;background:#fbfcff;border:1px solid var(--line);border-radius:14px;padding:12px}.community-check span{display:grid;gap:2px}.community-check small{color:var(--muted);font-weight:600}.field-chip{font-size:13px}.print-label-card{min-height:calc(var(--qr-mm,35mm) + 22mm);padding:8mm 4mm}.print-label-card .print-name{max-width:100%;overflow-wrap:anywhere}.custom-prefix-row{display:none}.item-hero{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.item-hero h2{font-size:24px;margin:4px 0 0}.activity-line{border-bottom:1px solid var(--line);padding:0 0 10px;margin:0 0 10px}.qr-size-form{margin-top:14px;display:flex;gap:10px;align-items:end;flex-wrap:wrap}.qr-size-form label{min-width:190px}.add-item-flow{gap:20px}.flow-step{display:flex;gap:14px;align-items:flex-start;border-top:1px solid var(--line);padding-top:18px}.flow-step:first-of-type{border-top:0;padding-top:0}.flow-step h2{font-size:22px;margin:0 0 4px}.step-badge{width:34px;height:34px;border-radius:999px;background:#111827;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:900;flex:0 0 auto}.field-as-card{border:1px dashed #b7c5df;border-radius:14px;padding:13px;background:#fbfcff}.field-as-card p{margin:4px 0 10px}.code-pill{display:inline-flex;background:#f2f4f7;border:1px solid #e4e7ec;border-radius:10px;padding:5px 9px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:900}@media(max-width:800px){.item-hero{grid-template-columns:1fr}.pretty-row{grid-template-columns:1fr 42px}.qr-size-form{display:grid}.flow-step{display:grid}.field-as-card .btn{width:100%}}


/* ItemID workflow patch 2 */
.beta-badge{display:inline-flex;align-items:center;border:1px solid #c7d7fe;background:#eff4ff;color:#1d4ed8;border-radius:999px;padding:2px 7px;font-size:11px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;line-height:1.4}.template-create-card{display:flex;align-items:center;justify-content:space-between;gap:14px}.template-create-card p{margin:3px 0 0}.compact-check{width:auto!important;display:flex!important;grid-template-columns:auto 1fr!important;align-items:center!important;gap:8px!important;min-width:170px}.compact-check input{width:auto!important}.qr-box canvas,.qr-box img{display:block!important;max-width:100%!important;max-height:100%!important}.print-label-card{overflow:hidden}.print-label-card .dynamic-qr canvas,.print-label-card .dynamic-qr img{display:block!important}.print-label-card .print-code,.print-label-card .print-name{max-width:100%;overflow-wrap:anywhere}.single-print-label{overflow:hidden}@media(max-width:800px){.template-create-card{display:grid}.compact-check{min-width:0}}

/* Items table action-cell border fix */
td.row-actions,
th.row-actions {
    display: table-cell !important;
    white-space: nowrap;
    vertical-align: middle;
    border-bottom: 1px solid var(--line) !important;
}

td.row-actions {
    min-width: 230px;
}

td.row-actions .mini-action {
    margin-right: 8px;
    margin-bottom: 0;
}

td.row-actions .mini-action:last-child {
    margin-right: 0;
}

tr:hover td.row-actions {
    background: #fbfdff;
}

@media (max-width: 760px) {
    td.row-actions {
        min-width: 170px;
    }

    td.row-actions .mini-action {
        display: flex;
        width: 100%;
        margin-right: 0;
        margin-bottom: 6px;
    }

    td.row-actions .mini-action:last-child {
        margin-bottom: 0;
    }
}

/* Stable Beta 0.4 additions */
.btn.danger,
.btn.danger.ghost {
  color: #b42318 !important;
  border-color: #fecdca !important;
  background: #fff !important;
  box-shadow: none !important;
}
.btn.danger:hover,
.btn.danger.ghost:hover {
  background: #fef3f2 !important;
  text-decoration: none;
}
.mini-action.danger {
  color: #b42318 !important;
  border-color: #fecdca !important;
  background: #fff !important;
}
.export-card {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.export-card:hover {
  transform: translateY(-2px);
  text-decoration: none;
  border-color: #b8c7e6;
  box-shadow: 0 18px 42px rgba(15,23,42,.09);
}
.site-footer a { color: inherit; font-weight: 800; }

/* Stable Beta 0.4 template/item field builder polish */
.item-template-field-row {
    display: grid;
    grid-template-columns: minmax(150px, .35fr) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 12px;
    border: 1px solid #d8e0ee;
    border-radius: 14px;
    background: #ffffff;
    margin-bottom: 10px;
}

.template-field-input-wrap {
    display: grid;
    gap: 6px;
}

.template-field-input-wrap input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    margin: 8px 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.field-unit-hint {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 9px;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 900;
}

.small {
    font-size: 12px;
}

@media (max-width: 700px) {
    .item-template-field-row {
        grid-template-columns: 1fr;
    }
}

/* --- Profile/preferences patch CSS --- */

/* Profile and preferences */
.profile-settings-row {
    display: grid;
    grid-template-columns: 112px 1fr;
    gap: 22px;
    align-items: center;
    margin-bottom: 20px;
}

.profile-settings-avatar {
    width: 96px;
    height: 96px;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid #d8e0ee;
    background: #eef4ff;
    color: #1d4ed8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    font-weight: 900;
}

.profile-settings-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.checkbox-line {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    font-weight: 800;
}

.checkbox-line input,
.checkbox-card input {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.checkbox-card {
    min-height: 70px;
    border: 1px solid #d8e0ee;
    border-radius: 14px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}

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

.checkbox-card small {
    margin-top: 4px;
    color: #64748b;
}

@media (max-width: 650px) {
    .profile-settings-row {
        grid-template-columns: 1fr;
    }
}


/* --- Stable Beta 0.4 theme toggle + dark fix --- */

.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,255,255,.94);
    border-bottom: 1px solid #d8e0ee;
    backdrop-filter: blur(14px);
}

.topbar-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    gap: 22px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #0f172a;
    flex: 0 0 auto;
}

.brand:hover {
    text-decoration: none;
}

.brand-name {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1;
}

.beta-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 19px;
    padding: 0 7px;
    border: 1px solid #b8c7e6;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    white-space: nowrap;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 auto;
    min-width: 0;
}

.main-nav a {
    color: #335075;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
}

.main-nav a:hover {
    color: #2563eb;
    text-decoration: none;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

.scan-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 16px;
    border-radius: 12px;
    background: #111827;
    color: #ffffff !important;
    text-decoration: none;
    font-weight: 800;
    font-size: 14px;
    box-shadow: 0 10px 24px rgba(17, 24, 39, .18);
}

.scan-button:hover {
    text-decoration: none;
}

.profile-menu {
    position: relative;
}

.profile-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 4px 8px 4px 4px;
    border: 1px solid #d8e0ee;
    border-radius: 999px;
    background: #ffffff;
    color: #0f172a;
    text-decoration: none;
    font-weight: 800;
    cursor: pointer;
    max-width: 260px;
}

.profile-avatar {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    object-fit: cover;
    background: #eef4ff;
    color: #1d4ed8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    border: 1px solid #c9d7f2;
    overflow: hidden;
    flex: 0 0 auto;
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-label {
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.profile-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 280px;
    border: 1px solid #d8e0ee;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .16);
    padding: 10px;
    display: none;
}

.profile-menu:hover .profile-dropdown,
.profile-menu:focus-within .profile-dropdown {
    display: block;
}

.profile-dropdown-header {
    padding: 10px;
    border-bottom: 1px solid #edf2f7;
    margin-bottom: 8px;
}

.profile-dropdown-header strong,
.profile-dropdown-header span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-dropdown-header span {
    color: #64748b;
    font-size: 13px;
    margin-top: 2px;
}

.profile-dropdown a {
    display: block;
    padding: 10px;
    border-radius: 12px;
    color: #334155;
    text-decoration: none;
    font-weight: 800;
}

.profile-dropdown a:hover {
    background: #f1f5f9;
    color: #0f172a;
    text-decoration: none;
}

.theme-toggle-form {
    margin: 0;
}

.theme-toggle {
    width: 62px;
    height: 34px;
    border: 1px solid #d8e0ee;
    border-radius: 999px;
    background: #eef4ff;
    position: relative;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    box-shadow: none;
}

.theme-toggle-bulb {
    position: absolute;
    left: 8px;
    font-size: 15px;
    line-height: 1;
    z-index: 2;
    opacity: .8;
}

.theme-toggle-knob {
    position: absolute;
    left: 3px;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 3px 10px rgba(15,23,42,.18);
    transition: transform .16s ease;
}

.theme-toggle.is-dark {
    background: #172554;
    border-color: #2563eb;
}

.theme-toggle.is-dark .theme-toggle-bulb {
    left: 36px;
    opacity: 1;
}

.theme-toggle.is-dark .theme-toggle-knob {
    transform: translateX(28px);
    background: #0f172a;
}

.app-shell {
    max-width: 1240px;
    margin: 0 auto;
    padding: 28px 18px 48px;
}

/* Dark theme variables and hard overrides */
body.theme-dark {
    --bg:#0b1220;
    --bg2:#0f172a;
    --card:#111827;
    --text:#f8fafc;
    --muted:#a8b6ca;
    --line:#334155;
    --blue2:#172554;
    background: #0b1220 !important;
    color: #f8fafc !important;
    color-scheme: dark;
}

body.theme-dark .topbar {
    background: rgba(15, 23, 42, .96) !important;
    border-bottom-color: #334155 !important;
}

body.theme-dark .brand,
body.theme-dark .brand-name,
body.theme-dark .profile-label {
    color: #f8fafc !important;
}

body.theme-dark .beta-badge {
    background: #172554 !important;
    border-color: #2563eb !important;
    color: #bfdbfe !important;
}

body.theme-dark .main-nav a {
    color: #cbd5e1 !important;
}

body.theme-dark .main-nav a:hover {
    background: #1e293b !important;
    color: #ffffff !important;
}

body.theme-dark .profile-trigger,
body.theme-dark .profile-dropdown,
body.theme-dark .card,
body.theme-dark section.card,
body.theme-dark form.card,
body.theme-dark details.card,
body.theme-dark .table-wrap,
body.theme-dark .metric-card,
body.theme-dark .filter-panel,
body.theme-dark .template-field-card,
body.theme-dark .template-field-row,
body.theme-dark .location-summary,
body.theme-dark .auth-panel {
    background: #111827 !important;
    background-color: #111827 !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
    box-shadow: 0 18px 45px rgba(0,0,0,.22) !important;
}

body.theme-dark .hero .card:first-child {
    background: linear-gradient(135deg, #111827 0%, #172033 100%) !important;
}

body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark strong,
body.theme-dark label,
body.theme-dark th,
body.theme-dark td {
    color: #f8fafc !important;
}

body.theme-dark .muted,
body.theme-dark .help,
body.theme-dark small,
body.theme-dark .site-footer,
body.theme-dark .metric-card span {
    color: #a8b6ca !important;
}

body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

body.theme-dark input::placeholder,
body.theme-dark textarea::placeholder {
    color: #74839a !important;
}

body.theme-dark table,
body.theme-dark tbody,
body.theme-dark tr {
    background: #111827 !important;
    color: #f8fafc !important;
}

body.theme-dark thead,
body.theme-dark th {
    background: #0f172a !important;
    color: #cbd5e1 !important;
}

body.theme-dark td {
    background: #111827 !important;
    color: #e5edf8 !important;
    border-color: #334155 !important;
}

body.theme-dark tr:hover td {
    background: #172033 !important;
}

body.theme-dark .code-pill,
body.theme-dark .badge,
body.theme-dark .pill,
body.theme-dark .status-pill,
body.theme-dark .tag,
body.theme-dark .field-unit-hint {
    background: #1e293b !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}

body.theme-dark .btn.secondary,
body.theme-dark .btn.ghost,
body.theme-dark a.btn.secondary,
body.theme-dark a.btn.ghost {
    background: #1e293b !important;
    color: #bfdbfe !important;
    border: 1px solid #334155 !important;
    box-shadow: none !important;
}

body.theme-dark .btn.secondary:hover,
body.theme-dark .btn.ghost:hover {
    background: #26344a !important;
    color: #ffffff !important;
}

body.theme-dark .qr-label-preview,
body.theme-dark .qr-preview,
body.theme-dark .qr-card-preview,
body.theme-dark .print-label,
body.theme-dark .label-card,
body.theme-dark .print-sheet,
body.theme-dark .print-sheet .label,
body.theme-dark canvas,
body.theme-dark .qr-box {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #111827 !important;
    border-color: #111827 !important;
}

/* System preference can be selected in profile, but the top toggle only switches light/dark. */
@media (max-width: 900px) {
    .topbar-inner {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 12px;
    }

    .main-nav {
        order: 3;
        width: 100%;
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .topbar-actions {
        margin-left: auto;
    }

    .profile-label {
        display: none;
    }
}


/* --- Stable Beta 0.4 sun/moon theme toggle positioning --- */

.topbar-inner {
    display: flex !important;
    align-items: center !important;
}

.main-nav {
    justify-content: flex-start;
}

.topbar-actions {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.theme-toggle-form {
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}

.theme-toggle {
    width: 66px !important;
    height: 36px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 999px !important;
    background: #e0f2fe !important;
    position: relative !important;
    cursor: pointer !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

.theme-icon {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1 !important;
    font-size: 15px !important;
    line-height: 1 !important;
    pointer-events: none !important;
}

.theme-icon-sun {
    left: 10px !important;
    color: #f59e0b !important;
    opacity: 1 !important;
}

.theme-icon-moon {
    right: 11px !important;
    color: #64748b !important;
    opacity: .55 !important;
}

.theme-toggle-knob {
    position: absolute !important;
    left: 3px !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    box-shadow: 0 3px 10px rgba(15,23,42,.22) !important;
    transition: transform .16s ease, background .16s ease !important;
    z-index: 2 !important;
}

.theme-toggle.is-dark {
    background: #172554 !important;
    border-color: #2563eb !important;
}

.theme-toggle.is-dark .theme-toggle-knob {
    transform: translateX(30px) !important;
    background: #0f172a !important;
}

.theme-toggle.is-dark .theme-icon-sun {
    opacity: .45 !important;
    color: #94a3b8 !important;
}

.theme-toggle.is-dark .theme-icon-moon {
    opacity: 1 !important;
    color: #dbeafe !important;
}

body.theme-dark .theme-toggle {
    background: #172554 !important;
    border-color: #2563eb !important;
}

@media (max-width: 900px) {
    .topbar-actions {
        margin-left: auto !important;
    }
}


/* --- Stable Beta 0.4 dark mode button/pill fix --- */

/* General white button fix in dark mode */
body.theme-dark button,
body.theme-dark input[type="submit"],
body.theme-dark input[type="button"],
body.theme-dark .btn,
body.theme-dark a.btn {
    border-color: #334155;
}

body.theme-dark .btn:not(.danger):not(.primary),
body.theme-dark a.btn:not(.danger):not(.primary),
body.theme-dark button.btn:not(.danger):not(.primary) {
    background: #1e293b !important;
    color: #dbeafe !important;
    border: 1px solid #334155 !important;
    box-shadow: none !important;
}

body.theme-dark .btn:not(.danger):not(.primary):hover,
body.theme-dark a.btn:not(.danger):not(.primary):hover,
body.theme-dark button.btn:not(.danger):not(.primary):hover {
    background: #26344a !important;
    color: #ffffff !important;
}

/* Keep main action buttons blue */
body.theme-dark .btn:first-child,
body.theme-dark .btn.primary,
body.theme-dark button.btn.primary,
body.theme-dark a.btn.primary {
    background: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
}

/* Delete/danger buttons were showing white. */
body.theme-dark .btn.danger,
body.theme-dark a.btn.danger,
body.theme-dark button.btn.danger,
body.theme-dark .danger,
body.theme-dark a[href*="delete.php"],
body.theme-dark button[name*="delete"],
body.theme-dark button[value*="delete"],
body.theme-dark button[value*="clear_reserved"],
body.theme-dark .delete-button,
body.theme-dark .clear-button {
    background: #3f1d1d !important;
    color: #fecaca !important;
    border: 1px solid #7f1d1d !important;
    box-shadow: none !important;
}

body.theme-dark .btn.danger:hover,
body.theme-dark a.btn.danger:hover,
body.theme-dark button.btn.danger:hover,
body.theme-dark .danger:hover,
body.theme-dark a[href*="delete.php"]:hover,
body.theme-dark button[name*="delete"]:hover,
body.theme-dark button[value*="delete"]:hover,
body.theme-dark button[value*="clear_reserved"]:hover,
body.theme-dark .delete-button:hover,
body.theme-dark .clear-button:hover {
    background: #7f1d1d !important;
    color: #ffffff !important;
}

/* Some pages use plain anchors styled as buttons without btn classes. */
body.theme-dark .row-actions a,
body.theme-dark .table-actions-cell a,
body.theme-dark .actions a,
body.theme-dark .actions button {
    border-color: #334155;
}

body.theme-dark .row-actions a:not(.danger):not([href*="delete.php"]),
body.theme-dark .table-actions-cell a:not(.danger):not([href*="delete.php"]) {
    background: #1e293b !important;
    color: #dbeafe !important;
    border: 1px solid #334155 !important;
}

body.theme-dark .row-actions a:not(.danger):not([href*="delete.php"]):hover,
body.theme-dark .table-actions-cell a:not(.danger):not([href*="delete.php"]):hover {
    background: #26344a !important;
    color: #ffffff !important;
}

/* Code pills were still too pale in some table cells. */
body.theme-dark .code-pill,
body.theme-dark td .code-pill,
body.theme-dark .qr-code-pill,
body.theme-dark .item-id-pill {
    background: #1e293b !important;
    color: #e2e8f0 !important;
    border: 1px solid #334155 !important;
}

/* Search filter detail summary was still white on some browsers. */
body.theme-dark details,
body.theme-dark details summary,
body.theme-dark details.card,
body.theme-dark details.card summary {
    background: #111827 !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

/* Preserve white only where it must be white for QR/print. */
body.theme-dark .qr-label-preview,
body.theme-dark .qr-preview,
body.theme-dark .qr-card-preview,
body.theme-dark .print-label,
body.theme-dark .label-card,
body.theme-dark .print-sheet,
body.theme-dark .print-sheet .label,
body.theme-dark canvas,
body.theme-dark .qr-box {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #111827 !important;
    border-color: #111827 !important;
}

/* Same button fixes for system theme when OS is dark. */
@media (prefers-color-scheme: dark) {
    body.theme-system .btn:not(.danger):not(.primary),
    body.theme-system a.btn:not(.danger):not(.primary),
    body.theme-system button.btn:not(.danger):not(.primary) {
        background: #1e293b !important;
        color: #dbeafe !important;
        border: 1px solid #334155 !important;
        box-shadow: none !important;
    }

    body.theme-system .btn.danger,
    body.theme-system a.btn.danger,
    body.theme-system button.btn.danger,
    body.theme-system .danger,
    body.theme-system a[href*="delete.php"],
    body.theme-system button[name*="delete"],
    body.theme-system button[value*="delete"],
    body.theme-system button[value*="clear_reserved"],
    body.theme-system .delete-button,
    body.theme-system .clear-button {
        background: #3f1d1d !important;
        color: #fecaca !important;
        border: 1px solid #7f1d1d !important;
        box-shadow: none !important;
    }

    body.theme-system .code-pill,
    body.theme-system td .code-pill,
    body.theme-system .qr-code-pill,
    body.theme-system .item-id-pill {
        background: #1e293b !important;
        color: #e2e8f0 !important;
        border: 1px solid #334155 !important;
    }

    body.theme-system details,
    body.theme-system details summary,
    body.theme-system details.card,
    body.theme-system details.card summary {
        background: #111827 !important;
        color: #f8fafc !important;
        border-color: #334155 !important;
    }
}


/* --- Stable Beta 0.4 dark cleanup: toggle, white panels, buttons --- */

/* Hide old/broken theme toggle visuals if old CSS is still cached on a page. */
.theme-toggle,
.theme-toggle-form,
.theme-icon,
.theme-option,
.theme-toggle-bulb {
    display: none !important;
}

/* Clean topbar layout */
.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,255,255,.94);
    border-bottom: 1px solid #d8e0ee;
    backdrop-filter: blur(14px);
}

.topbar-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    gap: 22px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #0f172a;
    flex: 0 0 auto;
}

.brand:hover {
    text-decoration: none;
}

.brand-name {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1;
}

.beta-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 19px;
    padding: 0 7px;
    border: 1px solid #b8c7e6;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    white-space: nowrap;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 auto;
    min-width: 0;
}

.main-nav a {
    color: #335075;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
}

.main-nav a:hover {
    color: #2563eb;
    text-decoration: none;
}

.topbar-actions {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex: 0 0 auto;
}

.scan-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 16px;
    border-radius: 12px;
    background: #111827;
    color: #ffffff !important;
    text-decoration: none;
    font-weight: 800;
    font-size: 14px;
    box-shadow: 0 10px 24px rgba(17,24,39,.18);
}

.scan-button:hover {
    text-decoration: none;
}

.scan-icon {
    font-size: 15px;
    line-height: 1;
}

.profile-menu {
    position: relative;
}

.profile-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 4px 8px 4px 4px;
    border: 1px solid #d8e0ee;
    border-radius: 999px;
    background: #ffffff;
    color: #0f172a;
    text-decoration: none;
    font-weight: 800;
    cursor: pointer;
    max-width: 260px;
}

.profile-avatar {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    border: 1px solid #c9d7f2;
    overflow: hidden;
    flex: 0 0 auto;
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-label {
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.profile-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 280px;
    border: 1px solid #d8e0ee;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(15,23,42,.16);
    padding: 10px;
    display: none;
}

.profile-menu:hover .profile-dropdown,
.profile-menu:focus-within .profile-dropdown {
    display: block;
}

.profile-dropdown-header {
    padding: 10px;
    border-bottom: 1px solid #edf2f7;
    margin-bottom: 8px;
}

.profile-dropdown-header strong,
.profile-dropdown-header span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-dropdown-header span {
    color: #64748b;
    font-size: 13px;
    margin-top: 2px;
}

.profile-dropdown a {
    display: block;
    padding: 10px;
    border-radius: 12px;
    color: #334155;
    text-decoration: none;
    font-weight: 800;
}

.profile-dropdown a:hover {
    background: #f1f5f9;
    color: #0f172a;
    text-decoration: none;
}

/* New independent sun/moon switch */
.mode-switch-form {
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}

.mode-switch {
    width: 72px !important;
    height: 38px !important;
    border-radius: 999px !important;
    border: 1px solid #cbd5e1 !important;
    background: #e0f2fe !important;
    position: relative !important;
    cursor: pointer !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: inline-flex !important;
    align-items: center !important;
    box-shadow: none !important;
}

.mode-track-icon {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    pointer-events: none !important;
}

.mode-track-sun {
    left: 11px !important;
    color: #f59e0b !important;
    opacity: .25 !important;
}

.mode-track-moon {
    right: 12px !important;
    color: #64748b !important;
    opacity: .35 !important;
}

.mode-knob {
    position: absolute !important;
    left: 3px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #f59e0b !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    box-shadow: 0 3px 10px rgba(15,23,42,.22) !important;
    transition: transform .16s ease, background .16s ease, color .16s ease !important;
    z-index: 2 !important;
}

.mode-switch.mode-dark {
    background: #172554 !important;
    border-color: #2563eb !important;
}

.mode-switch.mode-dark .mode-knob {
    transform: translateX(34px) !important;
    background: #0f172a !important;
    color: #dbeafe !important;
}

.mode-switch.mode-dark .mode-track-sun {
    color: #94a3b8 !important;
    opacity: .35 !important;
}

.mode-switch.mode-dark .mode-track-moon {
    opacity: .22 !important;
}

/* Dark theme core */
body.theme-dark {
    --bg:#0b1220;
    --bg2:#0f172a;
    --card:#111827;
    --text:#f8fafc;
    --muted:#a8b6ca;
    --line:#334155;
    --blue2:#172554;
    background:#0b1220 !important;
    color:#f8fafc !important;
    color-scheme: dark;
}

body.theme-dark .topbar {
    background: rgba(15,23,42,.96) !important;
    border-bottom-color: #334155 !important;
}

body.theme-dark .brand,
body.theme-dark .brand-name,
body.theme-dark .profile-label {
    color:#f8fafc !important;
}

body.theme-dark .beta-badge {
    background:#172554 !important;
    border-color:#2563eb !important;
    color:#bfdbfe !important;
}

body.theme-dark .main-nav a {
    color:#cbd5e1 !important;
}

body.theme-dark .main-nav a:hover {
    background:#1e293b !important;
    color:#ffffff !important;
}

body.theme-dark .scan-button {
    background:#2563eb !important;
    color:#ffffff !important;
}

body.theme-dark .profile-trigger,
body.theme-dark .profile-dropdown {
    background:#111827 !important;
    border-color:#334155 !important;
    color:#f8fafc !important;
}

body.theme-dark .profile-dropdown-header {
    border-bottom-color:#334155 !important;
}

body.theme-dark .profile-dropdown-header span {
    color:#94a3b8 !important;
}

body.theme-dark .profile-dropdown a {
    color:#cbd5e1 !important;
}

body.theme-dark .profile-dropdown a:hover {
    background:#1e293b !important;
    color:#ffffff !important;
}

/* Kill the stubborn white panels seen in Items/Add Item/Templates/Made QR codes */
body.theme-dark .card,
body.theme-dark section.card,
body.theme-dark form.card,
body.theme-dark details.card,
body.theme-dark .table-wrap,
body.theme-dark .items-filter-panel,
body.theme-dark .items-filter-panel[open],
body.theme-dark .items-filter-panel summary,
body.theme-dark .field-as-card,
body.theme-dark .field-as-card.template-create-card,
body.theme-dark .template-fields-panel,
body.theme-dark .template-field-builder,
body.theme-dark .template-share-card,
body.theme-dark .template-preset,
body.theme-dark .template-field-row,
body.theme-dark .template-field-row-main,
body.theme-dark .template-field-row-extra,
body.theme-dark .template-options-wrap,
body.theme-dark .template-required,
body.theme-dark .template-create-card,
body.theme-dark .location-summary,
body.theme-dark .scanner-box,
body.theme-dark .notice:not(.print-label):not(.label-card),
body.theme-dark .alert,
body.theme-dark .stat-card,
body.theme-dark .metric-card {
    background:#111827 !important;
    background-color:#111827 !important;
    color:#f8fafc !important;
    border-color:#334155 !important;
    box-shadow:0 18px 45px rgba(0,0,0,.22) !important;
}

body.theme-dark .hero .card:first-child {
    background:linear-gradient(135deg,#111827 0%,#172033 100%) !important;
}

body.theme-dark .items-filter-panel *,
body.theme-dark .template-field-builder *,
body.theme-dark .template-share-card *,
body.theme-dark .template-preset *,
body.theme-dark .field-as-card *,
body.theme-dark .template-fields-panel *,
body.theme-dark .card *,
body.theme-dark .table-wrap * {
    color: inherit;
}

body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark strong,
body.theme-dark label,
body.theme-dark th,
body.theme-dark td,
body.theme-dark summary,
body.theme-dark .section-head,
body.theme-dark .page-head {
    color:#f8fafc !important;
}

body.theme-dark .muted,
body.theme-dark .help,
body.theme-dark .hint,
body.theme-dark small,
body.theme-dark .template-help,
body.theme-dark .template-field-hint,
body.theme-dark .site-footer,
body.theme-dark .items-filter-grid label {
    color:#a8b6ca !important;
}

body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea,
body.theme-dark .items-search-row input,
body.theme-dark .items-filter-grid select,
body.theme-dark .template-field-row input,
body.theme-dark .template-field-row select {
    background:#0f172a !important;
    border-color:#334155 !important;
    color:#f8fafc !important;
}

body.theme-dark input::placeholder,
body.theme-dark textarea::placeholder {
    color:#74839a !important;
}

body.theme-dark table,
body.theme-dark tbody,
body.theme-dark tr {
    background:#111827 !important;
    color:#f8fafc !important;
}

body.theme-dark thead,
body.theme-dark th {
    background:#0f172a !important;
    color:#cbd5e1 !important;
}

body.theme-dark td {
    background:#111827 !important;
    color:#e5edf8 !important;
    border-color:#334155 !important;
}

body.theme-dark tr:hover td {
    background:#172033 !important;
}

body.theme-dark .code-pill,
body.theme-dark td .code-pill,
body.theme-dark .qr-code-pill,
body.theme-dark .item-id-pill,
body.theme-dark .badge,
body.theme-dark .pill,
body.theme-dark .status-pill,
body.theme-dark .tag,
body.theme-dark .field-unit-hint {
    background:#1e293b !important;
    color:#e2e8f0 !important;
    border:1px solid #334155 !important;
}

/* Buttons, including delete buttons that were staying white */
body.theme-dark .btn,
body.theme-dark a.btn,
body.theme-dark button.btn,
body.theme-dark .row-actions a,
body.theme-dark .table-actions-cell a,
body.theme-dark .actions a,
body.theme-dark .actions button {
    background:#1e293b !important;
    color:#dbeafe !important;
    border:1px solid #334155 !important;
    box-shadow:none !important;
}

body.theme-dark .btn:hover,
body.theme-dark a.btn:hover,
body.theme-dark button.btn:hover,
body.theme-dark .row-actions a:hover,
body.theme-dark .table-actions-cell a:hover,
body.theme-dark .actions a:hover,
body.theme-dark .actions button:hover {
    background:#26344a !important;
    color:#ffffff !important;
}

body.theme-dark .btn.danger,
body.theme-dark a.btn.danger,
body.theme-dark button.btn.danger,
body.theme-dark a[href*="delete.php"],
body.theme-dark button[name*="delete"],
body.theme-dark button[value*="delete"],
body.theme-dark button[value*="clear_reserved"],
body.theme-dark .delete-button,
body.theme-dark .clear-button {
    background:#3f1d1d !important;
    color:#fecaca !important;
    border:1px solid #7f1d1d !important;
}

body.theme-dark .btn.danger:hover,
body.theme-dark a.btn.danger:hover,
body.theme-dark button.btn.danger:hover,
body.theme-dark a[href*="delete.php"]:hover,
body.theme-dark button[name*="delete"]:hover,
body.theme-dark button[value*="delete"]:hover,
body.theme-dark button[value*="clear_reserved"]:hover {
    background:#7f1d1d !important;
    color:#ffffff !important;
}

/* Primary actions stay blue */
body.theme-dark .btn.primary,
body.theme-dark a.btn.primary,
body.theme-dark .actions > .btn:first-child:not(.danger),
body.theme-dark .page-head .btn:last-child:not(.danger) {
    background:#2563eb !important;
    color:#ffffff !important;
    border-color:#2563eb !important;
}

/* QR and print surfaces stay white deliberately */
body.theme-dark .qr-label-preview,
body.theme-dark .qr-preview,
body.theme-dark .qr-card-preview,
body.theme-dark .print-label,
body.theme-dark .label-card,
body.theme-dark .print-sheet,
body.theme-dark .print-sheet .label,
body.theme-dark canvas,
body.theme-dark .qr-box {
    background:#ffffff !important;
    background-color:#ffffff !important;
    color:#111827 !important;
    border-color:#111827 !important;
}

@media (max-width:900px) {
    .topbar-inner {
        align-items:flex-start;
        flex-wrap:wrap;
        gap:12px;
    }

    .main-nav {
        order:3;
        width:100%;
        overflow-x:auto;
        padding-bottom:4px;
    }

    .topbar-actions {
        margin-left:auto !important;
    }

    .profile-label {
        display:none;
    }
}


/* --- Stable Beta 0.4 profile dropdown hover bridge + demo link polish --- */

.profile-menu {
    position: relative !important;
}

.profile-dropdown {
    top: calc(100% + 6px) !important;
    right: 0 !important;
}

/* Invisible bridge stops the dropdown disappearing while moving from profile button to menu. */
.profile-menu::after {
    content: '' !important;
    position: absolute !important;
    left: -12px !important;
    right: -12px !important;
    top: 100% !important;
    height: 14px !important;
    display: block !important;
    background: transparent !important;
    pointer-events: auto !important;
}

.profile-menu:hover .profile-dropdown,
.profile-menu:focus-within .profile-dropdown,
.profile-dropdown:hover {
    display: block !important;
}

.auth-extra-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.demo-page {
    display: grid;
    gap: 22px;
}

.demo-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, .9fr);
    gap: 18px;
    align-items: stretch;
}

.demo-card-stack {
    display: grid;
    gap: 14px;
}

.demo-steps {
    counter-reset: demoStep;
    display: grid;
    gap: 12px;
}

.demo-step {
    counter-increment: demoStep;
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 12px;
    align-items: start;
    padding: 14px;
    border: 1px solid var(--line, #d8e0ee);
    border-radius: 16px;
    background: var(--card, #fff);
}

.demo-step::before {
    content: counter(demoStep);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #2563eb;
    color: #fff;
    font-weight: 900;
}

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

.demo-mini {
    border: 1px solid var(--line, #d8e0ee);
    border-radius: 18px;
    background: var(--card, #fff);
    padding: 18px;
}

.demo-mini h3 {
    margin-top: 0;
}

.demo-fake-table {
    display: grid;
    gap: 8px;
}

.demo-fake-row {
    display: grid;
    grid-template-columns: 90px 1fr 100px;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--line, #d8e0ee);
    border-radius: 12px;
    align-items: center;
}

.demo-fake-qr {
    width: 54px;
    height: 54px;
    border-radius: 10px;
    background:
        linear-gradient(90deg, #111 10px, transparent 10px) 0 0/18px 18px,
        linear-gradient(#111 10px, transparent 10px) 0 0/18px 18px,
        #fff;
    border: 8px solid #fff;
    box-shadow: 0 0 0 1px #d8e0ee;
}

body.theme-dark .demo-step,
body.theme-dark .demo-mini,
body.theme-dark .demo-fake-row {
    background: #111827 !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

body.theme-dark .demo-fake-qr {
    background:
        linear-gradient(90deg, #111 10px, transparent 10px) 0 0/18px 18px,
        linear-gradient(#111 10px, transparent 10px) 0 0/18px 18px,
        #fff !important;
    border-color: #fff !important;
}

@media (max-width: 900px) {
    .demo-hero,
    .demo-grid {
        grid-template-columns: 1fr;
    }
}


/* --- Stable Beta 0.4 public demo dashboard + login required modal --- */

.public-demo-body {
    min-height: 100vh;
    background: linear-gradient(180deg, #f6f9ff 0%, #eef3fb 260px);
    color: #101828;
}

.public-demo-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,255,255,.94);
    border-bottom: 1px solid #d8e0ee;
    backdrop-filter: blur(14px);
}

.public-demo-topbar-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 18px;
}

.public-demo-nav {
    display: flex;
    gap: 14px;
    align-items: center;
    flex: 1 1 auto;
    overflow-x: auto;
}

.public-demo-nav a,
.public-demo-nav button {
    border: 0;
    background: transparent;
    color: #335075;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    padding: 8px 0;
}

.public-demo-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.demo-shell {
    max-width: 1240px;
    margin: 0 auto;
    padding: 34px 18px 60px;
}

.demo-disabled {
    cursor: pointer;
}

.demo-locked-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 900;
}

.demo-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, .48);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.demo-modal-backdrop.is-open {
    display: flex;
}

.demo-modal {
    width: min(520px, 100%);
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid #d8e0ee;
    box-shadow: 0 28px 80px rgba(15,23,42,.26);
    padding: 24px;
}

.demo-modal h2 {
    margin-top: 0;
}

.demo-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.demo-preview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, .9fr);
    gap: 18px;
    margin-bottom: 22px;
}

.demo-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}

.demo-metric {
    border: 1px solid #d8e0ee;
    background: #ffffff;
    border-radius: 18px;
    padding: 20px;
    text-decoration: none;
    color: #101828;
}

.demo-metric span {
    display: flex;
    justify-content: space-between;
    color: #667085;
}

.demo-metric span::after {
    content: '↗';
    color: #98a2b3;
    font-weight: 900;
}

.demo-metric strong {
    display: block;
    font-size: 34px;
    margin-top: 8px;
}

.demo-fake-table-card {
    overflow: hidden;
}

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

.demo-table th,
.demo-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #e4eaf3;
    text-align: left;
}

.demo-table th {
    color: #667085;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.demo-workflow-list {
    margin: 0;
    padding-left: 22px;
    color: #516173;
    line-height: 1.7;
}

.demo-qr-card {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
    padding: 14px;
    border: 1px solid #d8e0ee;
    border-radius: 18px;
    background: #f8fbff;
}

.demo-qr-box {
    width: 84px;
    height: 84px;
    border-radius: 12px;
    background:
        linear-gradient(90deg, #111 9px, transparent 9px) 0 0/18px 18px,
        linear-gradient(#111 9px, transparent 9px) 0 0/18px 18px,
        #fff;
    border: 10px solid #fff;
    box-shadow: 0 0 0 1px #d8e0ee;
    flex: 0 0 auto;
}

.demo-hint-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.demo-hint {
    border: 1px solid #d8e0ee;
    border-radius: 18px;
    padding: 18px;
    background: #ffffff;
}

.demo-hint h3 {
    margin-top: 0;
}

@media (max-width: 900px) {
    .demo-preview-grid,
    .demo-metrics,
    .demo-hint-row {
        grid-template-columns: 1fr;
    }

    .public-demo-topbar-inner {
        flex-wrap: wrap;
    }

    .public-demo-actions {
        margin-left: auto;
    }
}


/* --- Stable Beta 0.4 scrollable patch history --- */

.patch-history-scroll {
    max-height: 420px;
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid var(--line, #d8e0ee);
    border-radius: 16px;
}

.patch-history-scroll table {
    margin: 0;
}

.patch-history-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f8fbff;
}

.patch-history-scroll td,
.patch-history-scroll th {
    vertical-align: top;
}

.patch-history-note {
    margin-top: 10px;
    color: var(--muted, #667085);
    font-size: 13px;
}

body.theme-dark .patch-history-scroll {
    border-color: #334155 !important;
    background: #111827 !important;
}

body.theme-dark .patch-history-scroll thead th {
    background: #0f172a !important;
    color: #cbd5e1 !important;
}

body.theme-dark .patch-history-note {
    color: #a8b6ca !important;
}

.public-demo-body .patch-history-scroll {
    background: #ffffff;
}

@media (max-width: 700px) {
    .patch-history-scroll {
        max-height: 360px;
    }
}


/* --- Stable Beta 0.4 public pages with login-required modal --- */

.public-preview-note {
    border: 1px solid #b8c7e6;
    background: #eef4ff;
    color: #1d4ed8;
    border-radius: 16px;
    padding: 14px 16px;
    font-weight: 800;
    margin-bottom: 18px;
}

.public-preview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}

.public-preview-card,
.public-preview-table-card {
    border: 1px solid var(--line, #d8e0ee);
    background: var(--card, #fff);
    border-radius: 18px;
    padding: 20px;
}

.public-preview-card span {
    display: flex;
    justify-content: space-between;
    color: var(--muted, #667085);
}

.public-preview-card span::after {
    content: '↗';
    color: #98a2b3;
    font-weight: 900;
}

.public-preview-card strong {
    display: block;
    font-size: 34px;
    margin-top: 8px;
}

.public-login-required {
    cursor: pointer;
}

.demo-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, .48);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.demo-modal-backdrop.is-open {
    display: flex;
}

.demo-modal {
    width: min(520px, 100%);
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid #d8e0ee;
    box-shadow: 0 28px 80px rgba(15,23,42,.26);
    padding: 24px;
}

.demo-modal h2 {
    margin-top: 0;
}

.demo-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

body.theme-dark .public-preview-note {
    background: #172554 !important;
    border-color: #2563eb !important;
    color: #bfdbfe !important;
}

body.theme-dark .public-preview-card,
body.theme-dark .public-preview-table-card,
body.theme-dark .demo-modal {
    background: #111827 !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

body.theme-dark .public-preview-card span,
body.theme-dark .demo-modal .muted {
    color: #a8b6ca !important;
}

@media (max-width: 900px) {
    .public-preview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .public-preview-grid {
        grid-template-columns: 1fr;
    }
}


/* --- Stable Beta 0.4 public theme toggle --- */

body.theme-dark .public-preview-card,
body.theme-dark .public-preview-table-card,
body.theme-dark .public-preview-note,
body.theme-dark .demo-modal,
body.theme-dark .demo-table,
body.theme-dark .demo-table tbody,
body.theme-dark .demo-table tr {
    background: #111827 !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

body.theme-dark .public-preview-note {
    background: #172554 !important;
    color: #bfdbfe !important;
    border-color: #2563eb !important;
}

body.theme-dark .demo-table th {
    background: #0f172a !important;
    color: #cbd5e1 !important;
}

body.theme-dark .demo-table td {
    background: #111827 !important;
    color: #e5edf8 !important;
    border-color: #334155 !important;
}

body.theme-dark .public-demo-body {
    background: #0b1220 !important;
    color: #f8fafc !important;
}

body.theme-dark .public-demo-topbar {
    background: rgba(15,23,42,.96) !important;
    border-bottom-color: #334155 !important;
}

body.theme-dark .public-demo-nav a,
body.theme-dark .public-demo-nav button {
    color: #cbd5e1 !important;
}


/* --- Stable Beta 0.4 login dashboard button --- */

.auth-extra-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.auth-copy .auth-extra-actions {
    margin-top: 22px;
}

body.theme-dark .auth-extra-actions .btn.ghost,
body.theme-dark .auth-extra-actions .btn.secondary {
    background: #1e293b !important;
    color: #dbeafe !important;
    border-color: #334155 !important;
}


/* --- Stable Beta 0.4 login dashboard preview area --- */

.auth-preview-area {
    margin-top: 24px;
    padding: 18px;
    border: 1px solid #d8e0ee;
    border-radius: 18px;
    background: linear-gradient(135deg, #f8fbff 0%, #eef4ff 100%);
    display: grid;
    gap: 14px;
}

.auth-preview-area strong,
.auth-preview-area span {
    display: block;
}

.auth-preview-area strong {
    font-size: 15px;
    color: #101828;
}

.auth-preview-area span {
    margin-top: 4px;
    color: #516173;
    line-height: 1.5;
}

.auth-preview-area .preview-btn {
    width: fit-content;
}

.auth-preview-link {
    margin: 16px 0 0;
    color: #667085;
    font-size: 14px;
}

.auth-preview-link a {
    font-weight: 800;
}

body.theme-dark .auth-preview-area {
    background: linear-gradient(135deg, #111827 0%, #172554 100%) !important;
    border-color: #334155 !important;
}

body.theme-dark .auth-preview-area strong {
    color: #f8fafc !important;
}

body.theme-dark .auth-preview-area span,
body.theme-dark .auth-preview-link {
    color: #a8b6ca !important;
}

@media (max-width: 720px) {
    .auth-preview-area .preview-btn {
        width: 100%;
        justify-content: center;
    }
}


/* --- Stable Beta 0.4 top bar spacing polish --- */

/*
Keeps the main navigation on one clean row on desktop, with brand left and
actions right. It only switches to a wrapping/mobile layout when the viewport
is genuinely narrow.
*/

.topbar {
    min-height: 74px;
}

.topbar-inner {
    max-width: 1480px !important;
    width: 100%;
    padding: 14px 28px !important;
    gap: 26px !important;
    justify-content: flex-start;
}

.brand {
    margin-right: 10px;
}

.main-nav {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    column-gap: 24px !important;
    row-gap: 8px !important;
    min-width: 0 !important;
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
}

.main-nav::-webkit-scrollbar {
    display: none;
}

.main-nav a {
    padding: 8px 0;
    line-height: 1.1;
}

.topbar-actions {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 14px !important;
    flex: 0 0 auto !important;
}

.scan-button {
    gap: 7px;
    min-width: 74px;
}

.profile-trigger {
    max-width: 220px;
}

.mode-switch-form {
    flex: 0 0 auto;
}

@media (min-width: 1200px) {
    .topbar-inner {
        flex-wrap: nowrap !important;
    }

    .main-nav {
        flex-wrap: nowrap !important;
    }
}

@media (max-width: 1199px) {
    .topbar {
        min-height: auto;
    }

    .topbar-inner {
        align-items: flex-start !important;
        flex-wrap: wrap !important;
        gap: 12px 18px !important;
    }

    .main-nav {
        order: 3;
        width: 100%;
        flex-basis: 100% !important;
        padding-bottom: 4px;
        column-gap: 18px !important;
    }

    .topbar-actions {
        margin-left: auto !important;
    }
}

@media (max-width: 700px) {
    .topbar-inner {
        padding: 12px 16px !important;
    }

    .main-nav {
        column-gap: 16px !important;
    }

    .scan-button span:last-child {
        display: none;
    }

    .scan-button {
        min-width: 42px;
        padding-inline: 12px;
    }
}


/* --- Stable Beta 0.4 footer bottom placement --- */

/*
Keeps the footer at the bottom of the viewport on short pages,
without making it fixed or covering content.
*/

html,
body {
    min-height: 100%;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.topbar {
    flex: 0 0 auto;
}

.app-shell {
    flex: 1 0 auto;
    width: 100%;
}

.site-footer {
    flex: 0 0 auto;
    width: 100%;
    margin-top: auto !important;
    padding-top: 24px;
    padding-bottom: 28px;
}

.site-footer-inner,
.site-footer .footer-inner {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 700px) {
    .site-footer {
        padding-bottom: 22px;
    }
}


/* --- Stable Beta 0.4 mobile top bar cleanup --- */

/*
Mobile top bar:
- Brand and account controls stay in one compact row.
- Navigation becomes a horizontal scroll strip instead of wrapping into a tall block.
- Scan becomes an icon-only square on mobile.
- Profile name hides on mobile, leaving the avatar.
*/

@media (max-width: 760px) {
    .topbar {
        min-height: auto !important;
    }

    .topbar-inner {
        padding: 12px 14px 10px !important;
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        grid-template-areas:
            "brand spacer actions"
            "nav nav nav" !important;
        align-items: center !important;
        gap: 10px 12px !important;
        max-width: 100% !important;
    }

    .brand {
        grid-area: brand !important;
        margin: 0 !important;
        gap: 7px !important;
        min-width: 0 !important;
    }

    .brand-name {
        font-size: 22px !important;
        letter-spacing: -0.05em !important;
    }

    .beta-badge {
        height: 18px !important;
        padding: 0 7px !important;
        font-size: 9px !important;
    }

    .topbar-actions {
        grid-area: actions !important;
        margin-left: 0 !important;
        justify-self: end !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
    }

    .scan-button {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        padding: 0 !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .scan-button span:not(.scan-icon) {
        display: none !important;
    }

    .scan-icon {
        font-size: 17px !important;
    }

    .profile-trigger {
        width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 4px !important;
        border-radius: 999px !important;
        justify-content: center !important;
    }

    .profile-label {
        display: none !important;
    }

    .profile-avatar {
        width: 34px !important;
        height: 34px !important;
    }

    .mode-switch {
        width: 62px !important;
        height: 36px !important;
    }

    .mode-knob {
        width: 30px !important;
        height: 30px !important;
        font-size: 14px !important;
    }

    .mode-switch.mode-dark .mode-knob {
        transform: translateX(26px) !important;
    }

    .mode-track-sun {
        left: 9px !important;
    }

    .mode-track-moon {
        right: 10px !important;
    }

    .main-nav {
        grid-area: nav !important;
        order: unset !important;
        width: 100% !important;
        flex-basis: auto !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        column-gap: 8px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 2px 0 4px !important;
        margin: 0 !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap !important;
    }

    .main-nav::-webkit-scrollbar {
        display: none !important;
    }

    .main-nav a {
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        min-height: 34px !important;
        padding: 0 12px !important;
        border-radius: 999px !important;
        background: #eef4ff !important;
        color: #335075 !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        text-decoration: none !important;
    }

    .main-nav a:hover {
        background: #dbeafe !important;
        color: #1d4ed8 !important;
    }

    body.theme-dark .main-nav a {
        background: #1e293b !important;
        color: #cbd5e1 !important;
    }

    body.theme-dark .main-nav a:hover {
        background: #26344a !important;
        color: #ffffff !important;
    }

    .profile-dropdown {
        right: -74px !important;
        width: min(280px, calc(100vw - 28px)) !important;
    }

    .app-shell {
        padding-top: 22px !important;
    }
}

@media (max-width: 420px) {
    .topbar-inner {
        padding-left: 10px !important;
        padding-right: 10px !important;
        gap: 9px 8px !important;
    }

    .brand-name {
        font-size: 20px !important;
    }

    .beta-badge {
        font-size: 8px !important;
        padding: 0 6px !important;
    }

    .topbar-actions {
        gap: 6px !important;
    }

    .scan-button,
    .profile-trigger {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }

    .profile-avatar {
        width: 31px !important;
        height: 31px !important;
    }

    .mode-switch {
        width: 58px !important;
        height: 34px !important;
    }

    .mode-knob {
        width: 28px !important;
        height: 28px !important;
    }

    .mode-switch.mode-dark .mode-knob {
        transform: translateX(24px) !important;
    }

    .main-nav a {
        min-height: 32px !important;
        padding: 0 10px !important;
        font-size: 12px !important;
    }
}


/* --- Stable Beta 0.4 mobile burger navigation --- */

.mobile-menu-toggle {
    display: none;
}

@media (max-width: 760px) {
    .topbar-inner {
        grid-template-columns: auto auto 1fr auto !important;
        grid-template-areas: "brand menu spacer actions" !important;
    }

    .mobile-menu-toggle {
        grid-area: menu !important;
        display: inline-flex !important;
        width: 42px !important;
        height: 42px !important;
        border: 1px solid #d8e0ee !important;
        border-radius: 14px !important;
        background: #ffffff !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        gap: 4px !important;
        padding: 0 !important;
        cursor: pointer !important;
        box-shadow: none !important;
    }

    .mobile-menu-toggle span {
        width: 18px !important;
        height: 2px !important;
        border-radius: 999px !important;
        background: #101828 !important;
        display: block !important;
        transition: transform .16s ease, opacity .16s ease !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(1) {
        transform: translateY(6px) rotate(45deg) !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(2) {
        opacity: 0 !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg) !important;
    }

    .main-nav {
        grid-area: nav !important;
        display: none !important;
        width: 100% !important;
        padding: 10px !important;
        margin: 0 !important;
        border: 1px solid #d8e0ee !important;
        border-radius: 18px !important;
        background: #ffffff !important;
        box-shadow: 0 18px 45px rgba(15,23,42,.12) !important;
        overflow: visible !important;
        white-space: normal !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .main-nav.is-open {
        display: flex !important;
    }

    .main-nav a {
        min-height: 38px !important;
        padding: 0 13px !important;
        border-radius: 999px !important;
        background: #eef4ff !important;
        color: #335075 !important;
        font-size: 13px !important;
        font-weight: 800 !important;
    }

    body.theme-dark .mobile-menu-toggle {
        background: #111827 !important;
        border-color: #334155 !important;
    }

    body.theme-dark .mobile-menu-toggle span {
        background: #f8fafc !important;
    }

    body.theme-dark .main-nav {
        background: #111827 !important;
        border-color: #334155 !important;
        box-shadow: 0 18px 45px rgba(0,0,0,.22) !important;
    }

    body.theme-dark .main-nav a {
        background: #1e293b !important;
        color: #cbd5e1 !important;
    }

    body.theme-dark .main-nav a:hover {
        background: #26344a !important;
        color: #ffffff !important;
    }
}

@media (max-width: 420px) {
    .mobile-menu-toggle {
        width: 40px !important;
        height: 40px !important;
    }

    .topbar-inner {
        grid-template-columns: auto auto 1fr auto !important;
    }
}


/* --- Stable Beta 0.4 mobile burger force fix --- */

/*
The earlier mobile menu CSS was being overridden by older mobile nav rules.
This block sits at the end of the stylesheet and forcefully:
- shows the burger button
- hides the nav by default on mobile
- only shows the nav after JS adds .is-open
*/

@media (max-width: 760px) {
    .topbar-inner {
        display: grid !important;
        grid-template-columns: auto auto 1fr auto !important;
        grid-template-areas:
            "brand menu spacer actions"
            "nav nav nav nav" !important;
        align-items: center !important;
        gap: 10px 10px !important;
        padding: 12px 14px !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .brand {
        grid-area: brand !important;
        margin: 0 !important;
    }

    .mobile-menu-toggle {
        grid-area: menu !important;
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        border: 1px solid #d8e0ee !important;
        border-radius: 14px !important;
        background: #ffffff !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        gap: 4px !important;
        padding: 0 !important;
        margin: 0 !important;
        cursor: pointer !important;
        box-shadow: none !important;
        appearance: none !important;
        -webkit-appearance: none !important;
    }

    .mobile-menu-toggle span {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 18px !important;
        height: 2px !important;
        min-height: 2px !important;
        border-radius: 999px !important;
        background: #101828 !important;
        transform-origin: center !important;
        transition: transform .16s ease, opacity .16s ease !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(1) {
        transform: translateY(6px) rotate(45deg) !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(2) {
        opacity: 0 !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg) !important;
    }

    .topbar-actions {
        grid-area: actions !important;
        justify-self: end !important;
        margin-left: 0 !important;
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }

    .main-nav,
    .topbar .main-nav,
    header .main-nav {
        grid-area: nav !important;
        order: unset !important;
        width: 100% !important;
        flex-basis: 100% !important;
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .main-nav.is-open,
    .topbar .main-nav.is-open,
    header .main-nav.is-open {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        overflow: visible !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 10px !important;
        margin: 0 !important;
        border: 1px solid #d8e0ee !important;
        border-radius: 18px !important;
        background: #ffffff !important;
        box-shadow: 0 18px 45px rgba(15,23,42,.12) !important;
        white-space: normal !important;
    }

    .main-nav.is-open a {
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        min-height: 38px !important;
        padding: 0 13px !important;
        border-radius: 999px !important;
        background: #eef4ff !important;
        color: #335075 !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        text-decoration: none !important;
    }

    body.theme-dark .mobile-menu-toggle {
        background: #111827 !important;
        border-color: #334155 !important;
    }

    body.theme-dark .mobile-menu-toggle span {
        background: #f8fafc !important;
    }

    body.theme-dark .main-nav.is-open {
        background: #111827 !important;
        border-color: #334155 !important;
        box-shadow: 0 18px 45px rgba(0,0,0,.22) !important;
    }

    body.theme-dark .main-nav.is-open a {
        background: #1e293b !important;
        color: #cbd5e1 !important;
    }
}

@media (min-width: 761px) {
    .mobile-menu-toggle {
        display: none !important;
    }

    .main-nav {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
    }
}


/* --- Stable Beta 0.4 mobile bottom navigation --- */

/*
Mobile now uses a native-app style bottom nav:
Dashboard, Items, Locations, Folders, QR Labels, Scan.
The full desktop nav stays on desktop/tablet.
*/

.mobile-bottom-nav {
    display: none;
}

@media (max-width: 760px) {
    /* Keep mobile header compact and remove the large nav area. */
    .topbar-inner {
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        grid-template-areas: "brand spacer actions" !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 12px 14px !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .brand {
        grid-area: brand !important;
        margin: 0 !important;
    }

    .topbar-actions {
        grid-area: actions !important;
        justify-self: end !important;
        margin-left: 0 !important;
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }

    .main-nav,
    .topbar .main-nav,
    header .main-nav {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
    }

    .mobile-menu-toggle {
        display: none !important;
    }

    .scan-button {
        display: none !important;
    }

    .profile-trigger {
        width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        padding: 4px !important;
        border-radius: 999px !important;
        justify-content: center !important;
    }

    .profile-label {
        display: none !important;
    }

    .profile-avatar {
        width: 32px !important;
        height: 32px !important;
    }

    .mode-switch {
        width: 58px !important;
        height: 34px !important;
    }

    .mode-knob {
        width: 28px !important;
        height: 28px !important;
        font-size: 14px !important;
    }

    .mode-switch.mode-dark .mode-knob {
        transform: translateX(24px) !important;
    }

    .mobile-bottom-nav {
        position: fixed !important;
        left: 10px !important;
        right: 10px !important;
        bottom: calc(10px + env(safe-area-inset-bottom)) !important;
        z-index: 999 !important;
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 4px !important;
        padding: 8px !important;
        border: 1px solid rgba(216, 224, 238, .92) !important;
        border-radius: 24px !important;
        background: rgba(255, 255, 255, .94) !important;
        box-shadow: 0 18px 55px rgba(15, 23, 42, .22) !important;
        backdrop-filter: blur(18px) !important;
        -webkit-backdrop-filter: blur(18px) !important;
    }

    .mobile-bottom-link {
        min-width: 0 !important;
        min-height: 54px !important;
        border-radius: 18px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        text-decoration: none !important;
        color: #475467 !important;
        font-size: 10px !important;
        font-weight: 850 !important;
        line-height: 1 !important;
        letter-spacing: -0.01em !important;
        white-space: nowrap !important;
    }

    .mobile-bottom-icon {
        font-size: 18px !important;
        line-height: 1 !important;
        display: block !important;
    }

    .mobile-bottom-link:hover,
    .mobile-bottom-link:focus {
        background: #eef4ff !important;
        color: #1d4ed8 !important;
        text-decoration: none !important;
    }

    .mobile-bottom-scan {
        background: #2563eb !important;
        color: #ffffff !important;
        box-shadow: 0 10px 24px rgba(37, 99, 235, .28) !important;
    }

    .mobile-bottom-scan:hover,
    .mobile-bottom-scan:focus {
        background: #1d4ed8 !important;
        color: #ffffff !important;
    }

    .app-shell {
        padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
    }

    .site-footer {
        padding-bottom: calc(112px + env(safe-area-inset-bottom)) !important;
    }

    body.theme-dark .mobile-bottom-nav {
        background: rgba(15, 23, 42, .94) !important;
        border-color: #334155 !important;
        box-shadow: 0 18px 55px rgba(0, 0, 0, .36) !important;
    }

    body.theme-dark .mobile-bottom-link {
        color: #cbd5e1 !important;
    }

    body.theme-dark .mobile-bottom-link:hover,
    body.theme-dark .mobile-bottom-link:focus {
        background: #1e293b !important;
        color: #ffffff !important;
    }

    body.theme-dark .mobile-bottom-scan {
        background: #2563eb !important;
        color: #ffffff !important;
    }
}

@media (max-width: 390px) {
    .mobile-bottom-nav {
        left: 8px !important;
        right: 8px !important;
        padding: 6px !important;
        gap: 2px !important;
        border-radius: 22px !important;
    }

    .mobile-bottom-link {
        min-height: 50px !important;
        font-size: 9px !important;
        border-radius: 16px !important;
    }

    .mobile-bottom-icon {
        font-size: 17px !important;
    }
}


/* --- Stable Beta 0.4 mobile bottom nav overlay force fix --- */

/*
Strict behaviour:
- Hidden on desktop.
- Fixed overlay on mobile/coarse pointer devices.
- Stays pinned to viewport, not the bottom of the document.
*/

.mobile-bottom-nav {
    display: none !important;
}

/* Desktop and laptop safety: never show bottom nav on normal desktop widths. */
@media (min-width: 821px) and (hover: hover) and (pointer: fine) {
    .mobile-bottom-nav {
        display: none !important;
    }
}

/* Phones and narrow mobile layouts */
@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 1024px) {
    body {
        padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important;
    }

    .app-shell {
        padding-bottom: calc(112px + env(safe-area-inset-bottom)) !important;
    }

    .site-footer {
        padding-bottom: calc(122px + env(safe-area-inset-bottom)) !important;
    }

    .mobile-bottom-nav {
        position: fixed !important;
        inset-inline: 10px !important;
        left: 10px !important;
        right: 10px !important;
        bottom: calc(10px + env(safe-area-inset-bottom)) !important;
        top: auto !important;
        z-index: 2147483000 !important;
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 4px !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        min-height: 68px !important;
        margin: 0 !important;
        padding: 8px !important;
        border: 1px solid rgba(216, 224, 238, .94) !important;
        border-radius: 24px !important;
        background: rgba(255, 255, 255, .96) !important;
        box-shadow: 0 18px 55px rgba(15, 23, 42, .24) !important;
        backdrop-filter: blur(18px) !important;
        -webkit-backdrop-filter: blur(18px) !important;
        transform: translate3d(0, 0, 0) !important;
        will-change: transform !important;
        pointer-events: auto !important;
    }

    .mobile-bottom-link {
        min-width: 0 !important;
        min-height: 52px !important;
        border-radius: 18px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        text-decoration: none !important;
        color: #475467 !important;
        font-size: 10px !important;
        font-weight: 850 !important;
        line-height: 1 !important;
        letter-spacing: -0.01em !important;
        white-space: nowrap !important;
        overflow: hidden !important;
    }

    .mobile-bottom-icon {
        font-size: 18px !important;
        line-height: 1 !important;
        display: block !important;
    }

    .mobile-bottom-link:hover,
    .mobile-bottom-link:focus {
        background: #eef4ff !important;
        color: #1d4ed8 !important;
        text-decoration: none !important;
    }

    .mobile-bottom-scan {
        background: #2563eb !important;
        color: #ffffff !important;
        box-shadow: 0 10px 24px rgba(37, 99, 235, .28) !important;
    }

    .mobile-bottom-scan:hover,
    .mobile-bottom-scan:focus {
        background: #1d4ed8 !important;
        color: #ffffff !important;
    }

    body.theme-dark .mobile-bottom-nav {
        background: rgba(15, 23, 42, .96) !important;
        border-color: #334155 !important;
        box-shadow: 0 18px 55px rgba(0, 0, 0, .38) !important;
    }

    body.theme-dark .mobile-bottom-link {
        color: #cbd5e1 !important;
    }

    body.theme-dark .mobile-bottom-link:hover,
    body.theme-dark .mobile-bottom-link:focus {
        background: #1e293b !important;
        color: #ffffff !important;
    }

    body.theme-dark .mobile-bottom-scan {
        background: #2563eb !important;
        color: #ffffff !important;
    }
}

@media (max-width: 390px) {
    .mobile-bottom-nav {
        left: 8px !important;
        right: 8px !important;
        inset-inline: 8px !important;
        bottom: calc(8px + env(safe-area-inset-bottom)) !important;
        padding: 6px !important;
        gap: 2px !important;
        border-radius: 22px !important;
        min-height: 64px !important;
    }

    .mobile-bottom-link {
        min-height: 50px !important;
        font-size: 9px !important;
        border-radius: 16px !important;
    }

    .mobile-bottom-icon {
        font-size: 17px !important;
    }
}


/* --- Stable Beta 0.4 JS mobile bottom nav overlay fix --- */

/*
The mobile bottom nav is now created by JS at the end of <body>
and forced with inline fixed-position styles. CSS below handles fallback,
spacing, and hiding top navigation on mobile.
*/

.mobile-bottom-nav {
    display: none !important;
}

@media (min-width: 821px) {
    .mobile-bottom-nav,
    #mobileBottomNav {
        display: none !important;
    }
}

@media (max-width: 820px) {
    body.has-mobile-bottom-nav {
        padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
    }

    body.has-mobile-bottom-nav .app-shell {
        padding-bottom: calc(124px + env(safe-area-inset-bottom)) !important;
    }

    body.has-mobile-bottom-nav .site-footer {
        padding-bottom: calc(132px + env(safe-area-inset-bottom)) !important;
    }

    .topbar .main-nav,
    header .main-nav,
    .main-nav {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .scan-button {
        display: none !important;
    }

    #mobileBottomNav .mobile-bottom-link:hover,
    #mobileBottomNav .mobile-bottom-link:focus {
        background: #eef4ff !important;
        color: #1d4ed8 !important;
    }

    body.theme-dark #mobileBottomNav .mobile-bottom-link:hover,
    body.theme-dark #mobileBottomNav .mobile-bottom-link:focus {
        background: #1e293b !important;
        color: #ffffff !important;
    }
}

@media (max-width: 390px) {
    #mobileBottomNav {
        left: 8px !important;
        right: 8px !important;
        bottom: calc(8px + env(safe-area-inset-bottom)) !important;
        padding: 6px !important;
        gap: 4px !important;
    }

    #mobileBottomNav .mobile-bottom-link {
        min-height: 50px !important;
        font-size: 9px !important;
    }
}


/* --- Stable Beta 0.4 mobile bottom nav: add Scan + remove top mobile nav --- */

/*
Mobile bottom nav now contains:
Dashboard, Items, Locations, Folders, Scan.
Top navigation and top Scan remain hidden on mobile.
*/

@media (max-width: 820px) {
    .topbar .main-nav,
    header .main-nav,
    .main-nav,
    .scan-button {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
    }

    #mobileBottomNav,
    .mobile-bottom-nav {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }

    #mobileBottomNav .mobile-bottom-scan,
    .mobile-bottom-nav .mobile-bottom-scan {
        background: #2563eb !important;
        color: #ffffff !important;
        box-shadow: 0 10px 24px rgba(37, 99, 235, .28) !important;
    }

    #mobileBottomNav .mobile-bottom-scan:hover,
    #mobileBottomNav .mobile-bottom-scan:focus,
    .mobile-bottom-nav .mobile-bottom-scan:hover,
    .mobile-bottom-nav .mobile-bottom-scan:focus {
        background: #1d4ed8 !important;
        color: #ffffff !important;
    }
}

@media (max-width: 390px) {
    #mobileBottomNav .mobile-bottom-link {
        font-size: 8.5px !important;
    }

    #mobileBottomNav .mobile-bottom-icon {
        font-size: 17px !important;
    }
}


/* --- Stable Beta 0.4 force hide top mobile nav --- */

/*
Hard stop: on mobile the header must only show brand/account/theme controls.
Dashboard/Items/Locations/Folders/Scan must not appear in the top bar.
They live in the bottom overlay nav instead.
*/

@media screen and (max-width: 820px) {
    header nav.main-nav,
    .topbar nav.main-nav,
    .topbar .main-nav,
    header .main-nav,
    body .main-nav {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        left: -99999px !important;
        top: -99999px !important;
        width: 0 !important;
        max-width: 0 !important;
        height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        transform: none !important;
    }

    header .scan-button,
    .topbar .scan-button,
    body .topbar .scan-button {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        left: -99999px !important;
        top: -99999px !important;
        width: 0 !important;
        max-width: 0 !important;
        min-width: 0 !important;
        height: 0 !important;
        max-height: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
    }

    .topbar-inner {
        grid-template-areas: "brand spacer actions" !important;
        grid-template-columns: auto 1fr auto !important;
    }
}

@media screen and (min-width: 821px) {
    header nav.main-nav,
    .topbar nav.main-nav,
    .topbar .main-nav {
        position: static !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
}


/* --- Stable Beta 0.4 mobile More burger menu --- */

/*
Bottom mobile nav keeps the primary actions:
Dashboard, Items, Locations, Folders, Scan.
The header burger now holds the remaining pages.
*/

.mobile-more-toggle,
.mobile-more-menu {
    display: none;
}

@media screen and (max-width: 820px) {
    .topbar-inner {
        display: grid !important;
        grid-template-columns: auto auto 1fr auto !important;
        grid-template-areas: "brand more spacer actions" !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 12px 14px !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .mobile-more-toggle {
        grid-area: more !important;
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        border: 1px solid #d8e0ee !important;
        border-radius: 14px !important;
        background: #ffffff !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        gap: 4px !important;
        padding: 0 !important;
        margin: 0 !important;
        cursor: pointer !important;
        box-shadow: none !important;
        appearance: none !important;
        -webkit-appearance: none !important;
    }

    .mobile-more-toggle span {
        width: 18px !important;
        height: 2px !important;
        min-height: 2px !important;
        display: block !important;
        border-radius: 999px !important;
        background: #101828 !important;
        transition: transform .16s ease, opacity .16s ease !important;
    }

    .mobile-more-toggle.is-open span:nth-child(1) {
        transform: translateY(6px) rotate(45deg) !important;
    }

    .mobile-more-toggle.is-open span:nth-child(2) {
        opacity: 0 !important;
    }

    .mobile-more-toggle.is-open span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg) !important;
    }

    .mobile-more-menu {
        position: fixed !important;
        inset: 0 !important;
        z-index: 2147483600 !important;
        display: none !important;
        padding: 74px 12px calc(104px + env(safe-area-inset-bottom)) !important;
        background: rgba(15, 23, 42, .18) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
    }

    .mobile-more-menu.is-open {
        display: block !important;
    }

    .mobile-more-panel {
        width: min(420px, 100%) !important;
        margin: 0 auto !important;
        padding: 14px !important;
        border-radius: 24px !important;
        border: 1px solid #d8e0ee !important;
        background: rgba(255,255,255,.98) !important;
        box-shadow: 0 22px 65px rgba(15,23,42,.24) !important;
    }

    .mobile-more-head {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        margin-bottom: 12px !important;
    }

    .mobile-more-head strong {
        color: #101828 !important;
        font-size: 16px !important;
        font-weight: 900 !important;
    }

    .mobile-more-close {
        width: 38px !important;
        height: 38px !important;
        border-radius: 999px !important;
        border: 1px solid #d8e0ee !important;
        background: #ffffff !important;
        color: #101828 !important;
        font-size: 24px !important;
        line-height: 1 !important;
        cursor: pointer !important;
    }

    .mobile-more-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .mobile-more-grid a {
        display: flex !important;
        align-items: center !important;
        min-height: 46px !important;
        padding: 0 14px !important;
        border-radius: 16px !important;
        background: #eef4ff !important;
        color: #335075 !important;
        font-size: 14px !important;
        font-weight: 850 !important;
        text-decoration: none !important;
    }

    .mobile-more-grid a:hover,
    .mobile-more-grid a:focus {
        background: #dbeafe !important;
        color: #1d4ed8 !important;
        text-decoration: none !important;
    }

    body.theme-dark .mobile-more-toggle {
        background: #111827 !important;
        border-color: #334155 !important;
    }

    body.theme-dark .mobile-more-toggle span {
        background: #f8fafc !important;
    }

    body.theme-dark .mobile-more-menu {
        background: rgba(0, 0, 0, .28) !important;
    }

    body.theme-dark .mobile-more-panel {
        background: rgba(15,23,42,.98) !important;
        border-color: #334155 !important;
        box-shadow: 0 22px 65px rgba(0,0,0,.42) !important;
    }

    body.theme-dark .mobile-more-head strong {
        color: #f8fafc !important;
    }

    body.theme-dark .mobile-more-close {
        background: #111827 !important;
        border-color: #334155 !important;
        color: #f8fafc !important;
    }

    body.theme-dark .mobile-more-grid a {
        background: #1e293b !important;
        color: #cbd5e1 !important;
    }

    body.theme-dark .mobile-more-grid a:hover,
    body.theme-dark .mobile-more-grid a:focus {
        background: #26344a !important;
        color: #ffffff !important;
    }
}

@media screen and (min-width: 821px) {
    .mobile-more-toggle,
    .mobile-more-menu {
        display: none !important;
    }
}


/* --- Stable Beta 0.4 mobile More arrow repair --- */

/*
Repair version:
- Restores the last known working mobile More menu files.
- Keeps the same working menu JS and panel.
- Uses a text dropdown trigger instead of changing the menu structure.
*/

@media screen and (max-width: 820px) {
    .mobile-more-toggle {
        width: auto !important;
        min-width: 74px !important;
        height: 42px !important;
        min-height: 42px !important;
        padding: 0 12px !important;
        flex-direction: row !important;
        gap: 0 !important;
        font: inherit !important;
    }

    .mobile-more-toggle .mobile-more-arrow-icon {
        display: block !important;
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        background: transparent !important;
        color: #101828 !important;
        font-size: 13px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        letter-spacing: -0.01em !important;
        transform: none !important;
        transition: transform .16s ease !important;
        white-space: nowrap !important;
    }

    .mobile-more-toggle .mobile-more-hidden-line {
        display: none !important;
    }

    .mobile-more-toggle.is-open .mobile-more-arrow-icon {
        transform: none !important;
    }

    body.theme-dark .mobile-more-toggle .mobile-more-arrow-icon {
        background: transparent !important;
        color: #f8fafc !important;
    }
}


/* --- Stable Beta 0.4 combined QR navigation --- */

/*
QR Labels and Made QR codes now appear as one navigation item: QR Codes.
The separate page can still exist internally, but the main nav is cleaner.
*/



/* --- Stable Beta 0.4 Registered QR codes safe repair --- */

/*
Safe repair after the previous label patch:
- Restores the last styled CSS file.
- Removes the old mobile " / labels" suffix.
*/

.mobile-more-grid a[href="qr-labels.php"]::after {
    content: "" !important;
    display: none !important;
}


/* --- Stable Beta 0.4 registered QR page labels --- */

/*
User-facing QR wording is now Registered QR codes.
The underlying filenames stay the same so old links keep working.
*/


/* --- Stable Beta 0.4 registered QR duplicate label fix --- */

/*
Fix is mostly PHP text cleanup.
QR Labels remains the label generator.
Registered QR codes remains the registry/list page.
*/


/* --- Stable Beta 0.4 Registered QR codes layout polish --- */

/*
Registered QR codes page layout:
- Better hero/header balance.
- Summary stats become proper cards.
- Search/management sections align better.
- Mobile remains stacked and readable.
*/

.qr-registry-page {
    max-width: 1240px !important;
    margin: 0 auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

.qr-registry-page > .page-head,
.qr-registry-page .page-head,
.qr-registry-page > header:first-child {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 18px !important;
    align-items: start !important;
    margin-bottom: 22px !important;
}

.qr-registry-page h1 {
    margin-bottom: 8px !important;
}

.qr-registry-page h1 + .muted,
.qr-registry-page h1 + p {
    max-width: 720px !important;
    line-height: 1.55 !important;
}

/* The small count links under the header */
.qr-registry-page h1 ~ p a,
.qr-registry-page > p a {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 38px !important;
    padding: 0 13px !important;
    border-radius: 999px !important;
    background: #eef4ff !important;
    color: #1d4ed8 !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    margin: 4px 8px 4px 0 !important;
}

/* Make the count block feel like a proper dashboard strip */
.qr-registry-page > p:has(a) {
    margin: 18px 0 14px !important;
}

/* Management/search cards should not feel narrow and random */
.qr-registry-page .card {
    max-width: none !important;
}

.qr-registry-page .card:has(input[type="search"]),
.qr-registry-page .card:has(input[name="q"]),
.qr-registry-page .card:has(select[name="filter"]),
.qr-registry-page .card:has(select) {
    margin-top: 20px !important;
}

.qr-registry-page .card h2,
.qr-registry-page .card h3 {
    margin-top: 0 !important;
}

/* Better two-column form feel inside the search panel */
.qr-registry-page .form-grid,
.qr-registry-page form .grid,
.qr-registry-page form {
    gap: 16px !important;
}

.qr-registry-page .btn-row,
.qr-registry-page .form-actions {
    gap: 10px !important;
}

/* Registry table/card spacing */
.qr-registry-page table {
    width: 100% !important;
}

.qr-registry-page .table-wrap,
.qr-registry-page .card:has(table) {
    overflow-x: auto !important;
}

/* Make the top action button feel aligned */
.qr-registry-page .page-actions,
.qr-registry-page .actions {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

/* Dark mode */
body.theme-dark .qr-registry-page h1 ~ p a,
body.theme-dark .qr-registry-page > p a {
    background: #1e293b !important;
    color: #dbeafe !important;
}

@media (min-width: 900px) {
    .qr-registry-page {
        padding-top: 34px !important;
    }

    /* Turn the top count links into a neat row */
    .qr-registry-page h1 ~ p,
    .qr-registry-page > p {
        max-width: 900px !important;
    }
}

@media (max-width: 820px) {
    .qr-registry-page {
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-top: 22px !important;
    }

    .qr-registry-page > .page-head,
    .qr-registry-page .page-head,
    .qr-registry-page > header:first-child {
        grid-template-columns: 1fr !important;
    }

    .qr-registry-page .page-actions,
    .qr-registry-page .actions {
        justify-content: flex-start !important;
    }

    .qr-registry-page h1 ~ p a,
    .qr-registry-page > p a {
        width: 100% !important;
        justify-content: space-between !important;
    }
}



/* --- Stable Beta 0.4 QR nav and rotate image fix --- */

/*
QR Labels remains the label printer.
Registered QR codes remains the registry/list page.
Location image rotation now returns to the visual card and uses filemtime cache busting.
*/

#location-visual {
    scroll-margin-top: 110px;
}

.location-visual-actions form {
    margin: 0;
}



/* ===== CSS from itemid_registered_qr_stat_cards_polish_patch.zip ===== */

:root{
  --bg:#f5f7fb;--bg2:#eef4ff;--card:#fff;--text:#101828;--muted:#667085;--line:#d9e1ec;
  --blue:#2563eb;--blue-dark:#1d4ed8;--blue2:#eff4ff;--green:#12b76a;--amber:#f79009;--danger:#b42318;
  --shadow:0 18px 45px rgba(15,23,42,.08);--radius:18px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:linear-gradient(180deg,#f8fbff 0%,var(--bg) 260px);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Arial,sans-serif;font-size:15px;line-height:1.5}a{color:var(--blue-dark);text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3{letter-spacing:-.04em;line-height:1.15;margin:0 0 10px}h1{font-size:34px}h2{font-size:28px}h3{font-size:19px}.muted{color:var(--muted)}.big{font-size:17px;line-height:1.65}.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:22px;padding:14px 24px;background:rgba(255,255,255,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}.brand{display:inline-flex;gap:10px;align-items:center;color:var(--text);font-weight:900;font-size:21px}.brand:hover{text-decoration:none}.brand-mark{width:34px;height:34px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;background:#111827;color:white;font-size:13px;letter-spacing:-.04em}.main-nav{display:flex;align-items:center;gap:4px;flex:1;flex-wrap:wrap}.main-nav a{color:#344054;padding:9px 10px;border-radius:10px;font-weight:700;font-size:14px}.main-nav a:hover{background:var(--blue2);text-decoration:none}.top-actions{display:flex;align-items:center;gap:12px}.muted-link{color:var(--muted);font-weight:700}.page{max-width:1180px;margin:0 auto;padding:28px 22px 60px}.site-footer{max-width:1180px;margin:0 auto;padding:22px;color:var(--muted);border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px}.page-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin:0 0 20px}.page-head p{margin:4px 0 0}.card{background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:18px;box-shadow:0 10px 30px rgba(15,23,42,.045)}.hero{display:grid;grid-template-columns:2fr 1fr;gap:18px;margin-bottom:18px}.hero .card:first-child{background:linear-gradient(135deg,#fff 0%,#f4f7ff 100%)}.grid{display:grid;gap:18px}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.cards4{grid-template-columns:repeat(4,minmax(0,1fr))}.cards4 .card{margin:0}.cards4 h2{font-size:34px;margin-top:6px}.wide{max-width:920px}.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;background:var(--blue);color:white;padding:11px 16px;font-weight:900;cursor:pointer;text-decoration:none;box-shadow:0 8px 18px rgba(37,99,235,.18);font:inherit}.btn:hover{text-decoration:none;background:var(--blue-dark)}.btn.secondary{background:#e8efff;color:var(--blue-dark);box-shadow:none}.btn.secondary:hover{background:#dbe7ff}.btn.ghost{background:white;color:#344054;border:1px solid var(--line);box-shadow:none}.btn.small{padding:8px 12px;border-radius:10px;font-size:14px}.scan-link{background:#111827;color:#fff!important}.form{display:grid;gap:15px}.form label{display:grid;gap:7px;color:#344054;font-size:14px;font-weight:700}.form input,.form select,.form textarea,.searchbar input,.inline-form input,.inline-form select{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px 13px;background:white;color:var(--text);font:inherit;outline:none}.form input:focus,.form select:focus,.form textarea:focus,.searchbar input:focus,.inline-form input:focus,.inline-form select:focus{border-color:#9db7ff;box-shadow:0 0 0 4px rgba(37,99,235,.10)}.searchbar,.inline-form{display:flex;gap:10px;margin-bottom:18px}.table-wrap{overflow:auto;padding:0}table{width:100%;border-collapse:collapse;min-width:720px}th,td{text-align:left;border-bottom:1px solid var(--line);padding:14px 16px;vertical-align:top}th{font-size:12px;color:var(--muted);font-weight:900;text-transform:uppercase;letter-spacing:.05em;background:#fbfcff}tr:hover td{background:#fbfdff}.pill{display:inline-flex;background:var(--blue2);color:var(--blue-dark);border-radius:999px;padding:4px 9px;font-size:13px;font-weight:900}.pill.low,.pill.Empty,.pill.Missing{background:#fff4ed;color:#b54708}.visual{max-width:100%;border-radius:14px;border:1px solid var(--line);box-shadow:0 8px 20px rgba(15,23,42,.06)}.qr-box{display:inline-block;background:white;padding:12px;border:1px solid var(--line);border-radius:14px}.code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:900;background:#f2f4f7;border:1px solid #e4e7ec;border-radius:10px;padding:4px 8px;display:inline-block}.labels{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.label{background:#fff;border:1px solid #111;border-radius:6px;text-align:center;padding:11px;break-inside:avoid}.label .qr{display:inline-block}.label-toolbar{margin:12px 0}.check{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center;gap:8px!important}.alert{background:#fef3f2;color:var(--danger);border:1px solid #fecdca;border-radius:12px;padding:11px 13px;font-weight:700}.notice{background:#eff8ff;color:#175cd3;border:1px solid #b2ddff;border-radius:12px;padding:11px 13px;font-weight:700}.empty{padding:24px;border:1px dashed var(--line);border-radius:14px;background:#fbfcff;color:var(--muted)}
/* Auth */.auth-body{min-height:100vh!important;display:grid!important;place-items:center!important;padding:28px;background:radial-gradient(circle at top left,rgba(37,99,235,.16),transparent 34%),radial-gradient(circle at bottom right,rgba(16,185,129,.10),transparent 28%),var(--bg)}.auth-shell{width:min(980px,100%);display:grid;grid-template-columns:1.15fr .85fr;gap:18px;align-items:stretch}.auth-panel{background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow)}.auth-copy{padding:36px;display:flex;flex-direction:column;justify-content:center;min-height:440px}.logo-mark{width:54px;height:54px;border-radius:16px;background:#111827;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;letter-spacing:-.04em;margin-bottom:22px}.eyebrow{font-weight:900;color:var(--blue);letter-spacing:.08em;text-transform:uppercase;font-size:13px;margin:0 0 10px}.auth-copy h1{font-size:46px;letter-spacing:-.055em;line-height:1.02;margin:0 0 16px;max-width:620px}.auth-copy .big{font-size:17px;line-height:1.6;max-width:600px;margin:0 0 22px}.feature-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}.feature-list span{background:var(--blue2);color:var(--blue-dark);border:1px solid #dbe7ff;border-radius:999px;padding:8px 11px;font-weight:900;font-size:13px}.auth-card{width:auto!important;padding:30px;display:flex;flex-direction:column;justify-content:center}.auth-card h2{font-size:30px;margin:0 0 8px}.auth-card .muted{margin-top:0;margin-bottom:20px}.auth-card input{height:46px}.subtle-link{font-size:14px;font-weight:800;justify-self:start}.auth-card .actions{margin-top:2px}
@media(max-width:900px){.topbar{align-items:flex-start;flex-direction:column}.top-actions{width:100%;justify-content:space-between}.hero,.grid.two,.grid.cards4{grid-template-columns:1fr}.page-head{display:block}.searchbar,.inline-form{flex-direction:column}.labels{grid-template-columns:repeat(2,1fr)}.auth-shell{grid-template-columns:1fr}.auth-copy{min-height:0;padding:24px}.auth-copy h1{font-size:34px}.auth-card{padding:24px}.site-footer{flex-direction:column}}@media print{body{background:white}.topbar,.page-head,.card:not(.table-wrap),.label-toolbar,.site-footer{display:none!important}.page{padding:0}.labels{grid-template-columns:repeat(4,1fr);gap:8px}.label{page-break-inside:avoid;box-shadow:none}}

/* ItemID QR/template patch */
.section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}.section-head h2{font-size:22px;margin:0 0 4px}.field-builder{display:grid;gap:14px;border:1px solid var(--line);border-radius:16px;padding:16px;background:#fbfcff}.quick-fields{display:flex;gap:8px;flex-wrap:wrap}.field-chip{border:1px solid #dbe7ff;background:#eff4ff;color:#1d4ed8;border-radius:999px;padding:7px 10px;font-weight:800;cursor:pointer}.field-chip:hover{background:#dbe7ff}.fields-list{display:grid;gap:10px}.field-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}.label-sheet{display:grid;grid-template-columns:repeat(var(--label-columns,4),minmax(0,1fr));gap:12px}.print-label-card{background:#fff;border:1px solid #111827;border-radius:10px;text-align:center;padding:12px;break-inside:avoid;min-height:calc(var(--qr-size,120px) + 62px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px}.print-label-card .qr{display:inline-flex;align-items:center;justify-content:center}.print-label-card .print-code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:15px;font-weight:900;letter-spacing:.06em}.print-label-card .print-name{font-size:12px;font-weight:800;color:#344054;line-height:1.25}.row-actions{display:flex;gap:12px;white-space:nowrap}.qr-size-form select{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px 13px;background:white;color:var(--text);font:inherit;outline:none}@media(max-width:700px){.field-row{grid-template-columns:1fr}.label-sheet{grid-template-columns:repeat(2,minmax(0,1fr))}.row-actions{display:grid;gap:6px}}

/* ItemID workflow polish patch */
.mini-action{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;border-radius:10px;padding:7px 10px;font-weight:900;color:#1d4ed8;text-decoration:none;white-space:nowrap}.mini-action:hover{background:#eff4ff;text-decoration:none}.pretty-fields{gap:18px}.pretty-list{gap:12px}.pretty-row{grid-template-columns:1fr 42px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px}.pretty-row input{border:0!important;box-shadow:none!important;padding:9px 10px!important}.icon-button{width:34px;height:34px;border:0;border-radius:10px;background:#f2f4f7;color:#344054;font-size:22px;line-height:1;cursor:pointer;font-weight:900}.icon-button:hover{background:#fee4e2;color:#b42318}.community-check{align-self:end;background:#fbfcff;border:1px solid var(--line);border-radius:14px;padding:12px}.community-check span{display:grid;gap:2px}.community-check small{color:var(--muted);font-weight:600}.field-chip{font-size:13px}.print-label-card{min-height:calc(var(--qr-mm,35mm) + 22mm);padding:8mm 4mm}.print-label-card .print-name{max-width:100%;overflow-wrap:anywhere}.custom-prefix-row{display:none}.item-hero{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.item-hero h2{font-size:24px;margin:4px 0 0}.activity-line{border-bottom:1px solid var(--line);padding:0 0 10px;margin:0 0 10px}.qr-size-form{margin-top:14px;display:flex;gap:10px;align-items:end;flex-wrap:wrap}.qr-size-form label{min-width:190px}.add-item-flow{gap:20px}.flow-step{display:flex;gap:14px;align-items:flex-start;border-top:1px solid var(--line);padding-top:18px}.flow-step:first-of-type{border-top:0;padding-top:0}.flow-step h2{font-size:22px;margin:0 0 4px}.step-badge{width:34px;height:34px;border-radius:999px;background:#111827;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:900;flex:0 0 auto}.field-as-card{border:1px dashed #b7c5df;border-radius:14px;padding:13px;background:#fbfcff}.field-as-card p{margin:4px 0 10px}.code-pill{display:inline-flex;background:#f2f4f7;border:1px solid #e4e7ec;border-radius:10px;padding:5px 9px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:900}@media(max-width:800px){.item-hero{grid-template-columns:1fr}.pretty-row{grid-template-columns:1fr 42px}.qr-size-form{display:grid}.flow-step{display:grid}.field-as-card .btn{width:100%}}


/* ItemID workflow patch 2 */
.beta-badge{display:inline-flex;align-items:center;border:1px solid #c7d7fe;background:#eff4ff;color:#1d4ed8;border-radius:999px;padding:2px 7px;font-size:11px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;line-height:1.4}.template-create-card{display:flex;align-items:center;justify-content:space-between;gap:14px}.template-create-card p{margin:3px 0 0}.compact-check{width:auto!important;display:flex!important;grid-template-columns:auto 1fr!important;align-items:center!important;gap:8px!important;min-width:170px}.compact-check input{width:auto!important}.qr-box canvas,.qr-box img{display:block!important;max-width:100%!important;max-height:100%!important}.print-label-card{overflow:hidden}.print-label-card .dynamic-qr canvas,.print-label-card .dynamic-qr img{display:block!important}.print-label-card .print-code,.print-label-card .print-name{max-width:100%;overflow-wrap:anywhere}.single-print-label{overflow:hidden}@media(max-width:800px){.template-create-card{display:grid}.compact-check{min-width:0}}

/* Items table action-cell border fix */
td.row-actions,
th.row-actions {
    display: table-cell !important;
    white-space: nowrap;
    vertical-align: middle;
    border-bottom: 1px solid var(--line) !important;
}

td.row-actions {
    min-width: 230px;
}

td.row-actions .mini-action {
    margin-right: 8px;
    margin-bottom: 0;
}

td.row-actions .mini-action:last-child {
    margin-right: 0;
}

tr:hover td.row-actions {
    background: #fbfdff;
}

@media (max-width: 760px) {
    td.row-actions {
        min-width: 170px;
    }

    td.row-actions .mini-action {
        display: flex;
        width: 100%;
        margin-right: 0;
        margin-bottom: 6px;
    }

    td.row-actions .mini-action:last-child {
        margin-bottom: 0;
    }
}

/* Stable Beta 0.4 additions */
.btn.danger,
.btn.danger.ghost {
  color: #b42318 !important;
  border-color: #fecdca !important;
  background: #fff !important;
  box-shadow: none !important;
}
.btn.danger:hover,
.btn.danger.ghost:hover {
  background: #fef3f2 !important;
  text-decoration: none;
}
.mini-action.danger {
  color: #b42318 !important;
  border-color: #fecdca !important;
  background: #fff !important;
}
.export-card {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.export-card:hover {
  transform: translateY(-2px);
  text-decoration: none;
  border-color: #b8c7e6;
  box-shadow: 0 18px 42px rgba(15,23,42,.09);
}
.site-footer a { color: inherit; font-weight: 800; }

/* Stable Beta 0.4 template/item field builder polish */
.item-template-field-row {
    display: grid;
    grid-template-columns: minmax(150px, .35fr) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 12px;
    border: 1px solid #d8e0ee;
    border-radius: 14px;
    background: #ffffff;
    margin-bottom: 10px;
}

.template-field-input-wrap {
    display: grid;
    gap: 6px;
}

.template-field-input-wrap input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    margin: 8px 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.field-unit-hint {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 9px;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 900;
}

.small {
    font-size: 12px;
}

@media (max-width: 700px) {
    .item-template-field-row {
        grid-template-columns: 1fr;
    }
}

/* --- Profile/preferences patch CSS --- */

/* Profile and preferences */
.profile-settings-row {
    display: grid;
    grid-template-columns: 112px 1fr;
    gap: 22px;
    align-items: center;
    margin-bottom: 20px;
}

.profile-settings-avatar {
    width: 96px;
    height: 96px;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid #d8e0ee;
    background: #eef4ff;
    color: #1d4ed8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    font-weight: 900;
}

.profile-settings-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.checkbox-line {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    font-weight: 800;
}

.checkbox-line input,
.checkbox-card input {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.checkbox-card {
    min-height: 70px;
    border: 1px solid #d8e0ee;
    border-radius: 14px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}

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

.checkbox-card small {
    margin-top: 4px;
    color: #64748b;
}

@media (max-width: 650px) {
    .profile-settings-row {
        grid-template-columns: 1fr;
    }
}


/* --- Stable Beta 0.4 theme toggle + dark fix --- */

.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,255,255,.94);
    border-bottom: 1px solid #d8e0ee;
    backdrop-filter: blur(14px);
}

.topbar-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    gap: 22px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #0f172a;
    flex: 0 0 auto;
}

.brand:hover {
    text-decoration: none;
}

.brand-name {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1;
}

.beta-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 19px;
    padding: 0 7px;
    border: 1px solid #b8c7e6;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    white-space: nowrap;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 auto;
    min-width: 0;
}

.main-nav a {
    color: #335075;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
}

.main-nav a:hover {
    color: #2563eb;
    text-decoration: none;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

.scan-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 16px;
    border-radius: 12px;
    background: #111827;
    color: #ffffff !important;
    text-decoration: none;
    font-weight: 800;
    font-size: 14px;
    box-shadow: 0 10px 24px rgba(17, 24, 39, .18);
}

.scan-button:hover {
    text-decoration: none;
}

.profile-menu {
    position: relative;
}

.profile-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 4px 8px 4px 4px;
    border: 1px solid #d8e0ee;
    border-radius: 999px;
    background: #ffffff;
    color: #0f172a;
    text-decoration: none;
    font-weight: 800;
    cursor: pointer;
    max-width: 260px;
}

.profile-avatar {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    object-fit: cover;
    background: #eef4ff;
    color: #1d4ed8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    border: 1px solid #c9d7f2;
    overflow: hidden;
    flex: 0 0 auto;
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-label {
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.profile-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 280px;
    border: 1px solid #d8e0ee;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .16);
    padding: 10px;
    display: none;
}

.profile-menu:hover .profile-dropdown,
.profile-menu:focus-within .profile-dropdown {
    display: block;
}

.profile-dropdown-header {
    padding: 10px;
    border-bottom: 1px solid #edf2f7;
    margin-bottom: 8px;
}

.profile-dropdown-header strong,
.profile-dropdown-header span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-dropdown-header span {
    color: #64748b;
    font-size: 13px;
    margin-top: 2px;
}

.profile-dropdown a {
    display: block;
    padding: 10px;
    border-radius: 12px;
    color: #334155;
    text-decoration: none;
    font-weight: 800;
}

.profile-dropdown a:hover {
    background: #f1f5f9;
    color: #0f172a;
    text-decoration: none;
}

.theme-toggle-form {
    margin: 0;
}

.theme-toggle {
    width: 62px;
    height: 34px;
    border: 1px solid #d8e0ee;
    border-radius: 999px;
    background: #eef4ff;
    position: relative;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    box-shadow: none;
}

.theme-toggle-bulb {
    position: absolute;
    left: 8px;
    font-size: 15px;
    line-height: 1;
    z-index: 2;
    opacity: .8;
}

.theme-toggle-knob {
    position: absolute;
    left: 3px;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 3px 10px rgba(15,23,42,.18);
    transition: transform .16s ease;
}

.theme-toggle.is-dark {
    background: #172554;
    border-color: #2563eb;
}

.theme-toggle.is-dark .theme-toggle-bulb {
    left: 36px;
    opacity: 1;
}

.theme-toggle.is-dark .theme-toggle-knob {
    transform: translateX(28px);
    background: #0f172a;
}

.app-shell {
    max-width: 1240px;
    margin: 0 auto;
    padding: 28px 18px 48px;
}

/* Dark theme variables and hard overrides */
body.theme-dark {
    --bg:#0b1220;
    --bg2:#0f172a;
    --card:#111827;
    --text:#f8fafc;
    --muted:#a8b6ca;
    --line:#334155;
    --blue2:#172554;
    background: #0b1220 !important;
    color: #f8fafc !important;
    color-scheme: dark;
}

body.theme-dark .topbar {
    background: rgba(15, 23, 42, .96) !important;
    border-bottom-color: #334155 !important;
}

body.theme-dark .brand,
body.theme-dark .brand-name,
body.theme-dark .profile-label {
    color: #f8fafc !important;
}

body.theme-dark .beta-badge {
    background: #172554 !important;
    border-color: #2563eb !important;
    color: #bfdbfe !important;
}

body.theme-dark .main-nav a {
    color: #cbd5e1 !important;
}

body.theme-dark .main-nav a:hover {
    background: #1e293b !important;
    color: #ffffff !important;
}

body.theme-dark .profile-trigger,
body.theme-dark .profile-dropdown,
body.theme-dark .card,
body.theme-dark section.card,
body.theme-dark form.card,
body.theme-dark details.card,
body.theme-dark .table-wrap,
body.theme-dark .metric-card,
body.theme-dark .filter-panel,
body.theme-dark .template-field-card,
body.theme-dark .template-field-row,
body.theme-dark .location-summary,
body.theme-dark .auth-panel {
    background: #111827 !important;
    background-color: #111827 !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
    box-shadow: 0 18px 45px rgba(0,0,0,.22) !important;
}

body.theme-dark .hero .card:first-child {
    background: linear-gradient(135deg, #111827 0%, #172033 100%) !important;
}

body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark strong,
body.theme-dark label,
body.theme-dark th,
body.theme-dark td {
    color: #f8fafc !important;
}

body.theme-dark .muted,
body.theme-dark .help,
body.theme-dark small,
body.theme-dark .site-footer,
body.theme-dark .metric-card span {
    color: #a8b6ca !important;
}

body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

body.theme-dark input::placeholder,
body.theme-dark textarea::placeholder {
    color: #74839a !important;
}

body.theme-dark table,
body.theme-dark tbody,
body.theme-dark tr {
    background: #111827 !important;
    color: #f8fafc !important;
}

body.theme-dark thead,
body.theme-dark th {
    background: #0f172a !important;
    color: #cbd5e1 !important;
}

body.theme-dark td {
    background: #111827 !important;
    color: #e5edf8 !important;
    border-color: #334155 !important;
}

body.theme-dark tr:hover td {
    background: #172033 !important;
}

body.theme-dark .code-pill,
body.theme-dark .badge,
body.theme-dark .pill,
body.theme-dark .status-pill,
body.theme-dark .tag,
body.theme-dark .field-unit-hint {
    background: #1e293b !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}

body.theme-dark .btn.secondary,
body.theme-dark .btn.ghost,
body.theme-dark a.btn.secondary,
body.theme-dark a.btn.ghost {
    background: #1e293b !important;
    color: #bfdbfe !important;
    border: 1px solid #334155 !important;
    box-shadow: none !important;
}

body.theme-dark .btn.secondary:hover,
body.theme-dark .btn.ghost:hover {
    background: #26344a !important;
    color: #ffffff !important;
}

body.theme-dark .qr-label-preview,
body.theme-dark .qr-preview,
body.theme-dark .qr-card-preview,
body.theme-dark .print-label,
body.theme-dark .label-card,
body.theme-dark .print-sheet,
body.theme-dark .print-sheet .label,
body.theme-dark canvas,
body.theme-dark .qr-box {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #111827 !important;
    border-color: #111827 !important;
}

/* System preference can be selected in profile, but the top toggle only switches light/dark. */
@media (max-width: 900px) {
    .topbar-inner {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 12px;
    }

    .main-nav {
        order: 3;
        width: 100%;
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .topbar-actions {
        margin-left: auto;
    }

    .profile-label {
        display: none;
    }
}


/* --- Stable Beta 0.4 sun/moon theme toggle positioning --- */

.topbar-inner {
    display: flex !important;
    align-items: center !important;
}

.main-nav {
    justify-content: flex-start;
}

.topbar-actions {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.theme-toggle-form {
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}

.theme-toggle {
    width: 66px !important;
    height: 36px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 999px !important;
    background: #e0f2fe !important;
    position: relative !important;
    cursor: pointer !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

.theme-icon {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1 !important;
    font-size: 15px !important;
    line-height: 1 !important;
    pointer-events: none !important;
}

.theme-icon-sun {
    left: 10px !important;
    color: #f59e0b !important;
    opacity: 1 !important;
}

.theme-icon-moon {
    right: 11px !important;
    color: #64748b !important;
    opacity: .55 !important;
}

.theme-toggle-knob {
    position: absolute !important;
    left: 3px !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    box-shadow: 0 3px 10px rgba(15,23,42,.22) !important;
    transition: transform .16s ease, background .16s ease !important;
    z-index: 2 !important;
}

.theme-toggle.is-dark {
    background: #172554 !important;
    border-color: #2563eb !important;
}

.theme-toggle.is-dark .theme-toggle-knob {
    transform: translateX(30px) !important;
    background: #0f172a !important;
}

.theme-toggle.is-dark .theme-icon-sun {
    opacity: .45 !important;
    color: #94a3b8 !important;
}

.theme-toggle.is-dark .theme-icon-moon {
    opacity: 1 !important;
    color: #dbeafe !important;
}

body.theme-dark .theme-toggle {
    background: #172554 !important;
    border-color: #2563eb !important;
}

@media (max-width: 900px) {
    .topbar-actions {
        margin-left: auto !important;
    }
}


/* --- Stable Beta 0.4 dark mode button/pill fix --- */

/* General white button fix in dark mode */
body.theme-dark button,
body.theme-dark input[type="submit"],
body.theme-dark input[type="button"],
body.theme-dark .btn,
body.theme-dark a.btn {
    border-color: #334155;
}

body.theme-dark .btn:not(.danger):not(.primary),
body.theme-dark a.btn:not(.danger):not(.primary),
body.theme-dark button.btn:not(.danger):not(.primary) {
    background: #1e293b !important;
    color: #dbeafe !important;
    border: 1px solid #334155 !important;
    box-shadow: none !important;
}

body.theme-dark .btn:not(.danger):not(.primary):hover,
body.theme-dark a.btn:not(.danger):not(.primary):hover,
body.theme-dark button.btn:not(.danger):not(.primary):hover {
    background: #26344a !important;
    color: #ffffff !important;
}

/* Keep main action buttons blue */
body.theme-dark .btn:first-child,
body.theme-dark .btn.primary,
body.theme-dark button.btn.primary,
body.theme-dark a.btn.primary {
    background: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
}

/* Delete/danger buttons were showing white. */
body.theme-dark .btn.danger,
body.theme-dark a.btn.danger,
body.theme-dark button.btn.danger,
body.theme-dark .danger,
body.theme-dark a[href*="delete.php"],
body.theme-dark button[name*="delete"],
body.theme-dark button[value*="delete"],
body.theme-dark button[value*="clear_reserved"],
body.theme-dark .delete-button,
body.theme-dark .clear-button {
    background: #3f1d1d !important;
    color: #fecaca !important;
    border: 1px solid #7f1d1d !important;
    box-shadow: none !important;
}

body.theme-dark .btn.danger:hover,
body.theme-dark a.btn.danger:hover,
body.theme-dark button.btn.danger:hover,
body.theme-dark .danger:hover,
body.theme-dark a[href*="delete.php"]:hover,
body.theme-dark button[name*="delete"]:hover,
body.theme-dark button[value*="delete"]:hover,
body.theme-dark button[value*="clear_reserved"]:hover,
body.theme-dark .delete-button:hover,
body.theme-dark .clear-button:hover {
    background: #7f1d1d !important;
    color: #ffffff !important;
}

/* Some pages use plain anchors styled as buttons without btn classes. */
body.theme-dark .row-actions a,
body.theme-dark .table-actions-cell a,
body.theme-dark .actions a,
body.theme-dark .actions button {
    border-color: #334155;
}

body.theme-dark .row-actions a:not(.danger):not([href*="delete.php"]),
body.theme-dark .table-actions-cell a:not(.danger):not([href*="delete.php"]) {
    background: #1e293b !important;
    color: #dbeafe !important;
    border: 1px solid #334155 !important;
}

body.theme-dark .row-actions a:not(.danger):not([href*="delete.php"]):hover,
body.theme-dark .table-actions-cell a:not(.danger):not([href*="delete.php"]):hover {
    background: #26344a !important;
    color: #ffffff !important;
}

/* Code pills were still too pale in some table cells. */
body.theme-dark .code-pill,
body.theme-dark td .code-pill,
body.theme-dark .qr-code-pill,
body.theme-dark .item-id-pill {
    background: #1e293b !important;
    color: #e2e8f0 !important;
    border: 1px solid #334155 !important;
}

/* Search filter detail summary was still white on some browsers. */
body.theme-dark details,
body.theme-dark details summary,
body.theme-dark details.card,
body.theme-dark details.card summary {
    background: #111827 !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

/* Preserve white only where it must be white for QR/print. */
body.theme-dark .qr-label-preview,
body.theme-dark .qr-preview,
body.theme-dark .qr-card-preview,
body.theme-dark .print-label,
body.theme-dark .label-card,
body.theme-dark .print-sheet,
body.theme-dark .print-sheet .label,
body.theme-dark canvas,
body.theme-dark .qr-box {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #111827 !important;
    border-color: #111827 !important;
}

/* Same button fixes for system theme when OS is dark. */
@media (prefers-color-scheme: dark) {
    body.theme-system .btn:not(.danger):not(.primary),
    body.theme-system a.btn:not(.danger):not(.primary),
    body.theme-system button.btn:not(.danger):not(.primary) {
        background: #1e293b !important;
        color: #dbeafe !important;
        border: 1px solid #334155 !important;
        box-shadow: none !important;
    }

    body.theme-system .btn.danger,
    body.theme-system a.btn.danger,
    body.theme-system button.btn.danger,
    body.theme-system .danger,
    body.theme-system a[href*="delete.php"],
    body.theme-system button[name*="delete"],
    body.theme-system button[value*="delete"],
    body.theme-system button[value*="clear_reserved"],
    body.theme-system .delete-button,
    body.theme-system .clear-button {
        background: #3f1d1d !important;
        color: #fecaca !important;
        border: 1px solid #7f1d1d !important;
        box-shadow: none !important;
    }

    body.theme-system .code-pill,
    body.theme-system td .code-pill,
    body.theme-system .qr-code-pill,
    body.theme-system .item-id-pill {
        background: #1e293b !important;
        color: #e2e8f0 !important;
        border: 1px solid #334155 !important;
    }

    body.theme-system details,
    body.theme-system details summary,
    body.theme-system details.card,
    body.theme-system details.card summary {
        background: #111827 !important;
        color: #f8fafc !important;
        border-color: #334155 !important;
    }
}


/* --- Stable Beta 0.4 dark cleanup: toggle, white panels, buttons --- */

/* Hide old/broken theme toggle visuals if old CSS is still cached on a page. */
.theme-toggle,
.theme-toggle-form,
.theme-icon,
.theme-option,
.theme-toggle-bulb {
    display: none !important;
}

/* Clean topbar layout */
.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,255,255,.94);
    border-bottom: 1px solid #d8e0ee;
    backdrop-filter: blur(14px);
}

.topbar-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    gap: 22px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #0f172a;
    flex: 0 0 auto;
}

.brand:hover {
    text-decoration: none;
}

.brand-name {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1;
}

.beta-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 19px;
    padding: 0 7px;
    border: 1px solid #b8c7e6;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    white-space: nowrap;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 auto;
    min-width: 0;
}

.main-nav a {
    color: #335075;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
}

.main-nav a:hover {
    color: #2563eb;
    text-decoration: none;
}

.topbar-actions {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex: 0 0 auto;
}

.scan-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 16px;
    border-radius: 12px;
    background: #111827;
    color: #ffffff !important;
    text-decoration: none;
    font-weight: 800;
    font-size: 14px;
    box-shadow: 0 10px 24px rgba(17,24,39,.18);
}

.scan-button:hover {
    text-decoration: none;
}

.scan-icon {
    font-size: 15px;
    line-height: 1;
}

.profile-menu {
    position: relative;
}

.profile-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 4px 8px 4px 4px;
    border: 1px solid #d8e0ee;
    border-radius: 999px;
    background: #ffffff;
    color: #0f172a;
    text-decoration: none;
    font-weight: 800;
    cursor: pointer;
    max-width: 260px;
}

.profile-avatar {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    border: 1px solid #c9d7f2;
    overflow: hidden;
    flex: 0 0 auto;
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-label {
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.profile-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 280px;
    border: 1px solid #d8e0ee;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(15,23,42,.16);
    padding: 10px;
    display: none;
}

.profile-menu:hover .profile-dropdown,
.profile-menu:focus-within .profile-dropdown {
    display: block;
}

.profile-dropdown-header {
    padding: 10px;
    border-bottom: 1px solid #edf2f7;
    margin-bottom: 8px;
}

.profile-dropdown-header strong,
.profile-dropdown-header span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-dropdown-header span {
    color: #64748b;
    font-size: 13px;
    margin-top: 2px;
}

.profile-dropdown a {
    display: block;
    padding: 10px;
    border-radius: 12px;
    color: #334155;
    text-decoration: none;
    font-weight: 800;
}

.profile-dropdown a:hover {
    background: #f1f5f9;
    color: #0f172a;
    text-decoration: none;
}

/* New independent sun/moon switch */
.mode-switch-form {
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}

.mode-switch {
    width: 72px !important;
    height: 38px !important;
    border-radius: 999px !important;
    border: 1px solid #cbd5e1 !important;
    background: #e0f2fe !important;
    position: relative !important;
    cursor: pointer !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: inline-flex !important;
    align-items: center !important;
    box-shadow: none !important;
}

.mode-track-icon {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    pointer-events: none !important;
}

.mode-track-sun {
    left: 11px !important;
    color: #f59e0b !important;
    opacity: .25 !important;
}

.mode-track-moon {
    right: 12px !important;
    color: #64748b !important;
    opacity: .35 !important;
}

.mode-knob {
    position: absolute !important;
    left: 3px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #f59e0b !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    box-shadow: 0 3px 10px rgba(15,23,42,.22) !important;
    transition: transform .16s ease, background .16s ease, color .16s ease !important;
    z-index: 2 !important;
}

.mode-switch.mode-dark {
    background: #172554 !important;
    border-color: #2563eb !important;
}

.mode-switch.mode-dark .mode-knob {
    transform: translateX(34px) !important;
    background: #0f172a !important;
    color: #dbeafe !important;
}

.mode-switch.mode-dark .mode-track-sun {
    color: #94a3b8 !important;
    opacity: .35 !important;
}

.mode-switch.mode-dark .mode-track-moon {
    opacity: .22 !important;
}

/* Dark theme core */
body.theme-dark {
    --bg:#0b1220;
    --bg2:#0f172a;
    --card:#111827;
    --text:#f8fafc;
    --muted:#a8b6ca;
    --line:#334155;
    --blue2:#172554;
    background:#0b1220 !important;
    color:#f8fafc !important;
    color-scheme: dark;
}

body.theme-dark .topbar {
    background: rgba(15,23,42,.96) !important;
    border-bottom-color: #334155 !important;
}

body.theme-dark .brand,
body.theme-dark .brand-name,
body.theme-dark .profile-label {
    color:#f8fafc !important;
}

body.theme-dark .beta-badge {
    background:#172554 !important;
    border-color:#2563eb !important;
    color:#bfdbfe !important;
}

body.theme-dark .main-nav a {
    color:#cbd5e1 !important;
}

body.theme-dark .main-nav a:hover {
    background:#1e293b !important;
    color:#ffffff !important;
}

body.theme-dark .scan-button {
    background:#2563eb !important;
    color:#ffffff !important;
}

body.theme-dark .profile-trigger,
body.theme-dark .profile-dropdown {
    background:#111827 !important;
    border-color:#334155 !important;
    color:#f8fafc !important;
}

body.theme-dark .profile-dropdown-header {
    border-bottom-color:#334155 !important;
}

body.theme-dark .profile-dropdown-header span {
    color:#94a3b8 !important;
}

body.theme-dark .profile-dropdown a {
    color:#cbd5e1 !important;
}

body.theme-dark .profile-dropdown a:hover {
    background:#1e293b !important;
    color:#ffffff !important;
}

/* Kill the stubborn white panels seen in Items/Add Item/Templates/Made QR codes */
body.theme-dark .card,
body.theme-dark section.card,
body.theme-dark form.card,
body.theme-dark details.card,
body.theme-dark .table-wrap,
body.theme-dark .items-filter-panel,
body.theme-dark .items-filter-panel[open],
body.theme-dark .items-filter-panel summary,
body.theme-dark .field-as-card,
body.theme-dark .field-as-card.template-create-card,
body.theme-dark .template-fields-panel,
body.theme-dark .template-field-builder,
body.theme-dark .template-share-card,
body.theme-dark .template-preset,
body.theme-dark .template-field-row,
body.theme-dark .template-field-row-main,
body.theme-dark .template-field-row-extra,
body.theme-dark .template-options-wrap,
body.theme-dark .template-required,
body.theme-dark .template-create-card,
body.theme-dark .location-summary,
body.theme-dark .scanner-box,
body.theme-dark .notice:not(.print-label):not(.label-card),
body.theme-dark .alert,
body.theme-dark .stat-card,
body.theme-dark .metric-card {
    background:#111827 !important;
    background-color:#111827 !important;
    color:#f8fafc !important;
    border-color:#334155 !important;
    box-shadow:0 18px 45px rgba(0,0,0,.22) !important;
}

body.theme-dark .hero .card:first-child {
    background:linear-gradient(135deg,#111827 0%,#172033 100%) !important;
}

body.theme-dark .items-filter-panel *,
body.theme-dark .template-field-builder *,
body.theme-dark .template-share-card *,
body.theme-dark .template-preset *,
body.theme-dark .field-as-card *,
body.theme-dark .template-fields-panel *,
body.theme-dark .card *,
body.theme-dark .table-wrap * {
    color: inherit;
}

body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark strong,
body.theme-dark label,
body.theme-dark th,
body.theme-dark td,
body.theme-dark summary,
body.theme-dark .section-head,
body.theme-dark .page-head {
    color:#f8fafc !important;
}

body.theme-dark .muted,
body.theme-dark .help,
body.theme-dark .hint,
body.theme-dark small,
body.theme-dark .template-help,
body.theme-dark .template-field-hint,
body.theme-dark .site-footer,
body.theme-dark .items-filter-grid label {
    color:#a8b6ca !important;
}

body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea,
body.theme-dark .items-search-row input,
body.theme-dark .items-filter-grid select,
body.theme-dark .template-field-row input,
body.theme-dark .template-field-row select {
    background:#0f172a !important;
    border-color:#334155 !important;
    color:#f8fafc !important;
}

body.theme-dark input::placeholder,
body.theme-dark textarea::placeholder {
    color:#74839a !important;
}

body.theme-dark table,
body.theme-dark tbody,
body.theme-dark tr {
    background:#111827 !important;
    color:#f8fafc !important;
}

body.theme-dark thead,
body.theme-dark th {
    background:#0f172a !important;
    color:#cbd5e1 !important;
}

body.theme-dark td {
    background:#111827 !important;
    color:#e5edf8 !important;
    border-color:#334155 !important;
}

body.theme-dark tr:hover td {
    background:#172033 !important;
}

body.theme-dark .code-pill,
body.theme-dark td .code-pill,
body.theme-dark .qr-code-pill,
body.theme-dark .item-id-pill,
body.theme-dark .badge,
body.theme-dark .pill,
body.theme-dark .status-pill,
body.theme-dark .tag,
body.theme-dark .field-unit-hint {
    background:#1e293b !important;
    color:#e2e8f0 !important;
    border:1px solid #334155 !important;
}

/* Buttons, including delete buttons that were staying white */
body.theme-dark .btn,
body.theme-dark a.btn,
body.theme-dark button.btn,
body.theme-dark .row-actions a,
body.theme-dark .table-actions-cell a,
body.theme-dark .actions a,
body.theme-dark .actions button {
    background:#1e293b !important;
    color:#dbeafe !important;
    border:1px solid #334155 !important;
    box-shadow:none !important;
}

body.theme-dark .btn:hover,
body.theme-dark a.btn:hover,
body.theme-dark button.btn:hover,
body.theme-dark .row-actions a:hover,
body.theme-dark .table-actions-cell a:hover,
body.theme-dark .actions a:hover,
body.theme-dark .actions button:hover {
    background:#26344a !important;
    color:#ffffff !important;
}

body.theme-dark .btn.danger,
body.theme-dark a.btn.danger,
body.theme-dark button.btn.danger,
body.theme-dark a[href*="delete.php"],
body.theme-dark button[name*="delete"],
body.theme-dark button[value*="delete"],
body.theme-dark button[value*="clear_reserved"],
body.theme-dark .delete-button,
body.theme-dark .clear-button {
    background:#3f1d1d !important;
    color:#fecaca !important;
    border:1px solid #7f1d1d !important;
}

body.theme-dark .btn.danger:hover,
body.theme-dark a.btn.danger:hover,
body.theme-dark button.btn.danger:hover,
body.theme-dark a[href*="delete.php"]:hover,
body.theme-dark button[name*="delete"]:hover,
body.theme-dark button[value*="delete"]:hover,
body.theme-dark button[value*="clear_reserved"]:hover {
    background:#7f1d1d !important;
    color:#ffffff !important;
}

/* Primary actions stay blue */
body.theme-dark .btn.primary,
body.theme-dark a.btn.primary,
body.theme-dark .actions > .btn:first-child:not(.danger),
body.theme-dark .page-head .btn:last-child:not(.danger) {
    background:#2563eb !important;
    color:#ffffff !important;
    border-color:#2563eb !important;
}

/* QR and print surfaces stay white deliberately */
body.theme-dark .qr-label-preview,
body.theme-dark .qr-preview,
body.theme-dark .qr-card-preview,
body.theme-dark .print-label,
body.theme-dark .label-card,
body.theme-dark .print-sheet,
body.theme-dark .print-sheet .label,
body.theme-dark canvas,
body.theme-dark .qr-box {
    background:#ffffff !important;
    background-color:#ffffff !important;
    color:#111827 !important;
    border-color:#111827 !important;
}

@media (max-width:900px) {
    .topbar-inner {
        align-items:flex-start;
        flex-wrap:wrap;
        gap:12px;
    }

    .main-nav {
        order:3;
        width:100%;
        overflow-x:auto;
        padding-bottom:4px;
    }

    .topbar-actions {
        margin-left:auto !important;
    }

    .profile-label {
        display:none;
    }
}


/* --- Stable Beta 0.4 profile dropdown hover bridge + demo link polish --- */

.profile-menu {
    position: relative !important;
}

.profile-dropdown {
    top: calc(100% + 6px) !important;
    right: 0 !important;
}

/* Invisible bridge stops the dropdown disappearing while moving from profile button to menu. */
.profile-menu::after {
    content: '' !important;
    position: absolute !important;
    left: -12px !important;
    right: -12px !important;
    top: 100% !important;
    height: 14px !important;
    display: block !important;
    background: transparent !important;
    pointer-events: auto !important;
}

.profile-menu:hover .profile-dropdown,
.profile-menu:focus-within .profile-dropdown,
.profile-dropdown:hover {
    display: block !important;
}

.auth-extra-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.demo-page {
    display: grid;
    gap: 22px;
}

.demo-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, .9fr);
    gap: 18px;
    align-items: stretch;
}

.demo-card-stack {
    display: grid;
    gap: 14px;
}

.demo-steps {
    counter-reset: demoStep;
    display: grid;
    gap: 12px;
}

.demo-step {
    counter-increment: demoStep;
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 12px;
    align-items: start;
    padding: 14px;
    border: 1px solid var(--line, #d8e0ee);
    border-radius: 16px;
    background: var(--card, #fff);
}

.demo-step::before {
    content: counter(demoStep);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #2563eb;
    color: #fff;
    font-weight: 900;
}

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

.demo-mini {
    border: 1px solid var(--line, #d8e0ee);
    border-radius: 18px;
    background: var(--card, #fff);
    padding: 18px;
}

.demo-mini h3 {
    margin-top: 0;
}

.demo-fake-table {
    display: grid;
    gap: 8px;
}

.demo-fake-row {
    display: grid;
    grid-template-columns: 90px 1fr 100px;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--line, #d8e0ee);
    border-radius: 12px;
    align-items: center;
}

.demo-fake-qr {
    width: 54px;
    height: 54px;
    border-radius: 10px;
    background:
        linear-gradient(90deg, #111 10px, transparent 10px) 0 0/18px 18px,
        linear-gradient(#111 10px, transparent 10px) 0 0/18px 18px,
        #fff;
    border: 8px solid #fff;
    box-shadow: 0 0 0 1px #d8e0ee;
}

body.theme-dark .demo-step,
body.theme-dark .demo-mini,
body.theme-dark .demo-fake-row {
    background: #111827 !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

body.theme-dark .demo-fake-qr {
    background:
        linear-gradient(90deg, #111 10px, transparent 10px) 0 0/18px 18px,
        linear-gradient(#111 10px, transparent 10px) 0 0/18px 18px,
        #fff !important;
    border-color: #fff !important;
}

@media (max-width: 900px) {
    .demo-hero,
    .demo-grid {
        grid-template-columns: 1fr;
    }
}


/* --- Stable Beta 0.4 public demo dashboard + login required modal --- */

.public-demo-body {
    min-height: 100vh;
    background: linear-gradient(180deg, #f6f9ff 0%, #eef3fb 260px);
    color: #101828;
}

.public-demo-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,255,255,.94);
    border-bottom: 1px solid #d8e0ee;
    backdrop-filter: blur(14px);
}

.public-demo-topbar-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 18px;
}

.public-demo-nav {
    display: flex;
    gap: 14px;
    align-items: center;
    flex: 1 1 auto;
    overflow-x: auto;
}

.public-demo-nav a,
.public-demo-nav button {
    border: 0;
    background: transparent;
    color: #335075;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    padding: 8px 0;
}

.public-demo-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.demo-shell {
    max-width: 1240px;
    margin: 0 auto;
    padding: 34px 18px 60px;
}

.demo-disabled {
    cursor: pointer;
}

.demo-locked-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 900;
}

.demo-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, .48);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.demo-modal-backdrop.is-open {
    display: flex;
}

.demo-modal {
    width: min(520px, 100%);
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid #d8e0ee;
    box-shadow: 0 28px 80px rgba(15,23,42,.26);
    padding: 24px;
}

.demo-modal h2 {
    margin-top: 0;
}

.demo-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.demo-preview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, .9fr);
    gap: 18px;
    margin-bottom: 22px;
}

.demo-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}

.demo-metric {
    border: 1px solid #d8e0ee;
    background: #ffffff;
    border-radius: 18px;
    padding: 20px;
    text-decoration: none;
    color: #101828;
}

.demo-metric span {
    display: flex;
    justify-content: space-between;
    color: #667085;
}

.demo-metric span::after {
    content: '↗';
    color: #98a2b3;
    font-weight: 900;
}

.demo-metric strong {
    display: block;
    font-size: 34px;
    margin-top: 8px;
}

.demo-fake-table-card {
    overflow: hidden;
}

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

.demo-table th,
.demo-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #e4eaf3;
    text-align: left;
}

.demo-table th {
    color: #667085;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.demo-workflow-list {
    margin: 0;
    padding-left: 22px;
    color: #516173;
    line-height: 1.7;
}

.demo-qr-card {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
    padding: 14px;
    border: 1px solid #d8e0ee;
    border-radius: 18px;
    background: #f8fbff;
}

.demo-qr-box {
    width: 84px;
    height: 84px;
    border-radius: 12px;
    background:
        linear-gradient(90deg, #111 9px, transparent 9px) 0 0/18px 18px,
        linear-gradient(#111 9px, transparent 9px) 0 0/18px 18px,
        #fff;
    border: 10px solid #fff;
    box-shadow: 0 0 0 1px #d8e0ee;
    flex: 0 0 auto;
}

.demo-hint-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.demo-hint {
    border: 1px solid #d8e0ee;
    border-radius: 18px;
    padding: 18px;
    background: #ffffff;
}

.demo-hint h3 {
    margin-top: 0;
}

@media (max-width: 900px) {
    .demo-preview-grid,
    .demo-metrics,
    .demo-hint-row {
        grid-template-columns: 1fr;
    }

    .public-demo-topbar-inner {
        flex-wrap: wrap;
    }

    .public-demo-actions {
        margin-left: auto;
    }
}


/* --- Stable Beta 0.4 scrollable patch history --- */

.patch-history-scroll {
    max-height: 420px;
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid var(--line, #d8e0ee);
    border-radius: 16px;
}

.patch-history-scroll table {
    margin: 0;
}

.patch-history-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f8fbff;
}

.patch-history-scroll td,
.patch-history-scroll th {
    vertical-align: top;
}

.patch-history-note {
    margin-top: 10px;
    color: var(--muted, #667085);
    font-size: 13px;
}

body.theme-dark .patch-history-scroll {
    border-color: #334155 !important;
    background: #111827 !important;
}

body.theme-dark .patch-history-scroll thead th {
    background: #0f172a !important;
    color: #cbd5e1 !important;
}

body.theme-dark .patch-history-note {
    color: #a8b6ca !important;
}

.public-demo-body .patch-history-scroll {
    background: #ffffff;
}

@media (max-width: 700px) {
    .patch-history-scroll {
        max-height: 360px;
    }
}


/* --- Stable Beta 0.4 public pages with login-required modal --- */

.public-preview-note {
    border: 1px solid #b8c7e6;
    background: #eef4ff;
    color: #1d4ed8;
    border-radius: 16px;
    padding: 14px 16px;
    font-weight: 800;
    margin-bottom: 18px;
}

.public-preview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}

.public-preview-card,
.public-preview-table-card {
    border: 1px solid var(--line, #d8e0ee);
    background: var(--card, #fff);
    border-radius: 18px;
    padding: 20px;
}

.public-preview-card span {
    display: flex;
    justify-content: space-between;
    color: var(--muted, #667085);
}

.public-preview-card span::after {
    content: '↗';
    color: #98a2b3;
    font-weight: 900;
}

.public-preview-card strong {
    display: block;
    font-size: 34px;
    margin-top: 8px;
}

.public-login-required {
    cursor: pointer;
}

.demo-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, .48);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.demo-modal-backdrop.is-open {
    display: flex;
}

.demo-modal {
    width: min(520px, 100%);
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid #d8e0ee;
    box-shadow: 0 28px 80px rgba(15,23,42,.26);
    padding: 24px;
}

.demo-modal h2 {
    margin-top: 0;
}

.demo-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

body.theme-dark .public-preview-note {
    background: #172554 !important;
    border-color: #2563eb !important;
    color: #bfdbfe !important;
}

body.theme-dark .public-preview-card,
body.theme-dark .public-preview-table-card,
body.theme-dark .demo-modal {
    background: #111827 !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

body.theme-dark .public-preview-card span,
body.theme-dark .demo-modal .muted {
    color: #a8b6ca !important;
}

@media (max-width: 900px) {
    .public-preview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .public-preview-grid {
        grid-template-columns: 1fr;
    }
}


/* --- Stable Beta 0.4 public theme toggle --- */

body.theme-dark .public-preview-card,
body.theme-dark .public-preview-table-card,
body.theme-dark .public-preview-note,
body.theme-dark .demo-modal,
body.theme-dark .demo-table,
body.theme-dark .demo-table tbody,
body.theme-dark .demo-table tr {
    background: #111827 !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

body.theme-dark .public-preview-note {
    background: #172554 !important;
    color: #bfdbfe !important;
    border-color: #2563eb !important;
}

body.theme-dark .demo-table th {
    background: #0f172a !important;
    color: #cbd5e1 !important;
}

body.theme-dark .demo-table td {
    background: #111827 !important;
    color: #e5edf8 !important;
    border-color: #334155 !important;
}

body.theme-dark .public-demo-body {
    background: #0b1220 !important;
    color: #f8fafc !important;
}

body.theme-dark .public-demo-topbar {
    background: rgba(15,23,42,.96) !important;
    border-bottom-color: #334155 !important;
}

body.theme-dark .public-demo-nav a,
body.theme-dark .public-demo-nav button {
    color: #cbd5e1 !important;
}


/* --- Stable Beta 0.4 login dashboard button --- */

.auth-extra-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.auth-copy .auth-extra-actions {
    margin-top: 22px;
}

body.theme-dark .auth-extra-actions .btn.ghost,
body.theme-dark .auth-extra-actions .btn.secondary {
    background: #1e293b !important;
    color: #dbeafe !important;
    border-color: #334155 !important;
}


/* --- Stable Beta 0.4 login dashboard preview area --- */

.auth-preview-area {
    margin-top: 24px;
    padding: 18px;
    border: 1px solid #d8e0ee;
    border-radius: 18px;
    background: linear-gradient(135deg, #f8fbff 0%, #eef4ff 100%);
    display: grid;
    gap: 14px;
}

.auth-preview-area strong,
.auth-preview-area span {
    display: block;
}

.auth-preview-area strong {
    font-size: 15px;
    color: #101828;
}

.auth-preview-area span {
    margin-top: 4px;
    color: #516173;
    line-height: 1.5;
}

.auth-preview-area .preview-btn {
    width: fit-content;
}

.auth-preview-link {
    margin: 16px 0 0;
    color: #667085;
    font-size: 14px;
}

.auth-preview-link a {
    font-weight: 800;
}

body.theme-dark .auth-preview-area {
    background: linear-gradient(135deg, #111827 0%, #172554 100%) !important;
    border-color: #334155 !important;
}

body.theme-dark .auth-preview-area strong {
    color: #f8fafc !important;
}

body.theme-dark .auth-preview-area span,
body.theme-dark .auth-preview-link {
    color: #a8b6ca !important;
}

@media (max-width: 720px) {
    .auth-preview-area .preview-btn {
        width: 100%;
        justify-content: center;
    }
}


/* --- Stable Beta 0.4 top bar spacing polish --- */

/*
Keeps the main navigation on one clean row on desktop, with brand left and
actions right. It only switches to a wrapping/mobile layout when the viewport
is genuinely narrow.
*/

.topbar {
    min-height: 74px;
}

.topbar-inner {
    max-width: 1480px !important;
    width: 100%;
    padding: 14px 28px !important;
    gap: 26px !important;
    justify-content: flex-start;
}

.brand {
    margin-right: 10px;
}

.main-nav {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    column-gap: 24px !important;
    row-gap: 8px !important;
    min-width: 0 !important;
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
}

.main-nav::-webkit-scrollbar {
    display: none;
}

.main-nav a {
    padding: 8px 0;
    line-height: 1.1;
}

.topbar-actions {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 14px !important;
    flex: 0 0 auto !important;
}

.scan-button {
    gap: 7px;
    min-width: 74px;
}

.profile-trigger {
    max-width: 220px;
}

.mode-switch-form {
    flex: 0 0 auto;
}

@media (min-width: 1200px) {
    .topbar-inner {
        flex-wrap: nowrap !important;
    }

    .main-nav {
        flex-wrap: nowrap !important;
    }
}

@media (max-width: 1199px) {
    .topbar {
        min-height: auto;
    }

    .topbar-inner {
        align-items: flex-start !important;
        flex-wrap: wrap !important;
        gap: 12px 18px !important;
    }

    .main-nav {
        order: 3;
        width: 100%;
        flex-basis: 100% !important;
        padding-bottom: 4px;
        column-gap: 18px !important;
    }

    .topbar-actions {
        margin-left: auto !important;
    }
}

@media (max-width: 700px) {
    .topbar-inner {
        padding: 12px 16px !important;
    }

    .main-nav {
        column-gap: 16px !important;
    }

    .scan-button span:last-child {
        display: none;
    }

    .scan-button {
        min-width: 42px;
        padding-inline: 12px;
    }
}


/* --- Stable Beta 0.4 footer bottom placement --- */

/*
Keeps the footer at the bottom of the viewport on short pages,
without making it fixed or covering content.
*/

html,
body {
    min-height: 100%;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.topbar {
    flex: 0 0 auto;
}

.app-shell {
    flex: 1 0 auto;
    width: 100%;
}

.site-footer {
    flex: 0 0 auto;
    width: 100%;
    margin-top: auto !important;
    padding-top: 24px;
    padding-bottom: 28px;
}

.site-footer-inner,
.site-footer .footer-inner {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 700px) {
    .site-footer {
        padding-bottom: 22px;
    }
}


/* --- Stable Beta 0.4 mobile top bar cleanup --- */

/*
Mobile top bar:
- Brand and account controls stay in one compact row.
- Navigation becomes a horizontal scroll strip instead of wrapping into a tall block.
- Scan becomes an icon-only square on mobile.
- Profile name hides on mobile, leaving the avatar.
*/

@media (max-width: 760px) {
    .topbar {
        min-height: auto !important;
    }

    .topbar-inner {
        padding: 12px 14px 10px !important;
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        grid-template-areas:
            "brand spacer actions"
            "nav nav nav" !important;
        align-items: center !important;
        gap: 10px 12px !important;
        max-width: 100% !important;
    }

    .brand {
        grid-area: brand !important;
        margin: 0 !important;
        gap: 7px !important;
        min-width: 0 !important;
    }

    .brand-name {
        font-size: 22px !important;
        letter-spacing: -0.05em !important;
    }

    .beta-badge {
        height: 18px !important;
        padding: 0 7px !important;
        font-size: 9px !important;
    }

    .topbar-actions {
        grid-area: actions !important;
        margin-left: 0 !important;
        justify-self: end !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
    }

    .scan-button {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        padding: 0 !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .scan-button span:not(.scan-icon) {
        display: none !important;
    }

    .scan-icon {
        font-size: 17px !important;
    }

    .profile-trigger {
        width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 4px !important;
        border-radius: 999px !important;
        justify-content: center !important;
    }

    .profile-label {
        display: none !important;
    }

    .profile-avatar {
        width: 34px !important;
        height: 34px !important;
    }

    .mode-switch {
        width: 62px !important;
        height: 36px !important;
    }

    .mode-knob {
        width: 30px !important;
        height: 30px !important;
        font-size: 14px !important;
    }

    .mode-switch.mode-dark .mode-knob {
        transform: translateX(26px) !important;
    }

    .mode-track-sun {
        left: 9px !important;
    }

    .mode-track-moon {
        right: 10px !important;
    }

    .main-nav {
        grid-area: nav !important;
        order: unset !important;
        width: 100% !important;
        flex-basis: auto !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        column-gap: 8px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 2px 0 4px !important;
        margin: 0 !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap !important;
    }

    .main-nav::-webkit-scrollbar {
        display: none !important;
    }

    .main-nav a {
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        min-height: 34px !important;
        padding: 0 12px !important;
        border-radius: 999px !important;
        background: #eef4ff !important;
        color: #335075 !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        text-decoration: none !important;
    }

    .main-nav a:hover {
        background: #dbeafe !important;
        color: #1d4ed8 !important;
    }

    body.theme-dark .main-nav a {
        background: #1e293b !important;
        color: #cbd5e1 !important;
    }

    body.theme-dark .main-nav a:hover {
        background: #26344a !important;
        color: #ffffff !important;
    }

    .profile-dropdown {
        right: -74px !important;
        width: min(280px, calc(100vw - 28px)) !important;
    }

    .app-shell {
        padding-top: 22px !important;
    }
}

@media (max-width: 420px) {
    .topbar-inner {
        padding-left: 10px !important;
        padding-right: 10px !important;
        gap: 9px 8px !important;
    }

    .brand-name {
        font-size: 20px !important;
    }

    .beta-badge {
        font-size: 8px !important;
        padding: 0 6px !important;
    }

    .topbar-actions {
        gap: 6px !important;
    }

    .scan-button,
    .profile-trigger {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }

    .profile-avatar {
        width: 31px !important;
        height: 31px !important;
    }

    .mode-switch {
        width: 58px !important;
        height: 34px !important;
    }

    .mode-knob {
        width: 28px !important;
        height: 28px !important;
    }

    .mode-switch.mode-dark .mode-knob {
        transform: translateX(24px) !important;
    }

    .main-nav a {
        min-height: 32px !important;
        padding: 0 10px !important;
        font-size: 12px !important;
    }
}


/* --- Stable Beta 0.4 mobile burger navigation --- */

.mobile-menu-toggle {
    display: none;
}

@media (max-width: 760px) {
    .topbar-inner {
        grid-template-columns: auto auto 1fr auto !important;
        grid-template-areas: "brand menu spacer actions" !important;
    }

    .mobile-menu-toggle {
        grid-area: menu !important;
        display: inline-flex !important;
        width: 42px !important;
        height: 42px !important;
        border: 1px solid #d8e0ee !important;
        border-radius: 14px !important;
        background: #ffffff !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        gap: 4px !important;
        padding: 0 !important;
        cursor: pointer !important;
        box-shadow: none !important;
    }

    .mobile-menu-toggle span {
        width: 18px !important;
        height: 2px !important;
        border-radius: 999px !important;
        background: #101828 !important;
        display: block !important;
        transition: transform .16s ease, opacity .16s ease !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(1) {
        transform: translateY(6px) rotate(45deg) !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(2) {
        opacity: 0 !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg) !important;
    }

    .main-nav {
        grid-area: nav !important;
        display: none !important;
        width: 100% !important;
        padding: 10px !important;
        margin: 0 !important;
        border: 1px solid #d8e0ee !important;
        border-radius: 18px !important;
        background: #ffffff !important;
        box-shadow: 0 18px 45px rgba(15,23,42,.12) !important;
        overflow: visible !important;
        white-space: normal !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .main-nav.is-open {
        display: flex !important;
    }

    .main-nav a {
        min-height: 38px !important;
        padding: 0 13px !important;
        border-radius: 999px !important;
        background: #eef4ff !important;
        color: #335075 !important;
        font-size: 13px !important;
        font-weight: 800 !important;
    }

    body.theme-dark .mobile-menu-toggle {
        background: #111827 !important;
        border-color: #334155 !important;
    }

    body.theme-dark .mobile-menu-toggle span {
        background: #f8fafc !important;
    }

    body.theme-dark .main-nav {
        background: #111827 !important;
        border-color: #334155 !important;
        box-shadow: 0 18px 45px rgba(0,0,0,.22) !important;
    }

    body.theme-dark .main-nav a {
        background: #1e293b !important;
        color: #cbd5e1 !important;
    }

    body.theme-dark .main-nav a:hover {
        background: #26344a !important;
        color: #ffffff !important;
    }
}

@media (max-width: 420px) {
    .mobile-menu-toggle {
        width: 40px !important;
        height: 40px !important;
    }

    .topbar-inner {
        grid-template-columns: auto auto 1fr auto !important;
    }
}


/* --- Stable Beta 0.4 mobile burger force fix --- */

/*
The earlier mobile menu CSS was being overridden by older mobile nav rules.
This block sits at the end of the stylesheet and forcefully:
- shows the burger button
- hides the nav by default on mobile
- only shows the nav after JS adds .is-open
*/

@media (max-width: 760px) {
    .topbar-inner {
        display: grid !important;
        grid-template-columns: auto auto 1fr auto !important;
        grid-template-areas:
            "brand menu spacer actions"
            "nav nav nav nav" !important;
        align-items: center !important;
        gap: 10px 10px !important;
        padding: 12px 14px !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .brand {
        grid-area: brand !important;
        margin: 0 !important;
    }

    .mobile-menu-toggle {
        grid-area: menu !important;
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        border: 1px solid #d8e0ee !important;
        border-radius: 14px !important;
        background: #ffffff !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        gap: 4px !important;
        padding: 0 !important;
        margin: 0 !important;
        cursor: pointer !important;
        box-shadow: none !important;
        appearance: none !important;
        -webkit-appearance: none !important;
    }

    .mobile-menu-toggle span {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 18px !important;
        height: 2px !important;
        min-height: 2px !important;
        border-radius: 999px !important;
        background: #101828 !important;
        transform-origin: center !important;
        transition: transform .16s ease, opacity .16s ease !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(1) {
        transform: translateY(6px) rotate(45deg) !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(2) {
        opacity: 0 !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg) !important;
    }

    .topbar-actions {
        grid-area: actions !important;
        justify-self: end !important;
        margin-left: 0 !important;
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }

    .main-nav,
    .topbar .main-nav,
    header .main-nav {
        grid-area: nav !important;
        order: unset !important;
        width: 100% !important;
        flex-basis: 100% !important;
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .main-nav.is-open,
    .topbar .main-nav.is-open,
    header .main-nav.is-open {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        overflow: visible !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 10px !important;
        margin: 0 !important;
        border: 1px solid #d8e0ee !important;
        border-radius: 18px !important;
        background: #ffffff !important;
        box-shadow: 0 18px 45px rgba(15,23,42,.12) !important;
        white-space: normal !important;
    }

    .main-nav.is-open a {
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        min-height: 38px !important;
        padding: 0 13px !important;
        border-radius: 999px !important;
        background: #eef4ff !important;
        color: #335075 !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        text-decoration: none !important;
    }

    body.theme-dark .mobile-menu-toggle {
        background: #111827 !important;
        border-color: #334155 !important;
    }

    body.theme-dark .mobile-menu-toggle span {
        background: #f8fafc !important;
    }

    body.theme-dark .main-nav.is-open {
        background: #111827 !important;
        border-color: #334155 !important;
        box-shadow: 0 18px 45px rgba(0,0,0,.22) !important;
    }

    body.theme-dark .main-nav.is-open a {
        background: #1e293b !important;
        color: #cbd5e1 !important;
    }
}

@media (min-width: 761px) {
    .mobile-menu-toggle {
        display: none !important;
    }

    .main-nav {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
    }
}


/* --- Stable Beta 0.4 mobile bottom navigation --- */

/*
Mobile now uses a native-app style bottom nav:
Dashboard, Items, Locations, Folders, QR Labels, Scan.
The full desktop nav stays on desktop/tablet.
*/

.mobile-bottom-nav {
    display: none;
}

@media (max-width: 760px) {
    /* Keep mobile header compact and remove the large nav area. */
    .topbar-inner {
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        grid-template-areas: "brand spacer actions" !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 12px 14px !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .brand {
        grid-area: brand !important;
        margin: 0 !important;
    }

    .topbar-actions {
        grid-area: actions !important;
        justify-self: end !important;
        margin-left: 0 !important;
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }

    .main-nav,
    .topbar .main-nav,
    header .main-nav {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
    }

    .mobile-menu-toggle {
        display: none !important;
    }

    .scan-button {
        display: none !important;
    }

    .profile-trigger {
        width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        padding: 4px !important;
        border-radius: 999px !important;
        justify-content: center !important;
    }

    .profile-label {
        display: none !important;
    }

    .profile-avatar {
        width: 32px !important;
        height: 32px !important;
    }

    .mode-switch {
        width: 58px !important;
        height: 34px !important;
    }

    .mode-knob {
        width: 28px !important;
        height: 28px !important;
        font-size: 14px !important;
    }

    .mode-switch.mode-dark .mode-knob {
        transform: translateX(24px) !important;
    }

    .mobile-bottom-nav {
        position: fixed !important;
        left: 10px !important;
        right: 10px !important;
        bottom: calc(10px + env(safe-area-inset-bottom)) !important;
        z-index: 999 !important;
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 4px !important;
        padding: 8px !important;
        border: 1px solid rgba(216, 224, 238, .92) !important;
        border-radius: 24px !important;
        background: rgba(255, 255, 255, .94) !important;
        box-shadow: 0 18px 55px rgba(15, 23, 42, .22) !important;
        backdrop-filter: blur(18px) !important;
        -webkit-backdrop-filter: blur(18px) !important;
    }

    .mobile-bottom-link {
        min-width: 0 !important;
        min-height: 54px !important;
        border-radius: 18px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        text-decoration: none !important;
        color: #475467 !important;
        font-size: 10px !important;
        font-weight: 850 !important;
        line-height: 1 !important;
        letter-spacing: -0.01em !important;
        white-space: nowrap !important;
    }

    .mobile-bottom-icon {
        font-size: 18px !important;
        line-height: 1 !important;
        display: block !important;
    }

    .mobile-bottom-link:hover,
    .mobile-bottom-link:focus {
        background: #eef4ff !important;
        color: #1d4ed8 !important;
        text-decoration: none !important;
    }

    .mobile-bottom-scan {
        background: #2563eb !important;
        color: #ffffff !important;
        box-shadow: 0 10px 24px rgba(37, 99, 235, .28) !important;
    }

    .mobile-bottom-scan:hover,
    .mobile-bottom-scan:focus {
        background: #1d4ed8 !important;
        color: #ffffff !important;
    }

    .app-shell {
        padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
    }

    .site-footer {
        padding-bottom: calc(112px + env(safe-area-inset-bottom)) !important;
    }

    body.theme-dark .mobile-bottom-nav {
        background: rgba(15, 23, 42, .94) !important;
        border-color: #334155 !important;
        box-shadow: 0 18px 55px rgba(0, 0, 0, .36) !important;
    }

    body.theme-dark .mobile-bottom-link {
        color: #cbd5e1 !important;
    }

    body.theme-dark .mobile-bottom-link:hover,
    body.theme-dark .mobile-bottom-link:focus {
        background: #1e293b !important;
        color: #ffffff !important;
    }

    body.theme-dark .mobile-bottom-scan {
        background: #2563eb !important;
        color: #ffffff !important;
    }
}

@media (max-width: 390px) {
    .mobile-bottom-nav {
        left: 8px !important;
        right: 8px !important;
        padding: 6px !important;
        gap: 2px !important;
        border-radius: 22px !important;
    }

    .mobile-bottom-link {
        min-height: 50px !important;
        font-size: 9px !important;
        border-radius: 16px !important;
    }

    .mobile-bottom-icon {
        font-size: 17px !important;
    }
}


/* --- Stable Beta 0.4 mobile bottom nav overlay force fix --- */

/*
Strict behaviour:
- Hidden on desktop.
- Fixed overlay on mobile/coarse pointer devices.
- Stays pinned to viewport, not the bottom of the document.
*/

.mobile-bottom-nav {
    display: none !important;
}

/* Desktop and laptop safety: never show bottom nav on normal desktop widths. */
@media (min-width: 821px) and (hover: hover) and (pointer: fine) {
    .mobile-bottom-nav {
        display: none !important;
    }
}

/* Phones and narrow mobile layouts */
@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 1024px) {
    body {
        padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important;
    }

    .app-shell {
        padding-bottom: calc(112px + env(safe-area-inset-bottom)) !important;
    }

    .site-footer {
        padding-bottom: calc(122px + env(safe-area-inset-bottom)) !important;
    }

    .mobile-bottom-nav {
        position: fixed !important;
        inset-inline: 10px !important;
        left: 10px !important;
        right: 10px !important;
        bottom: calc(10px + env(safe-area-inset-bottom)) !important;
        top: auto !important;
        z-index: 2147483000 !important;
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 4px !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        min-height: 68px !important;
        margin: 0 !important;
        padding: 8px !important;
        border: 1px solid rgba(216, 224, 238, .94) !important;
        border-radius: 24px !important;
        background: rgba(255, 255, 255, .96) !important;
        box-shadow: 0 18px 55px rgba(15, 23, 42, .24) !important;
        backdrop-filter: blur(18px) !important;
        -webkit-backdrop-filter: blur(18px) !important;
        transform: translate3d(0, 0, 0) !important;
        will-change: transform !important;
        pointer-events: auto !important;
    }

    .mobile-bottom-link {
        min-width: 0 !important;
        min-height: 52px !important;
        border-radius: 18px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        text-decoration: none !important;
        color: #475467 !important;
        font-size: 10px !important;
        font-weight: 850 !important;
        line-height: 1 !important;
        letter-spacing: -0.01em !important;
        white-space: nowrap !important;
        overflow: hidden !important;
    }

    .mobile-bottom-icon {
        font-size: 18px !important;
        line-height: 1 !important;
        display: block !important;
    }

    .mobile-bottom-link:hover,
    .mobile-bottom-link:focus {
        background: #eef4ff !important;
        color: #1d4ed8 !important;
        text-decoration: none !important;
    }

    .mobile-bottom-scan {
        background: #2563eb !important;
        color: #ffffff !important;
        box-shadow: 0 10px 24px rgba(37, 99, 235, .28) !important;
    }

    .mobile-bottom-scan:hover,
    .mobile-bottom-scan:focus {
        background: #1d4ed8 !important;
        color: #ffffff !important;
    }

    body.theme-dark .mobile-bottom-nav {
        background: rgba(15, 23, 42, .96) !important;
        border-color: #334155 !important;
        box-shadow: 0 18px 55px rgba(0, 0, 0, .38) !important;
    }

    body.theme-dark .mobile-bottom-link {
        color: #cbd5e1 !important;
    }

    body.theme-dark .mobile-bottom-link:hover,
    body.theme-dark .mobile-bottom-link:focus {
        background: #1e293b !important;
        color: #ffffff !important;
    }

    body.theme-dark .mobile-bottom-scan {
        background: #2563eb !important;
        color: #ffffff !important;
    }
}

@media (max-width: 390px) {
    .mobile-bottom-nav {
        left: 8px !important;
        right: 8px !important;
        inset-inline: 8px !important;
        bottom: calc(8px + env(safe-area-inset-bottom)) !important;
        padding: 6px !important;
        gap: 2px !important;
        border-radius: 22px !important;
        min-height: 64px !important;
    }

    .mobile-bottom-link {
        min-height: 50px !important;
        font-size: 9px !important;
        border-radius: 16px !important;
    }

    .mobile-bottom-icon {
        font-size: 17px !important;
    }
}


/* --- Stable Beta 0.4 JS mobile bottom nav overlay fix --- */

/*
The mobile bottom nav is now created by JS at the end of <body>
and forced with inline fixed-position styles. CSS below handles fallback,
spacing, and hiding top navigation on mobile.
*/

.mobile-bottom-nav {
    display: none !important;
}

@media (min-width: 821px) {
    .mobile-bottom-nav,
    #mobileBottomNav {
        display: none !important;
    }
}

@media (max-width: 820px) {
    body.has-mobile-bottom-nav {
        padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
    }

    body.has-mobile-bottom-nav .app-shell {
        padding-bottom: calc(124px + env(safe-area-inset-bottom)) !important;
    }

    body.has-mobile-bottom-nav .site-footer {
        padding-bottom: calc(132px + env(safe-area-inset-bottom)) !important;
    }

    .topbar .main-nav,
    header .main-nav,
    .main-nav {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .scan-button {
        display: none !important;
    }

    #mobileBottomNav .mobile-bottom-link:hover,
    #mobileBottomNav .mobile-bottom-link:focus {
        background: #eef4ff !important;
        color: #1d4ed8 !important;
    }

    body.theme-dark #mobileBottomNav .mobile-bottom-link:hover,
    body.theme-dark #mobileBottomNav .mobile-bottom-link:focus {
        background: #1e293b !important;
        color: #ffffff !important;
    }
}

@media (max-width: 390px) {
    #mobileBottomNav {
        left: 8px !important;
        right: 8px !important;
        bottom: calc(8px + env(safe-area-inset-bottom)) !important;
        padding: 6px !important;
        gap: 4px !important;
    }

    #mobileBottomNav .mobile-bottom-link {
        min-height: 50px !important;
        font-size: 9px !important;
    }
}


/* --- Stable Beta 0.4 mobile bottom nav: add Scan + remove top mobile nav --- */

/*
Mobile bottom nav now contains:
Dashboard, Items, Locations, Folders, Scan.
Top navigation and top Scan remain hidden on mobile.
*/

@media (max-width: 820px) {
    .topbar .main-nav,
    header .main-nav,
    .main-nav,
    .scan-button {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
    }

    #mobileBottomNav,
    .mobile-bottom-nav {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }

    #mobileBottomNav .mobile-bottom-scan,
    .mobile-bottom-nav .mobile-bottom-scan {
        background: #2563eb !important;
        color: #ffffff !important;
        box-shadow: 0 10px 24px rgba(37, 99, 235, .28) !important;
    }

    #mobileBottomNav .mobile-bottom-scan:hover,
    #mobileBottomNav .mobile-bottom-scan:focus,
    .mobile-bottom-nav .mobile-bottom-scan:hover,
    .mobile-bottom-nav .mobile-bottom-scan:focus {
        background: #1d4ed8 !important;
        color: #ffffff !important;
    }
}

@media (max-width: 390px) {
    #mobileBottomNav .mobile-bottom-link {
        font-size: 8.5px !important;
    }

    #mobileBottomNav .mobile-bottom-icon {
        font-size: 17px !important;
    }
}


/* --- Stable Beta 0.4 force hide top mobile nav --- */

/*
Hard stop: on mobile the header must only show brand/account/theme controls.
Dashboard/Items/Locations/Folders/Scan must not appear in the top bar.
They live in the bottom overlay nav instead.
*/

@media screen and (max-width: 820px) {
    header nav.main-nav,
    .topbar nav.main-nav,
    .topbar .main-nav,
    header .main-nav,
    body .main-nav {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        left: -99999px !important;
        top: -99999px !important;
        width: 0 !important;
        max-width: 0 !important;
        height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        transform: none !important;
    }

    header .scan-button,
    .topbar .scan-button,
    body .topbar .scan-button {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        left: -99999px !important;
        top: -99999px !important;
        width: 0 !important;
        max-width: 0 !important;
        min-width: 0 !important;
        height: 0 !important;
        max-height: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
    }

    .topbar-inner {
        grid-template-areas: "brand spacer actions" !important;
        grid-template-columns: auto 1fr auto !important;
    }
}

@media screen and (min-width: 821px) {
    header nav.main-nav,
    .topbar nav.main-nav,
    .topbar .main-nav {
        position: static !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
}


/* --- Stable Beta 0.4 mobile More burger menu --- */

/*
Bottom mobile nav keeps the primary actions:
Dashboard, Items, Locations, Folders, Scan.
The header burger now holds the remaining pages.
*/

.mobile-more-toggle,
.mobile-more-menu {
    display: none;
}

@media screen and (max-width: 820px) {
    .topbar-inner {
        display: grid !important;
        grid-template-columns: auto auto 1fr auto !important;
        grid-template-areas: "brand more spacer actions" !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 12px 14px !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .mobile-more-toggle {
        grid-area: more !important;
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        border: 1px solid #d8e0ee !important;
        border-radius: 14px !important;
        background: #ffffff !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        gap: 4px !important;
        padding: 0 !important;
        margin: 0 !important;
        cursor: pointer !important;
        box-shadow: none !important;
        appearance: none !important;
        -webkit-appearance: none !important;
    }

    .mobile-more-toggle span {
        width: 18px !important;
        height: 2px !important;
        min-height: 2px !important;
        display: block !important;
        border-radius: 999px !important;
        background: #101828 !important;
        transition: transform .16s ease, opacity .16s ease !important;
    }

    .mobile-more-toggle.is-open span:nth-child(1) {
        transform: translateY(6px) rotate(45deg) !important;
    }

    .mobile-more-toggle.is-open span:nth-child(2) {
        opacity: 0 !important;
    }

    .mobile-more-toggle.is-open span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg) !important;
    }

    .mobile-more-menu {
        position: fixed !important;
        inset: 0 !important;
        z-index: 2147483600 !important;
        display: none !important;
        padding: 74px 12px calc(104px + env(safe-area-inset-bottom)) !important;
        background: rgba(15, 23, 42, .18) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
    }

    .mobile-more-menu.is-open {
        display: block !important;
    }

    .mobile-more-panel {
        width: min(420px, 100%) !important;
        margin: 0 auto !important;
        padding: 14px !important;
        border-radius: 24px !important;
        border: 1px solid #d8e0ee !important;
        background: rgba(255,255,255,.98) !important;
        box-shadow: 0 22px 65px rgba(15,23,42,.24) !important;
    }

    .mobile-more-head {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        margin-bottom: 12px !important;
    }

    .mobile-more-head strong {
        color: #101828 !important;
        font-size: 16px !important;
        font-weight: 900 !important;
    }

    .mobile-more-close {
        width: 38px !important;
        height: 38px !important;
        border-radius: 999px !important;
        border: 1px solid #d8e0ee !important;
        background: #ffffff !important;
        color: #101828 !important;
        font-size: 24px !important;
        line-height: 1 !important;
        cursor: pointer !important;
    }

    .mobile-more-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .mobile-more-grid a {
        display: flex !important;
        align-items: center !important;
        min-height: 46px !important;
        padding: 0 14px !important;
        border-radius: 16px !important;
        background: #eef4ff !important;
        color: #335075 !important;
        font-size: 14px !important;
        font-weight: 850 !important;
        text-decoration: none !important;
    }

    .mobile-more-grid a:hover,
    .mobile-more-grid a:focus {
        background: #dbeafe !important;
        color: #1d4ed8 !important;
        text-decoration: none !important;
    }

    body.theme-dark .mobile-more-toggle {
        background: #111827 !important;
        border-color: #334155 !important;
    }

    body.theme-dark .mobile-more-toggle span {
        background: #f8fafc !important;
    }

    body.theme-dark .mobile-more-menu {
        background: rgba(0, 0, 0, .28) !important;
    }

    body.theme-dark .mobile-more-panel {
        background: rgba(15,23,42,.98) !important;
        border-color: #334155 !important;
        box-shadow: 0 22px 65px rgba(0,0,0,.42) !important;
    }

    body.theme-dark .mobile-more-head strong {
        color: #f8fafc !important;
    }

    body.theme-dark .mobile-more-close {
        background: #111827 !important;
        border-color: #334155 !important;
        color: #f8fafc !important;
    }

    body.theme-dark .mobile-more-grid a {
        background: #1e293b !important;
        color: #cbd5e1 !important;
    }

    body.theme-dark .mobile-more-grid a:hover,
    body.theme-dark .mobile-more-grid a:focus {
        background: #26344a !important;
        color: #ffffff !important;
    }
}

@media screen and (min-width: 821px) {
    .mobile-more-toggle,
    .mobile-more-menu {
        display: none !important;
    }
}


/* --- Stable Beta 0.4 mobile More arrow repair --- */

/*
Repair version:
- Restores the last known working mobile More menu files.
- Keeps the same working menu JS and panel.
- Uses a text dropdown trigger instead of changing the menu structure.
*/

@media screen and (max-width: 820px) {
    .mobile-more-toggle {
        width: auto !important;
        min-width: 74px !important;
        height: 42px !important;
        min-height: 42px !important;
        padding: 0 12px !important;
        flex-direction: row !important;
        gap: 0 !important;
        font: inherit !important;
    }

    .mobile-more-toggle .mobile-more-arrow-icon {
        display: block !important;
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        background: transparent !important;
        color: #101828 !important;
        font-size: 13px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        letter-spacing: -0.01em !important;
        transform: none !important;
        transition: transform .16s ease !important;
        white-space: nowrap !important;
    }

    .mobile-more-toggle .mobile-more-hidden-line {
        display: none !important;
    }

    .mobile-more-toggle.is-open .mobile-more-arrow-icon {
        transform: none !important;
    }

    body.theme-dark .mobile-more-toggle .mobile-more-arrow-icon {
        background: transparent !important;
        color: #f8fafc !important;
    }
}


/* --- Stable Beta 0.4 combined QR navigation --- */

/*
QR Labels and Made QR codes now appear as one navigation item: QR Codes.
The separate page can still exist internally, but the main nav is cleaner.
*/



/* --- Stable Beta 0.4 Registered QR codes safe repair --- */

/*
Safe repair after the previous label patch:
- Restores the last styled CSS file.
- Removes the old mobile " / labels" suffix.
*/

.mobile-more-grid a[href="qr-labels.php"]::after {
    content: "" !important;
    display: none !important;
}


/* --- Stable Beta 0.4 registered QR page labels --- */

/*
User-facing QR wording is now Registered QR codes.
The underlying filenames stay the same so old links keep working.
*/


/* --- Stable Beta 0.4 registered QR duplicate label fix --- */

/*
Fix is mostly PHP text cleanup.
QR Labels remains the label generator.
Registered QR codes remains the registry/list page.
*/


/* --- Stable Beta 0.4 Registered QR codes layout polish --- */

/*
Registered QR codes page layout:
- Better hero/header balance.
- Summary stats become proper cards.
- Search/management sections align better.
- Mobile remains stacked and readable.
*/

.qr-registry-page {
    max-width: 1240px !important;
    margin: 0 auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

.qr-registry-page > .page-head,
.qr-registry-page .page-head,
.qr-registry-page > header:first-child {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 18px !important;
    align-items: start !important;
    margin-bottom: 22px !important;
}

.qr-registry-page h1 {
    margin-bottom: 8px !important;
}

.qr-registry-page h1 + .muted,
.qr-registry-page h1 + p {
    max-width: 720px !important;
    line-height: 1.55 !important;
}

/* The small count links under the header */
.qr-registry-page h1 ~ p a,
.qr-registry-page > p a {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 38px !important;
    padding: 0 13px !important;
    border-radius: 999px !important;
    background: #eef4ff !important;
    color: #1d4ed8 !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    margin: 4px 8px 4px 0 !important;
}

/* Make the count block feel like a proper dashboard strip */
.qr-registry-page > p:has(a) {
    margin: 18px 0 14px !important;
}

/* Management/search cards should not feel narrow and random */
.qr-registry-page .card {
    max-width: none !important;
}

.qr-registry-page .card:has(input[type="search"]),
.qr-registry-page .card:has(input[name="q"]),
.qr-registry-page .card:has(select[name="filter"]),
.qr-registry-page .card:has(select) {
    margin-top: 20px !important;
}

.qr-registry-page .card h2,
.qr-registry-page .card h3 {
    margin-top: 0 !important;
}

/* Better two-column form feel inside the search panel */
.qr-registry-page .form-grid,
.qr-registry-page form .grid,
.qr-registry-page form {
    gap: 16px !important;
}

.qr-registry-page .btn-row,
.qr-registry-page .form-actions {
    gap: 10px !important;
}

/* Registry table/card spacing */
.qr-registry-page table {
    width: 100% !important;
}

.qr-registry-page .table-wrap,
.qr-registry-page .card:has(table) {
    overflow-x: auto !important;
}

/* Make the top action button feel aligned */
.qr-registry-page .page-actions,
.qr-registry-page .actions {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

/* Dark mode */
body.theme-dark .qr-registry-page h1 ~ p a,
body.theme-dark .qr-registry-page > p a {
    background: #1e293b !important;
    color: #dbeafe !important;
}

@media (min-width: 900px) {
    .qr-registry-page {
        padding-top: 34px !important;
    }

    /* Turn the top count links into a neat row */
    .qr-registry-page h1 ~ p,
    .qr-registry-page > p {
        max-width: 900px !important;
    }
}

@media (max-width: 820px) {
    .qr-registry-page {
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-top: 22px !important;
    }

    .qr-registry-page > .page-head,
    .qr-registry-page .page-head,
    .qr-registry-page > header:first-child {
        grid-template-columns: 1fr !important;
    }

    .qr-registry-page .page-actions,
    .qr-registry-page .actions {
        justify-content: flex-start !important;
    }

    .qr-registry-page h1 ~ p a,
    .qr-registry-page > p a {
        width: 100% !important;
        justify-content: space-between !important;
    }
}



/* --- Stable Beta 0.4 QR nav and rotate image fix --- */

/*
QR Labels remains the label printer.
Registered QR codes remains the registry/list page.
Location image rotation now returns to the visual card and uses filemtime cache busting.
*/

#location-visual {
    scroll-margin-top: 110px;
}

.location-visual-actions form {
    margin: 0;
}


/* --- Stable Beta 0.4 Registered QR stat card polish --- */

/*
The Registered QR codes counters are clickable filters,
but they should look like proper stat buttons/cards, not loose blue links.
*/

.qr-registry-stats {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
    margin: 22px 0 24px !important;
    max-width: 1100px !important;
}

.qr-registry-stats .stat-card {
    min-height: 96px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 18px 20px !important;
    border: 1px solid #d8e0ee !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    color: #101828 !important;
    box-shadow: 0 14px 36px rgba(15, 23, 42, .07) !important;
    text-decoration: none !important;
    transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease, background .14s ease !important;
}

.qr-registry-stats .stat-card:hover,
.qr-registry-stats .stat-card:focus {
    transform: translateY(-2px) !important;
    border-color: #9db7ff !important;
    background: #f8fbff !important;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .10) !important;
    color: #101828 !important;
}

.qr-registry-stats .stat-card span {
    display: block !important;
    color: #516173 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
}

.qr-registry-stats .stat-card strong {
    display: block !important;
    color: #101828 !important;
    font-size: 34px !important;
    font-weight: 950 !important;
    line-height: .9 !important;
    letter-spacing: -0.05em !important;
    text-decoration: none !important;
}

/* Small visual accent per card */
.qr-registry-stats .stat-card::before {
    content: "";
    width: 34px !important;
    height: 4px !important;
    border-radius: 999px !important;
    background: #2563eb !important;
    opacity: .85 !important;
}

/* Optional selected filter state based on current URL is not server-rendered yet,
   so hover/focus is kept clean without changing behaviour. */

body.theme-dark .qr-registry-stats .stat-card {
    background: #111827 !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
    box-shadow: 0 14px 36px rgba(0, 0, 0, .24) !important;
}

body.theme-dark .qr-registry-stats .stat-card:hover,
body.theme-dark .qr-registry-stats .stat-card:focus {
    background: #1e293b !important;
    border-color: #3b82f6 !important;
    color: #ffffff !important;
}

body.theme-dark .qr-registry-stats .stat-card span {
    color: #a8b6ca !important;
}

body.theme-dark .qr-registry-stats .stat-card strong {
    color: #f8fafc !important;
}

@media (max-width: 1000px) {
    .qr-registry-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 560px) {
    .qr-registry-stats {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin-top: 18px !important;
    }

    .qr-registry-stats .stat-card {
        min-height: 76px !important;
        padding: 15px 16px !important;
        flex-direction: row !important;
        align-items: center !important;
    }

    .qr-registry-stats .stat-card::before {
        display: none !important;
    }

    .qr-registry-stats .stat-card strong {
        font-size: 30px !important;
    }
}




/* ===== CSS from itemid_blank_labels_wording_patch.zip ===== */

:root{
  --bg:#f5f7fb;--bg2:#eef4ff;--card:#fff;--text:#101828;--muted:#667085;--line:#d9e1ec;
  --blue:#2563eb;--blue-dark:#1d4ed8;--blue2:#eff4ff;--green:#12b76a;--amber:#f79009;--danger:#b42318;
  --shadow:0 18px 45px rgba(15,23,42,.08);--radius:18px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:linear-gradient(180deg,#f8fbff 0%,var(--bg) 260px);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Arial,sans-serif;font-size:15px;line-height:1.5}a{color:var(--blue-dark);text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3{letter-spacing:-.04em;line-height:1.15;margin:0 0 10px}h1{font-size:34px}h2{font-size:28px}h3{font-size:19px}.muted{color:var(--muted)}.big{font-size:17px;line-height:1.65}.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:22px;padding:14px 24px;background:rgba(255,255,255,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}.brand{display:inline-flex;gap:10px;align-items:center;color:var(--text);font-weight:900;font-size:21px}.brand:hover{text-decoration:none}.brand-mark{width:34px;height:34px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;background:#111827;color:white;font-size:13px;letter-spacing:-.04em}.main-nav{display:flex;align-items:center;gap:4px;flex:1;flex-wrap:wrap}.main-nav a{color:#344054;padding:9px 10px;border-radius:10px;font-weight:700;font-size:14px}.main-nav a:hover{background:var(--blue2);text-decoration:none}.top-actions{display:flex;align-items:center;gap:12px}.muted-link{color:var(--muted);font-weight:700}.page{max-width:1180px;margin:0 auto;padding:28px 22px 60px}.site-footer{max-width:1180px;margin:0 auto;padding:22px;color:var(--muted);border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px}.page-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin:0 0 20px}.page-head p{margin:4px 0 0}.card{background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:18px;box-shadow:0 10px 30px rgba(15,23,42,.045)}.hero{display:grid;grid-template-columns:2fr 1fr;gap:18px;margin-bottom:18px}.hero .card:first-child{background:linear-gradient(135deg,#fff 0%,#f4f7ff 100%)}.grid{display:grid;gap:18px}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.cards4{grid-template-columns:repeat(4,minmax(0,1fr))}.cards4 .card{margin:0}.cards4 h2{font-size:34px;margin-top:6px}.wide{max-width:920px}.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;background:var(--blue);color:white;padding:11px 16px;font-weight:900;cursor:pointer;text-decoration:none;box-shadow:0 8px 18px rgba(37,99,235,.18);font:inherit}.btn:hover{text-decoration:none;background:var(--blue-dark)}.btn.secondary{background:#e8efff;color:var(--blue-dark);box-shadow:none}.btn.secondary:hover{background:#dbe7ff}.btn.ghost{background:white;color:#344054;border:1px solid var(--line);box-shadow:none}.btn.small{padding:8px 12px;border-radius:10px;font-size:14px}.scan-link{background:#111827;color:#fff!important}.form{display:grid;gap:15px}.form label{display:grid;gap:7px;color:#344054;font-size:14px;font-weight:700}.form input,.form select,.form textarea,.searchbar input,.inline-form input,.inline-form select{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px 13px;background:white;color:var(--text);font:inherit;outline:none}.form input:focus,.form select:focus,.form textarea:focus,.searchbar input:focus,.inline-form input:focus,.inline-form select:focus{border-color:#9db7ff;box-shadow:0 0 0 4px rgba(37,99,235,.10)}.searchbar,.inline-form{display:flex;gap:10px;margin-bottom:18px}.table-wrap{overflow:auto;padding:0}table{width:100%;border-collapse:collapse;min-width:720px}th,td{text-align:left;border-bottom:1px solid var(--line);padding:14px 16px;vertical-align:top}th{font-size:12px;color:var(--muted);font-weight:900;text-transform:uppercase;letter-spacing:.05em;background:#fbfcff}tr:hover td{background:#fbfdff}.pill{display:inline-flex;background:var(--blue2);color:var(--blue-dark);border-radius:999px;padding:4px 9px;font-size:13px;font-weight:900}.pill.low,.pill.Empty,.pill.Missing{background:#fff4ed;color:#b54708}.visual{max-width:100%;border-radius:14px;border:1px solid var(--line);box-shadow:0 8px 20px rgba(15,23,42,.06)}.qr-box{display:inline-block;background:white;padding:12px;border:1px solid var(--line);border-radius:14px}.code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:900;background:#f2f4f7;border:1px solid #e4e7ec;border-radius:10px;padding:4px 8px;display:inline-block}.labels{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.label{background:#fff;border:1px solid #111;border-radius:6px;text-align:center;padding:11px;break-inside:avoid}.label .qr{display:inline-block}.label-toolbar{margin:12px 0}.check{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center;gap:8px!important}.alert{background:#fef3f2;color:var(--danger);border:1px solid #fecdca;border-radius:12px;padding:11px 13px;font-weight:700}.notice{background:#eff8ff;color:#175cd3;border:1px solid #b2ddff;border-radius:12px;padding:11px 13px;font-weight:700}.empty{padding:24px;border:1px dashed var(--line);border-radius:14px;background:#fbfcff;color:var(--muted)}
/* Auth */.auth-body{min-height:100vh!important;display:grid!important;place-items:center!important;padding:28px;background:radial-gradient(circle at top left,rgba(37,99,235,.16),transparent 34%),radial-gradient(circle at bottom right,rgba(16,185,129,.10),transparent 28%),var(--bg)}.auth-shell{width:min(980px,100%);display:grid;grid-template-columns:1.15fr .85fr;gap:18px;align-items:stretch}.auth-panel{background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow)}.auth-copy{padding:36px;display:flex;flex-direction:column;justify-content:center;min-height:440px}.logo-mark{width:54px;height:54px;border-radius:16px;background:#111827;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;letter-spacing:-.04em;margin-bottom:22px}.eyebrow{font-weight:900;color:var(--blue);letter-spacing:.08em;text-transform:uppercase;font-size:13px;margin:0 0 10px}.auth-copy h1{font-size:46px;letter-spacing:-.055em;line-height:1.02;margin:0 0 16px;max-width:620px}.auth-copy .big{font-size:17px;line-height:1.6;max-width:600px;margin:0 0 22px}.feature-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}.feature-list span{background:var(--blue2);color:var(--blue-dark);border:1px solid #dbe7ff;border-radius:999px;padding:8px 11px;font-weight:900;font-size:13px}.auth-card{width:auto!important;padding:30px;display:flex;flex-direction:column;justify-content:center}.auth-card h2{font-size:30px;margin:0 0 8px}.auth-card .muted{margin-top:0;margin-bottom:20px}.auth-card input{height:46px}.subtle-link{font-size:14px;font-weight:800;justify-self:start}.auth-card .actions{margin-top:2px}
@media(max-width:900px){.topbar{align-items:flex-start;flex-direction:column}.top-actions{width:100%;justify-content:space-between}.hero,.grid.two,.grid.cards4{grid-template-columns:1fr}.page-head{display:block}.searchbar,.inline-form{flex-direction:column}.labels{grid-template-columns:repeat(2,1fr)}.auth-shell{grid-template-columns:1fr}.auth-copy{min-height:0;padding:24px}.auth-copy h1{font-size:34px}.auth-card{padding:24px}.site-footer{flex-direction:column}}@media print{body{background:white}.topbar,.page-head,.card:not(.table-wrap),.label-toolbar,.site-footer{display:none!important}.page{padding:0}.labels{grid-template-columns:repeat(4,1fr);gap:8px}.label{page-break-inside:avoid;box-shadow:none}}

/* ItemID QR/template patch */
.section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}.section-head h2{font-size:22px;margin:0 0 4px}.field-builder{display:grid;gap:14px;border:1px solid var(--line);border-radius:16px;padding:16px;background:#fbfcff}.quick-fields{display:flex;gap:8px;flex-wrap:wrap}.field-chip{border:1px solid #dbe7ff;background:#eff4ff;color:#1d4ed8;border-radius:999px;padding:7px 10px;font-weight:800;cursor:pointer}.field-chip:hover{background:#dbe7ff}.fields-list{display:grid;gap:10px}.field-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}.label-sheet{display:grid;grid-template-columns:repeat(var(--label-columns,4),minmax(0,1fr));gap:12px}.print-label-card{background:#fff;border:1px solid #111827;border-radius:10px;text-align:center;padding:12px;break-inside:avoid;min-height:calc(var(--qr-size,120px) + 62px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px}.print-label-card .qr{display:inline-flex;align-items:center;justify-content:center}.print-label-card .print-code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:15px;font-weight:900;letter-spacing:.06em}.print-label-card .print-name{font-size:12px;font-weight:800;color:#344054;line-height:1.25}.row-actions{display:flex;gap:12px;white-space:nowrap}.qr-size-form select{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px 13px;background:white;color:var(--text);font:inherit;outline:none}@media(max-width:700px){.field-row{grid-template-columns:1fr}.label-sheet{grid-template-columns:repeat(2,minmax(0,1fr))}.row-actions{display:grid;gap:6px}}

/* ItemID workflow polish patch */
.mini-action{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;border-radius:10px;padding:7px 10px;font-weight:900;color:#1d4ed8;text-decoration:none;white-space:nowrap}.mini-action:hover{background:#eff4ff;text-decoration:none}.pretty-fields{gap:18px}.pretty-list{gap:12px}.pretty-row{grid-template-columns:1fr 42px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px}.pretty-row input{border:0!important;box-shadow:none!important;padding:9px 10px!important}.icon-button{width:34px;height:34px;border:0;border-radius:10px;background:#f2f4f7;color:#344054;font-size:22px;line-height:1;cursor:pointer;font-weight:900}.icon-button:hover{background:#fee4e2;color:#b42318}.community-check{align-self:end;background:#fbfcff;border:1px solid var(--line);border-radius:14px;padding:12px}.community-check span{display:grid;gap:2px}.community-check small{color:var(--muted);font-weight:600}.field-chip{font-size:13px}.print-label-card{min-height:calc(var(--qr-mm,35mm) + 22mm);padding:8mm 4mm}.print-label-card .print-name{max-width:100%;overflow-wrap:anywhere}.custom-prefix-row{display:none}.item-hero{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.item-hero h2{font-size:24px;margin:4px 0 0}.activity-line{border-bottom:1px solid var(--line);padding:0 0 10px;margin:0 0 10px}.qr-size-form{margin-top:14px;display:flex;gap:10px;align-items:end;flex-wrap:wrap}.qr-size-form label{min-width:190px}.add-item-flow{gap:20px}.flow-step{display:flex;gap:14px;align-items:flex-start;border-top:1px solid var(--line);padding-top:18px}.flow-step:first-of-type{border-top:0;padding-top:0}.flow-step h2{font-size:22px;margin:0 0 4px}.step-badge{width:34px;height:34px;border-radius:999px;background:#111827;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:900;flex:0 0 auto}.field-as-card{border:1px dashed #b7c5df;border-radius:14px;padding:13px;background:#fbfcff}.field-as-card p{margin:4px 0 10px}.code-pill{display:inline-flex;background:#f2f4f7;border:1px solid #e4e7ec;border-radius:10px;padding:5px 9px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:900}@media(max-width:800px){.item-hero{grid-template-columns:1fr}.pretty-row{grid-template-columns:1fr 42px}.qr-size-form{display:grid}.flow-step{display:grid}.field-as-card .btn{width:100%}}


/* ItemID workflow patch 2 */
.beta-badge{display:inline-flex;align-items:center;border:1px solid #c7d7fe;background:#eff4ff;color:#1d4ed8;border-radius:999px;padding:2px 7px;font-size:11px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;line-height:1.4}.template-create-card{display:flex;align-items:center;justify-content:space-between;gap:14px}.template-create-card p{margin:3px 0 0}.compact-check{width:auto!important;display:flex!important;grid-template-columns:auto 1fr!important;align-items:center!important;gap:8px!important;min-width:170px}.compact-check input{width:auto!important}.qr-box canvas,.qr-box img{display:block!important;max-width:100%!important;max-height:100%!important}.print-label-card{overflow:hidden}.print-label-card .dynamic-qr canvas,.print-label-card .dynamic-qr img{display:block!important}.print-label-card .print-code,.print-label-card .print-name{max-width:100%;overflow-wrap:anywhere}.single-print-label{overflow:hidden}@media(max-width:800px){.template-create-card{display:grid}.compact-check{min-width:0}}

/* Items table action-cell border fix */
td.row-actions,
th.row-actions {
    display: table-cell !important;
    white-space: nowrap;
    vertical-align: middle;
    border-bottom: 1px solid var(--line) !important;
}

td.row-actions {
    min-width: 230px;
}

td.row-actions .mini-action {
    margin-right: 8px;
    margin-bottom: 0;
}

td.row-actions .mini-action:last-child {
    margin-right: 0;
}

tr:hover td.row-actions {
    background: #fbfdff;
}

@media (max-width: 760px) {
    td.row-actions {
        min-width: 170px;
    }

    td.row-actions .mini-action {
        display: flex;
        width: 100%;
        margin-right: 0;
        margin-bottom: 6px;
    }

    td.row-actions .mini-action:last-child {
        margin-bottom: 0;
    }
}

/* Stable Beta 0.4 additions */
.btn.danger,
.btn.danger.ghost {
  color: #b42318 !important;
  border-color: #fecdca !important;
  background: #fff !important;
  box-shadow: none !important;
}
.btn.danger:hover,
.btn.danger.ghost:hover {
  background: #fef3f2 !important;
  text-decoration: none;
}
.mini-action.danger {
  color: #b42318 !important;
  border-color: #fecdca !important;
  background: #fff !important;
}
.export-card {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.export-card:hover {
  transform: translateY(-2px);
  text-decoration: none;
  border-color: #b8c7e6;
  box-shadow: 0 18px 42px rgba(15,23,42,.09);
}
.site-footer a { color: inherit; font-weight: 800; }

/* Stable Beta 0.4 template/item field builder polish */
.item-template-field-row {
    display: grid;
    grid-template-columns: minmax(150px, .35fr) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 12px;
    border: 1px solid #d8e0ee;
    border-radius: 14px;
    background: #ffffff;
    margin-bottom: 10px;
}

.template-field-input-wrap {
    display: grid;
    gap: 6px;
}

.template-field-input-wrap input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    margin: 8px 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.field-unit-hint {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 9px;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 900;
}

.small {
    font-size: 12px;
}

@media (max-width: 700px) {
    .item-template-field-row {
        grid-template-columns: 1fr;
    }
}

/* --- Profile/preferences patch CSS --- */

/* Profile and preferences */
.profile-settings-row {
    display: grid;
    grid-template-columns: 112px 1fr;
    gap: 22px;
    align-items: center;
    margin-bottom: 20px;
}

.profile-settings-avatar {
    width: 96px;
    height: 96px;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid #d8e0ee;
    background: #eef4ff;
    color: #1d4ed8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    font-weight: 900;
}

.profile-settings-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.checkbox-line {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    font-weight: 800;
}

.checkbox-line input,
.checkbox-card input {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.checkbox-card {
    min-height: 70px;
    border: 1px solid #d8e0ee;
    border-radius: 14px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}

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

.checkbox-card small {
    margin-top: 4px;
    color: #64748b;
}

@media (max-width: 650px) {
    .profile-settings-row {
        grid-template-columns: 1fr;
    }
}


/* --- Stable Beta 0.4 theme toggle + dark fix --- */

.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,255,255,.94);
    border-bottom: 1px solid #d8e0ee;
    backdrop-filter: blur(14px);
}

.topbar-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    gap: 22px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #0f172a;
    flex: 0 0 auto;
}

.brand:hover {
    text-decoration: none;
}

.brand-name {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1;
}

.beta-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 19px;
    padding: 0 7px;
    border: 1px solid #b8c7e6;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    white-space: nowrap;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 auto;
    min-width: 0;
}

.main-nav a {
    color: #335075;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
}

.main-nav a:hover {
    color: #2563eb;
    text-decoration: none;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

.scan-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 16px;
    border-radius: 12px;
    background: #111827;
    color: #ffffff !important;
    text-decoration: none;
    font-weight: 800;
    font-size: 14px;
    box-shadow: 0 10px 24px rgba(17, 24, 39, .18);
}

.scan-button:hover {
    text-decoration: none;
}

.profile-menu {
    position: relative;
}

.profile-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 4px 8px 4px 4px;
    border: 1px solid #d8e0ee;
    border-radius: 999px;
    background: #ffffff;
    color: #0f172a;
    text-decoration: none;
    font-weight: 800;
    cursor: pointer;
    max-width: 260px;
}

.profile-avatar {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    object-fit: cover;
    background: #eef4ff;
    color: #1d4ed8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    border: 1px solid #c9d7f2;
    overflow: hidden;
    flex: 0 0 auto;
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-label {
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.profile-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 280px;
    border: 1px solid #d8e0ee;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .16);
    padding: 10px;
    display: none;
}

.profile-menu:hover .profile-dropdown,
.profile-menu:focus-within .profile-dropdown {
    display: block;
}

.profile-dropdown-header {
    padding: 10px;
    border-bottom: 1px solid #edf2f7;
    margin-bottom: 8px;
}

.profile-dropdown-header strong,
.profile-dropdown-header span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-dropdown-header span {
    color: #64748b;
    font-size: 13px;
    margin-top: 2px;
}

.profile-dropdown a {
    display: block;
    padding: 10px;
    border-radius: 12px;
    color: #334155;
    text-decoration: none;
    font-weight: 800;
}

.profile-dropdown a:hover {
    background: #f1f5f9;
    color: #0f172a;
    text-decoration: none;
}

.theme-toggle-form {
    margin: 0;
}

.theme-toggle {
    width: 62px;
    height: 34px;
    border: 1px solid #d8e0ee;
    border-radius: 999px;
    background: #eef4ff;
    position: relative;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    box-shadow: none;
}

.theme-toggle-bulb {
    position: absolute;
    left: 8px;
    font-size: 15px;
    line-height: 1;
    z-index: 2;
    opacity: .8;
}

.theme-toggle-knob {
    position: absolute;
    left: 3px;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 3px 10px rgba(15,23,42,.18);
    transition: transform .16s ease;
}

.theme-toggle.is-dark {
    background: #172554;
    border-color: #2563eb;
}

.theme-toggle.is-dark .theme-toggle-bulb {
    left: 36px;
    opacity: 1;
}

.theme-toggle.is-dark .theme-toggle-knob {
    transform: translateX(28px);
    background: #0f172a;
}

.app-shell {
    max-width: 1240px;
    margin: 0 auto;
    padding: 28px 18px 48px;
}

/* Dark theme variables and hard overrides */
body.theme-dark {
    --bg:#0b1220;
    --bg2:#0f172a;
    --card:#111827;
    --text:#f8fafc;
    --muted:#a8b6ca;
    --line:#334155;
    --blue2:#172554;
    background: #0b1220 !important;
    color: #f8fafc !important;
    color-scheme: dark;
}

body.theme-dark .topbar {
    background: rgba(15, 23, 42, .96) !important;
    border-bottom-color: #334155 !important;
}

body.theme-dark .brand,
body.theme-dark .brand-name,
body.theme-dark .profile-label {
    color: #f8fafc !important;
}

body.theme-dark .beta-badge {
    background: #172554 !important;
    border-color: #2563eb !important;
    color: #bfdbfe !important;
}

body.theme-dark .main-nav a {
    color: #cbd5e1 !important;
}

body.theme-dark .main-nav a:hover {
    background: #1e293b !important;
    color: #ffffff !important;
}

body.theme-dark .profile-trigger,
body.theme-dark .profile-dropdown,
body.theme-dark .card,
body.theme-dark section.card,
body.theme-dark form.card,
body.theme-dark details.card,
body.theme-dark .table-wrap,
body.theme-dark .metric-card,
body.theme-dark .filter-panel,
body.theme-dark .template-field-card,
body.theme-dark .template-field-row,
body.theme-dark .location-summary,
body.theme-dark .auth-panel {
    background: #111827 !important;
    background-color: #111827 !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
    box-shadow: 0 18px 45px rgba(0,0,0,.22) !important;
}

body.theme-dark .hero .card:first-child {
    background: linear-gradient(135deg, #111827 0%, #172033 100%) !important;
}

body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark strong,
body.theme-dark label,
body.theme-dark th,
body.theme-dark td {
    color: #f8fafc !important;
}

body.theme-dark .muted,
body.theme-dark .help,
body.theme-dark small,
body.theme-dark .site-footer,
body.theme-dark .metric-card span {
    color: #a8b6ca !important;
}

body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

body.theme-dark input::placeholder,
body.theme-dark textarea::placeholder {
    color: #74839a !important;
}

body.theme-dark table,
body.theme-dark tbody,
body.theme-dark tr {
    background: #111827 !important;
    color: #f8fafc !important;
}

body.theme-dark thead,
body.theme-dark th {
    background: #0f172a !important;
    color: #cbd5e1 !important;
}

body.theme-dark td {
    background: #111827 !important;
    color: #e5edf8 !important;
    border-color: #334155 !important;
}

body.theme-dark tr:hover td {
    background: #172033 !important;
}

body.theme-dark .code-pill,
body.theme-dark .badge,
body.theme-dark .pill,
body.theme-dark .status-pill,
body.theme-dark .tag,
body.theme-dark .field-unit-hint {
    background: #1e293b !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}

body.theme-dark .btn.secondary,
body.theme-dark .btn.ghost,
body.theme-dark a.btn.secondary,
body.theme-dark a.btn.ghost {
    background: #1e293b !important;
    color: #bfdbfe !important;
    border: 1px solid #334155 !important;
    box-shadow: none !important;
}

body.theme-dark .btn.secondary:hover,
body.theme-dark .btn.ghost:hover {
    background: #26344a !important;
    color: #ffffff !important;
}

body.theme-dark .qr-label-preview,
body.theme-dark .qr-preview,
body.theme-dark .qr-card-preview,
body.theme-dark .print-label,
body.theme-dark .label-card,
body.theme-dark .print-sheet,
body.theme-dark .print-sheet .label,
body.theme-dark canvas,
body.theme-dark .qr-box {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #111827 !important;
    border-color: #111827 !important;
}

/* System preference can be selected in profile, but the top toggle only switches light/dark. */
@media (max-width: 900px) {
    .topbar-inner {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 12px;
    }

    .main-nav {
        order: 3;
        width: 100%;
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .topbar-actions {
        margin-left: auto;
    }

    .profile-label {
        display: none;
    }
}


/* --- Stable Beta 0.4 sun/moon theme toggle positioning --- */

.topbar-inner {
    display: flex !important;
    align-items: center !important;
}

.main-nav {
    justify-content: flex-start;
}

.topbar-actions {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.theme-toggle-form {
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}

.theme-toggle {
    width: 66px !important;
    height: 36px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 999px !important;
    background: #e0f2fe !important;
    position: relative !important;
    cursor: pointer !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

.theme-icon {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1 !important;
    font-size: 15px !important;
    line-height: 1 !important;
    pointer-events: none !important;
}

.theme-icon-sun {
    left: 10px !important;
    color: #f59e0b !important;
    opacity: 1 !important;
}

.theme-icon-moon {
    right: 11px !important;
    color: #64748b !important;
    opacity: .55 !important;
}

.theme-toggle-knob {
    position: absolute !important;
    left: 3px !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    box-shadow: 0 3px 10px rgba(15,23,42,.22) !important;
    transition: transform .16s ease, background .16s ease !important;
    z-index: 2 !important;
}

.theme-toggle.is-dark {
    background: #172554 !important;
    border-color: #2563eb !important;
}

.theme-toggle.is-dark .theme-toggle-knob {
    transform: translateX(30px) !important;
    background: #0f172a !important;
}

.theme-toggle.is-dark .theme-icon-sun {
    opacity: .45 !important;
    color: #94a3b8 !important;
}

.theme-toggle.is-dark .theme-icon-moon {
    opacity: 1 !important;
    color: #dbeafe !important;
}

body.theme-dark .theme-toggle {
    background: #172554 !important;
    border-color: #2563eb !important;
}

@media (max-width: 900px) {
    .topbar-actions {
        margin-left: auto !important;
    }
}


/* --- Stable Beta 0.4 dark mode button/pill fix --- */

/* General white button fix in dark mode */
body.theme-dark button,
body.theme-dark input[type="submit"],
body.theme-dark input[type="button"],
body.theme-dark .btn,
body.theme-dark a.btn {
    border-color: #334155;
}

body.theme-dark .btn:not(.danger):not(.primary),
body.theme-dark a.btn:not(.danger):not(.primary),
body.theme-dark button.btn:not(.danger):not(.primary) {
    background: #1e293b !important;
    color: #dbeafe !important;
    border: 1px solid #334155 !important;
    box-shadow: none !important;
}

body.theme-dark .btn:not(.danger):not(.primary):hover,
body.theme-dark a.btn:not(.danger):not(.primary):hover,
body.theme-dark button.btn:not(.danger):not(.primary):hover {
    background: #26344a !important;
    color: #ffffff !important;
}

/* Keep main action buttons blue */
body.theme-dark .btn:first-child,
body.theme-dark .btn.primary,
body.theme-dark button.btn.primary,
body.theme-dark a.btn.primary {
    background: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
}

/* Delete/danger buttons were showing white. */
body.theme-dark .btn.danger,
body.theme-dark a.btn.danger,
body.theme-dark button.btn.danger,
body.theme-dark .danger,
body.theme-dark a[href*="delete.php"],
body.theme-dark button[name*="delete"],
body.theme-dark button[value*="delete"],
body.theme-dark button[value*="clear_reserved"],
body.theme-dark .delete-button,
body.theme-dark .clear-button {
    background: #3f1d1d !important;
    color: #fecaca !important;
    border: 1px solid #7f1d1d !important;
    box-shadow: none !important;
}

body.theme-dark .btn.danger:hover,
body.theme-dark a.btn.danger:hover,
body.theme-dark button.btn.danger:hover,
body.theme-dark .danger:hover,
body.theme-dark a[href*="delete.php"]:hover,
body.theme-dark button[name*="delete"]:hover,
body.theme-dark button[value*="delete"]:hover,
body.theme-dark button[value*="clear_reserved"]:hover,
body.theme-dark .delete-button:hover,
body.theme-dark .clear-button:hover {
    background: #7f1d1d !important;
    color: #ffffff !important;
}

/* Some pages use plain anchors styled as buttons without btn classes. */
body.theme-dark .row-actions a,
body.theme-dark .table-actions-cell a,
body.theme-dark .actions a,
body.theme-dark .actions button {
    border-color: #334155;
}

body.theme-dark .row-actions a:not(.danger):not([href*="delete.php"]),
body.theme-dark .table-actions-cell a:not(.danger):not([href*="delete.php"]) {
    background: #1e293b !important;
    color: #dbeafe !important;
    border: 1px solid #334155 !important;
}

body.theme-dark .row-actions a:not(.danger):not([href*="delete.php"]):hover,
body.theme-dark .table-actions-cell a:not(.danger):not([href*="delete.php"]):hover {
    background: #26344a !important;
    color: #ffffff !important;
}

/* Code pills were still too pale in some table cells. */
body.theme-dark .code-pill,
body.theme-dark td .code-pill,
body.theme-dark .qr-code-pill,
body.theme-dark .item-id-pill {
    background: #1e293b !important;
    color: #e2e8f0 !important;
    border: 1px solid #334155 !important;
}

/* Search filter detail summary was still white on some browsers. */
body.theme-dark details,
body.theme-dark details summary,
body.theme-dark details.card,
body.theme-dark details.card summary {
    background: #111827 !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

/* Preserve white only where it must be white for QR/print. */
body.theme-dark .qr-label-preview,
body.theme-dark .qr-preview,
body.theme-dark .qr-card-preview,
body.theme-dark .print-label,
body.theme-dark .label-card,
body.theme-dark .print-sheet,
body.theme-dark .print-sheet .label,
body.theme-dark canvas,
body.theme-dark .qr-box {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #111827 !important;
    border-color: #111827 !important;
}

/* Same button fixes for system theme when OS is dark. */
@media (prefers-color-scheme: dark) {
    body.theme-system .btn:not(.danger):not(.primary),
    body.theme-system a.btn:not(.danger):not(.primary),
    body.theme-system button.btn:not(.danger):not(.primary) {
        background: #1e293b !important;
        color: #dbeafe !important;
        border: 1px solid #334155 !important;
        box-shadow: none !important;
    }

    body.theme-system .btn.danger,
    body.theme-system a.btn.danger,
    body.theme-system button.btn.danger,
    body.theme-system .danger,
    body.theme-system a[href*="delete.php"],
    body.theme-system button[name*="delete"],
    body.theme-system button[value*="delete"],
    body.theme-system button[value*="clear_reserved"],
    body.theme-system .delete-button,
    body.theme-system .clear-button {
        background: #3f1d1d !important;
        color: #fecaca !important;
        border: 1px solid #7f1d1d !important;
        box-shadow: none !important;
    }

    body.theme-system .code-pill,
    body.theme-system td .code-pill,
    body.theme-system .qr-code-pill,
    body.theme-system .item-id-pill {
        background: #1e293b !important;
        color: #e2e8f0 !important;
        border: 1px solid #334155 !important;
    }

    body.theme-system details,
    body.theme-system details summary,
    body.theme-system details.card,
    body.theme-system details.card summary {
        background: #111827 !important;
        color: #f8fafc !important;
        border-color: #334155 !important;
    }
}


/* --- Stable Beta 0.4 dark cleanup: toggle, white panels, buttons --- */

/* Hide old/broken theme toggle visuals if old CSS is still cached on a page. */
.theme-toggle,
.theme-toggle-form,
.theme-icon,
.theme-option,
.theme-toggle-bulb {
    display: none !important;
}

/* Clean topbar layout */
.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,255,255,.94);
    border-bottom: 1px solid #d8e0ee;
    backdrop-filter: blur(14px);
}

.topbar-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    gap: 22px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #0f172a;
    flex: 0 0 auto;
}

.brand:hover {
    text-decoration: none;
}

.brand-name {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1;
}

.beta-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 19px;
    padding: 0 7px;
    border: 1px solid #b8c7e6;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    white-space: nowrap;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 auto;
    min-width: 0;
}

.main-nav a {
    color: #335075;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
}

.main-nav a:hover {
    color: #2563eb;
    text-decoration: none;
}

.topbar-actions {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex: 0 0 auto;
}

.scan-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 16px;
    border-radius: 12px;
    background: #111827;
    color: #ffffff !important;
    text-decoration: none;
    font-weight: 800;
    font-size: 14px;
    box-shadow: 0 10px 24px rgba(17,24,39,.18);
}

.scan-button:hover {
    text-decoration: none;
}

.scan-icon {
    font-size: 15px;
    line-height: 1;
}

.profile-menu {
    position: relative;
}

.profile-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 4px 8px 4px 4px;
    border: 1px solid #d8e0ee;
    border-radius: 999px;
    background: #ffffff;
    color: #0f172a;
    text-decoration: none;
    font-weight: 800;
    cursor: pointer;
    max-width: 260px;
}

.profile-avatar {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    border: 1px solid #c9d7f2;
    overflow: hidden;
    flex: 0 0 auto;
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-label {
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.profile-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 280px;
    border: 1px solid #d8e0ee;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(15,23,42,.16);
    padding: 10px;
    display: none;
}

.profile-menu:hover .profile-dropdown,
.profile-menu:focus-within .profile-dropdown {
    display: block;
}

.profile-dropdown-header {
    padding: 10px;
    border-bottom: 1px solid #edf2f7;
    margin-bottom: 8px;
}

.profile-dropdown-header strong,
.profile-dropdown-header span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-dropdown-header span {
    color: #64748b;
    font-size: 13px;
    margin-top: 2px;
}

.profile-dropdown a {
    display: block;
    padding: 10px;
    border-radius: 12px;
    color: #334155;
    text-decoration: none;
    font-weight: 800;
}

.profile-dropdown a:hover {
    background: #f1f5f9;
    color: #0f172a;
    text-decoration: none;
}

/* New independent sun/moon switch */
.mode-switch-form {
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}

.mode-switch {
    width: 72px !important;
    height: 38px !important;
    border-radius: 999px !important;
    border: 1px solid #cbd5e1 !important;
    background: #e0f2fe !important;
    position: relative !important;
    cursor: pointer !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: inline-flex !important;
    align-items: center !important;
    box-shadow: none !important;
}

.mode-track-icon {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    pointer-events: none !important;
}

.mode-track-sun {
    left: 11px !important;
    color: #f59e0b !important;
    opacity: .25 !important;
}

.mode-track-moon {
    right: 12px !important;
    color: #64748b !important;
    opacity: .35 !important;
}

.mode-knob {
    position: absolute !important;
    left: 3px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #f59e0b !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    box-shadow: 0 3px 10px rgba(15,23,42,.22) !important;
    transition: transform .16s ease, background .16s ease, color .16s ease !important;
    z-index: 2 !important;
}

.mode-switch.mode-dark {
    background: #172554 !important;
    border-color: #2563eb !important;
}

.mode-switch.mode-dark .mode-knob {
    transform: translateX(34px) !important;
    background: #0f172a !important;
    color: #dbeafe !important;
}

.mode-switch.mode-dark .mode-track-sun {
    color: #94a3b8 !important;
    opacity: .35 !important;
}

.mode-switch.mode-dark .mode-track-moon {
    opacity: .22 !important;
}

/* Dark theme core */
body.theme-dark {
    --bg:#0b1220;
    --bg2:#0f172a;
    --card:#111827;
    --text:#f8fafc;
    --muted:#a8b6ca;
    --line:#334155;
    --blue2:#172554;
    background:#0b1220 !important;
    color:#f8fafc !important;
    color-scheme: dark;
}

body.theme-dark .topbar {
    background: rgba(15,23,42,.96) !important;
    border-bottom-color: #334155 !important;
}

body.theme-dark .brand,
body.theme-dark .brand-name,
body.theme-dark .profile-label {
    color:#f8fafc !important;
}

body.theme-dark .beta-badge {
    background:#172554 !important;
    border-color:#2563eb !important;
    color:#bfdbfe !important;
}

body.theme-dark .main-nav a {
    color:#cbd5e1 !important;
}

body.theme-dark .main-nav a:hover {
    background:#1e293b !important;
    color:#ffffff !important;
}

body.theme-dark .scan-button {
    background:#2563eb !important;
    color:#ffffff !important;
}

body.theme-dark .profile-trigger,
body.theme-dark .profile-dropdown {
    background:#111827 !important;
    border-color:#334155 !important;
    color:#f8fafc !important;
}

body.theme-dark .profile-dropdown-header {
    border-bottom-color:#334155 !important;
}

body.theme-dark .profile-dropdown-header span {
    color:#94a3b8 !important;
}

body.theme-dark .profile-dropdown a {
    color:#cbd5e1 !important;
}

body.theme-dark .profile-dropdown a:hover {
    background:#1e293b !important;
    color:#ffffff !important;
}

/* Kill the stubborn white panels seen in Items/Add Item/Templates/Made QR codes */
body.theme-dark .card,
body.theme-dark section.card,
body.theme-dark form.card,
body.theme-dark details.card,
body.theme-dark .table-wrap,
body.theme-dark .items-filter-panel,
body.theme-dark .items-filter-panel[open],
body.theme-dark .items-filter-panel summary,
body.theme-dark .field-as-card,
body.theme-dark .field-as-card.template-create-card,
body.theme-dark .template-fields-panel,
body.theme-dark .template-field-builder,
body.theme-dark .template-share-card,
body.theme-dark .template-preset,
body.theme-dark .template-field-row,
body.theme-dark .template-field-row-main,
body.theme-dark .template-field-row-extra,
body.theme-dark .template-options-wrap,
body.theme-dark .template-required,
body.theme-dark .template-create-card,
body.theme-dark .location-summary,
body.theme-dark .scanner-box,
body.theme-dark .notice:not(.print-label):not(.label-card),
body.theme-dark .alert,
body.theme-dark .stat-card,
body.theme-dark .metric-card {
    background:#111827 !important;
    background-color:#111827 !important;
    color:#f8fafc !important;
    border-color:#334155 !important;
    box-shadow:0 18px 45px rgba(0,0,0,.22) !important;
}

body.theme-dark .hero .card:first-child {
    background:linear-gradient(135deg,#111827 0%,#172033 100%) !important;
}

body.theme-dark .items-filter-panel *,
body.theme-dark .template-field-builder *,
body.theme-dark .template-share-card *,
body.theme-dark .template-preset *,
body.theme-dark .field-as-card *,
body.theme-dark .template-fields-panel *,
body.theme-dark .card *,
body.theme-dark .table-wrap * {
    color: inherit;
}

body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark strong,
body.theme-dark label,
body.theme-dark th,
body.theme-dark td,
body.theme-dark summary,
body.theme-dark .section-head,
body.theme-dark .page-head {
    color:#f8fafc !important;
}

body.theme-dark .muted,
body.theme-dark .help,
body.theme-dark .hint,
body.theme-dark small,
body.theme-dark .template-help,
body.theme-dark .template-field-hint,
body.theme-dark .site-footer,
body.theme-dark .items-filter-grid label {
    color:#a8b6ca !important;
}

body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea,
body.theme-dark .items-search-row input,
body.theme-dark .items-filter-grid select,
body.theme-dark .template-field-row input,
body.theme-dark .template-field-row select {
    background:#0f172a !important;
    border-color:#334155 !important;
    color:#f8fafc !important;
}

body.theme-dark input::placeholder,
body.theme-dark textarea::placeholder {
    color:#74839a !important;
}

body.theme-dark table,
body.theme-dark tbody,
body.theme-dark tr {
    background:#111827 !important;
    color:#f8fafc !important;
}

body.theme-dark thead,
body.theme-dark th {
    background:#0f172a !important;
    color:#cbd5e1 !important;
}

body.theme-dark td {
    background:#111827 !important;
    color:#e5edf8 !important;
    border-color:#334155 !important;
}

body.theme-dark tr:hover td {
    background:#172033 !important;
}

body.theme-dark .code-pill,
body.theme-dark td .code-pill,
body.theme-dark .qr-code-pill,
body.theme-dark .item-id-pill,
body.theme-dark .badge,
body.theme-dark .pill,
body.theme-dark .status-pill,
body.theme-dark .tag,
body.theme-dark .field-unit-hint {
    background:#1e293b !important;
    color:#e2e8f0 !important;
    border:1px solid #334155 !important;
}

/* Buttons, including delete buttons that were staying white */
body.theme-dark .btn,
body.theme-dark a.btn,
body.theme-dark button.btn,
body.theme-dark .row-actions a,
body.theme-dark .table-actions-cell a,
body.theme-dark .actions a,
body.theme-dark .actions button {
    background:#1e293b !important;
    color:#dbeafe !important;
    border:1px solid #334155 !important;
    box-shadow:none !important;
}

body.theme-dark .btn:hover,
body.theme-dark a.btn:hover,
body.theme-dark button.btn:hover,
body.theme-dark .row-actions a:hover,
body.theme-dark .table-actions-cell a:hover,
body.theme-dark .actions a:hover,
body.theme-dark .actions button:hover {
    background:#26344a !important;
    color:#ffffff !important;
}

body.theme-dark .btn.danger,
body.theme-dark a.btn.danger,
body.theme-dark button.btn.danger,
body.theme-dark a[href*="delete.php"],
body.theme-dark button[name*="delete"],
body.theme-dark button[value*="delete"],
body.theme-dark button[value*="clear_reserved"],
body.theme-dark .delete-button,
body.theme-dark .clear-button {
    background:#3f1d1d !important;
    color:#fecaca !important;
    border:1px solid #7f1d1d !important;
}

body.theme-dark .btn.danger:hover,
body.theme-dark a.btn.danger:hover,
body.theme-dark button.btn.danger:hover,
body.theme-dark a[href*="delete.php"]:hover,
body.theme-dark button[name*="delete"]:hover,
body.theme-dark button[value*="delete"]:hover,
body.theme-dark button[value*="clear_reserved"]:hover {
    background:#7f1d1d !important;
    color:#ffffff !important;
}

/* Primary actions stay blue */
body.theme-dark .btn.primary,
body.theme-dark a.btn.primary,
body.theme-dark .actions > .btn:first-child:not(.danger),
body.theme-dark .page-head .btn:last-child:not(.danger) {
    background:#2563eb !important;
    color:#ffffff !important;
    border-color:#2563eb !important;
}

/* QR and print surfaces stay white deliberately */
body.theme-dark .qr-label-preview,
body.theme-dark .qr-preview,
body.theme-dark .qr-card-preview,
body.theme-dark .print-label,
body.theme-dark .label-card,
body.theme-dark .print-sheet,
body.theme-dark .print-sheet .label,
body.theme-dark canvas,
body.theme-dark .qr-box {
    background:#ffffff !important;
    background-color:#ffffff !important;
    color:#111827 !important;
    border-color:#111827 !important;
}

@media (max-width:900px) {
    .topbar-inner {
        align-items:flex-start;
        flex-wrap:wrap;
        gap:12px;
    }

    .main-nav {
        order:3;
        width:100%;
        overflow-x:auto;
        padding-bottom:4px;
    }

    .topbar-actions {
        margin-left:auto !important;
    }

    .profile-label {
        display:none;
    }
}


/* --- Stable Beta 0.4 profile dropdown hover bridge + demo link polish --- */

.profile-menu {
    position: relative !important;
}

.profile-dropdown {
    top: calc(100% + 6px) !important;
    right: 0 !important;
}

/* Invisible bridge stops the dropdown disappearing while moving from profile button to menu. */
.profile-menu::after {
    content: '' !important;
    position: absolute !important;
    left: -12px !important;
    right: -12px !important;
    top: 100% !important;
    height: 14px !important;
    display: block !important;
    background: transparent !important;
    pointer-events: auto !important;
}

.profile-menu:hover .profile-dropdown,
.profile-menu:focus-within .profile-dropdown,
.profile-dropdown:hover {
    display: block !important;
}

.auth-extra-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.demo-page {
    display: grid;
    gap: 22px;
}

.demo-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, .9fr);
    gap: 18px;
    align-items: stretch;
}

.demo-card-stack {
    display: grid;
    gap: 14px;
}

.demo-steps {
    counter-reset: demoStep;
    display: grid;
    gap: 12px;
}

.demo-step {
    counter-increment: demoStep;
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 12px;
    align-items: start;
    padding: 14px;
    border: 1px solid var(--line, #d8e0ee);
    border-radius: 16px;
    background: var(--card, #fff);
}

.demo-step::before {
    content: counter(demoStep);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #2563eb;
    color: #fff;
    font-weight: 900;
}

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

.demo-mini {
    border: 1px solid var(--line, #d8e0ee);
    border-radius: 18px;
    background: var(--card, #fff);
    padding: 18px;
}

.demo-mini h3 {
    margin-top: 0;
}

.demo-fake-table {
    display: grid;
    gap: 8px;
}

.demo-fake-row {
    display: grid;
    grid-template-columns: 90px 1fr 100px;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--line, #d8e0ee);
    border-radius: 12px;
    align-items: center;
}

.demo-fake-qr {
    width: 54px;
    height: 54px;
    border-radius: 10px;
    background:
        linear-gradient(90deg, #111 10px, transparent 10px) 0 0/18px 18px,
        linear-gradient(#111 10px, transparent 10px) 0 0/18px 18px,
        #fff;
    border: 8px solid #fff;
    box-shadow: 0 0 0 1px #d8e0ee;
}

body.theme-dark .demo-step,
body.theme-dark .demo-mini,
body.theme-dark .demo-fake-row {
    background: #111827 !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

body.theme-dark .demo-fake-qr {
    background:
        linear-gradient(90deg, #111 10px, transparent 10px) 0 0/18px 18px,
        linear-gradient(#111 10px, transparent 10px) 0 0/18px 18px,
        #fff !important;
    border-color: #fff !important;
}

@media (max-width: 900px) {
    .demo-hero,
    .demo-grid {
        grid-template-columns: 1fr;
    }
}


/* --- Stable Beta 0.4 public demo dashboard + login required modal --- */

.public-demo-body {
    min-height: 100vh;
    background: linear-gradient(180deg, #f6f9ff 0%, #eef3fb 260px);
    color: #101828;
}

.public-demo-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,255,255,.94);
    border-bottom: 1px solid #d8e0ee;
    backdrop-filter: blur(14px);
}

.public-demo-topbar-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 18px;
}

.public-demo-nav {
    display: flex;
    gap: 14px;
    align-items: center;
    flex: 1 1 auto;
    overflow-x: auto;
}

.public-demo-nav a,
.public-demo-nav button {
    border: 0;
    background: transparent;
    color: #335075;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    padding: 8px 0;
}

.public-demo-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.demo-shell {
    max-width: 1240px;
    margin: 0 auto;
    padding: 34px 18px 60px;
}

.demo-disabled {
    cursor: pointer;
}

.demo-locked-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 900;
}

.demo-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, .48);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.demo-modal-backdrop.is-open {
    display: flex;
}

.demo-modal {
    width: min(520px, 100%);
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid #d8e0ee;
    box-shadow: 0 28px 80px rgba(15,23,42,.26);
    padding: 24px;
}

.demo-modal h2 {
    margin-top: 0;
}

.demo-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.demo-preview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, .9fr);
    gap: 18px;
    margin-bottom: 22px;
}

.demo-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}

.demo-metric {
    border: 1px solid #d8e0ee;
    background: #ffffff;
    border-radius: 18px;
    padding: 20px;
    text-decoration: none;
    color: #101828;
}

.demo-metric span {
    display: flex;
    justify-content: space-between;
    color: #667085;
}

.demo-metric span::after {
    content: '↗';
    color: #98a2b3;
    font-weight: 900;
}

.demo-metric strong {
    display: block;
    font-size: 34px;
    margin-top: 8px;
}

.demo-fake-table-card {
    overflow: hidden;
}

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

.demo-table th,
.demo-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #e4eaf3;
    text-align: left;
}

.demo-table th {
    color: #667085;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.demo-workflow-list {
    margin: 0;
    padding-left: 22px;
    color: #516173;
    line-height: 1.7;
}

.demo-qr-card {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
    padding: 14px;
    border: 1px solid #d8e0ee;
    border-radius: 18px;
    background: #f8fbff;
}

.demo-qr-box {
    width: 84px;
    height: 84px;
    border-radius: 12px;
    background:
        linear-gradient(90deg, #111 9px, transparent 9px) 0 0/18px 18px,
        linear-gradient(#111 9px, transparent 9px) 0 0/18px 18px,
        #fff;
    border: 10px solid #fff;
    box-shadow: 0 0 0 1px #d8e0ee;
    flex: 0 0 auto;
}

.demo-hint-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.demo-hint {
    border: 1px solid #d8e0ee;
    border-radius: 18px;
    padding: 18px;
    background: #ffffff;
}

.demo-hint h3 {
    margin-top: 0;
}

@media (max-width: 900px) {
    .demo-preview-grid,
    .demo-metrics,
    .demo-hint-row {
        grid-template-columns: 1fr;
    }

    .public-demo-topbar-inner {
        flex-wrap: wrap;
    }

    .public-demo-actions {
        margin-left: auto;
    }
}


/* --- Stable Beta 0.4 scrollable patch history --- */

.patch-history-scroll {
    max-height: 420px;
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid var(--line, #d8e0ee);
    border-radius: 16px;
}

.patch-history-scroll table {
    margin: 0;
}

.patch-history-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f8fbff;
}

.patch-history-scroll td,
.patch-history-scroll th {
    vertical-align: top;
}

.patch-history-note {
    margin-top: 10px;
    color: var(--muted, #667085);
    font-size: 13px;
}

body.theme-dark .patch-history-scroll {
    border-color: #334155 !important;
    background: #111827 !important;
}

body.theme-dark .patch-history-scroll thead th {
    background: #0f172a !important;
    color: #cbd5e1 !important;
}

body.theme-dark .patch-history-note {
    color: #a8b6ca !important;
}

.public-demo-body .patch-history-scroll {
    background: #ffffff;
}

@media (max-width: 700px) {
    .patch-history-scroll {
        max-height: 360px;
    }
}


/* --- Stable Beta 0.4 public pages with login-required modal --- */

.public-preview-note {
    border: 1px solid #b8c7e6;
    background: #eef4ff;
    color: #1d4ed8;
    border-radius: 16px;
    padding: 14px 16px;
    font-weight: 800;
    margin-bottom: 18px;
}

.public-preview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}

.public-preview-card,
.public-preview-table-card {
    border: 1px solid var(--line, #d8e0ee);
    background: var(--card, #fff);
    border-radius: 18px;
    padding: 20px;
}

.public-preview-card span {
    display: flex;
    justify-content: space-between;
    color: var(--muted, #667085);
}

.public-preview-card span::after {
    content: '↗';
    color: #98a2b3;
    font-weight: 900;
}

.public-preview-card strong {
    display: block;
    font-size: 34px;
    margin-top: 8px;
}

.public-login-required {
    cursor: pointer;
}

.demo-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, .48);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.demo-modal-backdrop.is-open {
    display: flex;
}

.demo-modal {
    width: min(520px, 100%);
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid #d8e0ee;
    box-shadow: 0 28px 80px rgba(15,23,42,.26);
    padding: 24px;
}

.demo-modal h2 {
    margin-top: 0;
}

.demo-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

body.theme-dark .public-preview-note {
    background: #172554 !important;
    border-color: #2563eb !important;
    color: #bfdbfe !important;
}

body.theme-dark .public-preview-card,
body.theme-dark .public-preview-table-card,
body.theme-dark .demo-modal {
    background: #111827 !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

body.theme-dark .public-preview-card span,
body.theme-dark .demo-modal .muted {
    color: #a8b6ca !important;
}

@media (max-width: 900px) {
    .public-preview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .public-preview-grid {
        grid-template-columns: 1fr;
    }
}


/* --- Stable Beta 0.4 public theme toggle --- */

body.theme-dark .public-preview-card,
body.theme-dark .public-preview-table-card,
body.theme-dark .public-preview-note,
body.theme-dark .demo-modal,
body.theme-dark .demo-table,
body.theme-dark .demo-table tbody,
body.theme-dark .demo-table tr {
    background: #111827 !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

body.theme-dark .public-preview-note {
    background: #172554 !important;
    color: #bfdbfe !important;
    border-color: #2563eb !important;
}

body.theme-dark .demo-table th {
    background: #0f172a !important;
    color: #cbd5e1 !important;
}

body.theme-dark .demo-table td {
    background: #111827 !important;
    color: #e5edf8 !important;
    border-color: #334155 !important;
}

body.theme-dark .public-demo-body {
    background: #0b1220 !important;
    color: #f8fafc !important;
}

body.theme-dark .public-demo-topbar {
    background: rgba(15,23,42,.96) !important;
    border-bottom-color: #334155 !important;
}

body.theme-dark .public-demo-nav a,
body.theme-dark .public-demo-nav button {
    color: #cbd5e1 !important;
}


/* --- Stable Beta 0.4 login dashboard button --- */

.auth-extra-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.auth-copy .auth-extra-actions {
    margin-top: 22px;
}

body.theme-dark .auth-extra-actions .btn.ghost,
body.theme-dark .auth-extra-actions .btn.secondary {
    background: #1e293b !important;
    color: #dbeafe !important;
    border-color: #334155 !important;
}


/* --- Stable Beta 0.4 login dashboard preview area --- */

.auth-preview-area {
    margin-top: 24px;
    padding: 18px;
    border: 1px solid #d8e0ee;
    border-radius: 18px;
    background: linear-gradient(135deg, #f8fbff 0%, #eef4ff 100%);
    display: grid;
    gap: 14px;
}

.auth-preview-area strong,
.auth-preview-area span {
    display: block;
}

.auth-preview-area strong {
    font-size: 15px;
    color: #101828;
}

.auth-preview-area span {
    margin-top: 4px;
    color: #516173;
    line-height: 1.5;
}

.auth-preview-area .preview-btn {
    width: fit-content;
}

.auth-preview-link {
    margin: 16px 0 0;
    color: #667085;
    font-size: 14px;
}

.auth-preview-link a {
    font-weight: 800;
}

body.theme-dark .auth-preview-area {
    background: linear-gradient(135deg, #111827 0%, #172554 100%) !important;
    border-color: #334155 !important;
}

body.theme-dark .auth-preview-area strong {
    color: #f8fafc !important;
}

body.theme-dark .auth-preview-area span,
body.theme-dark .auth-preview-link {
    color: #a8b6ca !important;
}

@media (max-width: 720px) {
    .auth-preview-area .preview-btn {
        width: 100%;
        justify-content: center;
    }
}


/* --- Stable Beta 0.4 top bar spacing polish --- */

/*
Keeps the main navigation on one clean row on desktop, with brand left and
actions right. It only switches to a wrapping/mobile layout when the viewport
is genuinely narrow.
*/

.topbar {
    min-height: 74px;
}

.topbar-inner {
    max-width: 1480px !important;
    width: 100%;
    padding: 14px 28px !important;
    gap: 26px !important;
    justify-content: flex-start;
}

.brand {
    margin-right: 10px;
}

.main-nav {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    column-gap: 24px !important;
    row-gap: 8px !important;
    min-width: 0 !important;
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
}

.main-nav::-webkit-scrollbar {
    display: none;
}

.main-nav a {
    padding: 8px 0;
    line-height: 1.1;
}

.topbar-actions {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 14px !important;
    flex: 0 0 auto !important;
}

.scan-button {
    gap: 7px;
    min-width: 74px;
}

.profile-trigger {
    max-width: 220px;
}

.mode-switch-form {
    flex: 0 0 auto;
}

@media (min-width: 1200px) {
    .topbar-inner {
        flex-wrap: nowrap !important;
    }

    .main-nav {
        flex-wrap: nowrap !important;
    }
}

@media (max-width: 1199px) {
    .topbar {
        min-height: auto;
    }

    .topbar-inner {
        align-items: flex-start !important;
        flex-wrap: wrap !important;
        gap: 12px 18px !important;
    }

    .main-nav {
        order: 3;
        width: 100%;
        flex-basis: 100% !important;
        padding-bottom: 4px;
        column-gap: 18px !important;
    }

    .topbar-actions {
        margin-left: auto !important;
    }
}

@media (max-width: 700px) {
    .topbar-inner {
        padding: 12px 16px !important;
    }

    .main-nav {
        column-gap: 16px !important;
    }

    .scan-button span:last-child {
        display: none;
    }

    .scan-button {
        min-width: 42px;
        padding-inline: 12px;
    }
}


/* --- Stable Beta 0.4 footer bottom placement --- */

/*
Keeps the footer at the bottom of the viewport on short pages,
without making it fixed or covering content.
*/

html,
body {
    min-height: 100%;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.topbar {
    flex: 0 0 auto;
}

.app-shell {
    flex: 1 0 auto;
    width: 100%;
}

.site-footer {
    flex: 0 0 auto;
    width: 100%;
    margin-top: auto !important;
    padding-top: 24px;
    padding-bottom: 28px;
}

.site-footer-inner,
.site-footer .footer-inner {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 700px) {
    .site-footer {
        padding-bottom: 22px;
    }
}


/* --- Stable Beta 0.4 mobile top bar cleanup --- */

/*
Mobile top bar:
- Brand and account controls stay in one compact row.
- Navigation becomes a horizontal scroll strip instead of wrapping into a tall block.
- Scan becomes an icon-only square on mobile.
- Profile name hides on mobile, leaving the avatar.
*/

@media (max-width: 760px) {
    .topbar {
        min-height: auto !important;
    }

    .topbar-inner {
        padding: 12px 14px 10px !important;
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        grid-template-areas:
            "brand spacer actions"
            "nav nav nav" !important;
        align-items: center !important;
        gap: 10px 12px !important;
        max-width: 100% !important;
    }

    .brand {
        grid-area: brand !important;
        margin: 0 !important;
        gap: 7px !important;
        min-width: 0 !important;
    }

    .brand-name {
        font-size: 22px !important;
        letter-spacing: -0.05em !important;
    }

    .beta-badge {
        height: 18px !important;
        padding: 0 7px !important;
        font-size: 9px !important;
    }

    .topbar-actions {
        grid-area: actions !important;
        margin-left: 0 !important;
        justify-self: end !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
    }

    .scan-button {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        padding: 0 !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .scan-button span:not(.scan-icon) {
        display: none !important;
    }

    .scan-icon {
        font-size: 17px !important;
    }

    .profile-trigger {
        width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 4px !important;
        border-radius: 999px !important;
        justify-content: center !important;
    }

    .profile-label {
        display: none !important;
    }

    .profile-avatar {
        width: 34px !important;
        height: 34px !important;
    }

    .mode-switch {
        width: 62px !important;
        height: 36px !important;
    }

    .mode-knob {
        width: 30px !important;
        height: 30px !important;
        font-size: 14px !important;
    }

    .mode-switch.mode-dark .mode-knob {
        transform: translateX(26px) !important;
    }

    .mode-track-sun {
        left: 9px !important;
    }

    .mode-track-moon {
        right: 10px !important;
    }

    .main-nav {
        grid-area: nav !important;
        order: unset !important;
        width: 100% !important;
        flex-basis: auto !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        column-gap: 8px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 2px 0 4px !important;
        margin: 0 !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap !important;
    }

    .main-nav::-webkit-scrollbar {
        display: none !important;
    }

    .main-nav a {
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        min-height: 34px !important;
        padding: 0 12px !important;
        border-radius: 999px !important;
        background: #eef4ff !important;
        color: #335075 !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        text-decoration: none !important;
    }

    .main-nav a:hover {
        background: #dbeafe !important;
        color: #1d4ed8 !important;
    }

    body.theme-dark .main-nav a {
        background: #1e293b !important;
        color: #cbd5e1 !important;
    }

    body.theme-dark .main-nav a:hover {
        background: #26344a !important;
        color: #ffffff !important;
    }

    .profile-dropdown {
        right: -74px !important;
        width: min(280px, calc(100vw - 28px)) !important;
    }

    .app-shell {
        padding-top: 22px !important;
    }
}

@media (max-width: 420px) {
    .topbar-inner {
        padding-left: 10px !important;
        padding-right: 10px !important;
        gap: 9px 8px !important;
    }

    .brand-name {
        font-size: 20px !important;
    }

    .beta-badge {
        font-size: 8px !important;
        padding: 0 6px !important;
    }

    .topbar-actions {
        gap: 6px !important;
    }

    .scan-button,
    .profile-trigger {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }

    .profile-avatar {
        width: 31px !important;
        height: 31px !important;
    }

    .mode-switch {
        width: 58px !important;
        height: 34px !important;
    }

    .mode-knob {
        width: 28px !important;
        height: 28px !important;
    }

    .mode-switch.mode-dark .mode-knob {
        transform: translateX(24px) !important;
    }

    .main-nav a {
        min-height: 32px !important;
        padding: 0 10px !important;
        font-size: 12px !important;
    }
}


/* --- Stable Beta 0.4 mobile burger navigation --- */

.mobile-menu-toggle {
    display: none;
}

@media (max-width: 760px) {
    .topbar-inner {
        grid-template-columns: auto auto 1fr auto !important;
        grid-template-areas: "brand menu spacer actions" !important;
    }

    .mobile-menu-toggle {
        grid-area: menu !important;
        display: inline-flex !important;
        width: 42px !important;
        height: 42px !important;
        border: 1px solid #d8e0ee !important;
        border-radius: 14px !important;
        background: #ffffff !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        gap: 4px !important;
        padding: 0 !important;
        cursor: pointer !important;
        box-shadow: none !important;
    }

    .mobile-menu-toggle span {
        width: 18px !important;
        height: 2px !important;
        border-radius: 999px !important;
        background: #101828 !important;
        display: block !important;
        transition: transform .16s ease, opacity .16s ease !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(1) {
        transform: translateY(6px) rotate(45deg) !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(2) {
        opacity: 0 !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg) !important;
    }

    .main-nav {
        grid-area: nav !important;
        display: none !important;
        width: 100% !important;
        padding: 10px !important;
        margin: 0 !important;
        border: 1px solid #d8e0ee !important;
        border-radius: 18px !important;
        background: #ffffff !important;
        box-shadow: 0 18px 45px rgba(15,23,42,.12) !important;
        overflow: visible !important;
        white-space: normal !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .main-nav.is-open {
        display: flex !important;
    }

    .main-nav a {
        min-height: 38px !important;
        padding: 0 13px !important;
        border-radius: 999px !important;
        background: #eef4ff !important;
        color: #335075 !important;
        font-size: 13px !important;
        font-weight: 800 !important;
    }

    body.theme-dark .mobile-menu-toggle {
        background: #111827 !important;
        border-color: #334155 !important;
    }

    body.theme-dark .mobile-menu-toggle span {
        background: #f8fafc !important;
    }

    body.theme-dark .main-nav {
        background: #111827 !important;
        border-color: #334155 !important;
        box-shadow: 0 18px 45px rgba(0,0,0,.22) !important;
    }

    body.theme-dark .main-nav a {
        background: #1e293b !important;
        color: #cbd5e1 !important;
    }

    body.theme-dark .main-nav a:hover {
        background: #26344a !important;
        color: #ffffff !important;
    }
}

@media (max-width: 420px) {
    .mobile-menu-toggle {
        width: 40px !important;
        height: 40px !important;
    }

    .topbar-inner {
        grid-template-columns: auto auto 1fr auto !important;
    }
}


/* --- Stable Beta 0.4 mobile burger force fix --- */

/*
The earlier mobile menu CSS was being overridden by older mobile nav rules.
This block sits at the end of the stylesheet and forcefully:
- shows the burger button
- hides the nav by default on mobile
- only shows the nav after JS adds .is-open
*/

@media (max-width: 760px) {
    .topbar-inner {
        display: grid !important;
        grid-template-columns: auto auto 1fr auto !important;
        grid-template-areas:
            "brand menu spacer actions"
            "nav nav nav nav" !important;
        align-items: center !important;
        gap: 10px 10px !important;
        padding: 12px 14px !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .brand {
        grid-area: brand !important;
        margin: 0 !important;
    }

    .mobile-menu-toggle {
        grid-area: menu !important;
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        border: 1px solid #d8e0ee !important;
        border-radius: 14px !important;
        background: #ffffff !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        gap: 4px !important;
        padding: 0 !important;
        margin: 0 !important;
        cursor: pointer !important;
        box-shadow: none !important;
        appearance: none !important;
        -webkit-appearance: none !important;
    }

    .mobile-menu-toggle span {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 18px !important;
        height: 2px !important;
        min-height: 2px !important;
        border-radius: 999px !important;
        background: #101828 !important;
        transform-origin: center !important;
        transition: transform .16s ease, opacity .16s ease !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(1) {
        transform: translateY(6px) rotate(45deg) !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(2) {
        opacity: 0 !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg) !important;
    }

    .topbar-actions {
        grid-area: actions !important;
        justify-self: end !important;
        margin-left: 0 !important;
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }

    .main-nav,
    .topbar .main-nav,
    header .main-nav {
        grid-area: nav !important;
        order: unset !important;
        width: 100% !important;
        flex-basis: 100% !important;
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .main-nav.is-open,
    .topbar .main-nav.is-open,
    header .main-nav.is-open {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        overflow: visible !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 10px !important;
        margin: 0 !important;
        border: 1px solid #d8e0ee !important;
        border-radius: 18px !important;
        background: #ffffff !important;
        box-shadow: 0 18px 45px rgba(15,23,42,.12) !important;
        white-space: normal !important;
    }

    .main-nav.is-open a {
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        min-height: 38px !important;
        padding: 0 13px !important;
        border-radius: 999px !important;
        background: #eef4ff !important;
        color: #335075 !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        text-decoration: none !important;
    }

    body.theme-dark .mobile-menu-toggle {
        background: #111827 !important;
        border-color: #334155 !important;
    }

    body.theme-dark .mobile-menu-toggle span {
        background: #f8fafc !important;
    }

    body.theme-dark .main-nav.is-open {
        background: #111827 !important;
        border-color: #334155 !important;
        box-shadow: 0 18px 45px rgba(0,0,0,.22) !important;
    }

    body.theme-dark .main-nav.is-open a {
        background: #1e293b !important;
        color: #cbd5e1 !important;
    }
}

@media (min-width: 761px) {
    .mobile-menu-toggle {
        display: none !important;
    }

    .main-nav {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
    }
}


/* --- Stable Beta 0.4 mobile bottom navigation --- */

/*
Mobile now uses a native-app style bottom nav:
Dashboard, Items, Locations, Folders, QR Labels, Scan.
The full desktop nav stays on desktop/tablet.
*/

.mobile-bottom-nav {
    display: none;
}

@media (max-width: 760px) {
    /* Keep mobile header compact and remove the large nav area. */
    .topbar-inner {
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        grid-template-areas: "brand spacer actions" !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 12px 14px !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .brand {
        grid-area: brand !important;
        margin: 0 !important;
    }

    .topbar-actions {
        grid-area: actions !important;
        justify-self: end !important;
        margin-left: 0 !important;
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }

    .main-nav,
    .topbar .main-nav,
    header .main-nav {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
    }

    .mobile-menu-toggle {
        display: none !important;
    }

    .scan-button {
        display: none !important;
    }

    .profile-trigger {
        width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        padding: 4px !important;
        border-radius: 999px !important;
        justify-content: center !important;
    }

    .profile-label {
        display: none !important;
    }

    .profile-avatar {
        width: 32px !important;
        height: 32px !important;
    }

    .mode-switch {
        width: 58px !important;
        height: 34px !important;
    }

    .mode-knob {
        width: 28px !important;
        height: 28px !important;
        font-size: 14px !important;
    }

    .mode-switch.mode-dark .mode-knob {
        transform: translateX(24px) !important;
    }

    .mobile-bottom-nav {
        position: fixed !important;
        left: 10px !important;
        right: 10px !important;
        bottom: calc(10px + env(safe-area-inset-bottom)) !important;
        z-index: 999 !important;
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 4px !important;
        padding: 8px !important;
        border: 1px solid rgba(216, 224, 238, .92) !important;
        border-radius: 24px !important;
        background: rgba(255, 255, 255, .94) !important;
        box-shadow: 0 18px 55px rgba(15, 23, 42, .22) !important;
        backdrop-filter: blur(18px) !important;
        -webkit-backdrop-filter: blur(18px) !important;
    }

    .mobile-bottom-link {
        min-width: 0 !important;
        min-height: 54px !important;
        border-radius: 18px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        text-decoration: none !important;
        color: #475467 !important;
        font-size: 10px !important;
        font-weight: 850 !important;
        line-height: 1 !important;
        letter-spacing: -0.01em !important;
        white-space: nowrap !important;
    }

    .mobile-bottom-icon {
        font-size: 18px !important;
        line-height: 1 !important;
        display: block !important;
    }

    .mobile-bottom-link:hover,
    .mobile-bottom-link:focus {
        background: #eef4ff !important;
        color: #1d4ed8 !important;
        text-decoration: none !important;
    }

    .mobile-bottom-scan {
        background: #2563eb !important;
        color: #ffffff !important;
        box-shadow: 0 10px 24px rgba(37, 99, 235, .28) !important;
    }

    .mobile-bottom-scan:hover,
    .mobile-bottom-scan:focus {
        background: #1d4ed8 !important;
        color: #ffffff !important;
    }

    .app-shell {
        padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
    }

    .site-footer {
        padding-bottom: calc(112px + env(safe-area-inset-bottom)) !important;
    }

    body.theme-dark .mobile-bottom-nav {
        background: rgba(15, 23, 42, .94) !important;
        border-color: #334155 !important;
        box-shadow: 0 18px 55px rgba(0, 0, 0, .36) !important;
    }

    body.theme-dark .mobile-bottom-link {
        color: #cbd5e1 !important;
    }

    body.theme-dark .mobile-bottom-link:hover,
    body.theme-dark .mobile-bottom-link:focus {
        background: #1e293b !important;
        color: #ffffff !important;
    }

    body.theme-dark .mobile-bottom-scan {
        background: #2563eb !important;
        color: #ffffff !important;
    }
}

@media (max-width: 390px) {
    .mobile-bottom-nav {
        left: 8px !important;
        right: 8px !important;
        padding: 6px !important;
        gap: 2px !important;
        border-radius: 22px !important;
    }

    .mobile-bottom-link {
        min-height: 50px !important;
        font-size: 9px !important;
        border-radius: 16px !important;
    }

    .mobile-bottom-icon {
        font-size: 17px !important;
    }
}


/* --- Stable Beta 0.4 mobile bottom nav overlay force fix --- */

/*
Strict behaviour:
- Hidden on desktop.
- Fixed overlay on mobile/coarse pointer devices.
- Stays pinned to viewport, not the bottom of the document.
*/

.mobile-bottom-nav {
    display: none !important;
}

/* Desktop and laptop safety: never show bottom nav on normal desktop widths. */
@media (min-width: 821px) and (hover: hover) and (pointer: fine) {
    .mobile-bottom-nav {
        display: none !important;
    }
}

/* Phones and narrow mobile layouts */
@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 1024px) {
    body {
        padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important;
    }

    .app-shell {
        padding-bottom: calc(112px + env(safe-area-inset-bottom)) !important;
    }

    .site-footer {
        padding-bottom: calc(122px + env(safe-area-inset-bottom)) !important;
    }

    .mobile-bottom-nav {
        position: fixed !important;
        inset-inline: 10px !important;
        left: 10px !important;
        right: 10px !important;
        bottom: calc(10px + env(safe-area-inset-bottom)) !important;
        top: auto !important;
        z-index: 2147483000 !important;
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 4px !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        min-height: 68px !important;
        margin: 0 !important;
        padding: 8px !important;
        border: 1px solid rgba(216, 224, 238, .94) !important;
        border-radius: 24px !important;
        background: rgba(255, 255, 255, .96) !important;
        box-shadow: 0 18px 55px rgba(15, 23, 42, .24) !important;
        backdrop-filter: blur(18px) !important;
        -webkit-backdrop-filter: blur(18px) !important;
        transform: translate3d(0, 0, 0) !important;
        will-change: transform !important;
        pointer-events: auto !important;
    }

    .mobile-bottom-link {
        min-width: 0 !important;
        min-height: 52px !important;
        border-radius: 18px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        text-decoration: none !important;
        color: #475467 !important;
        font-size: 10px !important;
        font-weight: 850 !important;
        line-height: 1 !important;
        letter-spacing: -0.01em !important;
        white-space: nowrap !important;
        overflow: hidden !important;
    }

    .mobile-bottom-icon {
        font-size: 18px !important;
        line-height: 1 !important;
        display: block !important;
    }

    .mobile-bottom-link:hover,
    .mobile-bottom-link:focus {
        background: #eef4ff !important;
        color: #1d4ed8 !important;
        text-decoration: none !important;
    }

    .mobile-bottom-scan {
        background: #2563eb !important;
        color: #ffffff !important;
        box-shadow: 0 10px 24px rgba(37, 99, 235, .28) !important;
    }

    .mobile-bottom-scan:hover,
    .mobile-bottom-scan:focus {
        background: #1d4ed8 !important;
        color: #ffffff !important;
    }

    body.theme-dark .mobile-bottom-nav {
        background: rgba(15, 23, 42, .96) !important;
        border-color: #334155 !important;
        box-shadow: 0 18px 55px rgba(0, 0, 0, .38) !important;
    }

    body.theme-dark .mobile-bottom-link {
        color: #cbd5e1 !important;
    }

    body.theme-dark .mobile-bottom-link:hover,
    body.theme-dark .mobile-bottom-link:focus {
        background: #1e293b !important;
        color: #ffffff !important;
    }

    body.theme-dark .mobile-bottom-scan {
        background: #2563eb !important;
        color: #ffffff !important;
    }
}

@media (max-width: 390px) {
    .mobile-bottom-nav {
        left: 8px !important;
        right: 8px !important;
        inset-inline: 8px !important;
        bottom: calc(8px + env(safe-area-inset-bottom)) !important;
        padding: 6px !important;
        gap: 2px !important;
        border-radius: 22px !important;
        min-height: 64px !important;
    }

    .mobile-bottom-link {
        min-height: 50px !important;
        font-size: 9px !important;
        border-radius: 16px !important;
    }

    .mobile-bottom-icon {
        font-size: 17px !important;
    }
}


/* --- Stable Beta 0.4 JS mobile bottom nav overlay fix --- */

/*
The mobile bottom nav is now created by JS at the end of <body>
and forced with inline fixed-position styles. CSS below handles fallback,
spacing, and hiding top navigation on mobile.
*/

.mobile-bottom-nav {
    display: none !important;
}

@media (min-width: 821px) {
    .mobile-bottom-nav,
    #mobileBottomNav {
        display: none !important;
    }
}

@media (max-width: 820px) {
    body.has-mobile-bottom-nav {
        padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
    }

    body.has-mobile-bottom-nav .app-shell {
        padding-bottom: calc(124px + env(safe-area-inset-bottom)) !important;
    }

    body.has-mobile-bottom-nav .site-footer {
        padding-bottom: calc(132px + env(safe-area-inset-bottom)) !important;
    }

    .topbar .main-nav,
    header .main-nav,
    .main-nav {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .scan-button {
        display: none !important;
    }

    #mobileBottomNav .mobile-bottom-link:hover,
    #mobileBottomNav .mobile-bottom-link:focus {
        background: #eef4ff !important;
        color: #1d4ed8 !important;
    }

    body.theme-dark #mobileBottomNav .mobile-bottom-link:hover,
    body.theme-dark #mobileBottomNav .mobile-bottom-link:focus {
        background: #1e293b !important;
        color: #ffffff !important;
    }
}

@media (max-width: 390px) {
    #mobileBottomNav {
        left: 8px !important;
        right: 8px !important;
        bottom: calc(8px + env(safe-area-inset-bottom)) !important;
        padding: 6px !important;
        gap: 4px !important;
    }

    #mobileBottomNav .mobile-bottom-link {
        min-height: 50px !important;
        font-size: 9px !important;
    }
}


/* --- Stable Beta 0.4 mobile bottom nav: add Scan + remove top mobile nav --- */

/*
Mobile bottom nav now contains:
Dashboard, Items, Locations, Folders, Scan.
Top navigation and top Scan remain hidden on mobile.
*/

@media (max-width: 820px) {
    .topbar .main-nav,
    header .main-nav,
    .main-nav,
    .scan-button {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
    }

    #mobileBottomNav,
    .mobile-bottom-nav {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }

    #mobileBottomNav .mobile-bottom-scan,
    .mobile-bottom-nav .mobile-bottom-scan {
        background: #2563eb !important;
        color: #ffffff !important;
        box-shadow: 0 10px 24px rgba(37, 99, 235, .28) !important;
    }

    #mobileBottomNav .mobile-bottom-scan:hover,
    #mobileBottomNav .mobile-bottom-scan:focus,
    .mobile-bottom-nav .mobile-bottom-scan:hover,
    .mobile-bottom-nav .mobile-bottom-scan:focus {
        background: #1d4ed8 !important;
        color: #ffffff !important;
    }
}

@media (max-width: 390px) {
    #mobileBottomNav .mobile-bottom-link {
        font-size: 8.5px !important;
    }

    #mobileBottomNav .mobile-bottom-icon {
        font-size: 17px !important;
    }
}


/* --- Stable Beta 0.4 force hide top mobile nav --- */

/*
Hard stop: on mobile the header must only show brand/account/theme controls.
Dashboard/Items/Locations/Folders/Scan must not appear in the top bar.
They live in the bottom overlay nav instead.
*/

@media screen and (max-width: 820px) {
    header nav.main-nav,
    .topbar nav.main-nav,
    .topbar .main-nav,
    header .main-nav,
    body .main-nav {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        left: -99999px !important;
        top: -99999px !important;
        width: 0 !important;
        max-width: 0 !important;
        height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        transform: none !important;
    }

    header .scan-button,
    .topbar .scan-button,
    body .topbar .scan-button {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        left: -99999px !important;
        top: -99999px !important;
        width: 0 !important;
        max-width: 0 !important;
        min-width: 0 !important;
        height: 0 !important;
        max-height: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
    }

    .topbar-inner {
        grid-template-areas: "brand spacer actions" !important;
        grid-template-columns: auto 1fr auto !important;
    }
}

@media screen and (min-width: 821px) {
    header nav.main-nav,
    .topbar nav.main-nav,
    .topbar .main-nav {
        position: static !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
}


/* --- Stable Beta 0.4 mobile More burger menu --- */

/*
Bottom mobile nav keeps the primary actions:
Dashboard, Items, Locations, Folders, Scan.
The header burger now holds the remaining pages.
*/

.mobile-more-toggle,
.mobile-more-menu {
    display: none;
}

@media screen and (max-width: 820px) {
    .topbar-inner {
        display: grid !important;
        grid-template-columns: auto auto 1fr auto !important;
        grid-template-areas: "brand more spacer actions" !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 12px 14px !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .mobile-more-toggle {
        grid-area: more !important;
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        border: 1px solid #d8e0ee !important;
        border-radius: 14px !important;
        background: #ffffff !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        gap: 4px !important;
        padding: 0 !important;
        margin: 0 !important;
        cursor: pointer !important;
        box-shadow: none !important;
        appearance: none !important;
        -webkit-appearance: none !important;
    }

    .mobile-more-toggle span {
        width: 18px !important;
        height: 2px !important;
        min-height: 2px !important;
        display: block !important;
        border-radius: 999px !important;
        background: #101828 !important;
        transition: transform .16s ease, opacity .16s ease !important;
    }

    .mobile-more-toggle.is-open span:nth-child(1) {
        transform: translateY(6px) rotate(45deg) !important;
    }

    .mobile-more-toggle.is-open span:nth-child(2) {
        opacity: 0 !important;
    }

    .mobile-more-toggle.is-open span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg) !important;
    }

    .mobile-more-menu {
        position: fixed !important;
        inset: 0 !important;
        z-index: 2147483600 !important;
        display: none !important;
        padding: 74px 12px calc(104px + env(safe-area-inset-bottom)) !important;
        background: rgba(15, 23, 42, .18) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
    }

    .mobile-more-menu.is-open {
        display: block !important;
    }

    .mobile-more-panel {
        width: min(420px, 100%) !important;
        margin: 0 auto !important;
        padding: 14px !important;
        border-radius: 24px !important;
        border: 1px solid #d8e0ee !important;
        background: rgba(255,255,255,.98) !important;
        box-shadow: 0 22px 65px rgba(15,23,42,.24) !important;
    }

    .mobile-more-head {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        margin-bottom: 12px !important;
    }

    .mobile-more-head strong {
        color: #101828 !important;
        font-size: 16px !important;
        font-weight: 900 !important;
    }

    .mobile-more-close {
        width: 38px !important;
        height: 38px !important;
        border-radius: 999px !important;
        border: 1px solid #d8e0ee !important;
        background: #ffffff !important;
        color: #101828 !important;
        font-size: 24px !important;
        line-height: 1 !important;
        cursor: pointer !important;
    }

    .mobile-more-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .mobile-more-grid a {
        display: flex !important;
        align-items: center !important;
        min-height: 46px !important;
        padding: 0 14px !important;
        border-radius: 16px !important;
        background: #eef4ff !important;
        color: #335075 !important;
        font-size: 14px !important;
        font-weight: 850 !important;
        text-decoration: none !important;
    }

    .mobile-more-grid a:hover,
    .mobile-more-grid a:focus {
        background: #dbeafe !important;
        color: #1d4ed8 !important;
        text-decoration: none !important;
    }

    body.theme-dark .mobile-more-toggle {
        background: #111827 !important;
        border-color: #334155 !important;
    }

    body.theme-dark .mobile-more-toggle span {
        background: #f8fafc !important;
    }

    body.theme-dark .mobile-more-menu {
        background: rgba(0, 0, 0, .28) !important;
    }

    body.theme-dark .mobile-more-panel {
        background: rgba(15,23,42,.98) !important;
        border-color: #334155 !important;
        box-shadow: 0 22px 65px rgba(0,0,0,.42) !important;
    }

    body.theme-dark .mobile-more-head strong {
        color: #f8fafc !important;
    }

    body.theme-dark .mobile-more-close {
        background: #111827 !important;
        border-color: #334155 !important;
        color: #f8fafc !important;
    }

    body.theme-dark .mobile-more-grid a {
        background: #1e293b !important;
        color: #cbd5e1 !important;
    }

    body.theme-dark .mobile-more-grid a:hover,
    body.theme-dark .mobile-more-grid a:focus {
        background: #26344a !important;
        color: #ffffff !important;
    }
}

@media screen and (min-width: 821px) {
    .mobile-more-toggle,
    .mobile-more-menu {
        display: none !important;
    }
}


/* --- Stable Beta 0.4 mobile More arrow repair --- */

/*
Repair version:
- Restores the last known working mobile More menu files.
- Keeps the same working menu JS and panel.
- Uses a text dropdown trigger instead of changing the menu structure.
*/

@media screen and (max-width: 820px) {
    .mobile-more-toggle {
        width: auto !important;
        min-width: 74px !important;
        height: 42px !important;
        min-height: 42px !important;
        padding: 0 12px !important;
        flex-direction: row !important;
        gap: 0 !important;
        font: inherit !important;
    }

    .mobile-more-toggle .mobile-more-arrow-icon {
        display: block !important;
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        background: transparent !important;
        color: #101828 !important;
        font-size: 13px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        letter-spacing: -0.01em !important;
        transform: none !important;
        transition: transform .16s ease !important;
        white-space: nowrap !important;
    }

    .mobile-more-toggle .mobile-more-hidden-line {
        display: none !important;
    }

    .mobile-more-toggle.is-open .mobile-more-arrow-icon {
        transform: none !important;
    }

    body.theme-dark .mobile-more-toggle .mobile-more-arrow-icon {
        background: transparent !important;
        color: #f8fafc !important;
    }
}


/* --- Stable Beta 0.4 combined QR navigation --- */

/*
QR Labels and Made QR codes now appear as one navigation item: QR Codes.
The separate page can still exist internally, but the main nav is cleaner.
*/



/* --- Stable Beta 0.4 Registered QR codes safe repair --- */

/*
Safe repair after the previous label patch:
- Restores the last styled CSS file.
- Removes the old mobile " / labels" suffix.
*/

.mobile-more-grid a[href="qr-labels.php"]::after {
    content: "" !important;
    display: none !important;
}


/* --- Stable Beta 0.4 registered QR page labels --- */

/*
User-facing QR wording is now Registered QR codes.
The underlying filenames stay the same so old links keep working.
*/


/* --- Stable Beta 0.4 registered QR duplicate label fix --- */

/*
Fix is mostly PHP text cleanup.
QR Labels remains the label generator.
Registered QR codes remains the registry/list page.
*/


/* --- Stable Beta 0.4 Registered QR codes layout polish --- */

/*
Registered QR codes page layout:
- Better hero/header balance.
- Summary stats become proper cards.
- Search/management sections align better.
- Mobile remains stacked and readable.
*/

.qr-registry-page {
    max-width: 1240px !important;
    margin: 0 auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

.qr-registry-page > .page-head,
.qr-registry-page .page-head,
.qr-registry-page > header:first-child {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 18px !important;
    align-items: start !important;
    margin-bottom: 22px !important;
}

.qr-registry-page h1 {
    margin-bottom: 8px !important;
}

.qr-registry-page h1 + .muted,
.qr-registry-page h1 + p {
    max-width: 720px !important;
    line-height: 1.55 !important;
}

/* The small count links under the header */
.qr-registry-page h1 ~ p a,
.qr-registry-page > p a {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 38px !important;
    padding: 0 13px !important;
    border-radius: 999px !important;
    background: #eef4ff !important;
    color: #1d4ed8 !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    margin: 4px 8px 4px 0 !important;
}

/* Make the count block feel like a proper dashboard strip */
.qr-registry-page > p:has(a) {
    margin: 18px 0 14px !important;
}

/* Management/search cards should not feel narrow and random */
.qr-registry-page .card {
    max-width: none !important;
}

.qr-registry-page .card:has(input[type="search"]),
.qr-registry-page .card:has(input[name="q"]),
.qr-registry-page .card:has(select[name="filter"]),
.qr-registry-page .card:has(select) {
    margin-top: 20px !important;
}

.qr-registry-page .card h2,
.qr-registry-page .card h3 {
    margin-top: 0 !important;
}

/* Better two-column form feel inside the search panel */
.qr-registry-page .form-grid,
.qr-registry-page form .grid,
.qr-registry-page form {
    gap: 16px !important;
}

.qr-registry-page .btn-row,
.qr-registry-page .form-actions {
    gap: 10px !important;
}

/* Registry table/card spacing */
.qr-registry-page table {
    width: 100% !important;
}

.qr-registry-page .table-wrap,
.qr-registry-page .card:has(table) {
    overflow-x: auto !important;
}

/* Make the top action button feel aligned */
.qr-registry-page .page-actions,
.qr-registry-page .actions {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

/* Dark mode */
body.theme-dark .qr-registry-page h1 ~ p a,
body.theme-dark .qr-registry-page > p a {
    background: #1e293b !important;
    color: #dbeafe !important;
}

@media (min-width: 900px) {
    .qr-registry-page {
        padding-top: 34px !important;
    }

    /* Turn the top count links into a neat row */
    .qr-registry-page h1 ~ p,
    .qr-registry-page > p {
        max-width: 900px !important;
    }
}

@media (max-width: 820px) {
    .qr-registry-page {
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-top: 22px !important;
    }

    .qr-registry-page > .page-head,
    .qr-registry-page .page-head,
    .qr-registry-page > header:first-child {
        grid-template-columns: 1fr !important;
    }

    .qr-registry-page .page-actions,
    .qr-registry-page .actions {
        justify-content: flex-start !important;
    }

    .qr-registry-page h1 ~ p a,
    .qr-registry-page > p a {
        width: 100% !important;
        justify-content: space-between !important;
    }
}



/* --- Stable Beta 0.4 QR nav and rotate image fix --- */

/*
QR Labels remains the label printer.
Registered QR codes remains the registry/list page.
Location image rotation now returns to the visual card and uses filemtime cache busting.
*/

#location-visual {
    scroll-margin-top: 110px;
}

.location-visual-actions form {
    margin: 0;
}


/* --- Stable Beta 0.4 Registered QR stat card polish --- */

/*
The Registered QR codes counters are clickable filters,
but they should look like proper stat buttons/cards, not loose blue links.
*/

.qr-registry-stats {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
    margin: 22px 0 24px !important;
    max-width: 1100px !important;
}

.qr-registry-stats .stat-card {
    min-height: 96px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 18px 20px !important;
    border: 1px solid #d8e0ee !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    color: #101828 !important;
    box-shadow: 0 14px 36px rgba(15, 23, 42, .07) !important;
    text-decoration: none !important;
    transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease, background .14s ease !important;
}

.qr-registry-stats .stat-card:hover,
.qr-registry-stats .stat-card:focus {
    transform: translateY(-2px) !important;
    border-color: #9db7ff !important;
    background: #f8fbff !important;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .10) !important;
    color: #101828 !important;
}

.qr-registry-stats .stat-card span {
    display: block !important;
    color: #516173 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
}

.qr-registry-stats .stat-card strong {
    display: block !important;
    color: #101828 !important;
    font-size: 34px !important;
    font-weight: 950 !important;
    line-height: .9 !important;
    letter-spacing: -0.05em !important;
    text-decoration: none !important;
}

/* Small visual accent per card */
.qr-registry-stats .stat-card::before {
    content: "";
    width: 34px !important;
    height: 4px !important;
    border-radius: 999px !important;
    background: #2563eb !important;
    opacity: .85 !important;
}

/* Optional selected filter state based on current URL is not server-rendered yet,
   so hover/focus is kept clean without changing behaviour. */

body.theme-dark .qr-registry-stats .stat-card {
    background: #111827 !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
    box-shadow: 0 14px 36px rgba(0, 0, 0, .24) !important;
}

body.theme-dark .qr-registry-stats .stat-card:hover,
body.theme-dark .qr-registry-stats .stat-card:focus {
    background: #1e293b !important;
    border-color: #3b82f6 !important;
    color: #ffffff !important;
}

body.theme-dark .qr-registry-stats .stat-card span {
    color: #a8b6ca !important;
}

body.theme-dark .qr-registry-stats .stat-card strong {
    color: #f8fafc !important;
}

@media (max-width: 1000px) {
    .qr-registry-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 560px) {
    .qr-registry-stats {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin-top: 18px !important;
    }

    .qr-registry-stats .stat-card {
        min-height: 76px !important;
        padding: 15px 16px !important;
        flex-direction: row !important;
        align-items: center !important;
    }

    .qr-registry-stats .stat-card::before {
        display: none !important;
    }

    .qr-registry-stats .stat-card strong {
        font-size: 30px !important;
    }
}



/* --- Stable Beta 0.4 Blank labels wording --- */

/*
User-facing wording changed from Reserved blank labels to Blank labels.
Internal filter values remain unchanged so existing logic keeps working.
*/



/* ===== CSS from itemid_auth_panels_privacy_upload_patch.zip ===== */

:root{
  --bg:#f5f7fb;--bg2:#eef4ff;--card:#fff;--text:#101828;--muted:#667085;--line:#d9e1ec;
  --blue:#2563eb;--blue-dark:#1d4ed8;--blue2:#eff4ff;--green:#12b76a;--amber:#f79009;--danger:#b42318;
  --shadow:0 18px 45px rgba(15,23,42,.08);--radius:18px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:linear-gradient(180deg,#f8fbff 0%,var(--bg) 260px);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Arial,sans-serif;font-size:15px;line-height:1.5}a{color:var(--blue-dark);text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3{letter-spacing:-.04em;line-height:1.15;margin:0 0 10px}h1{font-size:34px}h2{font-size:28px}h3{font-size:19px}.muted{color:var(--muted)}.big{font-size:17px;line-height:1.65}.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:22px;padding:14px 24px;background:rgba(255,255,255,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}.brand{display:inline-flex;gap:10px;align-items:center;color:var(--text);font-weight:900;font-size:21px}.brand:hover{text-decoration:none}.brand-mark{width:34px;height:34px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;background:#111827;color:white;font-size:13px;letter-spacing:-.04em}.main-nav{display:flex;align-items:center;gap:4px;flex:1;flex-wrap:wrap}.main-nav a{color:#344054;padding:9px 10px;border-radius:10px;font-weight:700;font-size:14px}.main-nav a:hover{background:var(--blue2);text-decoration:none}.top-actions{display:flex;align-items:center;gap:12px}.muted-link{color:var(--muted);font-weight:700}.page{max-width:1180px;margin:0 auto;padding:28px 22px 60px}.site-footer{max-width:1180px;margin:0 auto;padding:22px;color:var(--muted);border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px}.page-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin:0 0 20px}.page-head p{margin:4px 0 0}.card{background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:18px;box-shadow:0 10px 30px rgba(15,23,42,.045)}.hero{display:grid;grid-template-columns:2fr 1fr;gap:18px;margin-bottom:18px}.hero .card:first-child{background:linear-gradient(135deg,#fff 0%,#f4f7ff 100%)}.grid{display:grid;gap:18px}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.cards4{grid-template-columns:repeat(4,minmax(0,1fr))}.cards4 .card{margin:0}.cards4 h2{font-size:34px;margin-top:6px}.wide{max-width:920px}.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;background:var(--blue);color:white;padding:11px 16px;font-weight:900;cursor:pointer;text-decoration:none;box-shadow:0 8px 18px rgba(37,99,235,.18);font:inherit}.btn:hover{text-decoration:none;background:var(--blue-dark)}.btn.secondary{background:#e8efff;color:var(--blue-dark);box-shadow:none}.btn.secondary:hover{background:#dbe7ff}.btn.ghost{background:white;color:#344054;border:1px solid var(--line);box-shadow:none}.btn.small{padding:8px 12px;border-radius:10px;font-size:14px}.scan-link{background:#111827;color:#fff!important}.form{display:grid;gap:15px}.form label{display:grid;gap:7px;color:#344054;font-size:14px;font-weight:700}.form input,.form select,.form textarea,.searchbar input,.inline-form input,.inline-form select{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px 13px;background:white;color:var(--text);font:inherit;outline:none}.form input:focus,.form select:focus,.form textarea:focus,.searchbar input:focus,.inline-form input:focus,.inline-form select:focus{border-color:#9db7ff;box-shadow:0 0 0 4px rgba(37,99,235,.10)}.searchbar,.inline-form{display:flex;gap:10px;margin-bottom:18px}.table-wrap{overflow:auto;padding:0}table{width:100%;border-collapse:collapse;min-width:720px}th,td{text-align:left;border-bottom:1px solid var(--line);padding:14px 16px;vertical-align:top}th{font-size:12px;color:var(--muted);font-weight:900;text-transform:uppercase;letter-spacing:.05em;background:#fbfcff}tr:hover td{background:#fbfdff}.pill{display:inline-flex;background:var(--blue2);color:var(--blue-dark);border-radius:999px;padding:4px 9px;font-size:13px;font-weight:900}.pill.low,.pill.Empty,.pill.Missing{background:#fff4ed;color:#b54708}.visual{max-width:100%;border-radius:14px;border:1px solid var(--line);box-shadow:0 8px 20px rgba(15,23,42,.06)}.qr-box{display:inline-block;background:white;padding:12px;border:1px solid var(--line);border-radius:14px}.code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:900;background:#f2f4f7;border:1px solid #e4e7ec;border-radius:10px;padding:4px 8px;display:inline-block}.labels{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.label{background:#fff;border:1px solid #111;border-radius:6px;text-align:center;padding:11px;break-inside:avoid}.label .qr{display:inline-block}.label-toolbar{margin:12px 0}.check{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center;gap:8px!important}.alert{background:#fef3f2;color:var(--danger);border:1px solid #fecdca;border-radius:12px;padding:11px 13px;font-weight:700}.notice{background:#eff8ff;color:#175cd3;border:1px solid #b2ddff;border-radius:12px;padding:11px 13px;font-weight:700}.empty{padding:24px;border:1px dashed var(--line);border-radius:14px;background:#fbfcff;color:var(--muted)}
/* Auth */.auth-body{min-height:100vh!important;display:grid!important;place-items:center!important;padding:28px;background:radial-gradient(circle at top left,rgba(37,99,235,.16),transparent 34%),radial-gradient(circle at bottom right,rgba(16,185,129,.10),transparent 28%),var(--bg)}.auth-shell{width:min(980px,100%);display:grid;grid-template-columns:1.15fr .85fr;gap:18px;align-items:stretch}.auth-panel{background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow)}.auth-copy{padding:36px;display:flex;flex-direction:column;justify-content:center;min-height:440px}.logo-mark{width:54px;height:54px;border-radius:16px;background:#111827;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;letter-spacing:-.04em;margin-bottom:22px}.eyebrow{font-weight:900;color:var(--blue);letter-spacing:.08em;text-transform:uppercase;font-size:13px;margin:0 0 10px}.auth-copy h1{font-size:46px;letter-spacing:-.055em;line-height:1.02;margin:0 0 16px;max-width:620px}.auth-copy .big{font-size:17px;line-height:1.6;max-width:600px;margin:0 0 22px}.feature-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}.feature-list span{background:var(--blue2);color:var(--blue-dark);border:1px solid #dbe7ff;border-radius:999px;padding:8px 11px;font-weight:900;font-size:13px}.auth-card{width:auto!important;padding:30px;display:flex;flex-direction:column;justify-content:center}.auth-card h2{font-size:30px;margin:0 0 8px}.auth-card .muted{margin-top:0;margin-bottom:20px}.auth-card input{height:46px}.subtle-link{font-size:14px;font-weight:800;justify-self:start}.auth-card .actions{margin-top:2px}
@media(max-width:900px){.topbar{align-items:flex-start;flex-direction:column}.top-actions{width:100%;justify-content:space-between}.hero,.grid.two,.grid.cards4{grid-template-columns:1fr}.page-head{display:block}.searchbar,.inline-form{flex-direction:column}.labels{grid-template-columns:repeat(2,1fr)}.auth-shell{grid-template-columns:1fr}.auth-copy{min-height:0;padding:24px}.auth-copy h1{font-size:34px}.auth-card{padding:24px}.site-footer{flex-direction:column}}@media print{body{background:white}.topbar,.page-head,.card:not(.table-wrap),.label-toolbar,.site-footer{display:none!important}.page{padding:0}.labels{grid-template-columns:repeat(4,1fr);gap:8px}.label{page-break-inside:avoid;box-shadow:none}}

/* ItemID QR/template patch */
.section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}.section-head h2{font-size:22px;margin:0 0 4px}.field-builder{display:grid;gap:14px;border:1px solid var(--line);border-radius:16px;padding:16px;background:#fbfcff}.quick-fields{display:flex;gap:8px;flex-wrap:wrap}.field-chip{border:1px solid #dbe7ff;background:#eff4ff;color:#1d4ed8;border-radius:999px;padding:7px 10px;font-weight:800;cursor:pointer}.field-chip:hover{background:#dbe7ff}.fields-list{display:grid;gap:10px}.field-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}.label-sheet{display:grid;grid-template-columns:repeat(var(--label-columns,4),minmax(0,1fr));gap:12px}.print-label-card{background:#fff;border:1px solid #111827;border-radius:10px;text-align:center;padding:12px;break-inside:avoid;min-height:calc(var(--qr-size,120px) + 62px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px}.print-label-card .qr{display:inline-flex;align-items:center;justify-content:center}.print-label-card .print-code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:15px;font-weight:900;letter-spacing:.06em}.print-label-card .print-name{font-size:12px;font-weight:800;color:#344054;line-height:1.25}.row-actions{display:flex;gap:12px;white-space:nowrap}.qr-size-form select{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px 13px;background:white;color:var(--text);font:inherit;outline:none}@media(max-width:700px){.field-row{grid-template-columns:1fr}.label-sheet{grid-template-columns:repeat(2,minmax(0,1fr))}.row-actions{display:grid;gap:6px}}

/* ItemID workflow polish patch */
.mini-action{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;border-radius:10px;padding:7px 10px;font-weight:900;color:#1d4ed8;text-decoration:none;white-space:nowrap}.mini-action:hover{background:#eff4ff;text-decoration:none}.pretty-fields{gap:18px}.pretty-list{gap:12px}.pretty-row{grid-template-columns:1fr 42px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px}.pretty-row input{border:0!important;box-shadow:none!important;padding:9px 10px!important}.icon-button{width:34px;height:34px;border:0;border-radius:10px;background:#f2f4f7;color:#344054;font-size:22px;line-height:1;cursor:pointer;font-weight:900}.icon-button:hover{background:#fee4e2;color:#b42318}.community-check{align-self:end;background:#fbfcff;border:1px solid var(--line);border-radius:14px;padding:12px}.community-check span{display:grid;gap:2px}.community-check small{color:var(--muted);font-weight:600}.field-chip{font-size:13px}.print-label-card{min-height:calc(var(--qr-mm,35mm) + 22mm);padding:8mm 4mm}.print-label-card .print-name{max-width:100%;overflow-wrap:anywhere}.custom-prefix-row{display:none}.item-hero{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.item-hero h2{font-size:24px;margin:4px 0 0}.activity-line{border-bottom:1px solid var(--line);padding:0 0 10px;margin:0 0 10px}.qr-size-form{margin-top:14px;display:flex;gap:10px;align-items:end;flex-wrap:wrap}.qr-size-form label{min-width:190px}.add-item-flow{gap:20px}.flow-step{display:flex;gap:14px;align-items:flex-start;border-top:1px solid var(--line);padding-top:18px}.flow-step:first-of-type{border-top:0;padding-top:0}.flow-step h2{font-size:22px;margin:0 0 4px}.step-badge{width:34px;height:34px;border-radius:999px;background:#111827;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:900;flex:0 0 auto}.field-as-card{border:1px dashed #b7c5df;border-radius:14px;padding:13px;background:#fbfcff}.field-as-card p{margin:4px 0 10px}.code-pill{display:inline-flex;background:#f2f4f7;border:1px solid #e4e7ec;border-radius:10px;padding:5px 9px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:900}@media(max-width:800px){.item-hero{grid-template-columns:1fr}.pretty-row{grid-template-columns:1fr 42px}.qr-size-form{display:grid}.flow-step{display:grid}.field-as-card .btn{width:100%}}


/* ItemID workflow patch 2 */
.beta-badge{display:inline-flex;align-items:center;border:1px solid #c7d7fe;background:#eff4ff;color:#1d4ed8;border-radius:999px;padding:2px 7px;font-size:11px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;line-height:1.4}.template-create-card{display:flex;align-items:center;justify-content:space-between;gap:14px}.template-create-card p{margin:3px 0 0}.compact-check{width:auto!important;display:flex!important;grid-template-columns:auto 1fr!important;align-items:center!important;gap:8px!important;min-width:170px}.compact-check input{width:auto!important}.qr-box canvas,.qr-box img{display:block!important;max-width:100%!important;max-height:100%!important}.print-label-card{overflow:hidden}.print-label-card .dynamic-qr canvas,.print-label-card .dynamic-qr img{display:block!important}.print-label-card .print-code,.print-label-card .print-name{max-width:100%;overflow-wrap:anywhere}.single-print-label{overflow:hidden}@media(max-width:800px){.template-create-card{display:grid}.compact-check{min-width:0}}

/* Items table action-cell border fix */
td.row-actions,
th.row-actions {
    display: table-cell !important;
    white-space: nowrap;
    vertical-align: middle;
    border-bottom: 1px solid var(--line) !important;
}

td.row-actions {
    min-width: 230px;
}

td.row-actions .mini-action {
    margin-right: 8px;
    margin-bottom: 0;
}

td.row-actions .mini-action:last-child {
    margin-right: 0;
}

tr:hover td.row-actions {
    background: #fbfdff;
}

@media (max-width: 760px) {
    td.row-actions {
        min-width: 170px;
    }

    td.row-actions .mini-action {
        display: flex;
        width: 100%;
        margin-right: 0;
        margin-bottom: 6px;
    }

    td.row-actions .mini-action:last-child {
        margin-bottom: 0;
    }
}

/* Stable Beta 0.4 additions */
.btn.danger,
.btn.danger.ghost {
  color: #b42318 !important;
  border-color: #fecdca !important;
  background: #fff !important;
  box-shadow: none !important;
}
.btn.danger:hover,
.btn.danger.ghost:hover {
  background: #fef3f2 !important;
  text-decoration: none;
}
.mini-action.danger {
  color: #b42318 !important;
  border-color: #fecdca !important;
  background: #fff !important;
}
.export-card {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.export-card:hover {
  transform: translateY(-2px);
  text-decoration: none;
  border-color: #b8c7e6;
  box-shadow: 0 18px 42px rgba(15,23,42,.09);
}
.site-footer a { color: inherit; font-weight: 800; }

/* Stable Beta 0.4 template/item field builder polish */
.item-template-field-row {
    display: grid;
    grid-template-columns: minmax(150px, .35fr) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 12px;
    border: 1px solid #d8e0ee;
    border-radius: 14px;
    background: #ffffff;
    margin-bottom: 10px;
}

.template-field-input-wrap {
    display: grid;
    gap: 6px;
}

.template-field-input-wrap input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    margin: 8px 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.field-unit-hint {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 9px;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 900;
}

.small {
    font-size: 12px;
}

@media (max-width: 700px) {
    .item-template-field-row {
        grid-template-columns: 1fr;
    }
}

/* --- Profile/preferences patch CSS --- */

/* Profile and preferences */
.profile-settings-row {
    display: grid;
    grid-template-columns: 112px 1fr;
    gap: 22px;
    align-items: center;
    margin-bottom: 20px;
}

.profile-settings-avatar {
    width: 96px;
    height: 96px;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid #d8e0ee;
    background: #eef4ff;
    color: #1d4ed8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    font-weight: 900;
}

.profile-settings-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.checkbox-line {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    font-weight: 800;
}

.checkbox-line input,
.checkbox-card input {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.checkbox-card {
    min-height: 70px;
    border: 1px solid #d8e0ee;
    border-radius: 14px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}

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

.checkbox-card small {
    margin-top: 4px;
    color: #64748b;
}

@media (max-width: 650px) {
    .profile-settings-row {
        grid-template-columns: 1fr;
    }
}


/* --- Stable Beta 0.4 theme toggle + dark fix --- */

.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,255,255,.94);
    border-bottom: 1px solid #d8e0ee;
    backdrop-filter: blur(14px);
}

.topbar-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    gap: 22px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #0f172a;
    flex: 0 0 auto;
}

.brand:hover {
    text-decoration: none;
}

.brand-name {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1;
}

.beta-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 19px;
    padding: 0 7px;
    border: 1px solid #b8c7e6;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    white-space: nowrap;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 auto;
    min-width: 0;
}

.main-nav a {
    color: #335075;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
}

.main-nav a:hover {
    color: #2563eb;
    text-decoration: none;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

.scan-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 16px;
    border-radius: 12px;
    background: #111827;
    color: #ffffff !important;
    text-decoration: none;
    font-weight: 800;
    font-size: 14px;
    box-shadow: 0 10px 24px rgba(17, 24, 39, .18);
}

.scan-button:hover {
    text-decoration: none;
}

.profile-menu {
    position: relative;
}

.profile-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 4px 8px 4px 4px;
    border: 1px solid #d8e0ee;
    border-radius: 999px;
    background: #ffffff;
    color: #0f172a;
    text-decoration: none;
    font-weight: 800;
    cursor: pointer;
    max-width: 260px;
}

.profile-avatar {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    object-fit: cover;
    background: #eef4ff;
    color: #1d4ed8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    border: 1px solid #c9d7f2;
    overflow: hidden;
    flex: 0 0 auto;
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-label {
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.profile-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 280px;
    border: 1px solid #d8e0ee;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .16);
    padding: 10px;
    display: none;
}

.profile-menu:hover .profile-dropdown,
.profile-menu:focus-within .profile-dropdown {
    display: block;
}

.profile-dropdown-header {
    padding: 10px;
    border-bottom: 1px solid #edf2f7;
    margin-bottom: 8px;
}

.profile-dropdown-header strong,
.profile-dropdown-header span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-dropdown-header span {
    color: #64748b;
    font-size: 13px;
    margin-top: 2px;
}

.profile-dropdown a {
    display: block;
    padding: 10px;
    border-radius: 12px;
    color: #334155;
    text-decoration: none;
    font-weight: 800;
}

.profile-dropdown a:hover {
    background: #f1f5f9;
    color: #0f172a;
    text-decoration: none;
}

.theme-toggle-form {
    margin: 0;
}

.theme-toggle {
    width: 62px;
    height: 34px;
    border: 1px solid #d8e0ee;
    border-radius: 999px;
    background: #eef4ff;
    position: relative;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    box-shadow: none;
}

.theme-toggle-bulb {
    position: absolute;
    left: 8px;
    font-size: 15px;
    line-height: 1;
    z-index: 2;
    opacity: .8;
}

.theme-toggle-knob {
    position: absolute;
    left: 3px;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 3px 10px rgba(15,23,42,.18);
    transition: transform .16s ease;
}

.theme-toggle.is-dark {
    background: #172554;
    border-color: #2563eb;
}

.theme-toggle.is-dark .theme-toggle-bulb {
    left: 36px;
    opacity: 1;
}

.theme-toggle.is-dark .theme-toggle-knob {
    transform: translateX(28px);
    background: #0f172a;
}

.app-shell {
    max-width: 1240px;
    margin: 0 auto;
    padding: 28px 18px 48px;
}

/* Dark theme variables and hard overrides */
body.theme-dark {
    --bg:#0b1220;
    --bg2:#0f172a;
    --card:#111827;
    --text:#f8fafc;
    --muted:#a8b6ca;
    --line:#334155;
    --blue2:#172554;
    background: #0b1220 !important;
    color: #f8fafc !important;
    color-scheme: dark;
}

body.theme-dark .topbar {
    background: rgba(15, 23, 42, .96) !important;
    border-bottom-color: #334155 !important;
}

body.theme-dark .brand,
body.theme-dark .brand-name,
body.theme-dark .profile-label {
    color: #f8fafc !important;
}

body.theme-dark .beta-badge {
    background: #172554 !important;
    border-color: #2563eb !important;
    color: #bfdbfe !important;
}

body.theme-dark .main-nav a {
    color: #cbd5e1 !important;
}

body.theme-dark .main-nav a:hover {
    background: #1e293b !important;
    color: #ffffff !important;
}

body.theme-dark .profile-trigger,
body.theme-dark .profile-dropdown,
body.theme-dark .card,
body.theme-dark section.card,
body.theme-dark form.card,
body.theme-dark details.card,
body.theme-dark .table-wrap,
body.theme-dark .metric-card,
body.theme-dark .filter-panel,
body.theme-dark .template-field-card,
body.theme-dark .template-field-row,
body.theme-dark .location-summary,
body.theme-dark .auth-panel {
    background: #111827 !important;
    background-color: #111827 !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
    box-shadow: 0 18px 45px rgba(0,0,0,.22) !important;
}

body.theme-dark .hero .card:first-child {
    background: linear-gradient(135deg, #111827 0%, #172033 100%) !important;
}

body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark strong,
body.theme-dark label,
body.theme-dark th,
body.theme-dark td {
    color: #f8fafc !important;
}

body.theme-dark .muted,
body.theme-dark .help,
body.theme-dark small,
body.theme-dark .site-footer,
body.theme-dark .metric-card span {
    color: #a8b6ca !important;
}

body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

body.theme-dark input::placeholder,
body.theme-dark textarea::placeholder {
    color: #74839a !important;
}

body.theme-dark table,
body.theme-dark tbody,
body.theme-dark tr {
    background: #111827 !important;
    color: #f8fafc !important;
}

body.theme-dark thead,
body.theme-dark th {
    background: #0f172a !important;
    color: #cbd5e1 !important;
}

body.theme-dark td {
    background: #111827 !important;
    color: #e5edf8 !important;
    border-color: #334155 !important;
}

body.theme-dark tr:hover td {
    background: #172033 !important;
}

body.theme-dark .code-pill,
body.theme-dark .badge,
body.theme-dark .pill,
body.theme-dark .status-pill,
body.theme-dark .tag,
body.theme-dark .field-unit-hint {
    background: #1e293b !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}

body.theme-dark .btn.secondary,
body.theme-dark .btn.ghost,
body.theme-dark a.btn.secondary,
body.theme-dark a.btn.ghost {
    background: #1e293b !important;
    color: #bfdbfe !important;
    border: 1px solid #334155 !important;
    box-shadow: none !important;
}

body.theme-dark .btn.secondary:hover,
body.theme-dark .btn.ghost:hover {
    background: #26344a !important;
    color: #ffffff !important;
}

body.theme-dark .qr-label-preview,
body.theme-dark .qr-preview,
body.theme-dark .qr-card-preview,
body.theme-dark .print-label,
body.theme-dark .label-card,
body.theme-dark .print-sheet,
body.theme-dark .print-sheet .label,
body.theme-dark canvas,
body.theme-dark .qr-box {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #111827 !important;
    border-color: #111827 !important;
}

/* System preference can be selected in profile, but the top toggle only switches light/dark. */
@media (max-width: 900px) {
    .topbar-inner {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 12px;
    }

    .main-nav {
        order: 3;
        width: 100%;
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .topbar-actions {
        margin-left: auto;
    }

    .profile-label {
        display: none;
    }
}


/* --- Stable Beta 0.4 sun/moon theme toggle positioning --- */

.topbar-inner {
    display: flex !important;
    align-items: center !important;
}

.main-nav {
    justify-content: flex-start;
}

.topbar-actions {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.theme-toggle-form {
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}

.theme-toggle {
    width: 66px !important;
    height: 36px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 999px !important;
    background: #e0f2fe !important;
    position: relative !important;
    cursor: pointer !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

.theme-icon {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1 !important;
    font-size: 15px !important;
    line-height: 1 !important;
    pointer-events: none !important;
}

.theme-icon-sun {
    left: 10px !important;
    color: #f59e0b !important;
    opacity: 1 !important;
}

.theme-icon-moon {
    right: 11px !important;
    color: #64748b !important;
    opacity: .55 !important;
}

.theme-toggle-knob {
    position: absolute !important;
    left: 3px !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    box-shadow: 0 3px 10px rgba(15,23,42,.22) !important;
    transition: transform .16s ease, background .16s ease !important;
    z-index: 2 !important;
}

.theme-toggle.is-dark {
    background: #172554 !important;
    border-color: #2563eb !important;
}

.theme-toggle.is-dark .theme-toggle-knob {
    transform: translateX(30px) !important;
    background: #0f172a !important;
}

.theme-toggle.is-dark .theme-icon-sun {
    opacity: .45 !important;
    color: #94a3b8 !important;
}

.theme-toggle.is-dark .theme-icon-moon {
    opacity: 1 !important;
    color: #dbeafe !important;
}

body.theme-dark .theme-toggle {
    background: #172554 !important;
    border-color: #2563eb !important;
}

@media (max-width: 900px) {
    .topbar-actions {
        margin-left: auto !important;
    }
}


/* --- Stable Beta 0.4 dark mode button/pill fix --- */

/* General white button fix in dark mode */
body.theme-dark button,
body.theme-dark input[type="submit"],
body.theme-dark input[type="button"],
body.theme-dark .btn,
body.theme-dark a.btn {
    border-color: #334155;
}

body.theme-dark .btn:not(.danger):not(.primary),
body.theme-dark a.btn:not(.danger):not(.primary),
body.theme-dark button.btn:not(.danger):not(.primary) {
    background: #1e293b !important;
    color: #dbeafe !important;
    border: 1px solid #334155 !important;
    box-shadow: none !important;
}

body.theme-dark .btn:not(.danger):not(.primary):hover,
body.theme-dark a.btn:not(.danger):not(.primary):hover,
body.theme-dark button.btn:not(.danger):not(.primary):hover {
    background: #26344a !important;
    color: #ffffff !important;
}

/* Keep main action buttons blue */
body.theme-dark .btn:first-child,
body.theme-dark .btn.primary,
body.theme-dark button.btn.primary,
body.theme-dark a.btn.primary {
    background: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
}

/* Delete/danger buttons were showing white. */
body.theme-dark .btn.danger,
body.theme-dark a.btn.danger,
body.theme-dark button.btn.danger,
body.theme-dark .danger,
body.theme-dark a[href*="delete.php"],
body.theme-dark button[name*="delete"],
body.theme-dark button[value*="delete"],
body.theme-dark button[value*="clear_reserved"],
body.theme-dark .delete-button,
body.theme-dark .clear-button {
    background: #3f1d1d !important;
    color: #fecaca !important;
    border: 1px solid #7f1d1d !important;
    box-shadow: none !important;
}

body.theme-dark .btn.danger:hover,
body.theme-dark a.btn.danger:hover,
body.theme-dark button.btn.danger:hover,
body.theme-dark .danger:hover,
body.theme-dark a[href*="delete.php"]:hover,
body.theme-dark button[name*="delete"]:hover,
body.theme-dark button[value*="delete"]:hover,
body.theme-dark button[value*="clear_reserved"]:hover,
body.theme-dark .delete-button:hover,
body.theme-dark .clear-button:hover {
    background: #7f1d1d !important;
    color: #ffffff !important;
}

/* Some pages use plain anchors styled as buttons without btn classes. */
body.theme-dark .row-actions a,
body.theme-dark .table-actions-cell a,
body.theme-dark .actions a,
body.theme-dark .actions button {
    border-color: #334155;
}

body.theme-dark .row-actions a:not(.danger):not([href*="delete.php"]),
body.theme-dark .table-actions-cell a:not(.danger):not([href*="delete.php"]) {
    background: #1e293b !important;
    color: #dbeafe !important;
    border: 1px solid #334155 !important;
}

body.theme-dark .row-actions a:not(.danger):not([href*="delete.php"]):hover,
body.theme-dark .table-actions-cell a:not(.danger):not([href*="delete.php"]):hover {
    background: #26344a !important;
    color: #ffffff !important;
}

/* Code pills were still too pale in some table cells. */
body.theme-dark .code-pill,
body.theme-dark td .code-pill,
body.theme-dark .qr-code-pill,
body.theme-dark .item-id-pill {
    background: #1e293b !important;
    color: #e2e8f0 !important;
    border: 1px solid #334155 !important;
}

/* Search filter detail summary was still white on some browsers. */
body.theme-dark details,
body.theme-dark details summary,
body.theme-dark details.card,
body.theme-dark details.card summary {
    background: #111827 !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

/* Preserve white only where it must be white for QR/print. */
body.theme-dark .qr-label-preview,
body.theme-dark .qr-preview,
body.theme-dark .qr-card-preview,
body.theme-dark .print-label,
body.theme-dark .label-card,
body.theme-dark .print-sheet,
body.theme-dark .print-sheet .label,
body.theme-dark canvas,
body.theme-dark .qr-box {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #111827 !important;
    border-color: #111827 !important;
}

/* Same button fixes for system theme when OS is dark. */
@media (prefers-color-scheme: dark) {
    body.theme-system .btn:not(.danger):not(.primary),
    body.theme-system a.btn:not(.danger):not(.primary),
    body.theme-system button.btn:not(.danger):not(.primary) {
        background: #1e293b !important;
        color: #dbeafe !important;
        border: 1px solid #334155 !important;
        box-shadow: none !important;
    }

    body.theme-system .btn.danger,
    body.theme-system a.btn.danger,
    body.theme-system button.btn.danger,
    body.theme-system .danger,
    body.theme-system a[href*="delete.php"],
    body.theme-system button[name*="delete"],
    body.theme-system button[value*="delete"],
    body.theme-system button[value*="clear_reserved"],
    body.theme-system .delete-button,
    body.theme-system .clear-button {
        background: #3f1d1d !important;
        color: #fecaca !important;
        border: 1px solid #7f1d1d !important;
        box-shadow: none !important;
    }

    body.theme-system .code-pill,
    body.theme-system td .code-pill,
    body.theme-system .qr-code-pill,
    body.theme-system .item-id-pill {
        background: #1e293b !important;
        color: #e2e8f0 !important;
        border: 1px solid #334155 !important;
    }

    body.theme-system details,
    body.theme-system details summary,
    body.theme-system details.card,
    body.theme-system details.card summary {
        background: #111827 !important;
        color: #f8fafc !important;
        border-color: #334155 !important;
    }
}


/* --- Stable Beta 0.4 dark cleanup: toggle, white panels, buttons --- */

/* Hide old/broken theme toggle visuals if old CSS is still cached on a page. */
.theme-toggle,
.theme-toggle-form,
.theme-icon,
.theme-option,
.theme-toggle-bulb {
    display: none !important;
}

/* Clean topbar layout */
.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,255,255,.94);
    border-bottom: 1px solid #d8e0ee;
    backdrop-filter: blur(14px);
}

.topbar-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    gap: 22px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #0f172a;
    flex: 0 0 auto;
}

.brand:hover {
    text-decoration: none;
}

.brand-name {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1;
}

.beta-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 19px;
    padding: 0 7px;
    border: 1px solid #b8c7e6;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    white-space: nowrap;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 auto;
    min-width: 0;
}

.main-nav a {
    color: #335075;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
}

.main-nav a:hover {
    color: #2563eb;
    text-decoration: none;
}

.topbar-actions {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex: 0 0 auto;
}

.scan-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 16px;
    border-radius: 12px;
    background: #111827;
    color: #ffffff !important;
    text-decoration: none;
    font-weight: 800;
    font-size: 14px;
    box-shadow: 0 10px 24px rgba(17,24,39,.18);
}

.scan-button:hover {
    text-decoration: none;
}

.scan-icon {
    font-size: 15px;
    line-height: 1;
}

.profile-menu {
    position: relative;
}

.profile-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 4px 8px 4px 4px;
    border: 1px solid #d8e0ee;
    border-radius: 999px;
    background: #ffffff;
    color: #0f172a;
    text-decoration: none;
    font-weight: 800;
    cursor: pointer;
    max-width: 260px;
}

.profile-avatar {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    border: 1px solid #c9d7f2;
    overflow: hidden;
    flex: 0 0 auto;
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-label {
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.profile-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 280px;
    border: 1px solid #d8e0ee;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(15,23,42,.16);
    padding: 10px;
    display: none;
}

.profile-menu:hover .profile-dropdown,
.profile-menu:focus-within .profile-dropdown {
    display: block;
}

.profile-dropdown-header {
    padding: 10px;
    border-bottom: 1px solid #edf2f7;
    margin-bottom: 8px;
}

.profile-dropdown-header strong,
.profile-dropdown-header span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-dropdown-header span {
    color: #64748b;
    font-size: 13px;
    margin-top: 2px;
}

.profile-dropdown a {
    display: block;
    padding: 10px;
    border-radius: 12px;
    color: #334155;
    text-decoration: none;
    font-weight: 800;
}

.profile-dropdown a:hover {
    background: #f1f5f9;
    color: #0f172a;
    text-decoration: none;
}

/* New independent sun/moon switch */
.mode-switch-form {
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}

.mode-switch {
    width: 72px !important;
    height: 38px !important;
    border-radius: 999px !important;
    border: 1px solid #cbd5e1 !important;
    background: #e0f2fe !important;
    position: relative !important;
    cursor: pointer !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: inline-flex !important;
    align-items: center !important;
    box-shadow: none !important;
}

.mode-track-icon {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    pointer-events: none !important;
}

.mode-track-sun {
    left: 11px !important;
    color: #f59e0b !important;
    opacity: .25 !important;
}

.mode-track-moon {
    right: 12px !important;
    color: #64748b !important;
    opacity: .35 !important;
}

.mode-knob {
    position: absolute !important;
    left: 3px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #f59e0b !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    box-shadow: 0 3px 10px rgba(15,23,42,.22) !important;
    transition: transform .16s ease, background .16s ease, color .16s ease !important;
    z-index: 2 !important;
}

.mode-switch.mode-dark {
    background: #172554 !important;
    border-color: #2563eb !important;
}

.mode-switch.mode-dark .mode-knob {
    transform: translateX(34px) !important;
    background: #0f172a !important;
    color: #dbeafe !important;
}

.mode-switch.mode-dark .mode-track-sun {
    color: #94a3b8 !important;
    opacity: .35 !important;
}

.mode-switch.mode-dark .mode-track-moon {
    opacity: .22 !important;
}

/* Dark theme core */
body.theme-dark {
    --bg:#0b1220;
    --bg2:#0f172a;
    --card:#111827;
    --text:#f8fafc;
    --muted:#a8b6ca;
    --line:#334155;
    --blue2:#172554;
    background:#0b1220 !important;
    color:#f8fafc !important;
    color-scheme: dark;
}

body.theme-dark .topbar {
    background: rgba(15,23,42,.96) !important;
    border-bottom-color: #334155 !important;
}

body.theme-dark .brand,
body.theme-dark .brand-name,
body.theme-dark .profile-label {
    color:#f8fafc !important;
}

body.theme-dark .beta-badge {
    background:#172554 !important;
    border-color:#2563eb !important;
    color:#bfdbfe !important;
}

body.theme-dark .main-nav a {
    color:#cbd5e1 !important;
}

body.theme-dark .main-nav a:hover {
    background:#1e293b !important;
    color:#ffffff !important;
}

body.theme-dark .scan-button {
    background:#2563eb !important;
    color:#ffffff !important;
}

body.theme-dark .profile-trigger,
body.theme-dark .profile-dropdown {
    background:#111827 !important;
    border-color:#334155 !important;
    color:#f8fafc !important;
}

body.theme-dark .profile-dropdown-header {
    border-bottom-color:#334155 !important;
}

body.theme-dark .profile-dropdown-header span {
    color:#94a3b8 !important;
}

body.theme-dark .profile-dropdown a {
    color:#cbd5e1 !important;
}

body.theme-dark .profile-dropdown a:hover {
    background:#1e293b !important;
    color:#ffffff !important;
}

/* Kill the stubborn white panels seen in Items/Add Item/Templates/Made QR codes */
body.theme-dark .card,
body.theme-dark section.card,
body.theme-dark form.card,
body.theme-dark details.card,
body.theme-dark .table-wrap,
body.theme-dark .items-filter-panel,
body.theme-dark .items-filter-panel[open],
body.theme-dark .items-filter-panel summary,
body.theme-dark .field-as-card,
body.theme-dark .field-as-card.template-create-card,
body.theme-dark .template-fields-panel,
body.theme-dark .template-field-builder,
body.theme-dark .template-share-card,
body.theme-dark .template-preset,
body.theme-dark .template-field-row,
body.theme-dark .template-field-row-main,
body.theme-dark .template-field-row-extra,
body.theme-dark .template-options-wrap,
body.theme-dark .template-required,
body.theme-dark .template-create-card,
body.theme-dark .location-summary,
body.theme-dark .scanner-box,
body.theme-dark .notice:not(.print-label):not(.label-card),
body.theme-dark .alert,
body.theme-dark .stat-card,
body.theme-dark .metric-card {
    background:#111827 !important;
    background-color:#111827 !important;
    color:#f8fafc !important;
    border-color:#334155 !important;
    box-shadow:0 18px 45px rgba(0,0,0,.22) !important;
}

body.theme-dark .hero .card:first-child {
    background:linear-gradient(135deg,#111827 0%,#172033 100%) !important;
}

body.theme-dark .items-filter-panel *,
body.theme-dark .template-field-builder *,
body.theme-dark .template-share-card *,
body.theme-dark .template-preset *,
body.theme-dark .field-as-card *,
body.theme-dark .template-fields-panel *,
body.theme-dark .card *,
body.theme-dark .table-wrap * {
    color: inherit;
}

body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark strong,
body.theme-dark label,
body.theme-dark th,
body.theme-dark td,
body.theme-dark summary,
body.theme-dark .section-head,
body.theme-dark .page-head {
    color:#f8fafc !important;
}

body.theme-dark .muted,
body.theme-dark .help,
body.theme-dark .hint,
body.theme-dark small,
body.theme-dark .template-help,
body.theme-dark .template-field-hint,
body.theme-dark .site-footer,
body.theme-dark .items-filter-grid label {
    color:#a8b6ca !important;
}

body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea,
body.theme-dark .items-search-row input,
body.theme-dark .items-filter-grid select,
body.theme-dark .template-field-row input,
body.theme-dark .template-field-row select {
    background:#0f172a !important;
    border-color:#334155 !important;
    color:#f8fafc !important;
}

body.theme-dark input::placeholder,
body.theme-dark textarea::placeholder {
    color:#74839a !important;
}

body.theme-dark table,
body.theme-dark tbody,
body.theme-dark tr {
    background:#111827 !important;
    color:#f8fafc !important;
}

body.theme-dark thead,
body.theme-dark th {
    background:#0f172a !important;
    color:#cbd5e1 !important;
}

body.theme-dark td {
    background:#111827 !important;
    color:#e5edf8 !important;
    border-color:#334155 !important;
}

body.theme-dark tr:hover td {
    background:#172033 !important;
}

body.theme-dark .code-pill,
body.theme-dark td .code-pill,
body.theme-dark .qr-code-pill,
body.theme-dark .item-id-pill,
body.theme-dark .badge,
body.theme-dark .pill,
body.theme-dark .status-pill,
body.theme-dark .tag,
body.theme-dark .field-unit-hint {
    background:#1e293b !important;
    color:#e2e8f0 !important;
    border:1px solid #334155 !important;
}

/* Buttons, including delete buttons that were staying white */
body.theme-dark .btn,
body.theme-dark a.btn,
body.theme-dark button.btn,
body.theme-dark .row-actions a,
body.theme-dark .table-actions-cell a,
body.theme-dark .actions a,
body.theme-dark .actions button {
    background:#1e293b !important;
    color:#dbeafe !important;
    border:1px solid #334155 !important;
    box-shadow:none !important;
}

body.theme-dark .btn:hover,
body.theme-dark a.btn:hover,
body.theme-dark button.btn:hover,
body.theme-dark .row-actions a:hover,
body.theme-dark .table-actions-cell a:hover,
body.theme-dark .actions a:hover,
body.theme-dark .actions button:hover {
    background:#26344a !important;
    color:#ffffff !important;
}

body.theme-dark .btn.danger,
body.theme-dark a.btn.danger,
body.theme-dark button.btn.danger,
body.theme-dark a[href*="delete.php"],
body.theme-dark button[name*="delete"],
body.theme-dark button[value*="delete"],
body.theme-dark button[value*="clear_reserved"],
body.theme-dark .delete-button,
body.theme-dark .clear-button {
    background:#3f1d1d !important;
    color:#fecaca !important;
    border:1px solid #7f1d1d !important;
}

body.theme-dark .btn.danger:hover,
body.theme-dark a.btn.danger:hover,
body.theme-dark button.btn.danger:hover,
body.theme-dark a[href*="delete.php"]:hover,
body.theme-dark button[name*="delete"]:hover,
body.theme-dark button[value*="delete"]:hover,
body.theme-dark button[value*="clear_reserved"]:hover {
    background:#7f1d1d !important;
    color:#ffffff !important;
}

/* Primary actions stay blue */
body.theme-dark .btn.primary,
body.theme-dark a.btn.primary,
body.theme-dark .actions > .btn:first-child:not(.danger),
body.theme-dark .page-head .btn:last-child:not(.danger) {
    background:#2563eb !important;
    color:#ffffff !important;
    border-color:#2563eb !important;
}

/* QR and print surfaces stay white deliberately */
body.theme-dark .qr-label-preview,
body.theme-dark .qr-preview,
body.theme-dark .qr-card-preview,
body.theme-dark .print-label,
body.theme-dark .label-card,
body.theme-dark .print-sheet,
body.theme-dark .print-sheet .label,
body.theme-dark canvas,
body.theme-dark .qr-box {
    background:#ffffff !important;
    background-color:#ffffff !important;
    color:#111827 !important;
    border-color:#111827 !important;
}

@media (max-width:900px) {
    .topbar-inner {
        align-items:flex-start;
        flex-wrap:wrap;
        gap:12px;
    }

    .main-nav {
        order:3;
        width:100%;
        overflow-x:auto;
        padding-bottom:4px;
    }

    .topbar-actions {
        margin-left:auto !important;
    }

    .profile-label {
        display:none;
    }
}


/* --- Stable Beta 0.4 profile dropdown hover bridge + demo link polish --- */

.profile-menu {
    position: relative !important;
}

.profile-dropdown {
    top: calc(100% + 6px) !important;
    right: 0 !important;
}

/* Invisible bridge stops the dropdown disappearing while moving from profile button to menu. */
.profile-menu::after {
    content: '' !important;
    position: absolute !important;
    left: -12px !important;
    right: -12px !important;
    top: 100% !important;
    height: 14px !important;
    display: block !important;
    background: transparent !important;
    pointer-events: auto !important;
}

.profile-menu:hover .profile-dropdown,
.profile-menu:focus-within .profile-dropdown,
.profile-dropdown:hover {
    display: block !important;
}

.auth-extra-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.demo-page {
    display: grid;
    gap: 22px;
}

.demo-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, .9fr);
    gap: 18px;
    align-items: stretch;
}

.demo-card-stack {
    display: grid;
    gap: 14px;
}

.demo-steps {
    counter-reset: demoStep;
    display: grid;
    gap: 12px;
}

.demo-step {
    counter-increment: demoStep;
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 12px;
    align-items: start;
    padding: 14px;
    border: 1px solid var(--line, #d8e0ee);
    border-radius: 16px;
    background: var(--card, #fff);
}

.demo-step::before {
    content: counter(demoStep);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #2563eb;
    color: #fff;
    font-weight: 900;
}

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

.demo-mini {
    border: 1px solid var(--line, #d8e0ee);
    border-radius: 18px;
    background: var(--card, #fff);
    padding: 18px;
}

.demo-mini h3 {
    margin-top: 0;
}

.demo-fake-table {
    display: grid;
    gap: 8px;
}

.demo-fake-row {
    display: grid;
    grid-template-columns: 90px 1fr 100px;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--line, #d8e0ee);
    border-radius: 12px;
    align-items: center;
}

.demo-fake-qr {
    width: 54px;
    height: 54px;
    border-radius: 10px;
    background:
        linear-gradient(90deg, #111 10px, transparent 10px) 0 0/18px 18px,
        linear-gradient(#111 10px, transparent 10px) 0 0/18px 18px,
        #fff;
    border: 8px solid #fff;
    box-shadow: 0 0 0 1px #d8e0ee;
}

body.theme-dark .demo-step,
body.theme-dark .demo-mini,
body.theme-dark .demo-fake-row {
    background: #111827 !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

body.theme-dark .demo-fake-qr {
    background:
        linear-gradient(90deg, #111 10px, transparent 10px) 0 0/18px 18px,
        linear-gradient(#111 10px, transparent 10px) 0 0/18px 18px,
        #fff !important;
    border-color: #fff !important;
}

@media (max-width: 900px) {
    .demo-hero,
    .demo-grid {
        grid-template-columns: 1fr;
    }
}


/* --- Stable Beta 0.4 public demo dashboard + login required modal --- */

.public-demo-body {
    min-height: 100vh;
    background: linear-gradient(180deg, #f6f9ff 0%, #eef3fb 260px);
    color: #101828;
}

.public-demo-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,255,255,.94);
    border-bottom: 1px solid #d8e0ee;
    backdrop-filter: blur(14px);
}

.public-demo-topbar-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 18px;
}

.public-demo-nav {
    display: flex;
    gap: 14px;
    align-items: center;
    flex: 1 1 auto;
    overflow-x: auto;
}

.public-demo-nav a,
.public-demo-nav button {
    border: 0;
    background: transparent;
    color: #335075;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    padding: 8px 0;
}

.public-demo-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.demo-shell {
    max-width: 1240px;
    margin: 0 auto;
    padding: 34px 18px 60px;
}

.demo-disabled {
    cursor: pointer;
}

.demo-locked-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 900;
}

.demo-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, .48);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.demo-modal-backdrop.is-open {
    display: flex;
}

.demo-modal {
    width: min(520px, 100%);
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid #d8e0ee;
    box-shadow: 0 28px 80px rgba(15,23,42,.26);
    padding: 24px;
}

.demo-modal h2 {
    margin-top: 0;
}

.demo-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.demo-preview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, .9fr);
    gap: 18px;
    margin-bottom: 22px;
}

.demo-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}

.demo-metric {
    border: 1px solid #d8e0ee;
    background: #ffffff;
    border-radius: 18px;
    padding: 20px;
    text-decoration: none;
    color: #101828;
}

.demo-metric span {
    display: flex;
    justify-content: space-between;
    color: #667085;
}

.demo-metric span::after {
    content: '↗';
    color: #98a2b3;
    font-weight: 900;
}

.demo-metric strong {
    display: block;
    font-size: 34px;
    margin-top: 8px;
}

.demo-fake-table-card {
    overflow: hidden;
}

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

.demo-table th,
.demo-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #e4eaf3;
    text-align: left;
}

.demo-table th {
    color: #667085;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.demo-workflow-list {
    margin: 0;
    padding-left: 22px;
    color: #516173;
    line-height: 1.7;
}

.demo-qr-card {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
    padding: 14px;
    border: 1px solid #d8e0ee;
    border-radius: 18px;
    background: #f8fbff;
}

.demo-qr-box {
    width: 84px;
    height: 84px;
    border-radius: 12px;
    background:
        linear-gradient(90deg, #111 9px, transparent 9px) 0 0/18px 18px,
        linear-gradient(#111 9px, transparent 9px) 0 0/18px 18px,
        #fff;
    border: 10px solid #fff;
    box-shadow: 0 0 0 1px #d8e0ee;
    flex: 0 0 auto;
}

.demo-hint-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.demo-hint {
    border: 1px solid #d8e0ee;
    border-radius: 18px;
    padding: 18px;
    background: #ffffff;
}

.demo-hint h3 {
    margin-top: 0;
}

@media (max-width: 900px) {
    .demo-preview-grid,
    .demo-metrics,
    .demo-hint-row {
        grid-template-columns: 1fr;
    }

    .public-demo-topbar-inner {
        flex-wrap: wrap;
    }

    .public-demo-actions {
        margin-left: auto;
    }
}


/* --- Stable Beta 0.4 scrollable patch history --- */

.patch-history-scroll {
    max-height: 420px;
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid var(--line, #d8e0ee);
    border-radius: 16px;
}

.patch-history-scroll table {
    margin: 0;
}

.patch-history-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f8fbff;
}

.patch-history-scroll td,
.patch-history-scroll th {
    vertical-align: top;
}

.patch-history-note {
    margin-top: 10px;
    color: var(--muted, #667085);
    font-size: 13px;
}

body.theme-dark .patch-history-scroll {
    border-color: #334155 !important;
    background: #111827 !important;
}

body.theme-dark .patch-history-scroll thead th {
    background: #0f172a !important;
    color: #cbd5e1 !important;
}

body.theme-dark .patch-history-note {
    color: #a8b6ca !important;
}

.public-demo-body .patch-history-scroll {
    background: #ffffff;
}

@media (max-width: 700px) {
    .patch-history-scroll {
        max-height: 360px;
    }
}


/* --- Stable Beta 0.4 public pages with login-required modal --- */

.public-preview-note {
    border: 1px solid #b8c7e6;
    background: #eef4ff;
    color: #1d4ed8;
    border-radius: 16px;
    padding: 14px 16px;
    font-weight: 800;
    margin-bottom: 18px;
}

.public-preview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}

.public-preview-card,
.public-preview-table-card {
    border: 1px solid var(--line, #d8e0ee);
    background: var(--card, #fff);
    border-radius: 18px;
    padding: 20px;
}

.public-preview-card span {
    display: flex;
    justify-content: space-between;
    color: var(--muted, #667085);
}

.public-preview-card span::after {
    content: '↗';
    color: #98a2b3;
    font-weight: 900;
}

.public-preview-card strong {
    display: block;
    font-size: 34px;
    margin-top: 8px;
}

.public-login-required {
    cursor: pointer;
}

.demo-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, .48);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.demo-modal-backdrop.is-open {
    display: flex;
}

.demo-modal {
    width: min(520px, 100%);
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid #d8e0ee;
    box-shadow: 0 28px 80px rgba(15,23,42,.26);
    padding: 24px;
}

.demo-modal h2 {
    margin-top: 0;
}

.demo-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

body.theme-dark .public-preview-note {
    background: #172554 !important;
    border-color: #2563eb !important;
    color: #bfdbfe !important;
}

body.theme-dark .public-preview-card,
body.theme-dark .public-preview-table-card,
body.theme-dark .demo-modal {
    background: #111827 !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

body.theme-dark .public-preview-card span,
body.theme-dark .demo-modal .muted {
    color: #a8b6ca !important;
}

@media (max-width: 900px) {
    .public-preview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .public-preview-grid {
        grid-template-columns: 1fr;
    }
}


/* --- Stable Beta 0.4 public theme toggle --- */

body.theme-dark .public-preview-card,
body.theme-dark .public-preview-table-card,
body.theme-dark .public-preview-note,
body.theme-dark .demo-modal,
body.theme-dark .demo-table,
body.theme-dark .demo-table tbody,
body.theme-dark .demo-table tr {
    background: #111827 !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

body.theme-dark .public-preview-note {
    background: #172554 !important;
    color: #bfdbfe !important;
    border-color: #2563eb !important;
}

body.theme-dark .demo-table th {
    background: #0f172a !important;
    color: #cbd5e1 !important;
}

body.theme-dark .demo-table td {
    background: #111827 !important;
    color: #e5edf8 !important;
    border-color: #334155 !important;
}

body.theme-dark .public-demo-body {
    background: #0b1220 !important;
    color: #f8fafc !important;
}

body.theme-dark .public-demo-topbar {
    background: rgba(15,23,42,.96) !important;
    border-bottom-color: #334155 !important;
}

body.theme-dark .public-demo-nav a,
body.theme-dark .public-demo-nav button {
    color: #cbd5e1 !important;
}


/* --- Stable Beta 0.4 login dashboard button --- */

.auth-extra-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.auth-copy .auth-extra-actions {
    margin-top: 22px;
}

body.theme-dark .auth-extra-actions .btn.ghost,
body.theme-dark .auth-extra-actions .btn.secondary {
    background: #1e293b !important;
    color: #dbeafe !important;
    border-color: #334155 !important;
}


/* --- Stable Beta 0.4 login dashboard preview area --- */

.auth-preview-area {
    margin-top: 24px;
    padding: 18px;
    border: 1px solid #d8e0ee;
    border-radius: 18px;
    background: linear-gradient(135deg, #f8fbff 0%, #eef4ff 100%);
    display: grid;
    gap: 14px;
}

.auth-preview-area strong,
.auth-preview-area span {
    display: block;
}

.auth-preview-area strong {
    font-size: 15px;
    color: #101828;
}

.auth-preview-area span {
    margin-top: 4px;
    color: #516173;
    line-height: 1.5;
}

.auth-preview-area .preview-btn {
    width: fit-content;
}

.auth-preview-link {
    margin: 16px 0 0;
    color: #667085;
    font-size: 14px;
}

.auth-preview-link a {
    font-weight: 800;
}

body.theme-dark .auth-preview-area {
    background: linear-gradient(135deg, #111827 0%, #172554 100%) !important;
    border-color: #334155 !important;
}

body.theme-dark .auth-preview-area strong {
    color: #f8fafc !important;
}

body.theme-dark .auth-preview-area span,
body.theme-dark .auth-preview-link {
    color: #a8b6ca !important;
}

@media (max-width: 720px) {
    .auth-preview-area .preview-btn {
        width: 100%;
        justify-content: center;
    }
}


/* --- Stable Beta 0.4 top bar spacing polish --- */

/*
Keeps the main navigation on one clean row on desktop, with brand left and
actions right. It only switches to a wrapping/mobile layout when the viewport
is genuinely narrow.
*/

.topbar {
    min-height: 74px;
}

.topbar-inner {
    max-width: 1480px !important;
    width: 100%;
    padding: 14px 28px !important;
    gap: 26px !important;
    justify-content: flex-start;
}

.brand {
    margin-right: 10px;
}

.main-nav {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    column-gap: 24px !important;
    row-gap: 8px !important;
    min-width: 0 !important;
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
}

.main-nav::-webkit-scrollbar {
    display: none;
}

.main-nav a {
    padding: 8px 0;
    line-height: 1.1;
}

.topbar-actions {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 14px !important;
    flex: 0 0 auto !important;
}

.scan-button {
    gap: 7px;
    min-width: 74px;
}

.profile-trigger {
    max-width: 220px;
}

.mode-switch-form {
    flex: 0 0 auto;
}

@media (min-width: 1200px) {
    .topbar-inner {
        flex-wrap: nowrap !important;
    }

    .main-nav {
        flex-wrap: nowrap !important;
    }
}

@media (max-width: 1199px) {
    .topbar {
        min-height: auto;
    }

    .topbar-inner {
        align-items: flex-start !important;
        flex-wrap: wrap !important;
        gap: 12px 18px !important;
    }

    .main-nav {
        order: 3;
        width: 100%;
        flex-basis: 100% !important;
        padding-bottom: 4px;
        column-gap: 18px !important;
    }

    .topbar-actions {
        margin-left: auto !important;
    }
}

@media (max-width: 700px) {
    .topbar-inner {
        padding: 12px 16px !important;
    }

    .main-nav {
        column-gap: 16px !important;
    }

    .scan-button span:last-child {
        display: none;
    }

    .scan-button {
        min-width: 42px;
        padding-inline: 12px;
    }
}


/* --- Stable Beta 0.4 footer bottom placement --- */

/*
Keeps the footer at the bottom of the viewport on short pages,
without making it fixed or covering content.
*/

html,
body {
    min-height: 100%;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.topbar {
    flex: 0 0 auto;
}

.app-shell {
    flex: 1 0 auto;
    width: 100%;
}

.site-footer {
    flex: 0 0 auto;
    width: 100%;
    margin-top: auto !important;
    padding-top: 24px;
    padding-bottom: 28px;
}

.site-footer-inner,
.site-footer .footer-inner {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 700px) {
    .site-footer {
        padding-bottom: 22px;
    }
}


/* --- Stable Beta 0.4 mobile top bar cleanup --- */

/*
Mobile top bar:
- Brand and account controls stay in one compact row.
- Navigation becomes a horizontal scroll strip instead of wrapping into a tall block.
- Scan becomes an icon-only square on mobile.
- Profile name hides on mobile, leaving the avatar.
*/

@media (max-width: 760px) {
    .topbar {
        min-height: auto !important;
    }

    .topbar-inner {
        padding: 12px 14px 10px !important;
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        grid-template-areas:
            "brand spacer actions"
            "nav nav nav" !important;
        align-items: center !important;
        gap: 10px 12px !important;
        max-width: 100% !important;
    }

    .brand {
        grid-area: brand !important;
        margin: 0 !important;
        gap: 7px !important;
        min-width: 0 !important;
    }

    .brand-name {
        font-size: 22px !important;
        letter-spacing: -0.05em !important;
    }

    .beta-badge {
        height: 18px !important;
        padding: 0 7px !important;
        font-size: 9px !important;
    }

    .topbar-actions {
        grid-area: actions !important;
        margin-left: 0 !important;
        justify-self: end !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
    }

    .scan-button {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        padding: 0 !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .scan-button span:not(.scan-icon) {
        display: none !important;
    }

    .scan-icon {
        font-size: 17px !important;
    }

    .profile-trigger {
        width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 4px !important;
        border-radius: 999px !important;
        justify-content: center !important;
    }

    .profile-label {
        display: none !important;
    }

    .profile-avatar {
        width: 34px !important;
        height: 34px !important;
    }

    .mode-switch {
        width: 62px !important;
        height: 36px !important;
    }

    .mode-knob {
        width: 30px !important;
        height: 30px !important;
        font-size: 14px !important;
    }

    .mode-switch.mode-dark .mode-knob {
        transform: translateX(26px) !important;
    }

    .mode-track-sun {
        left: 9px !important;
    }

    .mode-track-moon {
        right: 10px !important;
    }

    .main-nav {
        grid-area: nav !important;
        order: unset !important;
        width: 100% !important;
        flex-basis: auto !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        column-gap: 8px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 2px 0 4px !important;
        margin: 0 !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap !important;
    }

    .main-nav::-webkit-scrollbar {
        display: none !important;
    }

    .main-nav a {
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        min-height: 34px !important;
        padding: 0 12px !important;
        border-radius: 999px !important;
        background: #eef4ff !important;
        color: #335075 !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        text-decoration: none !important;
    }

    .main-nav a:hover {
        background: #dbeafe !important;
        color: #1d4ed8 !important;
    }

    body.theme-dark .main-nav a {
        background: #1e293b !important;
        color: #cbd5e1 !important;
    }

    body.theme-dark .main-nav a:hover {
        background: #26344a !important;
        color: #ffffff !important;
    }

    .profile-dropdown {
        right: -74px !important;
        width: min(280px, calc(100vw - 28px)) !important;
    }

    .app-shell {
        padding-top: 22px !important;
    }
}

@media (max-width: 420px) {
    .topbar-inner {
        padding-left: 10px !important;
        padding-right: 10px !important;
        gap: 9px 8px !important;
    }

    .brand-name {
        font-size: 20px !important;
    }

    .beta-badge {
        font-size: 8px !important;
        padding: 0 6px !important;
    }

    .topbar-actions {
        gap: 6px !important;
    }

    .scan-button,
    .profile-trigger {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }

    .profile-avatar {
        width: 31px !important;
        height: 31px !important;
    }

    .mode-switch {
        width: 58px !important;
        height: 34px !important;
    }

    .mode-knob {
        width: 28px !important;
        height: 28px !important;
    }

    .mode-switch.mode-dark .mode-knob {
        transform: translateX(24px) !important;
    }

    .main-nav a {
        min-height: 32px !important;
        padding: 0 10px !important;
        font-size: 12px !important;
    }
}


/* --- Stable Beta 0.4 mobile burger navigation --- */

.mobile-menu-toggle {
    display: none;
}

@media (max-width: 760px) {
    .topbar-inner {
        grid-template-columns: auto auto 1fr auto !important;
        grid-template-areas: "brand menu spacer actions" !important;
    }

    .mobile-menu-toggle {
        grid-area: menu !important;
        display: inline-flex !important;
        width: 42px !important;
        height: 42px !important;
        border: 1px solid #d8e0ee !important;
        border-radius: 14px !important;
        background: #ffffff !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        gap: 4px !important;
        padding: 0 !important;
        cursor: pointer !important;
        box-shadow: none !important;
    }

    .mobile-menu-toggle span {
        width: 18px !important;
        height: 2px !important;
        border-radius: 999px !important;
        background: #101828 !important;
        display: block !important;
        transition: transform .16s ease, opacity .16s ease !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(1) {
        transform: translateY(6px) rotate(45deg) !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(2) {
        opacity: 0 !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg) !important;
    }

    .main-nav {
        grid-area: nav !important;
        display: none !important;
        width: 100% !important;
        padding: 10px !important;
        margin: 0 !important;
        border: 1px solid #d8e0ee !important;
        border-radius: 18px !important;
        background: #ffffff !important;
        box-shadow: 0 18px 45px rgba(15,23,42,.12) !important;
        overflow: visible !important;
        white-space: normal !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .main-nav.is-open {
        display: flex !important;
    }

    .main-nav a {
        min-height: 38px !important;
        padding: 0 13px !important;
        border-radius: 999px !important;
        background: #eef4ff !important;
        color: #335075 !important;
        font-size: 13px !important;
        font-weight: 800 !important;
    }

    body.theme-dark .mobile-menu-toggle {
        background: #111827 !important;
        border-color: #334155 !important;
    }

    body.theme-dark .mobile-menu-toggle span {
        background: #f8fafc !important;
    }

    body.theme-dark .main-nav {
        background: #111827 !important;
        border-color: #334155 !important;
        box-shadow: 0 18px 45px rgba(0,0,0,.22) !important;
    }

    body.theme-dark .main-nav a {
        background: #1e293b !important;
        color: #cbd5e1 !important;
    }

    body.theme-dark .main-nav a:hover {
        background: #26344a !important;
        color: #ffffff !important;
    }
}

@media (max-width: 420px) {
    .mobile-menu-toggle {
        width: 40px !important;
        height: 40px !important;
    }

    .topbar-inner {
        grid-template-columns: auto auto 1fr auto !important;
    }
}


/* --- Stable Beta 0.4 mobile burger force fix --- */

/*
The earlier mobile menu CSS was being overridden by older mobile nav rules.
This block sits at the end of the stylesheet and forcefully:
- shows the burger button
- hides the nav by default on mobile
- only shows the nav after JS adds .is-open
*/

@media (max-width: 760px) {
    .topbar-inner {
        display: grid !important;
        grid-template-columns: auto auto 1fr auto !important;
        grid-template-areas:
            "brand menu spacer actions"
            "nav nav nav nav" !important;
        align-items: center !important;
        gap: 10px 10px !important;
        padding: 12px 14px !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .brand {
        grid-area: brand !important;
        margin: 0 !important;
    }

    .mobile-menu-toggle {
        grid-area: menu !important;
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        border: 1px solid #d8e0ee !important;
        border-radius: 14px !important;
        background: #ffffff !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        gap: 4px !important;
        padding: 0 !important;
        margin: 0 !important;
        cursor: pointer !important;
        box-shadow: none !important;
        appearance: none !important;
        -webkit-appearance: none !important;
    }

    .mobile-menu-toggle span {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 18px !important;
        height: 2px !important;
        min-height: 2px !important;
        border-radius: 999px !important;
        background: #101828 !important;
        transform-origin: center !important;
        transition: transform .16s ease, opacity .16s ease !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(1) {
        transform: translateY(6px) rotate(45deg) !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(2) {
        opacity: 0 !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg) !important;
    }

    .topbar-actions {
        grid-area: actions !important;
        justify-self: end !important;
        margin-left: 0 !important;
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }

    .main-nav,
    .topbar .main-nav,
    header .main-nav {
        grid-area: nav !important;
        order: unset !important;
        width: 100% !important;
        flex-basis: 100% !important;
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .main-nav.is-open,
    .topbar .main-nav.is-open,
    header .main-nav.is-open {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        overflow: visible !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 10px !important;
        margin: 0 !important;
        border: 1px solid #d8e0ee !important;
        border-radius: 18px !important;
        background: #ffffff !important;
        box-shadow: 0 18px 45px rgba(15,23,42,.12) !important;
        white-space: normal !important;
    }

    .main-nav.is-open a {
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        min-height: 38px !important;
        padding: 0 13px !important;
        border-radius: 999px !important;
        background: #eef4ff !important;
        color: #335075 !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        text-decoration: none !important;
    }

    body.theme-dark .mobile-menu-toggle {
        background: #111827 !important;
        border-color: #334155 !important;
    }

    body.theme-dark .mobile-menu-toggle span {
        background: #f8fafc !important;
    }

    body.theme-dark .main-nav.is-open {
        background: #111827 !important;
        border-color: #334155 !important;
        box-shadow: 0 18px 45px rgba(0,0,0,.22) !important;
    }

    body.theme-dark .main-nav.is-open a {
        background: #1e293b !important;
        color: #cbd5e1 !important;
    }
}

@media (min-width: 761px) {
    .mobile-menu-toggle {
        display: none !important;
    }

    .main-nav {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
    }
}


/* --- Stable Beta 0.4 mobile bottom navigation --- */

/*
Mobile now uses a native-app style bottom nav:
Dashboard, Items, Locations, Folders, QR Labels, Scan.
The full desktop nav stays on desktop/tablet.
*/

.mobile-bottom-nav {
    display: none;
}

@media (max-width: 760px) {
    /* Keep mobile header compact and remove the large nav area. */
    .topbar-inner {
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        grid-template-areas: "brand spacer actions" !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 12px 14px !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .brand {
        grid-area: brand !important;
        margin: 0 !important;
    }

    .topbar-actions {
        grid-area: actions !important;
        justify-self: end !important;
        margin-left: 0 !important;
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }

    .main-nav,
    .topbar .main-nav,
    header .main-nav {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
    }

    .mobile-menu-toggle {
        display: none !important;
    }

    .scan-button {
        display: none !important;
    }

    .profile-trigger {
        width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        padding: 4px !important;
        border-radius: 999px !important;
        justify-content: center !important;
    }

    .profile-label {
        display: none !important;
    }

    .profile-avatar {
        width: 32px !important;
        height: 32px !important;
    }

    .mode-switch {
        width: 58px !important;
        height: 34px !important;
    }

    .mode-knob {
        width: 28px !important;
        height: 28px !important;
        font-size: 14px !important;
    }

    .mode-switch.mode-dark .mode-knob {
        transform: translateX(24px) !important;
    }

    .mobile-bottom-nav {
        position: fixed !important;
        left: 10px !important;
        right: 10px !important;
        bottom: calc(10px + env(safe-area-inset-bottom)) !important;
        z-index: 999 !important;
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 4px !important;
        padding: 8px !important;
        border: 1px solid rgba(216, 224, 238, .92) !important;
        border-radius: 24px !important;
        background: rgba(255, 255, 255, .94) !important;
        box-shadow: 0 18px 55px rgba(15, 23, 42, .22) !important;
        backdrop-filter: blur(18px) !important;
        -webkit-backdrop-filter: blur(18px) !important;
    }

    .mobile-bottom-link {
        min-width: 0 !important;
        min-height: 54px !important;
        border-radius: 18px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        text-decoration: none !important;
        color: #475467 !important;
        font-size: 10px !important;
        font-weight: 850 !important;
        line-height: 1 !important;
        letter-spacing: -0.01em !important;
        white-space: nowrap !important;
    }

    .mobile-bottom-icon {
        font-size: 18px !important;
        line-height: 1 !important;
        display: block !important;
    }

    .mobile-bottom-link:hover,
    .mobile-bottom-link:focus {
        background: #eef4ff !important;
        color: #1d4ed8 !important;
        text-decoration: none !important;
    }

    .mobile-bottom-scan {
        background: #2563eb !important;
        color: #ffffff !important;
        box-shadow: 0 10px 24px rgba(37, 99, 235, .28) !important;
    }

    .mobile-bottom-scan:hover,
    .mobile-bottom-scan:focus {
        background: #1d4ed8 !important;
        color: #ffffff !important;
    }

    .app-shell {
        padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
    }

    .site-footer {
        padding-bottom: calc(112px + env(safe-area-inset-bottom)) !important;
    }

    body.theme-dark .mobile-bottom-nav {
        background: rgba(15, 23, 42, .94) !important;
        border-color: #334155 !important;
        box-shadow: 0 18px 55px rgba(0, 0, 0, .36) !important;
    }

    body.theme-dark .mobile-bottom-link {
        color: #cbd5e1 !important;
    }

    body.theme-dark .mobile-bottom-link:hover,
    body.theme-dark .mobile-bottom-link:focus {
        background: #1e293b !important;
        color: #ffffff !important;
    }

    body.theme-dark .mobile-bottom-scan {
        background: #2563eb !important;
        color: #ffffff !important;
    }
}

@media (max-width: 390px) {
    .mobile-bottom-nav {
        left: 8px !important;
        right: 8px !important;
        padding: 6px !important;
        gap: 2px !important;
        border-radius: 22px !important;
    }

    .mobile-bottom-link {
        min-height: 50px !important;
        font-size: 9px !important;
        border-radius: 16px !important;
    }

    .mobile-bottom-icon {
        font-size: 17px !important;
    }
}


/* --- Stable Beta 0.4 mobile bottom nav overlay force fix --- */

/*
Strict behaviour:
- Hidden on desktop.
- Fixed overlay on mobile/coarse pointer devices.
- Stays pinned to viewport, not the bottom of the document.
*/

.mobile-bottom-nav {
    display: none !important;
}

/* Desktop and laptop safety: never show bottom nav on normal desktop widths. */
@media (min-width: 821px) and (hover: hover) and (pointer: fine) {
    .mobile-bottom-nav {
        display: none !important;
    }
}

/* Phones and narrow mobile layouts */
@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 1024px) {
    body {
        padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important;
    }

    .app-shell {
        padding-bottom: calc(112px + env(safe-area-inset-bottom)) !important;
    }

    .site-footer {
        padding-bottom: calc(122px + env(safe-area-inset-bottom)) !important;
    }

    .mobile-bottom-nav {
        position: fixed !important;
        inset-inline: 10px !important;
        left: 10px !important;
        right: 10px !important;
        bottom: calc(10px + env(safe-area-inset-bottom)) !important;
        top: auto !important;
        z-index: 2147483000 !important;
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 4px !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        min-height: 68px !important;
        margin: 0 !important;
        padding: 8px !important;
        border: 1px solid rgba(216, 224, 238, .94) !important;
        border-radius: 24px !important;
        background: rgba(255, 255, 255, .96) !important;
        box-shadow: 0 18px 55px rgba(15, 23, 42, .24) !important;
        backdrop-filter: blur(18px) !important;
        -webkit-backdrop-filter: blur(18px) !important;
        transform: translate3d(0, 0, 0) !important;
        will-change: transform !important;
        pointer-events: auto !important;
    }

    .mobile-bottom-link {
        min-width: 0 !important;
        min-height: 52px !important;
        border-radius: 18px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        text-decoration: none !important;
        color: #475467 !important;
        font-size: 10px !important;
        font-weight: 850 !important;
        line-height: 1 !important;
        letter-spacing: -0.01em !important;
        white-space: nowrap !important;
        overflow: hidden !important;
    }

    .mobile-bottom-icon {
        font-size: 18px !important;
        line-height: 1 !important;
        display: block !important;
    }

    .mobile-bottom-link:hover,
    .mobile-bottom-link:focus {
        background: #eef4ff !important;
        color: #1d4ed8 !important;
        text-decoration: none !important;
    }

    .mobile-bottom-scan {
        background: #2563eb !important;
        color: #ffffff !important;
        box-shadow: 0 10px 24px rgba(37, 99, 235, .28) !important;
    }

    .mobile-bottom-scan:hover,
    .mobile-bottom-scan:focus {
        background: #1d4ed8 !important;
        color: #ffffff !important;
    }

    body.theme-dark .mobile-bottom-nav {
        background: rgba(15, 23, 42, .96) !important;
        border-color: #334155 !important;
        box-shadow: 0 18px 55px rgba(0, 0, 0, .38) !important;
    }

    body.theme-dark .mobile-bottom-link {
        color: #cbd5e1 !important;
    }

    body.theme-dark .mobile-bottom-link:hover,
    body.theme-dark .mobile-bottom-link:focus {
        background: #1e293b !important;
        color: #ffffff !important;
    }

    body.theme-dark .mobile-bottom-scan {
        background: #2563eb !important;
        color: #ffffff !important;
    }
}

@media (max-width: 390px) {
    .mobile-bottom-nav {
        left: 8px !important;
        right: 8px !important;
        inset-inline: 8px !important;
        bottom: calc(8px + env(safe-area-inset-bottom)) !important;
        padding: 6px !important;
        gap: 2px !important;
        border-radius: 22px !important;
        min-height: 64px !important;
    }

    .mobile-bottom-link {
        min-height: 50px !important;
        font-size: 9px !important;
        border-radius: 16px !important;
    }

    .mobile-bottom-icon {
        font-size: 17px !important;
    }
}


/* --- Stable Beta 0.4 JS mobile bottom nav overlay fix --- */

/*
The mobile bottom nav is now created by JS at the end of <body>
and forced with inline fixed-position styles. CSS below handles fallback,
spacing, and hiding top navigation on mobile.
*/

.mobile-bottom-nav {
    display: none !important;
}

@media (min-width: 821px) {
    .mobile-bottom-nav,
    #mobileBottomNav {
        display: none !important;
    }
}

@media (max-width: 820px) {
    body.has-mobile-bottom-nav {
        padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
    }

    body.has-mobile-bottom-nav .app-shell {
        padding-bottom: calc(124px + env(safe-area-inset-bottom)) !important;
    }

    body.has-mobile-bottom-nav .site-footer {
        padding-bottom: calc(132px + env(safe-area-inset-bottom)) !important;
    }

    .topbar .main-nav,
    header .main-nav,
    .main-nav {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .scan-button {
        display: none !important;
    }

    #mobileBottomNav .mobile-bottom-link:hover,
    #mobileBottomNav .mobile-bottom-link:focus {
        background: #eef4ff !important;
        color: #1d4ed8 !important;
    }

    body.theme-dark #mobileBottomNav .mobile-bottom-link:hover,
    body.theme-dark #mobileBottomNav .mobile-bottom-link:focus {
        background: #1e293b !important;
        color: #ffffff !important;
    }
}

@media (max-width: 390px) {
    #mobileBottomNav {
        left: 8px !important;
        right: 8px !important;
        bottom: calc(8px + env(safe-area-inset-bottom)) !important;
        padding: 6px !important;
        gap: 4px !important;
    }

    #mobileBottomNav .mobile-bottom-link {
        min-height: 50px !important;
        font-size: 9px !important;
    }
}


/* --- Stable Beta 0.4 mobile bottom nav: add Scan + remove top mobile nav --- */

/*
Mobile bottom nav now contains:
Dashboard, Items, Locations, Folders, Scan.
Top navigation and top Scan remain hidden on mobile.
*/

@media (max-width: 820px) {
    .topbar .main-nav,
    header .main-nav,
    .main-nav,
    .scan-button {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
    }

    #mobileBottomNav,
    .mobile-bottom-nav {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }

    #mobileBottomNav .mobile-bottom-scan,
    .mobile-bottom-nav .mobile-bottom-scan {
        background: #2563eb !important;
        color: #ffffff !important;
        box-shadow: 0 10px 24px rgba(37, 99, 235, .28) !important;
    }

    #mobileBottomNav .mobile-bottom-scan:hover,
    #mobileBottomNav .mobile-bottom-scan:focus,
    .mobile-bottom-nav .mobile-bottom-scan:hover,
    .mobile-bottom-nav .mobile-bottom-scan:focus {
        background: #1d4ed8 !important;
        color: #ffffff !important;
    }
}

@media (max-width: 390px) {
    #mobileBottomNav .mobile-bottom-link {
        font-size: 8.5px !important;
    }

    #mobileBottomNav .mobile-bottom-icon {
        font-size: 17px !important;
    }
}


/* --- Stable Beta 0.4 force hide top mobile nav --- */

/*
Hard stop: on mobile the header must only show brand/account/theme controls.
Dashboard/Items/Locations/Folders/Scan must not appear in the top bar.
They live in the bottom overlay nav instead.
*/

@media screen and (max-width: 820px) {
    header nav.main-nav,
    .topbar nav.main-nav,
    .topbar .main-nav,
    header .main-nav,
    body .main-nav {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        left: -99999px !important;
        top: -99999px !important;
        width: 0 !important;
        max-width: 0 !important;
        height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        transform: none !important;
    }

    header .scan-button,
    .topbar .scan-button,
    body .topbar .scan-button {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        left: -99999px !important;
        top: -99999px !important;
        width: 0 !important;
        max-width: 0 !important;
        min-width: 0 !important;
        height: 0 !important;
        max-height: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
    }

    .topbar-inner {
        grid-template-areas: "brand spacer actions" !important;
        grid-template-columns: auto 1fr auto !important;
    }
}

@media screen and (min-width: 821px) {
    header nav.main-nav,
    .topbar nav.main-nav,
    .topbar .main-nav {
        position: static !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
}


/* --- Stable Beta 0.4 mobile More burger menu --- */

/*
Bottom mobile nav keeps the primary actions:
Dashboard, Items, Locations, Folders, Scan.
The header burger now holds the remaining pages.
*/

.mobile-more-toggle,
.mobile-more-menu {
    display: none;
}

@media screen and (max-width: 820px) {
    .topbar-inner {
        display: grid !important;
        grid-template-columns: auto auto 1fr auto !important;
        grid-template-areas: "brand more spacer actions" !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 12px 14px !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .mobile-more-toggle {
        grid-area: more !important;
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        border: 1px solid #d8e0ee !important;
        border-radius: 14px !important;
        background: #ffffff !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        gap: 4px !important;
        padding: 0 !important;
        margin: 0 !important;
        cursor: pointer !important;
        box-shadow: none !important;
        appearance: none !important;
        -webkit-appearance: none !important;
    }

    .mobile-more-toggle span {
        width: 18px !important;
        height: 2px !important;
        min-height: 2px !important;
        display: block !important;
        border-radius: 999px !important;
        background: #101828 !important;
        transition: transform .16s ease, opacity .16s ease !important;
    }

    .mobile-more-toggle.is-open span:nth-child(1) {
        transform: translateY(6px) rotate(45deg) !important;
    }

    .mobile-more-toggle.is-open span:nth-child(2) {
        opacity: 0 !important;
    }

    .mobile-more-toggle.is-open span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg) !important;
    }

    .mobile-more-menu {
        position: fixed !important;
        inset: 0 !important;
        z-index: 2147483600 !important;
        display: none !important;
        padding: 74px 12px calc(104px + env(safe-area-inset-bottom)) !important;
        background: rgba(15, 23, 42, .18) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
    }

    .mobile-more-menu.is-open {
        display: block !important;
    }

    .mobile-more-panel {
        width: min(420px, 100%) !important;
        margin: 0 auto !important;
        padding: 14px !important;
        border-radius: 24px !important;
        border: 1px solid #d8e0ee !important;
        background: rgba(255,255,255,.98) !important;
        box-shadow: 0 22px 65px rgba(15,23,42,.24) !important;
    }

    .mobile-more-head {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        margin-bottom: 12px !important;
    }

    .mobile-more-head strong {
        color: #101828 !important;
        font-size: 16px !important;
        font-weight: 900 !important;
    }

    .mobile-more-close {
        width: 38px !important;
        height: 38px !important;
        border-radius: 999px !important;
        border: 1px solid #d8e0ee !important;
        background: #ffffff !important;
        color: #101828 !important;
        font-size: 24px !important;
        line-height: 1 !important;
        cursor: pointer !important;
    }

    .mobile-more-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .mobile-more-grid a {
        display: flex !important;
        align-items: center !important;
        min-height: 46px !important;
        padding: 0 14px !important;
        border-radius: 16px !important;
        background: #eef4ff !important;
        color: #335075 !important;
        font-size: 14px !important;
        font-weight: 850 !important;
        text-decoration: none !important;
    }

    .mobile-more-grid a:hover,
    .mobile-more-grid a:focus {
        background: #dbeafe !important;
        color: #1d4ed8 !important;
        text-decoration: none !important;
    }

    body.theme-dark .mobile-more-toggle {
        background: #111827 !important;
        border-color: #334155 !important;
    }

    body.theme-dark .mobile-more-toggle span {
        background: #f8fafc !important;
    }

    body.theme-dark .mobile-more-menu {
        background: rgba(0, 0, 0, .28) !important;
    }

    body.theme-dark .mobile-more-panel {
        background: rgba(15,23,42,.98) !important;
        border-color: #334155 !important;
        box-shadow: 0 22px 65px rgba(0,0,0,.42) !important;
    }

    body.theme-dark .mobile-more-head strong {
        color: #f8fafc !important;
    }

    body.theme-dark .mobile-more-close {
        background: #111827 !important;
        border-color: #334155 !important;
        color: #f8fafc !important;
    }

    body.theme-dark .mobile-more-grid a {
        background: #1e293b !important;
        color: #cbd5e1 !important;
    }

    body.theme-dark .mobile-more-grid a:hover,
    body.theme-dark .mobile-more-grid a:focus {
        background: #26344a !important;
        color: #ffffff !important;
    }
}

@media screen and (min-width: 821px) {
    .mobile-more-toggle,
    .mobile-more-menu {
        display: none !important;
    }
}


/* --- Stable Beta 0.4 mobile More arrow repair --- */

/*
Repair version:
- Restores the last known working mobile More menu files.
- Keeps the same working menu JS and panel.
- Uses a text dropdown trigger instead of changing the menu structure.
*/

@media screen and (max-width: 820px) {
    .mobile-more-toggle {
        width: auto !important;
        min-width: 74px !important;
        height: 42px !important;
        min-height: 42px !important;
        padding: 0 12px !important;
        flex-direction: row !important;
        gap: 0 !important;
        font: inherit !important;
    }

    .mobile-more-toggle .mobile-more-arrow-icon {
        display: block !important;
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        background: transparent !important;
        color: #101828 !important;
        font-size: 13px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        letter-spacing: -0.01em !important;
        transform: none !important;
        transition: transform .16s ease !important;
        white-space: nowrap !important;
    }

    .mobile-more-toggle .mobile-more-hidden-line {
        display: none !important;
    }

    .mobile-more-toggle.is-open .mobile-more-arrow-icon {
        transform: none !important;
    }

    body.theme-dark .mobile-more-toggle .mobile-more-arrow-icon {
        background: transparent !important;
        color: #f8fafc !important;
    }
}


/* --- Stable Beta 0.4 combined QR navigation --- */

/*
QR Labels and Made QR codes now appear as one navigation item: QR Codes.
The separate page can still exist internally, but the main nav is cleaner.
*/



/* --- Stable Beta 0.4 Registered QR codes safe repair --- */

/*
Safe repair after the previous label patch:
- Restores the last styled CSS file.
- Removes the old mobile " / labels" suffix.
*/

.mobile-more-grid a[href="qr-labels.php"]::after {
    content: "" !important;
    display: none !important;
}


/* --- Stable Beta 0.4 registered QR page labels --- */

/*
User-facing QR wording is now Registered QR codes.
The underlying filenames stay the same so old links keep working.
*/


/* --- Stable Beta 0.4 registered QR duplicate label fix --- */

/*
Fix is mostly PHP text cleanup.
QR Labels remains the label generator.
Registered QR codes remains the registry/list page.
*/


/* --- Stable Beta 0.4 Registered QR codes layout polish --- */

/*
Registered QR codes page layout:
- Better hero/header balance.
- Summary stats become proper cards.
- Search/management sections align better.
- Mobile remains stacked and readable.
*/

.qr-registry-page {
    max-width: 1240px !important;
    margin: 0 auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

.qr-registry-page > .page-head,
.qr-registry-page .page-head,
.qr-registry-page > header:first-child {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 18px !important;
    align-items: start !important;
    margin-bottom: 22px !important;
}

.qr-registry-page h1 {
    margin-bottom: 8px !important;
}

.qr-registry-page h1 + .muted,
.qr-registry-page h1 + p {
    max-width: 720px !important;
    line-height: 1.55 !important;
}

/* The small count links under the header */
.qr-registry-page h1 ~ p a,
.qr-registry-page > p a {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 38px !important;
    padding: 0 13px !important;
    border-radius: 999px !important;
    background: #eef4ff !important;
    color: #1d4ed8 !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    margin: 4px 8px 4px 0 !important;
}

/* Make the count block feel like a proper dashboard strip */
.qr-registry-page > p:has(a) {
    margin: 18px 0 14px !important;
}

/* Management/search cards should not feel narrow and random */
.qr-registry-page .card {
    max-width: none !important;
}

.qr-registry-page .card:has(input[type="search"]),
.qr-registry-page .card:has(input[name="q"]),
.qr-registry-page .card:has(select[name="filter"]),
.qr-registry-page .card:has(select) {
    margin-top: 20px !important;
}

.qr-registry-page .card h2,
.qr-registry-page .card h3 {
    margin-top: 0 !important;
}

/* Better two-column form feel inside the search panel */
.qr-registry-page .form-grid,
.qr-registry-page form .grid,
.qr-registry-page form {
    gap: 16px !important;
}

.qr-registry-page .btn-row,
.qr-registry-page .form-actions {
    gap: 10px !important;
}

/* Registry table/card spacing */
.qr-registry-page table {
    width: 100% !important;
}

.qr-registry-page .table-wrap,
.qr-registry-page .card:has(table) {
    overflow-x: auto !important;
}

/* Make the top action button feel aligned */
.qr-registry-page .page-actions,
.qr-registry-page .actions {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

/* Dark mode */
body.theme-dark .qr-registry-page h1 ~ p a,
body.theme-dark .qr-registry-page > p a {
    background: #1e293b !important;
    color: #dbeafe !important;
}

@media (min-width: 900px) {
    .qr-registry-page {
        padding-top: 34px !important;
    }

    /* Turn the top count links into a neat row */
    .qr-registry-page h1 ~ p,
    .qr-registry-page > p {
        max-width: 900px !important;
    }
}

@media (max-width: 820px) {
    .qr-registry-page {
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-top: 22px !important;
    }

    .qr-registry-page > .page-head,
    .qr-registry-page .page-head,
    .qr-registry-page > header:first-child {
        grid-template-columns: 1fr !important;
    }

    .qr-registry-page .page-actions,
    .qr-registry-page .actions {
        justify-content: flex-start !important;
    }

    .qr-registry-page h1 ~ p a,
    .qr-registry-page > p a {
        width: 100% !important;
        justify-content: space-between !important;
    }
}



/* --- Stable Beta 0.4 QR nav and rotate image fix --- */

/*
QR Labels remains the label printer.
Registered QR codes remains the registry/list page.
Location image rotation now returns to the visual card and uses filemtime cache busting.
*/

#location-visual {
    scroll-margin-top: 110px;
}

.location-visual-actions form {
    margin: 0;
}


/* --- Stable Beta 0.4 Registered QR stat card polish --- */

/*
The Registered QR codes counters are clickable filters,
but they should look like proper stat buttons/cards, not loose blue links.
*/

.qr-registry-stats {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
    margin: 22px 0 24px !important;
    max-width: 1100px !important;
}

.qr-registry-stats .stat-card {
    min-height: 96px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 18px 20px !important;
    border: 1px solid #d8e0ee !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    color: #101828 !important;
    box-shadow: 0 14px 36px rgba(15, 23, 42, .07) !important;
    text-decoration: none !important;
    transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease, background .14s ease !important;
}

.qr-registry-stats .stat-card:hover,
.qr-registry-stats .stat-card:focus {
    transform: translateY(-2px) !important;
    border-color: #9db7ff !important;
    background: #f8fbff !important;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .10) !important;
    color: #101828 !important;
}

.qr-registry-stats .stat-card span {
    display: block !important;
    color: #516173 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
}

.qr-registry-stats .stat-card strong {
    display: block !important;
    color: #101828 !important;
    font-size: 34px !important;
    font-weight: 950 !important;
    line-height: .9 !important;
    letter-spacing: -0.05em !important;
    text-decoration: none !important;
}

/* Small visual accent per card */
.qr-registry-stats .stat-card::before {
    content: "";
    width: 34px !important;
    height: 4px !important;
    border-radius: 999px !important;
    background: #2563eb !important;
    opacity: .85 !important;
}

/* Optional selected filter state based on current URL is not server-rendered yet,
   so hover/focus is kept clean without changing behaviour. */

body.theme-dark .qr-registry-stats .stat-card {
    background: #111827 !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
    box-shadow: 0 14px 36px rgba(0, 0, 0, .24) !important;
}

body.theme-dark .qr-registry-stats .stat-card:hover,
body.theme-dark .qr-registry-stats .stat-card:focus {
    background: #1e293b !important;
    border-color: #3b82f6 !important;
    color: #ffffff !important;
}

body.theme-dark .qr-registry-stats .stat-card span {
    color: #a8b6ca !important;
}

body.theme-dark .qr-registry-stats .stat-card strong {
    color: #f8fafc !important;
}

@media (max-width: 1000px) {
    .qr-registry-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 560px) {
    .qr-registry-stats {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin-top: 18px !important;
    }

    .qr-registry-stats .stat-card {
        min-height: 76px !important;
        padding: 15px 16px !important;
        flex-direction: row !important;
        align-items: center !important;
    }

    .qr-registry-stats .stat-card::before {
        display: none !important;
    }

    .qr-registry-stats .stat-card strong {
        font-size: 30px !important;
    }
}



/* --- Stable Beta 0.4 Blank labels wording --- */

/*
User-facing wording changed from Reserved blank labels to Blank labels.
Internal filter values remain unchanged so existing logic keeps working.
*/


/* --- Stable Beta 0.4 auth left panel match --- */

/*
Login and Create account now share the same left intro panel.
Visible brand casing should be ItemID, with Stable Beta 0.4.
*/

.auth-intro .eyebrow,
.auth-intro .auth-eyebrow {
    text-transform: none !important;
    letter-spacing: .08em !important;
}

.auth-intro .eyebrow::first-letter,
.auth-intro .auth-eyebrow::first-letter {
    text-transform: uppercase !important;
}

.auth-preview-area strong {
    text-transform: none !important;
}


/* --- Stable Beta 0.4 auth panel matching and ItemID casing fix --- */

/*
Login and create account left panels now share the same markup.
The small brand line is forced to normal casing so it reads "ItemID Stable Beta 0.4",
not "ItemID STABLE BETA 0.4". It uses the same font family as the header.
*/

.auth-intro,
.auth-intro * {
    font-family: inherit !important;
}

.auth-brand,
.auth-intro .auth-brand,
.auth-intro .eyebrow,
.auth-intro .auth-eyebrow {
    text-transform: none !important;
    letter-spacing: .08em !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    color: #2563eb !important;
}

.auth-intro h1 {
    font-family: inherit !important;
}

.auth-pills span {
    text-transform: none !important;
}


/* --- Stable Beta 0.4 auth panels and upload privacy note --- */

/*
Auth pages:
- Login and Create account use the same left panel.
- The small brand line keeps normal ItemID casing and the same app font.
*/

.auth-panel.auth-copy .eyebrow,
.auth-panel.auth-copy .brand-lock,
.auth-body .eyebrow.brand-lock {
    text-transform: none !important;
    font-family: inherit !important;
    letter-spacing: .08em !important;
    color: #2563eb !important;
    font-weight: 900 !important;
}

.auth-panel.auth-copy,
.auth-panel.auth-copy * {
    font-family: inherit !important;
}

.auth-panel.auth-copy h1 {
    font-family: inherit !important;
}

/* Location visual privacy note */
.privacy-note {
    display: grid;
    gap: 5px;
    padding: 14px 16px;
    border: 1px solid #bfdbfe;
    border-radius: 16px;
    background: #eff6ff;
    color: #1e3a8a;
    margin: 10px 0 18px;
}

.privacy-note strong {
    font-size: 14px;
    font-weight: 900;
    color: #1e3a8a;
}

.privacy-note span {
    color: #335075;
    line-height: 1.5;
}

body.theme-dark .privacy-note {
    background: #102033;
    border-color: #1d4ed8;
    color: #dbeafe;
}

body.theme-dark .privacy-note strong {
    color: #dbeafe;
}

body.theme-dark .privacy-note span {
    color: #bfd3f7;
}




/* ===== CSS from itemid_login_redirect_loop_fix_patch.zip ===== */

:root{
  --bg:#f5f7fb;--bg2:#eef4ff;--card:#fff;--text:#101828;--muted:#667085;--line:#d9e1ec;
  --blue:#2563eb;--blue-dark:#1d4ed8;--blue2:#eff4ff;--green:#12b76a;--amber:#f79009;--danger:#b42318;
  --shadow:0 18px 45px rgba(15,23,42,.08);--radius:18px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:linear-gradient(180deg,#f8fbff 0%,var(--bg) 260px);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Arial,sans-serif;font-size:15px;line-height:1.5}a{color:var(--blue-dark);text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3{letter-spacing:-.04em;line-height:1.15;margin:0 0 10px}h1{font-size:34px}h2{font-size:28px}h3{font-size:19px}.muted{color:var(--muted)}.big{font-size:17px;line-height:1.65}.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:22px;padding:14px 24px;background:rgba(255,255,255,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}.brand{display:inline-flex;gap:10px;align-items:center;color:var(--text);font-weight:900;font-size:21px}.brand:hover{text-decoration:none}.brand-mark{width:34px;height:34px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;background:#111827;color:white;font-size:13px;letter-spacing:-.04em}.main-nav{display:flex;align-items:center;gap:4px;flex:1;flex-wrap:wrap}.main-nav a{color:#344054;padding:9px 10px;border-radius:10px;font-weight:700;font-size:14px}.main-nav a:hover{background:var(--blue2);text-decoration:none}.top-actions{display:flex;align-items:center;gap:12px}.muted-link{color:var(--muted);font-weight:700}.page{max-width:1180px;margin:0 auto;padding:28px 22px 60px}.site-footer{max-width:1180px;margin:0 auto;padding:22px;color:var(--muted);border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px}.page-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin:0 0 20px}.page-head p{margin:4px 0 0}.card{background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:18px;box-shadow:0 10px 30px rgba(15,23,42,.045)}.hero{display:grid;grid-template-columns:2fr 1fr;gap:18px;margin-bottom:18px}.hero .card:first-child{background:linear-gradient(135deg,#fff 0%,#f4f7ff 100%)}.grid{display:grid;gap:18px}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.cards4{grid-template-columns:repeat(4,minmax(0,1fr))}.cards4 .card{margin:0}.cards4 h2{font-size:34px;margin-top:6px}.wide{max-width:920px}.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;background:var(--blue);color:white;padding:11px 16px;font-weight:900;cursor:pointer;text-decoration:none;box-shadow:0 8px 18px rgba(37,99,235,.18);font:inherit}.btn:hover{text-decoration:none;background:var(--blue-dark)}.btn.secondary{background:#e8efff;color:var(--blue-dark);box-shadow:none}.btn.secondary:hover{background:#dbe7ff}.btn.ghost{background:white;color:#344054;border:1px solid var(--line);box-shadow:none}.btn.small{padding:8px 12px;border-radius:10px;font-size:14px}.scan-link{background:#111827;color:#fff!important}.form{display:grid;gap:15px}.form label{display:grid;gap:7px;color:#344054;font-size:14px;font-weight:700}.form input,.form select,.form textarea,.searchbar input,.inline-form input,.inline-form select{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px 13px;background:white;color:var(--text);font:inherit;outline:none}.form input:focus,.form select:focus,.form textarea:focus,.searchbar input:focus,.inline-form input:focus,.inline-form select:focus{border-color:#9db7ff;box-shadow:0 0 0 4px rgba(37,99,235,.10)}.searchbar,.inline-form{display:flex;gap:10px;margin-bottom:18px}.table-wrap{overflow:auto;padding:0}table{width:100%;border-collapse:collapse;min-width:720px}th,td{text-align:left;border-bottom:1px solid var(--line);padding:14px 16px;vertical-align:top}th{font-size:12px;color:var(--muted);font-weight:900;text-transform:uppercase;letter-spacing:.05em;background:#fbfcff}tr:hover td{background:#fbfdff}.pill{display:inline-flex;background:var(--blue2);color:var(--blue-dark);border-radius:999px;padding:4px 9px;font-size:13px;font-weight:900}.pill.low,.pill.Empty,.pill.Missing{background:#fff4ed;color:#b54708}.visual{max-width:100%;border-radius:14px;border:1px solid var(--line);box-shadow:0 8px 20px rgba(15,23,42,.06)}.qr-box{display:inline-block;background:white;padding:12px;border:1px solid var(--line);border-radius:14px}.code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:900;background:#f2f4f7;border:1px solid #e4e7ec;border-radius:10px;padding:4px 8px;display:inline-block}.labels{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.label{background:#fff;border:1px solid #111;border-radius:6px;text-align:center;padding:11px;break-inside:avoid}.label .qr{display:inline-block}.label-toolbar{margin:12px 0}.check{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center;gap:8px!important}.alert{background:#fef3f2;color:var(--danger);border:1px solid #fecdca;border-radius:12px;padding:11px 13px;font-weight:700}.notice{background:#eff8ff;color:#175cd3;border:1px solid #b2ddff;border-radius:12px;padding:11px 13px;font-weight:700}.empty{padding:24px;border:1px dashed var(--line);border-radius:14px;background:#fbfcff;color:var(--muted)}
/* Auth */.auth-body{min-height:100vh!important;display:grid!important;place-items:center!important;padding:28px;background:radial-gradient(circle at top left,rgba(37,99,235,.16),transparent 34%),radial-gradient(circle at bottom right,rgba(16,185,129,.10),transparent 28%),var(--bg)}.auth-shell{width:min(980px,100%);display:grid;grid-template-columns:1.15fr .85fr;gap:18px;align-items:stretch}.auth-panel{background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow)}.auth-copy{padding:36px;display:flex;flex-direction:column;justify-content:center;min-height:440px}.logo-mark{width:54px;height:54px;border-radius:16px;background:#111827;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;letter-spacing:-.04em;margin-bottom:22px}.eyebrow{font-weight:900;color:var(--blue);letter-spacing:.08em;text-transform:uppercase;font-size:13px;margin:0 0 10px}.auth-copy h1{font-size:46px;letter-spacing:-.055em;line-height:1.02;margin:0 0 16px;max-width:620px}.auth-copy .big{font-size:17px;line-height:1.6;max-width:600px;margin:0 0 22px}.feature-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}.feature-list span{background:var(--blue2);color:var(--blue-dark);border:1px solid #dbe7ff;border-radius:999px;padding:8px 11px;font-weight:900;font-size:13px}.auth-card{width:auto!important;padding:30px;display:flex;flex-direction:column;justify-content:center}.auth-card h2{font-size:30px;margin:0 0 8px}.auth-card .muted{margin-top:0;margin-bottom:20px}.auth-card input{height:46px}.subtle-link{font-size:14px;font-weight:800;justify-self:start}.auth-card .actions{margin-top:2px}
@media(max-width:900px){.topbar{align-items:flex-start;flex-direction:column}.top-actions{width:100%;justify-content:space-between}.hero,.grid.two,.grid.cards4{grid-template-columns:1fr}.page-head{display:block}.searchbar,.inline-form{flex-direction:column}.labels{grid-template-columns:repeat(2,1fr)}.auth-shell{grid-template-columns:1fr}.auth-copy{min-height:0;padding:24px}.auth-copy h1{font-size:34px}.auth-card{padding:24px}.site-footer{flex-direction:column}}@media print{body{background:white}.topbar,.page-head,.card:not(.table-wrap),.label-toolbar,.site-footer{display:none!important}.page{padding:0}.labels{grid-template-columns:repeat(4,1fr);gap:8px}.label{page-break-inside:avoid;box-shadow:none}}

/* ItemID QR/template patch */
.section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}.section-head h2{font-size:22px;margin:0 0 4px}.field-builder{display:grid;gap:14px;border:1px solid var(--line);border-radius:16px;padding:16px;background:#fbfcff}.quick-fields{display:flex;gap:8px;flex-wrap:wrap}.field-chip{border:1px solid #dbe7ff;background:#eff4ff;color:#1d4ed8;border-radius:999px;padding:7px 10px;font-weight:800;cursor:pointer}.field-chip:hover{background:#dbe7ff}.fields-list{display:grid;gap:10px}.field-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}.label-sheet{display:grid;grid-template-columns:repeat(var(--label-columns,4),minmax(0,1fr));gap:12px}.print-label-card{background:#fff;border:1px solid #111827;border-radius:10px;text-align:center;padding:12px;break-inside:avoid;min-height:calc(var(--qr-size,120px) + 62px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px}.print-label-card .qr{display:inline-flex;align-items:center;justify-content:center}.print-label-card .print-code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:15px;font-weight:900;letter-spacing:.06em}.print-label-card .print-name{font-size:12px;font-weight:800;color:#344054;line-height:1.25}.row-actions{display:flex;gap:12px;white-space:nowrap}.qr-size-form select{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px 13px;background:white;color:var(--text);font:inherit;outline:none}@media(max-width:700px){.field-row{grid-template-columns:1fr}.label-sheet{grid-template-columns:repeat(2,minmax(0,1fr))}.row-actions{display:grid;gap:6px}}

/* ItemID workflow polish patch */
.mini-action{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;border-radius:10px;padding:7px 10px;font-weight:900;color:#1d4ed8;text-decoration:none;white-space:nowrap}.mini-action:hover{background:#eff4ff;text-decoration:none}.pretty-fields{gap:18px}.pretty-list{gap:12px}.pretty-row{grid-template-columns:1fr 42px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px}.pretty-row input{border:0!important;box-shadow:none!important;padding:9px 10px!important}.icon-button{width:34px;height:34px;border:0;border-radius:10px;background:#f2f4f7;color:#344054;font-size:22px;line-height:1;cursor:pointer;font-weight:900}.icon-button:hover{background:#fee4e2;color:#b42318}.community-check{align-self:end;background:#fbfcff;border:1px solid var(--line);border-radius:14px;padding:12px}.community-check span{display:grid;gap:2px}.community-check small{color:var(--muted);font-weight:600}.field-chip{font-size:13px}.print-label-card{min-height:calc(var(--qr-mm,35mm) + 22mm);padding:8mm 4mm}.print-label-card .print-name{max-width:100%;overflow-wrap:anywhere}.custom-prefix-row{display:none}.item-hero{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.item-hero h2{font-size:24px;margin:4px 0 0}.activity-line{border-bottom:1px solid var(--line);padding:0 0 10px;margin:0 0 10px}.qr-size-form{margin-top:14px;display:flex;gap:10px;align-items:end;flex-wrap:wrap}.qr-size-form label{min-width:190px}.add-item-flow{gap:20px}.flow-step{display:flex;gap:14px;align-items:flex-start;border-top:1px solid var(--line);padding-top:18px}.flow-step:first-of-type{border-top:0;padding-top:0}.flow-step h2{font-size:22px;margin:0 0 4px}.step-badge{width:34px;height:34px;border-radius:999px;background:#111827;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:900;flex:0 0 auto}.field-as-card{border:1px dashed #b7c5df;border-radius:14px;padding:13px;background:#fbfcff}.field-as-card p{margin:4px 0 10px}.code-pill{display:inline-flex;background:#f2f4f7;border:1px solid #e4e7ec;border-radius:10px;padding:5px 9px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:900}@media(max-width:800px){.item-hero{grid-template-columns:1fr}.pretty-row{grid-template-columns:1fr 42px}.qr-size-form{display:grid}.flow-step{display:grid}.field-as-card .btn{width:100%}}


/* ItemID workflow patch 2 */
.beta-badge{display:inline-flex;align-items:center;border:1px solid #c7d7fe;background:#eff4ff;color:#1d4ed8;border-radius:999px;padding:2px 7px;font-size:11px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;line-height:1.4}.template-create-card{display:flex;align-items:center;justify-content:space-between;gap:14px}.template-create-card p{margin:3px 0 0}.compact-check{width:auto!important;display:flex!important;grid-template-columns:auto 1fr!important;align-items:center!important;gap:8px!important;min-width:170px}.compact-check input{width:auto!important}.qr-box canvas,.qr-box img{display:block!important;max-width:100%!important;max-height:100%!important}.print-label-card{overflow:hidden}.print-label-card .dynamic-qr canvas,.print-label-card .dynamic-qr img{display:block!important}.print-label-card .print-code,.print-label-card .print-name{max-width:100%;overflow-wrap:anywhere}.single-print-label{overflow:hidden}@media(max-width:800px){.template-create-card{display:grid}.compact-check{min-width:0}}

/* Items table action-cell border fix */
td.row-actions,
th.row-actions {
    display: table-cell !important;
    white-space: nowrap;
    vertical-align: middle;
    border-bottom: 1px solid var(--line) !important;
}

td.row-actions {
    min-width: 230px;
}

td.row-actions .mini-action {
    margin-right: 8px;
    margin-bottom: 0;
}

td.row-actions .mini-action:last-child {
    margin-right: 0;
}

tr:hover td.row-actions {
    background: #fbfdff;
}

@media (max-width: 760px) {
    td.row-actions {
        min-width: 170px;
    }

    td.row-actions .mini-action {
        display: flex;
        width: 100%;
        margin-right: 0;
        margin-bottom: 6px;
    }

    td.row-actions .mini-action:last-child {
        margin-bottom: 0;
    }
}

/* Stable Beta 0.4 additions */
.btn.danger,
.btn.danger.ghost {
  color: #b42318 !important;
  border-color: #fecdca !important;
  background: #fff !important;
  box-shadow: none !important;
}
.btn.danger:hover,
.btn.danger.ghost:hover {
  background: #fef3f2 !important;
  text-decoration: none;
}
.mini-action.danger {
  color: #b42318 !important;
  border-color: #fecdca !important;
  background: #fff !important;
}
.export-card {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.export-card:hover {
  transform: translateY(-2px);
  text-decoration: none;
  border-color: #b8c7e6;
  box-shadow: 0 18px 42px rgba(15,23,42,.09);
}
.site-footer a { color: inherit; font-weight: 800; }

/* Stable Beta 0.4 template/item field builder polish */
.item-template-field-row {
    display: grid;
    grid-template-columns: minmax(150px, .35fr) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 12px;
    border: 1px solid #d8e0ee;
    border-radius: 14px;
    background: #ffffff;
    margin-bottom: 10px;
}

.template-field-input-wrap {
    display: grid;
    gap: 6px;
}

.template-field-input-wrap input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    margin: 8px 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.field-unit-hint {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 9px;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 900;
}

.small {
    font-size: 12px;
}

@media (max-width: 700px) {
    .item-template-field-row {
        grid-template-columns: 1fr;
    }
}

/* --- Profile/preferences patch CSS --- */

/* Profile and preferences */
.profile-settings-row {
    display: grid;
    grid-template-columns: 112px 1fr;
    gap: 22px;
    align-items: center;
    margin-bottom: 20px;
}

.profile-settings-avatar {
    width: 96px;
    height: 96px;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid #d8e0ee;
    background: #eef4ff;
    color: #1d4ed8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    font-weight: 900;
}

.profile-settings-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.checkbox-line {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    font-weight: 800;
}

.checkbox-line input,
.checkbox-card input {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.checkbox-card {
    min-height: 70px;
    border: 1px solid #d8e0ee;
    border-radius: 14px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}

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

.checkbox-card small {
    margin-top: 4px;
    color: #64748b;
}

@media (max-width: 650px) {
    .profile-settings-row {
        grid-template-columns: 1fr;
    }
}


/* --- Stable Beta 0.4 theme toggle + dark fix --- */

.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,255,255,.94);
    border-bottom: 1px solid #d8e0ee;
    backdrop-filter: blur(14px);
}

.topbar-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    gap: 22px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #0f172a;
    flex: 0 0 auto;
}

.brand:hover {
    text-decoration: none;
}

.brand-name {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1;
}

.beta-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 19px;
    padding: 0 7px;
    border: 1px solid #b8c7e6;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    white-space: nowrap;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 auto;
    min-width: 0;
}

.main-nav a {
    color: #335075;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
}

.main-nav a:hover {
    color: #2563eb;
    text-decoration: none;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

.scan-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 16px;
    border-radius: 12px;
    background: #111827;
    color: #ffffff !important;
    text-decoration: none;
    font-weight: 800;
    font-size: 14px;
    box-shadow: 0 10px 24px rgba(17, 24, 39, .18);
}

.scan-button:hover {
    text-decoration: none;
}

.profile-menu {
    position: relative;
}

.profile-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 4px 8px 4px 4px;
    border: 1px solid #d8e0ee;
    border-radius: 999px;
    background: #ffffff;
    color: #0f172a;
    text-decoration: none;
    font-weight: 800;
    cursor: pointer;
    max-width: 260px;
}

.profile-avatar {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    object-fit: cover;
    background: #eef4ff;
    color: #1d4ed8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    border: 1px solid #c9d7f2;
    overflow: hidden;
    flex: 0 0 auto;
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-label {
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.profile-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 280px;
    border: 1px solid #d8e0ee;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .16);
    padding: 10px;
    display: none;
}

.profile-menu:hover .profile-dropdown,
.profile-menu:focus-within .profile-dropdown {
    display: block;
}

.profile-dropdown-header {
    padding: 10px;
    border-bottom: 1px solid #edf2f7;
    margin-bottom: 8px;
}

.profile-dropdown-header strong,
.profile-dropdown-header span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-dropdown-header span {
    color: #64748b;
    font-size: 13px;
    margin-top: 2px;
}

.profile-dropdown a {
    display: block;
    padding: 10px;
    border-radius: 12px;
    color: #334155;
    text-decoration: none;
    font-weight: 800;
}

.profile-dropdown a:hover {
    background: #f1f5f9;
    color: #0f172a;
    text-decoration: none;
}

.theme-toggle-form {
    margin: 0;
}

.theme-toggle {
    width: 62px;
    height: 34px;
    border: 1px solid #d8e0ee;
    border-radius: 999px;
    background: #eef4ff;
    position: relative;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    box-shadow: none;
}

.theme-toggle-bulb {
    position: absolute;
    left: 8px;
    font-size: 15px;
    line-height: 1;
    z-index: 2;
    opacity: .8;
}

.theme-toggle-knob {
    position: absolute;
    left: 3px;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 3px 10px rgba(15,23,42,.18);
    transition: transform .16s ease;
}

.theme-toggle.is-dark {
    background: #172554;
    border-color: #2563eb;
}

.theme-toggle.is-dark .theme-toggle-bulb {
    left: 36px;
    opacity: 1;
}

.theme-toggle.is-dark .theme-toggle-knob {
    transform: translateX(28px);
    background: #0f172a;
}

.app-shell {
    max-width: 1240px;
    margin: 0 auto;
    padding: 28px 18px 48px;
}

/* Dark theme variables and hard overrides */
body.theme-dark {
    --bg:#0b1220;
    --bg2:#0f172a;
    --card:#111827;
    --text:#f8fafc;
    --muted:#a8b6ca;
    --line:#334155;
    --blue2:#172554;
    background: #0b1220 !important;
    color: #f8fafc !important;
    color-scheme: dark;
}

body.theme-dark .topbar {
    background: rgba(15, 23, 42, .96) !important;
    border-bottom-color: #334155 !important;
}

body.theme-dark .brand,
body.theme-dark .brand-name,
body.theme-dark .profile-label {
    color: #f8fafc !important;
}

body.theme-dark .beta-badge {
    background: #172554 !important;
    border-color: #2563eb !important;
    color: #bfdbfe !important;
}

body.theme-dark .main-nav a {
    color: #cbd5e1 !important;
}

body.theme-dark .main-nav a:hover {
    background: #1e293b !important;
    color: #ffffff !important;
}

body.theme-dark .profile-trigger,
body.theme-dark .profile-dropdown,
body.theme-dark .card,
body.theme-dark section.card,
body.theme-dark form.card,
body.theme-dark details.card,
body.theme-dark .table-wrap,
body.theme-dark .metric-card,
body.theme-dark .filter-panel,
body.theme-dark .template-field-card,
body.theme-dark .template-field-row,
body.theme-dark .location-summary,
body.theme-dark .auth-panel {
    background: #111827 !important;
    background-color: #111827 !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
    box-shadow: 0 18px 45px rgba(0,0,0,.22) !important;
}

body.theme-dark .hero .card:first-child {
    background: linear-gradient(135deg, #111827 0%, #172033 100%) !important;
}

body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark strong,
body.theme-dark label,
body.theme-dark th,
body.theme-dark td {
    color: #f8fafc !important;
}

body.theme-dark .muted,
body.theme-dark .help,
body.theme-dark small,
body.theme-dark .site-footer,
body.theme-dark .metric-card span {
    color: #a8b6ca !important;
}

body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

body.theme-dark input::placeholder,
body.theme-dark textarea::placeholder {
    color: #74839a !important;
}

body.theme-dark table,
body.theme-dark tbody,
body.theme-dark tr {
    background: #111827 !important;
    color: #f8fafc !important;
}

body.theme-dark thead,
body.theme-dark th {
    background: #0f172a !important;
    color: #cbd5e1 !important;
}

body.theme-dark td {
    background: #111827 !important;
    color: #e5edf8 !important;
    border-color: #334155 !important;
}

body.theme-dark tr:hover td {
    background: #172033 !important;
}

body.theme-dark .code-pill,
body.theme-dark .badge,
body.theme-dark .pill,
body.theme-dark .status-pill,
body.theme-dark .tag,
body.theme-dark .field-unit-hint {
    background: #1e293b !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}

body.theme-dark .btn.secondary,
body.theme-dark .btn.ghost,
body.theme-dark a.btn.secondary,
body.theme-dark a.btn.ghost {
    background: #1e293b !important;
    color: #bfdbfe !important;
    border: 1px solid #334155 !important;
    box-shadow: none !important;
}

body.theme-dark .btn.secondary:hover,
body.theme-dark .btn.ghost:hover {
    background: #26344a !important;
    color: #ffffff !important;
}

body.theme-dark .qr-label-preview,
body.theme-dark .qr-preview,
body.theme-dark .qr-card-preview,
body.theme-dark .print-label,
body.theme-dark .label-card,
body.theme-dark .print-sheet,
body.theme-dark .print-sheet .label,
body.theme-dark canvas,
body.theme-dark .qr-box {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #111827 !important;
    border-color: #111827 !important;
}

/* System preference can be selected in profile, but the top toggle only switches light/dark. */
@media (max-width: 900px) {
    .topbar-inner {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 12px;
    }

    .main-nav {
        order: 3;
        width: 100%;
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .topbar-actions {
        margin-left: auto;
    }

    .profile-label {
        display: none;
    }
}


/* --- Stable Beta 0.4 sun/moon theme toggle positioning --- */

.topbar-inner {
    display: flex !important;
    align-items: center !important;
}

.main-nav {
    justify-content: flex-start;
}

.topbar-actions {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.theme-toggle-form {
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}

.theme-toggle {
    width: 66px !important;
    height: 36px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 999px !important;
    background: #e0f2fe !important;
    position: relative !important;
    cursor: pointer !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

.theme-icon {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1 !important;
    font-size: 15px !important;
    line-height: 1 !important;
    pointer-events: none !important;
}

.theme-icon-sun {
    left: 10px !important;
    color: #f59e0b !important;
    opacity: 1 !important;
}

.theme-icon-moon {
    right: 11px !important;
    color: #64748b !important;
    opacity: .55 !important;
}

.theme-toggle-knob {
    position: absolute !important;
    left: 3px !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    box-shadow: 0 3px 10px rgba(15,23,42,.22) !important;
    transition: transform .16s ease, background .16s ease !important;
    z-index: 2 !important;
}

.theme-toggle.is-dark {
    background: #172554 !important;
    border-color: #2563eb !important;
}

.theme-toggle.is-dark .theme-toggle-knob {
    transform: translateX(30px) !important;
    background: #0f172a !important;
}

.theme-toggle.is-dark .theme-icon-sun {
    opacity: .45 !important;
    color: #94a3b8 !important;
}

.theme-toggle.is-dark .theme-icon-moon {
    opacity: 1 !important;
    color: #dbeafe !important;
}

body.theme-dark .theme-toggle {
    background: #172554 !important;
    border-color: #2563eb !important;
}

@media (max-width: 900px) {
    .topbar-actions {
        margin-left: auto !important;
    }
}


/* --- Stable Beta 0.4 dark mode button/pill fix --- */

/* General white button fix in dark mode */
body.theme-dark button,
body.theme-dark input[type="submit"],
body.theme-dark input[type="button"],
body.theme-dark .btn,
body.theme-dark a.btn {
    border-color: #334155;
}

body.theme-dark .btn:not(.danger):not(.primary),
body.theme-dark a.btn:not(.danger):not(.primary),
body.theme-dark button.btn:not(.danger):not(.primary) {
    background: #1e293b !important;
    color: #dbeafe !important;
    border: 1px solid #334155 !important;
    box-shadow: none !important;
}

body.theme-dark .btn:not(.danger):not(.primary):hover,
body.theme-dark a.btn:not(.danger):not(.primary):hover,
body.theme-dark button.btn:not(.danger):not(.primary):hover {
    background: #26344a !important;
    color: #ffffff !important;
}

/* Keep main action buttons blue */
body.theme-dark .btn:first-child,
body.theme-dark .btn.primary,
body.theme-dark button.btn.primary,
body.theme-dark a.btn.primary {
    background: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
}

/* Delete/danger buttons were showing white. */
body.theme-dark .btn.danger,
body.theme-dark a.btn.danger,
body.theme-dark button.btn.danger,
body.theme-dark .danger,
body.theme-dark a[href*="delete.php"],
body.theme-dark button[name*="delete"],
body.theme-dark button[value*="delete"],
body.theme-dark button[value*="clear_reserved"],
body.theme-dark .delete-button,
body.theme-dark .clear-button {
    background: #3f1d1d !important;
    color: #fecaca !important;
    border: 1px solid #7f1d1d !important;
    box-shadow: none !important;
}

body.theme-dark .btn.danger:hover,
body.theme-dark a.btn.danger:hover,
body.theme-dark button.btn.danger:hover,
body.theme-dark .danger:hover,
body.theme-dark a[href*="delete.php"]:hover,
body.theme-dark button[name*="delete"]:hover,
body.theme-dark button[value*="delete"]:hover,
body.theme-dark button[value*="clear_reserved"]:hover,
body.theme-dark .delete-button:hover,
body.theme-dark .clear-button:hover {
    background: #7f1d1d !important;
    color: #ffffff !important;
}

/* Some pages use plain anchors styled as buttons without btn classes. */
body.theme-dark .row-actions a,
body.theme-dark .table-actions-cell a,
body.theme-dark .actions a,
body.theme-dark .actions button {
    border-color: #334155;
}

body.theme-dark .row-actions a:not(.danger):not([href*="delete.php"]),
body.theme-dark .table-actions-cell a:not(.danger):not([href*="delete.php"]) {
    background: #1e293b !important;
    color: #dbeafe !important;
    border: 1px solid #334155 !important;
}

body.theme-dark .row-actions a:not(.danger):not([href*="delete.php"]):hover,
body.theme-dark .table-actions-cell a:not(.danger):not([href*="delete.php"]):hover {
    background: #26344a !important;
    color: #ffffff !important;
}

/* Code pills were still too pale in some table cells. */
body.theme-dark .code-pill,
body.theme-dark td .code-pill,
body.theme-dark .qr-code-pill,
body.theme-dark .item-id-pill {
    background: #1e293b !important;
    color: #e2e8f0 !important;
    border: 1px solid #334155 !important;
}

/* Search filter detail summary was still white on some browsers. */
body.theme-dark details,
body.theme-dark details summary,
body.theme-dark details.card,
body.theme-dark details.card summary {
    background: #111827 !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

/* Preserve white only where it must be white for QR/print. */
body.theme-dark .qr-label-preview,
body.theme-dark .qr-preview,
body.theme-dark .qr-card-preview,
body.theme-dark .print-label,
body.theme-dark .label-card,
body.theme-dark .print-sheet,
body.theme-dark .print-sheet .label,
body.theme-dark canvas,
body.theme-dark .qr-box {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #111827 !important;
    border-color: #111827 !important;
}

/* Same button fixes for system theme when OS is dark. */
@media (prefers-color-scheme: dark) {
    body.theme-system .btn:not(.danger):not(.primary),
    body.theme-system a.btn:not(.danger):not(.primary),
    body.theme-system button.btn:not(.danger):not(.primary) {
        background: #1e293b !important;
        color: #dbeafe !important;
        border: 1px solid #334155 !important;
        box-shadow: none !important;
    }

    body.theme-system .btn.danger,
    body.theme-system a.btn.danger,
    body.theme-system button.btn.danger,
    body.theme-system .danger,
    body.theme-system a[href*="delete.php"],
    body.theme-system button[name*="delete"],
    body.theme-system button[value*="delete"],
    body.theme-system button[value*="clear_reserved"],
    body.theme-system .delete-button,
    body.theme-system .clear-button {
        background: #3f1d1d !important;
        color: #fecaca !important;
        border: 1px solid #7f1d1d !important;
        box-shadow: none !important;
    }

    body.theme-system .code-pill,
    body.theme-system td .code-pill,
    body.theme-system .qr-code-pill,
    body.theme-system .item-id-pill {
        background: #1e293b !important;
        color: #e2e8f0 !important;
        border: 1px solid #334155 !important;
    }

    body.theme-system details,
    body.theme-system details summary,
    body.theme-system details.card,
    body.theme-system details.card summary {
        background: #111827 !important;
        color: #f8fafc !important;
        border-color: #334155 !important;
    }
}


/* --- Stable Beta 0.4 dark cleanup: toggle, white panels, buttons --- */

/* Hide old/broken theme toggle visuals if old CSS is still cached on a page. */
.theme-toggle,
.theme-toggle-form,
.theme-icon,
.theme-option,
.theme-toggle-bulb {
    display: none !important;
}

/* Clean topbar layout */
.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,255,255,.94);
    border-bottom: 1px solid #d8e0ee;
    backdrop-filter: blur(14px);
}

.topbar-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    gap: 22px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #0f172a;
    flex: 0 0 auto;
}

.brand:hover {
    text-decoration: none;
}

.brand-name {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1;
}

.beta-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 19px;
    padding: 0 7px;
    border: 1px solid #b8c7e6;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    white-space: nowrap;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 auto;
    min-width: 0;
}

.main-nav a {
    color: #335075;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
}

.main-nav a:hover {
    color: #2563eb;
    text-decoration: none;
}

.topbar-actions {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex: 0 0 auto;
}

.scan-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 16px;
    border-radius: 12px;
    background: #111827;
    color: #ffffff !important;
    text-decoration: none;
    font-weight: 800;
    font-size: 14px;
    box-shadow: 0 10px 24px rgba(17,24,39,.18);
}

.scan-button:hover {
    text-decoration: none;
}

.scan-icon {
    font-size: 15px;
    line-height: 1;
}

.profile-menu {
    position: relative;
}

.profile-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 4px 8px 4px 4px;
    border: 1px solid #d8e0ee;
    border-radius: 999px;
    background: #ffffff;
    color: #0f172a;
    text-decoration: none;
    font-weight: 800;
    cursor: pointer;
    max-width: 260px;
}

.profile-avatar {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    border: 1px solid #c9d7f2;
    overflow: hidden;
    flex: 0 0 auto;
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-label {
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.profile-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 280px;
    border: 1px solid #d8e0ee;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(15,23,42,.16);
    padding: 10px;
    display: none;
}

.profile-menu:hover .profile-dropdown,
.profile-menu:focus-within .profile-dropdown {
    display: block;
}

.profile-dropdown-header {
    padding: 10px;
    border-bottom: 1px solid #edf2f7;
    margin-bottom: 8px;
}

.profile-dropdown-header strong,
.profile-dropdown-header span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-dropdown-header span {
    color: #64748b;
    font-size: 13px;
    margin-top: 2px;
}

.profile-dropdown a {
    display: block;
    padding: 10px;
    border-radius: 12px;
    color: #334155;
    text-decoration: none;
    font-weight: 800;
}

.profile-dropdown a:hover {
    background: #f1f5f9;
    color: #0f172a;
    text-decoration: none;
}

/* New independent sun/moon switch */
.mode-switch-form {
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}

.mode-switch {
    width: 72px !important;
    height: 38px !important;
    border-radius: 999px !important;
    border: 1px solid #cbd5e1 !important;
    background: #e0f2fe !important;
    position: relative !important;
    cursor: pointer !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: inline-flex !important;
    align-items: center !important;
    box-shadow: none !important;
}

.mode-track-icon {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    pointer-events: none !important;
}

.mode-track-sun {
    left: 11px !important;
    color: #f59e0b !important;
    opacity: .25 !important;
}

.mode-track-moon {
    right: 12px !important;
    color: #64748b !important;
    opacity: .35 !important;
}

.mode-knob {
    position: absolute !important;
    left: 3px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #f59e0b !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    box-shadow: 0 3px 10px rgba(15,23,42,.22) !important;
    transition: transform .16s ease, background .16s ease, color .16s ease !important;
    z-index: 2 !important;
}

.mode-switch.mode-dark {
    background: #172554 !important;
    border-color: #2563eb !important;
}

.mode-switch.mode-dark .mode-knob {
    transform: translateX(34px) !important;
    background: #0f172a !important;
    color: #dbeafe !important;
}

.mode-switch.mode-dark .mode-track-sun {
    color: #94a3b8 !important;
    opacity: .35 !important;
}

.mode-switch.mode-dark .mode-track-moon {
    opacity: .22 !important;
}

/* Dark theme core */
body.theme-dark {
    --bg:#0b1220;
    --bg2:#0f172a;
    --card:#111827;
    --text:#f8fafc;
    --muted:#a8b6ca;
    --line:#334155;
    --blue2:#172554;
    background:#0b1220 !important;
    color:#f8fafc !important;
    color-scheme: dark;
}

body.theme-dark .topbar {
    background: rgba(15,23,42,.96) !important;
    border-bottom-color: #334155 !important;
}

body.theme-dark .brand,
body.theme-dark .brand-name,
body.theme-dark .profile-label {
    color:#f8fafc !important;
}

body.theme-dark .beta-badge {
    background:#172554 !important;
    border-color:#2563eb !important;
    color:#bfdbfe !important;
}

body.theme-dark .main-nav a {
    color:#cbd5e1 !important;
}

body.theme-dark .main-nav a:hover {
    background:#1e293b !important;
    color:#ffffff !important;
}

body.theme-dark .scan-button {
    background:#2563eb !important;
    color:#ffffff !important;
}

body.theme-dark .profile-trigger,
body.theme-dark .profile-dropdown {
    background:#111827 !important;
    border-color:#334155 !important;
    color:#f8fafc !important;
}

body.theme-dark .profile-dropdown-header {
    border-bottom-color:#334155 !important;
}

body.theme-dark .profile-dropdown-header span {
    color:#94a3b8 !important;
}

body.theme-dark .profile-dropdown a {
    color:#cbd5e1 !important;
}

body.theme-dark .profile-dropdown a:hover {
    background:#1e293b !important;
    color:#ffffff !important;
}

/* Kill the stubborn white panels seen in Items/Add Item/Templates/Made QR codes */
body.theme-dark .card,
body.theme-dark section.card,
body.theme-dark form.card,
body.theme-dark details.card,
body.theme-dark .table-wrap,
body.theme-dark .items-filter-panel,
body.theme-dark .items-filter-panel[open],
body.theme-dark .items-filter-panel summary,
body.theme-dark .field-as-card,
body.theme-dark .field-as-card.template-create-card,
body.theme-dark .template-fields-panel,
body.theme-dark .template-field-builder,
body.theme-dark .template-share-card,
body.theme-dark .template-preset,
body.theme-dark .template-field-row,
body.theme-dark .template-field-row-main,
body.theme-dark .template-field-row-extra,
body.theme-dark .template-options-wrap,
body.theme-dark .template-required,
body.theme-dark .template-create-card,
body.theme-dark .location-summary,
body.theme-dark .scanner-box,
body.theme-dark .notice:not(.print-label):not(.label-card),
body.theme-dark .alert,
body.theme-dark .stat-card,
body.theme-dark .metric-card {
    background:#111827 !important;
    background-color:#111827 !important;
    color:#f8fafc !important;
    border-color:#334155 !important;
    box-shadow:0 18px 45px rgba(0,0,0,.22) !important;
}

body.theme-dark .hero .card:first-child {
    background:linear-gradient(135deg,#111827 0%,#172033 100%) !important;
}

body.theme-dark .items-filter-panel *,
body.theme-dark .template-field-builder *,
body.theme-dark .template-share-card *,
body.theme-dark .template-preset *,
body.theme-dark .field-as-card *,
body.theme-dark .template-fields-panel *,
body.theme-dark .card *,
body.theme-dark .table-wrap * {
    color: inherit;
}

body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark strong,
body.theme-dark label,
body.theme-dark th,
body.theme-dark td,
body.theme-dark summary,
body.theme-dark .section-head,
body.theme-dark .page-head {
    color:#f8fafc !important;
}

body.theme-dark .muted,
body.theme-dark .help,
body.theme-dark .hint,
body.theme-dark small,
body.theme-dark .template-help,
body.theme-dark .template-field-hint,
body.theme-dark .site-footer,
body.theme-dark .items-filter-grid label {
    color:#a8b6ca !important;
}

body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea,
body.theme-dark .items-search-row input,
body.theme-dark .items-filter-grid select,
body.theme-dark .template-field-row input,
body.theme-dark .template-field-row select {
    background:#0f172a !important;
    border-color:#334155 !important;
    color:#f8fafc !important;
}

body.theme-dark input::placeholder,
body.theme-dark textarea::placeholder {
    color:#74839a !important;
}

body.theme-dark table,
body.theme-dark tbody,
body.theme-dark tr {
    background:#111827 !important;
    color:#f8fafc !important;
}

body.theme-dark thead,
body.theme-dark th {
    background:#0f172a !important;
    color:#cbd5e1 !important;
}

body.theme-dark td {
    background:#111827 !important;
    color:#e5edf8 !important;
    border-color:#334155 !important;
}

body.theme-dark tr:hover td {
    background:#172033 !important;
}

body.theme-dark .code-pill,
body.theme-dark td .code-pill,
body.theme-dark .qr-code-pill,
body.theme-dark .item-id-pill,
body.theme-dark .badge,
body.theme-dark .pill,
body.theme-dark .status-pill,
body.theme-dark .tag,
body.theme-dark .field-unit-hint {
    background:#1e293b !important;
    color:#e2e8f0 !important;
    border:1px solid #334155 !important;
}

/* Buttons, including delete buttons that were staying white */
body.theme-dark .btn,
body.theme-dark a.btn,
body.theme-dark button.btn,
body.theme-dark .row-actions a,
body.theme-dark .table-actions-cell a,
body.theme-dark .actions a,
body.theme-dark .actions button {
    background:#1e293b !important;
    color:#dbeafe !important;
    border:1px solid #334155 !important;
    box-shadow:none !important;
}

body.theme-dark .btn:hover,
body.theme-dark a.btn:hover,
body.theme-dark button.btn:hover,
body.theme-dark .row-actions a:hover,
body.theme-dark .table-actions-cell a:hover,
body.theme-dark .actions a:hover,
body.theme-dark .actions button:hover {
    background:#26344a !important;
    color:#ffffff !important;
}

body.theme-dark .btn.danger,
body.theme-dark a.btn.danger,
body.theme-dark button.btn.danger,
body.theme-dark a[href*="delete.php"],
body.theme-dark button[name*="delete"],
body.theme-dark button[value*="delete"],
body.theme-dark button[value*="clear_reserved"],
body.theme-dark .delete-button,
body.theme-dark .clear-button {
    background:#3f1d1d !important;
    color:#fecaca !important;
    border:1px solid #7f1d1d !important;
}

body.theme-dark .btn.danger:hover,
body.theme-dark a.btn.danger:hover,
body.theme-dark button.btn.danger:hover,
body.theme-dark a[href*="delete.php"]:hover,
body.theme-dark button[name*="delete"]:hover,
body.theme-dark button[value*="delete"]:hover,
body.theme-dark button[value*="clear_reserved"]:hover {
    background:#7f1d1d !important;
    color:#ffffff !important;
}

/* Primary actions stay blue */
body.theme-dark .btn.primary,
body.theme-dark a.btn.primary,
body.theme-dark .actions > .btn:first-child:not(.danger),
body.theme-dark .page-head .btn:last-child:not(.danger) {
    background:#2563eb !important;
    color:#ffffff !important;
    border-color:#2563eb !important;
}

/* QR and print surfaces stay white deliberately */
body.theme-dark .qr-label-preview,
body.theme-dark .qr-preview,
body.theme-dark .qr-card-preview,
body.theme-dark .print-label,
body.theme-dark .label-card,
body.theme-dark .print-sheet,
body.theme-dark .print-sheet .label,
body.theme-dark canvas,
body.theme-dark .qr-box {
    background:#ffffff !important;
    background-color:#ffffff !important;
    color:#111827 !important;
    border-color:#111827 !important;
}

@media (max-width:900px) {
    .topbar-inner {
        align-items:flex-start;
        flex-wrap:wrap;
        gap:12px;
    }

    .main-nav {
        order:3;
        width:100%;
        overflow-x:auto;
        padding-bottom:4px;
    }

    .topbar-actions {
        margin-left:auto !important;
    }

    .profile-label {
        display:none;
    }
}


/* --- Stable Beta 0.4 profile dropdown hover bridge + demo link polish --- */

.profile-menu {
    position: relative !important;
}

.profile-dropdown {
    top: calc(100% + 6px) !important;
    right: 0 !important;
}

/* Invisible bridge stops the dropdown disappearing while moving from profile button to menu. */
.profile-menu::after {
    content: '' !important;
    position: absolute !important;
    left: -12px !important;
    right: -12px !important;
    top: 100% !important;
    height: 14px !important;
    display: block !important;
    background: transparent !important;
    pointer-events: auto !important;
}

.profile-menu:hover .profile-dropdown,
.profile-menu:focus-within .profile-dropdown,
.profile-dropdown:hover {
    display: block !important;
}

.auth-extra-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.demo-page {
    display: grid;
    gap: 22px;
}

.demo-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, .9fr);
    gap: 18px;
    align-items: stretch;
}

.demo-card-stack {
    display: grid;
    gap: 14px;
}

.demo-steps {
    counter-reset: demoStep;
    display: grid;
    gap: 12px;
}

.demo-step {
    counter-increment: demoStep;
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 12px;
    align-items: start;
    padding: 14px;
    border: 1px solid var(--line, #d8e0ee);
    border-radius: 16px;
    background: var(--card, #fff);
}

.demo-step::before {
    content: counter(demoStep);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #2563eb;
    color: #fff;
    font-weight: 900;
}

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

.demo-mini {
    border: 1px solid var(--line, #d8e0ee);
    border-radius: 18px;
    background: var(--card, #fff);
    padding: 18px;
}

.demo-mini h3 {
    margin-top: 0;
}

.demo-fake-table {
    display: grid;
    gap: 8px;
}

.demo-fake-row {
    display: grid;
    grid-template-columns: 90px 1fr 100px;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--line, #d8e0ee);
    border-radius: 12px;
    align-items: center;
}

.demo-fake-qr {
    width: 54px;
    height: 54px;
    border-radius: 10px;
    background:
        linear-gradient(90deg, #111 10px, transparent 10px) 0 0/18px 18px,
        linear-gradient(#111 10px, transparent 10px) 0 0/18px 18px,
        #fff;
    border: 8px solid #fff;
    box-shadow: 0 0 0 1px #d8e0ee;
}

body.theme-dark .demo-step,
body.theme-dark .demo-mini,
body.theme-dark .demo-fake-row {
    background: #111827 !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

body.theme-dark .demo-fake-qr {
    background:
        linear-gradient(90deg, #111 10px, transparent 10px) 0 0/18px 18px,
        linear-gradient(#111 10px, transparent 10px) 0 0/18px 18px,
        #fff !important;
    border-color: #fff !important;
}

@media (max-width: 900px) {
    .demo-hero,
    .demo-grid {
        grid-template-columns: 1fr;
    }
}


/* --- Stable Beta 0.4 public demo dashboard + login required modal --- */

.public-demo-body {
    min-height: 100vh;
    background: linear-gradient(180deg, #f6f9ff 0%, #eef3fb 260px);
    color: #101828;
}

.public-demo-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,255,255,.94);
    border-bottom: 1px solid #d8e0ee;
    backdrop-filter: blur(14px);
}

.public-demo-topbar-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 18px;
}

.public-demo-nav {
    display: flex;
    gap: 14px;
    align-items: center;
    flex: 1 1 auto;
    overflow-x: auto;
}

.public-demo-nav a,
.public-demo-nav button {
    border: 0;
    background: transparent;
    color: #335075;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    padding: 8px 0;
}

.public-demo-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.demo-shell {
    max-width: 1240px;
    margin: 0 auto;
    padding: 34px 18px 60px;
}

.demo-disabled {
    cursor: pointer;
}

.demo-locked-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 900;
}

.demo-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, .48);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.demo-modal-backdrop.is-open {
    display: flex;
}

.demo-modal {
    width: min(520px, 100%);
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid #d8e0ee;
    box-shadow: 0 28px 80px rgba(15,23,42,.26);
    padding: 24px;
}

.demo-modal h2 {
    margin-top: 0;
}

.demo-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.demo-preview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, .9fr);
    gap: 18px;
    margin-bottom: 22px;
}

.demo-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}

.demo-metric {
    border: 1px solid #d8e0ee;
    background: #ffffff;
    border-radius: 18px;
    padding: 20px;
    text-decoration: none;
    color: #101828;
}

.demo-metric span {
    display: flex;
    justify-content: space-between;
    color: #667085;
}

.demo-metric span::after {
    content: '↗';
    color: #98a2b3;
    font-weight: 900;
}

.demo-metric strong {
    display: block;
    font-size: 34px;
    margin-top: 8px;
}

.demo-fake-table-card {
    overflow: hidden;
}

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

.demo-table th,
.demo-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #e4eaf3;
    text-align: left;
}

.demo-table th {
    color: #667085;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.demo-workflow-list {
    margin: 0;
    padding-left: 22px;
    color: #516173;
    line-height: 1.7;
}

.demo-qr-card {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
    padding: 14px;
    border: 1px solid #d8e0ee;
    border-radius: 18px;
    background: #f8fbff;
}

.demo-qr-box {
    width: 84px;
    height: 84px;
    border-radius: 12px;
    background:
        linear-gradient(90deg, #111 9px, transparent 9px) 0 0/18px 18px,
        linear-gradient(#111 9px, transparent 9px) 0 0/18px 18px,
        #fff;
    border: 10px solid #fff;
    box-shadow: 0 0 0 1px #d8e0ee;
    flex: 0 0 auto;
}

.demo-hint-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.demo-hint {
    border: 1px solid #d8e0ee;
    border-radius: 18px;
    padding: 18px;
    background: #ffffff;
}

.demo-hint h3 {
    margin-top: 0;
}

@media (max-width: 900px) {
    .demo-preview-grid,
    .demo-metrics,
    .demo-hint-row {
        grid-template-columns: 1fr;
    }

    .public-demo-topbar-inner {
        flex-wrap: wrap;
    }

    .public-demo-actions {
        margin-left: auto;
    }
}


/* --- Stable Beta 0.4 scrollable patch history --- */

.patch-history-scroll {
    max-height: 420px;
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid var(--line, #d8e0ee);
    border-radius: 16px;
}

.patch-history-scroll table {
    margin: 0;
}

.patch-history-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f8fbff;
}

.patch-history-scroll td,
.patch-history-scroll th {
    vertical-align: top;
}

.patch-history-note {
    margin-top: 10px;
    color: var(--muted, #667085);
    font-size: 13px;
}

body.theme-dark .patch-history-scroll {
    border-color: #334155 !important;
    background: #111827 !important;
}

body.theme-dark .patch-history-scroll thead th {
    background: #0f172a !important;
    color: #cbd5e1 !important;
}

body.theme-dark .patch-history-note {
    color: #a8b6ca !important;
}

.public-demo-body .patch-history-scroll {
    background: #ffffff;
}

@media (max-width: 700px) {
    .patch-history-scroll {
        max-height: 360px;
    }
}


/* --- Stable Beta 0.4 public pages with login-required modal --- */

.public-preview-note {
    border: 1px solid #b8c7e6;
    background: #eef4ff;
    color: #1d4ed8;
    border-radius: 16px;
    padding: 14px 16px;
    font-weight: 800;
    margin-bottom: 18px;
}

.public-preview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}

.public-preview-card,
.public-preview-table-card {
    border: 1px solid var(--line, #d8e0ee);
    background: var(--card, #fff);
    border-radius: 18px;
    padding: 20px;
}

.public-preview-card span {
    display: flex;
    justify-content: space-between;
    color: var(--muted, #667085);
}

.public-preview-card span::after {
    content: '↗';
    color: #98a2b3;
    font-weight: 900;
}

.public-preview-card strong {
    display: block;
    font-size: 34px;
    margin-top: 8px;
}

.public-login-required {
    cursor: pointer;
}

.demo-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, .48);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.demo-modal-backdrop.is-open {
    display: flex;
}

.demo-modal {
    width: min(520px, 100%);
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid #d8e0ee;
    box-shadow: 0 28px 80px rgba(15,23,42,.26);
    padding: 24px;
}

.demo-modal h2 {
    margin-top: 0;
}

.demo-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

body.theme-dark .public-preview-note {
    background: #172554 !important;
    border-color: #2563eb !important;
    color: #bfdbfe !important;
}

body.theme-dark .public-preview-card,
body.theme-dark .public-preview-table-card,
body.theme-dark .demo-modal {
    background: #111827 !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

body.theme-dark .public-preview-card span,
body.theme-dark .demo-modal .muted {
    color: #a8b6ca !important;
}

@media (max-width: 900px) {
    .public-preview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .public-preview-grid {
        grid-template-columns: 1fr;
    }
}


/* --- Stable Beta 0.4 public theme toggle --- */

body.theme-dark .public-preview-card,
body.theme-dark .public-preview-table-card,
body.theme-dark .public-preview-note,
body.theme-dark .demo-modal,
body.theme-dark .demo-table,
body.theme-dark .demo-table tbody,
body.theme-dark .demo-table tr {
    background: #111827 !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

body.theme-dark .public-preview-note {
    background: #172554 !important;
    color: #bfdbfe !important;
    border-color: #2563eb !important;
}

body.theme-dark .demo-table th {
    background: #0f172a !important;
    color: #cbd5e1 !important;
}

body.theme-dark .demo-table td {
    background: #111827 !important;
    color: #e5edf8 !important;
    border-color: #334155 !important;
}

body.theme-dark .public-demo-body {
    background: #0b1220 !important;
    color: #f8fafc !important;
}

body.theme-dark .public-demo-topbar {
    background: rgba(15,23,42,.96) !important;
    border-bottom-color: #334155 !important;
}

body.theme-dark .public-demo-nav a,
body.theme-dark .public-demo-nav button {
    color: #cbd5e1 !important;
}


/* --- Stable Beta 0.4 login dashboard button --- */

.auth-extra-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.auth-copy .auth-extra-actions {
    margin-top: 22px;
}

body.theme-dark .auth-extra-actions .btn.ghost,
body.theme-dark .auth-extra-actions .btn.secondary {
    background: #1e293b !important;
    color: #dbeafe !important;
    border-color: #334155 !important;
}


/* --- Stable Beta 0.4 login dashboard preview area --- */

.auth-preview-area {
    margin-top: 24px;
    padding: 18px;
    border: 1px solid #d8e0ee;
    border-radius: 18px;
    background: linear-gradient(135deg, #f8fbff 0%, #eef4ff 100%);
    display: grid;
    gap: 14px;
}

.auth-preview-area strong,
.auth-preview-area span {
    display: block;
}

.auth-preview-area strong {
    font-size: 15px;
    color: #101828;
}

.auth-preview-area span {
    margin-top: 4px;
    color: #516173;
    line-height: 1.5;
}

.auth-preview-area .preview-btn {
    width: fit-content;
}

.auth-preview-link {
    margin: 16px 0 0;
    color: #667085;
    font-size: 14px;
}

.auth-preview-link a {
    font-weight: 800;
}

body.theme-dark .auth-preview-area {
    background: linear-gradient(135deg, #111827 0%, #172554 100%) !important;
    border-color: #334155 !important;
}

body.theme-dark .auth-preview-area strong {
    color: #f8fafc !important;
}

body.theme-dark .auth-preview-area span,
body.theme-dark .auth-preview-link {
    color: #a8b6ca !important;
}

@media (max-width: 720px) {
    .auth-preview-area .preview-btn {
        width: 100%;
        justify-content: center;
    }
}


/* --- Stable Beta 0.4 top bar spacing polish --- */

/*
Keeps the main navigation on one clean row on desktop, with brand left and
actions right. It only switches to a wrapping/mobile layout when the viewport
is genuinely narrow.
*/

.topbar {
    min-height: 74px;
}

.topbar-inner {
    max-width: 1480px !important;
    width: 100%;
    padding: 14px 28px !important;
    gap: 26px !important;
    justify-content: flex-start;
}

.brand {
    margin-right: 10px;
}

.main-nav {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    column-gap: 24px !important;
    row-gap: 8px !important;
    min-width: 0 !important;
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
}

.main-nav::-webkit-scrollbar {
    display: none;
}

.main-nav a {
    padding: 8px 0;
    line-height: 1.1;
}

.topbar-actions {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 14px !important;
    flex: 0 0 auto !important;
}

.scan-button {
    gap: 7px;
    min-width: 74px;
}

.profile-trigger {
    max-width: 220px;
}

.mode-switch-form {
    flex: 0 0 auto;
}

@media (min-width: 1200px) {
    .topbar-inner {
        flex-wrap: nowrap !important;
    }

    .main-nav {
        flex-wrap: nowrap !important;
    }
}

@media (max-width: 1199px) {
    .topbar {
        min-height: auto;
    }

    .topbar-inner {
        align-items: flex-start !important;
        flex-wrap: wrap !important;
        gap: 12px 18px !important;
    }

    .main-nav {
        order: 3;
        width: 100%;
        flex-basis: 100% !important;
        padding-bottom: 4px;
        column-gap: 18px !important;
    }

    .topbar-actions {
        margin-left: auto !important;
    }
}

@media (max-width: 700px) {
    .topbar-inner {
        padding: 12px 16px !important;
    }

    .main-nav {
        column-gap: 16px !important;
    }

    .scan-button span:last-child {
        display: none;
    }

    .scan-button {
        min-width: 42px;
        padding-inline: 12px;
    }
}


/* --- Stable Beta 0.4 footer bottom placement --- */

/*
Keeps the footer at the bottom of the viewport on short pages,
without making it fixed or covering content.
*/

html,
body {
    min-height: 100%;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.topbar {
    flex: 0 0 auto;
}

.app-shell {
    flex: 1 0 auto;
    width: 100%;
}

.site-footer {
    flex: 0 0 auto;
    width: 100%;
    margin-top: auto !important;
    padding-top: 24px;
    padding-bottom: 28px;
}

.site-footer-inner,
.site-footer .footer-inner {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 700px) {
    .site-footer {
        padding-bottom: 22px;
    }
}


/* --- Stable Beta 0.4 mobile top bar cleanup --- */

/*
Mobile top bar:
- Brand and account controls stay in one compact row.
- Navigation becomes a horizontal scroll strip instead of wrapping into a tall block.
- Scan becomes an icon-only square on mobile.
- Profile name hides on mobile, leaving the avatar.
*/

@media (max-width: 760px) {
    .topbar {
        min-height: auto !important;
    }

    .topbar-inner {
        padding: 12px 14px 10px !important;
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        grid-template-areas:
            "brand spacer actions"
            "nav nav nav" !important;
        align-items: center !important;
        gap: 10px 12px !important;
        max-width: 100% !important;
    }

    .brand {
        grid-area: brand !important;
        margin: 0 !important;
        gap: 7px !important;
        min-width: 0 !important;
    }

    .brand-name {
        font-size: 22px !important;
        letter-spacing: -0.05em !important;
    }

    .beta-badge {
        height: 18px !important;
        padding: 0 7px !important;
        font-size: 9px !important;
    }

    .topbar-actions {
        grid-area: actions !important;
        margin-left: 0 !important;
        justify-self: end !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
    }

    .scan-button {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        padding: 0 !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .scan-button span:not(.scan-icon) {
        display: none !important;
    }

    .scan-icon {
        font-size: 17px !important;
    }

    .profile-trigger {
        width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 4px !important;
        border-radius: 999px !important;
        justify-content: center !important;
    }

    .profile-label {
        display: none !important;
    }

    .profile-avatar {
        width: 34px !important;
        height: 34px !important;
    }

    .mode-switch {
        width: 62px !important;
        height: 36px !important;
    }

    .mode-knob {
        width: 30px !important;
        height: 30px !important;
        font-size: 14px !important;
    }

    .mode-switch.mode-dark .mode-knob {
        transform: translateX(26px) !important;
    }

    .mode-track-sun {
        left: 9px !important;
    }

    .mode-track-moon {
        right: 10px !important;
    }

    .main-nav {
        grid-area: nav !important;
        order: unset !important;
        width: 100% !important;
        flex-basis: auto !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        column-gap: 8px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 2px 0 4px !important;
        margin: 0 !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap !important;
    }

    .main-nav::-webkit-scrollbar {
        display: none !important;
    }

    .main-nav a {
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        min-height: 34px !important;
        padding: 0 12px !important;
        border-radius: 999px !important;
        background: #eef4ff !important;
        color: #335075 !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        text-decoration: none !important;
    }

    .main-nav a:hover {
        background: #dbeafe !important;
        color: #1d4ed8 !important;
    }

    body.theme-dark .main-nav a {
        background: #1e293b !important;
        color: #cbd5e1 !important;
    }

    body.theme-dark .main-nav a:hover {
        background: #26344a !important;
        color: #ffffff !important;
    }

    .profile-dropdown {
        right: -74px !important;
        width: min(280px, calc(100vw - 28px)) !important;
    }

    .app-shell {
        padding-top: 22px !important;
    }
}

@media (max-width: 420px) {
    .topbar-inner {
        padding-left: 10px !important;
        padding-right: 10px !important;
        gap: 9px 8px !important;
    }

    .brand-name {
        font-size: 20px !important;
    }

    .beta-badge {
        font-size: 8px !important;
        padding: 0 6px !important;
    }

    .topbar-actions {
        gap: 6px !important;
    }

    .scan-button,
    .profile-trigger {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }

    .profile-avatar {
        width: 31px !important;
        height: 31px !important;
    }

    .mode-switch {
        width: 58px !important;
        height: 34px !important;
    }

    .mode-knob {
        width: 28px !important;
        height: 28px !important;
    }

    .mode-switch.mode-dark .mode-knob {
        transform: translateX(24px) !important;
    }

    .main-nav a {
        min-height: 32px !important;
        padding: 0 10px !important;
        font-size: 12px !important;
    }
}


/* --- Stable Beta 0.4 mobile burger navigation --- */

.mobile-menu-toggle {
    display: none;
}

@media (max-width: 760px) {
    .topbar-inner {
        grid-template-columns: auto auto 1fr auto !important;
        grid-template-areas: "brand menu spacer actions" !important;
    }

    .mobile-menu-toggle {
        grid-area: menu !important;
        display: inline-flex !important;
        width: 42px !important;
        height: 42px !important;
        border: 1px solid #d8e0ee !important;
        border-radius: 14px !important;
        background: #ffffff !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        gap: 4px !important;
        padding: 0 !important;
        cursor: pointer !important;
        box-shadow: none !important;
    }

    .mobile-menu-toggle span {
        width: 18px !important;
        height: 2px !important;
        border-radius: 999px !important;
        background: #101828 !important;
        display: block !important;
        transition: transform .16s ease, opacity .16s ease !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(1) {
        transform: translateY(6px) rotate(45deg) !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(2) {
        opacity: 0 !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg) !important;
    }

    .main-nav {
        grid-area: nav !important;
        display: none !important;
        width: 100% !important;
        padding: 10px !important;
        margin: 0 !important;
        border: 1px solid #d8e0ee !important;
        border-radius: 18px !important;
        background: #ffffff !important;
        box-shadow: 0 18px 45px rgba(15,23,42,.12) !important;
        overflow: visible !important;
        white-space: normal !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .main-nav.is-open {
        display: flex !important;
    }

    .main-nav a {
        min-height: 38px !important;
        padding: 0 13px !important;
        border-radius: 999px !important;
        background: #eef4ff !important;
        color: #335075 !important;
        font-size: 13px !important;
        font-weight: 800 !important;
    }

    body.theme-dark .mobile-menu-toggle {
        background: #111827 !important;
        border-color: #334155 !important;
    }

    body.theme-dark .mobile-menu-toggle span {
        background: #f8fafc !important;
    }

    body.theme-dark .main-nav {
        background: #111827 !important;
        border-color: #334155 !important;
        box-shadow: 0 18px 45px rgba(0,0,0,.22) !important;
    }

    body.theme-dark .main-nav a {
        background: #1e293b !important;
        color: #cbd5e1 !important;
    }

    body.theme-dark .main-nav a:hover {
        background: #26344a !important;
        color: #ffffff !important;
    }
}

@media (max-width: 420px) {
    .mobile-menu-toggle {
        width: 40px !important;
        height: 40px !important;
    }

    .topbar-inner {
        grid-template-columns: auto auto 1fr auto !important;
    }
}


/* --- Stable Beta 0.4 mobile burger force fix --- */

/*
The earlier mobile menu CSS was being overridden by older mobile nav rules.
This block sits at the end of the stylesheet and forcefully:
- shows the burger button
- hides the nav by default on mobile
- only shows the nav after JS adds .is-open
*/

@media (max-width: 760px) {
    .topbar-inner {
        display: grid !important;
        grid-template-columns: auto auto 1fr auto !important;
        grid-template-areas:
            "brand menu spacer actions"
            "nav nav nav nav" !important;
        align-items: center !important;
        gap: 10px 10px !important;
        padding: 12px 14px !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .brand {
        grid-area: brand !important;
        margin: 0 !important;
    }

    .mobile-menu-toggle {
        grid-area: menu !important;
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        border: 1px solid #d8e0ee !important;
        border-radius: 14px !important;
        background: #ffffff !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        gap: 4px !important;
        padding: 0 !important;
        margin: 0 !important;
        cursor: pointer !important;
        box-shadow: none !important;
        appearance: none !important;
        -webkit-appearance: none !important;
    }

    .mobile-menu-toggle span {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 18px !important;
        height: 2px !important;
        min-height: 2px !important;
        border-radius: 999px !important;
        background: #101828 !important;
        transform-origin: center !important;
        transition: transform .16s ease, opacity .16s ease !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(1) {
        transform: translateY(6px) rotate(45deg) !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(2) {
        opacity: 0 !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg) !important;
    }

    .topbar-actions {
        grid-area: actions !important;
        justify-self: end !important;
        margin-left: 0 !important;
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }

    .main-nav,
    .topbar .main-nav,
    header .main-nav {
        grid-area: nav !important;
        order: unset !important;
        width: 100% !important;
        flex-basis: 100% !important;
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .main-nav.is-open,
    .topbar .main-nav.is-open,
    header .main-nav.is-open {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        overflow: visible !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 10px !important;
        margin: 0 !important;
        border: 1px solid #d8e0ee !important;
        border-radius: 18px !important;
        background: #ffffff !important;
        box-shadow: 0 18px 45px rgba(15,23,42,.12) !important;
        white-space: normal !important;
    }

    .main-nav.is-open a {
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        min-height: 38px !important;
        padding: 0 13px !important;
        border-radius: 999px !important;
        background: #eef4ff !important;
        color: #335075 !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        text-decoration: none !important;
    }

    body.theme-dark .mobile-menu-toggle {
        background: #111827 !important;
        border-color: #334155 !important;
    }

    body.theme-dark .mobile-menu-toggle span {
        background: #f8fafc !important;
    }

    body.theme-dark .main-nav.is-open {
        background: #111827 !important;
        border-color: #334155 !important;
        box-shadow: 0 18px 45px rgba(0,0,0,.22) !important;
    }

    body.theme-dark .main-nav.is-open a {
        background: #1e293b !important;
        color: #cbd5e1 !important;
    }
}

@media (min-width: 761px) {
    .mobile-menu-toggle {
        display: none !important;
    }

    .main-nav {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
    }
}


/* --- Stable Beta 0.4 mobile bottom navigation --- */

/*
Mobile now uses a native-app style bottom nav:
Dashboard, Items, Locations, Folders, QR Labels, Scan.
The full desktop nav stays on desktop/tablet.
*/

.mobile-bottom-nav {
    display: none;
}

@media (max-width: 760px) {
    /* Keep mobile header compact and remove the large nav area. */
    .topbar-inner {
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        grid-template-areas: "brand spacer actions" !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 12px 14px !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .brand {
        grid-area: brand !important;
        margin: 0 !important;
    }

    .topbar-actions {
        grid-area: actions !important;
        justify-self: end !important;
        margin-left: 0 !important;
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }

    .main-nav,
    .topbar .main-nav,
    header .main-nav {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
    }

    .mobile-menu-toggle {
        display: none !important;
    }

    .scan-button {
        display: none !important;
    }

    .profile-trigger {
        width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        padding: 4px !important;
        border-radius: 999px !important;
        justify-content: center !important;
    }

    .profile-label {
        display: none !important;
    }

    .profile-avatar {
        width: 32px !important;
        height: 32px !important;
    }

    .mode-switch {
        width: 58px !important;
        height: 34px !important;
    }

    .mode-knob {
        width: 28px !important;
        height: 28px !important;
        font-size: 14px !important;
    }

    .mode-switch.mode-dark .mode-knob {
        transform: translateX(24px) !important;
    }

    .mobile-bottom-nav {
        position: fixed !important;
        left: 10px !important;
        right: 10px !important;
        bottom: calc(10px + env(safe-area-inset-bottom)) !important;
        z-index: 999 !important;
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 4px !important;
        padding: 8px !important;
        border: 1px solid rgba(216, 224, 238, .92) !important;
        border-radius: 24px !important;
        background: rgba(255, 255, 255, .94) !important;
        box-shadow: 0 18px 55px rgba(15, 23, 42, .22) !important;
        backdrop-filter: blur(18px) !important;
        -webkit-backdrop-filter: blur(18px) !important;
    }

    .mobile-bottom-link {
        min-width: 0 !important;
        min-height: 54px !important;
        border-radius: 18px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        text-decoration: none !important;
        color: #475467 !important;
        font-size: 10px !important;
        font-weight: 850 !important;
        line-height: 1 !important;
        letter-spacing: -0.01em !important;
        white-space: nowrap !important;
    }

    .mobile-bottom-icon {
        font-size: 18px !important;
        line-height: 1 !important;
        display: block !important;
    }

    .mobile-bottom-link:hover,
    .mobile-bottom-link:focus {
        background: #eef4ff !important;
        color: #1d4ed8 !important;
        text-decoration: none !important;
    }

    .mobile-bottom-scan {
        background: #2563eb !important;
        color: #ffffff !important;
        box-shadow: 0 10px 24px rgba(37, 99, 235, .28) !important;
    }

    .mobile-bottom-scan:hover,
    .mobile-bottom-scan:focus {
        background: #1d4ed8 !important;
        color: #ffffff !important;
    }

    .app-shell {
        padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
    }

    .site-footer {
        padding-bottom: calc(112px + env(safe-area-inset-bottom)) !important;
    }

    body.theme-dark .mobile-bottom-nav {
        background: rgba(15, 23, 42, .94) !important;
        border-color: #334155 !important;
        box-shadow: 0 18px 55px rgba(0, 0, 0, .36) !important;
    }

    body.theme-dark .mobile-bottom-link {
        color: #cbd5e1 !important;
    }

    body.theme-dark .mobile-bottom-link:hover,
    body.theme-dark .mobile-bottom-link:focus {
        background: #1e293b !important;
        color: #ffffff !important;
    }

    body.theme-dark .mobile-bottom-scan {
        background: #2563eb !important;
        color: #ffffff !important;
    }
}

@media (max-width: 390px) {
    .mobile-bottom-nav {
        left: 8px !important;
        right: 8px !important;
        padding: 6px !important;
        gap: 2px !important;
        border-radius: 22px !important;
    }

    .mobile-bottom-link {
        min-height: 50px !important;
        font-size: 9px !important;
        border-radius: 16px !important;
    }

    .mobile-bottom-icon {
        font-size: 17px !important;
    }
}


/* --- Stable Beta 0.4 mobile bottom nav overlay force fix --- */

/*
Strict behaviour:
- Hidden on desktop.
- Fixed overlay on mobile/coarse pointer devices.
- Stays pinned to viewport, not the bottom of the document.
*/

.mobile-bottom-nav {
    display: none !important;
}

/* Desktop and laptop safety: never show bottom nav on normal desktop widths. */
@media (min-width: 821px) and (hover: hover) and (pointer: fine) {
    .mobile-bottom-nav {
        display: none !important;
    }
}

/* Phones and narrow mobile layouts */
@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 1024px) {
    body {
        padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important;
    }

    .app-shell {
        padding-bottom: calc(112px + env(safe-area-inset-bottom)) !important;
    }

    .site-footer {
        padding-bottom: calc(122px + env(safe-area-inset-bottom)) !important;
    }

    .mobile-bottom-nav {
        position: fixed !important;
        inset-inline: 10px !important;
        left: 10px !important;
        right: 10px !important;
        bottom: calc(10px + env(safe-area-inset-bottom)) !important;
        top: auto !important;
        z-index: 2147483000 !important;
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 4px !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        min-height: 68px !important;
        margin: 0 !important;
        padding: 8px !important;
        border: 1px solid rgba(216, 224, 238, .94) !important;
        border-radius: 24px !important;
        background: rgba(255, 255, 255, .96) !important;
        box-shadow: 0 18px 55px rgba(15, 23, 42, .24) !important;
        backdrop-filter: blur(18px) !important;
        -webkit-backdrop-filter: blur(18px) !important;
        transform: translate3d(0, 0, 0) !important;
        will-change: transform !important;
        pointer-events: auto !important;
    }

    .mobile-bottom-link {
        min-width: 0 !important;
        min-height: 52px !important;
        border-radius: 18px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        text-decoration: none !important;
        color: #475467 !important;
        font-size: 10px !important;
        font-weight: 850 !important;
        line-height: 1 !important;
        letter-spacing: -0.01em !important;
        white-space: nowrap !important;
        overflow: hidden !important;
    }

    .mobile-bottom-icon {
        font-size: 18px !important;
        line-height: 1 !important;
        display: block !important;
    }

    .mobile-bottom-link:hover,
    .mobile-bottom-link:focus {
        background: #eef4ff !important;
        color: #1d4ed8 !important;
        text-decoration: none !important;
    }

    .mobile-bottom-scan {
        background: #2563eb !important;
        color: #ffffff !important;
        box-shadow: 0 10px 24px rgba(37, 99, 235, .28) !important;
    }

    .mobile-bottom-scan:hover,
    .mobile-bottom-scan:focus {
        background: #1d4ed8 !important;
        color: #ffffff !important;
    }

    body.theme-dark .mobile-bottom-nav {
        background: rgba(15, 23, 42, .96) !important;
        border-color: #334155 !important;
        box-shadow: 0 18px 55px rgba(0, 0, 0, .38) !important;
    }

    body.theme-dark .mobile-bottom-link {
        color: #cbd5e1 !important;
    }

    body.theme-dark .mobile-bottom-link:hover,
    body.theme-dark .mobile-bottom-link:focus {
        background: #1e293b !important;
        color: #ffffff !important;
    }

    body.theme-dark .mobile-bottom-scan {
        background: #2563eb !important;
        color: #ffffff !important;
    }
}

@media (max-width: 390px) {
    .mobile-bottom-nav {
        left: 8px !important;
        right: 8px !important;
        inset-inline: 8px !important;
        bottom: calc(8px + env(safe-area-inset-bottom)) !important;
        padding: 6px !important;
        gap: 2px !important;
        border-radius: 22px !important;
        min-height: 64px !important;
    }

    .mobile-bottom-link {
        min-height: 50px !important;
        font-size: 9px !important;
        border-radius: 16px !important;
    }

    .mobile-bottom-icon {
        font-size: 17px !important;
    }
}


/* --- Stable Beta 0.4 JS mobile bottom nav overlay fix --- */

/*
The mobile bottom nav is now created by JS at the end of <body>
and forced with inline fixed-position styles. CSS below handles fallback,
spacing, and hiding top navigation on mobile.
*/

.mobile-bottom-nav {
    display: none !important;
}

@media (min-width: 821px) {
    .mobile-bottom-nav,
    #mobileBottomNav {
        display: none !important;
    }
}

@media (max-width: 820px) {
    body.has-mobile-bottom-nav {
        padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
    }

    body.has-mobile-bottom-nav .app-shell {
        padding-bottom: calc(124px + env(safe-area-inset-bottom)) !important;
    }

    body.has-mobile-bottom-nav .site-footer {
        padding-bottom: calc(132px + env(safe-area-inset-bottom)) !important;
    }

    .topbar .main-nav,
    header .main-nav,
    .main-nav {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .scan-button {
        display: none !important;
    }

    #mobileBottomNav .mobile-bottom-link:hover,
    #mobileBottomNav .mobile-bottom-link:focus {
        background: #eef4ff !important;
        color: #1d4ed8 !important;
    }

    body.theme-dark #mobileBottomNav .mobile-bottom-link:hover,
    body.theme-dark #mobileBottomNav .mobile-bottom-link:focus {
        background: #1e293b !important;
        color: #ffffff !important;
    }
}

@media (max-width: 390px) {
    #mobileBottomNav {
        left: 8px !important;
        right: 8px !important;
        bottom: calc(8px + env(safe-area-inset-bottom)) !important;
        padding: 6px !important;
        gap: 4px !important;
    }

    #mobileBottomNav .mobile-bottom-link {
        min-height: 50px !important;
        font-size: 9px !important;
    }
}


/* --- Stable Beta 0.4 mobile bottom nav: add Scan + remove top mobile nav --- */

/*
Mobile bottom nav now contains:
Dashboard, Items, Locations, Folders, Scan.
Top navigation and top Scan remain hidden on mobile.
*/

@media (max-width: 820px) {
    .topbar .main-nav,
    header .main-nav,
    .main-nav,
    .scan-button {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
    }

    #mobileBottomNav,
    .mobile-bottom-nav {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }

    #mobileBottomNav .mobile-bottom-scan,
    .mobile-bottom-nav .mobile-bottom-scan {
        background: #2563eb !important;
        color: #ffffff !important;
        box-shadow: 0 10px 24px rgba(37, 99, 235, .28) !important;
    }

    #mobileBottomNav .mobile-bottom-scan:hover,
    #mobileBottomNav .mobile-bottom-scan:focus,
    .mobile-bottom-nav .mobile-bottom-scan:hover,
    .mobile-bottom-nav .mobile-bottom-scan:focus {
        background: #1d4ed8 !important;
        color: #ffffff !important;
    }
}

@media (max-width: 390px) {
    #mobileBottomNav .mobile-bottom-link {
        font-size: 8.5px !important;
    }

    #mobileBottomNav .mobile-bottom-icon {
        font-size: 17px !important;
    }
}


/* --- Stable Beta 0.4 force hide top mobile nav --- */

/*
Hard stop: on mobile the header must only show brand/account/theme controls.
Dashboard/Items/Locations/Folders/Scan must not appear in the top bar.
They live in the bottom overlay nav instead.
*/

@media screen and (max-width: 820px) {
    header nav.main-nav,
    .topbar nav.main-nav,
    .topbar .main-nav,
    header .main-nav,
    body .main-nav {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        left: -99999px !important;
        top: -99999px !important;
        width: 0 !important;
        max-width: 0 !important;
        height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        transform: none !important;
    }

    header .scan-button,
    .topbar .scan-button,
    body .topbar .scan-button {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        left: -99999px !important;
        top: -99999px !important;
        width: 0 !important;
        max-width: 0 !important;
        min-width: 0 !important;
        height: 0 !important;
        max-height: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
    }

    .topbar-inner {
        grid-template-areas: "brand spacer actions" !important;
        grid-template-columns: auto 1fr auto !important;
    }
}

@media screen and (min-width: 821px) {
    header nav.main-nav,
    .topbar nav.main-nav,
    .topbar .main-nav {
        position: static !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
}


/* --- Stable Beta 0.4 mobile More burger menu --- */

/*
Bottom mobile nav keeps the primary actions:
Dashboard, Items, Locations, Folders, Scan.
The header burger now holds the remaining pages.
*/

.mobile-more-toggle,
.mobile-more-menu {
    display: none;
}

@media screen and (max-width: 820px) {
    .topbar-inner {
        display: grid !important;
        grid-template-columns: auto auto 1fr auto !important;
        grid-template-areas: "brand more spacer actions" !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 12px 14px !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .mobile-more-toggle {
        grid-area: more !important;
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        border: 1px solid #d8e0ee !important;
        border-radius: 14px !important;
        background: #ffffff !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        gap: 4px !important;
        padding: 0 !important;
        margin: 0 !important;
        cursor: pointer !important;
        box-shadow: none !important;
        appearance: none !important;
        -webkit-appearance: none !important;
    }

    .mobile-more-toggle span {
        width: 18px !important;
        height: 2px !important;
        min-height: 2px !important;
        display: block !important;
        border-radius: 999px !important;
        background: #101828 !important;
        transition: transform .16s ease, opacity .16s ease !important;
    }

    .mobile-more-toggle.is-open span:nth-child(1) {
        transform: translateY(6px) rotate(45deg) !important;
    }

    .mobile-more-toggle.is-open span:nth-child(2) {
        opacity: 0 !important;
    }

    .mobile-more-toggle.is-open span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg) !important;
    }

    .mobile-more-menu {
        position: fixed !important;
        inset: 0 !important;
        z-index: 2147483600 !important;
        display: none !important;
        padding: 74px 12px calc(104px + env(safe-area-inset-bottom)) !important;
        background: rgba(15, 23, 42, .18) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
    }

    .mobile-more-menu.is-open {
        display: block !important;
    }

    .mobile-more-panel {
        width: min(420px, 100%) !important;
        margin: 0 auto !important;
        padding: 14px !important;
        border-radius: 24px !important;
        border: 1px solid #d8e0ee !important;
        background: rgba(255,255,255,.98) !important;
        box-shadow: 0 22px 65px rgba(15,23,42,.24) !important;
    }

    .mobile-more-head {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        margin-bottom: 12px !important;
    }

    .mobile-more-head strong {
        color: #101828 !important;
        font-size: 16px !important;
        font-weight: 900 !important;
    }

    .mobile-more-close {
        width: 38px !important;
        height: 38px !important;
        border-radius: 999px !important;
        border: 1px solid #d8e0ee !important;
        background: #ffffff !important;
        color: #101828 !important;
        font-size: 24px !important;
        line-height: 1 !important;
        cursor: pointer !important;
    }

    .mobile-more-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .mobile-more-grid a {
        display: flex !important;
        align-items: center !important;
        min-height: 46px !important;
        padding: 0 14px !important;
        border-radius: 16px !important;
        background: #eef4ff !important;
        color: #335075 !important;
        font-size: 14px !important;
        font-weight: 850 !important;
        text-decoration: none !important;
    }

    .mobile-more-grid a:hover,
    .mobile-more-grid a:focus {
        background: #dbeafe !important;
        color: #1d4ed8 !important;
        text-decoration: none !important;
    }

    body.theme-dark .mobile-more-toggle {
        background: #111827 !important;
        border-color: #334155 !important;
    }

    body.theme-dark .mobile-more-toggle span {
        background: #f8fafc !important;
    }

    body.theme-dark .mobile-more-menu {
        background: rgba(0, 0, 0, .28) !important;
    }

    body.theme-dark .mobile-more-panel {
        background: rgba(15,23,42,.98) !important;
        border-color: #334155 !important;
        box-shadow: 0 22px 65px rgba(0,0,0,.42) !important;
    }

    body.theme-dark .mobile-more-head strong {
        color: #f8fafc !important;
    }

    body.theme-dark .mobile-more-close {
        background: #111827 !important;
        border-color: #334155 !important;
        color: #f8fafc !important;
    }

    body.theme-dark .mobile-more-grid a {
        background: #1e293b !important;
        color: #cbd5e1 !important;
    }

    body.theme-dark .mobile-more-grid a:hover,
    body.theme-dark .mobile-more-grid a:focus {
        background: #26344a !important;
        color: #ffffff !important;
    }
}

@media screen and (min-width: 821px) {
    .mobile-more-toggle,
    .mobile-more-menu {
        display: none !important;
    }
}


/* --- Stable Beta 0.4 mobile More arrow repair --- */

/*
Repair version:
- Restores the last known working mobile More menu files.
- Keeps the same working menu JS and panel.
- Uses a text dropdown trigger instead of changing the menu structure.
*/

@media screen and (max-width: 820px) {
    .mobile-more-toggle {
        width: auto !important;
        min-width: 74px !important;
        height: 42px !important;
        min-height: 42px !important;
        padding: 0 12px !important;
        flex-direction: row !important;
        gap: 0 !important;
        font: inherit !important;
    }

    .mobile-more-toggle .mobile-more-arrow-icon {
        display: block !important;
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        background: transparent !important;
        color: #101828 !important;
        font-size: 13px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        letter-spacing: -0.01em !important;
        transform: none !important;
        transition: transform .16s ease !important;
        white-space: nowrap !important;
    }

    .mobile-more-toggle .mobile-more-hidden-line {
        display: none !important;
    }

    .mobile-more-toggle.is-open .mobile-more-arrow-icon {
        transform: none !important;
    }

    body.theme-dark .mobile-more-toggle .mobile-more-arrow-icon {
        background: transparent !important;
        color: #f8fafc !important;
    }
}


/* --- Stable Beta 0.4 combined QR navigation --- */

/*
QR Labels and Made QR codes now appear as one navigation item: QR Codes.
The separate page can still exist internally, but the main nav is cleaner.
*/



/* --- Stable Beta 0.4 Registered QR codes safe repair --- */

/*
Safe repair after the previous label patch:
- Restores the last styled CSS file.
- Removes the old mobile " / labels" suffix.
*/

.mobile-more-grid a[href="qr-labels.php"]::after {
    content: "" !important;
    display: none !important;
}


/* --- Stable Beta 0.4 registered QR page labels --- */

/*
User-facing QR wording is now Registered QR codes.
The underlying filenames stay the same so old links keep working.
*/


/* --- Stable Beta 0.4 registered QR duplicate label fix --- */

/*
Fix is mostly PHP text cleanup.
QR Labels remains the label generator.
Registered QR codes remains the registry/list page.
*/


/* --- Stable Beta 0.4 Registered QR codes layout polish --- */

/*
Registered QR codes page layout:
- Better hero/header balance.
- Summary stats become proper cards.
- Search/management sections align better.
- Mobile remains stacked and readable.
*/

.qr-registry-page {
    max-width: 1240px !important;
    margin: 0 auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

.qr-registry-page > .page-head,
.qr-registry-page .page-head,
.qr-registry-page > header:first-child {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 18px !important;
    align-items: start !important;
    margin-bottom: 22px !important;
}

.qr-registry-page h1 {
    margin-bottom: 8px !important;
}

.qr-registry-page h1 + .muted,
.qr-registry-page h1 + p {
    max-width: 720px !important;
    line-height: 1.55 !important;
}

/* The small count links under the header */
.qr-registry-page h1 ~ p a,
.qr-registry-page > p a {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 38px !important;
    padding: 0 13px !important;
    border-radius: 999px !important;
    background: #eef4ff !important;
    color: #1d4ed8 !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    margin: 4px 8px 4px 0 !important;
}

/* Make the count block feel like a proper dashboard strip */
.qr-registry-page > p:has(a) {
    margin: 18px 0 14px !important;
}

/* Management/search cards should not feel narrow and random */
.qr-registry-page .card {
    max-width: none !important;
}

.qr-registry-page .card:has(input[type="search"]),
.qr-registry-page .card:has(input[name="q"]),
.qr-registry-page .card:has(select[name="filter"]),
.qr-registry-page .card:has(select) {
    margin-top: 20px !important;
}

.qr-registry-page .card h2,
.qr-registry-page .card h3 {
    margin-top: 0 !important;
}

/* Better two-column form feel inside the search panel */
.qr-registry-page .form-grid,
.qr-registry-page form .grid,
.qr-registry-page form {
    gap: 16px !important;
}

.qr-registry-page .btn-row,
.qr-registry-page .form-actions {
    gap: 10px !important;
}

/* Registry table/card spacing */
.qr-registry-page table {
    width: 100% !important;
}

.qr-registry-page .table-wrap,
.qr-registry-page .card:has(table) {
    overflow-x: auto !important;
}

/* Make the top action button feel aligned */
.qr-registry-page .page-actions,
.qr-registry-page .actions {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

/* Dark mode */
body.theme-dark .qr-registry-page h1 ~ p a,
body.theme-dark .qr-registry-page > p a {
    background: #1e293b !important;
    color: #dbeafe !important;
}

@media (min-width: 900px) {
    .qr-registry-page {
        padding-top: 34px !important;
    }

    /* Turn the top count links into a neat row */
    .qr-registry-page h1 ~ p,
    .qr-registry-page > p {
        max-width: 900px !important;
    }
}

@media (max-width: 820px) {
    .qr-registry-page {
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-top: 22px !important;
    }

    .qr-registry-page > .page-head,
    .qr-registry-page .page-head,
    .qr-registry-page > header:first-child {
        grid-template-columns: 1fr !important;
    }

    .qr-registry-page .page-actions,
    .qr-registry-page .actions {
        justify-content: flex-start !important;
    }

    .qr-registry-page h1 ~ p a,
    .qr-registry-page > p a {
        width: 100% !important;
        justify-content: space-between !important;
    }
}



/* --- Stable Beta 0.4 QR nav and rotate image fix --- */

/*
QR Labels remains the label printer.
Registered QR codes remains the registry/list page.
Location image rotation now returns to the visual card and uses filemtime cache busting.
*/

#location-visual {
    scroll-margin-top: 110px;
}

.location-visual-actions form {
    margin: 0;
}


/* --- Stable Beta 0.4 Registered QR stat card polish --- */

/*
The Registered QR codes counters are clickable filters,
but they should look like proper stat buttons/cards, not loose blue links.
*/

.qr-registry-stats {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
    margin: 22px 0 24px !important;
    max-width: 1100px !important;
}

.qr-registry-stats .stat-card {
    min-height: 96px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 18px 20px !important;
    border: 1px solid #d8e0ee !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    color: #101828 !important;
    box-shadow: 0 14px 36px rgba(15, 23, 42, .07) !important;
    text-decoration: none !important;
    transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease, background .14s ease !important;
}

.qr-registry-stats .stat-card:hover,
.qr-registry-stats .stat-card:focus {
    transform: translateY(-2px) !important;
    border-color: #9db7ff !important;
    background: #f8fbff !important;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .10) !important;
    color: #101828 !important;
}

.qr-registry-stats .stat-card span {
    display: block !important;
    color: #516173 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
}

.qr-registry-stats .stat-card strong {
    display: block !important;
    color: #101828 !important;
    font-size: 34px !important;
    font-weight: 950 !important;
    line-height: .9 !important;
    letter-spacing: -0.05em !important;
    text-decoration: none !important;
}

/* Small visual accent per card */
.qr-registry-stats .stat-card::before {
    content: "";
    width: 34px !important;
    height: 4px !important;
    border-radius: 999px !important;
    background: #2563eb !important;
    opacity: .85 !important;
}

/* Optional selected filter state based on current URL is not server-rendered yet,
   so hover/focus is kept clean without changing behaviour. */

body.theme-dark .qr-registry-stats .stat-card {
    background: #111827 !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
    box-shadow: 0 14px 36px rgba(0, 0, 0, .24) !important;
}

body.theme-dark .qr-registry-stats .stat-card:hover,
body.theme-dark .qr-registry-stats .stat-card:focus {
    background: #1e293b !important;
    border-color: #3b82f6 !important;
    color: #ffffff !important;
}

body.theme-dark .qr-registry-stats .stat-card span {
    color: #a8b6ca !important;
}

body.theme-dark .qr-registry-stats .stat-card strong {
    color: #f8fafc !important;
}

@media (max-width: 1000px) {
    .qr-registry-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 560px) {
    .qr-registry-stats {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin-top: 18px !important;
    }

    .qr-registry-stats .stat-card {
        min-height: 76px !important;
        padding: 15px 16px !important;
        flex-direction: row !important;
        align-items: center !important;
    }

    .qr-registry-stats .stat-card::before {
        display: none !important;
    }

    .qr-registry-stats .stat-card strong {
        font-size: 30px !important;
    }
}



/* --- Stable Beta 0.4 Blank labels wording --- */

/*
User-facing wording changed from Reserved blank labels to Blank labels.
Internal filter values remain unchanged so existing logic keeps working.
*/


/* --- Stable Beta 0.4 auth left panel match --- */

/*
Login and Create account now share the same left intro panel.
Visible brand casing should be ItemID, with Stable Beta 0.4.
*/

.auth-intro .eyebrow,
.auth-intro .auth-eyebrow {
    text-transform: none !important;
    letter-spacing: .08em !important;
}

.auth-intro .eyebrow::first-letter,
.auth-intro .auth-eyebrow::first-letter {
    text-transform: uppercase !important;
}

.auth-preview-area strong {
    text-transform: none !important;
}


/* --- Stable Beta 0.4 auth panel matching and ItemID casing fix --- */

/*
Login and create account left panels now share the same markup.
The small brand line is forced to normal casing so it reads "ItemID Stable Beta 0.4",
not "ItemID STABLE BETA 0.4". It uses the same font family as the header.
*/

.auth-intro,
.auth-intro * {
    font-family: inherit !important;
}

.auth-brand,
.auth-intro .auth-brand,
.auth-intro .eyebrow,
.auth-intro .auth-eyebrow {
    text-transform: none !important;
    letter-spacing: .08em !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    color: #2563eb !important;
}

.auth-intro h1 {
    font-family: inherit !important;
}

.auth-pills span {
    text-transform: none !important;
}


/* --- Stable Beta 0.4 auth panels and upload privacy note --- */

/*
Auth pages:
- Login and Create account use the same left panel.
- The small brand line keeps normal ItemID casing and the same app font.
*/

.auth-panel.auth-copy .eyebrow,
.auth-panel.auth-copy .brand-lock,
.auth-body .eyebrow.brand-lock {
    text-transform: none !important;
    font-family: inherit !important;
    letter-spacing: .08em !important;
    color: #2563eb !important;
    font-weight: 900 !important;
}

.auth-panel.auth-copy,
.auth-panel.auth-copy * {
    font-family: inherit !important;
}

.auth-panel.auth-copy h1 {
    font-family: inherit !important;
}

/* Location visual privacy note */
.privacy-note {
    display: grid;
    gap: 5px;
    padding: 14px 16px;
    border: 1px solid #bfdbfe;
    border-radius: 16px;
    background: #eff6ff;
    color: #1e3a8a;
    margin: 10px 0 18px;
}

.privacy-note strong {
    font-size: 14px;
    font-weight: 900;
    color: #1e3a8a;
}

.privacy-note span {
    color: #335075;
    line-height: 1.5;
}

body.theme-dark .privacy-note {
    background: #102033;
    border-color: #1d4ed8;
    color: #dbeafe;
}

body.theme-dark .privacy-note strong {
    color: #dbeafe;
}

body.theme-dark .privacy-note span {
    color: #bfd3f7;
}


/* --- Stable Beta 0.4 login redirect loop fix --- */

.auth-card .notice,
.auth-panel .notice {
    margin: 14px 0;
}

.auth-card .notice + .actions,
.auth-panel .notice + .actions {
    margin-bottom: 18px;
}




/* ===== CSS from itemid_location_links_hard_fix_patch.zip ===== */

:root{
  --bg:#f5f7fb;--bg2:#eef4ff;--card:#fff;--text:#101828;--muted:#667085;--line:#d9e1ec;
  --blue:#2563eb;--blue-dark:#1d4ed8;--blue2:#eff4ff;--green:#12b76a;--amber:#f79009;--danger:#b42318;
  --shadow:0 18px 45px rgba(15,23,42,.08);--radius:18px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:linear-gradient(180deg,#f8fbff 0%,var(--bg) 260px);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Arial,sans-serif;font-size:15px;line-height:1.5}a{color:var(--blue-dark);text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3{letter-spacing:-.04em;line-height:1.15;margin:0 0 10px}h1{font-size:34px}h2{font-size:28px}h3{font-size:19px}.muted{color:var(--muted)}.big{font-size:17px;line-height:1.65}.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:22px;padding:14px 24px;background:rgba(255,255,255,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}.brand{display:inline-flex;gap:10px;align-items:center;color:var(--text);font-weight:900;font-size:21px}.brand:hover{text-decoration:none}.brand-mark{width:34px;height:34px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;background:#111827;color:white;font-size:13px;letter-spacing:-.04em}.main-nav{display:flex;align-items:center;gap:4px;flex:1;flex-wrap:wrap}.main-nav a{color:#344054;padding:9px 10px;border-radius:10px;font-weight:700;font-size:14px}.main-nav a:hover{background:var(--blue2);text-decoration:none}.top-actions{display:flex;align-items:center;gap:12px}.muted-link{color:var(--muted);font-weight:700}.page{max-width:1180px;margin:0 auto;padding:28px 22px 60px}.site-footer{max-width:1180px;margin:0 auto;padding:22px;color:var(--muted);border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px}.page-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin:0 0 20px}.page-head p{margin:4px 0 0}.card{background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:18px;box-shadow:0 10px 30px rgba(15,23,42,.045)}.hero{display:grid;grid-template-columns:2fr 1fr;gap:18px;margin-bottom:18px}.hero .card:first-child{background:linear-gradient(135deg,#fff 0%,#f4f7ff 100%)}.grid{display:grid;gap:18px}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.cards4{grid-template-columns:repeat(4,minmax(0,1fr))}.cards4 .card{margin:0}.cards4 h2{font-size:34px;margin-top:6px}.wide{max-width:920px}.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;background:var(--blue);color:white;padding:11px 16px;font-weight:900;cursor:pointer;text-decoration:none;box-shadow:0 8px 18px rgba(37,99,235,.18);font:inherit}.btn:hover{text-decoration:none;background:var(--blue-dark)}.btn.secondary{background:#e8efff;color:var(--blue-dark);box-shadow:none}.btn.secondary:hover{background:#dbe7ff}.btn.ghost{background:white;color:#344054;border:1px solid var(--line);box-shadow:none}.btn.small{padding:8px 12px;border-radius:10px;font-size:14px}.scan-link{background:#111827;color:#fff!important}.form{display:grid;gap:15px}.form label{display:grid;gap:7px;color:#344054;font-size:14px;font-weight:700}.form input,.form select,.form textarea,.searchbar input,.inline-form input,.inline-form select{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px 13px;background:white;color:var(--text);font:inherit;outline:none}.form input:focus,.form select:focus,.form textarea:focus,.searchbar input:focus,.inline-form input:focus,.inline-form select:focus{border-color:#9db7ff;box-shadow:0 0 0 4px rgba(37,99,235,.10)}.searchbar,.inline-form{display:flex;gap:10px;margin-bottom:18px}.table-wrap{overflow:auto;padding:0}table{width:100%;border-collapse:collapse;min-width:720px}th,td{text-align:left;border-bottom:1px solid var(--line);padding:14px 16px;vertical-align:top}th{font-size:12px;color:var(--muted);font-weight:900;text-transform:uppercase;letter-spacing:.05em;background:#fbfcff}tr:hover td{background:#fbfdff}.pill{display:inline-flex;background:var(--blue2);color:var(--blue-dark);border-radius:999px;padding:4px 9px;font-size:13px;font-weight:900}.pill.low,.pill.Empty,.pill.Missing{background:#fff4ed;color:#b54708}.visual{max-width:100%;border-radius:14px;border:1px solid var(--line);box-shadow:0 8px 20px rgba(15,23,42,.06)}.qr-box{display:inline-block;background:white;padding:12px;border:1px solid var(--line);border-radius:14px}.code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:900;background:#f2f4f7;border:1px solid #e4e7ec;border-radius:10px;padding:4px 8px;display:inline-block}.labels{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.label{background:#fff;border:1px solid #111;border-radius:6px;text-align:center;padding:11px;break-inside:avoid}.label .qr{display:inline-block}.label-toolbar{margin:12px 0}.check{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center;gap:8px!important}.alert{background:#fef3f2;color:var(--danger);border:1px solid #fecdca;border-radius:12px;padding:11px 13px;font-weight:700}.notice{background:#eff8ff;color:#175cd3;border:1px solid #b2ddff;border-radius:12px;padding:11px 13px;font-weight:700}.empty{padding:24px;border:1px dashed var(--line);border-radius:14px;background:#fbfcff;color:var(--muted)}
/* Auth */.auth-body{min-height:100vh!important;display:grid!important;place-items:center!important;padding:28px;background:radial-gradient(circle at top left,rgba(37,99,235,.16),transparent 34%),radial-gradient(circle at bottom right,rgba(16,185,129,.10),transparent 28%),var(--bg)}.auth-shell{width:min(980px,100%);display:grid;grid-template-columns:1.15fr .85fr;gap:18px;align-items:stretch}.auth-panel{background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow)}.auth-copy{padding:36px;display:flex;flex-direction:column;justify-content:center;min-height:440px}.logo-mark{width:54px;height:54px;border-radius:16px;background:#111827;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;letter-spacing:-.04em;margin-bottom:22px}.eyebrow{font-weight:900;color:var(--blue);letter-spacing:.08em;text-transform:uppercase;font-size:13px;margin:0 0 10px}.auth-copy h1{font-size:46px;letter-spacing:-.055em;line-height:1.02;margin:0 0 16px;max-width:620px}.auth-copy .big{font-size:17px;line-height:1.6;max-width:600px;margin:0 0 22px}.feature-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}.feature-list span{background:var(--blue2);color:var(--blue-dark);border:1px solid #dbe7ff;border-radius:999px;padding:8px 11px;font-weight:900;font-size:13px}.auth-card{width:auto!important;padding:30px;display:flex;flex-direction:column;justify-content:center}.auth-card h2{font-size:30px;margin:0 0 8px}.auth-card .muted{margin-top:0;margin-bottom:20px}.auth-card input{height:46px}.subtle-link{font-size:14px;font-weight:800;justify-self:start}.auth-card .actions{margin-top:2px}
@media(max-width:900px){.topbar{align-items:flex-start;flex-direction:column}.top-actions{width:100%;justify-content:space-between}.hero,.grid.two,.grid.cards4{grid-template-columns:1fr}.page-head{display:block}.searchbar,.inline-form{flex-direction:column}.labels{grid-template-columns:repeat(2,1fr)}.auth-shell{grid-template-columns:1fr}.auth-copy{min-height:0;padding:24px}.auth-copy h1{font-size:34px}.auth-card{padding:24px}.site-footer{flex-direction:column}}@media print{body{background:white}.topbar,.page-head,.card:not(.table-wrap),.label-toolbar,.site-footer{display:none!important}.page{padding:0}.labels{grid-template-columns:repeat(4,1fr);gap:8px}.label{page-break-inside:avoid;box-shadow:none}}

/* ItemID QR/template patch */
.section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}.section-head h2{font-size:22px;margin:0 0 4px}.field-builder{display:grid;gap:14px;border:1px solid var(--line);border-radius:16px;padding:16px;background:#fbfcff}.quick-fields{display:flex;gap:8px;flex-wrap:wrap}.field-chip{border:1px solid #dbe7ff;background:#eff4ff;color:#1d4ed8;border-radius:999px;padding:7px 10px;font-weight:800;cursor:pointer}.field-chip:hover{background:#dbe7ff}.fields-list{display:grid;gap:10px}.field-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}.label-sheet{display:grid;grid-template-columns:repeat(var(--label-columns,4),minmax(0,1fr));gap:12px}.print-label-card{background:#fff;border:1px solid #111827;border-radius:10px;text-align:center;padding:12px;break-inside:avoid;min-height:calc(var(--qr-size,120px) + 62px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px}.print-label-card .qr{display:inline-flex;align-items:center;justify-content:center}.print-label-card .print-code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:15px;font-weight:900;letter-spacing:.06em}.print-label-card .print-name{font-size:12px;font-weight:800;color:#344054;line-height:1.25}.row-actions{display:flex;gap:12px;white-space:nowrap}.qr-size-form select{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px 13px;background:white;color:var(--text);font:inherit;outline:none}@media(max-width:700px){.field-row{grid-template-columns:1fr}.label-sheet{grid-template-columns:repeat(2,minmax(0,1fr))}.row-actions{display:grid;gap:6px}}

/* ItemID workflow polish patch */
.mini-action{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;border-radius:10px;padding:7px 10px;font-weight:900;color:#1d4ed8;text-decoration:none;white-space:nowrap}.mini-action:hover{background:#eff4ff;text-decoration:none}.pretty-fields{gap:18px}.pretty-list{gap:12px}.pretty-row{grid-template-columns:1fr 42px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px}.pretty-row input{border:0!important;box-shadow:none!important;padding:9px 10px!important}.icon-button{width:34px;height:34px;border:0;border-radius:10px;background:#f2f4f7;color:#344054;font-size:22px;line-height:1;cursor:pointer;font-weight:900}.icon-button:hover{background:#fee4e2;color:#b42318}.community-check{align-self:end;background:#fbfcff;border:1px solid var(--line);border-radius:14px;padding:12px}.community-check span{display:grid;gap:2px}.community-check small{color:var(--muted);font-weight:600}.field-chip{font-size:13px}.print-label-card{min-height:calc(var(--qr-mm,35mm) + 22mm);padding:8mm 4mm}.print-label-card .print-name{max-width:100%;overflow-wrap:anywhere}.custom-prefix-row{display:none}.item-hero{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.item-hero h2{font-size:24px;margin:4px 0 0}.activity-line{border-bottom:1px solid var(--line);padding:0 0 10px;margin:0 0 10px}.qr-size-form{margin-top:14px;display:flex;gap:10px;align-items:end;flex-wrap:wrap}.qr-size-form label{min-width:190px}.add-item-flow{gap:20px}.flow-step{display:flex;gap:14px;align-items:flex-start;border-top:1px solid var(--line);padding-top:18px}.flow-step:first-of-type{border-top:0;padding-top:0}.flow-step h2{font-size:22px;margin:0 0 4px}.step-badge{width:34px;height:34px;border-radius:999px;background:#111827;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:900;flex:0 0 auto}.field-as-card{border:1px dashed #b7c5df;border-radius:14px;padding:13px;background:#fbfcff}.field-as-card p{margin:4px 0 10px}.code-pill{display:inline-flex;background:#f2f4f7;border:1px solid #e4e7ec;border-radius:10px;padding:5px 9px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:900}@media(max-width:800px){.item-hero{grid-template-columns:1fr}.pretty-row{grid-template-columns:1fr 42px}.qr-size-form{display:grid}.flow-step{display:grid}.field-as-card .btn{width:100%}}


/* ItemID workflow patch 2 */
.beta-badge{display:inline-flex;align-items:center;border:1px solid #c7d7fe;background:#eff4ff;color:#1d4ed8;border-radius:999px;padding:2px 7px;font-size:11px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;line-height:1.4}.template-create-card{display:flex;align-items:center;justify-content:space-between;gap:14px}.template-create-card p{margin:3px 0 0}.compact-check{width:auto!important;display:flex!important;grid-template-columns:auto 1fr!important;align-items:center!important;gap:8px!important;min-width:170px}.compact-check input{width:auto!important}.qr-box canvas,.qr-box img{display:block!important;max-width:100%!important;max-height:100%!important}.print-label-card{overflow:hidden}.print-label-card .dynamic-qr canvas,.print-label-card .dynamic-qr img{display:block!important}.print-label-card .print-code,.print-label-card .print-name{max-width:100%;overflow-wrap:anywhere}.single-print-label{overflow:hidden}@media(max-width:800px){.template-create-card{display:grid}.compact-check{min-width:0}}

/* Items table action-cell border fix */
td.row-actions,
th.row-actions {
    display: table-cell !important;
    white-space: nowrap;
    vertical-align: middle;
    border-bottom: 1px solid var(--line) !important;
}

td.row-actions {
    min-width: 230px;
}

td.row-actions .mini-action {
    margin-right: 8px;
    margin-bottom: 0;
}

td.row-actions .mini-action:last-child {
    margin-right: 0;
}

tr:hover td.row-actions {
    background: #fbfdff;
}

@media (max-width: 760px) {
    td.row-actions {
        min-width: 170px;
    }

    td.row-actions .mini-action {
        display: flex;
        width: 100%;
        margin-right: 0;
        margin-bottom: 6px;
    }

    td.row-actions .mini-action:last-child {
        margin-bottom: 0;
    }
}

/* Stable Beta 0.4 additions */
.btn.danger,
.btn.danger.ghost {
  color: #b42318 !important;
  border-color: #fecdca !important;
  background: #fff !important;
  box-shadow: none !important;
}
.btn.danger:hover,
.btn.danger.ghost:hover {
  background: #fef3f2 !important;
  text-decoration: none;
}
.mini-action.danger {
  color: #b42318 !important;
  border-color: #fecdca !important;
  background: #fff !important;
}
.export-card {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.export-card:hover {
  transform: translateY(-2px);
  text-decoration: none;
  border-color: #b8c7e6;
  box-shadow: 0 18px 42px rgba(15,23,42,.09);
}
.site-footer a { color: inherit; font-weight: 800; }

/* Stable Beta 0.4 template/item field builder polish */
.item-template-field-row {
    display: grid;
    grid-template-columns: minmax(150px, .35fr) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 12px;
    border: 1px solid #d8e0ee;
    border-radius: 14px;
    background: #ffffff;
    margin-bottom: 10px;
}

.template-field-input-wrap {
    display: grid;
    gap: 6px;
}

.template-field-input-wrap input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    margin: 8px 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.field-unit-hint {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 9px;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 900;
}

.small {
    font-size: 12px;
}

@media (max-width: 700px) {
    .item-template-field-row {
        grid-template-columns: 1fr;
    }
}

/* --- Profile/preferences patch CSS --- */

/* Profile and preferences */
.profile-settings-row {
    display: grid;
    grid-template-columns: 112px 1fr;
    gap: 22px;
    align-items: center;
    margin-bottom: 20px;
}

.profile-settings-avatar {
    width: 96px;
    height: 96px;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid #d8e0ee;
    background: #eef4ff;
    color: #1d4ed8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    font-weight: 900;
}

.profile-settings-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.checkbox-line {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    font-weight: 800;
}

.checkbox-line input,
.checkbox-card input {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.checkbox-card {
    min-height: 70px;
    border: 1px solid #d8e0ee;
    border-radius: 14px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}

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

.checkbox-card small {
    margin-top: 4px;
    color: #64748b;
}

@media (max-width: 650px) {
    .profile-settings-row {
        grid-template-columns: 1fr;
    }
}


/* --- Stable Beta 0.4 theme toggle + dark fix --- */

.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,255,255,.94);
    border-bottom: 1px solid #d8e0ee;
    backdrop-filter: blur(14px);
}

.topbar-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    gap: 22px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #0f172a;
    flex: 0 0 auto;
}

.brand:hover {
    text-decoration: none;
}

.brand-name {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1;
}

.beta-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 19px;
    padding: 0 7px;
    border: 1px solid #b8c7e6;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    white-space: nowrap;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 auto;
    min-width: 0;
}

.main-nav a {
    color: #335075;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
}

.main-nav a:hover {
    color: #2563eb;
    text-decoration: none;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

.scan-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 16px;
    border-radius: 12px;
    background: #111827;
    color: #ffffff !important;
    text-decoration: none;
    font-weight: 800;
    font-size: 14px;
    box-shadow: 0 10px 24px rgba(17, 24, 39, .18);
}

.scan-button:hover {
    text-decoration: none;
}

.profile-menu {
    position: relative;
}

.profile-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 4px 8px 4px 4px;
    border: 1px solid #d8e0ee;
    border-radius: 999px;
    background: #ffffff;
    color: #0f172a;
    text-decoration: none;
    font-weight: 800;
    cursor: pointer;
    max-width: 260px;
}

.profile-avatar {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    object-fit: cover;
    background: #eef4ff;
    color: #1d4ed8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    border: 1px solid #c9d7f2;
    overflow: hidden;
    flex: 0 0 auto;
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-label {
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.profile-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 280px;
    border: 1px solid #d8e0ee;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .16);
    padding: 10px;
    display: none;
}

.profile-menu:hover .profile-dropdown,
.profile-menu:focus-within .profile-dropdown {
    display: block;
}

.profile-dropdown-header {
    padding: 10px;
    border-bottom: 1px solid #edf2f7;
    margin-bottom: 8px;
}

.profile-dropdown-header strong,
.profile-dropdown-header span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-dropdown-header span {
    color: #64748b;
    font-size: 13px;
    margin-top: 2px;
}

.profile-dropdown a {
    display: block;
    padding: 10px;
    border-radius: 12px;
    color: #334155;
    text-decoration: none;
    font-weight: 800;
}

.profile-dropdown a:hover {
    background: #f1f5f9;
    color: #0f172a;
    text-decoration: none;
}

.theme-toggle-form {
    margin: 0;
}

.theme-toggle {
    width: 62px;
    height: 34px;
    border: 1px solid #d8e0ee;
    border-radius: 999px;
    background: #eef4ff;
    position: relative;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    box-shadow: none;
}

.theme-toggle-bulb {
    position: absolute;
    left: 8px;
    font-size: 15px;
    line-height: 1;
    z-index: 2;
    opacity: .8;
}

.theme-toggle-knob {
    position: absolute;
    left: 3px;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 3px 10px rgba(15,23,42,.18);
    transition: transform .16s ease;
}

.theme-toggle.is-dark {
    background: #172554;
    border-color: #2563eb;
}

.theme-toggle.is-dark .theme-toggle-bulb {
    left: 36px;
    opacity: 1;
}

.theme-toggle.is-dark .theme-toggle-knob {
    transform: translateX(28px);
    background: #0f172a;
}

.app-shell {
    max-width: 1240px;
    margin: 0 auto;
    padding: 28px 18px 48px;
}

/* Dark theme variables and hard overrides */
body.theme-dark {
    --bg:#0b1220;
    --bg2:#0f172a;
    --card:#111827;
    --text:#f8fafc;
    --muted:#a8b6ca;
    --line:#334155;
    --blue2:#172554;
    background: #0b1220 !important;
    color: #f8fafc !important;
    color-scheme: dark;
}

body.theme-dark .topbar {
    background: rgba(15, 23, 42, .96) !important;
    border-bottom-color: #334155 !important;
}

body.theme-dark .brand,
body.theme-dark .brand-name,
body.theme-dark .profile-label {
    color: #f8fafc !important;
}

body.theme-dark .beta-badge {
    background: #172554 !important;
    border-color: #2563eb !important;
    color: #bfdbfe !important;
}

body.theme-dark .main-nav a {
    color: #cbd5e1 !important;
}

body.theme-dark .main-nav a:hover {
    background: #1e293b !important;
    color: #ffffff !important;
}

body.theme-dark .profile-trigger,
body.theme-dark .profile-dropdown,
body.theme-dark .card,
body.theme-dark section.card,
body.theme-dark form.card,
body.theme-dark details.card,
body.theme-dark .table-wrap,
body.theme-dark .metric-card,
body.theme-dark .filter-panel,
body.theme-dark .template-field-card,
body.theme-dark .template-field-row,
body.theme-dark .location-summary,
body.theme-dark .auth-panel {
    background: #111827 !important;
    background-color: #111827 !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
    box-shadow: 0 18px 45px rgba(0,0,0,.22) !important;
}

body.theme-dark .hero .card:first-child {
    background: linear-gradient(135deg, #111827 0%, #172033 100%) !important;
}

body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark strong,
body.theme-dark label,
body.theme-dark th,
body.theme-dark td {
    color: #f8fafc !important;
}

body.theme-dark .muted,
body.theme-dark .help,
body.theme-dark small,
body.theme-dark .site-footer,
body.theme-dark .metric-card span {
    color: #a8b6ca !important;
}

body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

body.theme-dark input::placeholder,
body.theme-dark textarea::placeholder {
    color: #74839a !important;
}

body.theme-dark table,
body.theme-dark tbody,
body.theme-dark tr {
    background: #111827 !important;
    color: #f8fafc !important;
}

body.theme-dark thead,
body.theme-dark th {
    background: #0f172a !important;
    color: #cbd5e1 !important;
}

body.theme-dark td {
    background: #111827 !important;
    color: #e5edf8 !important;
    border-color: #334155 !important;
}

body.theme-dark tr:hover td {
    background: #172033 !important;
}

body.theme-dark .code-pill,
body.theme-dark .badge,
body.theme-dark .pill,
body.theme-dark .status-pill,
body.theme-dark .tag,
body.theme-dark .field-unit-hint {
    background: #1e293b !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}

body.theme-dark .btn.secondary,
body.theme-dark .btn.ghost,
body.theme-dark a.btn.secondary,
body.theme-dark a.btn.ghost {
    background: #1e293b !important;
    color: #bfdbfe !important;
    border: 1px solid #334155 !important;
    box-shadow: none !important;
}

body.theme-dark .btn.secondary:hover,
body.theme-dark .btn.ghost:hover {
    background: #26344a !important;
    color: #ffffff !important;
}

body.theme-dark .qr-label-preview,
body.theme-dark .qr-preview,
body.theme-dark .qr-card-preview,
body.theme-dark .print-label,
body.theme-dark .label-card,
body.theme-dark .print-sheet,
body.theme-dark .print-sheet .label,
body.theme-dark canvas,
body.theme-dark .qr-box {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #111827 !important;
    border-color: #111827 !important;
}

/* System preference can be selected in profile, but the top toggle only switches light/dark. */
@media (max-width: 900px) {
    .topbar-inner {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 12px;
    }

    .main-nav {
        order: 3;
        width: 100%;
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .topbar-actions {
        margin-left: auto;
    }

    .profile-label {
        display: none;
    }
}


/* --- Stable Beta 0.4 sun/moon theme toggle positioning --- */

.topbar-inner {
    display: flex !important;
    align-items: center !important;
}

.main-nav {
    justify-content: flex-start;
}

.topbar-actions {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.theme-toggle-form {
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}

.theme-toggle {
    width: 66px !important;
    height: 36px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 999px !important;
    background: #e0f2fe !important;
    position: relative !important;
    cursor: pointer !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

.theme-icon {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1 !important;
    font-size: 15px !important;
    line-height: 1 !important;
    pointer-events: none !important;
}

.theme-icon-sun {
    left: 10px !important;
    color: #f59e0b !important;
    opacity: 1 !important;
}

.theme-icon-moon {
    right: 11px !important;
    color: #64748b !important;
    opacity: .55 !important;
}

.theme-toggle-knob {
    position: absolute !important;
    left: 3px !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    box-shadow: 0 3px 10px rgba(15,23,42,.22) !important;
    transition: transform .16s ease, background .16s ease !important;
    z-index: 2 !important;
}

.theme-toggle.is-dark {
    background: #172554 !important;
    border-color: #2563eb !important;
}

.theme-toggle.is-dark .theme-toggle-knob {
    transform: translateX(30px) !important;
    background: #0f172a !important;
}

.theme-toggle.is-dark .theme-icon-sun {
    opacity: .45 !important;
    color: #94a3b8 !important;
}

.theme-toggle.is-dark .theme-icon-moon {
    opacity: 1 !important;
    color: #dbeafe !important;
}

body.theme-dark .theme-toggle {
    background: #172554 !important;
    border-color: #2563eb !important;
}

@media (max-width: 900px) {
    .topbar-actions {
        margin-left: auto !important;
    }
}


/* --- Stable Beta 0.4 dark mode button/pill fix --- */

/* General white button fix in dark mode */
body.theme-dark button,
body.theme-dark input[type="submit"],
body.theme-dark input[type="button"],
body.theme-dark .btn,
body.theme-dark a.btn {
    border-color: #334155;
}

body.theme-dark .btn:not(.danger):not(.primary),
body.theme-dark a.btn:not(.danger):not(.primary),
body.theme-dark button.btn:not(.danger):not(.primary) {
    background: #1e293b !important;
    color: #dbeafe !important;
    border: 1px solid #334155 !important;
    box-shadow: none !important;
}

body.theme-dark .btn:not(.danger):not(.primary):hover,
body.theme-dark a.btn:not(.danger):not(.primary):hover,
body.theme-dark button.btn:not(.danger):not(.primary):hover {
    background: #26344a !important;
    color: #ffffff !important;
}

/* Keep main action buttons blue */
body.theme-dark .btn:first-child,
body.theme-dark .btn.primary,
body.theme-dark button.btn.primary,
body.theme-dark a.btn.primary {
    background: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
}

/* Delete/danger buttons were showing white. */
body.theme-dark .btn.danger,
body.theme-dark a.btn.danger,
body.theme-dark button.btn.danger,
body.theme-dark .danger,
body.theme-dark a[href*="delete.php"],
body.theme-dark button[name*="delete"],
body.theme-dark button[value*="delete"],
body.theme-dark button[value*="clear_reserved"],
body.theme-dark .delete-button,
body.theme-dark .clear-button {
    background: #3f1d1d !important;
    color: #fecaca !important;
    border: 1px solid #7f1d1d !important;
    box-shadow: none !important;
}

body.theme-dark .btn.danger:hover,
body.theme-dark a.btn.danger:hover,
body.theme-dark button.btn.danger:hover,
body.theme-dark .danger:hover,
body.theme-dark a[href*="delete.php"]:hover,
body.theme-dark button[name*="delete"]:hover,
body.theme-dark button[value*="delete"]:hover,
body.theme-dark button[value*="clear_reserved"]:hover,
body.theme-dark .delete-button:hover,
body.theme-dark .clear-button:hover {
    background: #7f1d1d !important;
    color: #ffffff !important;
}

/* Some pages use plain anchors styled as buttons without btn classes. */
body.theme-dark .row-actions a,
body.theme-dark .table-actions-cell a,
body.theme-dark .actions a,
body.theme-dark .actions button {
    border-color: #334155;
}

body.theme-dark .row-actions a:not(.danger):not([href*="delete.php"]),
body.theme-dark .table-actions-cell a:not(.danger):not([href*="delete.php"]) {
    background: #1e293b !important;
    color: #dbeafe !important;
    border: 1px solid #334155 !important;
}

body.theme-dark .row-actions a:not(.danger):not([href*="delete.php"]):hover,
body.theme-dark .table-actions-cell a:not(.danger):not([href*="delete.php"]):hover {
    background: #26344a !important;
    color: #ffffff !important;
}

/* Code pills were still too pale in some table cells. */
body.theme-dark .code-pill,
body.theme-dark td .code-pill,
body.theme-dark .qr-code-pill,
body.theme-dark .item-id-pill {
    background: #1e293b !important;
    color: #e2e8f0 !important;
    border: 1px solid #334155 !important;
}

/* Search filter detail summary was still white on some browsers. */
body.theme-dark details,
body.theme-dark details summary,
body.theme-dark details.card,
body.theme-dark details.card summary {
    background: #111827 !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

/* Preserve white only where it must be white for QR/print. */
body.theme-dark .qr-label-preview,
body.theme-dark .qr-preview,
body.theme-dark .qr-card-preview,
body.theme-dark .print-label,
body.theme-dark .label-card,
body.theme-dark .print-sheet,
body.theme-dark .print-sheet .label,
body.theme-dark canvas,
body.theme-dark .qr-box {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #111827 !important;
    border-color: #111827 !important;
}

/* Same button fixes for system theme when OS is dark. */
@media (prefers-color-scheme: dark) {
    body.theme-system .btn:not(.danger):not(.primary),
    body.theme-system a.btn:not(.danger):not(.primary),
    body.theme-system button.btn:not(.danger):not(.primary) {
        background: #1e293b !important;
        color: #dbeafe !important;
        border: 1px solid #334155 !important;
        box-shadow: none !important;
    }

    body.theme-system .btn.danger,
    body.theme-system a.btn.danger,
    body.theme-system button.btn.danger,
    body.theme-system .danger,
    body.theme-system a[href*="delete.php"],
    body.theme-system button[name*="delete"],
    body.theme-system button[value*="delete"],
    body.theme-system button[value*="clear_reserved"],
    body.theme-system .delete-button,
    body.theme-system .clear-button {
        background: #3f1d1d !important;
        color: #fecaca !important;
        border: 1px solid #7f1d1d !important;
        box-shadow: none !important;
    }

    body.theme-system .code-pill,
    body.theme-system td .code-pill,
    body.theme-system .qr-code-pill,
    body.theme-system .item-id-pill {
        background: #1e293b !important;
        color: #e2e8f0 !important;
        border: 1px solid #334155 !important;
    }

    body.theme-system details,
    body.theme-system details summary,
    body.theme-system details.card,
    body.theme-system details.card summary {
        background: #111827 !important;
        color: #f8fafc !important;
        border-color: #334155 !important;
    }
}


/* --- Stable Beta 0.4 dark cleanup: toggle, white panels, buttons --- */

/* Hide old/broken theme toggle visuals if old CSS is still cached on a page. */
.theme-toggle,
.theme-toggle-form,
.theme-icon,
.theme-option,
.theme-toggle-bulb {
    display: none !important;
}

/* Clean topbar layout */
.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,255,255,.94);
    border-bottom: 1px solid #d8e0ee;
    backdrop-filter: blur(14px);
}

.topbar-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    gap: 22px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #0f172a;
    flex: 0 0 auto;
}

.brand:hover {
    text-decoration: none;
}

.brand-name {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1;
}

.beta-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 19px;
    padding: 0 7px;
    border: 1px solid #b8c7e6;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    white-space: nowrap;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 auto;
    min-width: 0;
}

.main-nav a {
    color: #335075;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
}

.main-nav a:hover {
    color: #2563eb;
    text-decoration: none;
}

.topbar-actions {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex: 0 0 auto;
}

.scan-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 16px;
    border-radius: 12px;
    background: #111827;
    color: #ffffff !important;
    text-decoration: none;
    font-weight: 800;
    font-size: 14px;
    box-shadow: 0 10px 24px rgba(17,24,39,.18);
}

.scan-button:hover {
    text-decoration: none;
}

.scan-icon {
    font-size: 15px;
    line-height: 1;
}

.profile-menu {
    position: relative;
}

.profile-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 4px 8px 4px 4px;
    border: 1px solid #d8e0ee;
    border-radius: 999px;
    background: #ffffff;
    color: #0f172a;
    text-decoration: none;
    font-weight: 800;
    cursor: pointer;
    max-width: 260px;
}

.profile-avatar {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    border: 1px solid #c9d7f2;
    overflow: hidden;
    flex: 0 0 auto;
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-label {
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.profile-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 280px;
    border: 1px solid #d8e0ee;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(15,23,42,.16);
    padding: 10px;
    display: none;
}

.profile-menu:hover .profile-dropdown,
.profile-menu:focus-within .profile-dropdown {
    display: block;
}

.profile-dropdown-header {
    padding: 10px;
    border-bottom: 1px solid #edf2f7;
    margin-bottom: 8px;
}

.profile-dropdown-header strong,
.profile-dropdown-header span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-dropdown-header span {
    color: #64748b;
    font-size: 13px;
    margin-top: 2px;
}

.profile-dropdown a {
    display: block;
    padding: 10px;
    border-radius: 12px;
    color: #334155;
    text-decoration: none;
    font-weight: 800;
}

.profile-dropdown a:hover {
    background: #f1f5f9;
    color: #0f172a;
    text-decoration: none;
}

/* New independent sun/moon switch */
.mode-switch-form {
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}

.mode-switch {
    width: 72px !important;
    height: 38px !important;
    border-radius: 999px !important;
    border: 1px solid #cbd5e1 !important;
    background: #e0f2fe !important;
    position: relative !important;
    cursor: pointer !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: inline-flex !important;
    align-items: center !important;
    box-shadow: none !important;
}

.mode-track-icon {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    pointer-events: none !important;
}

.mode-track-sun {
    left: 11px !important;
    color: #f59e0b !important;
    opacity: .25 !important;
}

.mode-track-moon {
    right: 12px !important;
    color: #64748b !important;
    opacity: .35 !important;
}

.mode-knob {
    position: absolute !important;
    left: 3px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #f59e0b !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    box-shadow: 0 3px 10px rgba(15,23,42,.22) !important;
    transition: transform .16s ease, background .16s ease, color .16s ease !important;
    z-index: 2 !important;
}

.mode-switch.mode-dark {
    background: #172554 !important;
    border-color: #2563eb !important;
}

.mode-switch.mode-dark .mode-knob {
    transform: translateX(34px) !important;
    background: #0f172a !important;
    color: #dbeafe !important;
}

.mode-switch.mode-dark .mode-track-sun {
    color: #94a3b8 !important;
    opacity: .35 !important;
}

.mode-switch.mode-dark .mode-track-moon {
    opacity: .22 !important;
}

/* Dark theme core */
body.theme-dark {
    --bg:#0b1220;
    --bg2:#0f172a;
    --card:#111827;
    --text:#f8fafc;
    --muted:#a8b6ca;
    --line:#334155;
    --blue2:#172554;
    background:#0b1220 !important;
    color:#f8fafc !important;
    color-scheme: dark;
}

body.theme-dark .topbar {
    background: rgba(15,23,42,.96) !important;
    border-bottom-color: #334155 !important;
}

body.theme-dark .brand,
body.theme-dark .brand-name,
body.theme-dark .profile-label {
    color:#f8fafc !important;
}

body.theme-dark .beta-badge {
    background:#172554 !important;
    border-color:#2563eb !important;
    color:#bfdbfe !important;
}

body.theme-dark .main-nav a {
    color:#cbd5e1 !important;
}

body.theme-dark .main-nav a:hover {
    background:#1e293b !important;
    color:#ffffff !important;
}

body.theme-dark .scan-button {
    background:#2563eb !important;
    color:#ffffff !important;
}

body.theme-dark .profile-trigger,
body.theme-dark .profile-dropdown {
    background:#111827 !important;
    border-color:#334155 !important;
    color:#f8fafc !important;
}

body.theme-dark .profile-dropdown-header {
    border-bottom-color:#334155 !important;
}

body.theme-dark .profile-dropdown-header span {
    color:#94a3b8 !important;
}

body.theme-dark .profile-dropdown a {
    color:#cbd5e1 !important;
}

body.theme-dark .profile-dropdown a:hover {
    background:#1e293b !important;
    color:#ffffff !important;
}

/* Kill the stubborn white panels seen in Items/Add Item/Templates/Made QR codes */
body.theme-dark .card,
body.theme-dark section.card,
body.theme-dark form.card,
body.theme-dark details.card,
body.theme-dark .table-wrap,
body.theme-dark .items-filter-panel,
body.theme-dark .items-filter-panel[open],
body.theme-dark .items-filter-panel summary,
body.theme-dark .field-as-card,
body.theme-dark .field-as-card.template-create-card,
body.theme-dark .template-fields-panel,
body.theme-dark .template-field-builder,
body.theme-dark .template-share-card,
body.theme-dark .template-preset,
body.theme-dark .template-field-row,
body.theme-dark .template-field-row-main,
body.theme-dark .template-field-row-extra,
body.theme-dark .template-options-wrap,
body.theme-dark .template-required,
body.theme-dark .template-create-card,
body.theme-dark .location-summary,
body.theme-dark .scanner-box,
body.theme-dark .notice:not(.print-label):not(.label-card),
body.theme-dark .alert,
body.theme-dark .stat-card,
body.theme-dark .metric-card {
    background:#111827 !important;
    background-color:#111827 !important;
    color:#f8fafc !important;
    border-color:#334155 !important;
    box-shadow:0 18px 45px rgba(0,0,0,.22) !important;
}

body.theme-dark .hero .card:first-child {
    background:linear-gradient(135deg,#111827 0%,#172033 100%) !important;
}

body.theme-dark .items-filter-panel *,
body.theme-dark .template-field-builder *,
body.theme-dark .template-share-card *,
body.theme-dark .template-preset *,
body.theme-dark .field-as-card *,
body.theme-dark .template-fields-panel *,
body.theme-dark .card *,
body.theme-dark .table-wrap * {
    color: inherit;
}

body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark strong,
body.theme-dark label,
body.theme-dark th,
body.theme-dark td,
body.theme-dark summary,
body.theme-dark .section-head,
body.theme-dark .page-head {
    color:#f8fafc !important;
}

body.theme-dark .muted,
body.theme-dark .help,
body.theme-dark .hint,
body.theme-dark small,
body.theme-dark .template-help,
body.theme-dark .template-field-hint,
body.theme-dark .site-footer,
body.theme-dark .items-filter-grid label {
    color:#a8b6ca !important;
}

body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea,
body.theme-dark .items-search-row input,
body.theme-dark .items-filter-grid select,
body.theme-dark .template-field-row input,
body.theme-dark .template-field-row select {
    background:#0f172a !important;
    border-color:#334155 !important;
    color:#f8fafc !important;
}

body.theme-dark input::placeholder,
body.theme-dark textarea::placeholder {
    color:#74839a !important;
}

body.theme-dark table,
body.theme-dark tbody,
body.theme-dark tr {
    background:#111827 !important;
    color:#f8fafc !important;
}

body.theme-dark thead,
body.theme-dark th {
    background:#0f172a !important;
    color:#cbd5e1 !important;
}

body.theme-dark td {
    background:#111827 !important;
    color:#e5edf8 !important;
    border-color:#334155 !important;
}

body.theme-dark tr:hover td {
    background:#172033 !important;
}

body.theme-dark .code-pill,
body.theme-dark td .code-pill,
body.theme-dark .qr-code-pill,
body.theme-dark .item-id-pill,
body.theme-dark .badge,
body.theme-dark .pill,
body.theme-dark .status-pill,
body.theme-dark .tag,
body.theme-dark .field-unit-hint {
    background:#1e293b !important;
    color:#e2e8f0 !important;
    border:1px solid #334155 !important;
}

/* Buttons, including delete buttons that were staying white */
body.theme-dark .btn,
body.theme-dark a.btn,
body.theme-dark button.btn,
body.theme-dark .row-actions a,
body.theme-dark .table-actions-cell a,
body.theme-dark .actions a,
body.theme-dark .actions button {
    background:#1e293b !important;
    color:#dbeafe !important;
    border:1px solid #334155 !important;
    box-shadow:none !important;
}

body.theme-dark .btn:hover,
body.theme-dark a.btn:hover,
body.theme-dark button.btn:hover,
body.theme-dark .row-actions a:hover,
body.theme-dark .table-actions-cell a:hover,
body.theme-dark .actions a:hover,
body.theme-dark .actions button:hover {
    background:#26344a !important;
    color:#ffffff !important;
}

body.theme-dark .btn.danger,
body.theme-dark a.btn.danger,
body.theme-dark button.btn.danger,
body.theme-dark a[href*="delete.php"],
body.theme-dark button[name*="delete"],
body.theme-dark button[value*="delete"],
body.theme-dark button[value*="clear_reserved"],
body.theme-dark .delete-button,
body.theme-dark .clear-button {
    background:#3f1d1d !important;
    color:#fecaca !important;
    border:1px solid #7f1d1d !important;
}

body.theme-dark .btn.danger:hover,
body.theme-dark a.btn.danger:hover,
body.theme-dark button.btn.danger:hover,
body.theme-dark a[href*="delete.php"]:hover,
body.theme-dark button[name*="delete"]:hover,
body.theme-dark button[value*="delete"]:hover,
body.theme-dark button[value*="clear_reserved"]:hover {
    background:#7f1d1d !important;
    color:#ffffff !important;
}

/* Primary actions stay blue */
body.theme-dark .btn.primary,
body.theme-dark a.btn.primary,
body.theme-dark .actions > .btn:first-child:not(.danger),
body.theme-dark .page-head .btn:last-child:not(.danger) {
    background:#2563eb !important;
    color:#ffffff !important;
    border-color:#2563eb !important;
}

/* QR and print surfaces stay white deliberately */
body.theme-dark .qr-label-preview,
body.theme-dark .qr-preview,
body.theme-dark .qr-card-preview,
body.theme-dark .print-label,
body.theme-dark .label-card,
body.theme-dark .print-sheet,
body.theme-dark .print-sheet .label,
body.theme-dark canvas,
body.theme-dark .qr-box {
    background:#ffffff !important;
    background-color:#ffffff !important;
    color:#111827 !important;
    border-color:#111827 !important;
}

@media (max-width:900px) {
    .topbar-inner {
        align-items:flex-start;
        flex-wrap:wrap;
        gap:12px;
    }

    .main-nav {
        order:3;
        width:100%;
        overflow-x:auto;
        padding-bottom:4px;
    }

    .topbar-actions {
        margin-left:auto !important;
    }

    .profile-label {
        display:none;
    }
}


/* --- Stable Beta 0.4 profile dropdown hover bridge + demo link polish --- */

.profile-menu {
    position: relative !important;
}

.profile-dropdown {
    top: calc(100% + 6px) !important;
    right: 0 !important;
}

/* Invisible bridge stops the dropdown disappearing while moving from profile button to menu. */
.profile-menu::after {
    content: '' !important;
    position: absolute !important;
    left: -12px !important;
    right: -12px !important;
    top: 100% !important;
    height: 14px !important;
    display: block !important;
    background: transparent !important;
    pointer-events: auto !important;
}

.profile-menu:hover .profile-dropdown,
.profile-menu:focus-within .profile-dropdown,
.profile-dropdown:hover {
    display: block !important;
}

.auth-extra-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.demo-page {
    display: grid;
    gap: 22px;
}

.demo-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, .9fr);
    gap: 18px;
    align-items: stretch;
}

.demo-card-stack {
    display: grid;
    gap: 14px;
}

.demo-steps {
    counter-reset: demoStep;
    display: grid;
    gap: 12px;
}

.demo-step {
    counter-increment: demoStep;
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 12px;
    align-items: start;
    padding: 14px;
    border: 1px solid var(--line, #d8e0ee);
    border-radius: 16px;
    background: var(--card, #fff);
}

.demo-step::before {
    content: counter(demoStep);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #2563eb;
    color: #fff;
    font-weight: 900;
}

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

.demo-mini {
    border: 1px solid var(--line, #d8e0ee);
    border-radius: 18px;
    background: var(--card, #fff);
    padding: 18px;
}

.demo-mini h3 {
    margin-top: 0;
}

.demo-fake-table {
    display: grid;
    gap: 8px;
}

.demo-fake-row {
    display: grid;
    grid-template-columns: 90px 1fr 100px;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--line, #d8e0ee);
    border-radius: 12px;
    align-items: center;
}

.demo-fake-qr {
    width: 54px;
    height: 54px;
    border-radius: 10px;
    background:
        linear-gradient(90deg, #111 10px, transparent 10px) 0 0/18px 18px,
        linear-gradient(#111 10px, transparent 10px) 0 0/18px 18px,
        #fff;
    border: 8px solid #fff;
    box-shadow: 0 0 0 1px #d8e0ee;
}

body.theme-dark .demo-step,
body.theme-dark .demo-mini,
body.theme-dark .demo-fake-row {
    background: #111827 !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

body.theme-dark .demo-fake-qr {
    background:
        linear-gradient(90deg, #111 10px, transparent 10px) 0 0/18px 18px,
        linear-gradient(#111 10px, transparent 10px) 0 0/18px 18px,
        #fff !important;
    border-color: #fff !important;
}

@media (max-width: 900px) {
    .demo-hero,
    .demo-grid {
        grid-template-columns: 1fr;
    }
}


/* --- Stable Beta 0.4 public demo dashboard + login required modal --- */

.public-demo-body {
    min-height: 100vh;
    background: linear-gradient(180deg, #f6f9ff 0%, #eef3fb 260px);
    color: #101828;
}

.public-demo-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,255,255,.94);
    border-bottom: 1px solid #d8e0ee;
    backdrop-filter: blur(14px);
}

.public-demo-topbar-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 18px;
}

.public-demo-nav {
    display: flex;
    gap: 14px;
    align-items: center;
    flex: 1 1 auto;
    overflow-x: auto;
}

.public-demo-nav a,
.public-demo-nav button {
    border: 0;
    background: transparent;
    color: #335075;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    padding: 8px 0;
}

.public-demo-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.demo-shell {
    max-width: 1240px;
    margin: 0 auto;
    padding: 34px 18px 60px;
}

.demo-disabled {
    cursor: pointer;
}

.demo-locked-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 900;
}

.demo-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, .48);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.demo-modal-backdrop.is-open {
    display: flex;
}

.demo-modal {
    width: min(520px, 100%);
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid #d8e0ee;
    box-shadow: 0 28px 80px rgba(15,23,42,.26);
    padding: 24px;
}

.demo-modal h2 {
    margin-top: 0;
}

.demo-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.demo-preview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, .9fr);
    gap: 18px;
    margin-bottom: 22px;
}

.demo-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}

.demo-metric {
    border: 1px solid #d8e0ee;
    background: #ffffff;
    border-radius: 18px;
    padding: 20px;
    text-decoration: none;
    color: #101828;
}

.demo-metric span {
    display: flex;
    justify-content: space-between;
    color: #667085;
}

.demo-metric span::after {
    content: '↗';
    color: #98a2b3;
    font-weight: 900;
}

.demo-metric strong {
    display: block;
    font-size: 34px;
    margin-top: 8px;
}

.demo-fake-table-card {
    overflow: hidden;
}

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

.demo-table th,
.demo-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #e4eaf3;
    text-align: left;
}

.demo-table th {
    color: #667085;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.demo-workflow-list {
    margin: 0;
    padding-left: 22px;
    color: #516173;
    line-height: 1.7;
}

.demo-qr-card {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
    padding: 14px;
    border: 1px solid #d8e0ee;
    border-radius: 18px;
    background: #f8fbff;
}

.demo-qr-box {
    width: 84px;
    height: 84px;
    border-radius: 12px;
    background:
        linear-gradient(90deg, #111 9px, transparent 9px) 0 0/18px 18px,
        linear-gradient(#111 9px, transparent 9px) 0 0/18px 18px,
        #fff;
    border: 10px solid #fff;
    box-shadow: 0 0 0 1px #d8e0ee;
    flex: 0 0 auto;
}

.demo-hint-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.demo-hint {
    border: 1px solid #d8e0ee;
    border-radius: 18px;
    padding: 18px;
    background: #ffffff;
}

.demo-hint h3 {
    margin-top: 0;
}

@media (max-width: 900px) {
    .demo-preview-grid,
    .demo-metrics,
    .demo-hint-row {
        grid-template-columns: 1fr;
    }

    .public-demo-topbar-inner {
        flex-wrap: wrap;
    }

    .public-demo-actions {
        margin-left: auto;
    }
}


/* --- Stable Beta 0.4 scrollable patch history --- */

.patch-history-scroll {
    max-height: 420px;
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid var(--line, #d8e0ee);
    border-radius: 16px;
}

.patch-history-scroll table {
    margin: 0;
}

.patch-history-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f8fbff;
}

.patch-history-scroll td,
.patch-history-scroll th {
    vertical-align: top;
}

.patch-history-note {
    margin-top: 10px;
    color: var(--muted, #667085);
    font-size: 13px;
}

body.theme-dark .patch-history-scroll {
    border-color: #334155 !important;
    background: #111827 !important;
}

body.theme-dark .patch-history-scroll thead th {
    background: #0f172a !important;
    color: #cbd5e1 !important;
}

body.theme-dark .patch-history-note {
    color: #a8b6ca !important;
}

.public-demo-body .patch-history-scroll {
    background: #ffffff;
}

@media (max-width: 700px) {
    .patch-history-scroll {
        max-height: 360px;
    }
}


/* --- Stable Beta 0.4 public pages with login-required modal --- */

.public-preview-note {
    border: 1px solid #b8c7e6;
    background: #eef4ff;
    color: #1d4ed8;
    border-radius: 16px;
    padding: 14px 16px;
    font-weight: 800;
    margin-bottom: 18px;
}

.public-preview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}

.public-preview-card,
.public-preview-table-card {
    border: 1px solid var(--line, #d8e0ee);
    background: var(--card, #fff);
    border-radius: 18px;
    padding: 20px;
}

.public-preview-card span {
    display: flex;
    justify-content: space-between;
    color: var(--muted, #667085);
}

.public-preview-card span::after {
    content: '↗';
    color: #98a2b3;
    font-weight: 900;
}

.public-preview-card strong {
    display: block;
    font-size: 34px;
    margin-top: 8px;
}

.public-login-required {
    cursor: pointer;
}

.demo-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, .48);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.demo-modal-backdrop.is-open {
    display: flex;
}

.demo-modal {
    width: min(520px, 100%);
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid #d8e0ee;
    box-shadow: 0 28px 80px rgba(15,23,42,.26);
    padding: 24px;
}

.demo-modal h2 {
    margin-top: 0;
}

.demo-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

body.theme-dark .public-preview-note {
    background: #172554 !important;
    border-color: #2563eb !important;
    color: #bfdbfe !important;
}

body.theme-dark .public-preview-card,
body.theme-dark .public-preview-table-card,
body.theme-dark .demo-modal {
    background: #111827 !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

body.theme-dark .public-preview-card span,
body.theme-dark .demo-modal .muted {
    color: #a8b6ca !important;
}

@media (max-width: 900px) {
    .public-preview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .public-preview-grid {
        grid-template-columns: 1fr;
    }
}


/* --- Stable Beta 0.4 public theme toggle --- */

body.theme-dark .public-preview-card,
body.theme-dark .public-preview-table-card,
body.theme-dark .public-preview-note,
body.theme-dark .demo-modal,
body.theme-dark .demo-table,
body.theme-dark .demo-table tbody,
body.theme-dark .demo-table tr {
    background: #111827 !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

body.theme-dark .public-preview-note {
    background: #172554 !important;
    color: #bfdbfe !important;
    border-color: #2563eb !important;
}

body.theme-dark .demo-table th {
    background: #0f172a !important;
    color: #cbd5e1 !important;
}

body.theme-dark .demo-table td {
    background: #111827 !important;
    color: #e5edf8 !important;
    border-color: #334155 !important;
}

body.theme-dark .public-demo-body {
    background: #0b1220 !important;
    color: #f8fafc !important;
}

body.theme-dark .public-demo-topbar {
    background: rgba(15,23,42,.96) !important;
    border-bottom-color: #334155 !important;
}

body.theme-dark .public-demo-nav a,
body.theme-dark .public-demo-nav button {
    color: #cbd5e1 !important;
}


/* --- Stable Beta 0.4 login dashboard button --- */

.auth-extra-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.auth-copy .auth-extra-actions {
    margin-top: 22px;
}

body.theme-dark .auth-extra-actions .btn.ghost,
body.theme-dark .auth-extra-actions .btn.secondary {
    background: #1e293b !important;
    color: #dbeafe !important;
    border-color: #334155 !important;
}


/* --- Stable Beta 0.4 login dashboard preview area --- */

.auth-preview-area {
    margin-top: 24px;
    padding: 18px;
    border: 1px solid #d8e0ee;
    border-radius: 18px;
    background: linear-gradient(135deg, #f8fbff 0%, #eef4ff 100%);
    display: grid;
    gap: 14px;
}

.auth-preview-area strong,
.auth-preview-area span {
    display: block;
}

.auth-preview-area strong {
    font-size: 15px;
    color: #101828;
}

.auth-preview-area span {
    margin-top: 4px;
    color: #516173;
    line-height: 1.5;
}

.auth-preview-area .preview-btn {
    width: fit-content;
}

.auth-preview-link {
    margin: 16px 0 0;
    color: #667085;
    font-size: 14px;
}

.auth-preview-link a {
    font-weight: 800;
}

body.theme-dark .auth-preview-area {
    background: linear-gradient(135deg, #111827 0%, #172554 100%) !important;
    border-color: #334155 !important;
}

body.theme-dark .auth-preview-area strong {
    color: #f8fafc !important;
}

body.theme-dark .auth-preview-area span,
body.theme-dark .auth-preview-link {
    color: #a8b6ca !important;
}

@media (max-width: 720px) {
    .auth-preview-area .preview-btn {
        width: 100%;
        justify-content: center;
    }
}


/* --- Stable Beta 0.4 top bar spacing polish --- */

/*
Keeps the main navigation on one clean row on desktop, with brand left and
actions right. It only switches to a wrapping/mobile layout when the viewport
is genuinely narrow.
*/

.topbar {
    min-height: 74px;
}

.topbar-inner {
    max-width: 1480px !important;
    width: 100%;
    padding: 14px 28px !important;
    gap: 26px !important;
    justify-content: flex-start;
}

.brand {
    margin-right: 10px;
}

.main-nav {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    column-gap: 24px !important;
    row-gap: 8px !important;
    min-width: 0 !important;
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
}

.main-nav::-webkit-scrollbar {
    display: none;
}

.main-nav a {
    padding: 8px 0;
    line-height: 1.1;
}

.topbar-actions {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 14px !important;
    flex: 0 0 auto !important;
}

.scan-button {
    gap: 7px;
    min-width: 74px;
}

.profile-trigger {
    max-width: 220px;
}

.mode-switch-form {
    flex: 0 0 auto;
}

@media (min-width: 1200px) {
    .topbar-inner {
        flex-wrap: nowrap !important;
    }

    .main-nav {
        flex-wrap: nowrap !important;
    }
}

@media (max-width: 1199px) {
    .topbar {
        min-height: auto;
    }

    .topbar-inner {
        align-items: flex-start !important;
        flex-wrap: wrap !important;
        gap: 12px 18px !important;
    }

    .main-nav {
        order: 3;
        width: 100%;
        flex-basis: 100% !important;
        padding-bottom: 4px;
        column-gap: 18px !important;
    }

    .topbar-actions {
        margin-left: auto !important;
    }
}

@media (max-width: 700px) {
    .topbar-inner {
        padding: 12px 16px !important;
    }

    .main-nav {
        column-gap: 16px !important;
    }

    .scan-button span:last-child {
        display: none;
    }

    .scan-button {
        min-width: 42px;
        padding-inline: 12px;
    }
}


/* --- Stable Beta 0.4 footer bottom placement --- */

/*
Keeps the footer at the bottom of the viewport on short pages,
without making it fixed or covering content.
*/

html,
body {
    min-height: 100%;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.topbar {
    flex: 0 0 auto;
}

.app-shell {
    flex: 1 0 auto;
    width: 100%;
}

.site-footer {
    flex: 0 0 auto;
    width: 100%;
    margin-top: auto !important;
    padding-top: 24px;
    padding-bottom: 28px;
}

.site-footer-inner,
.site-footer .footer-inner {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 700px) {
    .site-footer {
        padding-bottom: 22px;
    }
}


/* --- Stable Beta 0.4 mobile top bar cleanup --- */

/*
Mobile top bar:
- Brand and account controls stay in one compact row.
- Navigation becomes a horizontal scroll strip instead of wrapping into a tall block.
- Scan becomes an icon-only square on mobile.
- Profile name hides on mobile, leaving the avatar.
*/

@media (max-width: 760px) {
    .topbar {
        min-height: auto !important;
    }

    .topbar-inner {
        padding: 12px 14px 10px !important;
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        grid-template-areas:
            "brand spacer actions"
            "nav nav nav" !important;
        align-items: center !important;
        gap: 10px 12px !important;
        max-width: 100% !important;
    }

    .brand {
        grid-area: brand !important;
        margin: 0 !important;
        gap: 7px !important;
        min-width: 0 !important;
    }

    .brand-name {
        font-size: 22px !important;
        letter-spacing: -0.05em !important;
    }

    .beta-badge {
        height: 18px !important;
        padding: 0 7px !important;
        font-size: 9px !important;
    }

    .topbar-actions {
        grid-area: actions !important;
        margin-left: 0 !important;
        justify-self: end !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
    }

    .scan-button {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        padding: 0 !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .scan-button span:not(.scan-icon) {
        display: none !important;
    }

    .scan-icon {
        font-size: 17px !important;
    }

    .profile-trigger {
        width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 4px !important;
        border-radius: 999px !important;
        justify-content: center !important;
    }

    .profile-label {
        display: none !important;
    }

    .profile-avatar {
        width: 34px !important;
        height: 34px !important;
    }

    .mode-switch {
        width: 62px !important;
        height: 36px !important;
    }

    .mode-knob {
        width: 30px !important;
        height: 30px !important;
        font-size: 14px !important;
    }

    .mode-switch.mode-dark .mode-knob {
        transform: translateX(26px) !important;
    }

    .mode-track-sun {
        left: 9px !important;
    }

    .mode-track-moon {
        right: 10px !important;
    }

    .main-nav {
        grid-area: nav !important;
        order: unset !important;
        width: 100% !important;
        flex-basis: auto !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        column-gap: 8px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 2px 0 4px !important;
        margin: 0 !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap !important;
    }

    .main-nav::-webkit-scrollbar {
        display: none !important;
    }

    .main-nav a {
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        min-height: 34px !important;
        padding: 0 12px !important;
        border-radius: 999px !important;
        background: #eef4ff !important;
        color: #335075 !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        text-decoration: none !important;
    }

    .main-nav a:hover {
        background: #dbeafe !important;
        color: #1d4ed8 !important;
    }

    body.theme-dark .main-nav a {
        background: #1e293b !important;
        color: #cbd5e1 !important;
    }

    body.theme-dark .main-nav a:hover {
        background: #26344a !important;
        color: #ffffff !important;
    }

    .profile-dropdown {
        right: -74px !important;
        width: min(280px, calc(100vw - 28px)) !important;
    }

    .app-shell {
        padding-top: 22px !important;
    }
}

@media (max-width: 420px) {
    .topbar-inner {
        padding-left: 10px !important;
        padding-right: 10px !important;
        gap: 9px 8px !important;
    }

    .brand-name {
        font-size: 20px !important;
    }

    .beta-badge {
        font-size: 8px !important;
        padding: 0 6px !important;
    }

    .topbar-actions {
        gap: 6px !important;
    }

    .scan-button,
    .profile-trigger {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }

    .profile-avatar {
        width: 31px !important;
        height: 31px !important;
    }

    .mode-switch {
        width: 58px !important;
        height: 34px !important;
    }

    .mode-knob {
        width: 28px !important;
        height: 28px !important;
    }

    .mode-switch.mode-dark .mode-knob {
        transform: translateX(24px) !important;
    }

    .main-nav a {
        min-height: 32px !important;
        padding: 0 10px !important;
        font-size: 12px !important;
    }
}


/* --- Stable Beta 0.4 mobile burger navigation --- */

.mobile-menu-toggle {
    display: none;
}

@media (max-width: 760px) {
    .topbar-inner {
        grid-template-columns: auto auto 1fr auto !important;
        grid-template-areas: "brand menu spacer actions" !important;
    }

    .mobile-menu-toggle {
        grid-area: menu !important;
        display: inline-flex !important;
        width: 42px !important;
        height: 42px !important;
        border: 1px solid #d8e0ee !important;
        border-radius: 14px !important;
        background: #ffffff !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        gap: 4px !important;
        padding: 0 !important;
        cursor: pointer !important;
        box-shadow: none !important;
    }

    .mobile-menu-toggle span {
        width: 18px !important;
        height: 2px !important;
        border-radius: 999px !important;
        background: #101828 !important;
        display: block !important;
        transition: transform .16s ease, opacity .16s ease !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(1) {
        transform: translateY(6px) rotate(45deg) !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(2) {
        opacity: 0 !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg) !important;
    }

    .main-nav {
        grid-area: nav !important;
        display: none !important;
        width: 100% !important;
        padding: 10px !important;
        margin: 0 !important;
        border: 1px solid #d8e0ee !important;
        border-radius: 18px !important;
        background: #ffffff !important;
        box-shadow: 0 18px 45px rgba(15,23,42,.12) !important;
        overflow: visible !important;
        white-space: normal !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .main-nav.is-open {
        display: flex !important;
    }

    .main-nav a {
        min-height: 38px !important;
        padding: 0 13px !important;
        border-radius: 999px !important;
        background: #eef4ff !important;
        color: #335075 !important;
        font-size: 13px !important;
        font-weight: 800 !important;
    }

    body.theme-dark .mobile-menu-toggle {
        background: #111827 !important;
        border-color: #334155 !important;
    }

    body.theme-dark .mobile-menu-toggle span {
        background: #f8fafc !important;
    }

    body.theme-dark .main-nav {
        background: #111827 !important;
        border-color: #334155 !important;
        box-shadow: 0 18px 45px rgba(0,0,0,.22) !important;
    }

    body.theme-dark .main-nav a {
        background: #1e293b !important;
        color: #cbd5e1 !important;
    }

    body.theme-dark .main-nav a:hover {
        background: #26344a !important;
        color: #ffffff !important;
    }
}

@media (max-width: 420px) {
    .mobile-menu-toggle {
        width: 40px !important;
        height: 40px !important;
    }

    .topbar-inner {
        grid-template-columns: auto auto 1fr auto !important;
    }
}


/* --- Stable Beta 0.4 mobile burger force fix --- */

/*
The earlier mobile menu CSS was being overridden by older mobile nav rules.
This block sits at the end of the stylesheet and forcefully:
- shows the burger button
- hides the nav by default on mobile
- only shows the nav after JS adds .is-open
*/

@media (max-width: 760px) {
    .topbar-inner {
        display: grid !important;
        grid-template-columns: auto auto 1fr auto !important;
        grid-template-areas:
            "brand menu spacer actions"
            "nav nav nav nav" !important;
        align-items: center !important;
        gap: 10px 10px !important;
        padding: 12px 14px !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .brand {
        grid-area: brand !important;
        margin: 0 !important;
    }

    .mobile-menu-toggle {
        grid-area: menu !important;
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        border: 1px solid #d8e0ee !important;
        border-radius: 14px !important;
        background: #ffffff !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        gap: 4px !important;
        padding: 0 !important;
        margin: 0 !important;
        cursor: pointer !important;
        box-shadow: none !important;
        appearance: none !important;
        -webkit-appearance: none !important;
    }

    .mobile-menu-toggle span {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 18px !important;
        height: 2px !important;
        min-height: 2px !important;
        border-radius: 999px !important;
        background: #101828 !important;
        transform-origin: center !important;
        transition: transform .16s ease, opacity .16s ease !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(1) {
        transform: translateY(6px) rotate(45deg) !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(2) {
        opacity: 0 !important;
    }

    .mobile-menu-toggle.is-open span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg) !important;
    }

    .topbar-actions {
        grid-area: actions !important;
        justify-self: end !important;
        margin-left: 0 !important;
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }

    .main-nav,
    .topbar .main-nav,
    header .main-nav {
        grid-area: nav !important;
        order: unset !important;
        width: 100% !important;
        flex-basis: 100% !important;
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .main-nav.is-open,
    .topbar .main-nav.is-open,
    header .main-nav.is-open {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        overflow: visible !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 10px !important;
        margin: 0 !important;
        border: 1px solid #d8e0ee !important;
        border-radius: 18px !important;
        background: #ffffff !important;
        box-shadow: 0 18px 45px rgba(15,23,42,.12) !important;
        white-space: normal !important;
    }

    .main-nav.is-open a {
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        min-height: 38px !important;
        padding: 0 13px !important;
        border-radius: 999px !important;
        background: #eef4ff !important;
        color: #335075 !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        text-decoration: none !important;
    }

    body.theme-dark .mobile-menu-toggle {
        background: #111827 !important;
        border-color: #334155 !important;
    }

    body.theme-dark .mobile-menu-toggle span {
        background: #f8fafc !important;
    }

    body.theme-dark .main-nav.is-open {
        background: #111827 !important;
        border-color: #334155 !important;
        box-shadow: 0 18px 45px rgba(0,0,0,.22) !important;
    }

    body.theme-dark .main-nav.is-open a {
        background: #1e293b !important;
        color: #cbd5e1 !important;
    }
}

@media (min-width: 761px) {
    .mobile-menu-toggle {
        display: none !important;
    }

    .main-nav {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
    }
}


/* --- Stable Beta 0.4 mobile bottom navigation --- */

/*
Mobile now uses a native-app style bottom nav:
Dashboard, Items, Locations, Folders, QR Labels, Scan.
The full desktop nav stays on desktop/tablet.
*/

.mobile-bottom-nav {
    display: none;
}

@media (max-width: 760px) {
    /* Keep mobile header compact and remove the large nav area. */
    .topbar-inner {
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        grid-template-areas: "brand spacer actions" !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 12px 14px !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .brand {
        grid-area: brand !important;
        margin: 0 !important;
    }

    .topbar-actions {
        grid-area: actions !important;
        justify-self: end !important;
        margin-left: 0 !important;
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }

    .main-nav,
    .topbar .main-nav,
    header .main-nav {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
    }

    .mobile-menu-toggle {
        display: none !important;
    }

    .scan-button {
        display: none !important;
    }

    .profile-trigger {
        width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        padding: 4px !important;
        border-radius: 999px !important;
        justify-content: center !important;
    }

    .profile-label {
        display: none !important;
    }

    .profile-avatar {
        width: 32px !important;
        height: 32px !important;
    }

    .mode-switch {
        width: 58px !important;
        height: 34px !important;
    }

    .mode-knob {
        width: 28px !important;
        height: 28px !important;
        font-size: 14px !important;
    }

    .mode-switch.mode-dark .mode-knob {
        transform: translateX(24px) !important;
    }

    .mobile-bottom-nav {
        position: fixed !important;
        left: 10px !important;
        right: 10px !important;
        bottom: calc(10px + env(safe-area-inset-bottom)) !important;
        z-index: 999 !important;
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 4px !important;
        padding: 8px !important;
        border: 1px solid rgba(216, 224, 238, .92) !important;
        border-radius: 24px !important;
        background: rgba(255, 255, 255, .94) !important;
        box-shadow: 0 18px 55px rgba(15, 23, 42, .22) !important;
        backdrop-filter: blur(18px) !important;
        -webkit-backdrop-filter: blur(18px) !important;
    }

    .mobile-bottom-link {
        min-width: 0 !important;
        min-height: 54px !important;
        border-radius: 18px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        text-decoration: none !important;
        color: #475467 !important;
        font-size: 10px !important;
        font-weight: 850 !important;
        line-height: 1 !important;
        letter-spacing: -0.01em !important;
        white-space: nowrap !important;
    }

    .mobile-bottom-icon {
        font-size: 18px !important;
        line-height: 1 !important;
        display: block !important;
    }

    .mobile-bottom-link:hover,
    .mobile-bottom-link:focus {
        background: #eef4ff !important;
        color: #1d4ed8 !important;
        text-decoration: none !important;
    }

    .mobile-bottom-scan {
        background: #2563eb !important;
        color: #ffffff !important;
        box-shadow: 0 10px 24px rgba(37, 99, 235, .28) !important;
    }

    .mobile-bottom-scan:hover,
    .mobile-bottom-scan:focus {
        background: #1d4ed8 !important;
        color: #ffffff !important;
    }

    .app-shell {
        padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
    }

    .site-footer {
        padding-bottom: calc(112px + env(safe-area-inset-bottom)) !important;
    }

    body.theme-dark .mobile-bottom-nav {
        background: rgba(15, 23, 42, .94) !important;
        border-color: #334155 !important;
        box-shadow: 0 18px 55px rgba(0, 0, 0, .36) !important;
    }

    body.theme-dark .mobile-bottom-link {
        color: #cbd5e1 !important;
    }

    body.theme-dark .mobile-bottom-link:hover,
    body.theme-dark .mobile-bottom-link:focus {
        background: #1e293b !important;
        color: #ffffff !important;
    }

    body.theme-dark .mobile-bottom-scan {
        background: #2563eb !important;
        color: #ffffff !important;
    }
}

@media (max-width: 390px) {
    .mobile-bottom-nav {
        left: 8px !important;
        right: 8px !important;
        padding: 6px !important;
        gap: 2px !important;
        border-radius: 22px !important;
    }

    .mobile-bottom-link {
        min-height: 50px !important;
        font-size: 9px !important;
        border-radius: 16px !important;
    }

    .mobile-bottom-icon {
        font-size: 17px !important;
    }
}


/* --- Stable Beta 0.4 mobile bottom nav overlay force fix --- */

/*
Strict behaviour:
- Hidden on desktop.
- Fixed overlay on mobile/coarse pointer devices.
- Stays pinned to viewport, not the bottom of the document.
*/

.mobile-bottom-nav {
    display: none !important;
}

/* Desktop and laptop safety: never show bottom nav on normal desktop widths. */
@media (min-width: 821px) and (hover: hover) and (pointer: fine) {
    .mobile-bottom-nav {
        display: none !important;
    }
}

/* Phones and narrow mobile layouts */
@media (max-width: 820px), (hover: none) and (pointer: coarse) and (max-width: 1024px) {
    body {
        padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important;
    }

    .app-shell {
        padding-bottom: calc(112px + env(safe-area-inset-bottom)) !important;
    }

    .site-footer {
        padding-bottom: calc(122px + env(safe-area-inset-bottom)) !important;
    }

    .mobile-bottom-nav {
        position: fixed !important;
        inset-inline: 10px !important;
        left: 10px !important;
        right: 10px !important;
        bottom: calc(10px + env(safe-area-inset-bottom)) !important;
        top: auto !important;
        z-index: 2147483000 !important;
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 4px !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        min-height: 68px !important;
        margin: 0 !important;
        padding: 8px !important;
        border: 1px solid rgba(216, 224, 238, .94) !important;
        border-radius: 24px !important;
        background: rgba(255, 255, 255, .96) !important;
        box-shadow: 0 18px 55px rgba(15, 23, 42, .24) !important;
        backdrop-filter: blur(18px) !important;
        -webkit-backdrop-filter: blur(18px) !important;
        transform: translate3d(0, 0, 0) !important;
        will-change: transform !important;
        pointer-events: auto !important;
    }

    .mobile-bottom-link {
        min-width: 0 !important;
        min-height: 52px !important;
        border-radius: 18px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        text-decoration: none !important;
        color: #475467 !important;
        font-size: 10px !important;
        font-weight: 850 !important;
        line-height: 1 !important;
        letter-spacing: -0.01em !important;
        white-space: nowrap !important;
        overflow: hidden !important;
    }

    .mobile-bottom-icon {
        font-size: 18px !important;
        line-height: 1 !important;
        display: block !important;
    }

    .mobile-bottom-link:hover,
    .mobile-bottom-link:focus {
        background: #eef4ff !important;
        color: #1d4ed8 !important;
        text-decoration: none !important;
    }

    .mobile-bottom-scan {
        background: #2563eb !important;
        color: #ffffff !important;
        box-shadow: 0 10px 24px rgba(37, 99, 235, .28) !important;
    }

    .mobile-bottom-scan:hover,
    .mobile-bottom-scan:focus {
        background: #1d4ed8 !important;
        color: #ffffff !important;
    }

    body.theme-dark .mobile-bottom-nav {
        background: rgba(15, 23, 42, .96) !important;
        border-color: #334155 !important;
        box-shadow: 0 18px 55px rgba(0, 0, 0, .38) !important;
    }

    body.theme-dark .mobile-bottom-link {
        color: #cbd5e1 !important;
    }

    body.theme-dark .mobile-bottom-link:hover,
    body.theme-dark .mobile-bottom-link:focus {
        background: #1e293b !important;
        color: #ffffff !important;
    }

    body.theme-dark .mobile-bottom-scan {
        background: #2563eb !important;
        color: #ffffff !important;
    }
}

@media (max-width: 390px) {
    .mobile-bottom-nav {
        left: 8px !important;
        right: 8px !important;
        inset-inline: 8px !important;
        bottom: calc(8px + env(safe-area-inset-bottom)) !important;
        padding: 6px !important;
        gap: 2px !important;
        border-radius: 22px !important;
        min-height: 64px !important;
    }

    .mobile-bottom-link {
        min-height: 50px !important;
        font-size: 9px !important;
        border-radius: 16px !important;
    }

    .mobile-bottom-icon {
        font-size: 17px !important;
    }
}


/* --- Stable Beta 0.4 JS mobile bottom nav overlay fix --- */

/*
The mobile bottom nav is now created by JS at the end of <body>
and forced with inline fixed-position styles. CSS below handles fallback,
spacing, and hiding top navigation on mobile.
*/

.mobile-bottom-nav {
    display: none !important;
}

@media (min-width: 821px) {
    .mobile-bottom-nav,
    #mobileBottomNav {
        display: none !important;
    }
}

@media (max-width: 820px) {
    body.has-mobile-bottom-nav {
        padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
    }

    body.has-mobile-bottom-nav .app-shell {
        padding-bottom: calc(124px + env(safe-area-inset-bottom)) !important;
    }

    body.has-mobile-bottom-nav .site-footer {
        padding-bottom: calc(132px + env(safe-area-inset-bottom)) !important;
    }

    .topbar .main-nav,
    header .main-nav,
    .main-nav {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .scan-button {
        display: none !important;
    }

    #mobileBottomNav .mobile-bottom-link:hover,
    #mobileBottomNav .mobile-bottom-link:focus {
        background: #eef4ff !important;
        color: #1d4ed8 !important;
    }

    body.theme-dark #mobileBottomNav .mobile-bottom-link:hover,
    body.theme-dark #mobileBottomNav .mobile-bottom-link:focus {
        background: #1e293b !important;
        color: #ffffff !important;
    }
}

@media (max-width: 390px) {
    #mobileBottomNav {
        left: 8px !important;
        right: 8px !important;
        bottom: calc(8px + env(safe-area-inset-bottom)) !important;
        padding: 6px !important;
        gap: 4px !important;
    }

    #mobileBottomNav .mobile-bottom-link {
        min-height: 50px !important;
        font-size: 9px !important;
    }
}


/* --- Stable Beta 0.4 mobile bottom nav: add Scan + remove top mobile nav --- */

/*
Mobile bottom nav now contains:
Dashboard, Items, Locations, Folders, Scan.
Top navigation and top Scan remain hidden on mobile.
*/

@media (max-width: 820px) {
    .topbar .main-nav,
    header .main-nav,
    .main-nav,
    .scan-button {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
    }

    #mobileBottomNav,
    .mobile-bottom-nav {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }

    #mobileBottomNav .mobile-bottom-scan,
    .mobile-bottom-nav .mobile-bottom-scan {
        background: #2563eb !important;
        color: #ffffff !important;
        box-shadow: 0 10px 24px rgba(37, 99, 235, .28) !important;
    }

    #mobileBottomNav .mobile-bottom-scan:hover,
    #mobileBottomNav .mobile-bottom-scan:focus,
    .mobile-bottom-nav .mobile-bottom-scan:hover,
    .mobile-bottom-nav .mobile-bottom-scan:focus {
        background: #1d4ed8 !important;
        color: #ffffff !important;
    }
}

@media (max-width: 390px) {
    #mobileBottomNav .mobile-bottom-link {
        font-size: 8.5px !important;
    }

    #mobileBottomNav .mobile-bottom-icon {
        font-size: 17px !important;
    }
}


/* --- Stable Beta 0.4 force hide top mobile nav --- */

/*
Hard stop: on mobile the header must only show brand/account/theme controls.
Dashboard/Items/Locations/Folders/Scan must not appear in the top bar.
They live in the bottom overlay nav instead.
*/

@media screen and (max-width: 820px) {
    header nav.main-nav,
    .topbar nav.main-nav,
    .topbar .main-nav,
    header .main-nav,
    body .main-nav {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        left: -99999px !important;
        top: -99999px !important;
        width: 0 !important;
        max-width: 0 !important;
        height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        transform: none !important;
    }

    header .scan-button,
    .topbar .scan-button,
    body .topbar .scan-button {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        left: -99999px !important;
        top: -99999px !important;
        width: 0 !important;
        max-width: 0 !important;
        min-width: 0 !important;
        height: 0 !important;
        max-height: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
    }

    .topbar-inner {
        grid-template-areas: "brand spacer actions" !important;
        grid-template-columns: auto 1fr auto !important;
    }
}

@media screen and (min-width: 821px) {
    header nav.main-nav,
    .topbar nav.main-nav,
    .topbar .main-nav {
        position: static !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
}


/* --- Stable Beta 0.4 mobile More burger menu --- */

/*
Bottom mobile nav keeps the primary actions:
Dashboard, Items, Locations, Folders, Scan.
The header burger now holds the remaining pages.
*/

.mobile-more-toggle,
.mobile-more-menu {
    display: none;
}

@media screen and (max-width: 820px) {
    .topbar-inner {
        display: grid !important;
        grid-template-columns: auto auto 1fr auto !important;
        grid-template-areas: "brand more spacer actions" !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 12px 14px !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .mobile-more-toggle {
        grid-area: more !important;
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        border: 1px solid #d8e0ee !important;
        border-radius: 14px !important;
        background: #ffffff !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        gap: 4px !important;
        padding: 0 !important;
        margin: 0 !important;
        cursor: pointer !important;
        box-shadow: none !important;
        appearance: none !important;
        -webkit-appearance: none !important;
    }

    .mobile-more-toggle span {
        width: 18px !important;
        height: 2px !important;
        min-height: 2px !important;
        display: block !important;
        border-radius: 999px !important;
        background: #101828 !important;
        transition: transform .16s ease, opacity .16s ease !important;
    }

    .mobile-more-toggle.is-open span:nth-child(1) {
        transform: translateY(6px) rotate(45deg) !important;
    }

    .mobile-more-toggle.is-open span:nth-child(2) {
        opacity: 0 !important;
    }

    .mobile-more-toggle.is-open span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg) !important;
    }

    .mobile-more-menu {
        position: fixed !important;
        inset: 0 !important;
        z-index: 2147483600 !important;
        display: none !important;
        padding: 74px 12px calc(104px + env(safe-area-inset-bottom)) !important;
        background: rgba(15, 23, 42, .18) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
    }

    .mobile-more-menu.is-open {
        display: block !important;
    }

    .mobile-more-panel {
        width: min(420px, 100%) !important;
        margin: 0 auto !important;
        padding: 14px !important;
        border-radius: 24px !important;
        border: 1px solid #d8e0ee !important;
        background: rgba(255,255,255,.98) !important;
        box-shadow: 0 22px 65px rgba(15,23,42,.24) !important;
    }

    .mobile-more-head {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        margin-bottom: 12px !important;
    }

    .mobile-more-head strong {
        color: #101828 !important;
        font-size: 16px !important;
        font-weight: 900 !important;
    }

    .mobile-more-close {
        width: 38px !important;
        height: 38px !important;
        border-radius: 999px !important;
        border: 1px solid #d8e0ee !important;
        background: #ffffff !important;
        color: #101828 !important;
        font-size: 24px !important;
        line-height: 1 !important;
        cursor: pointer !important;
    }

    .mobile-more-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .mobile-more-grid a {
        display: flex !important;
        align-items: center !important;
        min-height: 46px !important;
        padding: 0 14px !important;
        border-radius: 16px !important;
        background: #eef4ff !important;
        color: #335075 !important;
        font-size: 14px !important;
        font-weight: 850 !important;
        text-decoration: none !important;
    }

    .mobile-more-grid a:hover,
    .mobile-more-grid a:focus {
        background: #dbeafe !important;
        color: #1d4ed8 !important;
        text-decoration: none !important;
    }

    body.theme-dark .mobile-more-toggle {
        background: #111827 !important;
        border-color: #334155 !important;
    }

    body.theme-dark .mobile-more-toggle span {
        background: #f8fafc !important;
    }

    body.theme-dark .mobile-more-menu {
        background: rgba(0, 0, 0, .28) !important;
    }

    body.theme-dark .mobile-more-panel {
        background: rgba(15,23,42,.98) !important;
        border-color: #334155 !important;
        box-shadow: 0 22px 65px rgba(0,0,0,.42) !important;
    }

    body.theme-dark .mobile-more-head strong {
        color: #f8fafc !important;
    }

    body.theme-dark .mobile-more-close {
        background: #111827 !important;
        border-color: #334155 !important;
        color: #f8fafc !important;
    }

    body.theme-dark .mobile-more-grid a {
        background: #1e293b !important;
        color: #cbd5e1 !important;
    }

    body.theme-dark .mobile-more-grid a:hover,
    body.theme-dark .mobile-more-grid a:focus {
        background: #26344a !important;
        color: #ffffff !important;
    }
}

@media screen and (min-width: 821px) {
    .mobile-more-toggle,
    .mobile-more-menu {
        display: none !important;
    }
}


/* --- Stable Beta 0.4 mobile More arrow repair --- */

/*
Repair version:
- Restores the last known working mobile More menu files.
- Keeps the same working menu JS and panel.
- Uses a text dropdown trigger instead of changing the menu structure.
*/

@media screen and (max-width: 820px) {
    .mobile-more-toggle {
        width: auto !important;
        min-width: 74px !important;
        height: 42px !important;
        min-height: 42px !important;
        padding: 0 12px !important;
        flex-direction: row !important;
        gap: 0 !important;
        font: inherit !important;
    }

    .mobile-more-toggle .mobile-more-arrow-icon {
        display: block !important;
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        background: transparent !important;
        color: #101828 !important;
        font-size: 13px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        letter-spacing: -0.01em !important;
        transform: none !important;
        transition: transform .16s ease !important;
        white-space: nowrap !important;
    }

    .mobile-more-toggle .mobile-more-hidden-line {
        display: none !important;
    }

    .mobile-more-toggle.is-open .mobile-more-arrow-icon {
        transform: none !important;
    }

    body.theme-dark .mobile-more-toggle .mobile-more-arrow-icon {
        background: transparent !important;
        color: #f8fafc !important;
    }
}


/* --- Stable Beta 0.4 combined QR navigation --- */

/*
QR Labels and Made QR codes now appear as one navigation item: QR Codes.
The separate page can still exist internally, but the main nav is cleaner.
*/



/* --- Stable Beta 0.4 Registered QR codes safe repair --- */

/*
Safe repair after the previous label patch:
- Restores the last styled CSS file.
- Removes the old mobile " / labels" suffix.
*/

.mobile-more-grid a[href="qr-labels.php"]::after {
    content: "" !important;
    display: none !important;
}


/* --- Stable Beta 0.4 registered QR page labels --- */

/*
User-facing QR wording is now Registered QR codes.
The underlying filenames stay the same so old links keep working.
*/


/* --- Stable Beta 0.4 registered QR duplicate label fix --- */

/*
Fix is mostly PHP text cleanup.
QR Labels remains the label generator.
Registered QR codes remains the registry/list page.
*/


/* --- Stable Beta 0.4 Registered QR codes layout polish --- */

/*
Registered QR codes page layout:
- Better hero/header balance.
- Summary stats become proper cards.
- Search/management sections align better.
- Mobile remains stacked and readable.
*/

.qr-registry-page {
    max-width: 1240px !important;
    margin: 0 auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

.qr-registry-page > .page-head,
.qr-registry-page .page-head,
.qr-registry-page > header:first-child {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 18px !important;
    align-items: start !important;
    margin-bottom: 22px !important;
}

.qr-registry-page h1 {
    margin-bottom: 8px !important;
}

.qr-registry-page h1 + .muted,
.qr-registry-page h1 + p {
    max-width: 720px !important;
    line-height: 1.55 !important;
}

/* The small count links under the header */
.qr-registry-page h1 ~ p a,
.qr-registry-page > p a {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 38px !important;
    padding: 0 13px !important;
    border-radius: 999px !important;
    background: #eef4ff !important;
    color: #1d4ed8 !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    margin: 4px 8px 4px 0 !important;
}

/* Make the count block feel like a proper dashboard strip */
.qr-registry-page > p:has(a) {
    margin: 18px 0 14px !important;
}

/* Management/search cards should not feel narrow and random */
.qr-registry-page .card {
    max-width: none !important;
}

.qr-registry-page .card:has(input[type="search"]),
.qr-registry-page .card:has(input[name="q"]),
.qr-registry-page .card:has(select[name="filter"]),
.qr-registry-page .card:has(select) {
    margin-top: 20px !important;
}

.qr-registry-page .card h2,
.qr-registry-page .card h3 {
    margin-top: 0 !important;
}

/* Better two-column form feel inside the search panel */
.qr-registry-page .form-grid,
.qr-registry-page form .grid,
.qr-registry-page form {
    gap: 16px !important;
}

.qr-registry-page .btn-row,
.qr-registry-page .form-actions {
    gap: 10px !important;
}

/* Registry table/card spacing */
.qr-registry-page table {
    width: 100% !important;
}

.qr-registry-page .table-wrap,
.qr-registry-page .card:has(table) {
    overflow-x: auto !important;
}

/* Make the top action button feel aligned */
.qr-registry-page .page-actions,
.qr-registry-page .actions {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

/* Dark mode */
body.theme-dark .qr-registry-page h1 ~ p a,
body.theme-dark .qr-registry-page > p a {
    background: #1e293b !important;
    color: #dbeafe !important;
}

@media (min-width: 900px) {
    .qr-registry-page {
        padding-top: 34px !important;
    }

    /* Turn the top count links into a neat row */
    .qr-registry-page h1 ~ p,
    .qr-registry-page > p {
        max-width: 900px !important;
    }
}

@media (max-width: 820px) {
    .qr-registry-page {
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-top: 22px !important;
    }

    .qr-registry-page > .page-head,
    .qr-registry-page .page-head,
    .qr-registry-page > header:first-child {
        grid-template-columns: 1fr !important;
    }

    .qr-registry-page .page-actions,
    .qr-registry-page .actions {
        justify-content: flex-start !important;
    }

    .qr-registry-page h1 ~ p a,
    .qr-registry-page > p a {
        width: 100% !important;
        justify-content: space-between !important;
    }
}



/* --- Stable Beta 0.4 QR nav and rotate image fix --- */

/*
QR Labels remains the label printer.
Registered QR codes remains the registry/list page.
Location image rotation now returns to the visual card and uses filemtime cache busting.
*/

#location-visual {
    scroll-margin-top: 110px;
}

.location-visual-actions form {
    margin: 0;
}


/* --- Stable Beta 0.4 location edit link repair --- */

/*
Location edit links now point to location-edit.php instead of Beta notes.
*/


/* --- Stable Beta 0.4 hard location link repair --- */

/*
Location add/edit links are corrected in PHP and also protected by page-local JS.
This prevents stale or corrupted hrefs sending users to Beta notes.
*/


/* --- Stable Beta 0.4 release label --- */

.beta-badge {
    white-space: nowrap;
}

.auth-panel.auth-copy .eyebrow,
.auth-body .eyebrow,
.auth-brand,
.brand-name {
    font-family: inherit;
}



/* --- Stable Beta 0.4 badge duplicate fix --- */

.beta-badge {
    text-transform: uppercase;
    white-space: nowrap;
}


/* --- Stable Beta 0.4 QR label size/style fix --- */

/*
QR Labels page now controls physical QR size using mm-based CSS and JS.
Quantity is compacted and QR style options are available:
Standard, Branded ItemID centre, Rounded, Dot style.
*/


/* --- Stable Beta 0.4 10mm QR size option --- */

/*
Adds a 10mm Tiny QR size.
Tiny QR codes are useful for small labels, but should be test-scanned after printing.
*/

@media screen, print {
    .print-label-card {
        min-width: calc(var(--qr-mm) + 16mm);
    }

    .qr-wrap[data-mm="10"] + .print-code {
        overflow-wrap: anywhere;
        font-size: 10px;
        letter-spacing: .02em;
    }

    .qr-wrap[data-mm="10"] .qr-centre-badge {
        min-width: 6mm;
        height: 3.2mm;
        font-size: 1.55mm;
        border-radius: 1mm;
        padding: 0 .8mm;
    }
}


/* --- Dashboard preview fix --- */

.public-preview-note {
    margin-bottom: 18px;
    padding: 12px 14px;
    border: 1px solid #d8e0ee;
    border-radius: 16px;
    background: #eef4ff;
    color: #335075;
    font-weight: 800;
}

.demo-modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(15, 23, 42, .35);
    padding: 24px;
    align-items: center;
    justify-content: center;
}

.demo-modal-backdrop.is-open {
    display: flex;
}

.demo-modal {
    width: min(460px, 100%);
    border-radius: 24px;
    border: 1px solid #d8e0ee;
    background: #ffffff;
    padding: 22px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .24);
}

.demo-modal-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
}

body.theme-dark .public-preview-note {
    background: #102033;
    border-color: #334155;
    color: #dbeafe;
}

body.theme-dark .demo-modal {
    background: #111827;
    border-color: #334155;
}


/* --- Single QR info fields patch --- */

.single-label-field-picker,
.label-field-picker {
    margin-top: 10px;
}

.check-pill {
    cursor: pointer;
}

.preview-fields,
.print-fields {
    overflow-wrap: anywhere;
}


/* --- Single QR live field preview fix --- */

/*
Item/location single QR fields now render all available rows and hide/show them live.
Notes and custom fields appear when they exist and are ticked.
*/


/* --- Single QR box and preview size fix --- */

/*
On-screen QR previews use sensible pixel sizes.
Printed QR labels still use the selected physical millimetre size.
Field picker boxes are constrained so they do not become overly long.
*/

.qr-label-preview {
    width: fit-content;
}

.single-label-field-picker {
    max-width: 620px;
}

.single-label-field-picker .label-field-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.single-label-field-picker .check-pill {
    width: auto;
}

@media print {
    .single-print-label .itemid-qr,
    .print-label .itemid-qr {
        max-width: none !important;
        max-height: none !important;
    }
}


/* --- Single QR print physical size fix --- */

/*
The printed single-item/location QR now uses the selected mm size.
Previously older 48mm print CSS overrode the tiny/selected size.
*/

@media print {
    .single-print-label,
    .print-label {
        width: calc(var(--single-qr-mm, 35mm) + 45mm) !important;
        min-height: calc(var(--single-qr-mm, 35mm) + 42mm) !important;
        max-width: 95mm !important;
        box-sizing: border-box !important;
    }

    .single-print-label .itemid-qr,
    .print-label .itemid-qr {
        width: var(--single-qr-mm, 35mm) !important;
        height: var(--single-qr-mm, 35mm) !important;
        min-width: var(--single-qr-mm, 35mm) !important;
        min-height: var(--single-qr-mm, 35mm) !important;
        max-width: var(--single-qr-mm, 35mm) !important;
        max-height: var(--single-qr-mm, 35mm) !important;
    }
}


/* --- Single QR text scale fix --- */

/*
Single item/location QR labels now scale text with the selected QR size.
Tiny QR labels use smaller text; larger QR labels can use larger text.
*/

@media print {
    .single-print-label .print-fields,
    .print-label .print-fields,
    .single-print-label .print-field-value,
    .print-label .print-field-value {
        font-size: var(--single-label-text, 9pt) !important;
    }

    .single-print-label .print-field-key,
    .print-label .print-field-key {
        font-size: var(--single-label-key, 10pt) !important;
    }

    .single-print-label .print-footer-brand,
    .print-label .print-footer-brand {
        font-size: var(--single-label-footer, 8pt) !important;
    }
}


/* --- Single QR field buttons polish --- */

/*
The single QR field checkboxes now appear as rounded-square buttons.
This applies to item and location QR label controls.
*/

.single-label-field-picker .label-field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap: 10px;
}

.single-label-field-picker .check-pill {
    min-height: 64px;
    border-radius: 16px;
    width: 100%;
    max-width: none;
}


/* --- Location QR controls match item controls --- */

/*
Location single QR controls now use the same rounded-square field button layout as item QR controls.
*/

.location-single-controls .label-field-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
    gap: 10px !important;
}

.location-single-controls .check-pill {
    min-height: 64px !important;
    border-radius: 16px !important;
    width: 100% !important;
    max-width: none !important;
}


/* --- Location print label field rows match item labels --- */

/*
Location print labels now use the same selected field-row format as item print labels.
This removes the old large LC-0004 / Shelf fallback.
*/

@media print {
    .print-label .print-code,
    .print-label .print-name {
        display: none !important;
    }

    .print-label .print-field-row {
        display: grid;
        grid-template-columns: max-content minmax(0, 1fr);
        gap: 1.4mm;
    }

    .print-label .print-field-key {
        font-weight: 900;
        white-space: nowrap;
    }

    .print-label .print-field-value {
        min-width: 0;
        overflow-wrap: anywhere;
    }
}


/* --- Location QR preview fields --- */

/*
Location QR cards now show a live preview of the selected printed fields,
matching the item QR page behaviour.
*/

.location-qr-preview-box {
    width: fit-content;
    max-width: 270px;
    min-width: 170px;
}


/* --- Location QR exact item-style layout --- */

/*
Location QR controls now use the same stacked layout as item QR controls:
preview, URL, QR size, include info, field buttons, actions.
*/

.item-matched-qr-card .qr-controls-row {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto;
    gap: 14px;
    align-items: end;
}

.item-matched-qr-card .qr-label-preview {
    width: fit-content !important;
}


/* --- Location print page-break hard fix --- */

/*
Stops single location QR labels splitting across two printed pages.
The printed card is now compact, auto-height, and page-break protected.
*/

@media print {
    html,
    body {
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        background: #ffffff !important;
    }

    .print-label {
        display: inline-flex !important;
        position: relative !important;
        width: calc(var(--single-qr-mm, 35mm) + 38mm) !important;
        min-width: 0 !important;
        max-width: 82mm !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 5mm !important;
        gap: 2.6mm !important;
        justify-content: flex-start !important;
        align-items: center !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
        page-break-after: avoid !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    .print-label .itemid-qr {
        width: var(--single-qr-mm, 35mm) !important;
        height: var(--single-qr-mm, 35mm) !important;
        min-width: var(--single-qr-mm, 35mm) !important;
        min-height: var(--single-qr-mm, 35mm) !important;
        max-width: var(--single-qr-mm, 35mm) !important;
        max-height: var(--single-qr-mm, 35mm) !important;
    }

    @page {
        margin: 8mm;
    }
}


/* --- Database-backed scrollable patch history --- */

.patch-history-card {
    overflow: hidden;
}

.patch-history-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.patch-history-scroll {
    max-height: 520px;
    overflow: auto;
    border: 1px solid #d8e0ee;
    border-radius: 18px;
    background: #ffffff;
}

.patch-history-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
}

.patch-history-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f8fafc;
    color: #667085;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.patch-history-table th,
.patch-history-table td {
    padding: 14px 16px;
    vertical-align: top;
    border-bottom: 1px solid #e5ebf5;
}

.patch-history-table tr:last-child td {
    border-bottom: 0;
}

.patch-detail-list {
    margin: 8px 0 0;
    padding-left: 18px;
    color: #667085;
}

.patch-detail-list li {
    margin: 4px 0;
}

body.theme-dark .patch-history-scroll {
    background: #111827;
    border-color: #334155;
}

body.theme-dark .patch-history-table th {
    background: #0f172a;
    color: #cbd5e1;
}

body.theme-dark .patch-history-table th,
body.theme-dark .patch-history-table td {
    border-color: #334155;
}

body.theme-dark .patch-detail-list {
    color: #a8b6ca;
}

@media (max-width: 720px) {
    .patch-history-head {
        display: grid;
    }

    .patch-history-table th,
    .patch-history-table td {
        padding: 12px;
    }
}


/* --- Patch history full seed and order fix --- */

/*
Patch history now shows newest first and includes seeded rows back to the start of ItemID.
*/

.patch-history-scroll {
    max-height: 620px;
}

.patch-history-table td:first-child {
    white-space: nowrap;
}


/* --- Items detail pills patch --- */

/*
Items table now shows all extra item details as small pill summaries under each main row.
*/

.item-detail-row {
    background: #fbfdff;
}

.item-detail-row td {
    padding-top: 0;
    border-top: 0;
}

.item-detail-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 0 14px 132px;
}

.item-detail-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    border: 1px solid #d8e0ee;
    background: #ffffff;
    color: #344054;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 760;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .035);
}

.item-detail-pill strong {
    color: #101828;
    font-weight: 950;
}

.item-detail-pill.notes {
    border-radius: 14px;
    align-items: flex-start;
    max-width: 540px;
    line-height: 1.3;
}

.item-detail-pill.custom,
.item-detail-pill.status {
    background: #eef4ff;
    border-color: #c9d8ff;
}

body.theme-dark .item-detail-row {
    background: #0f172a;
}

body.theme-dark .item-detail-pill {
    background: #111827;
    border-color: #334155;
    color: #cbd5e1;
}

body.theme-dark .item-detail-pill strong {
    color: #f8fafc;
}

body.theme-dark .item-detail-pill.custom,
body.theme-dark .item-detail-pill.status {
    background: #172554;
    border-color: #2563eb;
}

@media (max-width: 900px) {
    .item-detail-pills {
        padding-left: 0;
    }
}


/* --- Inline item detail pills patch --- */

/*
Item detail pills now sit inside the main item cell instead of being placed in a separate table row.
*/

.item-detail-row {
    display: none;
}

.item-detail-pills-inline {
    padding: 4px 0 0 !important;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.item-name-cell .item-detail-pill {
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 999px;
    box-shadow: none;
    max-width: 100%;
}


/* --- Items detail pills across row patch --- */

.item-detail-row {
    display: table-row !important;
}

.item-detail-row-attached td {
    padding-top: 0 !important;
    padding-bottom: 14px !important;
    border-top: 0 !important;
    background: inherit;
}

.item-detail-row-attached .item-detail-spacer {
    width: 92px;
    padding-right: 0 !important;
}

.item-detail-pills-across {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 0;
    margin: -4px 0 0;
    max-width: 100%;
}

.item-detail-pills-inline {
    display: none !important;
}

.item-detail-pills-across .item-detail-pill {
    padding: 5px 9px;
    font-size: 12px;
    border-radius: 999px;
    box-shadow: none;
    max-width: min(520px, 100%);
}

.item-detail-pills-across .item-detail-pill.notes {
    border-radius: 999px;
    max-width: min(620px, 100%);
}

@media (max-width: 900px) {
    .item-detail-row-attached .item-detail-spacer {
        display: none;
    }

    .item-detail-row-attached td[colspan] {
        padding-left: 12px !important;
    }
}


/* --- Items detail pills divider line fix --- */

/*
Removes the table divider that was visually cutting through the attached detail pills.
*/

.item-main-row:has(+ .item-detail-row-attached) > td {
    border-bottom: 0 !important;
}

.item-detail-row-attached > td {
    border-top: 0 !important;
    border-bottom: 1px solid #e5ebf5 !important;
}

.table-wrap table tbody tr.item-main-row + tr.item-detail-row-attached td {
    border-top: 0 !important;
}

body.theme-dark .item-detail-row-attached > td {
    border-bottom-color: #334155 !important;
}


/* --- Stable Beta badge stacked layout --- */

.brand {
    min-width: 0;
}

.beta-badge-stacked {
    display: inline-grid !important;
    grid-template-rows: auto auto;
    align-items: center;
    justify-items: center;
    gap: 1px;
    min-width: 92px;
    padding: 6px 13px !important;
    line-height: 1 !important;
    white-space: normal !important;
    text-align: center;
    letter-spacing: .13em;
}

.beta-badge-stacked span {
    display: block;
    line-height: 1;
}

.beta-badge-stacked span:first-child {
    font-size: 10px;
    font-weight: 950;
}

.beta-badge-stacked span:last-child {
    font-size: 10px;
    font-weight: 950;
}

@media (max-width: 720px) {
    .beta-badge-stacked {
        min-width: 74px;
        padding: 5px 9px !important;
        letter-spacing: .09em;
    }

    .beta-badge-stacked span {
        font-size: 9px !important;
    }
}


/* --- Stable Beta stacked badge fit fix --- */

.beta-badge-stacked {
    min-width: 76px !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    padding: 4px 10px !important;
    gap: 2px !important;
    line-height: 1 !important;
    overflow: hidden !important;
    align-content: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

.beta-badge-stacked span {
    display: block !important;
    line-height: .9 !important;
    font-size: 8px !important;
    font-weight: 950 !important;
    letter-spacing: .14em !important;
    margin: 0 !important;
    padding: 0 !important;
}

@media (max-width: 720px) {
    .beta-badge-stacked {
        min-width: 68px !important;
        height: 28px !important;
        min-height: 28px !important;
        max-height: 28px !important;
        padding: 4px 8px !important;
    }

    .beta-badge-stacked span {
        font-size: 7.5px !important;
        letter-spacing: .12em !important;
    }
}


/* --- Mobile card layout for Items and Locations --- */

/*
Desktop keeps the normal table.
Mobile hides the wide table and shows stacked cards instead.
*/

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

@media (max-width: 760px) {
    .desktop-data-table {
        display: none !important;
    }

    .mobile-card-list {
        display: grid;
        gap: 14px;
        margin-top: 16px;
    }

    .mobile-data-card {
        border: 1px solid #d8e0ee;
        border-radius: 22px;
        background: #ffffff;
        padding: 16px;
        box-shadow: 0 14px 35px rgba(15, 23, 42, .055);
        display: grid;
        gap: 14px;
    }

    .mobile-card-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
    }

    .mobile-card-head h2 {
        margin: 8px 0 0;
        font-size: 22px;
        line-height: 1.1;
        letter-spacing: -.02em;
    }

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

    .mobile-card-grid > div {
        border: 1px solid #e5ebf5;
        border-radius: 16px;
        background: #f8fbff;
        padding: 10px;
        min-width: 0;
    }

    .mobile-card-grid span {
        display: block;
        color: #667085;
        font-size: 11px;
        font-weight: 900;
        letter-spacing: .08em;
        text-transform: uppercase;
        margin-bottom: 4px;
    }

    .mobile-card-grid strong {
        display: block;
        color: #101828;
        font-size: 14px;
        overflow-wrap: anywhere;
    }

    .mobile-card-pills {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
    }

    .mobile-card-pills .item-detail-pill {
        box-shadow: none;
        padding: 5px 9px;
        font-size: 12px;
        max-width: 100%;
    }

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

    .mobile-card-actions .btn {
        min-height: 42px;
        justify-content: center;
    }

    .table-wrap::after {
        display: none !important;
        content: none !important;
    }

    body.theme-dark .mobile-data-card {
        background: #111827;
        border-color: #334155;
        box-shadow: 0 14px 35px rgba(0, 0, 0, .28);
    }

    body.theme-dark .mobile-card-grid > div {
        background: #0f172a;
        border-color: #334155;
    }

    body.theme-dark .mobile-card-grid strong {
        color: #f8fafc;
    }

    body.theme-dark .mobile-card-grid span {
        color: #a8b6ca;
    }
}

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

    .mobile-card-actions .btn {
        flex: 1 1 auto;
    }
}


/* --- Public dashboard polish --- */

/*
Logged-out public dashboard now uses the same polished card/metric layout as the logged-in app.
*/

.public-dashboard-shell {
    display: grid;
    gap: 22px;
}

.public-dashboard-hero {
    align-items: stretch;
}

.public-dashboard-hero .card {
    min-height: 100%;
}

.public-dashboard-metrics {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.dashboard-metric-card {
    border: 1px solid #d8e0ee;
    border-radius: 18px;
    background: #ffffff;
    padding: 18px;
    text-align: left;
    box-shadow: 0 14px 35px rgba(15, 23, 42, .055);
    cursor: pointer;
    transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.dashboard-metric-card:hover {
    transform: translateY(-1px);
    border-color: #9db7ff;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .08);
}

.dashboard-metric-card span {
    display: block;
    color: #667085;
    font-size: 13px;
    font-weight: 900;
    margin-bottom: 10px;
}

.dashboard-metric-card strong {
    display: block;
    color: #101828;
    font-size: 30px;
    line-height: 1;
    font-weight: 950;
}

.activity-list {
    display: grid;
}

.activity-row {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid #e5ebf5;
}

.activity-row:last-child {
    border-bottom: 0;
}

.activity-row strong {
    font-weight: 760;
}

.start-flow-card ol {
    margin-bottom: 0;
}

body.theme-dark .dashboard-metric-card {
    background: #111827;
    border-color: #334155;
    box-shadow: 0 14px 35px rgba(0, 0, 0, .28);
}

body.theme-dark .dashboard-metric-card strong {
    color: #f8fafc;
}

body.theme-dark .dashboard-metric-card span {
    color: #a8b6ca;
}

body.theme-dark .activity-row {
    border-color: #334155;
}

@media (max-width: 900px) {
    .public-dashboard-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .activity-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

@media (max-width: 560px) {
    .public-dashboard-metrics {
        grid-template-columns: 1fr;
    }

    .public-dashboard-hero .actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .public-dashboard-hero .actions .btn {
        width: 100%;
    }
}


/* --- Template editor dark-mode and spacing polish --- */

.template-field-builder {
    gap: 22px;
}

.template-quick-fields {
    gap: 10px 12px;
    padding: 4px 0 8px;
}

.template-field-chip {
    min-height: 38px;
    padding: 9px 14px;
    line-height: 1.1;
}

.template-fields-list {
    gap: 18px;
}

.template-field-row {
    gap: 14px;
    padding: 18px;
}

.template-field-hint {
    margin-top: 6px;
    line-height: 1.35;
}

body.theme-dark .template-share-card,
body.theme-dark .template-field-builder,
body.theme-dark .template-field-row {
    background: #111827 !important;
    border-color: #334155 !important;
}

body.theme-dark .template-preset {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

body.theme-dark .template-field-chip {
    background: #172554 !important;
    border-color: #2563eb !important;
    color: #dbeafe !important;
}

body.theme-dark .template-field-chip:hover {
    background: #1e3a8a !important;
    border-color: #60a5fa !important;
    color: #ffffff !important;
}

body.theme-dark .template-field-handle,
body.theme-dark .template-field-remove {
    background: #1f2937 !important;
    border: 1px solid #334155 !important;
    color: #dbeafe !important;
}

body.theme-dark .template-required,
body.theme-dark .template-required label {
    color: #e5e7eb !important;
    background: transparent !important;
}

body.theme-dark .template-required input,
body.theme-dark .template-share-toggle input[type="checkbox"] {
    background: #0f172a !important;
    border-color: #64748b !important;
}

body.theme-dark .template-required input:checked,
body.theme-dark .template-share-toggle input[type="checkbox"]:checked {
    background: #60a5fa !important;
    border-color: #60a5fa !important;
}

body.theme-dark .template-field-row input,
body.theme-dark .template-field-row select,
body.theme-dark .template-field-row textarea,
body.theme-dark .template-top-grid input,
body.theme-dark .template-editor-card textarea,
body.theme-dark .template-editor-card select {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}


/* =========================================================
   ItemID global light/dark theme audit layer
   ---------------------------------------------------------
   Late-loading safety layer for all main pages.
   ========================================================= */

body {
    --theme-page-bg: #f5f7fb;
    --theme-card-bg: #ffffff;
    --theme-soft-bg: #f8fbff;
    --theme-soft-bg-2: #eef4ff;
    --theme-text: #101828;
    --theme-muted: #667085;
    --theme-border: #d8e0ee;
    --theme-border-strong: #c7d2e5;
    --theme-input-bg: #ffffff;
    --theme-button-soft: #eef4ff;
    --theme-button-soft-text: #0b49d1;
    --theme-danger-bg: #fff7f7;
    --theme-danger-border: #fecaca;
    --theme-danger-text: #b42318;
}

body.theme-dark {
    --theme-page-bg: #0b1220;
    --theme-card-bg: #111827;
    --theme-soft-bg: #0f172a;
    --theme-soft-bg-2: #172033;
    --theme-text: #f8fafc;
    --theme-muted: #a8b6ca;
    --theme-border: #334155;
    --theme-border-strong: #475569;
    --theme-input-bg: #0f172a;
    --theme-button-soft: #172554;
    --theme-button-soft-text: #dbeafe;
    --theme-danger-bg: #3b1111;
    --theme-danger-border: #7f1d1d;
    --theme-danger-text: #fecaca;
}

body.theme-dark {
    background: linear-gradient(180deg, #0f172a 0%, #0b1220 260px) !important;
    color: var(--theme-text) !important;
}

body.theme-dark main,
body.theme-dark .app-shell,
body.theme-dark .page,
body.theme-dark .page-wrap,
body.theme-dark .content {
    background: transparent !important;
    color: var(--theme-text) !important;
}

body.theme-dark .card,
body.theme-dark .panel,
body.theme-dark .box,
body.theme-dark .form,
body.theme-dark .wide,
body.theme-dark .table-wrap,
body.theme-dark .public-preview-note,
body.theme-dark .dashboard-metric-card,
body.theme-dark .mobile-data-card,
body.theme-dark .demo-modal,
body.theme-dark .auth-card,
body.theme-dark .auth-preview-area,
body.theme-dark .template-share-card,
body.theme-dark .template-field-builder,
body.theme-dark .template-field-row,
body.theme-dark .single-label-field-picker,
body.theme-dark .qr-label-preview,
body.theme-dark .location-qr-preview-box,
body.theme-dark .print-preview-panel,
body.theme-dark .patch-history-scroll {
    background: var(--theme-card-bg) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text) !important;
}

body.theme-dark .soft-card,
body.theme-dark .callout,
body.theme-dark .mobile-card-grid > div,
body.theme-dark .template-preset,
body.theme-dark .location-single-controls .single-label-field-picker,
body.theme-dark .item-detail-row,
body.theme-dark .registered-qr-summary-card,
body.theme-dark .qr-registry-card,
body.theme-dark .preview-card,
body.theme-dark .stat-card,
body.theme-dark .dashboard-card,
body.theme-dark .public-preview-card {
    background: var(--theme-soft-bg) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text) !important;
}

body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark h4,
body.theme-dark b,
body.theme-dark strong,
body.theme-dark label,
body.theme-dark th,
body.theme-dark .item-main-name,
body.theme-dark .mobile-card-head h2,
body.theme-dark .dashboard-metric-card strong,
body.theme-dark .code,
body.theme-dark .code-pill,
body.theme-dark .item-mini-badge,
body.theme-dark .preview-field-key,
body.theme-dark .preview-field-value,
body.theme-dark .print-field-key,
body.theme-dark .print-field-value {
    color: var(--theme-text) !important;
}

body.theme-dark .muted,
body.theme-dark small,
body.theme-dark .small,
body.theme-dark .help,
body.theme-dark .template-help,
body.theme-dark .template-field-hint,
body.theme-dark .template-preset small,
body.theme-dark .mobile-card-grid span,
body.theme-dark .eyebrow,
body.theme-dark .section-subtitle,
body.theme-dark .page-subtitle {
    color: var(--theme-muted) !important;
}

body.theme-dark a:not(.btn):not(.mini-action) {
    color: #93c5fd !important;
}

body.theme-dark a:not(.btn):not(.mini-action):hover {
    color: #bfdbfe !important;
}

body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea,
body.theme-dark .input,
body.theme-dark .select {
    background: var(--theme-input-bg) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text) !important;
    box-shadow: none !important;
}

body.theme-dark input::placeholder,
body.theme-dark textarea::placeholder {
    color: #94a3b8 !important;
}

body.theme-dark input[type="file"] {
    background: var(--theme-input-bg) !important;
    color: var(--theme-muted) !important;
}

body.theme-dark input[type="file"]::file-selector-button {
    background: var(--theme-button-soft) !important;
    color: var(--theme-button-soft-text) !important;
    border: 1px solid var(--theme-border) !important;
    border-radius: 10px !important;
}

body.theme-dark input[type="checkbox"],
body.theme-dark input[type="radio"] {
    background: #0f172a !important;
    border-color: #64748b !important;
    color: #60a5fa !important;
}

body.theme-dark input[type="checkbox"]:checked,
body.theme-dark input[type="radio"]:checked {
    background-color: #60a5fa !important;
    border-color: #60a5fa !important;
}

body.theme-dark .btn.secondary,
body.theme-dark .btn.ghost,
body.theme-dark button.secondary,
body.theme-dark button.ghost,
body.theme-dark .mini-action,
body.theme-dark .template-field-chip,
body.theme-dark .template-field-remove,
body.theme-dark .template-field-handle,
body.theme-dark .mode-switch,
body.theme-dark .profile-chip,
body.theme-dark .topbar-profile,
body.theme-dark .auth-preview-link a {
    background: var(--theme-button-soft) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-button-soft-text) !important;
}

body.theme-dark .btn.secondary:hover,
body.theme-dark .btn.ghost:hover,
body.theme-dark .mini-action:hover,
body.theme-dark .template-field-chip:hover,
body.theme-dark .template-preset:hover {
    background: #1e3a8a !important;
    border-color: #60a5fa !important;
    color: #ffffff !important;
}

body.theme-dark .btn.danger,
body.theme-dark .btn.danger.ghost,
body.theme-dark .mini-action.danger,
body.theme-dark .danger {
    background: var(--theme-danger-bg) !important;
    border-color: var(--theme-danger-border) !important;
    color: var(--theme-danger-text) !important;
}

body.theme-dark table,
body.theme-dark thead,
body.theme-dark tbody,
body.theme-dark tr,
body.theme-dark td,
body.theme-dark th {
    border-color: var(--theme-border) !important;
}

body.theme-dark table {
    background: transparent !important;
    color: var(--theme-text) !important;
}

body.theme-dark thead th,
body.theme-dark .patch-history-table th {
    background: #0f172a !important;
    color: #cbd5e1 !important;
}

body.theme-dark tbody tr,
body.theme-dark .activity-row {
    border-color: var(--theme-border) !important;
}

body.theme-dark tbody tr:hover {
    background: rgba(30, 58, 138, .16) !important;
}

body.theme-dark .pill,
body.theme-dark .code-pill,
body.theme-dark .item-mini-badge,
body.theme-dark .item-detail-pill,
body.theme-dark .check-pill,
body.theme-dark .tag,
body.theme-dark .badge {
    background: #172033 !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text) !important;
}

body.theme-dark .pill.ok,
body.theme-dark .item-detail-pill.status,
body.theme-dark .item-detail-pill.custom,
body.theme-dark .check-pill:has(input:checked) {
    background: #172554 !important;
    border-color: #2563eb !important;
    color: #dbeafe !important;
}

body.theme-dark .itemid-qr,
body.theme-dark .qr-canvas,
body.theme-dark .qr-svg,
body.theme-dark .qr-label-preview .itemid-qr,
body.theme-dark .location-qr-preview-box .itemid-qr,
body.theme-dark .print-label .itemid-qr,
body.theme-dark .single-print-label .itemid-qr {
    background: #ffffff !important;
    color: #000000 !important;
    border-color: var(--theme-border) !important;
}

body.theme-dark .qr-label-preview,
body.theme-dark .location-qr-preview-box {
    background: var(--theme-card-bg) !important;
}

body.theme-dark .demo-modal-backdrop {
    background: rgba(2, 6, 23, .72) !important;
}

body.theme-dark .demo-modal {
    box-shadow: 0 24px 70px rgba(0, 0, 0, .45) !important;
}

body.theme-dark .topbar,
body.theme-dark header,
body.theme-dark .site-header,
body.theme-dark footer,
body.theme-dark .site-footer {
    background: #0f172a !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text) !important;
}

body.theme-dark .nav a,
body.theme-dark .topbar a,
body.theme-dark footer,
body.theme-dark footer a {
    color: #cbd5e1 !important;
}

body.theme-dark .nav a:hover,
body.theme-dark .topbar a:hover,
body.theme-dark footer a:hover {
    color: #ffffff !important;
}

body.theme-dark .mobile-bottom-nav,
body.theme-dark .bottom-nav,
body.theme-dark .mobile-tabbar {
    background: rgba(15, 23, 42, .96) !important;
    border-color: var(--theme-border) !important;
    box-shadow: 0 -18px 45px rgba(0, 0, 0, .35) !important;
}

body.theme-dark .mobile-bottom-nav a,
body.theme-dark .bottom-nav a,
body.theme-dark .mobile-tabbar a {
    color: #cbd5e1 !important;
}

body.theme-dark .mobile-bottom-nav a.active,
body.theme-dark .bottom-nav a.active,
body.theme-dark .mobile-tabbar a.active {
    background: #2563eb !important;
    color: #ffffff !important;
}

body.theme-dark .location-visual-card,
body.theme-dark .image-card,
body.theme-dark .upload-card,
body.theme-dark .empty-state {
    background: var(--theme-card-bg) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text) !important;
}

body.theme-dark hr {
    border-color: var(--theme-border) !important;
}

body:not(.theme-dark) .itemid-qr {
    background: #ffffff !important;
    color: #000000 !important;
}

body:not(.theme-dark) .btn.secondary,
body:not(.theme-dark) .btn.ghost,
body:not(.theme-dark) .mini-action,
body:not(.theme-dark) .template-field-chip {
    color: #0b49d1;
}

@media (max-width: 760px) {
    body.theme-dark .mobile-data-card,
    body.theme-dark .mobile-card-grid > div {
        background: var(--theme-card-bg) !important;
        border-color: var(--theme-border) !important;
    }

    body.theme-dark .mobile-card-grid > div {
        background: var(--theme-soft-bg) !important;
    }
}


/* --- Dark mode code badge contrast fix --- */

/*
The item/location ID badges use the .code class.
They were still keeping the light-mode white/grey background in dark mode,
which made the white text unreadable.
*/

body.theme-dark .code,
body.theme-dark span.code,
body.theme-dark td .code,
body.theme-dark .table-wrap .code,
body.theme-dark .mobile-data-card .code {
    background: #172033 !important;
    border: 1px solid #334155 !important;
    color: #f8fafc !important;
    box-shadow: none !important;
}

body.theme-dark .code:hover,
body.theme-dark span.code:hover {
    background: #172554 !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
}

body.theme-dark .item-mini-badge,
body.theme-dark .code-pill,
body.theme-dark .item-detail-pill {
    background: #111827 !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

body.theme-dark .item-detail-pill strong,
body.theme-dark .item-detail-pill span {
    color: #f8fafc !important;
}

body.theme-dark .item-detail-pill.custom,
body.theme-dark .item-detail-pill.status,
body.theme-dark .pill.ok {
    background: #172554 !important;
    border-color: #2563eb !important;
    color: #dbeafe !important;
}

body.theme-dark .item-detail-pill.custom strong,
body.theme-dark .item-detail-pill.status strong,
body.theme-dark .pill.ok strong {
    color: #ffffff !important;
}

/* Keep light mode unchanged and readable */
body:not(.theme-dark) .code,
body:not(.theme-dark) span.code {
    background: #f2f4f7;
    border-color: #e5ebf5;
    color: #101828;
}


/* --- Clean URLs and roadmap patch --- */

.beta-note-actions {
    align-self: start;
}

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

.roadmap-summary-card {
    border: 1px solid #d8e0ee;
    border-radius: 18px;
    background: #ffffff;
    padding: 18px;
    box-shadow: 0 14px 35px rgba(15, 23, 42, .055);
}

.roadmap-summary-card span {
    display: block;
    color: #667085;
    font-size: 13px;
    font-weight: 900;
    margin-bottom: 8px;
}

.roadmap-summary-card strong {
    display: block;
    font-size: 30px;
    line-height: 1;
}

.roadmap-board {
    display: grid;
    gap: 18px;
}

.roadmap-version-card {
    display: grid;
    gap: 16px;
}

.roadmap-version-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.roadmap-items {
    display: grid;
    gap: 10px;
}

.roadmap-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: start;
    border: 1px solid #e5ebf5;
    border-radius: 16px;
    background: #f8fbff;
    padding: 14px;
}

.roadmap-item h3 {
    margin: 0 0 4px;
    font-size: 16px;
}

.roadmap-item p {
    margin: 0;
}

.roadmap-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid #d8e0ee;
    font-size: 12px;
    font-weight: 950;
    white-space: nowrap;
}

.roadmap-status.complete {
    color: #027a48;
    background: #ecfdf3;
    border-color: #abefc6;
}

.roadmap-status.in-progress {
    color: #175cd3;
    background: #eff4ff;
    border-color: #b2ccff;
}

.roadmap-status.not-started {
    color: #667085;
    background: #f2f4f7;
    border-color: #d0d5dd;
}

body.theme-dark .roadmap-summary-card,
body.theme-dark .roadmap-item {
    background: #111827 !important;
    border-color: #334155 !important;
}

body.theme-dark .roadmap-item {
    background: #0f172a !important;
}

body.theme-dark .roadmap-status.complete {
    color: #bbf7d0;
    background: #064e3b;
    border-color: #047857;
}

body.theme-dark .roadmap-status.in-progress {
    color: #dbeafe;
    background: #172554;
    border-color: #2563eb;
}

body.theme-dark .roadmap-status.not-started {
    color: #cbd5e1;
    background: #1f2937;
    border-color: #475569;
}

@media (max-width: 760px) {
    .roadmap-status-summary {
        grid-template-columns: 1fr;
    }

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

    .roadmap-version-head {
        display: grid;
    }
}


/* --- Stable Beta 0.6 theme toggle and community stat cards fix --- */

/*
0.6 full missed theme-toggle.php, so the switch could not persist light/dark mode.
This CSS also makes community stats match the dashboard metric cards while keeping a different accent.
*/

.community-metric-grid {
    margin-top: 6px;
    margin-bottom: 0;
}

.community-metric {
    position: relative;
    overflow: hidden;
    border-color: #b8c7e6 !important;
    background:
        linear-gradient(135deg, rgba(239, 244, 255, .95), rgba(248, 251, 255, .98)) !important;
}

.community-metric::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 14px;
    width: 34px;
    height: 4px;
    border-radius: 999px;
    background: #7c3aed;
}

.community-metric.users::before {
    background: #7c3aed;
}

.community-metric.items::before {
    background: #2563eb;
}

.community-metric.locations::before {
    background: #0891b2;
}

.community-metric.qr::before {
    background: #16a34a;
}

.community-metric span {
    padding-top: 12px;
}

.community-metric span::after {
    content: none !important;
}

.community-metric h2 {
    font-size: 34px;
    margin: 6px 0 0;
}

body.theme-dark .community-metric {
    background:
        linear-gradient(135deg, rgba(15, 23, 42, .98), rgba(17, 24, 39, .98)) !important;
    border-color: #334155 !important;
}

body.theme-dark .community-metric strong,
body.theme-dark .community-metric h2 {
    color: #f8fafc !important;
}

body.theme-dark .community-metric span {
    color: #a8b6ca !important;
}

body.theme-dark .mode-switch {
    background: #172554 !important;
    border-color: #334155 !important;
}

body:not(.theme-dark) .mode-switch {
    background: #eaf4ff !important;
    border-color: #c7d2e5 !important;
}

@media (max-width: 900px) {
    .community-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .community-metric-grid {
        grid-template-columns: 1fr;
    }
}


/* --- Stable Beta 0.6 footer width and metric readability patch --- */

/*
The footer is printed inside the app shell, so normal width:100% only filled the centred shell.
This breaks the footer background out to the full viewport while keeping footer content centred.
*/

.site-footer {
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: 72px !important;
    padding: 0 !important;
    border-top: 1px solid #d8e0ee !important;
    background: rgba(255, 255, 255, .82) !important;
    box-sizing: border-box !important;
}

.site-footer-inner {
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 22px 24px !important;
    display: flex !important;
    justify-content: space-between !important;
    gap: 16px !important;
    align-items: center !important;
    box-sizing: border-box !important;
}

body.theme-dark .site-footer {
    background: #0f172a !important;
    border-color: #334155 !important;
}

/* Workspace metric cards with quick visual identity */
.workspace-metric,
.metric-card.workspace-metric,
.dashboard-metric-card.workspace-metric {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.workspace-metric::before,
.metric-card.workspace-metric::before,
.dashboard-metric-card.workspace-metric::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 14px;
    width: 38px;
    height: 5px;
    border-radius: 999px;
    background: #2563eb;
}

.workspace-metric::after,
.metric-card.workspace-metric::after,
.dashboard-metric-card.workspace-metric::after {
    content: "";
    position: absolute;
    right: -28px;
    bottom: -36px;
    width: 110px;
    height: 110px;
    border-radius: 999px;
    background: rgba(37, 99, 235, .10);
    z-index: -1;
}

.workspace-metric span,
.metric-card.workspace-metric span,
.dashboard-metric-card.workspace-metric span {
    padding-top: 12px;
    display: block;
}

.metric-items::before {
    background: #2563eb !important;
}

.metric-items::after {
    background: rgba(37, 99, 235, .13) !important;
}

.metric-locations::before {
    background: #0891b2 !important;
}

.metric-locations::after {
    background: rgba(8, 145, 178, .14) !important;
}

.metric-folders::before {
    background: #7c3aed !important;
}

.metric-folders::after {
    background: rgba(124, 58, 237, .14) !important;
}

.metric-attention::before {
    background: #f97316 !important;
}

.metric-attention::after {
    background: rgba(249, 115, 22, .16) !important;
}

.dashboard-metric-grid {
    gap: 16px !important;
}

.metric-card,
.dashboard-metric-card,
.community-metric {
    min-height: 116px;
}

.metric-card h2,
.dashboard-metric-card strong,
.dashboard-metric-card h2,
.community-metric h2 {
    letter-spacing: -.04em;
}

body.theme-dark .workspace-metric,
body.theme-dark .metric-card.workspace-metric,
body.theme-dark .dashboard-metric-card.workspace-metric {
    background: linear-gradient(135deg, #111827 0%, #0f172a 100%) !important;
}

body.theme-dark .workspace-metric:hover,
body.theme-dark .metric-card.workspace-metric:hover,
body.theme-dark .dashboard-metric-card.workspace-metric:hover {
    border-color: #64748b !important;
}

/* Community cards keep their different identity but use the same readable rhythm */
.community-metric {
    position: relative;
    overflow: hidden;
}

.community-metric::after {
    content: "";
    position: absolute;
    right: -28px;
    bottom: -36px;
    width: 110px;
    height: 110px;
    border-radius: 999px;
    background: rgba(124, 58, 237, .10);
    z-index: 0;
}

.community-metric > * {
    position: relative;
    z-index: 1;
}

.community-metric.users::after {
    background: rgba(124, 58, 237, .12);
}

.community-metric.items::after {
    background: rgba(37, 99, 235, .12);
}

.community-metric.locations::after {
    background: rgba(8, 145, 178, .12);
}

.community-metric.qr::after {
    background: rgba(22, 163, 74, .12);
}

@media (max-width: 760px) {
    .site-footer-inner {
        display: grid !important;
        gap: 8px !important;
        padding: 20px 22px 110px !important;
    }

    .metric-card,
    .dashboard-metric-card,
    .community-metric {
        min-height: 104px;
    }
}


/* --- Dashboard stats and recent activity side-by-side patch --- */

/*
Community stats and recent activity now sit side by side on desktop so the dashboard uses space better.
They stack automatically on smaller screens.
*/

.dashboard-lower-grid,
.public-dashboard-lower-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr);
    gap: 18px;
    align-items: stretch;
}

.dashboard-lower-grid > .card,
.public-dashboard-lower-grid > .card {
    min-height: 100%;
}

.dashboard-lower-grid .community-stats-card,
.public-dashboard-lower-grid .community-stats-card {
    align-content: start;
}

.dashboard-lower-grid .community-metric-grid,
.public-dashboard-lower-grid .community-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-lower-grid .community-metric,
.public-dashboard-lower-grid .community-metric {
    min-height: 128px;
}

.dashboard-lower-grid .activity-list,
.public-dashboard-lower-grid .activity-list {
    max-height: 360px;
    overflow: auto;
    padding-right: 4px;
}

.dashboard-lower-grid .activity-row,
.public-dashboard-lower-grid .activity-row {
    grid-template-columns: 165px minmax(0, 1fr);
}

@media (max-width: 1100px) {
    .dashboard-lower-grid,
    .public-dashboard-lower-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-lower-grid .community-metric-grid,
    .public-dashboard-lower-grid .community-metric-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .dashboard-lower-grid .activity-list,
    .public-dashboard-lower-grid .activity-list {
        max-height: none;
        overflow: visible;
    }
}

@media (max-width: 760px) {
    .dashboard-lower-grid .community-metric-grid,
    .public-dashboard-lower-grid .community-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-lower-grid .activity-row,
    .public-dashboard-lower-grid .activity-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

@media (max-width: 520px) {
    .dashboard-lower-grid .community-metric-grid,
    .public-dashboard-lower-grid .community-metric-grid {
        grid-template-columns: 1fr;
    }
}


/* --- Dashboard activity left and community big stats patch --- */

/*
Dashboard lower section:
- Your recent activity is now on the left.
- Across ItemID uses big stat typography instead of small metric cards.
- Workspace metric cards are calmer, with Need attention using a clear reddish accent.
*/

.dashboard-lower-grid-activity-left,
.public-dashboard-lower-grid.dashboard-lower-grid-activity-left {
    grid-template-columns: minmax(420px, .95fr) minmax(0, 1.05fr);
}

.dashboard-lower-grid-activity-left > .card:first-child,
.public-dashboard-lower-grid.dashboard-lower-grid-activity-left > .card:first-child {
    order: 1;
}

.dashboard-lower-grid-activity-left > .community-stats-card,
.public-dashboard-lower-grid.dashboard-lower-grid-activity-left > .community-stats-card {
    order: 2;
}

.community-big-stats {
    display: grid;
    gap: 22px;
    margin-top: 28px;
}

.community-big-row {
    display: grid;
    gap: 6px;
}

.community-big-row span {
    color: #cbd5e1;
    font-size: 18px;
    font-weight: 850;
    letter-spacing: .01em;
}

.community-big-row strong {
    color: #ffffff;
    font-size: clamp(34px, 4vw, 52px);
    line-height: .95;
    font-weight: 950;
    letter-spacing: -.05em;
}

.community-big-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    margin-top: 4px;
}

/* Neutralise normal workspace cards */
.metric-neutral::before,
.metric-items::before,
.metric-locations::before,
.metric-folders::before {
    background: #64748b !important;
}

.metric-neutral::after,
.metric-items::after,
.metric-locations::after,
.metric-folders::after {
    background: rgba(100, 116, 139, .10) !important;
}

/* Keep attention visually distinct in a red/orange warning family */
.metric-attention::before {
    background: #ef4444 !important;
}

.metric-attention::after {
    background: rgba(239, 68, 68, .18) !important;
}

body.theme-dark .metric-attention {
    border-color: #7f1d1d !important;
}

body.theme-dark .metric-attention:hover {
    border-color: #ef4444 !important;
}

/* Remove old community-card accent bubbles when using big stats */
.community-stats-card .community-metric,
.community-stats-card .community-metric-grid {
    display: none !important;
}

.community-stats-card {
    background:
        linear-gradient(135deg, rgba(30, 41, 59, .5), rgba(15, 23, 42, .98)) !important;
}

body:not(.theme-dark) .community-stats-card {
    background:
        linear-gradient(135deg, #eef4ff, #ffffff) !important;
}

body:not(.theme-dark) .community-big-row span {
    color: #344054;
}

body:not(.theme-dark) .community-big-row strong {
    color: #101828;
}

@media (max-width: 1100px) {
    .dashboard-lower-grid-activity-left,
    .public-dashboard-lower-grid.dashboard-lower-grid-activity-left {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .community-big-split {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .community-big-row span {
        font-size: 16px;
    }
}


/* --- Dashboard metric arrows and community stats polish --- */

/*
Workspace metric cards:
- arrow sits top-right on all four cards
- Items green, Locations blue, Folders yellow, Need attention red
Community stats:
- cleaner two-by-two layout with large numbers
*/

.metric-card.workspace-metric,
.dashboard-metric-card.workspace-metric {
    min-height: 122px;
    padding: 22px 24px !important;
}

.metric-card.workspace-metric::before,
.dashboard-metric-card.workspace-metric::before {
    left: 24px !important;
    top: 22px !important;
    width: 46px !important;
    height: 5px !important;
}

.metric-card.workspace-metric::after,
.dashboard-metric-card.workspace-metric::after {
    width: 128px !important;
    height: 128px !important;
    right: -34px !important;
    bottom: -44px !important;
}

/* put the arrow in the same place/style as Need attention */
.metric-card.workspace-metric > span:first-child,
.dashboard-metric-card.workspace-metric > span:first-child {
    position: relative;
    padding-top: 18px !important;
    padding-right: 28px;
}

.metric-card.workspace-metric > span:first-child::after,
.dashboard-metric-card.workspace-metric > span:first-child::after {
    content: "↗";
    position: absolute;
    right: 0;
    top: 14px;
    color: #93a4bd;
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
}

.metric-card.workspace-metric h2,
.dashboard-metric-card.workspace-metric strong,
.dashboard-metric-card.workspace-metric h2 {
    margin-top: 8px !important;
}

/* Requested colours */
.metric-items::before {
    background: #22c55e !important;
}

.metric-items::after {
    background: rgba(34, 197, 94, .14) !important;
}

.metric-locations::before {
    background: #3b82f6 !important;
}

.metric-locations::after {
    background: rgba(59, 130, 246, .14) !important;
}

.metric-folders::before {
    background: #eab308 !important;
}

.metric-folders::after {
    background: rgba(234, 179, 8, .16) !important;
}

.metric-attention::before {
    background: #ef4444 !important;
}

.metric-attention::after {
    background: rgba(239, 68, 68, .18) !important;
}

body.theme-dark .metric-items {
    border-color: rgba(34, 197, 94, .28) !important;
}

body.theme-dark .metric-locations {
    border-color: rgba(59, 130, 246, .30) !important;
}

body.theme-dark .metric-folders {
    border-color: rgba(234, 179, 8, .30) !important;
}

body.theme-dark .metric-attention {
    border-color: rgba(239, 68, 68, .35) !important;
}

/* Community stats layout */
.community-stats-card {
    min-height: 100%;
}

.community-big-stats {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 34px !important;
    margin-top: 32px !important;
    align-items: start;
}

.community-big-row {
    min-width: 0;
    padding: 0;
}

.community-big-row span {
    display: block;
    color: #cbd5e1;
    font-size: 17px;
    font-weight: 900;
    letter-spacing: .01em;
    margin-bottom: 8px;
}

.community-big-row strong {
    display: block;
    color: #ffffff;
    font-size: clamp(42px, 4.6vw, 72px);
    line-height: .88;
    font-weight: 950;
    letter-spacing: -.06em;
}

.community-big-split,
.community-big-bottom-row {
    display: contents !important;
}

.community-stats-card .eyebrow {
    color: #a8b6ca !important;
}

.community-stats-card h2 {
    margin-bottom: 10px;
}

.community-stats-card .muted {
    max-width: 42ch;
}

body:not(.theme-dark) .community-stats-card {
    background: linear-gradient(135deg, #eef4ff, #ffffff) !important;
}

body:not(.theme-dark) .community-big-row span {
    color: #344054 !important;
}

body:not(.theme-dark) .community-big-row strong {
    color: #101828 !important;
}

/* Undo earlier rule hiding old cards is harmless, but make sure big stats always display */
.community-stats-card .community-big-stats {
    display: grid !important;
}

@media (max-width: 1100px) {
    .community-big-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 620px) {
    .community-big-stats {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    .community-big-row strong {
        font-size: 46px;
    }
}


/* --- Dashboard metric colour force fix --- */

/*
Hard override for the four top dashboard cards.
This sits at the very end of the stylesheet so older neutral metric rules cannot win.
*/

.dashboard-metric-grid .metric-card.workspace-metric,
.dashboard-metric-grid .dashboard-metric-card.workspace-metric {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
    border-width: 1px !important;
}

.dashboard-metric-grid .metric-card.workspace-metric > span:first-child::after,
.dashboard-metric-grid .dashboard-metric-card.workspace-metric > span:first-child::after {
    content: "↗" !important;
    position: absolute !important;
    right: 0 !important;
    top: 14px !important;
    color: #93a4bd !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

/* Items: green */
.dashboard-metric-grid .metric-card.metric-items::before,
.dashboard-metric-grid .dashboard-metric-card.metric-items::before {
    background: #22c55e !important;
}

.dashboard-metric-grid .metric-card.metric-items::after,
.dashboard-metric-grid .dashboard-metric-card.metric-items::after {
    background: rgba(34, 197, 94, .18) !important;
    display: block !important;
}

body.theme-dark .dashboard-metric-grid .metric-card.metric-items,
body.theme-dark .dashboard-metric-grid .dashboard-metric-card.metric-items {
    border-color: rgba(34, 197, 94, .38) !important;
}

/* Locations: blue */
.dashboard-metric-grid .metric-card.metric-locations::before,
.dashboard-metric-grid .dashboard-metric-card.metric-locations::before {
    background: #3b82f6 !important;
}

.dashboard-metric-grid .metric-card.metric-locations::after,
.dashboard-metric-grid .dashboard-metric-card.metric-locations::after {
    background: rgba(59, 130, 246, .20) !important;
    display: block !important;
}

body.theme-dark .dashboard-metric-grid .metric-card.metric-locations,
body.theme-dark .dashboard-metric-grid .dashboard-metric-card.metric-locations {
    border-color: rgba(59, 130, 246, .42) !important;
}

/* Folders: yellow */
.dashboard-metric-grid .metric-card.metric-folders::before,
.dashboard-metric-grid .dashboard-metric-card.metric-folders::before {
    background: #eab308 !important;
}

.dashboard-metric-grid .metric-card.metric-folders::after,
.dashboard-metric-grid .dashboard-metric-card.metric-folders::after {
    background: rgba(234, 179, 8, .22) !important;
    display: block !important;
}

body.theme-dark .dashboard-metric-grid .metric-card.metric-folders,
body.theme-dark .dashboard-metric-grid .dashboard-metric-card.metric-folders {
    border-color: rgba(234, 179, 8, .42) !important;
}

/* Need attention: red, including the circle */
.dashboard-metric-grid .metric-card.metric-attention::before,
.dashboard-metric-grid .dashboard-metric-card.metric-attention::before {
    background: #ef4444 !important;
}

.dashboard-metric-grid .metric-card.metric-attention::after,
.dashboard-metric-grid .dashboard-metric-card.metric-attention::after {
    content: "" !important;
    position: absolute !important;
    right: -34px !important;
    bottom: -44px !important;
    width: 128px !important;
    height: 128px !important;
    border-radius: 999px !important;
    background: rgba(239, 68, 68, .24) !important;
    display: block !important;
    z-index: -1 !important;
}

body.theme-dark .dashboard-metric-grid .metric-card.metric-attention,
body.theme-dark .dashboard-metric-grid .dashboard-metric-card.metric-attention {
    border-color: rgba(239, 68, 68, .48) !important;
}

/* Light mode also gets readable coloured circles */
body:not(.theme-dark) .dashboard-metric-grid .metric-card.metric-items::after,
body:not(.theme-dark) .dashboard-metric-grid .dashboard-metric-card.metric-items::after {
    background: rgba(34, 197, 94, .12) !important;
}

body:not(.theme-dark) .dashboard-metric-grid .metric-card.metric-locations::after,
body:not(.theme-dark) .dashboard-metric-grid .dashboard-metric-card.metric-locations::after {
    background: rgba(59, 130, 246, .12) !important;
}

body:not(.theme-dark) .dashboard-metric-grid .metric-card.metric-folders::after,
body:not(.theme-dark) .dashboard-metric-grid .dashboard-metric-card.metric-folders::after {
    background: rgba(234, 179, 8, .14) !important;
}

body:not(.theme-dark) .dashboard-metric-grid .metric-card.metric-attention::after,
body:not(.theme-dark) .dashboard-metric-grid .dashboard-metric-card.metric-attention::after {
    background: rgba(239, 68, 68, .14) !important;
}


/* --- Need attention red fallback and community wording polish --- */

/*
The Need attention card can sometimes miss the metric-attention class depending on the older dashboard.php version.
These selectors also target the card by URL so the red accent still applies.
*/

.dashboard-metric-grid a[href*="attention=1"],
.dashboard-metric-grid .metric-attention {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
    border-color: rgba(239, 68, 68, .50) !important;
}

.dashboard-metric-grid a[href*="attention=1"]::before,
.dashboard-metric-grid .metric-attention::before {
    content: "" !important;
    position: absolute !important;
    left: 24px !important;
    top: 22px !important;
    width: 46px !important;
    height: 5px !important;
    border-radius: 999px !important;
    background: #ef4444 !important;
    display: block !important;
}

.dashboard-metric-grid a[href*="attention=1"]::after,
.dashboard-metric-grid .metric-attention::after {
    content: "" !important;
    position: absolute !important;
    right: -34px !important;
    bottom: -44px !important;
    width: 128px !important;
    height: 128px !important;
    border-radius: 999px !important;
    background: rgba(239, 68, 68, .24) !important;
    display: block !important;
    z-index: -1 !important;
}

.dashboard-metric-grid a[href*="attention=1"] > span:first-child,
.dashboard-metric-grid .metric-attention > span:first-child {
    position: relative !important;
    padding-top: 18px !important;
    padding-right: 28px !important;
}

.dashboard-metric-grid a[href*="attention=1"] > span:first-child::after,
.dashboard-metric-grid .metric-attention > span:first-child::after {
    content: "↗" !important;
    position: absolute !important;
    right: 0 !important;
    top: 14px !important;
    color: #fca5a5 !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

/* Community stats wording/layout clarity */
.community-stats-card h2 {
    max-width: 12ch;
    line-height: 1.05;
}

.community-stats-card .muted {
    max-width: 34ch;
}

.community-big-row span {
    max-width: 22ch;
    line-height: 1.2;
}

.community-big-stats {
    gap: 28px 42px !important;
}

body:not(.theme-dark) .dashboard-metric-grid a[href*="attention=1"] {
    border-color: rgba(239, 68, 68, .34) !important;
}

body:not(.theme-dark) .dashboard-metric-grid a[href*="attention=1"]::after {
    background: rgba(239, 68, 68, .14) !important;
}


/* --- Community stats layout scale fix --- */

/*
The previous community block made the stat numbers too large compared with the section title.
This version uses compact stat tiles: easier to scan, less shouty, and closer to the rest of the dashboard.
*/

.community-stats-card {
    display: grid !important;
    gap: 18px !important;
}

.community-stats-card h2 {
    max-width: none !important;
    font-size: clamp(24px, 2.2vw, 34px) !important;
    line-height: 1.08 !important;
    margin: 0 0 8px !important;
    letter-spacing: -.035em !important;
}

.community-stats-card .muted {
    max-width: 52ch !important;
    font-size: 16px !important;
    line-height: 1.45 !important;
}

.community-big-stats {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin-top: 8px !important;
}

.community-big-split,
.community-big-bottom-row {
    display: contents !important;
}

.community-big-row {
    position: relative;
    min-height: 104px;
    padding: 16px !important;
    border: 1px solid #d8e0ee;
    border-radius: 18px;
    background: rgba(248, 251, 255, .78);
    overflow: hidden;
}

.community-big-row::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 14px;
    width: 34px;
    height: 4px;
    border-radius: 999px;
    background: #64748b;
}

.community-big-row::after {
    content: "";
    position: absolute;
    right: -28px;
    bottom: -34px;
    width: 96px;
    height: 96px;
    border-radius: 999px;
    background: rgba(100, 116, 139, .12);
}

.community-big-row span {
    position: relative;
    z-index: 1;
    display: block;
    max-width: none !important;
    padding-top: 14px;
    margin-bottom: 8px;
    color: #667085 !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase;
}

.community-big-row strong {
    position: relative;
    z-index: 1;
    display: block;
    color: #101828 !important;
    font-size: clamp(30px, 3vw, 44px) !important;
    line-height: .95 !important;
    font-weight: 950 !important;
    letter-spacing: -.05em !important;
}

.community-big-row.stat-users::before {
    background: #7c3aed;
}

.community-big-row.stat-users::after {
    background: rgba(124, 58, 237, .12);
}

.community-big-row.stat-items::before {
    background: #22c55e;
}

.community-big-row.stat-items::after {
    background: rgba(34, 197, 94, .12);
}

.community-big-row.stat-locations::before {
    background: #3b82f6;
}

.community-big-row.stat-locations::after {
    background: rgba(59, 130, 246, .12);
}

.community-big-row.stat-qr::before {
    background: #f59e0b;
}

.community-big-row.stat-qr::after {
    background: rgba(245, 158, 11, .14);
}

body.theme-dark .community-stats-card {
    background: linear-gradient(135deg, rgba(15, 23, 42, .96), rgba(17, 24, 39, .98)) !important;
}

body.theme-dark .community-big-row {
    background: rgba(15, 23, 42, .72) !important;
    border-color: #334155 !important;
}

body.theme-dark .community-big-row span {
    color: #a8b6ca !important;
}

body.theme-dark .community-big-row strong {
    color: #f8fafc !important;
}

@media (max-width: 1250px) {
    .community-big-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 620px) {
    .community-big-stats {
        grid-template-columns: 1fr !important;
    }

    .community-big-row {
        min-height: 94px;
    }
}


/* --- Community stats compact strip redesign --- */

/*
Replaces the oversized community stat block with a calmer compact dashboard strip.
The aim is to show useful site-wide context without making it compete with the main workspace cards.
*/

.community-stats-card {
    padding: 24px !important;
    gap: 18px !important;
    background: linear-gradient(135deg, rgba(15, 23, 42, .96), rgba(17, 24, 39, .98)) !important;
}

.community-stats-card .eyebrow {
    margin-bottom: 8px !important;
    font-size: 12px !important;
    letter-spacing: .14em !important;
}

.community-stats-card h2 {
    font-size: clamp(24px, 2vw, 30px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.035em !important;
    margin: 0 0 8px !important;
}

.community-stats-card .muted {
    font-size: 15px !important;
    line-height: 1.45 !important;
    max-width: 44ch !important;
    margin: 0 !important;
}

.community-scope-pill {
    display: inline-flex;
    width: fit-content;
    margin-top: 14px;
    padding: 6px 10px;
    border: 1px solid #334155;
    border-radius: 999px;
    background: rgba(15, 23, 42, .7);
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.community-big-stats {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-top: 8px !important;
}

.community-big-split,
.community-big-bottom-row {
    display: contents !important;
}

.community-big-row {
    min-height: 86px !important;
    padding: 14px 14px 13px !important;
    border-radius: 16px !important;
    border: 1px solid #26364d !important;
    background: rgba(15, 23, 42, .52) !important;
    box-shadow: none !important;
}

.community-big-row::before {
    left: 14px !important;
    top: 12px !important;
    width: 28px !important;
    height: 3px !important;
}

.community-big-row::after {
    width: 72px !important;
    height: 72px !important;
    right: -28px !important;
    bottom: -32px !important;
    opacity: .72 !important;
}

.community-big-row span {
    padding-top: 12px !important;
    margin-bottom: 6px !important;
    color: #a8b6ca !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
    letter-spacing: .10em !important;
    text-transform: uppercase !important;
}

.community-big-row strong {
    color: #f8fafc !important;
    font-size: clamp(26px, 2.5vw, 36px) !important;
    line-height: .95 !important;
    letter-spacing: -.045em !important;
}

body:not(.theme-dark) .community-stats-card {
    background: linear-gradient(135deg, #f8fbff, #ffffff) !important;
}

body:not(.theme-dark) .community-scope-pill {
    background: #eef4ff;
    border-color: #d8e0ee;
    color: #0b49d1;
}

body:not(.theme-dark) .community-big-row {
    background: #ffffff !important;
    border-color: #d8e0ee !important;
}

body:not(.theme-dark) .community-big-row span {
    color: #667085 !important;
}

body:not(.theme-dark) .community-big-row strong {
    color: #101828 !important;
}

@media (max-width: 620px) {
    .community-big-stats {
        grid-template-columns: 1fr !important;
    }

    .community-big-row {
        min-height: 78px !important;
    }
}


/* --- Community stats no-colour cleanup --- */

/*
Community activity stats should be neutral, not colour-coded.
This removes coloured stat bars and circles from the community tiles only.
*/

.community-stats-card .community-big-row::before {
    background: #64748b !important;
}

.community-stats-card .community-big-row::after {
    background: rgba(100, 116, 139, .10) !important;
}

.community-stats-card .community-big-row.stat-users::before,
.community-stats-card .community-big-row.stat-items::before,
.community-stats-card .community-big-row.stat-locations::before,
.community-stats-card .community-big-row.stat-qr::before {
    background: #64748b !important;
}

.community-stats-card .community-big-row.stat-users::after,
.community-stats-card .community-big-row.stat-items::after,
.community-stats-card .community-big-row.stat-locations::after,
.community-stats-card .community-big-row.stat-qr::after {
    background: rgba(100, 116, 139, .10) !important;
}

body.theme-dark .community-stats-card .community-big-row::before {
    background: #64748b !important;
}

body.theme-dark .community-stats-card .community-big-row::after {
    background: rgba(148, 163, 184, .08) !important;
}

body:not(.theme-dark) .community-stats-card .community-big-row::before {
    background: #98a2b3 !important;
}

body:not(.theme-dark) .community-stats-card .community-big-row::after {
    background: rgba(152, 162, 179, .10) !important;
}


/* --- Stable Beta 0.6 page background accent circles --- */

/*
Adds subtle page-level accent circles in the background, not inside cards.
This gives each main page a quick visual identity without turning the content into coloured pills.
*/

body::before,
body::after {
    pointer-events: none;
}

body.page-items main,
body.page-locations main,
body.page-folders main,
body.page-templates main,
body.page-qr-labels main,
body.page-qr-codes main,
body.page-roadmap main,
body.page-feedback main {
    position: relative;
    isolation: isolate;
}

body.page-items main::before,
body.page-locations main::before,
body.page-folders main::before,
body.page-templates main::before,
body.page-qr-labels main::before,
body.page-qr-codes main::before,
body.page-roadmap main::before,
body.page-feedback main::before {
    content: "";
    position: fixed;
    z-index: -1;
    right: clamp(-180px, -8vw, -80px);
    top: 170px;
    width: clamp(260px, 28vw, 520px);
    height: clamp(260px, 28vw, 520px);
    border-radius: 999px;
    opacity: .22;
    filter: blur(0px);
    background: rgba(100, 116, 139, .28);
}

body.page-items main::after,
body.page-locations main::after,
body.page-folders main::after,
body.page-templates main::after,
body.page-qr-labels main::after,
body.page-qr-codes main::after,
body.page-roadmap main::after,
body.page-feedback main::after {
    content: "";
    position: fixed;
    z-index: -1;
    left: clamp(-220px, -10vw, -90px);
    bottom: clamp(-260px, -14vw, -120px);
    width: clamp(220px, 22vw, 420px);
    height: clamp(220px, 22vw, 420px);
    border-radius: 999px;
    opacity: .12;
    background: rgba(100, 116, 139, .28);
}

/* Page colours */
body.page-items main::before,
body.page-items main::after {
    background: rgba(34, 197, 94, .42);
}

body.page-locations main::before,
body.page-locations main::after {
    background: rgba(59, 130, 246, .42);
}

body.page-folders main::before,
body.page-folders main::after {
    background: rgba(234, 179, 8, .42);
}

body.page-templates main::before,
body.page-templates main::after {
    background: rgba(124, 58, 237, .38);
}

body.page-qr-labels main::before,
body.page-qr-labels main::after,
body.page-qr-codes main::before,
body.page-qr-codes main::after {
    background: rgba(8, 145, 178, .38);
}

body.page-roadmap main::before,
body.page-roadmap main::after {
    background: rgba(99, 102, 241, .38);
}

body.page-feedback main::before,
body.page-feedback main::after {
    background: rgba(244, 63, 94, .32);
}

/* Light mode needs softer circles */
body:not(.theme-dark).page-items main::before,
body:not(.theme-dark).page-items main::after {
    background: rgba(34, 197, 94, .16);
}

body:not(.theme-dark).page-locations main::before,
body:not(.theme-dark).page-locations main::after {
    background: rgba(59, 130, 246, .16);
}

body:not(.theme-dark).page-folders main::before,
body:not(.theme-dark).page-folders main::after {
    background: rgba(234, 179, 8, .18);
}

body:not(.theme-dark).page-templates main::before,
body:not(.theme-dark).page-templates main::after {
    background: rgba(124, 58, 237, .14);
}

body:not(.theme-dark).page-qr-labels main::before,
body:not(.theme-dark).page-qr-labels main::after,
body:not(.theme-dark).page-qr-codes main::before,
body:not(.theme-dark).page-qr-codes main::after {
    background: rgba(8, 145, 178, .14);
}

/* Keep normal cards readable over the background accent */
body.page-items .card,
body.page-locations .card,
body.page-folders .card,
body.page-templates .card,
body.page-qr-labels .card,
body.page-qr-codes .card,
body.page-roadmap .card,
body.page-feedback .card {
    backdrop-filter: blur(0px);
}

/* Remove coloured community stat circles if previous CSS was cached late */
.community-stats-card .community-big-row::before {
    background: #64748b !important;
}

.community-stats-card .community-big-row::after {
    background: rgba(100, 116, 139, .10) !important;
}

@media (max-width: 760px) {
    body.page-items main::before,
    body.page-locations main::before,
    body.page-folders main::before,
    body.page-templates main::before,
    body.page-qr-labels main::before,
    body.page-qr-codes main::before,
    body.page-roadmap main::before,
    body.page-feedback main::before {
        right: -190px;
        top: 130px;
        width: 330px;
        height: 330px;
        opacity: .18;
    }

    body.page-items main::after,
    body.page-locations main::after,
    body.page-folders main::after,
    body.page-templates main::after,
    body.page-qr-labels main::after,
    body.page-qr-codes main::after,
    body.page-roadmap main::after,
    body.page-feedback main::after {
        display: none;
    }
}


/* --- Page background accent body-class fix --- */

/*
Subtle page identity circle.
Single accent circle only, anchored to the bottom right.
Visible area should feel like roughly the last third of the screen,
without the extra top-right or bottom-left circles.
*/

main.page-accent {
    position: relative !important;
    isolation: isolate !important;
}

main.page-accent::before {
    content: "" !important;
    position: fixed !important;
    z-index: -1 !important;
    right: clamp(-180px, -9vw, -60px) !important;
    bottom: clamp(-210px, -12vw, -80px) !important;
    width: clamp(420px, 36vw, 760px) !important;
    height: clamp(420px, 36vw, 760px) !important;
    border-radius: 999px !important;
    opacity: .22 !important;
    background: rgba(100, 116, 139, .28) !important;
    display: block !important;
    pointer-events: none !important;
}

main.page-accent::after {
    content: none !important;
    display: none !important;
}

/* Main page identity colours */
main.page-accent-items::before,
body.page-items main::before {
    background: rgba(34, 197, 94, .34) !important;
}

main.page-accent-locations::before,
body.page-locations main::before {
    background: rgba(59, 130, 246, .34) !important;
}

main.page-accent-folders::before,
body.page-folders main::before {
    background: rgba(234, 179, 8, .34) !important;
}

main.page-accent-templates::before,
body.page-templates main::before {
    background: rgba(124, 58, 237, .30) !important;
}

main.page-accent-qr-labels::before,
main.page-accent-qr-codes::before,
body.page-qr-labels main::before,
body.page-qr-codes main::before {
    background: rgba(8, 145, 178, .30) !important;
}

main.page-accent-roadmap::before,
body.page-roadmap main::before {
    background: rgba(99, 102, 241, .30) !important;
}

main.page-accent-feedback::before,
body.page-feedback main::before {
    background: rgba(244, 63, 94, .28) !important;
}

/* Light mode softer */
body:not(.theme-dark) main.page-accent::before {
    opacity: .16 !important;
}

body:not(.theme-dark) main.page-accent-items::before {
    background: rgba(34, 197, 94, .14) !important;
}

body:not(.theme-dark) main.page-accent-locations::before {
    background: rgba(59, 130, 246, .14) !important;
}

body:not(.theme-dark) main.page-accent-folders::before {
    background: rgba(234, 179, 8, .16) !important;
}

body:not(.theme-dark) main.page-accent-templates::before {
    background: rgba(124, 58, 237, .12) !important;
}

body:not(.theme-dark) main.page-accent-qr-labels::before,
body:not(.theme-dark) main.page-accent-qr-codes::before {
    background: rgba(8, 145, 178, .12) !important;
}

body:not(.theme-dark) main.page-accent-roadmap::before {
    background: rgba(99, 102, 241, .12) !important;
}

body:not(.theme-dark) main.page-accent-feedback::before {
    background: rgba(244, 63, 94, .11) !important;
}

@media (max-width: 760px) {
    main.page-accent::before {
        right: -170px !important;
        bottom: -170px !important;
        width: 360px !important;
        height: 360px !important;
        opacity: .18 !important;
    }
}


/* --- Page circle all-pages large override --- */

/*
Final override:
- applies the background circle to every page that uses the app shell
- keeps only one circle
- anchors it bottom-right
- makes it about 1.7x larger than the previous patch
*/

main.page-accent::before {
    content: "" !important;
    position: fixed !important;
    z-index: -1 !important;
    right: clamp(-360px, -18vw, -160px) !important;
    bottom: clamp(-420px, -22vw, -200px) !important;
    width: clamp(700px, 61vw, 1290px) !important;
    height: clamp(700px, 61vw, 1290px) !important;
    border-radius: 999px !important;
    opacity: .20 !important;
    background: rgba(100, 116, 139, .26) !important;
    display: block !important;
    pointer-events: none !important;
}

main.page-accent::after {
    content: none !important;
    display: none !important;
}

/* Default page colour */
main.page-accent::before {
    background: rgba(100, 116, 139, .26) !important;
}

/* Dashboard / general */
main.page-accent-dashboard::before,
main.page-accent-index::before {
    background: rgba(99, 102, 241, .24) !important;
}

/* Items */
main.page-accent-items::before,
main.page-accent-item::before,
main.page-accent-item-edit::before,
body.page-items main::before,
body.page-item main::before,
body.page-item-edit main::before {
    background: rgba(34, 197, 94, .34) !important;
}

/* Locations */
main.page-accent-locations::before,
main.page-accent-location::before,
main.page-accent-location-edit::before,
main.page-accent-rotate-location-image::before,
body.page-locations main::before,
body.page-location main::before,
body.page-location-edit main::before,
body.page-rotate-location-image main::before {
    background: rgba(59, 130, 246, .34) !important;
}

/* Folders */
main.page-accent-folders::before,
main.page-accent-folder::before,
main.page-accent-folder-edit::before,
body.page-folders main::before,
body.page-folder main::before,
body.page-folder-edit main::before {
    background: rgba(234, 179, 8, .34) !important;
}

/* Templates */
main.page-accent-templates::before,
main.page-accent-template-edit::before,
body.page-templates main::before,
body.page-template-edit main::before {
    background: rgba(124, 58, 237, .30) !important;
}

/* QR pages */
main.page-accent-qr-labels::before,
main.page-accent-qr-codes::before,
main.page-accent-print-qr::before,
main.page-accent-scan::before,
body.page-qr-labels main::before,
body.page-qr-codes main::before,
body.page-print-qr main::before,
body.page-scan main::before {
    background: rgba(8, 145, 178, .30) !important;
}

/* Roadmap / beta notes / feedback */
main.page-accent-roadmap::before {
    background: rgba(99, 102, 241, .30) !important;
}

main.page-accent-about-beta::before {
    background: rgba(148, 163, 184, .26) !important;
}

main.page-accent-feedback::before {
    background: rgba(244, 63, 94, .28) !important;
}

/* Profile/settings/account pages */
main.page-accent-profile::before,
main.page-accent-login::before,
main.page-accent-register::before,
main.page-accent-forgot-password::before,
main.page-accent-reset-password::before {
    background: rgba(99, 102, 241, .24) !important;
}

/* Light mode keeps it softer */
body:not(.theme-dark) main.page-accent::before {
    opacity: .13 !important;
}

body:not(.theme-dark) main.page-accent-items::before,
body:not(.theme-dark) main.page-accent-item::before,
body:not(.theme-dark) main.page-accent-item-edit::before {
    background: rgba(34, 197, 94, .16) !important;
}

body:not(.theme-dark) main.page-accent-locations::before,
body:not(.theme-dark) main.page-accent-location::before,
body:not(.theme-dark) main.page-accent-location-edit::before {
    background: rgba(59, 130, 246, .16) !important;
}

body:not(.theme-dark) main.page-accent-folders::before,
body:not(.theme-dark) main.page-accent-folder::before,
body:not(.theme-dark) main.page-accent-folder-edit::before {
    background: rgba(234, 179, 8, .17) !important;
}

body:not(.theme-dark) main.page-accent-templates::before,
body:not(.theme-dark) main.page-accent-template-edit::before {
    background: rgba(124, 58, 237, .13) !important;
}

body:not(.theme-dark) main.page-accent-qr-labels::before,
body:not(.theme-dark) main.page-accent-qr-codes::before,
body:not(.theme-dark) main.page-accent-print-qr::before,
body:not(.theme-dark) main.page-accent-scan::before {
    background: rgba(8, 145, 178, .13) !important;
}

@media (max-width: 760px) {
    main.page-accent::before {
        right: -260px !important;
        bottom: -260px !important;
        width: 580px !important;
        height: 580px !important;
        opacity: .15 !important;
    }
}


/* --- Page circle same-position all-pages fix --- */

/*
Use the same circle placement everywhere.
The dashboard placement looked right, so this final override keeps that exact bottom-right style
for every app page that uses main.page-accent.
*/

main.page-accent::before,
body main.page-accent::before {
    content: "" !important;
    position: fixed !important;
    z-index: -1 !important;
    right: clamp(-360px, -18vw, -160px) !important;
    bottom: clamp(-420px, -22vw, -200px) !important;
    width: clamp(700px, 61vw, 1290px) !important;
    height: clamp(700px, 61vw, 1290px) !important;
    border-radius: 999px !important;
    opacity: .20 !important;
    display: block !important;
    pointer-events: none !important;
}

main.page-accent::after,
body main.page-accent::after {
    content: none !important;
    display: none !important;
}

/* Same position on every page, but still let each page keep its identity colour */
main.page-accent-items::before,
main.page-accent-item::before,
main.page-accent-item-edit::before {
    background: rgba(34, 197, 94, .34) !important;
}

main.page-accent-locations::before,
main.page-accent-location::before,
main.page-accent-location-edit::before,
main.page-accent-rotate-location-image::before {
    background: rgba(59, 130, 246, .34) !important;
}

main.page-accent-folders::before,
main.page-accent-folder::before,
main.page-accent-folder-edit::before {
    background: rgba(234, 179, 8, .34) !important;
}

main.page-accent-templates::before,
main.page-accent-template-edit::before {
    background: rgba(124, 58, 237, .30) !important;
}

main.page-accent-qr-labels::before,
main.page-accent-qr-codes::before,
main.page-accent-print-qr::before,
main.page-accent-scan::before {
    background: rgba(8, 145, 178, .30) !important;
}

main.page-accent-roadmap::before,
main.page-accent-dashboard::before,
main.page-accent-index::before {
    background: rgba(99, 102, 241, .30) !important;
}

main.page-accent-about-beta::before {
    background: rgba(148, 163, 184, .26) !important;
}

main.page-accent-feedback::before {
    background: rgba(244, 63, 94, .28) !important;
}

main.page-accent-profile::before,
main.page-accent-login::before,
main.page-accent-register::before,
main.page-accent-forgot-password::before,
main.page-accent-reset-password::before {
    background: rgba(99, 102, 241, .24) !important;
}

/* Light mode uses the same placement, just softer */
body:not(.theme-dark) main.page-accent::before {
    opacity: .13 !important;
}

body:not(.theme-dark) main.page-accent-items::before,
body:not(.theme-dark) main.page-accent-item::before,
body:not(.theme-dark) main.page-accent-item-edit::before {
    background: rgba(34, 197, 94, .16) !important;
}

body:not(.theme-dark) main.page-accent-locations::before,
body:not(.theme-dark) main.page-accent-location::before,
body:not(.theme-dark) main.page-accent-location-edit::before {
    background: rgba(59, 130, 246, .16) !important;
}

body:not(.theme-dark) main.page-accent-folders::before,
body:not(.theme-dark) main.page-accent-folder::before,
body:not(.theme-dark) main.page-accent-folder-edit::before {
    background: rgba(234, 179, 8, .17) !important;
}

body:not(.theme-dark) main.page-accent-templates::before,
body:not(.theme-dark) main.page-accent-template-edit::before {
    background: rgba(124, 58, 237, .13) !important;
}

body:not(.theme-dark) main.page-accent-qr-labels::before,
body:not(.theme-dark) main.page-accent-qr-codes::before,
body:not(.theme-dark) main.page-accent-print-qr::before,
body:not(.theme-dark) main.page-accent-scan::before {
    background: rgba(8, 145, 178, .13) !important;
}

body:not(.theme-dark) main.page-accent-roadmap::before,
body:not(.theme-dark) main.page-accent-dashboard::before,
body:not(.theme-dark) main.page-accent-index::before {
    background: rgba(99, 102, 241, .13) !important;
}

@media (max-width: 760px) {
    main.page-accent::before,
    body main.page-accent::before {
        right: -260px !important;
        bottom: -260px !important;
        width: 580px !important;
        height: 580px !important;
        opacity: .15 !important;
    }
}


/* --- Body background circle and footer overlap fix --- */

/*
Use the page accent as a BODY background layer instead of a MAIN pseudo-element.
This makes it consistent on every page and allows it to sit behind the footer instead of being cut off.
*/

body {
    position: relative !important;
    overflow-x: hidden !important;
}

body::before {
    content: "" !important;
    position: fixed !important;
    z-index: 0 !important;
    right: clamp(-520px, -24vw, -260px) !important;
    bottom: clamp(-560px, -28vw, -300px) !important;
    width: clamp(900px, 72vw, 1500px) !important;
    height: clamp(900px, 72vw, 1500px) !important;
    border-radius: 999px !important;
    opacity: .20 !important;
    background: rgba(100, 116, 139, .26) !important;
    pointer-events: none !important;
}

/* Disable the older main-based accent so there is only one circle */
main.page-accent::before,
main.page-accent::after,
body main.page-accent::before,
body main.page-accent::after,
body.page-items main::before,
body.page-items main::after,
body.page-locations main::before,
body.page-locations main::after,
body.page-folders main::before,
body.page-folders main::after,
body.page-templates main::before,
body.page-templates main::after,
body.page-qr-labels main::before,
body.page-qr-labels main::after,
body.page-qr-codes main::before,
body.page-qr-codes main::after,
body.page-roadmap main::before,
body.page-roadmap main::after,
body.page-feedback main::before,
body.page-feedback main::after {
    content: none !important;
    display: none !important;
}

/* Keep actual page content above the background layer */
.site-header,
.app-shell,
.site-footer,
.mobile-bottom-nav,
.demo-modal-backdrop {
    position: relative !important;
    z-index: 2 !important;
}

/* Let the circle continue behind the footer area */
.site-footer {
    background: rgba(15, 23, 42, .38) !important;
    backdrop-filter: none !important;
}

body:not(.theme-dark) .site-footer {
    background: rgba(255, 255, 255, .42) !important;
}

/* Page identity colours on the body layer */
body.page-dashboard::before,
body.page-index::before {
    background: rgba(99, 102, 241, .26) !important;
}

body.page-items::before,
body.page-item::before,
body.page-item-edit::before {
    background: rgba(34, 197, 94, .34) !important;
}

body.page-locations::before,
body.page-location::before,
body.page-location-edit::before,
body.page-rotate-location-image::before {
    background: rgba(59, 130, 246, .34) !important;
}

body.page-folders::before,
body.page-folder::before,
body.page-folder-edit::before {
    background: rgba(234, 179, 8, .34) !important;
}

body.page-templates::before,
body.page-template-edit::before {
    background: rgba(124, 58, 237, .30) !important;
}

body.page-qr-labels::before,
body.page-qr-codes::before,
body.page-print-qr::before,
body.page-scan::before {
    background: rgba(8, 145, 178, .30) !important;
}

body.page-roadmap::before {
    background: rgba(99, 102, 241, .30) !important;
}

body.page-about-beta::before {
    background: rgba(148, 163, 184, .26) !important;
}

body.page-feedback::before {
    background: rgba(244, 63, 94, .28) !important;
}

body.page-profile::before,
body.page-login::before,
body.page-register::before,
body.page-forgot-password::before,
body.page-reset-password::before {
    background: rgba(99, 102, 241, .24) !important;
}

/* Light mode softer */
body:not(.theme-dark)::before {
    opacity: .13 !important;
}

body:not(.theme-dark).page-items::before,
body:not(.theme-dark).page-item::before,
body:not(.theme-dark).page-item-edit::before {
    background: rgba(34, 197, 94, .16) !important;
}

body:not(.theme-dark).page-locations::before,
body:not(.theme-dark).page-location::before,
body:not(.theme-dark).page-location-edit::before {
    background: rgba(59, 130, 246, .16) !important;
}

body:not(.theme-dark).page-folders::before,
body:not(.theme-dark).page-folder::before,
body:not(.theme-dark).page-folder-edit::before {
    background: rgba(234, 179, 8, .17) !important;
}

body:not(.theme-dark).page-templates::before,
body:not(.theme-dark).page-template-edit::before {
    background: rgba(124, 58, 237, .13) !important;
}

body:not(.theme-dark).page-qr-labels::before,
body:not(.theme-dark).page-qr-codes::before,
body:not(.theme-dark).page-print-qr::before,
body:not(.theme-dark).page-scan::before {
    background: rgba(8, 145, 178, .13) !important;
}

@media (max-width: 760px) {
    body::before {
        right: -340px !important;
        bottom: -330px !important;
        width: 760px !important;
        height: 760px !important;
        opacity: .15 !important;
    }
}


/* --- Light mode circle visibility fix --- */

/*
Light mode was too subtle because opacity was reduced to .13 and the colour values were very pale.
This keeps the same bottom-right body circle, but makes the light-mode version visible without being harsh.
*/

body:not(.theme-dark)::before {
    opacity: .26 !important;
}

body:not(.theme-dark).page-dashboard::before,
body:not(.theme-dark).page-index::before {
    background: rgba(99, 102, 241, .24) !important;
}

body:not(.theme-dark).page-items::before,
body:not(.theme-dark).page-item::before,
body:not(.theme-dark).page-item-edit::before {
    background: rgba(34, 197, 94, .28) !important;
}

body:not(.theme-dark).page-locations::before,
body:not(.theme-dark).page-location::before,
body:not(.theme-dark).page-location-edit::before,
body:not(.theme-dark).page-rotate-location-image::before {
    background: rgba(59, 130, 246, .28) !important;
}

body:not(.theme-dark).page-folders::before,
body:not(.theme-dark).page-folder::before,
body:not(.theme-dark).page-folder-edit::before {
    background: rgba(234, 179, 8, .30) !important;
}

body:not(.theme-dark).page-templates::before,
body:not(.theme-dark).page-template-edit::before {
    background: rgba(124, 58, 237, .24) !important;
}

body:not(.theme-dark).page-qr-labels::before,
body:not(.theme-dark).page-qr-codes::before,
body:not(.theme-dark).page-print-qr::before,
body:not(.theme-dark).page-scan::before {
    background: rgba(8, 145, 178, .25) !important;
}

body:not(.theme-dark).page-roadmap::before {
    background: rgba(99, 102, 241, .24) !important;
}

body:not(.theme-dark).page-about-beta::before {
    background: rgba(100, 116, 139, .22) !important;
}

body:not(.theme-dark).page-feedback::before {
    background: rgba(244, 63, 94, .22) !important;
}

body:not(.theme-dark).page-profile::before,
body:not(.theme-dark).page-login::before,
body:not(.theme-dark).page-register::before,
body:not(.theme-dark).page-forgot-password::before,
body:not(.theme-dark).page-reset-password::before {
    background: rgba(99, 102, 241, .23) !important;
}

/* Slightly darken the generic light-mode fallback too */
body:not(.theme-dark)::before {
    background-color: rgba(100, 116, 139, .22) !important;
}


/* --- Public preview alignment patch --- */
.public-preview-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    margin-bottom: 18px;
    border: 1px solid #d8e0ee;
    border-radius: 16px;
    background: rgba(238, 244, 255, .82);
}

.public-preview-banner strong { display: block; }
.public-preview-banner span { color: #516173; }

.public-preview-grid { display: grid; gap: 18px; }
.public-preview-sample-card { display: grid; gap: 12px; }
.preview-locked { opacity: .72; cursor: not-allowed; }

.demo-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, .58);
}

.demo-modal-backdrop.is-open { display: flex; }

.demo-modal {
    width: min(520px, 100%);
    border: 1px solid #d8e0ee;
    border-radius: 22px;
    background: #fff;
    padding: 24px;
    box-shadow: 0 30px 90px rgba(15, 23, 42, .24);
}

.demo-modal h2 { margin-top: 0; }

.demo-modal-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
}

body.theme-dark .public-preview-banner {
    background: rgba(15, 23, 42, .76) !important;
    border-color: #334155 !important;
}

body.theme-dark .public-preview-banner span { color: #a8b6ca !important; }

body.theme-dark .demo-modal {
    background: #111827 !important;
    border-color: #334155 !important;
}

body.theme-dark .demo-modal-backdrop { background: rgba(2, 6, 23, .72); }

@media (max-width: 720px) {
    .public-preview-banner { align-items: flex-start; flex-direction: column; }
}


/* --- Public dashboard metric copy fix --- */

/*
The logged-out dashboard metric cards were not picking up the same card layout as the logged-in dashboard.
This final override forces the same 4-column card grid, real card boxes, coloured accent lines,
bottom-right circles, and top-right arrows.
*/

.dashboard-metric-grid,
.dashboard-preview-metric-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
    margin: 18px 0 !important;
    align-items: stretch !important;
}

.dashboard-metric-grid .metric-card,
.dashboard-preview-metric-grid .metric-card,
.dashboard-metric-grid button.metric-card,
.dashboard-preview-metric-grid button.metric-card {
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
    min-height: 122px !important;
    padding: 22px 24px !important;
    border: 1px solid #d8e0ee !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, .96) !important;
    color: #101828 !important;
    text-align: left !important;
    text-decoration: none !important;
    box-shadow: 0 12px 34px rgba(15, 23, 42, .055) !important;
    appearance: none !important;
    width: 100% !important;
    cursor: pointer;
}

.dashboard-metric-grid .metric-card::before,
.dashboard-preview-metric-grid .metric-card::before {
    content: "" !important;
    position: absolute !important;
    left: 24px !important;
    top: 22px !important;
    width: 46px !important;
    height: 5px !important;
    border-radius: 999px !important;
    background: #98a2b3 !important;
    display: block !important;
}

.dashboard-metric-grid .metric-card::after,
.dashboard-preview-metric-grid .metric-card::after {
    content: "" !important;
    position: absolute !important;
    right: -34px !important;
    bottom: -44px !important;
    width: 128px !important;
    height: 128px !important;
    border-radius: 999px !important;
    background: rgba(100, 116, 139, .10) !important;
    display: block !important;
    z-index: -1 !important;
}

.dashboard-metric-grid .metric-card span,
.dashboard-preview-metric-grid .metric-card span {
    display: block !important;
    position: relative !important;
    z-index: 1 !important;
    padding-top: 18px !important;
    padding-right: 28px !important;
    margin: 0 0 10px !important;
    color: #516173 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
}

.dashboard-metric-grid .metric-card span::after,
.dashboard-preview-metric-grid .metric-card span::after {
    content: "↗" !important;
    position: absolute !important;
    right: 0 !important;
    top: 14px !important;
    color: #93a4bd !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

.dashboard-metric-grid .metric-card h2,
.dashboard-preview-metric-grid .metric-card h2 {
    position: relative !important;
    z-index: 1 !important;
    margin: 0 !important;
    color: #101828 !important;
    font-size: 40px !important;
    line-height: .95 !important;
    font-weight: 950 !important;
    letter-spacing: -.045em !important;
}

/* Metric colours */
.dashboard-metric-grid .metric-items,
.dashboard-preview-metric-grid .metric-items {
    border-color: rgba(34, 197, 94, .26) !important;
}

.dashboard-metric-grid .metric-items::before,
.dashboard-preview-metric-grid .metric-items::before {
    background: #22c55e !important;
}

.dashboard-metric-grid .metric-items::after,
.dashboard-preview-metric-grid .metric-items::after {
    background: rgba(34, 197, 94, .16) !important;
}

.dashboard-metric-grid .metric-locations,
.dashboard-preview-metric-grid .metric-locations {
    border-color: rgba(59, 130, 246, .28) !important;
}

.dashboard-metric-grid .metric-locations::before,
.dashboard-preview-metric-grid .metric-locations::before {
    background: #3b82f6 !important;
}

.dashboard-metric-grid .metric-locations::after,
.dashboard-preview-metric-grid .metric-locations::after {
    background: rgba(59, 130, 246, .16) !important;
}

.dashboard-metric-grid .metric-folders,
.dashboard-preview-metric-grid .metric-folders {
    border-color: rgba(234, 179, 8, .32) !important;
}

.dashboard-metric-grid .metric-folders::before,
.dashboard-preview-metric-grid .metric-folders::before {
    background: #eab308 !important;
}

.dashboard-metric-grid .metric-folders::after,
.dashboard-preview-metric-grid .metric-folders::after {
    background: rgba(234, 179, 8, .18) !important;
}

.dashboard-metric-grid .metric-attention,
.dashboard-preview-metric-grid .metric-attention {
    border-color: rgba(239, 68, 68, .30) !important;
}

.dashboard-metric-grid .metric-attention::before,
.dashboard-preview-metric-grid .metric-attention::before {
    background: #ef4444 !important;
}

.dashboard-metric-grid .metric-attention::after,
.dashboard-preview-metric-grid .metric-attention::after {
    background: rgba(239, 68, 68, .18) !important;
}

/* Dark mode version */
body.theme-dark .dashboard-metric-grid .metric-card,
body.theme-dark .dashboard-preview-metric-grid .metric-card {
    background: linear-gradient(135deg, #111827 0%, #0f172a 100%) !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .22) !important;
}

body.theme-dark .dashboard-metric-grid .metric-card span,
body.theme-dark .dashboard-preview-metric-grid .metric-card span {
    color: #a8b6ca !important;
}

body.theme-dark .dashboard-metric-grid .metric-card h2,
body.theme-dark .dashboard-preview-metric-grid .metric-card h2 {
    color: #f8fafc !important;
}

body.theme-dark .dashboard-metric-grid .metric-items,
body.theme-dark .dashboard-preview-metric-grid .metric-items {
    border-color: rgba(34, 197, 94, .38) !important;
}

body.theme-dark .dashboard-metric-grid .metric-locations,
body.theme-dark .dashboard-preview-metric-grid .metric-locations {
    border-color: rgba(59, 130, 246, .42) !important;
}

body.theme-dark .dashboard-metric-grid .metric-folders,
body.theme-dark .dashboard-preview-metric-grid .metric-folders {
    border-color: rgba(234, 179, 8, .42) !important;
}

body.theme-dark .dashboard-metric-grid .metric-attention,
body.theme-dark .dashboard-preview-metric-grid .metric-attention {
    border-color: rgba(239, 68, 68, .48) !important;
}

/* Light mode page circle needs to be more visible */
body:not(.theme-dark)::before {
    opacity: .34 !important;
}

body:not(.theme-dark).page-dashboard::before,
body:not(.theme-dark).page-index::before {
    background: rgba(99, 102, 241, .30) !important;
}

body:not(.theme-dark).page-items::before,
body:not(.theme-dark).page-item::before,
body:not(.theme-dark).page-item-edit::before {
    background: rgba(34, 197, 94, .34) !important;
}

body:not(.theme-dark).page-locations::before,
body:not(.theme-dark).page-location::before,
body:not(.theme-dark).page-location-edit::before,
body:not(.theme-dark).page-rotate-location-image::before {
    background: rgba(59, 130, 246, .34) !important;
}

body:not(.theme-dark).page-folders::before,
body:not(.theme-dark).page-folder::before,
body:not(.theme-dark).page-folder-edit::before {
    background: rgba(234, 179, 8, .34) !important;
}

body:not(.theme-dark).page-templates::before,
body:not(.theme-dark).page-template-edit::before {
    background: rgba(124, 58, 237, .30) !important;
}

body:not(.theme-dark).page-qr-labels::before,
body:not(.theme-dark).page-qr-codes::before,
body:not(.theme-dark).page-print-qr::before,
body:not(.theme-dark).page-scan::before {
    background: rgba(8, 145, 178, .30) !important;
}

@media (max-width: 900px) {
    .dashboard-metric-grid,
    .dashboard-preview-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 560px) {
    .dashboard-metric-grid,
    .dashboard-preview-metric-grid {
        grid-template-columns: 1fr !important;
    }
}