/**
 * Vorrat Pro — Production CSS
 * @copyright (C) jens-richter.com
 * @license Proprietary
 */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap');

:root {
    /* Greens */
    --c-primary: #22734a;
    --c-primary-hover: #1a5c3b;
    --c-primary-light: #eaf6ef;
    --c-primary-50: #f3faf6;
    --c-primary-rgb: 34,115,74;
    /* Status */
    --c-red: #d63031;
    --c-red-light: #ffeaea;
    --c-orange: #e17055;
    --c-orange-light: #fff5f0;
    --c-yellow: #fdcb6e;
    --c-yellow-light: #fffcf0;
    --c-blue: #0984e3;
    --c-blue-light: #edf5ff;
    /* Neutrals */
    --c-bg: #f4f6f8;
    --c-card: #ffffff;
    --c-border: #e3e8ee;
    --c-border-light: #f0f2f5;
    --c-text: #1e293b;
    --c-text-2: #475569;
    --c-text-3: #94a3b8;
    /* Sizing */
    --radius: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --shadow-xs: 0 1px 2px rgba(0,0,0,.04);
    --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.03);
    --shadow-md: 0 4px 12px rgba(0,0,0,.07);
    --shadow-lg: 0 8px 30px rgba(0,0,0,.1);
    --nav-w: 250px;
    --header-h: 56px;
    --transition: .18s cubic-bezier(.4,0,.2,1);
}

/* ── Reset ───────────────────────────────────────────────── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:15px; scroll-behavior:smooth; }
body {
    font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    background:var(--c-bg);
    color:var(--c-text);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}
a { color:var(--c-primary); text-decoration:none; transition:color var(--transition); }
a:hover { color:var(--c-primary-hover); }
button,input,select,textarea { font:inherit; }
h1 { font-size:1.55rem; font-weight:700; letter-spacing:-.03em; line-height:1.25; }
h2 { font-size:1.2rem; font-weight:700; letter-spacing:-.02em; line-height:1.3; }
h3 { font-size:1rem; font-weight:600; line-height:1.35; }

/* ── Layout Shell ────────────────────────────────────────── */
.layout { display:flex; min-height:100vh; }

/* ── Sidebar ─────────────────────────────────────────────── */
.nav {
    width:var(--nav-w);
    background:var(--c-card);
    border-right:1px solid var(--c-border);
    position:fixed;
    top:0; left:0; bottom:0;
    display:flex;
    flex-direction:column;
    z-index:80;
    overflow-y:auto;
    overflow-x:hidden;
    transition:transform .25s ease;
}
.nav-brand {
    padding:1.2rem 1.35rem;
    display:flex;
    align-items:center;
    gap:.55rem;
    border-bottom:1px solid var(--c-border-light);
}
.nav-brand-text {
    font-size:1.2rem;
    font-weight:700;
    color:var(--c-text);
    letter-spacing:-.02em;
}
.nav-badge {
    background:linear-gradient(135deg, var(--c-primary), #2ecc71);
    color:#fff;
    font-size:.55rem;
    font-weight:800;
    letter-spacing:1.8px;
    padding:3px 7px 2px;
    border-radius:5px;
    line-height:1;
}
.nav-user {
    padding:1rem 1.35rem;
    border-bottom:1px solid var(--c-border-light);
}
.nav-user-name { font-weight:600; font-size:.9rem; color:var(--c-text); }
.nav-user-org { font-size:.78rem; color:var(--c-text-3); margin-top:2px; }
.nav-user-plan {
    display:inline-block;
    margin-top:4px;
    font-size:.6rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1px;
    padding:2px 6px;
    border-radius:4px;
    background:var(--c-primary-light);
    color:var(--c-primary);
}
.nav-menu { flex:1; padding:.6rem 0; }
.nav-item {
    display:flex;
    align-items:center;
    gap:.7rem;
    padding:.6rem 1.35rem;
    margin:1px .5rem;
    border-radius:var(--radius);
    color:var(--c-text-2);
    font-size:.88rem;
    font-weight:500;
    transition:all var(--transition);
    text-decoration:none;
}
.nav-item:hover { background:var(--c-primary-50); color:var(--c-primary); text-decoration:none; }
.nav-item.active {
    background:var(--c-primary-light);
    color:var(--c-primary);
    font-weight:600;
}
.nav-item .ni { width:20px; height:20px; display:flex; align-items:center; justify-content:center; font-size:1.05rem; flex-shrink:0; opacity:.85; }
.nav-item.active .ni { opacity:1; }
.nav-sep { height:1px; background:var(--c-border-light); margin:.35rem 1.35rem; }
.nav-label {
    padding:.5rem 1.35rem .2rem;
    font-size:.65rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1.2px;
    color:var(--c-text-3);
}
.nav-footer {
    padding:.85rem 1.35rem;
    border-top:1px solid var(--c-border-light);
    font-size:.7rem;
    color:var(--c-text-3);
    line-height:1.6;
}

/* ── Main Area ───────────────────────────────────────────── */
.main { flex:1; margin-left:var(--nav-w); min-height:100vh; display:flex; flex-direction:column; min-width:0; }

.header {
    height:var(--header-h);
    background:var(--c-card);
    border-bottom:1px solid var(--c-border);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 1.75rem;
    position:sticky; top:0;
    z-index:40;
    flex-shrink:0;
}
.header-left { display:flex; align-items:center; gap:.75rem; }
.header-title { font-size:1.05rem; font-weight:700; color:var(--c-text); }
.header-sub { font-size:.78rem; color:var(--c-text-3); margin-left:.5rem; }
.header-actions { display:flex; align-items:center; gap:.4rem; flex-shrink:0; overflow-x:auto; -webkit-overflow-scrolling:touch; }

.content { padding:1.75rem; flex:1; max-width:1200px; width:100%; }
.content-narrow { max-width:800px; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.4rem;
    padding:.5rem 1.1rem;
    font-size:.85rem;
    font-weight:600;
    border:none;
    border-radius:var(--radius);
    cursor:pointer;
    transition:all var(--transition);
    white-space:nowrap;
    text-decoration:none;
    line-height:1.4;
}
.btn-primary { background:var(--c-primary); color:#fff; }
.btn-primary:hover { background:var(--c-primary-hover); color:#fff; text-decoration:none; box-shadow:0 2px 8px rgba(var(--c-primary-rgb),.3); }
.btn-outline { background:transparent; color:var(--c-primary); border:1.5px solid var(--c-primary); }
.btn-outline:hover { background:var(--c-primary-light); text-decoration:none; }
.btn-danger { background:var(--c-red); color:#fff; }
.btn-danger:hover { background:#c0392b; color:#fff; }
.btn-ghost { background:transparent; color:var(--c-text-2); }
.btn-ghost:hover { background:var(--c-border-light); }
.btn-sm { padding:.35rem .7rem; font-size:.8rem; }
.btn-lg { padding:.7rem 1.5rem; font-size:.95rem; }
.btn-block { width:100%; }
.btn-icon { width:34px; height:34px; padding:0; border-radius:var(--radius); }

/* ── Cards ───────────────────────────────────────────────── */
.card {
    background:var(--c-card);
    border:1px solid var(--c-border);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-xs);
    overflow:hidden;
    transition:box-shadow var(--transition);
}
.card:hover { box-shadow:var(--shadow-sm); }
.card-pad { padding:1.35rem; }
.card-header {
    padding:1rem 1.35rem;
    border-bottom:1px solid var(--c-border-light);
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.card-title {
    font-size:.72rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.9px;
    color:var(--c-text-3);
}
.card + .card { margin-top:1rem; }

/* ── Stat Cards ──────────────────────────────────────────── */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:.85rem; margin-bottom:1.5rem; }
.stat-card {
    background:var(--c-card);
    border:1px solid var(--c-border);
    border-radius:var(--radius-lg);
    padding:1.15rem 1.25rem;
    box-shadow:var(--shadow-xs);
    position:relative;
    overflow:hidden;
}
.stat-card::before {
    content:'';
    position:absolute;
    top:0; left:0; right:0;
    height:3px;
    border-radius:var(--radius-lg) var(--radius-lg) 0 0;
}
.stat-card-green::before { background:var(--c-primary); }
.stat-card-red::before { background:var(--c-red); }
.stat-card-orange::before { background:var(--c-orange); }
.stat-card-blue::before { background:var(--c-blue); }
.stat-card-yellow::before { background:var(--c-yellow); }
.stat-val { font-size:2rem; font-weight:700; letter-spacing:-.03em; line-height:1.1; }
.stat-label { font-size:.72rem; font-weight:500; color:var(--c-text-3); text-transform:uppercase; letter-spacing:.5px; margin-top:.3rem; }
.stat-sub { font-size:.78rem; color:var(--c-text-2); margin-top:.35rem; }
.sc-green .stat-val { color:var(--c-primary); }
.sc-red .stat-val { color:var(--c-red); }
.sc-orange .stat-val { color:var(--c-orange); }
.sc-blue .stat-val { color:var(--c-blue); }

/* ── Tables ──────────────────────────────────────────────── */
.tbl-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
table.tbl { width:100%; border-collapse:collapse; font-size:.875rem; }
.tbl thead th {
    text-align:left;
    padding:.7rem 1rem;
    font-size:.68rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.7px;
    color:var(--c-text-3);
    background:var(--c-bg);
    border-bottom:2px solid var(--c-border);
    white-space:nowrap;
    position:sticky; top:var(--header-h);
    z-index:5;
}
.tbl tbody td {
    padding:.65rem 1rem;
    border-bottom:1px solid var(--c-border-light);
    vertical-align:middle;
}
.tbl tbody tr { transition:background var(--transition); }
.tbl tbody tr:hover td { background:var(--c-primary-50); }
.tbl tbody tr:last-child td { border-bottom:none; }
.tbl .col-num { text-align:right; font-variant-numeric:tabular-nums; }
.tbl .col-actions { text-align:right; white-space:nowrap; }

/* ── Badges ──────────────────────────────────────────────── */
.badge {
    display:inline-flex;
    align-items:center;
    padding:.15rem .55rem;
    border-radius:5px;
    font-size:.68rem;
    font-weight:700;
    letter-spacing:.3px;
    line-height:1.5;
    white-space:nowrap;
}
.badge-green { background:var(--c-primary-light); color:var(--c-primary); }
.badge-red { background:var(--c-red-light); color:var(--c-red); }
.badge-orange { background:var(--c-orange-light); color:var(--c-orange); }
.badge-blue { background:var(--c-blue-light); color:var(--c-blue); }
.badge-yellow { background:var(--c-yellow-light); color:#92640e; }

/* ── MHD Status Colors ───────────────────────────────────── */
.mhd-ok { color:var(--c-primary); }
.mhd-warn { color:var(--c-orange); }
.mhd-crit { color:var(--c-red); font-weight:600; }
.mhd-expired { color:var(--c-red); font-weight:700; }

/* ── Forms ───────────────────────────────────────────────── */
.form-group { margin-bottom:1rem; }
.form-label { display:block; font-size:.82rem; font-weight:600; color:var(--c-text); margin-bottom:.3rem; }
.form-input,.form-select {
    width:100%;
    padding:.55rem .8rem;
    font-size:.9rem;
    border:1.5px solid var(--c-border);
    border-radius:var(--radius);
    background:#fff;
    transition:border var(--transition), box-shadow var(--transition);
    color:var(--c-text);
}
.form-input:focus,.form-select:focus {
    outline:none;
    border-color:var(--c-primary);
    box-shadow:0 0 0 3px rgba(var(--c-primary-rgb),.12);
}
.form-input::placeholder { color:var(--c-text-3); }
.form-row { display:flex; gap:.75rem; }
.form-row > * { flex:1; }
.form-hint { font-size:.72rem; color:var(--c-text-3); margin-top:.15rem; }

/* ── Device Rows (HACCP) ─────────────────────────────────── */
.device-row {
    display:flex;
    align-items:center;
    gap:.85rem;
    padding:.9rem 1.15rem;
    border:1px solid var(--c-border);
    border-radius:var(--radius-lg);
    margin-bottom:.6rem;
    background:var(--c-card);
    cursor:pointer;
    transition:all var(--transition);
}
.device-row:hover { border-color:var(--c-primary); box-shadow:var(--shadow-sm); transform:translateY(-1px); }
.device-status { font-size:1.35rem; flex-shrink:0; line-height:1; }
.device-info { flex:1; min-width:0; }
.device-name { font-weight:600; font-size:.92rem; }
.device-meta { font-size:.78rem; color:var(--c-text-3); margin-top:1px; }
.device-temp { text-align:right; flex-shrink:0; }
.device-temp-val { font-weight:700; font-size:1.1rem; font-variant-numeric:tabular-nums; }
.device-temp-val.is-alert { color:var(--c-red); }
.device-temp-time { font-size:.7rem; color:var(--c-text-3); }

/* ── Activity List ───────────────────────────────────────── */
.activity-item {
    display:flex;
    align-items:flex-start;
    gap:.65rem;
    padding:.55rem 0;
    border-bottom:1px solid var(--c-border-light);
    font-size:.85rem;
}
.activity-item:last-child { border:none; }
.activity-icon { font-size:.95rem; width:1.6rem; text-align:center; flex-shrink:0; padding-top:.1rem; }
.activity-text { flex:1; color:var(--c-text-2); }
.activity-meta { font-size:.72rem; color:var(--c-text-3); white-space:nowrap; text-align:right; }

/* ── Rescue Items ────────────────────────────────────────── */
.rescue-item {
    display:flex;
    align-items:center;
    gap:.75rem;
    padding:.75rem 1rem;
    border-radius:var(--radius);
    margin-bottom:.45rem;
    transition:transform var(--transition);
}
.rescue-item:hover { transform:translateX(2px); }
.rescue-expired { background:var(--c-red-light); border-left:3px solid var(--c-red); }
.rescue-today { background:#fff3e6; border-left:3px solid var(--c-orange); }
.rescue-tomorrow { background:var(--c-yellow-light); border-left:3px solid var(--c-yellow); }
.rescue-info { flex:1; }
.rescue-name { font-weight:600; font-size:.9rem; }
.rescue-meta { font-size:.78rem; color:var(--c-text-3); margin-top:1px; }

/* ── Empty State ─────────────────────────────────────────── */
.empty { text-align:center; padding:4rem 1.5rem; }
.empty-icon { font-size:3.5rem; margin-bottom:1rem; opacity:.8; }
.empty-title { font-size:1.15rem; font-weight:700; color:var(--c-text); margin-bottom:.4rem; }
.empty-text { font-size:.9rem; color:var(--c-text-3); margin-bottom:1.5rem; line-height:1.6; max-width:360px; margin-left:auto; margin-right:auto; }

/* ── Modals ──────────────────────────────────────────────── */
.modal-overlay {
    position:fixed; inset:0;
    background:rgba(15,23,42,.45);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:200;
    padding:1rem;
    animation:fadeIn .15s ease;
}
.modal-overlay.open { display:flex; }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.modal {
    background:#fff;
    border-radius:var(--radius-xl);
    padding:0;
    width:100%;
    max-width:480px;
    max-height:90vh;
    overflow-y:auto;
    box-shadow:var(--shadow-lg);
    animation:modalSlide .2s ease;
}
@keyframes modalSlide { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }

.modal-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:1.15rem 1.5rem;
    border-bottom:1px solid var(--c-border-light);
}
.modal-head h2 { font-size:1.05rem; }
.modal-close { background:none; border:none; font-size:1.4rem; color:var(--c-text-3); cursor:pointer; padding:.25rem; line-height:1; transition:color var(--transition); }
.modal-close:hover { color:var(--c-text); }
.modal-body { padding:1.5rem; max-height:calc(90vh - 60px); overflow-y:auto; }
.modal-footer { padding:1rem 1.5rem; border-top:1px solid var(--c-border-light); display:flex; justify-content:flex-end; gap:.5rem; }

/* ── Alerts ──────────────────────────────────────────────── */
.alert { padding:.75rem 1rem; border-radius:var(--radius); font-size:.85rem; margin-bottom:1rem; border-left:3px solid; }
.alert-success { background:var(--c-primary-light); color:#155a36; border-color:var(--c-primary); }
.alert-error { background:var(--c-red-light); color:#9b1c1c; border-color:var(--c-red); }
.alert-warning { background:var(--c-yellow-light); color:#7c5e10; border-color:var(--c-yellow); }
.alert-info { background:var(--c-blue-light); color:#1e4e8c; border-color:var(--c-blue); }

/* ── Section Grid ────────────────────────────────────────── */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:1rem; }

/* ── Misc ────────────────────────────────────────────────── */
.text-muted { color:var(--c-text-3); }
.text-sm { font-size:.82rem; }
.text-xs { font-size:.72rem; }
.fw-600 { font-weight:600; }
.fw-700 { font-weight:700; }
.mt-1 { margin-top:1rem; }
.mb-1 { margin-bottom:1rem; }
.flex-between { display:flex; justify-content:space-between; align-items:center; }
.gap-sm { gap:.5rem; }
.gap-md { gap:1rem; }

/* ── Responsive ──────────────────────────────────────────── */
.nav-toggle { display:none; background:none; border:none; font-size:1.3rem; cursor:pointer; color:var(--c-text); padding:.25rem; }
.mobile-nav { display:none; }
.nav-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:79; }

/* Tablet */
@media (max-width: 1024px) {
    :root { --nav-w:220px; }
    .content { padding:1.25rem; }
}

/* Mobile */
@media (max-width: 768px) {
    .nav {
        transform:translateX(-100%);
        box-shadow:none;
        width:280px;
    }
    .nav.open {
        transform:translateX(0);
        box-shadow:var(--shadow-lg);
    }
    .nav-overlay.open { display:block; }
    .main { margin-left:0; }
    .content { padding:1rem .85rem; }
    .header { padding:0 .85rem; height:50px; }
    :root { --header-h:50px; }
    .header-title { font-size:.95rem; }
    .header-sub { display:none; }
    .header-actions .btn { font-size:.75rem; padding:.3rem .55rem; }
    .nav-toggle { display:flex; align-items:center; }
    .stats-grid { grid-template-columns:repeat(2, 1fr); gap:.5rem; }
    .stat-card { padding:.85rem 1rem; }
    .stat-val { font-size:1.6rem; }
    .form-row { flex-direction:column; gap:0; }
    .grid-2, .grid-3 { grid-template-columns:1fr; }
    .card-pad { padding:1rem; }
    .card-header { padding:.75rem 1rem; }

    .mobile-nav {
        display:flex;
        position:fixed;
        bottom:0; left:0; right:0;
        background:var(--c-card);
        border-top:1px solid var(--c-border);
        z-index:70;
        padding:0 .25rem;
        padding-bottom:env(safe-area-inset-bottom);
    }
    .mn-item {
        flex:1;
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:.1rem;
        padding:.45rem .15rem .35rem;
        font-size:.6rem;
        font-weight:600;
        color:var(--c-text-3);
        text-decoration:none;
        transition:color var(--transition);
        position:relative;
    }
    .mn-item.active { color:var(--c-primary); }
    .mn-item.active::before {
        content:'';
        position:absolute;
        top:0; left:25%; right:25%;
        height:2px;
        background:var(--c-primary);
        border-radius:0 0 2px 2px;
    }
    .mn-icon { font-size:1.15rem; line-height:1; }
    .mn-label { letter-spacing:.2px; }
    body { padding-bottom:58px; }
    
    .modal { max-width:calc(100vw - 1.5rem); margin:.75rem; border-radius:var(--radius-lg); }
    .modal-head { padding:1rem 1.15rem; }
    .modal-body { padding:1.15rem; }
}

/* Small phones */
@media (max-width: 400px) {
    .stats-grid { grid-template-columns:1fr 1fr; gap:.4rem; }
    .stat-card { padding:.7rem .85rem; }
    .stat-val { font-size:1.4rem; }
    .stat-label { font-size:.6rem; }
    .header-actions .btn { padding:.25rem .4rem; font-size:.7rem; }
    .rescue-item { flex-direction:column; align-items:flex-start; gap:.35rem; }
    .rescue-item .btn { align-self:flex-end; }
}

/* ═══════════════════════════════════════════════════════════
   BESTAND — Filter, Adj Buttons, Scanner
   ═══════════════════════════════════════════════════════════ */

/* Filter Bar */
.filter-bar {
    display:flex;
    gap:.6rem;
    margin-bottom:1rem;
    flex-wrap:wrap;
    align-items:center;
}
.filter-search { flex:2; min-width:160px; }
.filter-search .form-input {
    background:var(--c-card);
    border-color:var(--c-border);
    box-shadow:var(--shadow-xs);
}
.filter-select {
    flex:1;
    min-width:120px;
    padding:.5rem .65rem;
    font-size:.82rem;
    background:var(--c-card);
    box-shadow:var(--shadow-xs);
}

/* Adj Buttons */
.adj-btns {
    display:flex;
    gap:2px;
    border-radius:var(--radius);
    overflow:hidden;
    border:1px solid var(--c-border);
}
.btn-adj {
    width:32px;
    height:32px;
    border:none;
    background:var(--c-card);
    font-size:1rem;
    font-weight:700;
    cursor:pointer;
    transition:all var(--transition);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--c-text-2);
}
.btn-adj:hover { background:var(--c-border-light); }
.btn-adj-plus:hover { background:var(--c-primary-light); color:var(--c-primary); }
.btn-adj-minus:hover { background:var(--c-red-light); color:var(--c-red); }
.btn-adj-add { font-size:.85rem; }
.btn-adj-add:hover { background:var(--c-blue-light); color:var(--c-blue); }

/* Bestand value animation */
.bestand-val {
    font-weight:700;
    font-size:1.05rem;
    font-variant-numeric:tabular-nums;
    transition:color .3s, font-weight .3s;
}

/* Responsive helpers */
.show-mobile { display:none; }
@media (max-width:768px) {
    .hide-mobile { display:none !important; }
    .show-mobile { display:block; }
    .filter-bar { flex-direction:column; }
    .filter-search { min-width:100%; }
    .filter-select { min-width:100%; }
    .adj-btns { gap:1px; }
    .btn-adj { width:36px; height:36px; font-size:1.15rem; }
    .tbl td { padding:.5rem .6rem; }
    .tbl th { padding:.5rem .6rem; }
    .grid-2 { grid-template-columns:1fr !important; }
}

/* ═══════════════════════════════════════════════════════════
   SETTINGS — Tags, Toast
   ═══════════════════════════════════════════════════════════ */

.tag-item {
    display:inline-flex;
    align-items:center;
    gap:.3rem;
    padding:.3rem .65rem;
    background:var(--c-primary-light);
    color:var(--c-primary);
    border-radius:6px;
    font-size:.82rem;
    font-weight:500;
}
.tag-remove {
    background:none;
    border:none;
    color:var(--c-primary);
    font-size:1rem;
    cursor:pointer;
    padding:0 0 0 .2rem;
    opacity:.6;
    transition:opacity .15s;
    line-height:1;
}
.tag-remove:hover { opacity:1; }

/* Toast Notifications */
.toast-container {
    position:fixed;
    top:calc(var(--header-h) + .75rem);
    right:1rem;
    z-index:300;
    display:flex;
    flex-direction:column;
    gap:.5rem;
}
.toast {
    padding:.7rem 1.1rem;
    border-radius:var(--radius);
    font-size:.85rem;
    font-weight:500;
    box-shadow:var(--shadow-md);
    animation:toastIn .25s ease;
    max-width:350px;
    display:flex;
    align-items:center;
    gap:.5rem;
}
.toast-success { background:var(--c-primary); color:#fff; }
.toast-error { background:var(--c-red); color:#fff; }
.toast-info { background:var(--c-blue); color:#fff; }
@keyframes toastIn { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:translateX(0); } }
@keyframes toastOut { from { opacity:1; } to { opacity:0; transform:translateY(-10px); } }

.content-narrow { max-width:700px; }

@media (max-width:768px) {
    .toast-container { top:auto; bottom:70px; right:.75rem; left:.75rem; }
    .toast { max-width:100%; }
}

/* ═══════════════════════════════════════════════════════════
   ACCESSIBILITY & FOCUS
   ═══════════════════════════════════════════════════════════ */
:focus-visible { outline:2px solid var(--c-primary); outline-offset:2px; }
.btn:focus-visible { box-shadow:0 0 0 3px rgba(var(--c-primary-rgb),.3); }
.form-input:focus-visible, .form-select:focus-visible { border-color:var(--c-primary); box-shadow:0 0 0 3px rgba(var(--c-primary-rgb),.12); }

/* ═══════════════════════════════════════════════════════════
   PRINT
   ═══════════════════════════════════════════════════════════ */
@media print {
    .nav, .mobile-nav, .nav-overlay, .header, .modal-overlay, .toast-container { display:none !important; }
    .main { margin-left:0 !important; }
    .content { padding:.5rem !important; max-width:100% !important; }
    .card { box-shadow:none !important; border:1px solid #ddd !important; break-inside:avoid; }
    .btn { display:none !important; }
    a { color:inherit !important; text-decoration:none !important; }
    body { padding-bottom:0 !important; background:#fff !important; }
}