/* =============================================
   مسار — Professional Dashboard v2
   Dark Sidebar · Light/Dark Mode · Multi-View
============================================= */

/* ===== VARIABLES ===== */
:root {
    --bg: #F0F2F8;
    --bg2: #E4E8F2;
    --card: #FFFFFF;
    --card-h: #FAFBFF;
    --t1: #0F172A;
    --t2: #1E293B;
    --t3: #64748B;
    --t4: #94A3B8;
    --brd: #E2E8F0;
    --brd2: #CBD5E1;

    --pr: #6366F1;
    --pr-h: #4F46E5;
    --pr-s: #EEF2FF;
    --pr-s2: #E0E7FF;
    --brd-a: rgba(99,102,241,.2);
    --glow: 0 0 0 3px rgba(99,102,241,.15);

    --green: #10B981; --green-s: #ECFDF5;
    --blue: #3B82F6;  --blue-s: #EFF6FF;
    --amber: #F59E0B; --amber-s: #FFFBEB;
    --rose: #EF4444;  --rose-s: #FEF2F2;
    --orange: #F97316; --orange-s: #FFF7ED;
    --gray: #94A3B8;  --gray-s: #F8FAFC;

    --sh1: 0 1px 3px rgba(15,23,42,.06);
    --sh2: 0 4px 16px rgba(15,23,42,.08);
    --sh3: 0 20px 60px rgba(15,23,42,.15);
    --sh-pr: 0 4px 14px rgba(99,102,241,.25);

    --r: 10px; --r2: 14px; --r3: 20px; --rr: 100px;
    --ff: 'Cairo', sans-serif;

    /* Sidebar - always dark */
    --sb-bg: #13112A;
    --sb-bg2: #1E1B3A;
    --sb-brd: rgba(255,255,255,.07);
    --sb-text: #A5B4FC;
    --sb-dim: #6366F1;
    --sb-active: rgba(99,102,241,.18);
    --sb-hover: rgba(255,255,255,.05);
    --sb-w: 258px;
    --sb-mini: 66px;
}

[data-theme="dark"] {
    --bg: #0D1117;
    --bg2: #161C27;
    --card: #1C2333;
    --card-h: #212D42;
    --t1: #F1F5F9;
    --t2: #CBD5E1;
    --t3: #94A3B8;
    --t4: #475569;
    --brd: #263044;
    --brd2: #334155;
    --pr-s: rgba(99,102,241,.14);
    --pr-s2: rgba(99,102,241,.24);
    --green-s: rgba(16,185,129,.12);
    --blue-s: rgba(59,130,246,.12);
    --amber-s: rgba(245,158,11,.12);
    --rose-s: rgba(239,68,68,.12);
    --orange-s: rgba(249,115,22,.12);
    --gray-s: rgba(148,163,184,.08);
    --sh1: 0 1px 3px rgba(0,0,0,.3);
    --sh2: 0 4px 16px rgba(0,0,0,.4);
    --sh3: 0 20px 60px rgba(0,0,0,.6);
}

/* ===== RESET ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
    font-family:var(--ff);font-size:14px;line-height:1.6;
    color:var(--t1);background:var(--bg);min-height:100vh;
    -webkit-font-smoothing:antialiased;
}
::selection{background:var(--pr-s);color:var(--pr)}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--brd2);border-radius:var(--rr)}
::-webkit-scrollbar-thumb:hover{background:var(--t4)}

/* ===== SIDEBAR ===== */
.sidebar{
    position:fixed;top:0;right:0;
    width:var(--sb-w);height:100vh;
    background:var(--sb-bg);
    display:flex;flex-direction:column;
    z-index:50;overflow:hidden;
    transition:width .3s cubic-bezier(.4,0,.2,1),transform .35s cubic-bezier(.4,0,.2,1);
    border-left:1px solid var(--sb-brd);
}
.sidebar-header{
    display:flex;align-items:center;justify-content:space-between;
    padding:20px 16px 16px;
    border-bottom:1px solid var(--sb-brd);
    flex-shrink:0;
}
.brand{display:flex;align-items:center;gap:10px;overflow:hidden}
.brand-logo{width:36px;height:36px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.brand-name{
    font-size:20px;font-weight:800;color:#fff;
    white-space:nowrap;transition:opacity .2s,width .3s;
}
.sb-toggle{
    width:30px;height:30px;display:flex;align-items:center;justify-content:center;
    background:var(--sb-hover);border:1px solid var(--sb-brd);border-radius:8px;
    color:var(--sb-text);cursor:pointer;flex-shrink:0;
    transition:all .2s;
}
.sb-toggle:hover{background:var(--sb-active);color:#fff}
.sb-toggle svg{transition:transform .3s}

/* Nav */
.sidebar-nav{flex:1;padding:12px 10px;display:flex;flex-direction:column;gap:2px;overflow:hidden}
.nav-section-label{
    font-size:9px;font-weight:700;color:rgba(165,180,252,.4);
    text-transform:uppercase;letter-spacing:1.8px;
    padding:10px 10px 6px;white-space:nowrap;
    transition:opacity .2s;
}
.nav-link{
    display:flex;align-items:center;gap:10px;
    padding:10px 12px;border-radius:var(--r);
    color:var(--sb-text);text-decoration:none;
    font-size:13px;font-weight:600;white-space:nowrap;
    transition:all .18s;position:relative;
}
.nav-link:hover{color:#fff;background:var(--sb-hover)}
.nav-link.active{color:#fff;background:var(--sb-active)}
.nav-link.active svg{stroke:#A5B4FC}
.nav-text{transition:opacity .2s,width .3s;overflow:hidden}
.nav-badge{
    margin-right:auto;min-width:18px;height:18px;padding:0 5px;
    display:flex;align-items:center;justify-content:center;
    background:var(--sb-dim);color:#fff;
    font-size:10px;font-weight:700;border-radius:var(--rr);
}

/* Sidebar Stats */
.sidebar-stats{
    padding:12px 14px;border-top:1px solid var(--sb-brd);
    flex-shrink:0;overflow:hidden;
}
.ss-label{font-size:9px;font-weight:700;color:rgba(165,180,252,.4);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:10px;transition:opacity .2s}
.ss-row{display:flex;justify-content:space-between;align-items:center;padding:4px 0}
.ss-key{font-size:12px;color:var(--sb-text);opacity:.7;white-space:nowrap;transition:opacity .2s}
.ss-val{font-size:16px;font-weight:700;color:#fff}
.ss-val.accent{color:#A5B4FC}
.ss-val.danger{color:#FCA5A5}

/* Sidebar Footer */
.sidebar-footer{padding:10px 10px 16px;border-top:1px solid var(--sb-brd);flex-shrink:0}
.theme-toggle-btn{
    display:flex;align-items:center;gap:10px;
    width:100%;padding:9px 12px;
    background:transparent;border:1px solid var(--sb-brd);border-radius:var(--r);
    color:var(--sb-text);cursor:pointer;font-family:var(--ff);font-size:12px;font-weight:600;
    white-space:nowrap;overflow:hidden;
    transition:all .2s;
}
.theme-toggle-btn:hover{background:var(--sb-hover);color:#fff}
.theme-lbl{transition:opacity .2s;overflow:hidden}
.icon-sun,.icon-moon{flex-shrink:0}

.signout-btn {
    display:flex;align-items:center;gap:10px;
    width:100%;padding:9px 12px;margin-top:6px;
    background:transparent;border:1px solid rgba(239,68,68,.3);border-radius:var(--r);
    color:rgba(239,68,68,.75);font-family:var(--ff);font-size:12.5px;font-weight:600;
    cursor:pointer;white-space:nowrap;overflow:hidden;transition:all .2s;
}
.signout-btn:hover{background:rgba(239,68,68,.15);color:#EF4444;border-color:rgba(239,68,68,.5)}
body.sb-mini .signout-btn span{display:none}

/* ===== LOGIN SCREEN ===== */
.login-screen {
    position:fixed;inset:0;z-index:9999;
    display:flex;align-items:center;justify-content:center;
    background:var(--bg);
}
.login-card {
    display:flex;flex-direction:column;align-items:center;gap:16px;
    background:var(--card);border:1px solid var(--brd);border-radius:20px;
    padding:48px 40px;box-shadow:0 20px 60px rgba(0,0,0,.1);
    max-width:380px;width:90%;text-align:center;
    animation:fadeUp .4s ease;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.login-logo svg{width:56px;height:56px}
.login-title{font-size:28px;font-weight:800;color:var(--t1);margin:0}
.login-sub{font-size:14px;color:var(--t3);margin:0;line-height:1.6}
.login-google-btn {
    display:flex;align-items:center;gap:12px;
    padding:13px 28px;background:#fff;
    border:1.5px solid var(--brd2);border-radius:var(--r2);
    font-family:var(--ff);font-size:14px;font-weight:700;color:var(--t1);
    cursor:pointer;transition:all .2s;box-shadow:0 2px 8px rgba(0,0,0,.07);
    width:100%;justify-content:center;margin-top:8px;
}
.login-google-btn:hover{box-shadow:0 4px 16px rgba(0,0,0,.12);transform:translateY(-1px);border-color:var(--pr)}
.login-note{font-size:11px;color:var(--t4);margin:0}
[data-theme="dark"] .login-google-btn{background:var(--bg2);border-color:var(--brd);color:var(--t1)}

/* ===== SIDEBAR MINI (collapsed) ===== */
body.sb-mini .sidebar{width:var(--sb-mini)}
body.sb-mini .main{margin-right:var(--sb-mini)}
body.sb-mini .brand-name,
body.sb-mini .nav-text,
body.sb-mini .nav-badge,
body.sb-mini .nav-section-label,
body.sb-mini .sidebar-stats,
body.sb-mini .theme-lbl{opacity:0;width:0;pointer-events:none;overflow:hidden}
body.sb-mini .nav-link{justify-content:center;padding:10px}
body.sb-mini .sb-toggle svg{transform:rotate(180deg)}
body.sb-mini .theme-toggle-btn{justify-content:center}

/* ===== MOBILE BAR ===== */
.m-bar{
    display:none;position:fixed;top:0;left:0;right:0;height:56px;
    background:rgba(255,255,255,.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid var(--brd);z-index:60;
    padding:0 16px;align-items:center;justify-content:space-between;
}
[data-theme="dark"] .m-bar{background:rgba(13,17,23,.95)}
.m-bar-btn{
    width:38px;height:38px;display:flex;align-items:center;justify-content:center;
    background:var(--bg2);border:1px solid var(--brd);border-radius:var(--r);
    color:var(--t2);cursor:pointer;transition:all .15s;
}
.m-bar-btn:hover{background:var(--brd)}
.m-bar-btn.accent{background:var(--pr);border-color:var(--pr);color:white}
.m-bar-brand{font-size:18px;font-weight:800;color:var(--t1)}
.m-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:49}
.m-overlay.show{display:block}

/* ===== MAIN ===== */
.main{
    margin-right:var(--sb-w);
    padding:28px 36px 60px;
    min-height:100vh;
    transition:margin-right .3s cubic-bezier(.4,0,.2,1);
}

/* ===== TOP BAR ===== */
.top-bar{
    display:flex;align-items:center;gap:12px;
    margin-bottom:24px;padding-bottom:22px;
    border-bottom:1px solid var(--brd);
}
.search-wrap{
    flex:1;max-width:460px;position:relative;
}
.search-ico{
    position:absolute;right:13px;top:50%;transform:translateY(-50%);
    color:var(--t4);pointer-events:none;
}
.search-inp{
    width:100%;padding:10px 40px 10px 36px;
    font-family:var(--ff);font-size:13px;color:var(--t1);
    background:var(--card);border:1px solid var(--brd);
    border-radius:var(--r2);transition:all .15s;
}
.search-inp:focus{outline:none;border-color:var(--pr);box-shadow:var(--glow);background:var(--card)}
.search-inp::placeholder{color:var(--t4)}
.search-clear{
    position:absolute;left:10px;top:50%;transform:translateY(-50%);
    background:none;border:none;color:var(--t4);cursor:pointer;
    font-size:11px;padding:3px 5px;border-radius:5px;transition:color .15s;
}
.search-clear:hover{color:var(--t2)}
.top-actions{display:flex;align-items:center;gap:8px;margin-right:auto}
.btn-icon{
    width:38px;height:38px;display:flex;align-items:center;justify-content:center;
    background:var(--card);border:1px solid var(--brd);border-radius:var(--r);
    color:var(--t3);cursor:pointer;transition:all .15s;
}
.btn-icon:hover{border-color:var(--pr);color:var(--pr);background:var(--pr-s)}
.btn-new{
    display:inline-flex;align-items:center;gap:7px;
    padding:10px 20px;font-family:var(--ff);font-size:13px;font-weight:700;
    color:white;background:var(--pr);border:none;border-radius:var(--r);
    cursor:pointer;transition:all .2s;box-shadow:var(--sh-pr);white-space:nowrap;
}
.btn-new:hover{background:var(--pr-h);transform:translateY(-1px);box-shadow:0 6px 20px rgba(99,102,241,.3)}
.btn-new:active{transform:translateY(0)}
.btn-new.sm{padding:8px 16px;font-size:12px}

/* ===== STATS ROW ===== */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:28px}
.stat-card{
    display:flex;align-items:center;gap:14px;
    padding:18px 20px;background:var(--card);
    border:1px solid var(--brd);border-radius:var(--r2);
    transition:all .25s;
}
.stat-card:hover{box-shadow:var(--sh2);transform:translateY(-2px)}
.stat-icon-wrap{
    width:46px;height:46px;display:flex;align-items:center;justify-content:center;
    border-radius:var(--r);flex-shrink:0;
}
.stat-icon-wrap.s-total{background:var(--pr-s);color:var(--pr)}
.stat-icon-wrap.s-active{background:var(--blue-s);color:var(--blue)}
.stat-icon-wrap.s-done{background:var(--green-s);color:var(--green)}
.stat-icon-wrap.s-overdue{background:var(--rose-s);color:var(--rose)}
.stat-body{display:flex;flex-direction:column}
.stat-num{font-size:28px;font-weight:800;line-height:1;color:var(--t1)}
.stat-lbl{font-size:11px;color:var(--t3);margin-top:4px;font-weight:500}

/* ===== PANELS ===== */
.panel{display:none}
.panel.active{display:block;animation:fadeIn .3s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* Panel Toolbar */
.panel-toolbar{
    display:flex;align-items:center;justify-content:space-between;
    gap:12px;margin-bottom:20px;flex-wrap:wrap;
}
.panel-title-area{display:flex;align-items:center;gap:10px}
.panel-title{font-size:20px;font-weight:700;color:var(--t1)}
.panel-count{
    padding:3px 10px;background:var(--bg2);color:var(--t3);
    font-size:12px;font-weight:700;border-radius:var(--rr);
}
.toolbar-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.filters-wrap{display:flex;gap:8px;flex-wrap:wrap}
.sel{
    padding:9px 28px 9px 12px;font-family:var(--ff);font-size:12px;font-weight:600;
    color:var(--t2);background:var(--card);border:1px solid var(--brd);
    border-radius:var(--r);cursor:pointer;appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 3.5L5 6.5L8 3.5' stroke='%2394A3B8' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:left 9px center;
    transition:all .15s;
}
.sel:hover{border-color:var(--brd2)}
.sel:focus{outline:none;border-color:var(--pr);box-shadow:var(--glow)}
.view-btns{
    display:flex;gap:2px;background:var(--bg2);
    border-radius:var(--r);padding:3px;
}
.view-btn{
    width:32px;height:32px;display:flex;align-items:center;justify-content:center;
    background:transparent;border:none;border-radius:7px;
    color:var(--t4);cursor:pointer;transition:all .15s;
}
.view-btn:hover{color:var(--t2);background:var(--card)}
.view-btn.active{background:var(--card);color:var(--pr);box-shadow:var(--sh1)}

/* ===== GRID VIEW ===== */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}

.project-card{
    position:relative;background:var(--card);
    border:1px solid var(--brd);
    border-radius:var(--r2);padding:20px;cursor:pointer;
    transition:all .25s cubic-bezier(.4,0,.2,1);
    border-right:3px solid var(--card-accent, var(--brd2));
    animation:cardUp .4s ease both;
}
@keyframes cardUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.project-card:hover{border-color:var(--brd2);box-shadow:var(--sh2);transform:translateY(-3px)}

/* Card top row */
.card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:8px}
.priority-pill{
    display:inline-flex;align-items:center;gap:4px;
    font-size:10px;font-weight:700;padding:3px 9px;border-radius:var(--rr);
    text-transform:uppercase;letter-spacing:.4px;
}
.priority-pill.high{background:var(--rose-s);color:var(--rose)}
.priority-pill.medium{background:var(--amber-s);color:var(--amber)}
.priority-pill.low{background:var(--green-s);color:var(--green)}
.status-badge{
    display:inline-flex;align-items:center;gap:4px;padding:4px 10px;
    font-size:11px;font-weight:700;border-radius:var(--rr);
}
.status-badge.idea{background:var(--amber-s);color:var(--amber)}
.status-badge.in-progress{background:var(--blue-s);color:var(--blue)}
.status-badge.launched{background:var(--green-s);color:var(--green)}
.status-badge.paused{background:var(--gray-s);color:var(--t3)}

/* Card title */
.card-title-row{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.card-icon{
    width:42px;height:42px;display:flex;align-items:center;justify-content:center;
    background:var(--pr-s);border-radius:var(--r);font-size:20px;flex-shrink:0;
}
.card-name-area{flex:1;min-width:0}
.card-name{font-size:15px;font-weight:700;color:var(--t1);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-cat{font-size:11px;color:var(--t4);margin-top:2px}

/* Progress */
.card-progress{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.progress-bar{flex:1;height:5px;background:var(--bg2);border-radius:var(--rr);overflow:hidden}
.progress-fill{height:100%;border-radius:var(--rr);transition:width .5s ease}
.progress-pct{font-size:12px;font-weight:700;color:var(--t3);min-width:30px;text-align:left}

/* Next task */
.card-next{
    padding:9px 12px;background:var(--bg2);border-radius:var(--r);
    font-size:12px;color:var(--t2);border-right:2px solid var(--pr);
    margin-bottom:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.card-next-lbl{font-weight:700;color:var(--pr);margin-left:4px}

/* Deadline */
.deadline-pill{
    display:inline-flex;align-items:center;gap:4px;
    font-size:11px;font-weight:600;padding:3px 9px;border-radius:var(--rr);
    margin-bottom:10px;
}
.deadline-pill.overdue{background:var(--rose-s);color:var(--rose)}
.deadline-pill.soon{background:var(--amber-s);color:var(--amber)}
.deadline-pill.ok{background:var(--bg2);color:var(--t3)}

/* Card footer */
.card-footer{
    display:flex;align-items:center;justify-content:space-between;
    padding-top:12px;border-top:1px solid var(--brd);
}
.card-meta{display:flex;align-items:center;gap:8px}
.card-date{font-size:11px;color:var(--t4);display:flex;align-items:center;gap:3px}
.health-dot{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700}
.health-dot::before{content:'';width:6px;height:6px;border-radius:50%;display:inline-block}
.health-dot.good{color:var(--green)}.health-dot.good::before{background:var(--green)}
.health-dot.ok{color:var(--amber)}.health-dot.ok::before{background:var(--amber)}
.health-dot.poor{color:var(--rose)}.health-dot.poor::before{background:var(--rose)}
.card-links{display:flex;gap:4px}
.card-lnk{
    width:26px;height:26px;display:flex;align-items:center;justify-content:center;
    color:var(--t4);background:var(--bg);border-radius:7px;text-decoration:none;
    border:1px solid transparent;transition:all .15s;
}
.card-lnk:hover{color:var(--pr);background:var(--pr-s);border-color:var(--brd-a)}
.task-progress-row{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--t4);margin-top:8px}

/* ===== LIST VIEW ===== */
.list-view{display:flex;flex-direction:column;gap:4px}
.list-item{
    display:flex;align-items:center;gap:14px;
    padding:13px 18px;background:var(--card);
    border:1px solid var(--brd);border-radius:var(--r);
    cursor:pointer;transition:all .2s;
    border-right:3px solid var(--card-accent, var(--brd2));
    animation:cardUp .3s ease both;
}
.list-item:hover{border-color:var(--brd2);box-shadow:var(--sh1)}
.list-icon{width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:var(--pr-s);border-radius:8px;font-size:16px;flex-shrink:0}
.list-name-col{flex:1;min-width:0}
.list-name{font-size:13px;font-weight:700;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list-cat{font-size:11px;color:var(--t4)}
.list-status{flex-shrink:0}
.list-progress-col{display:flex;align-items:center;gap:8px;width:130px;flex-shrink:0}
.list-progress-bar{flex:1;height:4px;background:var(--bg2);border-radius:var(--rr);overflow:hidden}
.list-progress-fill{height:100%;border-radius:var(--rr);transition:width .5s ease}
.list-pct{font-size:11px;font-weight:700;color:var(--t3);min-width:28px;text-align:left}
.list-deadline{width:100px;flex-shrink:0}
.list-health{flex-shrink:0}
.list-links{display:flex;gap:3px;flex-shrink:0}
.list-lnk{width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:var(--t4);background:var(--bg);border-radius:6px;text-decoration:none;border:1px solid transparent;transition:all .15s}
.list-lnk:hover{color:var(--pr);background:var(--pr-s)}

/* ===== KANBAN VIEW ===== */
.kanban-board{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:start}
.kanban-col{background:var(--bg2);border-radius:var(--r2);padding:12px;min-height:160px}
.kanban-col-hd{
    display:flex;align-items:center;justify-content:space-between;
    padding:6px 4px 10px;margin-bottom:4px;
}
.kanban-col-title{font-size:11px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.8px}
.kanban-col-cnt{
    width:20px;height:20px;display:flex;align-items:center;justify-content:center;
    background:var(--card);color:var(--t3);font-size:10px;font-weight:700;
    border-radius:50%;
}
.kanban-card{
    background:var(--card);border:1px solid var(--brd);border-radius:var(--r);
    padding:13px;margin-bottom:8px;cursor:pointer;
    transition:all .2s;border-right:3px solid var(--card-accent, var(--brd2));
    animation:cardUp .3s ease both;
}
.kanban-card:hover{box-shadow:var(--sh2);transform:translateY(-2px)}
.kanban-card-hd{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.kanban-icon{width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:var(--pr-s);border-radius:7px;font-size:14px;flex-shrink:0}
.kanban-name{font-size:13px;font-weight:700;color:var(--t1);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kanban-progress{margin-bottom:8px}
.kanban-progress-bar{height:4px;background:var(--bg2);border-radius:var(--rr);overflow:hidden}
.kanban-progress-fill{height:100%;border-radius:var(--rr);transition:width .5s ease}
.kanban-pct{font-size:10px;color:var(--t4);margin-top:3px;text-align:left}
.kanban-footer{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.kanban-date{font-size:10px;color:var(--t4)}
.kanban-empty{text-align:center;padding:24px 0;color:var(--t4);font-size:12px;opacity:.7}

/* ===== EMPTY STATE ===== */
.empty-state{display:flex;flex-direction:column;align-items:center;padding:80px 24px;text-align:center}
.empty-state.sm{padding:50px 24px}
.empty-emoji{font-size:52px;margin-bottom:16px;opacity:.5}
.empty-state.sm .empty-emoji{font-size:38px;margin-bottom:10px}
.empty-state h3{font-size:20px;font-weight:700;color:var(--t1);margin-bottom:6px}
.empty-state p{color:var(--t3);margin-bottom:24px;font-size:13px}
.empty-state.sm p{margin-bottom:0}

/* ===== IDEAS ===== */
.ideas-topbar { display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px }
.ideas-topbar-l { display:flex;align-items:center;gap:10px }
.ideas-title { font-size:20px;font-weight:800;color:var(--t1) }
.ideas-badge { min-width:24px;height:24px;padding:0 7px;display:inline-flex;align-items:center;justify-content:center;background:var(--pr-s);color:var(--pr);font-size:11px;font-weight:800;border-radius:var(--rr) }
.ideas-topbar-r { display:flex;align-items:center;gap:8px }
.ideas-search-wrap { display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--brd);border-radius:var(--r);padding:8px 12px;transition:border-color .15s,box-shadow .15s }
.ideas-search-wrap:focus-within { border-color:var(--pr);box-shadow:var(--glow) }
.ideas-search-wrap svg { color:var(--t4);flex-shrink:0 }
.ideas-search-inp { border:none;background:none;outline:none;font-family:var(--ff);font-size:13px;color:var(--t1);width:180px }
.ideas-search-inp::placeholder { color:var(--t4) }
.ideas-sort-sel { min-width:130px }

.ideas-stats-bar { display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap }
.ideas-stat-pill { display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:var(--rr);font-size:12px;font-weight:700;border:1.5px solid transparent;cursor:pointer;transition:transform .15s,box-shadow .15s,opacity .15s;user-select:none }
.ideas-stat-pill:hover { transform:scale(1.06) }
.ideas-stat-pill span { font-size:16px;font-weight:800 }
.ideas-stat-pill.raw        { background:var(--gray-s); color:var(--t3);   border-color:var(--brd) }
.ideas-stat-pill.developing { background:var(--amber-s);color:var(--amber);border-color:#FDE68A }
.ideas-stat-pill.ready      { background:var(--green-s);color:var(--green);border-color:#6EE7B7 }
.ideas-stat-pill.active.raw        { background:var(--t3);  color:#fff; border-color:var(--t3);  box-shadow:0 2px 8px rgba(0,0,0,.18) }
.ideas-stat-pill.active.developing { background:var(--amber);color:#fff; border-color:var(--amber);box-shadow:0 2px 8px rgba(245,158,11,.3) }
.ideas-stat-pill.active.ready      { background:var(--green);color:#fff; border-color:var(--green);box-shadow:0 2px 8px rgba(16,185,129,.3) }

.ideas-add-card { background:var(--card);border:1.5px dashed var(--brd2);border-radius:var(--r2);padding:16px 20px;margin-bottom:24px;transition:border-color .2s,box-shadow .2s }
.ideas-add-card:focus-within { border-color:var(--pr);box-shadow:var(--glow);border-style:solid }
.ideas-add-main { display:flex;align-items:center;gap:12px }
.ideas-add-ico { font-size:22px;flex-shrink:0 }
.ideas-add-inp { flex:1;border:none;background:none;outline:none;font-family:var(--ff);font-size:14px;color:var(--t1);padding:4px 0 }
.ideas-add-inp::placeholder { color:var(--t4) }
.ideas-add-extras { margin-top:14px;padding-top:14px;border-top:1px solid var(--brd);display:flex;flex-direction:column;gap:10px }
.ideas-desc-inp { width:100%;padding:10px 12px;font-family:var(--ff);font-size:13px;color:var(--t1);background:var(--bg);border:1px solid var(--brd);border-radius:var(--r);resize:none;transition:border-color .15s;line-height:1.6 }
.ideas-desc-inp:focus { outline:none;border-color:var(--pr);box-shadow:var(--glow) }
.ideas-desc-inp::placeholder { color:var(--t4) }
.ideas-add-row { display:flex;gap:8px }
.ideas-sel { flex:1;min-width:0 }
.ideas-expand-btn { display:block;width:100%;margin-top:12px;padding:6px;background:none;border:none;font-family:var(--ff);font-size:12px;font-weight:600;color:var(--t4);cursor:pointer;transition:color .15s;text-align:center }
.ideas-expand-btn:hover { color:var(--pr) }

.ideas-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px }

.idea-card { background:var(--card);border:1.5px solid var(--brd);border-radius:var(--r2);padding:18px;display:flex;flex-direction:column;gap:10px;transition:box-shadow .2s,transform .2s,border-color .2s;position:relative;overflow:hidden;box-shadow:var(--sh1) }
.idea-card::before { content:'';position:absolute;top:0;right:0;left:0;height:3px;border-radius:var(--r2) var(--r2) 0 0;background:var(--brd);transition:background .2s }
.idea-card[data-stage="raw"]::before        { background:var(--t4) }
.idea-card[data-stage="developing"]::before { background:var(--amber) }
.idea-card[data-stage="ready"]::before      { background:var(--green) }
.idea-card:hover { box-shadow:var(--sh2);transform:translateY(-2px);border-color:var(--brd2) }
.idea-card[data-stage="ready"]:hover { border-color:var(--green) }

.idea-card-head { display:flex;align-items:center;justify-content:space-between;gap:8px }
.idea-stage-badge { display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:var(--rr);font-size:11px;font-weight:700;cursor:pointer;transition:all .15s;border:1.5px solid transparent;user-select:none }
.idea-stage-badge:hover { transform:scale(1.05) }
.idea-stage-badge.raw        { background:var(--gray-s); color:var(--t3);   border-color:var(--brd) }
.idea-stage-badge.developing { background:var(--amber-s);color:var(--amber);border-color:#FDE68A }
.idea-stage-badge.ready      { background:var(--green-s);color:var(--green);border-color:#6EE7B7 }
.idea-priority-dot { width:8px;height:8px;border-radius:50%;flex-shrink:0 }
.idea-priority-dot.high   { background:var(--rose); box-shadow:0 0 0 3px var(--rose-s) }
.idea-priority-dot.medium { background:var(--amber);box-shadow:0 0 0 3px var(--amber-s) }
.idea-priority-dot.low    { background:var(--green);box-shadow:0 0 0 3px var(--green-s) }

.idea-card-title { font-size:14px;font-weight:700;color:var(--t1);line-height:1.45;word-break:break-word;outline:none;cursor:text }
.idea-card-title:focus { color:var(--pr) }
.idea-card-desc { font-size:12.5px;color:var(--t3);line-height:1.65;word-break:break-word;outline:none;cursor:text;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden }
.idea-card-desc:focus { -webkit-line-clamp:unset;overflow:visible;color:var(--t2) }

.idea-card-foot { display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:8px;border-top:1px solid var(--brd) }
.idea-cat-tag { font-size:11px;font-weight:600;color:var(--pr);background:var(--pr-s);padding:2px 8px;border-radius:var(--rr) }
.idea-card-date { font-size:11px;color:var(--t4);margin-inline-start:auto }

.idea-card-actions { display:flex;gap:6px;align-items:center;opacity:0;transition:opacity .18s;margin-top:-2px }
.idea-card:hover .idea-card-actions { opacity:1 }
.idea-card[data-editing="true"] { transform:none !important;box-shadow:var(--sh2) !important;border-color:var(--pr) !important }
.idea-act-convert { flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:7px 12px;background:var(--green-s);color:var(--green);border:1.5px solid #6EE7B7;border-radius:var(--r);font-family:var(--ff);font-size:12px;font-weight:700;cursor:pointer;transition:all .18s }
.idea-act-convert:hover { background:var(--green);color:#fff;border-color:var(--green) }
.idea-act-icon-btn { width:32px;height:32px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;background:var(--bg2);border:1px solid var(--brd);cursor:pointer;color:var(--t3);font-size:14px;transition:all .15s }
.idea-act-icon-btn:hover { background:var(--rose-s);color:var(--rose);border-color:transparent }
.idea-act-icon-btn[data-idea-action="edit"]:hover { background:var(--pr-s);color:var(--pr);border-color:transparent }

/* Idea inline edit form */
.idea-edit-form { display:flex;flex-direction:column;gap:12px }
.ief-field { display:flex;flex-direction:column;gap:4px }
.ief-label { font-size:11px;font-weight:700;color:var(--t3);letter-spacing:.04em;text-transform:uppercase }
.ief-inp { padding:8px 12px;background:var(--bg);border:1.5px solid var(--brd);border-radius:var(--r);font-family:var(--ff);font-size:13px;color:var(--t1);outline:none;transition:border-color .15s;width:100%;box-sizing:border-box }
.ief-inp:focus { border-color:var(--pr);box-shadow:var(--glow) }
.ief-ta { min-height:70px;resize:vertical;line-height:1.5 }
.ief-row { display:grid;grid-template-columns:repeat(3,1fr);gap:8px }
.ief-sel { padding:8px 10px;background:var(--bg);border:1.5px solid var(--brd);border-radius:var(--r);font-family:var(--ff);font-size:12px;color:var(--t1);outline:none;cursor:pointer;width:100%;transition:border-color .15s }
.ief-sel:focus { border-color:var(--pr) }
.ief-actions { display:flex;gap:8px;padding-top:4px }
.ief-save { flex:1;padding:8px 14px;background:var(--pr);color:#fff;border:none;border-radius:var(--r);font-family:var(--ff);font-size:13px;font-weight:700;cursor:pointer;transition:opacity .15s }
.ief-save:hover { opacity:.88 }
.ief-cancel { padding:8px 14px;background:var(--bg2);color:var(--t2);border:1px solid var(--brd);border-radius:var(--r);font-family:var(--ff);font-size:13px;font-weight:600;cursor:pointer;transition:all .15s }
.ief-cancel:hover { background:var(--rose-s);color:var(--rose);border-color:transparent }
@media (max-width:500px) { .ief-row { grid-template-columns:1fr } }

.ideas-empty-state { text-align:center;padding:60px 20px;display:flex;flex-direction:column;align-items:center;gap:10px }
.ideas-empty-ico   { font-size:52px;filter:grayscale(.3) }
.ideas-empty-title { font-size:16px;font-weight:700;color:var(--t2) }
.ideas-empty-sub   { font-size:13px;color:var(--t3) }

/* ===== ARCHIVE ===== */
.archive-hd{margin-bottom:24px}
.archive-hd h2{font-size:20px;font-weight:700;margin-bottom:4px}
.archive-hd-sub{font-size:12px;color:var(--t3)}
.archive-list{display:flex;flex-direction:column;gap:8px}
.archive-item{
    display:flex;align-items:center;gap:14px;
    padding:14px 18px;background:var(--card);border:1px solid var(--brd);
    border-radius:var(--r2);transition:all .15s;opacity:.8;
}
.archive-item:hover{opacity:1;box-shadow:var(--sh1)}
.archive-icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--bg2);border-radius:var(--r);font-size:16px;flex-shrink:0}
.archive-info{flex:1;min-width:0}
.archive-name{font-size:13px;font-weight:700;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.archive-meta{font-size:11px;color:var(--t4);margin-top:2px}
.archive-status{flex-shrink:0}
.archive-progress{font-size:12px;font-weight:700;color:var(--t3);flex-shrink:0;min-width:36px;text-align:center}
.btn-restore{
    padding:6px 14px;font-family:var(--ff);font-size:11px;font-weight:700;
    color:var(--pr);background:var(--pr-s);border:1px solid var(--brd-a);
    border-radius:var(--r);cursor:pointer;transition:all .15s;white-space:nowrap;flex-shrink:0;
}
.btn-restore:hover{background:var(--pr-s2)}

/* ===== MODAL ===== */
.modal-bg{
    position:fixed;inset:0;background:rgba(15,23,42,.3);
    backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
    display:flex;align-items:center;justify-content:center;
    z-index:200;opacity:0;visibility:hidden;padding:20px;
    transition:all .25s;
}
.modal-bg.active{opacity:1;visibility:visible}
.modal{
    width:100%;max-width:580px;max-height:90vh;
    background:var(--card);border-radius:var(--r3);overflow:hidden;
    box-shadow:var(--sh3);display:flex;flex-direction:column;
    transform:translateY(20px) scale(.97);
    transition:transform .35s cubic-bezier(.34,1.56,.64,1);
}
.modal-bg.active .modal{transform:translateY(0) scale(1)}
.modal.modal-sm{max-width:400px}

.modal-head{
    display:flex;justify-content:space-between;align-items:center;
    padding:20px 24px;border-bottom:1px solid var(--brd);
    flex-shrink:0;
}
.modal-head-l{display:flex;align-items:center;gap:12px}
.modal-ico{
    width:42px;height:42px;display:flex;align-items:center;justify-content:center;
    background:var(--pr-s);border-radius:var(--r);font-size:20px;flex-shrink:0;
}
.modal-title{font-size:17px;font-weight:700;color:var(--t1)}
.modal-sub{font-size:11px;color:var(--t3)}
.modal-x{
    width:32px;height:32px;display:flex;align-items:center;justify-content:center;
    background:var(--bg);border:none;border-radius:var(--r);color:var(--t3);cursor:pointer;transition:all .15s;
}
.modal-x:hover{background:var(--rose-s);color:var(--rose)}

.modal-body{flex:1;overflow-y:auto;padding:20px 24px}
.sec{margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid var(--brd)}
.sec:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.sec-label{
    font-size:10px;font-weight:800;color:var(--pr);
    text-transform:uppercase;letter-spacing:1.2px;margin-bottom:14px;
    display:flex;align-items:center;gap:7px;
}
.sec-label::before{content:'';width:3px;height:11px;background:var(--pr);border-radius:var(--rr)}

.fg{margin-bottom:14px}.fg:last-child{margin-bottom:0}
.fg label{display:block;font-size:11px;font-weight:700;color:var(--t2);margin-bottom:5px}
.req{color:var(--rose)}
.fg2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.inp{
    width:100%;padding:10px 14px;font-family:var(--ff);font-size:13px;
    color:var(--t1);background:var(--bg);border:1px solid var(--brd);
    border-radius:var(--r);transition:all .15s;
}
.inp:focus{outline:none;border-color:var(--pr);box-shadow:var(--glow);background:var(--card)}
.inp::placeholder{color:var(--t4)}
.inp.ta{resize:vertical;min-height:70px;line-height:1.6}
.inp[type="date"]{cursor:pointer}

.icon-grid{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(34px,1fr));gap:3px;
    max-height:100px;overflow-y:auto;padding:8px;
    background:var(--bg);border:1px solid var(--brd);border-radius:var(--r);
}
.icon-option{
    width:34px;height:34px;display:flex;align-items:center;justify-content:center;
    font-size:16px;background:transparent;border:2px solid transparent;
    border-radius:8px;cursor:pointer;transition:all .15s;
}
.icon-option:hover{background:var(--card);border-color:var(--brd)}
.icon-option.selected{background:var(--pr-s);border-color:var(--pr)}

.rng-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:2px}
.rng-val{font-size:15px;font-weight:700;color:var(--pr)}
.rng-wrap{position:relative;margin-top:6px;padding:4px 0}
.rng{width:100%;height:8px;appearance:none;-webkit-appearance:none;background:transparent;position:relative;z-index:2;cursor:pointer}
.rng::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;background:var(--pr);border-radius:50%;border:3px solid var(--card);box-shadow:var(--sh-pr);cursor:pointer}
.rng::-moz-range-thumb{width:20px;height:20px;background:var(--pr);border-radius:50%;border:3px solid var(--card);cursor:pointer}
.rng-track{position:absolute;top:50%;transform:translateY(-50%);right:0;left:0;height:8px;background:var(--bg2);border-radius:var(--rr);z-index:1}
.rng-fill{height:100%;background:var(--pr);border-radius:var(--rr);transition:width .15s}

.lnk-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.lnk-tag{padding:6px 12px;font-size:10px;font-weight:800;border-radius:var(--r);flex-shrink:0;letter-spacing:.5px}
.lnk-tag.gh{background:#24292f;color:white}
.lnk-tag.web{background:var(--blue);color:white}
.lnk-tag.dir{background:var(--amber);color:#1a1a2e}
.lnk-row .inp{flex:1}

.task-add{display:flex;gap:6px;margin-bottom:12px}
.task-plus{
    width:40px;height:40px;display:flex;align-items:center;justify-content:center;
    background:var(--pr);color:white;border:none;border-radius:var(--r);
    font-size:20px;cursor:pointer;transition:all .15s;flex-shrink:0;
}
.task-plus:hover{background:var(--pr-h)}
.tasks-list{list-style:none;display:flex;flex-direction:column;gap:4px;max-height:140px;overflow-y:auto}
.task-item{display:flex;align-items:center;gap:8px;padding:9px 12px;background:var(--bg);border:1px solid var(--brd);border-radius:var(--r);transition:all .15s}
.task-item:hover{border-color:var(--brd2)}
.task-checkbox{width:18px;height:18px;border:2px solid var(--brd2);border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s}
.task-checkbox:hover{border-color:var(--pr)}
.task-checkbox.checked{background:var(--green);border-color:var(--green)}
.task-checkbox.checked::after{content:'✓';color:white;font-size:11px;font-weight:bold}
.task-text{flex:1;font-size:12px;color:var(--t2)}
.task-item.completed .task-text{text-decoration:line-through;color:var(--t4)}
.task-delete{width:20px;height:20px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:var(--t4);cursor:pointer;border-radius:6px;opacity:0;transition:all .15s;font-size:10px}
.task-item:hover .task-delete{opacity:1}
.task-delete:hover{background:var(--rose-s);color:var(--rose)}
.no-tasks{text-align:center;padding:20px;color:var(--t4);font-size:12px}

.modal-foot{
    display:flex;justify-content:space-between;align-items:center;
    padding:14px 24px;border-top:1px solid var(--brd);background:var(--bg);flex-shrink:0;
}
.modal-foot-start{display:flex;gap:8px}
.modal-actions{display:flex;gap:8px}
.btn-cancel{
    padding:9px 20px;font-family:var(--ff);font-size:12px;font-weight:600;
    color:var(--t3);background:var(--card);border:1px solid var(--brd);
    border-radius:var(--r);cursor:pointer;transition:all .15s;
}
.btn-cancel:hover{border-color:var(--brd2);color:var(--t2)}
.btn-del{
    display:inline-flex;align-items:center;gap:5px;
    padding:9px 14px;font-family:var(--ff);font-size:12px;font-weight:600;
    color:var(--rose);background:var(--rose-s);border:1px solid rgba(239,68,68,.2);
    border-radius:var(--r);cursor:pointer;transition:all .15s;
}
.btn-del:hover{background:#fdddd6}
.btn-archive-modal{
    display:inline-flex;align-items:center;gap:5px;
    padding:9px 14px;font-family:var(--ff);font-size:12px;font-weight:600;
    color:var(--amber);background:var(--amber-s);border:1px solid rgba(245,158,11,.2);
    border-radius:var(--r);cursor:pointer;transition:all .15s;
}
.btn-archive-modal:hover{background:#fef3c7}

/* Export Modal */
.export-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:4px 0}
.export-card{
    display:flex;align-items:center;gap:14px;
    padding:16px;background:var(--bg);border:1px solid var(--brd);
    border-radius:var(--r2);cursor:pointer;transition:all .2s;text-align:right;
}
.export-card:hover{border-color:var(--pr);background:var(--pr-s)}
.export-card-ico{
    width:44px;height:44px;display:flex;align-items:center;justify-content:center;
    background:var(--card);border-radius:var(--r);font-size:13px;font-weight:800;
    color:var(--pr);border:1px solid var(--brd);flex-shrink:0;
}
.export-card-name{font-size:13px;font-weight:700;color:var(--t1);display:block}
.export-card-desc{font-size:11px;color:var(--t3);display:block;margin-top:2px}

/* ===== TOAST ===== */
#toast{
    position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(100px);
    padding:11px 22px;background:var(--t1);color:white;border-radius:var(--rr);
    font-family:var(--ff);font-size:13px;font-weight:600;z-index:999;
    display:flex;align-items:center;gap:8px;
    box-shadow:var(--sh3);transition:transform .4s cubic-bezier(.34,1.56,.64,1);
    white-space:nowrap;
}
#toast.toast-success{background:#064E3B;border:1px solid #10B981}
#toast.toast-error{background:#7F1D1D;border:1px solid #EF4444}
#toast.toast-warning{background:#78350F;border:1px solid #F59E0B}
#toast.toast-info{background:#1E3A5F;border:1px solid #3B82F6}

/* =============================================
   PROJECT DETAIL VIEW
============================================= */

.detail-view {
    display: none;
    position: fixed;
    top: 0; bottom: 0; left: 0;
    right: var(--sb-w);
    background: var(--bg);
    z-index: 70;
    overflow-y: auto;
    overflow-x: hidden;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .35s ease, transform .4s cubic-bezier(.4,0,.2,1);
}
.detail-view.active {
    opacity: 1;
    transform: translateY(0);
}
body.sb-mini .detail-view { right: var(--sb-mini); }

/* ── Topbar ── */
.dv-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 40px 16px;
    border-bottom: 1px solid var(--brd);
    position: sticky;
    top: 0;
    background: var(--bg);
    z-index: 10;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.dv-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    font-family: var(--ff);
    font-size: 13px;
    font-weight: 600;
    color: var(--t3);
    background: var(--card);
    border: 1px solid var(--brd);
    border-radius: var(--r);
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
}
.dv-back:hover { color: var(--pr); border-color: var(--pr); background: var(--pr-s); }
.dv-breadcrumb {
    flex: 1;
    font-size: 12px;
    color: var(--t4);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dv-topbar-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.dv-btn-del {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 8px 14px; font-family: var(--ff); font-size: 12px; font-weight: 600;
    color: var(--rose); background: var(--rose-s); border: 1px solid rgba(239,68,68,.2);
    border-radius: var(--r); cursor: pointer; transition: all .15s;
}
.dv-btn-del:hover { background: #fdddd6; }
.dv-btn-archive {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 8px 14px; font-family: var(--ff); font-size: 12px; font-weight: 600;
    color: var(--amber); background: var(--amber-s); border: 1px solid rgba(245,158,11,.2);
    border-radius: var(--r); cursor: pointer; transition: all .15s;
}
.dv-btn-archive:hover { background: #fef3c7; }

/* ── Hero ── */
.dv-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 32px 40px 24px;
    border-bottom: 1px solid var(--brd);
}
.dv-hero-info { display: flex; align-items: center; gap: 20px; flex: 1; min-width: 0; }
.dv-hero-icon {
    width: 72px; height: 72px;
    display: flex; align-items: center; justify-content: center;
    background: var(--pr-s);
    border-radius: var(--r2);
    font-size: 36px;
    flex-shrink: 0;
    box-shadow: var(--sh1);
    border: 1px solid var(--brd);
}
.dv-hero-text { flex: 1; min-width: 0; }
.dv-hero-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.dv-hero-name {
    font-size: 28px;
    font-weight: 800;
    color: var(--t1);
    line-height: 1.25;
    margin-bottom: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dv-hero-meta {
    display: flex; align-items: center; gap: 12px;
    font-size: 12px; color: var(--t3); flex-wrap: wrap;
}
.dv-hero-meta-item { display: flex; align-items: center; gap: 4px; }

/* Progress Ring */
.dv-progress-ring-wrap {
    flex-shrink: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dv-ring { display: block; }
.dv-ring-track { fill: none; stroke: var(--bg2); stroke-width: 7; }
.dv-ring-fill {
    fill: none; stroke-width: 7;
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    transition: stroke-dashoffset .8s cubic-bezier(.4,0,.2,1);
}
.dv-ring-label {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
.dv-ring-pct {
    display: block;
    font-size: 22px;
    font-weight: 800;
    color: var(--t1);
    line-height: 1;
}
.dv-ring-text {
    display: block;
    font-size: 10px;
    color: var(--t3);
    margin-top: 2px;
}

/* ── KPI Bar ── */
.dv-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--brd);
    border-top: 1px solid var(--brd);
    border-bottom: 1px solid var(--brd);
}
.dv-kpi {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 16px 12px;
    background: var(--card);
    text-align: center;
    transition: background .15s;
}
.dv-kpi:hover { background: var(--card-h); }
.dv-kpi-val {
    font-size: 20px;
    font-weight: 800;
    color: var(--t1);
    line-height: 1;
}
.dv-kpi-val.good { color: var(--green); }
.dv-kpi-val.warn { color: var(--amber); }
.dv-kpi-val.danger { color: var(--rose); }
.dv-kpi-label {
    font-size: 11px;
    color: var(--t3);
    font-weight: 500;
}
.dv-kpi-ico { font-size: 18px; margin-bottom: 2px; }

/* ── Quick Status Bar ── */
.dv-status-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 40px;
    border-bottom: 1px solid var(--brd);
    flex-wrap: wrap;
}
.dv-status-label { font-size: 12px; font-weight: 700; color: var(--t3); white-space: nowrap; }
.dv-status-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.dv-status-btn {
    padding: 6px 14px;
    font-family: var(--ff); font-size: 12px; font-weight: 600;
    color: var(--t3); background: var(--bg2);
    border: 1.5px solid transparent;
    border-radius: var(--rr);
    cursor: pointer; transition: all .18s;
}
.dv-status-btn:hover { color: var(--t1); background: var(--card); border-color: var(--brd2); }
.dv-status-btn.active { color: var(--pr); background: var(--pr-s); border-color: var(--brd-a); }
.dv-save-indicator {
    font-size: 11px;
    color: var(--t4);
    font-style: italic;
    transition: opacity .3s;
}

/* ── Tabs ── */
.dv-tabs-nav {
    display: flex;
    gap: 0;
    padding: 0 40px;
    border-bottom: 2px solid var(--brd);
    background: var(--bg);
    position: sticky;
    top: 57px;
    z-index: 9;
}
.dtab {
    padding: 14px 20px;
    font-family: var(--ff);
    font-size: 13px;
    font-weight: 600;
    color: var(--t3);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: all .18s;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 7px;
}
.dtab:hover { color: var(--t1); }
.dtab.active { color: var(--pr); border-bottom-color: var(--pr); }
.dtab-badge {
    min-width: 18px; height: 18px; padding: 0 5px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--pr-s); color: var(--pr);
    font-size: 10px; font-weight: 700; border-radius: var(--rr);
}

/* ── Tab Content ── */
.dv-tab-content { padding: 32px 40px 60px; }

/* Overview Tab */
.dv-overview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}
.dv-info-block {
    padding: 18px 20px;
    background: var(--card);
    border: 1px solid var(--brd);
    border-radius: var(--r2);
    border-right: 3px solid var(--block-accent, var(--pr));
}
.dv-info-block-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--t4);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}
.dv-info-block-val {
    font-size: 14px;
    font-weight: 600;
    color: var(--t1);
    line-height: 1.5;
}
.dv-info-block-val.empty { color: var(--t4); font-style: italic; font-weight: 400; }

.dv-details-card {
    background: var(--card);
    border: 1px solid var(--brd);
    border-radius: var(--r2);
    overflow: hidden;
    margin-bottom: 24px;
}
.dv-details-row {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid var(--brd);
    gap: 16px;
}
.dv-details-row:last-child { border-bottom: none; }
.dv-details-row-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--t3);
    width: 120px;
    flex-shrink: 0;
}
.dv-details-row-val { font-size: 13px; color: var(--t1); flex: 1; }

/* Tasks Tab */
.dv-task-add {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    max-width: 560px;
}
.dv-task-inp {
    flex: 1; padding: 11px 16px;
    font-family: var(--ff); font-size: 13px;
    color: var(--t1); background: var(--card);
    border: 1px solid var(--brd); border-radius: var(--r);
    transition: all .15s;
}
.dv-task-inp:focus { outline: none; border-color: var(--pr); box-shadow: var(--glow); }
.dv-task-inp::placeholder { color: var(--t4); }
.dv-task-add-btn {
    padding: 11px 20px;
    font-family: var(--ff); font-size: 13px; font-weight: 700;
    color: white; background: var(--pr);
    border: none; border-radius: var(--r);
    cursor: pointer; transition: all .15s;
}
.dv-task-add-btn:hover { background: var(--pr-h); }

.dv-tasks-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
}
.dv-tasks-title { font-size: 13px; font-weight: 700; color: var(--t2); }
.dv-tasks-pct { font-size: 12px; color: var(--t3); }

.dv-task-progress-bar {
    height: 4px; background: var(--bg2);
    border-radius: var(--rr); overflow: hidden;
    margin-bottom: 16px;
}
.dv-task-progress-fill { height: 100%; background: var(--green); border-radius: var(--rr); transition: width .5s; }

.dv-tasks-list { list-style: none; display: flex; flex-direction: column; gap: 6px; max-width: 640px; }
.dv-task-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px;
    background: var(--card); border: 1px solid var(--brd);
    border-radius: var(--r); transition: all .15s;
}
.dv-task-item:hover { border-color: var(--brd2); box-shadow: var(--sh1); }
.dv-task-item.completed { opacity: .65; }
.dv-task-check {
    width: 20px; height: 20px;
    border: 2px solid var(--brd2); border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; cursor: pointer; transition: all .15s;
}
.dv-task-check:hover { border-color: var(--pr); }
.dv-task-check.done { background: var(--green); border-color: var(--green); }
.dv-task-check.done::after { content: '✓'; color: white; font-size: 12px; font-weight: 700; }
.dv-task-text { flex: 1; font-size: 13px; color: var(--t1); line-height: 1.4; }
.dv-task-item.completed .dv-task-text { text-decoration: line-through; color: var(--t4); }
.dv-task-date { font-size: 11px; color: var(--t4); white-space: nowrap; }
.dv-task-del {
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: none; color: var(--t4);
    cursor: pointer; border-radius: 6px; opacity: 0; transition: all .15s;
    font-size: 11px;
}
.dv-task-item:hover .dv-task-del { opacity: 1; }
.dv-task-del:hover { background: var(--rose-s); color: var(--rose); }
.dv-no-tasks {
    text-align: center; padding: 40px;
    color: var(--t4); font-size: 13px;
}

/* Links Tab */
.dv-links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
    max-width: 720px;
}
.dv-link-card {
    display: flex; align-items: center; gap: 14px;
    padding: 18px 20px;
    background: var(--card); border: 1px solid var(--brd);
    border-radius: var(--r2); text-decoration: none;
    transition: all .2s; cursor: pointer;
}
.dv-link-card:hover { border-color: var(--pr); box-shadow: var(--sh2); transform: translateY(-2px); }
.dv-link-card.empty { opacity: .45; cursor: default; }
.dv-link-card.empty:hover { transform: none; box-shadow: none; border-color: var(--brd); }
.dv-link-ico {
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--r); flex-shrink: 0; font-size: 20px;
}
.dv-link-ico.gh { background: #24292f; color: white; }
.dv-link-ico.web { background: var(--blue-s); color: var(--blue); }
.dv-link-ico.files { background: var(--amber-s); color: var(--amber); }
.dv-link-info { flex: 1; min-width: 0; }
.dv-link-title { font-size: 13px; font-weight: 700; color: var(--t1); margin-bottom: 3px; }
.dv-link-url {
    font-size: 11px; color: var(--t3);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dv-link-arrow { color: var(--t4); flex-shrink: 0; }

/* ===== NOTES TAB ===== */
.notes-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 24px;
}
.notes-header-l { display: flex; align-items: center; gap: 10px; }
.notes-title { font-size: 16px; font-weight: 800; color: var(--t1); }
.notes-count {
    font-size: 12px; font-weight: 700; color: var(--pr);
    background: var(--pr-s); border: 1px solid var(--brd-a);
    padding: 2px 9px; border-radius: var(--rr);
}
.notes-add-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 18px; font-family: var(--ff); font-size: 13px; font-weight: 700;
    background: var(--pr); color: #fff; border: none; border-radius: var(--r);
    cursor: pointer; transition: all .18s; box-shadow: var(--sh-pr);
}
.notes-add-btn:hover { background: var(--pr-h); transform: translateY(-1px); }
.notes-add-btn svg { flex-shrink: 0; }

/* Empty state */
.notes-empty {
    text-align: center; padding: 60px 20px;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.notes-empty-ico { font-size: 52px; filter: grayscale(.3); }
.notes-empty-title { font-size: 16px; font-weight: 700; color: var(--t2); }
.notes-empty-sub { font-size: 13px; color: var(--t3); max-width: 300px; }

/* Notes grid — masonry-like via CSS columns */
.notes-grid {
    columns: 2; column-gap: 16px;
}
@media (max-width: 768px) { .notes-grid { columns: 1; } }

/* Note card */
.note-card {
    break-inside: avoid; margin-bottom: 16px;
    background: var(--card); border: 1.5px solid var(--brd);
    border-radius: var(--r2); overflow: hidden;
    transition: box-shadow .2s, transform .2s, border-color .2s;
    display: flex; flex-direction: column;
    box-shadow: var(--sh1);
}
.note-card:hover { box-shadow: var(--sh2); transform: translateY(-2px); }
.note-card.is-pinned { border-color: var(--pr); }

/* Color variants — light */
.note-card[data-color="yellow"] { background: #FFFBEB; border-color: #FDE68A; }
.note-card[data-color="green"]  { background: #ECFDF5; border-color: #A7F3D0; }
.note-card[data-color="blue"]   { background: #EFF6FF; border-color: #BFDBFE; }
.note-card[data-color="pink"]   { background: #FDF2F8; border-color: #FBCFE8; }
.note-card[data-color="purple"] { background: #F5F3FF; border-color: #DDD6FE; }
.note-card[data-color="orange"] { background: #FFF7ED; border-color: #FED7AA; }
/* Color variants — dark */
[data-theme="dark"] .note-card[data-color="yellow"] { background: #1C1A08; border-color: #854D0E; }
[data-theme="dark"] .note-card[data-color="green"]  { background: #061A10; border-color: #14532D; }
[data-theme="dark"] .note-card[data-color="blue"]   { background: #071726; border-color: #1E3A5F; }
[data-theme="dark"] .note-card[data-color="pink"]   { background: #1F0A16; border-color: #831843; }
[data-theme="dark"] .note-card[data-color="purple"] { background: #110A26; border-color: #3730A3; }
[data-theme="dark"] .note-card[data-color="orange"] { background: #1C0C04; border-color: #7C2D12; }

/* Card toolbar */
.note-toolbar {
    display: flex; align-items: center; gap: 6px;
    padding: 10px 14px 6px;
    opacity: 0; transition: opacity .18s;
}
.note-card:hover .note-toolbar, .note-card:focus-within .note-toolbar { opacity: 1; }
.note-pin-btn, .note-del-btn {
    width: 28px; height: 28px; border-radius: 50%; border: none;
    background: transparent; cursor: pointer; font-size: 14px;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s; color: var(--t3); flex-shrink: 0;
}
.note-pin-btn:hover { background: var(--bg2); color: var(--amber); }
.note-del-btn:hover { background: var(--rose-s); color: var(--rose); }
.note-pin-btn.pinned { color: var(--amber); }
.note-pin-indicator {
    font-size: 11px; font-weight: 700; color: var(--pr);
    background: var(--pr-s); padding: 2px 8px; border-radius: var(--rr);
    margin-inline-end: auto;
}

/* Color picker dots */
.note-colors { display: flex; gap: 5px; align-items: center; margin-inline-end: auto; }
.note-color-dot {
    width: 15px; height: 15px; border-radius: 50%; border: 2.5px solid transparent;
    cursor: pointer; transition: transform .15s, border-color .15s;
    flex-shrink: 0;
}
.note-color-dot:hover { transform: scale(1.25); }
.note-color-dot.active { border-color: var(--t1); transform: scale(1.15); }
.note-color-dot[data-color="default"] { background: var(--bg2); border-color: var(--brd2); }
.note-color-dot[data-color="yellow"]  { background: #FDE68A; }
.note-color-dot[data-color="green"]   { background: #6EE7B7; }
.note-color-dot[data-color="blue"]    { background: #93C5FD; }
.note-color-dot[data-color="pink"]    { background: #F9A8D4; }
.note-color-dot[data-color="purple"]  { background: #C4B5FD; }
.note-color-dot[data-color="orange"]  { background: #FED7AA; }

/* Note content (contenteditable) */
.note-content {
    flex: 1; padding: 6px 16px 14px;
    font-size: 13.5px; line-height: 1.75; color: var(--t2);
    outline: none; min-height: 60px;
    white-space: pre-wrap; word-break: break-word;
    cursor: text;
}
.note-content:empty::before {
    content: attr(data-placeholder);
    color: var(--t4); font-style: italic; pointer-events: none;
}
.note-content:focus { color: var(--t1); }

/* Card footer */
.note-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 16px 12px; border-top: 1px solid transparent;
    transition: border-color .15s;
}
.note-card:hover .note-footer { border-color: rgba(0,0,0,.06); }
[data-theme="dark"] .note-card:hover .note-footer { border-color: rgba(255,255,255,.06); }
.note-time { font-size: 11px; color: var(--t4); }
.note-saved-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--green); opacity: 0; transition: opacity .3s;
}
.note-saved-dot.visible { opacity: 1; }

/* ── Entry animation for tab content ── */
.dv-tab-content > * { animation: fadeIn .25s ease; }

/* ── Detail hover micro-interactions ── */
.dv-hero-icon { transition: transform .2s ease, box-shadow .2s ease; }
.dv-hero-icon:hover { transform: scale(1.06); box-shadow: var(--sh2); }
.dv-kpi { cursor: default; }
.dv-task-item { cursor: default; }
.dv-info-block { transition: box-shadow .2s, transform .2s; }
.dv-info-block:hover { box-shadow: var(--sh1); transform: translateY(-1px); }
.dv-details-card { transition: box-shadow .2s; }
.dv-details-card:hover { box-shadow: var(--sh1); }

/* ── Responsive ── */
@media (max-width: 1024px) {
    .detail-view { right: 0; top: 56px; }
    .dv-topbar, .dv-hero, .dv-status-bar, .dv-tabs-nav, .dv-tab-content { padding-right: 16px; padding-left: 16px; }
    .dv-tabs-nav { padding-right: 8px; padding-left: 8px; top: 56px; }
}
@media (max-width: 768px) {
    .dv-kpis { grid-template-columns: 1fr 1fr; }
    .dv-overview-grid { grid-template-columns: 1fr; }
    .dv-hero { flex-direction: column; align-items: flex-start; gap: 16px; }
    .dv-progress-ring-wrap { align-self: center; }
    .dv-topbar { flex-wrap: wrap; gap: 8px; }
    .dv-breadcrumb { display: none; }
    .dv-topbar-actions { width: 100%; justify-content: flex-end; }
    .dv-hero-name { font-size: 22px; }
    .dv-hero-icon { width: 56px; height: 56px; font-size: 28px; }
    .dv-edit-bar { flex-direction: column; align-items: flex-start; gap: 12px; }
    .dv-edit-bar-actions { width: 100%; justify-content: flex-end; display: flex; }
}

/* ===== DETAIL EDIT TAB ===== */
.dtab-edit { margin-inline-start: auto; color: var(--pr) !important; font-weight: 700; }
.dtab-edit.active { color: var(--pr) !important; border-bottom-color: var(--pr) !important; background: var(--pr-s); }

/* Action bar */
.dv-edit-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 0 20px; border-bottom: 1px solid var(--brd); margin-bottom: 24px;
}
.dv-edit-bar-title {
    display: flex; align-items: center; gap: 10px;
    font-size: 17px; font-weight: 800; color: var(--t1);
}
.dv-edit-bar-title::before {
    content: ''; width: 4px; height: 20px;
    background: var(--pr); border-radius: var(--rr);
}
.dv-edit-bar-actions { display: flex; gap: 10px; }

/* Two-column grid */
.dv-edit-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 20px;
    align-items: start;
}
.dv-edit-main, .dv-edit-side { display: flex; flex-direction: column; gap: 16px; }

/* Cards */
.dv-edit-card {
    background: var(--card);
    border: 1px solid var(--brd);
    border-radius: var(--r2);
    padding: 22px 24px;
    box-shadow: var(--sh1);
}

/* Override fg margin inside cards */
.dv-edit-card .fg { margin-bottom: 14px; }
.dv-edit-card .fg:last-child { margin-bottom: 0; }

/* Icon card */
.dv-edit-icon-card { text-align: center; }
.dv-edit-icon-center { display: flex; justify-content: center; padding: 16px 0 20px; }
.dv-edit-icon-ring {
    width: 100px; height: 100px; border-radius: 50%;
    background: var(--pr-s); border: 2px solid var(--brd-a);
    display: flex; align-items: center; justify-content: center;
    transition: transform .2s;
}
.dv-edit-icon-ring:hover { transform: scale(1.05); }
.dv-edit-icon-big {
    font-size: 52px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
}
.dv-edit-icon-toggle {
    width: 100%; padding: 10px 14px; margin-bottom: 0;
    background: var(--bg); border: 1.5px solid var(--brd); border-radius: var(--r);
    font-family: var(--ff); font-size: 13px; font-weight: 600; color: var(--t2);
    cursor: pointer; transition: all .18s; text-align: center;
}
.dv-edit-icon-toggle:hover { background: var(--pr-s); border-color: var(--brd-a); color: var(--pr); }
.dv-edit-icon-grid { max-height: 210px; overflow-y: auto; margin-top: 12px; }

/* Auto-computed task info */
.dv-edit-auto-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.dv-edit-auto-box {
    background: var(--bg); border: 1px dashed var(--brd2); border-radius: var(--r);
    padding: 12px 14px; display: flex; flex-direction: column; gap: 4px;
}
.dv-edit-auto-lbl { font-size: 11px; font-weight: 700; color: var(--t3); }
.dv-edit-auto-val { font-size: 13px; font-weight: 600; color: var(--t1); min-height: 18px; }
.dv-edit-auto-note { font-size: 10px; color: var(--t4); margin-top: 2px; }

/* ===== COMPLETED TASKS SECTION ===== */
.dv-completed-section { margin-top: 20px; border-top: 1px solid var(--brd); padding-top: 12px; }
.dv-completed-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: none; cursor: pointer; padding: 8px 4px; font-size: 13px; font-weight: 600; color: var(--t2); border-radius: var(--r); transition: background .15s; gap: 8px; }
.dv-completed-toggle:hover { background: var(--bg2); }
.dv-toggle-arrow { flex-shrink: 0; transition: transform .25s ease; }
.dv-completed-list .dv-task-item { opacity: .7; }
.dv-completed-list .dv-task-text { text-decoration: line-through; color: var(--t3); }

/* ===== LOADING SPIN ===== */
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.spin{animation:spin 1.2s linear infinite;display:inline-block}

/* ===== RESPONSIVE ===== */
@media(max-width:1024px){
    .sidebar{transform:translateX(100%)}
    .sidebar.open{transform:translateX(0)}
    body.sb-mini .sidebar{transform:translateX(100%);width:var(--sb-w)}
    .m-bar{display:flex}
    .main{margin-right:0 !important;padding-top:72px}
    .sb-toggle{display:none}
}
@media(max-width:900px){
    .kanban-board{grid-template-columns:1fr 1fr;overflow-x:visible}
    .dv-edit-grid{grid-template-columns:1fr}
}
@media(max-width:768px){
    .main{padding:68px 16px 40px}
    .top-bar{gap:8px}
    .search-wrap{max-width:none}
    .stats-row{grid-template-columns:1fr 1fr}
    .grid{grid-template-columns:1fr}
    .panel-toolbar{flex-direction:column;align-items:flex-start}
    .toolbar-right{width:100%}
    .filters-wrap{width:100%}
    .sel{flex:1;min-width:0}
    .fg2{grid-template-columns:1fr}
    .modal{max-height:95vh;border-radius:var(--r2)}
    .modal-foot{flex-direction:column;gap:10px;align-items:stretch}
    .modal-foot-start,.modal-actions{width:100%;justify-content:center}
    .kanban-board{grid-template-columns:1fr}
    .list-progress-col,.list-deadline,.list-health{display:none}
}
@media(max-width:480px){
    .stats-row{grid-template-columns:1fr 1fr}
    .stat-num{font-size:24px}
    .view-btns{display:none}
    .export-grid{grid-template-columns:1fr}
}

/* =============================================
   MOBILE ENHANCEMENTS
============================================= */

/* ── Touch targets ── */
@media(max-width:768px){
    button,
    .nav-link,
    .idea-act-icon-btn,
    .dv-status-btn,
    .dtab { min-height:44px }
    .idea-act-icon-btn { width:40px;height:40px }
}

/* ── Top bar on mobile ── */
@media(max-width:600px){
    .top-bar { flex-wrap:wrap; padding:10px 16px; gap:8px }
    .search-wrap { order:2; width:100%; max-width:none }
    .top-actions { order:1; margin-inline-start:auto }
    .btn-new span { display:none }  /* hide text, keep + icon */
}

/* ── Stats row ── */
@media(max-width:400px){
    .stats-row { grid-template-columns:1fr 1fr }
    .stat-card { padding:14px 12px }
    .stat-lbl { font-size:10px }
}

/* ── Ideas page ── */
@media(max-width:768px){
    .ideas-topbar { flex-wrap:wrap; gap:8px }
    .ideas-topbar h2 { width:100% }
    .ideas-search-wrap { flex:1; min-width:0 }
    .ideas-sort-sel { width:100% }
    .ideas-stats-bar { gap:6px }
    .ideas-stat-pill { padding:4px 10px; font-size:11px }
    .ideas-stat-pill span { font-size:14px }
    .ideas-add-extras .ideas-add-row { flex-direction:column }
    .ideas-grid { grid-template-columns:1fr }
}
@media(max-width:480px){
    .ideas-stats-bar { display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px }
    .ideas-stat-pill { justify-content:center }
}

/* ── Detail view tabs scrollable ── */
@media(max-width:768px){
    .dv-tabs-nav {
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
        flex-wrap:nowrap;
        gap:0;
    }
    .dv-tabs-nav::-webkit-scrollbar { display:none }
    .dtab { white-space:nowrap; flex-shrink:0; font-size:12px; padding:12px 12px }
    .dtab-badge { font-size:9px; padding:1px 5px }
    .dv-edit-grid { grid-template-columns:1fr }
    .dv-edit-auto-row { grid-template-columns:1fr }
    .dv-kpis { grid-template-columns:1fr 1fr }
}
@media(max-width:480px){
    .dv-kpis { grid-template-columns:1fr }
    .dv-hero-name { font-size:18px }
    .dv-overview-grid { grid-template-columns:1fr }
    .dtab { padding:12px 10px; font-size:11px }
}

/* ── Notes grid ── */
@media(max-width:600px){
    .notes-grid { columns:1 }
    .note-toolbar { opacity:1 }  /* always visible on mobile */
}

/* ── Idea edit form ── */
@media(max-width:600px){
    .ief-row { grid-template-columns:1fr }
    .idea-card-actions { opacity:1 }  /* always visible on mobile */
}

/* ── Modal full screen on small phones ── */
@media(max-width:480px){
    .modal-bg { align-items:flex-end }
    .modal {
        max-height:92vh;
        border-radius:var(--r2) var(--r2) 0 0;
        width:100%;
    }
}

/* ── Login screen ── */
@media(max-width:480px){
    .login-card { padding:36px 24px; border-radius:var(--r2) }
    .login-title { font-size:24px }
}

/* ── Prevent text size adjust on rotation ── */
html { -webkit-text-size-adjust:100% }