/*
 * MARKETING HUB — STYLES
 * Meal Time · v9.0
 *
 * CSS Variable naming:
 *   --g1..g4  = green shades (brand primary)
 *   --o, --ol = amber/orange
 *   --r, --rl = red
 *   --b, --bl = blue
 *   --p, --pl = purple
 *   --tk, --tl = sky/teal
 *   --f0..f900 = gray scale (f0=white, f900=near-black)
 *   --rad = border-radius
 *   --sh  = box-shadow
 */

/* ===== TOKENS ===== */
:root {
  --g1:#14532d; --g2:#22c55e; --g3:#dcfce7; --g4:#f0fdf4;
  --o:#f59e0b; --ol:#fef3c7;
  --r:#ef4444; --rl:#fef2f2;
  --b:#3b82f6; --bl:#eff6ff;
  --p:#8b5cf6; --pl:#f5f3ff;
  --tk:#0ea5e9; --tl:#f0f9ff;
  --f0:#fff; --f50:#fafbfc; --f100:#f3f4f6; --f200:#e5e7eb;
  --f300:#d1d5db;
  --f400:#71717a; /* darkened from #9ca3af → WCAG AA 4.56:1 on white */
  --f500:#6b7280; --f600:#4b5563; --f700:#374151; --f800:#1f2937; --f900:#111827;
  --rad:10px;
  --sh:0 1px 3px rgba(0,0,0,.06);
}

/* ===== RESET ===== */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--f100);color:var(--f900);line-height:1.5;font-size:13px;-webkit-font-smoothing:antialiased;overflow:hidden;height:100vh}
.app{display:flex;height:100vh}

/* ===== SIDEBAR ===== */
.sb{width:210px;background:var(--f900);color:#fff;display:flex;flex-direction:column;flex-shrink:0}
.sb-hd{padding:16px 14px 12px;border-bottom:1px solid var(--f700)}
.sb-hd h1{font-size:13px;font-weight:800;letter-spacing:-.3px;color:var(--g2)}
.sb-hd p{font-size:9px;opacity:.4;margin-top:2px;text-transform:uppercase;letter-spacing:.8px}
.sb-nav{flex:1;padding:8px 6px;overflow-y:auto}
.sb-item{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:8px;cursor:pointer;font-size:11.5px;font-weight:600;color:var(--f400);transition:all .15s;margin-bottom:1px;border:1px solid transparent}
.sb-item:hover{color:#fff;background:var(--f800)}
.sb-item.active{color:#fff;background:rgba(34,197,94,.15);border-color:rgba(34,197,94,.25)}
.sb-item.active .sb-icon{background:var(--g2);color:var(--f900)}
.sb-icon{width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:13px;background:var(--f800);flex-shrink:0;transition:all .15s}
.sb-ft{padding:10px 14px;border-top:1px solid var(--f700);font-size:9px;color:var(--f600);text-align:center}

/* ===== MAIN AREA ===== */
.mn{flex:1;overflow-y:auto;padding:0;display:flex;flex-direction:column}
.mn-hd{background:var(--f0);border-bottom:1px solid var(--f200);padding:14px 20px 12px;position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between}
.mn-hd-left h2{font-size:15px;font-weight:800;color:var(--f900);letter-spacing:-.3px}
.mn-hd-left p{font-size:11px;color:var(--f500);margin-top:1px}
.mn-body{padding:16px 20px;flex:1;overflow-y:auto}
.sec{display:none}
.sec.active{display:flex;flex-direction:column;height:100%}

/* ===== BUTTONS ===== */
.btn{padding:6px 14px;border-radius:7px;font-size:11px;font-weight:700;cursor:pointer;border:none;transition:all .15s;display:inline-flex;align-items:center;gap:5px}
.btn-primary{background:var(--g2);color:#fff}
.btn-primary:hover{background:#16a34a}
.btn-secondary{background:var(--f100);color:var(--f700);border:1px solid var(--f200)}
.btn-secondary:hover{background:var(--f200)}
.btn-danger{background:var(--rl);color:var(--r)}
.btn-danger:hover{background:#fecaca}
.btn-sm{padding:4px 10px;font-size:10px}
.btn-icon{width:28px;height:28px;padding:0;display:flex;align-items:center;justify-content:center;border-radius:6px;background:var(--f100);border:1px solid var(--f200);cursor:pointer;color:var(--f500);font-size:14px}
.btn-icon:hover{background:var(--g4);color:var(--g1);border-color:var(--g2)}

/* ===== TOOLBAR & FILTERS ===== */
.toolbar{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap;align-items:center}
.toolbar-right{margin-left:auto;display:flex;gap:6px;align-items:center}
.filter-bar{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.filter-bar select,.filter-bar input{padding:5px 10px;border-radius:6px;border:1px solid var(--f200);font-size:10px;font-weight:600;background:var(--f0);color:var(--f700);outline:none}
.filter-bar select:focus,.filter-bar input:focus{border-color:var(--g2)}
.filter-bar input{width:160px}

/* ===== COLLAPSIBLE CARDS ===== */
.cd{background:var(--f0);border-radius:var(--rad);margin-bottom:8px;box-shadow:var(--sh);border:1px solid var(--f200);overflow:hidden}
.ch{display:flex;align-items:center;gap:9px;padding:11px 14px;cursor:pointer;user-select:none;transition:background .1s}
.ch:hover{background:var(--f50)}
.ci{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}
.cd h3{font-size:12px;font-weight:800;flex:1;letter-spacing:-.2px}
.chv{width:16px;height:16px;display:flex;align-items:center;justify-content:center;transition:transform .2s;flex-shrink:0;color:var(--f300)}
.chv svg{width:11px;height:11px}
.cd.open .chv{transform:rotate(180deg);color:var(--g2)}
.cd-body{max-height:0;overflow:hidden;transition:max-height .3s ease}
.cd.open .cd-body{max-height:99999px}
.cd-inner{padding:0 14px 12px}
.cd h4{font-size:10px;font-weight:700;color:var(--f500);margin:10px 0 5px;text-transform:uppercase;letter-spacing:.5px}
.cd p,.cd li{font-size:11px;color:var(--f700);line-height:1.6}
.cd ul{padding-left:15px}
.cd li{margin-bottom:3px}
.cv{pointer-events:none}

/* ===== HIGHLIGHT BOX ===== */
.hl{background:linear-gradient(135deg,var(--g4),var(--f0));border:1.5px solid var(--g2);border-radius:var(--rad);padding:12px 14px;margin-bottom:12px;border-left:4px solid var(--g2)}
.hl h5{font-size:12px;font-weight:800;color:var(--g1);margin-bottom:3px}
.hl p{font-size:11px;color:var(--f700)}

/* ===== SUB-CARDS ===== */
.ic{background:var(--f50);border:1px solid var(--f200);border-left:3px solid var(--g2);border-radius:0 7px 7px 0;padding:8px 10px;margin-bottom:4px}
.ic h5{font-size:10px;font-weight:700;color:var(--f900);margin-bottom:2px}
.ic p{font-size:10px;color:var(--f500);line-height:1.5}
.ic.or{border-left-color:var(--o)}
.ic.bl{border-left-color:var(--b)}
.ic.pu{border-left-color:var(--p)}
.ic.rd{border-left-color:var(--r)}
.ic.tk{border-left-color:var(--tk)}

/* ===== CALENDAR ===== */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-day{background:var(--f0);border:1px solid var(--f200);border-radius:var(--rad);min-height:180px;display:flex;flex-direction:column;overflow:hidden}
.cal-day-head{padding:8px 10px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--f200);display:flex;align-items:center;justify-content:space-between;color:var(--f600)}
.cal-day-head .day-name{color:var(--f900)}
.cal-day-head .day-date{font-weight:600;color:var(--f400);font-size:10px}
.cal-day.today{border-color:var(--g2);border-width:2px}
.cal-day.today .cal-day-head{background:var(--g4);color:var(--g1)}
.cal-day-body{padding:6px;flex:1;display:flex;flex-direction:column;gap:4px}
.cal-item{background:var(--f50);border:1px solid var(--f200);border-left:3px solid var(--g2);border-radius:0 6px 6px 0;padding:6px 8px;cursor:pointer;transition:all .15s}
.cal-item:hover{background:var(--g4);border-color:var(--g2)}
.cal-item .cal-item-title{font-size:10px;font-weight:700;color:var(--f900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-item .cal-item-meta{font-size:10px;color:var(--f500);margin-top:2px;display:flex;gap:4px;align-items:center}
.cal-item .cal-tag{display:inline-block;padding:1px 5px;border-radius:10px;font-size:9px;font-weight:700}
.cal-tag-Informativo{background:var(--bl);color:#1e40af}
.cal-tag-Produto{background:var(--g3);color:var(--g1)}
.cal-tag-Entretenimento{background:var(--pl);color:#6d28d9}
.cal-tag-Venda{background:var(--ol);color:#92400e}
.cal-empty{display:flex;align-items:center;justify-content:center;flex:1;font-size:10px;color:var(--f400);font-style:italic}
.cal-add-btn{width:100%;padding:4px;border:1px dashed var(--f300);border-radius:6px;background:none;cursor:pointer;font-size:10px;color:var(--f400);transition:all .15s;margin-top:auto}
.cal-add-btn:hover{border-color:var(--g2);color:var(--g2);background:var(--g4)}

/* ===== GRIDS ===== */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.g4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:6px}
.gi{background:var(--f50);border:1px solid var(--f200);border-radius:7px;padding:9px}
.gi h5{font-size:10px;font-weight:700;color:var(--f600);margin-bottom:2px}
.gi p{font-size:10px;color:var(--f500);line-height:1.4}

/* ===== STATUS & PRIORITY ===== */
.st{display:inline-block;padding:2px 8px;border-radius:20px;font-size:10px;font-weight:700;cursor:pointer}
.st-plan{background:var(--f100);color:var(--f600)}
.st-progress{background:var(--bl);color:#1e40af}
.st-review{background:var(--ol);color:#92400e}
.st-done{background:var(--g3);color:var(--g1)}
.st-cancel{background:var(--rl);color:#991b1b}
.st-on{background:var(--g3);color:var(--g1);border:1px solid var(--g2)}
.pri{display:inline-block;padding:2px 7px;border-radius:4px;font-size:10px;font-weight:700}
.pri-crit{background:#fee2e2;color:#991b1b}
.pri-high{background:var(--ol);color:#92400e}
.pri-med{background:var(--bl);color:#1e40af}
.pri-low{background:var(--f100);color:var(--f600)}

/* ===== TAGS ===== */
.tg{display:inline-block;padding:2px 7px;border-radius:20px;font-size:9px;font-weight:700;margin:1px}
.tg-g{background:var(--g3);color:var(--g1)}
.tg-o{background:var(--ol);color:#92400e}
.tg-b{background:var(--bl);color:#1e40af}
.tg-p{background:var(--pl);color:#5b21b6}

/* ===== TABLES ===== */
.tw{overflow-x:auto;margin:5px 0;border-radius:7px;border:1px solid var(--f200)}
table{width:100%;border-collapse:collapse;font-size:10px}
th{background:var(--f50);color:var(--f600);font-weight:700;text-align:left;padding:7px 9px;font-size:10px;text-transform:uppercase;letter-spacing:.3px;border-bottom:2px solid var(--f200);white-space:nowrap}
td{padding:6px 9px;border-bottom:1px solid var(--f100);color:var(--f700);vertical-align:top}
tr:last-child td{border-bottom:none}
tr:nth-child(even) td{background:var(--f50)}
tr:hover td{background:var(--g4)}
tr.clickable{cursor:pointer}

/* ===== OP CARDS ===== */
.op-card{background:var(--f0);border:1px solid var(--f200);border-radius:var(--rad);padding:14px;margin-bottom:8px;transition:all .15s;position:relative}
.op-card:hover{box-shadow:0 2px 8px rgba(0,0,0,.08);border-color:var(--f300)}
.op-card-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:8px}
.op-card-title{font-size:13px;font-weight:800;color:var(--f900)}
.op-card-actions{display:flex;gap:4px}
.op-card-meta{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.op-card-fields{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.op-field{display:flex;flex-direction:column;gap:1px}
.op-field-label{font-size:10px;font-weight:700;color:var(--f400);text-transform:uppercase;letter-spacing:.4px}
.op-field-value{font-size:11px;color:var(--f700);padding:3px 0}

/* ===== KANBAN ===== */
.kanban{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:8px 0}
.kb-col{background:var(--f50);border:1px solid var(--f200);border-radius:10px;padding:8px;min-height:80px;transition:all .2s}
.kb-col-over{background:var(--g4);border-color:var(--g2);box-shadow:inset 0 0 0 2px var(--g2)}
.kb-item[draggable=true]{cursor:grab}
.kb-item[draggable=true]:active{cursor:grabbing}
.kb-col-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;padding:0 2px}
.kb-col h6{font-size:10px;font-weight:700;color:var(--f500);text-transform:uppercase;letter-spacing:.5px}
.kb-count{font-size:10px;font-weight:700;color:var(--f400);background:var(--f200);padding:1px 5px;border-radius:8px}
.kb-item{background:var(--f0);border:1px solid var(--f200);border-radius:6px;padding:7px 8px;margin-bottom:4px;cursor:pointer;transition:all .15s}
.kb-item:hover{border-color:var(--g2);box-shadow:0 1px 4px rgba(0,0,0,.08)}
.kb-item-title{font-size:10px;font-weight:700;color:var(--f900);margin-bottom:2px}
.kb-item-sub{font-size:10px;color:var(--f500)}

/* ===== METRIC CARDS ===== */
.mc{background:var(--f0);border:1px solid var(--f200);border-radius:var(--rad);padding:12px;text-align:center;position:relative;cursor:pointer;transition:all .15s}
.mc:hover{border-color:var(--g2);box-shadow:0 2px 6px rgba(0,0,0,.06)}
.mc .mv{font-size:20px;font-weight:800;color:var(--g1)}
.mc .ml{font-size:10px;color:var(--f500);margin-top:1px;text-transform:uppercase;letter-spacing:.3px}
.mc .mt{font-size:10px;color:var(--f400);margin-top:3px}
.mc.warn .mv{color:var(--o)}
.mc.danger .mv{color:var(--r)}
.mc.info .mv{color:var(--b)}

/* ===== QUOTE ===== */
.quote{border-left:3px solid var(--g2);padding:7px 12px;margin:6px 0;background:var(--g4);border-radius:0 7px 7px 0;font-style:italic;font-size:10px;color:var(--g1);line-height:1.5}

/* ===== ALERT ===== */
.al{background:var(--rl);border:1px solid #fca5a5;border-radius:7px;padding:8px 10px;margin-bottom:4px}
.al h5{font-size:10px;font-weight:700;color:#991b1b;margin-bottom:2px}
.al p{font-size:10px;color:#991b1b;line-height:1.4}

/* ===== SUB-TABS ===== */
.stabs{display:flex;gap:3px;margin-bottom:12px;border-bottom:2px solid var(--f200);padding-bottom:0}
.stab{padding:7px 14px;font-size:10px;font-weight:700;cursor:pointer;color:var(--f500);border:none;background:none;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .15s}
.stab:hover{color:var(--f900)}
.stab.active{color:var(--g1);border-bottom-color:var(--g2)}
.ssec{display:none}
.ssec.active{display:block}

/* ===== EMPTY STATE ===== */
.empty{text-align:center;padding:30px 20px;color:var(--f400)}
.empty-icon{font-size:28px;margin-bottom:6px}
.empty-text{font-size:11px;margin-bottom:10px}

/* ===== MODAL ===== */
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:1000;display:none;align-items:center;justify-content:center;backdrop-filter:blur(2px)}
.modal-overlay.show{display:flex}
.modal{background:var(--f0);border-radius:14px;width:560px;max-width:92vw;max-height:85vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.2)}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 12px;border-bottom:1px solid var(--f200)}
.modal-head h3{font-size:14px;font-weight:800}
.modal-close{width:28px;height:28px;border-radius:6px;border:none;background:var(--f100);cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;color:var(--f500)}
.modal-close:hover{background:var(--rl);color:var(--r)}
.modal-body{padding:16px 20px;overflow-y:auto;flex:1}
.modal-foot{padding:12px 20px;border-top:1px solid var(--f200);display:flex;justify-content:flex-end;gap:8px}

/* ===== FORMS ===== */
.form-row{margin-bottom:10px}
.form-row label{display:block;font-size:10px;font-weight:700;color:var(--f500);text-transform:uppercase;letter-spacing:.4px;margin-bottom:3px}
.form-row input,.form-row select,.form-row textarea{width:100%;padding:7px 10px;border:1px solid var(--f200);border-radius:7px;font-size:11px;font-family:inherit;color:var(--f900);background:var(--f0);outline:none;transition:border .15s}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{border-color:var(--g2);box-shadow:0 0 0 3px rgba(34,197,94,.1)}
.form-row textarea{min-height:60px;resize:vertical}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.form-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}

/* ===== CHECKLIST ===== */
.chk{display:flex;align-items:center;gap:7px;padding:6px 0;border-bottom:1px solid var(--f100);font-size:10px;color:var(--f700)}
.chk:last-child{border-bottom:none}
.chk-box{width:15px;height:15px;border:2px solid var(--f300);border-radius:4px;flex-shrink:0;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:9px;color:transparent;transition:.15s}
.chk-box.done{background:var(--g2);border-color:var(--g2);color:#fff}
.chk-text.done-text{text-decoration:line-through;color:var(--f400)}

/* ===== COUNT BADGE ===== */
.count-badge{background:var(--g2);color:#fff;padding:1px 7px;border-radius:10px;font-size:10px;font-weight:700;margin-left:6px}

/* ===== LOGIN OVERLAY ===== */
.login-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--f900);z-index:2000;display:none;align-items:center;justify-content:center}
.login-overlay.show{display:flex}
.login-box{background:var(--f0);border-radius:16px;padding:32px;width:340px;max-width:90vw;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.login-box h2{font-size:16px;font-weight:800;color:var(--g1);margin-bottom:4px}
.login-box p{font-size:11px;color:var(--f500);margin-bottom:20px}
.login-box input{width:100%;padding:10px 14px;border:1px solid var(--f200);border-radius:8px;font-size:13px;outline:none;margin-bottom:10px}
.login-box input:focus{border-color:var(--g2);box-shadow:0 0 0 3px rgba(34,197,94,.1)}
.login-box .btn{width:100%;justify-content:center;padding:10px;font-size:13px}
.login-error{color:var(--r);font-size:11px;font-weight:600;margin-top:8px;min-height:18px}

/* ===== TOAST ===== */
.toast{position:fixed;bottom:20px;right:20px;padding:10px 18px;border-radius:8px;font-size:11px;font-weight:600;color:#fff;z-index:3000;opacity:0;transform:translateY(10px);transition:all .3s;pointer-events:none}
.toast.show{opacity:1;transform:translateY(0)}
.toast-success{background:var(--g1)}
.toast-error{background:#991b1b}
.toast-warning{background:#92400e}

/* ===== CONFIRM DIALOG ===== */
.confirm-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:2500;display:none;align-items:center;justify-content:center;backdrop-filter:blur(2px)}
.confirm-overlay.show{display:flex}
.confirm-box{background:var(--f0);border-radius:12px;padding:24px;width:360px;max-width:90vw;box-shadow:0 16px 48px rgba(0,0,0,.2)}
.confirm-box p{font-size:13px;color:var(--f700);margin-bottom:18px;line-height:1.5}
.confirm-actions{display:flex;gap:8px;justify-content:flex-end}

/* ===== DASHBOARD METRICS ===== */
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin-bottom:14px}
.metric{background:var(--f0);border:1px solid var(--f200);border-radius:var(--rad);padding:12px 14px;position:relative;overflow:hidden;transition:all .2s}
.metric:hover{border-color:var(--g2);box-shadow:0 2px 8px rgba(34,197,94,.1)}
.metric-value{font-size:22px;font-weight:800;color:var(--g1);line-height:1}
.metric-label{font-size:10px;color:var(--f500);margin-top:3px;text-transform:uppercase;letter-spacing:.3px;font-weight:600}
.metric-sub{font-size:10px;color:var(--f400);margin-top:2px}
.metric-icon{position:absolute;top:10px;right:12px;font-size:18px;opacity:.3}
.metric.warn .metric-value{color:var(--o)}
.metric.info .metric-value{color:var(--b)}
.metric.accent .metric-value{color:var(--p)}

/* ===== FORM SECTIONS ===== */
.form-section{margin:16px 0 10px;padding-top:14px;border-top:1.5px solid var(--f200)}
.form-section:first-child{margin-top:0;padding-top:0;border-top:none}
.form-section-title{font-size:11px;font-weight:800;color:var(--f700);text-transform:uppercase;letter-spacing:.4px;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.form-section-title span{font-size:14px}
.form-hint{font-size:10px;color:var(--f400);font-weight:400;margin-left:4px;text-transform:none;letter-spacing:0}
.required::after{content:" *";color:var(--r);font-weight:700}

/* ===== MICRO-INTERACTIONS ===== */
.btn:active{transform:scale(.97)}
*:focus-visible{outline:2px solid var(--g2);outline-offset:2px;border-radius:4px}
.kb-item{transition:all .2s}
.kb-item:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.1)}
.op-card{transition:all .2s}
.op-card:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,.08)}
.cd{transition:box-shadow .2s}
.cd:hover{box-shadow:0 2px 12px rgba(0,0,0,.06)}
.cal-item{transition:all .2s}
.cal-item:hover{transform:translateY(-1px)}

/* ===== SIDEBAR SEPARATOR ===== */
.sb-sep{height:1px;background:var(--f700);margin:8px 10px;opacity:.5}

/* ===== PROGRESS BAR ===== */
.progress-bar{background:var(--f200);border-radius:6px;height:6px;overflow:hidden;margin-top:4px}
.progress-fill{height:100%;border-radius:6px;background:linear-gradient(90deg,var(--g2),#16a34a);transition:width .4s ease}

/* ===== FORM GRID 4-COL ===== */
.form-grid-4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:8px}

/* ===== MOBILE HEADER (hidden on desktop) ===== */
.mobile-hd{display:none}

/* ===== RESPONSIVE ===== */

/* --- Tablet landscape --- */
@media(max-width:1200px){
  .kanban{grid-template-columns:repeat(3,1fr)}
  .cal-grid{grid-template-columns:repeat(4,1fr)}
}

/* --- Tablet portrait --- */
@media(max-width:900px){
  .kanban{grid-template-columns:repeat(2,1fr)}
  .cal-grid{grid-template-columns:repeat(3,1fr)}
  .g3,.g4{grid-template-columns:1fr 1fr}
  .form-grid-3{grid-template-columns:1fr 1fr}
  .form-grid-4{grid-template-columns:1fr 1fr}
}

/* --- Mobile: sidebar → bottom nav --- */
@media(max-width:768px){
  body{overflow:auto;height:auto;min-height:100vh;min-height:100dvh}
  .app{flex-direction:column;height:100vh;height:100dvh}

  /* Mobile top header */
  .mobile-hd{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:var(--f900);color:#fff;position:sticky;top:0;z-index:91;border-bottom:1px solid var(--f700);min-height:44px;flex-shrink:0}
  .mobile-hd-brand{font-size:13px;font-weight:800;letter-spacing:-.3px;color:var(--g2)}
  .mobile-hd-brand small{font-size:9px;color:var(--f500);font-weight:400;letter-spacing:.5px;margin-left:6px;text-transform:uppercase}
  .mobile-hd-user{font-size:10px;color:var(--f500);display:flex;align-items:center;gap:8px}
  .mobile-hd-user span{font-weight:600;color:var(--f300)}
  .mobile-hd-user a{color:var(--r);text-decoration:none;font-weight:700;font-size:10px;padding:4px 10px;border:1px solid var(--r);border-radius:6px;transition:all .15s}
  .mobile-hd-user a:active{background:var(--r);color:#fff}

  /* Sidebar → fixed bottom nav */
  .sb{order:2;width:100%;height:auto;flex-direction:row;position:fixed;bottom:0;left:0;right:0;z-index:100;border-top:1px solid var(--f700);padding-bottom:env(safe-area-inset-bottom,0);box-shadow:0 -2px 10px rgba(0,0,0,.15)}
  .sb-hd,.sb-ft,.sb-sep{display:none}
  .sb-nav{display:flex;flex-direction:row;padding:2px 0;justify-content:space-around;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .sb-item{flex-direction:column;gap:2px;padding:8px 2px 6px;margin:0;border-radius:0;flex:1;min-width:0;justify-content:center;align-items:center;border:none}
  .sb-item:hover{background:transparent}
  .sb-item span{display:block;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:none;text-align:center}
  .sb-icon{width:24px;height:24px;font-size:13px;background:transparent;border-radius:6px}
  .sb-item.active{background:rgba(34,197,94,.1)}
  .sb-item.active .sb-icon{background:var(--g2);color:var(--f900)}

  /* Main area */
  .mn{order:1;flex:1;padding-bottom:76px;overflow-y:auto}
  .sec.active{height:auto;min-height:0}
  .mn-body{overflow:visible}
  .mn-hd{position:sticky;top:44px;z-index:50;flex-direction:column;gap:8px;align-items:stretch;padding:12px 16px 10px;box-shadow:0 1px 4px rgba(0,0,0,.06)}
  .mn-hd-left h2{font-size:15px}
  .mn-hd>div:last-child{width:100%;display:flex;flex-wrap:wrap;gap:6px}
  .mn-hd>div:last-child .btn{flex:1;justify-content:center}
  .mn-hd>div:last-child select,.mn-hd>div:last-child input{flex:1;min-width:0}
  .mn-body{padding:12px 14px}

  /* Metrics */
  .metrics{grid-template-columns:repeat(2,1fr)}
  .metric{padding:10px}
  .metric-value{font-size:18px}
  .metric:nth-child(odd):last-child{grid-column:1/-1}

  /* Grids */
  .kanban{grid-template-columns:1fr}
  .cal-grid{grid-template-columns:1fr 1fr}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .form-grid-3,.form-grid-4{grid-template-columns:1fr 1fr}
  .op-card-fields{grid-template-columns:1fr}

  /* Calendar */
  .cal-day{min-height:100px}
  .cal-day-head{padding:6px 8px}
  .cal-item{padding:6px 8px}
  .cal-item .cal-item-title{font-size:11px;white-space:normal}
  .cal-add-btn{padding:8px;font-size:11px;min-height:36px}

  /* Modal → full screen on mobile */
  .modal{width:100%;max-width:100vw;max-height:100vh;max-height:100dvh;height:100%;border-radius:0}
  .modal-head{padding:14px 16px 10px}
  .modal-head h3{font-size:16px}
  .modal-body{padding:14px 16px}
  .modal-foot{padding:12px 16px}

  /* Toolbar & filters */
  .toolbar{flex-direction:column;gap:8px}
  .toolbar-right{margin-left:0;width:100%}
  .filter-bar{display:grid;grid-template-columns:1fr 1fr;gap:6px;width:100%}
  .filter-bar select,.filter-bar input{width:100%;padding:8px 12px;font-size:12px}
  .filter-bar input{grid-column:1/-1}

  /* Sub-tabs scrollable */
  .stabs{overflow-x:auto;-webkit-overflow-scrolling:touch;gap:0;flex-wrap:nowrap;padding-bottom:0}
  .stab{white-space:nowrap;flex-shrink:0;padding:8px 14px;font-size:11px}

  /* Tables */
  .tw{-webkit-overflow-scrolling:touch}
  table{font-size:11px}
  th,td{padding:8px 10px}

  /* Cards */
  .cd h3{font-size:12px}
  .ch{padding:10px 12px;gap:8px}
  .ci{width:26px;height:26px}
  .cd-inner{padding:0 12px 10px}

  /* OP cards */
  .op-card{padding:12px}
  .op-card-title{font-size:13px}

  /* Kanban */
  .kb-col{padding:8px}
  .kb-item{padding:10px}
  .kb-item-title{font-size:11px}

  /* Touch-friendly sizes */
  .btn{padding:8px 16px;font-size:12px;min-height:38px}
  .btn-sm{padding:6px 12px;font-size:11px;min-height:34px}
  .btn-icon{width:36px;height:36px}
  .st{padding:3px 10px;font-size:11px}
  .tg{padding:3px 8px;font-size:10px}
  .pri{padding:3px 8px;font-size:10px}

  /* Form inputs bigger touch targets */
  .form-row input,.form-row select,.form-row textarea{padding:10px 12px;font-size:13px}
  .form-row label{font-size:11px;margin-bottom:4px}
  .form-row{margin-bottom:12px}

  /* Login → full screen */
  .login-overlay{align-items:stretch}
  .login-box{width:100%;max-width:100%;border-radius:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;justify-content:center;padding:24px 20px}
  .login-box h2{font-size:22px;margin-bottom:6px}
  .login-box p{font-size:13px;margin-bottom:24px}
  .login-box input{padding:14px 16px;font-size:15px;margin-bottom:12px;border-radius:10px}
  .login-box .btn{padding:14px;font-size:15px;border-radius:10px}
  .login-error{font-size:12px;margin-top:10px}

  /* User modal on mobile */
  #user-modal-overlay .login-box{width:100% !important;border-radius:0 !important;min-height:100vh !important;min-height:100dvh !important;justify-content:flex-start;padding-top:60px !important}

  /* Confirm dialog */
  .confirm-box{width:92vw;max-width:360px;padding:20px}
  .confirm-box p{font-size:14px}

  /* Highlight & quote */
  .hl{padding:10px 12px}
  .hl h5{font-size:13px}
  .quote{padding:8px 12px;font-size:11px}

  /* Checklist bigger touch targets */
  .chk{padding:10px 0}
  .chk-box{width:22px;height:22px;font-size:12px;border-radius:5px}
  .chk-text{font-size:12px}

  /* Metric cards */
  .mc{padding:10px}
  .mc .mv{font-size:18px}

  /* Inner sub-cards */
  .ic{padding:10px 12px}
  .ic h5{font-size:11px}
  .ic p{font-size:11px}

  /* Grid items */
  .gi{padding:10px}
  .gi h5{font-size:11px}
  .gi p{font-size:11px}

  /* Ideas filter bar */
  #org-ideas>div:first-child{flex-direction:column!important;align-items:stretch!important;gap:8px}
  #org-ideas>div:first-child>div{justify-content:stretch}
  #org-ideas>div:first-child select{width:100%}

  /* Toast positioning */
  .toast{left:16px;right:16px;bottom:80px;text-align:center}

  /* Empty state */
  .empty{padding:40px 20px}
  .empty-icon{font-size:32px}
  .empty-text{font-size:13px}

  /* Kanban filter */
  #org-pipeline>div:first-child select{width:100%;padding:8px 12px;font-size:12px}
}

/* --- Small phone --- */
@media(max-width:480px){
  .cal-grid{grid-template-columns:1fr}
  .cal-day{min-height:80px}
  .mn-hd-left h2{font-size:14px}
  .mn-hd-left p{font-size:10px}
  .mn-body{padding:10px 12px}
  .modal-body{padding:12px 14px}
  .mobile-hd{padding:8px 12px}

  /* Bottom nav tighter */
  .sb-item span{font-size:8px;max-width:58px}
  .sb-icon{width:22px;height:22px;font-size:12px}
  .sb-item{padding:6px 2px 4px}

  /* Metrics smaller */
  .metrics{gap:6px}
  .metric{padding:8px}
  .metric-value{font-size:16px}
  .metric-label{font-size:9px}
  .metric-icon{font-size:15px}

  /* Form grids: keep 2-col for selects even on small phones */
  .form-grid-3{grid-template-columns:1fr}
  .form-grid-4{grid-template-columns:1fr 1fr}

  /* Filter bar stays 2-col on small phones */
  .filter-bar{grid-template-columns:1fr 1fr}

  /* Smaller headings */
  .cd h3{font-size:11px}
  .ci{width:22px;height:22px;font-size:11px}

  /* Login adjustments */
  .login-box{padding:20px 16px}
  .login-box input{padding:12px 14px;font-size:14px}

  /* Confirm */
  .confirm-box{width:94vw}
}