/* =========================================================================
   Интерфейс 71 — Dashboard CSS v0.3
   Brand Color: #0097C4
   ========================================================================= */
:root {
    --bg: #0a0d18;
    --panel-bg: rgba(14, 20, 38, 0.55);
    --panel-border: rgba(0, 151, 196, 0.14);
    --card-bg: rgba(10, 16, 30, 0.8);
    --text: #f0f4f8;
    --muted: #6b8699;
    --brand: #0097C4;
    --brand-h: #007ba3;
    --brand-glow: rgba(0,151,196,0.3);
    --brand-sub: rgba(0,151,196,0.1);
    --prio-low:#10b981; --prio-low-bg:rgba(16,185,129,.13);
    --prio-med:#eab308; --prio-med-bg:rgba(234,179,8,.13);
    --prio-high:#f97316; --prio-high-bg:rgba(249,115,22,.13);
    --prio-urg:#ef4444; --prio-urg-bg:rgba(239,68,68,.13);
    --col-zayavka:#3b82f6; --col-zamer:#a855f7;
    --col-montazh:#f59e0b; --col-done:#22c55e; --col-cancelled:#6b7280;
    --sb-w:260px; --sb-c:74px;
    --tr:0.28s cubic-bezier(.25,.8,.25,1);
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);display:flex;min-height:100vh;overflow-x:hidden}

/* Orbs */
.orb{position:fixed;border-radius:50%;filter:blur(90px);z-index:-1;opacity:.4;pointer-events:none;animation:drift 22s infinite alternate ease-in-out}
.orb-1{width:520px;height:520px;background:rgba(0,151,196,.22);top:-120px;left:-160px}
.orb-2{width:560px;height:560px;background:rgba(0,70,130,.18);bottom:-180px;right:5%;animation-delay:-8s}
.orb-3{width:360px;height:360px;background:rgba(0,200,230,.1);top:38%;right:-80px;animation-delay:-14s}
@keyframes drift{0%{transform:translate(0,0) scale(1)}100%{transform:translate(40px,55px) scale(1.08)}}

/* Glass */
.glass{background:var(--panel-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--panel-border)}

/* ── SIDEBAR ──────────────────── */
.sidebar{
    width:var(--sb-w);background:var(--card-bg);border-right:1px solid var(--panel-border);
    display:flex;flex-direction:column;padding:26px 16px;
    position:fixed;top:0;left:0;bottom:0;z-index:200;
    transition:width .38s cubic-bezier(.4,0,.2,1),padding .38s;
    /* REPLACED OVERFLOW HIDDEN WITH VISIBLE SO BUTTON CAN SHOW */
    overflow:visible;
}
.sidebar.collapsed{width:var(--sb-c);padding:26px 8px}
.sidebar.collapsed .hide-on-collapse{opacity:0;pointer-events:none;width:0;overflow:hidden}
.sidebar.collapsed .logo{justify-content:center;margin-bottom:38px;}
.sidebar.collapsed .nav-links a{justify-content:center;padding:12px}
.sidebar.collapsed .nav-links i{margin-right:0!important;font-size:1.3rem}
.sidebar.collapsed .user-profile{justify-content:center;padding:10px}
.sidebar.collapsed .toggle-btn i{transform:rotate(180deg)}

.toggle-btn{position:absolute;right:-12px;top:36px;width:24px;height:24px;
    background:var(--brand);border-radius:50%;border:none;color:#fff;
    display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:210;
    box-shadow:0 3px 10px var(--brand-glow);transition:var(--tr)}
.toggle-btn:hover{transform:scale(1.15);background:var(--brand-h)}
.toggle-btn i{transition:transform .3s;font-size:.85rem}

.logo{display:flex;align-items:center;gap:11px;margin-bottom:40px;white-space:nowrap;overflow:hidden;}
.logo-icon{flex-shrink: 0;}
.logo-txt{font-family:'Outfit',sans-serif;font-size:1.05rem;font-weight:700;color:var(--brand);line-height:1.1}
.logo-txt small{display:block;font-size:.65rem;font-weight:400;color:var(--muted)}

.nav-links{list-style:none;flex:1}
.nav-links li{margin-bottom:4px}
.nav-links a{display:flex;align-items:center;padding:11px 14px;border-radius:11px;
    color:var(--muted);text-decoration:none;transition:all .22s;white-space:nowrap;}
.nav-links i{font-size:1.2rem;margin-right:11px;flex-shrink:0;transition:color .2s}
.nav-links span{font-size:.9rem;font-weight:500;transition:opacity .25s;overflow:hidden;}
.nav-links a:hover{background:rgba(0,151,196,.07);color:#fff;transform:translateX(3px)}
.nav-links li.active a{background:linear-gradient(90deg,rgba(0,151,196,.22),rgba(0,151,196,0));color:#fff;border-left:3px solid var(--brand);padding-left:11px}
.nav-links li.active i{color:var(--brand)}

.user-profile{margin-top:auto;display:flex;align-items:center;gap:11px;padding:13px;
    background:rgba(0,151,196,.05);border-radius:13px;border:1px solid var(--panel-border);overflow:hidden;white-space:nowrap}
.user-avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--brand),#005f80);
    color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;
    flex-shrink:0;border:2px solid var(--brand)}
.user-profile .info{display:flex;flex-direction:column}
.user-profile .u-name{font-size:.87rem;font-weight:600}
.user-profile .u-role{font-size:.72rem;color:var(--muted);margin-top:1px}

/* Data actions buttons in sidebar */
.data-actions{display:flex;flex-direction:column;gap:6px;margin:10px 0;padding:0 4px}
.btn-data{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:9px;
    background:rgba(255,255,255,.04);border:1px solid var(--panel-border);color:var(--muted);
    font-family:inherit;font-size:.8rem;font-weight:500;cursor:pointer;transition:all .2s;white-space:nowrap}
.btn-data:hover{background:rgba(0,151,196,.1);border-color:rgba(0,151,196,.3);color:var(--text)}
.btn-data i{font-size:1.1rem;color:var(--brand)}
.sidebar.collapsed .btn-data{justify-content:center;padding:10px}
.sidebar.collapsed .btn-data i{margin:0}
.sidebar.collapsed .data-actions{padding:0}

/* Tooltip for collapsed sidebar nav items */
.sidebar.collapsed .nav-links a{position:relative}
.sidebar.collapsed .nav-links a:hover span{opacity:1!important;width:auto!important;overflow:visible!important;position:absolute;left:calc(100% + 14px);background:#1a2540;border:1px solid var(--panel-border);color:var(--text);padding:5px 12px;border-radius:7px;font-size:.82rem;white-space:nowrap;pointer-events:none;z-index:300;box-shadow:0 4px 14px rgba(0,0,0,.4)}

/* ── MAIN CONTENT ──────────────────── */
.main-content{flex:1;display:flex;flex-direction:column;padding:34px 38px;
    margin-left:var(--sb-w);transition:margin-left .38s cubic-bezier(.4,0,.2,1);min-height:100vh;
    min-width: 0; /* FIX HORIZONTAL SCROLL OVERFLOW */
}
.main-content.sb-collapsed{margin-left:var(--sb-c)}

.mobile-hdr{display:none;padding:10px 16px;height:56px;background:var(--card-bg);
    border-bottom:1px solid var(--panel-border);align-items:center;justify-content:space-between;
    position:sticky;top:0;z-index:199}
.btn-icon{background:transparent;border:none;color:var(--text);font-size:1.4rem;cursor:pointer;
    display:flex;align-items:center;justify-content:center;padding:4px;border-radius:8px;transition:background .2s}
.btn-icon:hover{background:rgba(255,255,255,.07)}
.sb-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);z-index:190}

/* ── VIEW SECTIONS ──────────────────── */
.view-sec{display:flex;flex-direction:column;animation:fadeIn .22s ease;flex:1;min-width:0;min-height:0}
.view-sec:not(#view-kanban){overflow-y:auto;max-height:calc(100vh - 110px);scrollbar-width:thin;scrollbar-color:var(--panel-border) transparent;padding-bottom:90px}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ── PAGE HEADER ──────────────────── */
.page-hdr{display:flex;justify-content:space-between;align-items:flex-start;
    margin-bottom:28px;gap:14px;flex-wrap:wrap}
.page-title{font-family:'Outfit',sans-serif;font-size:1.85rem;font-weight:700;line-height:1.2;margin-bottom:3px}
.page-sub{color:var(--muted);font-size:.88rem}
.page-actions{display:flex;gap:9px;align-items:center;flex-wrap:nowrap}

/* ── BUTTONS ──────────────────── */
.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:10px;border:none;
    font-family:inherit;font-weight:600;cursor:pointer;transition:var(--tr);font-size:.87rem;white-space:nowrap}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 4px 14px var(--brand-glow)}
.btn-primary:hover{background:var(--brand-h);transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,151,196,.45)}
.btn-outline{background:transparent;border:1px solid rgba(255,255,255,.16);color:var(--text)}
.btn-outline:hover{background:rgba(255,255,255,.06)}
.btn-sm{padding:6px 13px;font-size:.78rem;border-radius:8px}
.btn-ghost{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);color:var(--muted)}
.btn-ghost:hover{background:rgba(255,255,255,.1);color:var(--text)}

.hidden{display:none!important}

/* ── KANBAN ──────────────────── */
.kanban-wrap{height:calc(100vh - 190px);display:flex;flex-direction:column;min-width:0}
.kanban-board{display:flex;gap:16px;flex:1;overflow-x:auto;overflow-y:hidden;padding-bottom:14px;
    scrollbar-width:thin;scrollbar-color:var(--panel-border) transparent}

.kanban-col{display:flex;flex-direction:column;min-width:272px;max-width:272px;
    background:rgba(12,18,34,.6);border:1px solid var(--panel-border);border-radius:15px;overflow:hidden;transition:border-color .2s}
.kanban-col.drag-over{border-color:var(--brand);background:rgba(0,151,196,.04)}

.col-hdr{padding:16px 16px 12px;border-bottom:1px solid var(--panel-border)}
.col-title{display:flex;align-items:center;gap:9px;font-family:'Outfit',sans-serif;font-weight:600;font-size:.97rem}
.col-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.col-zayavka .col-dot{background:var(--col-zayavka)}
.col-zamer .col-dot{background:var(--col-zamer)}
.col-montazh .col-dot{background:var(--col-montazh)}
.col-done .col-dot{background:var(--col-done)}
.col-cancelled .col-dot{background:var(--col-cancelled)}
.col-cnt{margin-left:auto;background:rgba(255,255,255,.08);padding:2px 8px;border-radius:20px;font-size:.72rem}

.col-body{flex:1;padding:12px;overflow-y:auto;display:flex;flex-direction:column;gap:9px;min-height:80px;
    scrollbar-width:thin;scrollbar-color:var(--panel-border) transparent}

/* Order Card */
.o-card{background:var(--card-bg);border:1px solid var(--panel-border);border-radius:12px;padding:14px;
    cursor:grab;transition:transform .18s,box-shadow .18s,border-color .18s;position:relative;overflow:hidden;flex-shrink:0}
.o-card:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.38);border-color:rgba(0,151,196,.3)}
.o-card:active{cursor:grabbing}
.o-accent{position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:12px 0 0 12px}
.priority-low .o-accent{background:var(--prio-low)}
.priority-medium .o-accent{background:var(--prio-med)}
.priority-high .o-accent{background:var(--prio-high)}
.priority-urgent .o-accent{background:var(--prio-urg)}

.o-top{display:flex;align-items:center;gap:7px;margin-bottom:9px;justify-content:space-between}
.o-id{font-size:.7rem;color:var(--muted);font-family:monospace}
.prio-pill{font-size:.66rem;font-weight:600;padding:3px 8px;border-radius:5px;text-transform:uppercase;letter-spacing:.3px;margin-right:auto}
.priority-low .prio-pill{color:var(--prio-low);background:var(--prio-low-bg)}
.priority-medium .prio-pill{color:var(--prio-med);background:var(--prio-med-bg)}
.priority-high .prio-pill{color:var(--prio-high);background:var(--prio-high-bg)}
.priority-urgent .prio-pill{color:var(--prio-urg);background:var(--prio-urg-bg)}

.o-edit-btn{background:none;border:none;color:var(--muted);cursor:pointer;padding:5px;
    border-radius:7px;font-size:1.1rem;display:flex;align-items:center;transition:color .2s,background .2s;
    min-width:32px;min-height:32px;justify-content:center}
.o-edit-btn:hover{color:var(--brand);background:var(--brand-sub)}

.o-title{font-size:.92rem;font-weight:600;line-height:1.4;margin-bottom:8px;
    display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word;}
.o-meta{display:flex;flex-direction:column;gap:4px;margin-bottom:11px}
.o-meta-row{display:flex;align-items:center;gap:6px;font-size:.76rem;color:var(--muted)}
.o-meta-row i{font-size:.88rem;color:var(--brand);flex-shrink:0}

.o-footer{display:flex;align-items:center;justify-content:space-between;gap:6px;
    padding-top:9px;border-top:1px solid rgba(255,255,255,.05)}
.deadline-tag{display:flex;align-items:center;gap:4px;font-size:.72rem;
    color:var(--muted);background:rgba(255,255,255,.05);padding:3px 8px;border-radius:5px}
.deadline-tag.overdue{color:var(--prio-urg);background:var(--prio-urg-bg)}
.deadline-tag.soon{color:var(--prio-med);background:var(--prio-med-bg)}
.status-col-badge{font-size:.68rem;color:var(--muted);background:rgba(255,255,255,.05);
    padding:2px 7px;border-radius:4px;white-space:nowrap}

.sortable-ghost{opacity:.3;transform:scale(.96)}
.sortable-drag{cursor:grabbing!important;box-shadow:0 18px 40px rgba(0,0,0,.5);border:1px solid var(--brand)!important}

/* ── TABLE ──────────────────── */
.search-wrap{position:relative;flex: 1;max-width:360px}
.search-wrap i{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:1rem}
.search-wrap input{width:100%;padding:9px 13px 9px 38px;background:var(--card-bg);
    border:1px solid var(--panel-border);border-radius:9px;color:var(--text);font-family:inherit;
    font-size:.87rem;outline:none;transition:border-color .2s}
.search-wrap input:focus{border-color:var(--brand)}
.search-wrap input::placeholder{color:var(--muted)}

.tbl-wrap{background:var(--card-bg);border:1px solid var(--panel-border);border-radius:15px;overflow:hidden;margin-top:18px}
.data-tbl{width:100%;border-collapse:collapse;font-size:.86rem}
.data-tbl th{padding:13px 17px;text-align:left;color:var(--muted);font-weight:500;font-size:.75rem;
    text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--panel-border);background:rgba(0,0,0,.14)}
.data-tbl td{padding:13px 17px;border-bottom:1px solid rgba(255,255,255,.04);vertical-align:middle}
.data-tbl tr:last-child td{border-bottom:none}
.data-tbl tr:hover td{background:rgba(0,151,196,.04)}
.data-tbl .no-data{text-align:center;color:var(--muted);padding:40px;font-size:.9rem}
.cell-name{font-weight:600}
.phone-a{color:var(--brand);text-decoration:none}.phone-a:hover{text-decoration:underline}
.o-tags{display:flex;flex-wrap:wrap;gap:4px}
.o-tag{font-size:.7rem;padding:3px 8px;border-radius:5px;background:var(--brand-sub);
    color:var(--brand);border:1px solid rgba(0,151,196,.2);white-space:nowrap}
.cell-comment{color:var(--muted);font-size:.8rem;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* VPN status pills */
.status-pill{display:inline-flex;align-items:center;gap:5px;font-size:.74rem;font-weight:600;padding:4px 10px;border-radius:20px}
.s-active{background:rgba(34,197,94,.14);color:#4ade80}
.s-expired{background:rgba(239,68,68,.14);color:#f87171}
.s-frozen{background:rgba(107,114,128,.2);color:#9ca3af}
.s-dot{width:6px;height:6px;border-radius:50%;background:currentColor}

.filter-tabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:18px}
.f-tab{padding:7px 15px;border-radius:8px;border:1px solid var(--panel-border);background:transparent;
    color:var(--muted);font-family:inherit;font-size:.83rem;font-weight:500;cursor:pointer;transition:all .2s}
.f-tab:hover{background:rgba(255,255,255,.05);color:var(--text)}
.f-tab.active{background:var(--brand);border-color:var(--brand);color:#fff}

/* ── OBJECTS ──────────────────── */
.obj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px;margin-top:20px}
.obj-card{background:var(--card-bg);border:1px solid var(--panel-border);border-radius:15px;padding:20px;
    transition:transform .2s,border-color .2s,box-shadow .2s;position:relative;cursor:pointer}
.obj-card:hover{transform:translateY(-3px);border-color:rgba(0,151,196,.35);box-shadow:0 10px 30px rgba(0,0,0,.32)}

.obj-gear-btn{position:absolute;top:14px;right:14px;background:rgba(255,255,255,.06);border:1px solid var(--panel-border);
    color:var(--muted);width:32px;height:32px;border-radius:8px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;font-size:1rem;transition:all .2s;z-index:2}
.obj-gear-btn:hover{color:var(--brand);background:var(--brand-sub);border-color:var(--brand)}
.obj-card-hdr{display:flex;align-items:flex-start;gap:13px;margin-bottom:14px;padding-right:44px}
.obj-icon{width:44px;height:44px;border-radius:11px;background:var(--brand-sub);
    border:1px solid rgba(0,151,196,.22);display:flex;align-items:center;justify-content:center;font-size:1.3rem;color:var(--brand);flex-shrink:0}
.obj-addr{font-weight:600;font-size:.95rem;line-height:1.35;margin-bottom:3px}
.obj-type-badge{font-size:.7rem;padding:2px 8px;border-radius:4px;background:rgba(255,255,255,.07);color:var(--muted);display:inline-block}

.obj-info-compact{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.obj-row{display:flex;align-items:flex-start;gap:7px;font-size:.8rem}
.obj-row i{color:var(--brand);font-size:.95rem;flex-shrink:0;margin-top:1px}
.obj-lbl{color:var(--muted);min-width:76px}
.eq-row{flex-wrap:wrap}
.eq-tags{display:flex;flex-wrap:wrap;gap:4px}
.eq-tag{font-size:.7rem;padding:2px 8px;background:rgba(0,151,196,.09);border:1px solid rgba(0,151,196,.18);color:var(--brand);border-radius:4px}

.obj-footer{display:flex;align-items:center;justify-content:space-between;
    padding-top:12px;border-top:1px solid rgba(255,255,255,.05)}
.cam-badge{display:flex;align-items:center;gap:5px;font-size:.77rem;font-weight:600}
.cam-cloud{color:#60a5fa}.cam-local{color:#c084fc}
.doc-count-badge{display:flex;align-items:center;gap:5px;font-size:.73rem;color:var(--muted);
    background:rgba(255,255,255,.04);border:1px solid var(--panel-border);padding:3px 9px;border-radius:6px}

/* Object Detail Modal */
.modal-box-wide{max-width:580px}
.detail-hero{display:flex;align-items:flex-start;gap:14px;margin-bottom:20px;padding-bottom:18px;border-bottom:1px solid var(--panel-border)}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:8px}
.detail-section{background:rgba(255,255,255,.03);border:1px solid var(--panel-border);border-radius:11px;padding:14px}
.detail-section-title{display:flex;align-items:center;gap:7px;font-size:.76rem;font-weight:600;
    color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:9px}
.detail-section-title i{color:var(--brand)}
.detail-val{font-size:.92rem;font-weight:600;margin-bottom:4px}
.doc-item{display:flex;align-items:center;gap:7px;font-size:.83rem;padding:4px 0;color:var(--text);word-break:break-all;}

/* ── STATS ──────────────────── */
.stat-widgets{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px;margin-bottom:24px}
.sw{background:var(--card-bg);border:1px solid var(--panel-border);border-radius:14px;padding:20px;
    transition:transform .2s,border-color .2s}
.sw:hover{transform:translateY(-2px);border-color:rgba(0,151,196,.3)}
.sw-icon{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:13px}
.ic-brand{background:rgba(0,151,196,.14);color:var(--brand)}
.ic-green{background:rgba(34,197,94,.14);color:#4ade80}
.ic-orange{background:rgba(249,115,22,.14);color:#fb923c}
.ic-red{background:rgba(239,68,68,.14);color:#f87171}
.ic-purple{background:rgba(168,85,247,.14);color:#c084fc}
.sw-val{font-family:'Outfit',sans-serif;font-size:2rem;font-weight:700;line-height:1;margin-bottom:4px}
.sw-lbl{font-size:.8rem;color:var(--muted)}
.sw-sub{font-size:.74rem;color:var(--brand);margin-top:4px}

.stats-bottom{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.s-card{background:var(--card-bg);border:1px solid var(--panel-border);border-radius:15px;padding:22px}
.s-card-title{font-family:'Outfit',sans-serif;font-size:1rem;font-weight:600;margin-bottom:18px;display:flex;align-items:center;gap:9px}
.s-card-title i{color:var(--brand)}

.bar-chart{display:flex;align-items:flex-end;gap:8px;height:130px}
.bar-g{display:flex;flex-direction:column;align-items:center;gap:5px;flex:1}
.bar{width:100%;background:linear-gradient(180deg,var(--brand),rgba(0,151,196,.25));border-radius:5px 5px 0 0;
    min-height:4px;transition:height .9s cubic-bezier(.34,1.56,.64,1);cursor:pointer}
.bar:hover{background:linear-gradient(180deg,#00c0ee,rgba(0,151,196,.4))}
.bar-lbl{font-size:.67rem;color:var(--muted)}
.bar-v{font-size:.7rem;font-weight:600;color:var(--brand)}

.mini-list{display:flex;flex-direction:column;gap:9px}
.m-item{display:flex;align-items:center;gap:11px;padding:9px 13px;
    background:rgba(0,0,0,.14);border-radius:9px;border:1px solid rgba(255,255,255,.04)}
.m-num{font-size:.72rem;color:var(--muted);width:18px;text-align:center;font-family:monospace}
.m-info{flex:1}
.m-name{font-size:.86rem;font-weight:500;margin-bottom:1px}
.m-sub{font-size:.73rem;color:var(--muted)}
.m-val{font-weight:600;font-size:.86rem;color:var(--brand)}

/* ── MODALS ──────────────────── */
.modal-ov{position:fixed;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(8px);
    z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;
    opacity:0;visibility:hidden;transition:opacity .24s,visibility .24s}
.modal-ov.open{opacity:1;visibility:visible}
.modal-box{background:#0c1220;border:1px solid var(--panel-border);border-radius:18px;padding:28px;
    width:100%;max-width:500px;
    max-height:calc(100vh - 40px);overflow-y:auto;
    transform:scale(.95);transition:transform .24s;scrollbar-width:thin}
.modal-ov.open .modal-box{transform:scale(1)}
.modal-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.modal-hdr h3{font-family:'Outfit',sans-serif;font-size:1.2rem;font-weight:700}
.modal-close{background:rgba(255,255,255,.07);border:none;color:var(--muted);width:30px;height:30px;
    border-radius:7px;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;transition:all .2s}
.modal-close:hover{background:rgba(239,68,68,.15);color:#f87171}
.f-group{margin-bottom:16px}
.f-group label{display:block;font-size:.78rem;font-weight:500;color:var(--muted);
    margin-bottom:6px;text-transform:uppercase;letter-spacing:.4px}
.f-group input,.f-group textarea,.f-group select{width:100%;padding:10px 13px;
    background:rgba(255,255,255,.05);border:1px solid var(--panel-border);border-radius:9px;
    color:var(--text);font-family:inherit;font-size:.88rem;outline:none;transition:border-color .2s,background .2s;
    -webkit-appearance:none;appearance:none}
.f-group select option{background:#0c1220}
.f-group input:focus,.f-group textarea:focus,.f-group select:focus{border-color:var(--brand);background:rgba(0,151,196,.06)}
.f-group textarea{resize:vertical;min-height:76px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.modal-ftr{display:flex;justify-content:flex-end;gap:9px;margin-top:22px;
    padding-top:18px;border-top:1px solid var(--panel-border)}

/* ── MOBILE COLUMN TABS ──────────────────── */
.mob-col-tabs{display:none;gap:6px;overflow-x:auto;padding:0 0 10px;margin-bottom:8px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
.mob-col-tabs::-webkit-scrollbar{display:none}
.mob-col-tab{display:flex;align-items:center;gap:5px;padding:7px 14px;border-radius:20px;
    border:1px solid var(--panel-border);background:var(--card-bg);color:var(--muted);
    font-family:inherit;font-size:.8rem;font-weight:500;cursor:pointer;white-space:nowrap;
    transition:all .2s;min-height:36px}
.mob-col-tab.active{background:var(--brand);border-color:var(--brand);color:#fff}
.col-tab-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}

/* ── MOBILE BOTTOM NAV ──────────────────── */
.mob-nav{display:none;position:fixed;bottom:0;left:0;right:0;z-index:400;
    background:rgba(8,12,24,.95);backdrop-filter:blur(16px);border-top:1px solid var(--panel-border);
    padding:6px 4px env(safe-area-inset-bottom,6px);
    justify-content:space-around;align-items:flex-end}
.mob-nav-btn{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 12px;
    background:none;border:none;color:var(--muted);font-family:inherit;font-size:.62rem;font-weight:500;cursor:pointer;
    border-radius:12px;transition:color .2s,background .2s;min-width:52px;min-height:48px;justify-content:center}
.mob-nav-btn i{font-size:1.35rem;display:block;transition:color .2s}
.mob-nav-btn.active{color:var(--brand)}
.mob-nav-btn.active i{color:var(--brand)}
.mob-nav-btn:hover{background:rgba(0,151,196,.08)}

/* ── RESPONSIVE MOBILE ──────────────────── */
@media(max-width:1024px){
    .sidebar{width:var(--sb-c);padding:26px 8px}
    .sidebar .hide-on-collapse{opacity:0;pointer-events:none;width:0;overflow:hidden}
    .sidebar .logo{justify-content:center}
    .sidebar .nav-links a{justify-content:center;padding:12px}
    .sidebar .nav-links i{margin-right:0!important;font-size:1.3rem}
    .sidebar .user-profile{justify-content:center;padding:10px}
    .sidebar .toggle-btn{display:none}
    .main-content{margin-left:var(--sb-c)}
    .stats-bottom{grid-template-columns:1fr}
}
@media(max-width:768px){
    body{flex-direction:column; overflow-x: hidden}
    
    /* show mobile elements */
    .mob-col-tabs{display:flex}
    .mob-nav{display:flex}
    
    /* more room for content above bottom nav */
    .view-sec:not(#view-kanban){max-height:calc(100vh - 180px);padding-bottom:0}
    
    /* kanban board - normal horizontal scrolling with padding end */
    .kanban-wrap{height:calc(100vh - 230px)}
    .kanban-board{gap:10px;padding:0 15px 10px}
    /* Set specific width instead of 100vw, so multiple cols can sit correctly */
    .kanban-col{min-width:280px;max-width:280px}
    .col-body{max-height:calc(100vh - 320px)}
    
    /* bigger touch targets on cards */
    .o-card{padding:16px}
    .o-edit-btn{min-width:40px;min-height:40px;font-size:1.2rem}
    .obj-gear-btn{min-width:40px;min-height:40px;font-size:1.1rem;top:10px;right:10px}
    .o-title{font-size:.98rem}
    .o-meta-row{font-size:.82rem;padding:2px 0}
    .deadline-tag{font-size:.78rem;padding:5px 10px}
    
    /* hide desktop sidebar */
    .sidebar{display:none}
    
    /* header adjustments */
    .mobile-hdr{display:none!important}
    /* HIDE THE BURGER MENU - we use bottom tabs instead */
    #mobToggle{display:none}
    
    .main-content{margin-left:0;padding:12px 12px 0;min-height:auto}
    .main-content.sb-collapsed{margin-left:0}
    
    /* page header - stack on mobile */
    .page-hdr{margin-bottom:14px;gap:10px}
    .page-title{font-size:1.4rem}
    .page-actions{width:100%}
    .search-wrap{flex:1;max-width:none}
    .btn-label{display:none}
    .btn{padding:10px 12px}
    
    /* objects grid - 1 column */
    .obj-grid{grid-template-columns:1fr;margin-top:12px}
    
    /* stats */
    .stat-widgets{grid-template-columns:repeat(2,1fr);gap:10px}
    .stats-bottom{grid-template-columns:1fr;gap:12px}
    .sw-val{font-size:1.6rem}
    
    /* modals - adjust for mobile */
    .modal-ov{padding:12px;align-items:center}
    /* LIMIT MAX HEIGHT so they DO NOT EXCEED viewport height. flex column allows inner scroll */
    .modal-box, .modal-box-wide{
        padding:20px;
        border-radius:16px;
        max-width:100%;
        width:100%;
        max-height:calc(100svh - 24px);
        display:flex;
        flex-direction:column;
    }
    .modal-box > form, .modal-box > div { overflow-y:auto; padding-right:4px; }
    
    .f-row{grid-template-columns:1fr}
    
    /* table - allow horizontal scroll */
    .tbl-wrap{overflow-x:auto}
    .data-tbl th,.data-tbl td{padding:11px 12px;font-size:.8rem}
    
    /* detail modal grid */
    .detail-grid{grid-template-columns:1fr}

    /* filter tabs */
    .filter-tabs{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;scrollbar-width:none}
    .filter-tabs::-webkit-scrollbar{display:none}
    .f-tab{white-space:nowrap}
}

@media(max-width:400px){
    .mob-nav-btn span{display:none}
    .mob-nav-btn{min-width:44px}
    .mob-nav-btn i{font-size:1.5rem}
}