/* ============================================================
   ContractHelper – Stylesheet (Sidebar-Layout, Dark/Light, responsiv)
   ============================================================ */

/* ---------- Design-Tokens: Light ---------- */
:root{
    --bg:#eef1f6;
    --surface:#ffffff;
    --surface-2:#f7f8fa;
    --ink:#1f2937;
    --muted:#6b7280;
    --line:#e6e8ee;
    --sidebar:#ffffff;
    --sidebar-ink:#4b5563;
    --sidebar-active-bg:#eef2ff;
    --sidebar-active-ink:#4f46e5;
    --primary:#4f46e5;
    --primary-dark:#4338ca;
    --primary-ink:#ffffff;
    --amber:#f59e0b;
    --green:#10b981;
    --blue:#3b82f6;
    --red:#ef4444;
    --radius:14px;
    --shadow:0 1px 3px rgba(16,24,40,.06),0 1px 2px rgba(16,24,40,.04);
    --shadow-lg:0 8px 30px rgba(16,24,40,.10);
}
/* ---------- Design-Tokens: Dark ---------- */
[data-theme="dark"]{
    --bg:#0b1220;
    --surface:#151d2e;
    --surface-2:#1b2436;
    --ink:#e5e9f0;
    --muted:#98a2b3;
    --line:#26304a;
    --sidebar:#0e1626;
    --sidebar-ink:#c2cad6;
    --sidebar-active-bg:#1e2740;
    --sidebar-active-ink:#a5b4fc;
    --primary:#6366f1;
    --primary-dark:#4f46e5;
    --primary-ink:#ffffff;
    --shadow:0 1px 3px rgba(0,0,0,.4);
    --shadow-lg:0 10px 34px rgba(0,0,0,.5);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    background:var(--bg);color:var(--ink);font-size:15px;line-height:1.5;
    -webkit-font-smoothing:antialiased;
}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}

/* ============================================================
   Layout: Sidebar + Content
   ============================================================ */
.layout{display:flex;min-height:100vh}

.sidebar{
    width:236px;flex:0 0 236px;background:var(--sidebar);
    border-right:1px solid var(--line);position:sticky;top:0;height:100vh;
    display:flex;flex-direction:column;padding:18px 14px;z-index:40;
}
.sidebar-brand{
    display:flex;align-items:center;gap:9px;font-weight:700;font-size:18px;
    padding:6px 10px 18px;color:var(--ink);
}
.sidebar-nav{display:flex;flex-direction:column;gap:4px;flex:1}
.sidebar-nav a{
    display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:10px;
    color:var(--sidebar-ink);font-weight:500;
}
.sidebar-nav a:hover{background:var(--surface-2);text-decoration:none}
.sidebar-nav a.active{background:var(--sidebar-active-bg);color:var(--sidebar-active-ink)}
.sidebar-nav .ic{width:18px;display:inline-flex;align-items:center;justify-content:center;font-size:15px;opacity:.9}
.sidebar-nav .ic .icon{vertical-align:middle}
.nav-sep{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
    padding:14px 12px 6px;font-weight:600}
.role-badge{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;
    letter-spacing:.03em;background:var(--sidebar-active-bg);color:var(--sidebar-active-ink);
    border-radius:6px;padding:1px 6px;margin-left:4px;vertical-align:1px}
.sidebar-user .uname{display:flex;flex-direction:column;gap:2px;align-items:flex-start}

.sidebar-foot{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.theme-btn{
    display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
    background:var(--surface-2);border:1px solid var(--line);color:var(--ink);
    border-radius:10px;padding:10px;font-size:14px;font-weight:500;width:100%;
}
.theme-btn:hover{border-color:var(--primary)}
.theme-btn .theme-icon-light{display:none}
[data-theme="dark"] .theme-btn .theme-icon-dark{display:none}
[data-theme="dark"] .theme-btn .theme-icon-light{display:inline}

.sidebar-user{
    display:flex;align-items:center;gap:10px;padding:10px;border-radius:10px;
    background:var(--surface-2);
}
.sidebar-user .avatar{
    width:32px;height:32px;border-radius:50%;background:var(--primary);color:#fff;
    display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex:0 0 32px;
}
.sidebar-user .uname{flex:1;font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar-user .logout{color:var(--muted);font-size:18px;padding:0 4px}
.sidebar-user .logout:hover{color:var(--red);text-decoration:none}

.content{flex:1;min-width:0;padding:30px 34px;max-width:1600px}

/* ---------- Mobile-Kopf ---------- */
.mobilebar{display:none}
.sidebar-overlay{display:none}

/* ============================================================
   Allgemeine Bausteine
   ============================================================ */
.page-title{font-size:24px;margin:0 0 22px}
.page-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px;flex-wrap:wrap}
.page-head .page-title{margin:0}

.panel{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);
    border:1px solid var(--line);padding:20px 22px;margin-bottom:22px}
.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;flex-wrap:wrap;gap:10px}
.panel-head h2{font-size:16px;margin:0}
.empty{color:var(--muted);padding:18px 0}

/* ---------- Dashboard-Karten ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:26px}
.card{background:var(--surface);border-radius:var(--radius);padding:20px 22px;
    box-shadow:var(--shadow);border:1px solid var(--line);border-left:4px solid var(--blue)}
.card-blue{border-left-color:var(--blue)}
.card-amber{border-left-color:var(--amber)}
.card-green{border-left-color:var(--green)}
.card-label{color:var(--muted);font-size:13px;text-transform:uppercase;letter-spacing:.03em}
.card-value{font-size:30px;font-weight:700;margin:6px 0 4px}
.card-foot{font-size:13px;color:var(--muted)}

/* ---------- Auswertung: Jahreskosten pro Gruppe ---------- */
.groupbars{display:flex;flex-direction:column;gap:14px}
.groupbar{display:grid;grid-template-columns:210px 1fr 130px;align-items:center;gap:14px}
.groupbar-label{display:flex;align-items:center;gap:8px;min-width:0}
.groupbar-label .gname{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.groupbar-track{height:14px;background:var(--surface-2);border-radius:999px;overflow:hidden}
.groupbar-fill{height:100%;border-radius:999px;min-width:3px;transition:width .3s}
.groupbar-value{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
@media (max-width:640px){
    .groupbar{grid-template-columns:1fr;gap:4px}
    .groupbar-value{text-align:left}
}

/* ---------- Tabellen (formatfüllend) ---------- */
.table{width:100%;border-collapse:collapse;font-size:14px}
.table th,.table td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line)}
.table thead th{color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.03em}
.table tbody tr:hover{background:var(--surface-2)}
.table tfoot td{border-top:2px solid var(--line);border-bottom:none;padding-top:12px}
.num{text-align:right}
.nowrap{white-space:nowrap}
.muted{color:var(--muted)}
.small{font-size:12px}

/* ---------- Chips / Badges ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;
    padding:2px 11px;font-size:12px;font-weight:600;color:#fff}
.chip.soft{background:var(--surface-2);color:var(--ink)}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex:0 0 9px}
.badge{display:inline-block;border-radius:999px;padding:2px 9px;font-size:12px;font-weight:600}
.badge-red{background:#fee2e2;color:#b91c1c}
.badge-amber{background:#fef3c7;color:#92400e}
.badge-grey{background:var(--surface-2);color:var(--muted)}
[data-theme="dark"] .badge-red{background:#3b1616;color:#fca5a5}
[data-theme="dark"] .badge-amber{background:#3a2f10;color:#fcd34d}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);
    background:var(--surface);color:var(--ink);padding:9px 15px;border-radius:10px;
    font-size:14px;cursor:pointer;font-weight:500;line-height:1.2}
.btn:hover{background:var(--surface-2);text-decoration:none}
.btn-sm{padding:6px 11px;font-size:13px}
.btn-primary{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}
.btn-primary:hover{background:var(--primary-dark)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn-ghost:hover{background:var(--surface-2)}
.btn-danger{color:var(--red);border-color:transparent;background:transparent}
.btn-danger:hover{background:rgba(239,68,68,.1)}
.btn-block{width:100%;justify-content:center}
.inline{display:inline}

/* ---------- Filter / Toolbar ---------- */
.toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:18px}
.filterbar{display:flex;gap:10px;flex-wrap:wrap;flex:1}
.filterbar input,.filterbar select,.form-grid input,.form-grid select,.form-grid textarea{
    padding:9px 11px;border:1px solid var(--line);border-radius:10px;font-size:14px;
    background:var(--surface);color:var(--ink);font-family:inherit}
.filterbar input[type=text]{min-width:220px;flex:1}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(79,70,229,.18)}

/* ---------- Piktogramme (Icons) ---------- */
.icon{display:inline-block;vertical-align:-2px;flex:0 0 auto}
.btn .icon{vertical-align:-3px}
.btn-icon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
    border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:9px;
    cursor:pointer;padding:0;transition:all .12s}
.btn-icon:hover{color:var(--primary);border-color:var(--primary);background:var(--surface-2);text-decoration:none}
.btn-icon-danger:hover{color:var(--red);border-color:#fecaca;background:rgba(239,68,68,.08)}
.actions{display:inline-flex;gap:8px;align-items:center;justify-content:flex-end}
.inline-edit{display:inline-flex;gap:6px;align-items:center}
.inline-edit input{padding:6px 9px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font-size:13px}

/* Farbwähler klar als anklickbar kennzeichnen */
input[type="color"]{cursor:pointer;transition:border-color .12s,box-shadow .12s}
input[type="color"]:hover{border-color:var(--primary) !important;box-shadow:0 0 0 3px rgba(79,70,229,.15)}
input[type="color"]::-webkit-color-swatch-wrapper{padding:2px}
input[type="color"]::-webkit-color-swatch{border:none;border-radius:5px}
input[type="color"]::-moz-color-swatch{border:none;border-radius:5px}
.actions .inline{display:inline-flex}
.doc-link{display:inline-flex;vertical-align:-2px;color:var(--muted)}
.doc-link:hover{color:var(--primary)}

/* ---------- Akkordeon „Klaviatur" (volle Listenbreite) ---------- */
.accordion{display:flex;flex-direction:column;gap:0;width:100%;
    border:1px solid var(--line);border-radius:14px;overflow:hidden;
    box-shadow:var(--shadow);background:var(--surface)}
.acc-item{border-bottom:1px solid var(--line);background:var(--surface)}
.acc-item:last-child{border-bottom:0}
.acc-head{display:flex;align-items:center;gap:12px;width:100%;padding:18px 20px;cursor:pointer;
    background:var(--surface-2);border:0;border-left:4px solid var(--acc-color,transparent);
    color:var(--ink);font-size:15px;font-weight:600;text-align:left}
.acc-head:hover{filter:brightness(.98)}
[data-theme="dark"] .acc-head:hover{filter:brightness(1.15)}
.acc-chevron{display:inline-flex;color:var(--muted);transition:transform .2s}
.acc-item.collapsed .acc-chevron{transform:rotate(-90deg)}
.acc-title{flex:0 0 auto}
.acc-meta{margin-left:auto;display:flex;align-items:center;gap:16px;font-weight:500}
.acc-meta .pill{background:var(--surface);border:1px solid var(--line);color:var(--muted);
    border-radius:999px;padding:1px 10px;font-size:12px;font-weight:600}
.acc-total{display:flex;flex-direction:column;align-items:flex-end;line-height:1.25;font-variant-numeric:tabular-nums}
.acc-total-year{font-weight:700}
.acc-total-month{font-weight:500}
.acc-body{padding:4px 20px 16px}
.acc-item.collapsed .acc-body{display:none}
/* Kachelansicht: etwas mehr Luft oben zwischen Gruppenkopf und Kacheln */
#viewRoot.view-cards .acc-body{padding-top:16px}
/* Tabelle im Akkordeon randlos über die volle Breite */
.acc-body .list-block .table{width:100%}
.acc-body .list-block .table th:first-child,
.acc-body .list-block .table td:first-child{padding-left:0}
.acc-body .list-block .table th:last-child,
.acc-body .list-block .table td:last-child{padding-right:0}

/* ---------- View-Switch (Liste/Kachel) ---------- */
.view-switch{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface)}
.view-switch button{border:0;background:transparent;color:var(--muted);padding:8px 12px;cursor:pointer;font-size:14px;display:flex;align-items:center;gap:6px}
.view-switch button.active{background:var(--primary);color:var(--primary-ink)}

/* ---------- Ansicht Liste vs. Kacheln ---------- */
#viewRoot.view-list .cards-block{display:none}
#viewRoot.view-cards .list-block{display:none}

.group-section{margin-bottom:22px}
.group-section-head{display:flex;align-items:center;gap:10px;margin:6px 2px 12px;font-weight:700;font-size:15px}
.group-section-head .count{color:var(--muted);font-weight:500;font-size:13px}

/* Kachel-Grid */
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
    box-shadow:var(--shadow);padding:16px 18px;border-top:3px solid var(--blue);display:flex;flex-direction:column;gap:8px}
.tile h3{margin:0;font-size:16px;display:flex;align-items:center;gap:8px}
.tile-dot{width:11px;height:11px;flex:0 0 11px}
.tile .tile-partner{color:var(--muted);font-size:13px}
.tile-contact{display:flex;gap:8px;margin-top:-2px}
.tile-contact a{display:inline-flex;color:var(--muted);border:1px solid var(--line);border-radius:7px;padding:4px}
.tile-contact a:hover{color:var(--primary);border-color:var(--primary)}
.tile .tile-row{display:flex;justify-content:space-between;font-size:13px}
.tile .tile-row .k{color:var(--muted)}
.tile .tile-foot{display:flex;justify-content:space-between;align-items:center;margin-top:6px;padding-top:10px;border-top:1px solid var(--line)}
.tile .tile-amount{font-weight:700}

/* ---------- Formulare ---------- */
.form-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.form-grid label,.filelabel{display:flex;flex-direction:column;font-size:13px;font-weight:600;color:var(--ink);gap:6px}
.form-grid textarea{min-height:90px;resize:vertical}
.col-3{grid-column:span 3}.col-4{grid-column:span 4}.col-6{grid-column:span 6}.col-12{grid-column:span 12}
.hint{font-weight:400;color:var(--muted);font-size:12px}
.form-actions{display:flex;gap:12px;margin-top:6px}
.filelabel input[type=file]{padding:8px;border:1px dashed var(--line);border-radius:10px;background:var(--surface-2);font-weight:400}
.current-file{margin-top:10px;font-size:13px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:4px}
.current-file .cf-desc{font-weight:600}
.current-file .remove-file{display:inline-flex;align-items:center;gap:5px;font-weight:400;color:var(--muted);margin-top:4px}
.current-file .remove-file input{width:auto}
/* Vertragsdokumente */
.docs-section{border:1px solid var(--line);border-radius:12px;padding:16px 18px;background:var(--surface-2)}
.docs-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.docs-head h3{margin:0;font-size:15px}
.doc-list{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.doc-item{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.doc-item .doc-ico{color:var(--muted);display:inline-flex;flex:0 0 auto}
.doc-item .doc-meta{flex:1;min-width:0;font-size:13px;display:flex;flex-direction:column;gap:2px}
.doc-item .doc-meta a,.doc-item .doc-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.doc-item .doc-desc{color:var(--ink)}
.doc-item-new{border-style:dashed}
.doc-empty{color:var(--muted);font-size:13px;padding:6px 2px}
.docs-actions{display:flex;gap:10px;flex-wrap:wrap}

/* Modal-Overlays (Beschreibung / Webcam) */
.cs-overlay{position:fixed;inset:0;background:rgba(15,23,42,.55);display:flex;align-items:center;justify-content:center;z-index:60;padding:16px}
.cs-overlay[hidden]{display:none}
.cs-modal{background:var(--surface);color:var(--ink);border-radius:14px;box-shadow:var(--shadow-lg);width:100%;max-width:460px;padding:20px 22px}
.cs-modal h3{margin:0 0 14px;font-size:17px}
.cs-modal video{width:100%;border-radius:10px;background:#000;display:block}
.cs-modal .desc-preview{margin-bottom:12px}
.cs-modal .desc-preview img{width:100%;max-height:230px;object-fit:contain;border-radius:10px;background:#000;transition:transform .18s ease}
.cs-modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}
.cs-modal-err{color:var(--red);margin-top:10px}

/* Bild drehen (Beschreibungs-Dialog / Webcam) */
.rotate-bar{display:flex;align-items:center;justify-content:center;gap:8px;margin:-4px 0 12px}
.rotate-bar .hint{margin-right:2px}
.btn-rotate{display:inline-flex;align-items:center;justify-content:center;gap:6px;
    background:var(--surface-2,#f1f5f9);color:var(--ink);border:1px solid var(--line);
    border-radius:8px;padding:7px 12px;font-size:13px;cursor:pointer;line-height:1}
.btn-rotate:hover{background:var(--line)}
.btn-rotate svg{display:block}

/* ---------- Alerts ---------- */
.alert{border-radius:10px;padding:12px 16px;margin-bottom:18px;font-size:14px}
.alert ul{margin:6px 0 0;padding-left:20px}
.alert-error{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca}
.alert-success{background:#f0fdf4;color:#166534;border:1px solid #bbf7d0}
[data-theme="dark"] .alert-error{background:#3b1616;color:#fca5a5;border-color:#5b2020}
[data-theme="dark"] .alert-success{background:#0f2f1e;color:#86efac;border-color:#1c4d33}

/* ---------- Gruppenverwaltung ---------- */
.group-list{display:flex;flex-direction:column;gap:0}
.group-row{display:flex;align-items:center;gap:14px;padding:12px 6px;border-bottom:1px solid var(--line);background:var(--surface)}
.group-row:last-child{border-bottom:0}
.group-row.dragging{opacity:.5;background:var(--surface-2);border-radius:8px}
.drag-handle{cursor:grab;color:var(--muted);font-size:16px;line-height:1;user-select:none;padding:0 2px;flex:0 0 auto}
.drag-handle:active{cursor:grabbing}
.sort-status{font-size:13px;color:var(--green);opacity:0;transition:opacity .2s}
.sort-status.show{opacity:1}
.group-row .swatch{width:26px;height:26px;border-radius:8px;flex:0 0 26px;border:1px solid rgba(0,0,0,.1)}
.group-row .gname{font-weight:600;flex:1}
.group-row form{display:flex;align-items:center;gap:8px;margin:0}
.group-row input[type=text]{padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink)}
.group-row input[type=color]{width:38px;height:34px;padding:2px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}

/* ---------- Login ---------- */
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;
    background:linear-gradient(135deg,#eef2ff,#eef1f6)}
[data-theme="dark"] .login-body{background:linear-gradient(135deg,#0b1220,#131c30)}
.login-card{background:var(--surface);padding:36px 34px;border-radius:16px;box-shadow:var(--shadow-lg);width:340px}
.login-logo{font-size:22px;font-weight:700;text-align:center;color:var(--ink);display:flex;align-items:center;justify-content:center;gap:9px}
.applogo{vertical-align:middle;flex:0 0 auto}
.brand-sm{display:inline-flex;align-items:center;gap:8px}
/* Zweifarbiger Markenschriftzug: "Contract" dunkel, "Helper" blau */
.brand-name{font-weight:700}
.brand-a{color:var(--ink)}
.brand-b{color:var(--primary)}
.login-sub{text-align:center;color:var(--muted);margin:4px 0 22px}
.login-card label{display:flex;flex-direction:column;font-size:13px;font-weight:600;color:var(--ink);gap:6px;margin-bottom:16px}
.login-card input{padding:10px 12px;border:1px solid var(--line);border-radius:10px;font-size:15px;background:var(--surface);color:var(--ink)}
.login-links{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;margin-top:16px;font-size:13px}
.login-links a{color:var(--muted)}
.login-links a:hover{color:var(--primary)}

/* ---------- Export ---------- */
.export-intro{margin:0 0 6px;line-height:1.55}
.export-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}
.export-card{border:1px solid var(--line);border-radius:12px;padding:20px;background:var(--surface);
    display:flex;flex-direction:column;gap:10px;text-align:left}
.export-card h3{margin:0;font-size:16px}
.export-card p{margin:0;flex:1}
.export-card .btn{align-self:flex-start;margin-top:4px}
.export-ico{color:var(--primary)}
.export-card code{background:var(--surface-2,#f1f5f9);padding:1px 5px;border-radius:5px;font-size:12px}
@media (max-width:700px){.export-grid{grid-template-columns:1fr}}

/* ============================================================
   Responsiv
   ============================================================ */
@media (max-width:900px){
    .mobilebar{
        display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:30;
        background:var(--surface);border-bottom:1px solid var(--line);padding:10px 14px;
    }
    .mobilebar .brand-sm{font-weight:700;flex:1}
    .hamburger,.mobilebar .theme-btn{width:auto;background:transparent;border:0;font-size:20px;cursor:pointer;color:var(--ink);padding:4px 8px}
    .layout{flex-direction:column}
    .sidebar{
        position:fixed;left:0;top:0;height:100vh;transform:translateX(-100%);
        transition:transform .22s ease;box-shadow:var(--shadow-lg);
    }
    .sidebar.open{transform:translateX(0)}
    .sidebar-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:35;display:none}
    .sidebar-overlay.show{display:block}
    .content{padding:18px 16px}
    .cards{grid-template-columns:1fr}
    .col-3,.col-4,.col-6{grid-column:span 12}
}
@media (min-width:901px){
    .mobilebar{display:none}
}
@media (max-width:560px){
    .table thead{display:none}
    .content{padding:14px 12px}
}