/* ───────────────────────────── Reset & Base ───────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --c-bg:#0b0e14; --c-surface:#111520; --c-surface2:#171c2b;
  --c-border:#1f2840; --c-border2:#2a3352;
  --c-text:#d0d8f0; --c-text-dim:#6a7699; --c-text-muted:#3d4a6b;
  --c-accent:#2e73f8; --c-accent-d:#1a4db5;
  --c-green:#22c55e; --c-green-bg:rgba(34,197,94,.1);
  --c-yellow:#eab308; --c-yellow-bg:rgba(234,179,8,.1);
  --c-red:#ef4444; --c-red-bg:rgba(239,68,68,.1);
  --c-orange:#f97316; --c-orange-bg:rgba(249,115,22,.1);
  --c-blue:#38bdf8; --c-blue-bg:rgba(56,189,248,.1);
  --radius:6px; --radius-lg:10px; --shadow:0 2px 12px rgba(0,0,0,.4);
}
html{font-size:14px;}
body{background:var(--c-bg);color:var(--c-text);font-family:'Segoe UI',system-ui,-apple-system,sans-serif;line-height:1.5;min-height:100vh;}

/* ── Header ─────────────────────────────────────────────────────────────── */
.site-header{background:var(--c-surface);border-bottom:1px solid var(--c-border);position:sticky;top:0;z-index:100;box-shadow:0 2px 16px rgba(0,0,0,.5);}
.header-inner{max-width:1600px;margin:0 auto;padding:0 24px;height:60px;display:flex;align-items:center;justify-content:space-between;}
.brand{display:flex;align-items:center;gap:14px;}
.brand-logo{width:40px;height:40px;border-radius:var(--radius);background:linear-gradient(135deg,var(--c-accent),#6366f1);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;letter-spacing:.5px;color:#fff;box-shadow:0 0 16px rgba(46,115,248,.3);}
.brand-text{display:flex;flex-direction:column;}
.brand-name{font-size:15px;font-weight:700;color:#fff;letter-spacing:.3px;}
.brand-sub{font-size:11px;color:var(--c-text-dim);letter-spacing:.5px;text-transform:uppercase;}
.header-meta{display:flex;align-items:center;gap:16px;}
.classification{font-size:10px;font-weight:700;letter-spacing:1.5px;color:var(--c-yellow);background:var(--c-yellow-bg);border:1px solid rgba(234,179,8,.25);padding:3px 10px;border-radius:3px;}
.date-display{font-size:12px;color:var(--c-text-dim);}
.refresh-btn{width:30px;height:30px;border-radius:var(--radius);background:var(--c-surface2);border:1px solid var(--c-border2);display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;color:var(--c-text-dim);transition:all .2s;}
.refresh-btn:hover{color:var(--c-accent);border-color:var(--c-accent);}

/* ── Tabs ──────────────────────────────────────────────────────────────── */
.tab-nav{background:var(--c-surface);border-bottom:1px solid var(--c-border);display:flex;align-items:center;padding:0 24px;max-width:1600px;margin:0 auto;gap:4px;}
.tab-btn{padding:14px 20px;background:none;border:none;border-bottom:2px solid transparent;color:var(--c-text-dim);font-size:13px;font-weight:600;cursor:pointer;letter-spacing:.3px;transition:all .2s;white-space:nowrap;}
.tab-btn:hover{color:var(--c-text);}
.tab-btn.active{color:var(--c-accent);border-bottom-color:var(--c-accent);}
.tab-spacer{flex:1;}
.last-updated{font-size:11px;color:var(--c-text-muted);}

/* ── Layout ────────────────────────────────────────────────────────────── */
.main-content{max-width:1600px;margin:0 auto;padding:28px 24px 60px;}
.section{margin-bottom:36px;}
.section-title{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--c-text-dim);margin-bottom:14px;display:flex;align-items:center;gap:10px;}
.section-title::after{content:'';flex:1;height:1px;background:var(--c-border);}

/* ── KPI Cards ─────────────────────────────────────────────────────────── */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;}
.kpi-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-lg);padding:20px;display:flex;flex-direction:column;gap:8px;position:relative;overflow:hidden;transition:border-color .2s,box-shadow .2s,transform .15s;}
.kpi-card.clickable{cursor:pointer;}
.kpi-card.clickable:hover{border-color:var(--c-accent);box-shadow:0 0 16px rgba(46,115,248,.15);transform:translateY(-1px);}
.kpi-label{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--c-text-dim);}
.kpi-value{font-size:32px;font-weight:800;line-height:1;letter-spacing:-1px;}
.kpi-sub{font-size:11px;color:var(--c-text-dim);}
.kpi-bar-wrap{height:4px;background:var(--c-border);border-radius:2px;overflow:hidden;margin-top:4px;}
.kpi-bar{height:100%;border-radius:2px;transition:width .6s ease;}
.kpi-green{color:var(--c-green);} .kpi-yellow{color:var(--c-yellow);} .kpi-red{color:var(--c-red);} .kpi-blue{color:var(--c-blue);} .kpi-white{color:#fff;}
.bar-green{background:var(--c-green);} .bar-yellow{background:var(--c-yellow);} .bar-red{background:var(--c-red);} .bar-blue{background:var(--c-accent);}

/* Donut chart KPI */
.kpi-donut-card .kpi-donut-wrap{position:relative;display:flex;align-items:center;justify-content:center;height:84px;}
.kpi-donut-label{position:absolute;font-size:18px;font-weight:800;letter-spacing:-.5px;}

/* Pulse indicators */
.kpi-pulse{width:8px;height:8px;border-radius:50%;background:var(--c-yellow);animation:pulse-anim 1.8s ease-in-out infinite;position:absolute;top:14px;right:14px;}
.kpi-pulse-red{background:var(--c-red);}
@keyframes pulse-anim{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(1.6);opacity:.5;}}

/* Tooltip */
[data-tooltip]{position:relative;}
[data-tooltip]:hover::after{content:attr(data-tooltip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:#1a2236;border:1px solid var(--c-border2);color:var(--c-text);font-size:11px;padding:4px 8px;border-radius:4px;white-space:nowrap;z-index:500;pointer-events:none;font-weight:400;letter-spacing:0;}

/* ── Program Cards ─────────────────────────────────────────────────────── */
.programs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:20px;}
.program-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-lg);overflow:hidden;transition:border-color .2s,box-shadow .2s;}
.program-card:hover{border-color:var(--c-border2);box-shadow:0 4px 20px rgba(0,0,0,.3);}
.program-header{padding:16px 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--c-border);background:var(--c-surface2);}
.program-title-area{display:flex;align-items:center;gap:10px;cursor:pointer;flex:1;transition:opacity .15s;}
.program-title-area:hover{opacity:.85;}
.program-title{font-size:15px;font-weight:700;color:#fff;}
.program-type-badge{font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;padding:3px 8px;border-radius:3px;background:var(--c-blue-bg);color:var(--c-blue);border:1px solid rgba(56,189,248,.2);}
.program-header-right{display:flex;align-items:center;gap:8px;}
.program-body{padding:16px 20px;}
.prog-stats{display:flex;gap:24px;margin-bottom:16px;}
.prog-stat{display:flex;flex-direction:column;gap:2px;}
.prog-stat-label{font-size:10px;color:var(--c-text-dim);text-transform:uppercase;letter-spacing:.7px;}
.prog-stat-value{font-size:20px;font-weight:700;color:#fff;}
.prog-progress{margin-bottom:16px;}
.prog-progress-label{display:flex;justify-content:space-between;font-size:11px;color:var(--c-text-dim);margin-bottom:6px;}
.progress-bar-wrap{height:6px;background:var(--c-border);border-radius:3px;overflow:hidden;}
.progress-bar{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--c-green),#16a34a);transition:width .6s ease;}

/* ── Batch table ───────────────────────────────────────────────────────── */
.batch-table{width:100%;border-collapse:collapse;}
.batch-table th{font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--c-text-dim);padding:6px 8px;text-align:left;border-bottom:1px solid var(--c-border);}
.batch-table td{padding:8px 8px;font-size:12px;border-bottom:1px solid var(--c-border);}
.batch-table tr:last-child td{border-bottom:none;}
.clickable-row{cursor:pointer;transition:background .15s;}
.batch-table .clickable-row:hover td{background:rgba(46,115,248,.06);}
.row-has-blocker td:first-child{border-left:2px solid var(--c-red);}
.row-critical{animation:row-pulse 2.5s ease-in-out infinite;}
@keyframes row-pulse{0%,100%{background:transparent;}50%{background:rgba(239,68,68,.04);}}

.status-pill{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;letter-spacing:.5px;padding:3px 8px;border-radius:3px;}
.status-pill::before{content:'●';font-size:8px;}
.pill-green{background:var(--c-green-bg);color:var(--c-green);border:1px solid rgba(34,197,94,.2);}
.pill-yellow{background:var(--c-yellow-bg);color:var(--c-yellow);border:1px solid rgba(234,179,8,.2);}
.pill-red{background:var(--c-red-bg);color:var(--c-red);border:1px solid rgba(239,68,68,.2);}
.pill-blue{background:var(--c-blue-bg);color:var(--c-blue);border:1px solid rgba(56,189,248,.2);}
.pill-gray{background:rgba(255,255,255,.05);color:var(--c-text-dim);border:1px solid var(--c-border2);}

/* ── Timeline chart ────────────────────────────────────────────────────── */
.timeline-chart-wrap{width:100%;margin:16px 0 4px;padding:4px 0;}
.timeline-chart-wrap canvas{display:block;}

/* ── Team section ──────────────────────────────────────────────────────── */
.team-section{margin-top:18px;padding-top:14px;border-top:1px solid var(--c-border);}
.team-section-title{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--c-text-dim);margin-bottom:12px;}
.team-row{display:flex;flex-wrap:wrap;gap:12px;}
.team-member{display:flex;align-items:center;gap:9px;}
.avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0;}
.team-member-info{display:flex;flex-direction:column;}
.team-member-name{font-size:12px;font-weight:600;color:var(--c-text);}
.team-member-role{font-size:10px;color:var(--c-text-dim);}

/* ── BOM section ───────────────────────────────────────────────────────── */
.bom-section{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-top:14px;padding:10px 12px;background:var(--c-surface2);border:1px solid var(--c-border);border-radius:var(--radius);font-size:11px;}
.bom-info{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.bom-revision{color:var(--c-text);font-weight:600;}
.bom-updated{color:var(--c-text-dim);}
.bom-pending-badge{background:var(--c-orange-bg);color:var(--c-orange);border:1px solid rgba(249,115,22,.25);font-size:10px;font-weight:700;padding:2px 7px;border-radius:3px;}
.bom-request-btn{padding:5px 12px;background:transparent;border:1px solid var(--c-border2);border-radius:var(--radius);color:var(--c-text-dim);font-size:11px;font-weight:600;cursor:pointer;transition:all .18s;white-space:nowrap;}
.bom-request-btn:hover{border-color:var(--c-accent);color:var(--c-accent);background:rgba(46,115,248,.08);}

/* ── Gaps Table ────────────────────────────────────────────────────────── */
.gaps-table-wrap{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-lg);overflow:hidden;}
.gaps-table{width:100%;border-collapse:collapse;}
.gaps-table th{font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--c-text-dim);padding:12px 16px;text-align:left;background:var(--c-surface2);border-bottom:1px solid var(--c-border);}
.gaps-table td{padding:12px 16px;font-size:12px;border-bottom:1px solid var(--c-border);vertical-align:top;}
.gaps-table tr:last-child td{border-bottom:none;}
.gaps-table .clickable-row:hover td{background:rgba(46,115,248,.05);cursor:pointer;}
.gap-title{font-weight:600;color:var(--c-text);margin-bottom:2px;}
.gap-impact{font-size:11px;color:var(--c-text-dim);}
.sev-critical{background:var(--c-red-bg);color:var(--c-red);border:1px solid rgba(239,68,68,.25);font-size:10px;font-weight:800;letter-spacing:1px;padding:3px 8px;border-radius:3px;text-transform:uppercase;}
.sev-high{background:var(--c-orange-bg);color:var(--c-orange);border:1px solid rgba(249,115,22,.25);font-size:10px;font-weight:800;letter-spacing:1px;padding:3px 8px;border-radius:3px;text-transform:uppercase;}
.sev-medium{background:var(--c-yellow-bg);color:var(--c-yellow);border:1px solid rgba(234,179,8,.25);font-size:10px;font-weight:800;letter-spacing:1px;padding:3px 8px;border-radius:3px;text-transform:uppercase;}

/* ── Budget section ────────────────────────────────────────────────────── */
.budget-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;}
.budget-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-lg);padding:16px;transition:border-color .2s,box-shadow .2s,transform .15s;cursor:pointer;}
.budget-card:hover{border-color:var(--c-border2);box-shadow:0 4px 16px rgba(0,0,0,.25);transform:translateY(-1px);}
.budget-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;}
.budget-prog-name{font-size:13px;font-weight:600;color:var(--c-text);}
.budget-pct{font-size:16px;font-weight:800;}
.budget-amounts{display:flex;justify-content:space-between;font-size:11px;color:var(--c-text-dim);}
.budget-total{color:var(--c-text-muted);}

/* ── Action Items ──────────────────────────────────────────────────────── */
.actions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;}
.action-card{background:var(--c-surface);border:1px solid var(--c-border);border-left:3px solid var(--c-border);border-radius:var(--radius-lg);padding:16px;cursor:pointer;transition:box-shadow .2s,transform .15s;}
.action-card:hover{box-shadow:0 2px 16px rgba(0,0,0,.3);transform:translateY(-1px);}
.action-card.urgent{border-left-color:var(--c-red);}
.action-card.important{border-left-color:var(--c-orange);}
.action-card.normal{border-left-color:var(--c-yellow);}
.action-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.action-title{font-size:13px;font-weight:600;color:#fff;}
.action-meta{font-size:11px;color:var(--c-text-dim);}
.action-due{font-size:10px;font-weight:700;letter-spacing:.5px;padding:2px 7px;border-radius:3px;}
.due-urgent{background:var(--c-red-bg);color:var(--c-red);}
.due-important{background:var(--c-orange-bg);color:var(--c-orange);}
.due-normal{background:var(--c-yellow-bg);color:var(--c-yellow);}

/* ── Alert Banner ──────────────────────────────────────────────────────── */
.alert-banner{display:flex;align-items:center;gap:14px;background:rgba(239,68,68,.07);border:1px solid rgba(239,68,68,.2);border-radius:var(--radius-lg);padding:14px 18px;margin-bottom:28px;}
.alert-icon{font-size:20px;flex-shrink:0;}
.alert-text{flex:1;}
.alert-text strong{color:var(--c-red);font-size:13px;}
.alert-text p{font-size:12px;color:var(--c-text-dim);margin-top:2px;}
.alert-dismiss-btn{background:transparent;border:1px solid rgba(239,68,68,.3);color:var(--c-red);border-radius:var(--radius);padding:4px 8px;cursor:pointer;font-size:12px;transition:all .18s;flex-shrink:0;}
.alert-dismiss-btn:hover{background:var(--c-red-bg);}

/* ── ERP section ───────────────────────────────────────────────────────── */
.erp-sync-badge{font-size:10px;font-weight:600;color:var(--c-green);background:var(--c-green-bg);border:1px solid rgba(34,197,94,.2);padding:2px 8px;border-radius:3px;letter-spacing:.3px;text-transform:none;}
.erp-unavailable{padding:20px;text-align:center;color:var(--c-text-dim);font-size:12px;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-lg);}
.erp-block{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-lg);overflow:hidden;}
.erp-block-title{font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--c-text-dim);padding:12px 16px;background:var(--c-surface2);border-bottom:1px solid var(--c-border);}
.erp-empty{padding:20px 16px;font-size:12px;color:var(--c-text-dim);}
.erp-table{width:100%;border-collapse:collapse;}
.erp-table th{font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--c-text-dim);padding:10px 16px;text-align:left;border-bottom:1px solid var(--c-border);}
.erp-table td{padding:10px 16px;font-size:12px;border-bottom:1px solid var(--c-border);}
.erp-table tr:last-child td{border-bottom:none;}
.erp-table tr:hover td{background:rgba(255,255,255,.015);}

/* ── Loading ───────────────────────────────────────────────────────────── */
.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:80px 0;color:var(--c-text-dim);}
.spinner{width:36px;height:36px;border:3px solid var(--c-border);border-top-color:var(--c-accent);border-radius:50%;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ── Comment Buttons ───────────────────────────────────────────────────── */
.comment-btn{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:var(--radius);background:transparent;border:1px solid var(--c-border2);color:var(--c-text-muted);font-size:11px;font-weight:600;cursor:pointer;transition:all .18s;white-space:nowrap;line-height:1;flex-shrink:0;}
.comment-btn svg{opacity:.5;transition:opacity .18s;}
.comment-btn:hover{border-color:var(--c-accent);color:var(--c-accent);background:var(--c-blue-bg);}
.comment-btn:hover svg{opacity:1;}
.comment-btn.has-comments{border-color:rgba(56,189,248,.3);color:var(--c-blue);background:var(--c-blue-bg);}
.comment-btn.has-comments svg{opacity:1;}
.comment-count{font-variant-numeric:tabular-nums;}
.program-header-right{display:flex;align-items:center;gap:8px;}
.batch-table th.col-comments,.batch-table td.col-comments{width:60px;text-align:right;}
.gaps-table th.col-comments,.gaps-table td.col-comments{width:70px;text-align:right;padding-right:16px;}

/* ── Overlays ──────────────────────────────────────────────────────────── */
.detail-overlay,.comments-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:200;backdrop-filter:blur(1px);}
.detail-overlay.active,.comments-overlay.active{display:block;}

/* ── Detail Sidebar ────────────────────────────────────────────────────── */
.detail-sidebar{position:fixed;top:0;right:0;bottom:0;width:460px;background:var(--c-surface);border-left:1px solid var(--c-border);z-index:201;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);box-shadow:-6px 0 32px rgba(0,0,0,.5);}
.detail-sidebar.open{transform:translateX(0);}
.detail-sb-header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 12px;border-bottom:1px solid var(--c-border);background:var(--c-surface2);flex-shrink:0;}
.detail-sb-title{font-size:14px;font-weight:700;color:#fff;flex:1;padding-right:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.detail-sb-content{flex:1;overflow-y:auto;padding:0;scrollbar-width:thin;scrollbar-color:var(--c-border2) transparent;}
.detail-sb-content::-webkit-scrollbar{width:4px;}
.detail-sb-content::-webkit-scrollbar-thumb{background:var(--c-border2);border-radius:2px;}

/* Detail content components */
.detail-section{padding:16px 18px;border-bottom:1px solid var(--c-border);}
.detail-section:last-child{border-bottom:none;}
.detail-section-title{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--c-text-dim);margin-bottom:10px;}
.detail-row{display:flex;align-items:flex-start;gap:12px;padding:5px 0;}
.detail-row-label{font-size:11px;color:var(--c-text-dim);min-width:80px;flex-shrink:0;padding-top:1px;}
.detail-row-value{font-size:12px;color:var(--c-text);}
.fw-bold{font-weight:700;}
.detail-prose{font-size:12px;color:var(--c-text);line-height:1.6;}
.detail-tags{display:flex;flex-wrap:wrap;gap:6px;}
.detail-tag{background:var(--c-blue-bg);color:var(--c-blue);border:1px solid rgba(56,189,248,.2);font-size:11px;font-weight:600;padding:3px 8px;border-radius:3px;}
.detail-list{font-size:12px;color:var(--c-text);padding-left:16px;display:flex;flex-direction:column;gap:4px;}
.detail-list-red li{color:var(--c-red);}
.detail-empty{font-size:12px;color:var(--c-text-muted);text-align:center;padding:12px 0;}
.detail-batch-item,.detail-gap-item,.detail-prog-row{padding:9px 10px;background:var(--c-surface2);border:1px solid var(--c-border);border-radius:var(--radius);margin-bottom:6px;transition:border-color .15s,background .15s;}
.detail-batch-item.clickable-row,.detail-gap-item.clickable-row,.detail-prog-row.clickable-row{cursor:pointer;}
.detail-batch-item.clickable-row:hover,.detail-gap-item.clickable-row:hover,.detail-prog-row.clickable-row:hover{border-color:var(--c-accent);background:rgba(46,115,248,.06);}
.detail-batch-name,.detail-gap-title,.detail-prog-name{font-size:12px;font-weight:600;color:var(--c-text);margin-bottom:4px;}
.detail-batch-meta,.detail-gap-meta,.detail-prog-stats{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--c-text-dim);flex-wrap:wrap;}
.detail-team{display:flex;flex-direction:column;gap:10px;}
.detail-team-member{display:flex;align-items:center;gap:10px;}
.detail-team-name{font-size:12px;font-weight:600;color:var(--c-text);}
.detail-team-role{font-size:10px;color:var(--c-text-dim);}

/* ── Comments Sidebar ──────────────────────────────────────────────────── */
.comments-sidebar{position:fixed;top:0;right:0;bottom:0;width:360px;background:var(--c-surface);border-left:1px solid var(--c-border);z-index:201;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);box-shadow:-6px 0 32px rgba(0,0,0,.5);}
.comments-sidebar.open{transform:translateX(0);}
.comments-sb-header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 12px;border-bottom:1px solid var(--c-border);background:var(--c-surface2);flex-shrink:0;}
.comments-sb-title{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:#fff;letter-spacing:.2px;}
.comments-sb-item-label{padding:10px 18px;font-size:11px;font-weight:600;color:var(--c-accent);background:var(--c-surface2);border-bottom:1px solid var(--c-border);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0;letter-spacing:.2px;}
.comments-list{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;scrollbar-width:thin;scrollbar-color:var(--c-border2) transparent;}
.comments-list::-webkit-scrollbar{width:4px;}
.comments-list::-webkit-scrollbar-thumb{background:var(--c-border2);border-radius:2px;}
.comments-empty,.comments-loading{text-align:center;color:var(--c-text-muted);font-size:12px;padding:32px 0;line-height:1.7;}
.comment-entry{background:var(--c-surface2);border:1px solid var(--c-border);border-radius:var(--radius-lg);padding:12px 14px;transition:border-color .15s;}
.comment-entry:hover{border-color:var(--c-border2);}
.comment-meta{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:6px;flex-wrap:wrap;}
.comment-author{font-size:12px;font-weight:700;color:var(--c-blue);}
.comment-time{font-size:10px;color:var(--c-text-muted);white-space:nowrap;}
.comment-text{font-size:12px;color:var(--c-text);line-height:1.55;white-space:pre-wrap;word-break:break-word;}
.comment-meta-sep{font-size:10px;color:var(--c-text-muted);}
.comments-user-row{display:flex;align-items:center;gap:8px;}
.comments-user-label{font-size:11px;color:var(--c-text-muted);white-space:nowrap;flex-shrink:0;}
.comments-user-select{flex:1;background:var(--c-bg);border:1px solid var(--c-border2);border-radius:var(--radius);color:var(--c-text);font-size:12px;font-family:inherit;padding:6px 8px;cursor:pointer;transition:border-color .18s;}
.comments-user-select:focus{outline:none;border-color:var(--c-accent);}
.comments-form{padding:14px 16px;border-top:1px solid var(--c-border);display:flex;flex-direction:column;gap:8px;flex-shrink:0;background:var(--c-surface2);}
.comments-field{width:100%;background:var(--c-bg);border:1px solid var(--c-border2);border-radius:var(--radius);color:var(--c-text);font-size:12px;font-family:inherit;padding:8px 10px;transition:border-color .18s;resize:none;line-height:1.5;}
.comments-field::placeholder{color:var(--c-text-muted);}
.comments-field:focus{outline:none;border-color:var(--c-accent);}
.comments-field.invalid{border-color:var(--c-red);}
.comments-textarea{min-height:68px;}
.comments-form-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.comments-hint{font-size:10px;color:var(--c-text-muted);white-space:nowrap;}
.comments-submit{padding:7px 14px;border-radius:var(--radius);background:var(--c-accent);border:none;color:#fff;font-size:12px;font-weight:600;cursor:pointer;transition:background .18s,opacity .18s;white-space:nowrap;}
.comments-submit:hover{background:var(--c-accent-d);}
.comments-submit:disabled{opacity:.55;cursor:not-allowed;}

/* Shared close button */
.comments-close-btn,.detail-close-btn{width:26px;height:26px;border-radius:var(--radius);background:transparent;border:1px solid var(--c-border2);color:var(--c-text-dim);font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .18s;flex-shrink:0;}
.comments-close-btn:hover,.detail-close-btn:hover{border-color:var(--c-red);color:var(--c-red);background:var(--c-red-bg);}

/* Shared buttons */
.btn-secondary{padding:7px 14px;border-radius:var(--radius);background:transparent;border:1px solid var(--c-border2);color:var(--c-text-dim);font-size:12px;font-weight:600;cursor:pointer;transition:all .18s;}
.btn-secondary:hover{border-color:var(--c-accent);color:var(--c-accent);background:var(--c-blue-bg);}
.btn-primary{padding:7px 14px;border-radius:var(--radius);background:var(--c-accent);border:none;color:#fff;font-size:12px;font-weight:600;cursor:pointer;transition:background .18s;}
.btn-primary:hover{background:var(--c-accent-d);}
.full-width{width:100%;justify-content:center;}

/* ── BOM Modal ─────────────────────────────────────────────────────────── */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:300;backdrop-filter:blur(2px);}
.modal-overlay.active{display:block;}
.modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-60%);opacity:0;pointer-events:none;width:480px;max-width:calc(100vw - 32px);background:var(--c-surface);border:1px solid var(--c-border2);border-radius:var(--radius-lg);z-index:301;box-shadow:0 8px 48px rgba(0,0,0,.6);transition:transform .25s cubic-bezier(.4,0,.2,1),opacity .25s;}
.modal.open{transform:translate(-50%,-50%);opacity:1;pointer-events:all;}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--c-border);background:var(--c-surface2);}
.modal-title{font-size:14px;font-weight:700;color:#fff;}
.modal-body{padding:20px;}
.form-group{margin-bottom:14px;}
.form-label{display:block;font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--c-text-dim);margin-bottom:6px;}
.form-input{width:100%;background:var(--c-bg);border:1px solid var(--c-border2);border-radius:var(--radius);color:var(--c-text);font-size:13px;font-family:inherit;padding:8px 10px;transition:border-color .18s;}
.form-input:focus{outline:none;border-color:var(--c-accent);}
.form-input[readonly]{opacity:.65;cursor:default;}
.form-textarea{resize:vertical;min-height:72px;line-height:1.5;}
.modal-footer{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;padding-top:16px;border-top:1px solid var(--c-border);}

/* ── PO Modal scrollable body ─────────────────────────────────────────── */
#poModalBody{max-height:calc(85vh - 80px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--c-border2) transparent;}
#poModalBody::-webkit-scrollbar{width:4px;}
#poModalBody::-webkit-scrollbar-thumb{background:var(--c-border2);border-radius:2px;}

/* ── PO line items table ─────────────────────────────────────────────── */
.po-lines-wrap{overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--c-border2) transparent;}
.po-lines-table{width:100%;border-collapse:collapse;min-width:380px;}
.po-lines-table th{font-size:10px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--c-text-dim);padding:7px 10px;text-align:left;border-bottom:1px solid var(--c-border);white-space:nowrap;}
.po-lines-table td{padding:8px 10px;font-size:12px;color:var(--c-text);border-bottom:1px solid var(--c-border);}
.po-lines-table tr:last-child td{border-bottom:none;}
.po-lines-table tbody tr:hover td{background:rgba(255,255,255,.02);}

/* ── Approval timeline ───────────────────────────────────────────────── */
.approval-timeline{display:flex;flex-direction:column;gap:8px;}
.approval-step{background:var(--c-surface2);border:1px solid var(--c-border);border-radius:var(--radius);padding:9px 12px;}
.approval-step-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:2px;}
.approval-who{font-size:12px;font-weight:600;color:var(--c-text);flex:1;min-width:0;}
.approval-date{font-size:10px;color:var(--c-text-muted);white-space:nowrap;}
.approval-note{font-size:11px;color:var(--c-text-dim);margin-top:4px;line-height:1.5;}

/* ── Responsive ────────────────────────────────────────────────────────── */

/* Tablet (≤ 1024px) */
@media(max-width:1024px){
  .programs-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}
  .kpi-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}
  .actions-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
  .budget-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));}
}

/* Small tablet / large phone (≤ 768px) */
@media(max-width:768px){
  html{font-size:13px;}
  .header-inner,.main-content{padding-left:14px;padding-right:14px;}
  .tab-nav{padding-left:10px;padding-right:10px;}
  .programs-grid{grid-template-columns:1fr;}
  .kpi-grid{grid-template-columns:repeat(2,1fr);}
  .brand-sub,.classification{display:none;}
  .gaps-table th:nth-child(4),.gaps-table td:nth-child(4){display:none;}
  .gaps-table th.col-comments,.gaps-table td.col-comments,.batch-table th.col-comments,.batch-table td.col-comments{display:none;}
  .comments-sidebar,.detail-sidebar{width:100%;}
  .modal{width:calc(100vw - 24px);}
  /* Table scroll on tablet */
  .gaps-table-wrap{overflow-x:auto;}
  .erp-block{overflow-x:auto;}
  .program-body{overflow-x:auto;}
  /* Tab nav scroll */
  .tab-nav{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;}
  .tab-btn{flex-shrink:0;padding:12px 14px;font-size:12px;}
  .tab-spacer{min-width:8px;flex:0;}
  .last-updated{flex-shrink:0;white-space:nowrap;}
  /* Sidebar full width */
  .detail-sb-title{font-size:13px;}
  /* Touch-friendly rows */
  .batch-table td,.batch-table th{padding:10px 8px;}
  .erp-table td,.erp-table th{padding:10px 12px;}
}

/* Phone (≤ 480px) */
@media(max-width:480px){
  html{font-size:12px;}
  .header-inner{padding:0 10px;height:52px;}
  .brand-logo{width:34px;height:34px;font-size:11px;}
  .brand-name{font-size:13px;}
  .brand-sub,.classification,.date-display{display:none;}
  .main-content{padding:16px 10px 48px;}
  .section{margin-bottom:24px;}
  .section-title{font-size:10px;letter-spacing:1px;margin-bottom:10px;}
  /* Tab nav */
  .tab-nav{padding:0 6px;overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;gap:2px;}
  .tab-btn{padding:10px 12px;font-size:11px;flex-shrink:0;}
  .tab-spacer{display:none;}
  .last-updated{display:none;}
  /* KPI grid: 2 cols on phone, 1 col on very narrow */
  .kpi-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
  .kpi-card{padding:14px 12px;gap:6px;}
  .kpi-value{font-size:26px;}
  .kpi-donut-card .kpi-donut-wrap{height:72px;}
  /* Program cards */
  .programs-grid{gap:12px;}
  .program-header{padding:12px 14px;}
  .program-body{padding:12px 14px;overflow-x:auto;}
  .prog-stats{gap:16px;margin-bottom:12px;}
  .prog-stat-value{font-size:18px;}
  /* Tables: horizontal scroll */
  .gaps-table-wrap{overflow-x:auto;}
  .gaps-table{min-width:420px;}
  .erp-block{overflow-x:auto;}
  .erp-table{min-width:480px;}
  .batch-table{min-width:300px;}
  /* Team section: stack */
  .team-row{flex-direction:column;gap:8px;}
  /* BOM section */
  .bom-section{flex-direction:column;align-items:flex-start;gap:10px;}
  /* Sidebars */
  .detail-sidebar,.comments-sidebar{width:100%;}
  /* Modals */
  .modal{width:calc(100vw - 16px);max-width:calc(100vw - 16px);}
  .modal-body{padding:14px;}
  /* Action items */
  .actions-grid{grid-template-columns:1fr;gap:10px;}
  .action-card{padding:12px;}
  /* Budget cards */
  .budget-grid{grid-template-columns:1fr;gap:10px;}
  /* Alert banner */
  .alert-banner{padding:10px 12px;gap:10px;}
  /* Touch targets */
  .btn-secondary,.btn-primary,.comments-submit,.bom-request-btn{min-height:40px;}
  .erp-table tr.erp-clickable-row td,.batch-table .clickable-row td{min-height:44px;}
  /* PO modal */
  #poModalBody{max-height:calc(90vh - 80px);}
}

/* ── PO detail tag clickable ───────────────────────────────────────────── */
.detail-tag-clickable{cursor:pointer;transition:border-color .15s,background .15s;}
.detail-tag-clickable:hover{border-color:var(--c-accent);background:rgba(46,115,248,.12);}

/* ── ERP table clickable rows ──────────────────────────────────────────── */
.erp-table tr.erp-clickable-row{cursor:pointer;}
.erp-table tr.erp-clickable-row:hover td{background:rgba(46,115,248,.06);}

/* ── Team edit member row ──────────────────────────────────────────────── */
.team-edit-member-row{display:flex;gap:8px;margin-bottom:8px;align-items:center;}
.team-edit-member-row .form-input{flex:1;min-width:0;}

/* ── Shipments & Tracking section ─────────────────────────────────────── */
.tracking-sync-badge{font-size:10px;font-weight:600;color:var(--c-green);background:var(--c-green-bg);border:1px solid rgba(34,197,94,.2);padding:2px 8px;border-radius:3px;letter-spacing:.3px;text-transform:none;}
.tracking-unavailable{padding:20px;text-align:center;color:var(--c-text-dim);font-size:12px;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-lg);}

/* Tracking cards grid */
.tracking-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:14px;}
.tracking-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-lg);overflow:hidden;transition:border-color .2s,box-shadow .2s;}
.tracking-card:hover{border-color:var(--c-border2);box-shadow:0 4px 20px rgba(0,0,0,.3);}
.tracking-card-delivered{opacity:.75;}
.tracking-card-header{display:flex;align-items:flex-start;gap:16px;padding:14px 16px;cursor:pointer;background:linear-gradient(135deg,var(--c-surface) 0%,var(--c-surface2) 100%);}
.tracking-card-header:hover{background:var(--c-surface2);}
.tracking-card-left{flex:1;min-width:0;}
.tracking-card-right{flex-shrink:0;display:flex;flex-direction:column;gap:4px;min-width:160px;text-align:right;}
.tracking-number{font-size:13px;font-weight:700;color:#fff;letter-spacing:.3px;margin-bottom:6px;font-family:'Courier New',monospace;}
.tracking-badges{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:5px;}
.tracking-desc{font-size:11px;color:var(--c-text-dim);margin-top:3px;line-height:1.4;}
.tracking-last-status{font-size:11px;color:var(--c-text-dim);margin-top:4px;font-style:italic;}
.tracking-urgent-badge{font-size:9px;font-weight:800;letter-spacing:1px;padding:2px 6px;border-radius:3px;background:var(--c-red-bg);color:var(--c-red);border:1px solid rgba(239,68,68,.3);text-transform:uppercase;}

.tracking-meta-row{display:flex;align-items:baseline;justify-content:flex-end;gap:6px;font-size:11px;}
.tracking-meta-label{color:var(--c-text-muted);font-size:10px;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;}
.tracking-time{color:var(--c-text-dim);}

/* Carrier badges */
.carrier-badge{font-size:10px;font-weight:800;letter-spacing:.5px;padding:2px 7px;border-radius:3px;text-transform:uppercase;}
.carrier-dhl{background:#ffcc00;color:#d40511;border:1px solid #d40511;}
.carrier-fedex{background:#4d148c;color:#ff6200;border:1px solid #ff6200;}
.carrier-ups{background:#351c15;color:#ffb500;border:1px solid rgba(255,181,0,.4);}
.carrier-generic{background:rgba(255,255,255,.06);color:var(--c-text-dim);border:1px solid var(--c-border2);}

/* Card actions row */
.tracking-card-actions{display:flex;align-items:center;justify-content:space-between;padding:7px 16px;border-top:1px solid var(--c-border);background:var(--c-surface2);}
.tracking-toggle-hint{font-size:10px;color:var(--c-text-muted);letter-spacing:.3px;}
.tracking-refresh-btn{padding:4px 10px;background:transparent;border:1px solid var(--c-border2);border-radius:var(--radius);color:var(--c-text-dim);font-size:11px;font-weight:600;cursor:pointer;transition:all .18s;display:flex;align-items:center;gap:5px;}
.tracking-refresh-btn:hover{border-color:var(--c-accent);color:var(--c-accent);background:rgba(46,115,248,.08);}
.tracking-refresh-btn:disabled{opacity:.5;cursor:not-allowed;}

/* Inline spinner for refresh */
.spinner-sm{display:inline-block;width:11px;height:11px;border:2px solid rgba(255,255,255,.2);border-top-color:var(--c-accent);border-radius:50%;animation:spin .6s linear infinite;flex-shrink:0;}

/* Timeline */
.tracking-timeline{border-top:1px solid var(--c-border);padding:14px 16px;background:var(--c-bg);}
.tracking-timeline-msg{font-size:12px;color:var(--c-text-muted);text-align:center;padding:12px 0;}
.tracking-timeline-inner{position:relative;padding-left:20px;}
.tracking-timeline-inner::before{content:'';position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:var(--c-border2);}
.timeline-event{position:relative;margin-bottom:14px;display:flex;align-items:flex-start;gap:10px;}
.timeline-event:last-child{margin-bottom:0;}
.timeline-dot{position:absolute;left:-17px;top:4px;width:9px;height:9px;border-radius:50%;background:var(--c-border2);border:2px solid var(--c-bg);flex-shrink:0;}
.timeline-event-latest .timeline-dot{background:var(--c-accent);border-color:var(--c-bg);box-shadow:0 0 6px rgba(46,115,248,.5);}
.timeline-event-content{flex:1;min-width:0;}
.timeline-event-time{font-size:10px;color:var(--c-text-muted);margin-bottom:2px;}
.timeline-event-desc{font-size:12px;color:var(--c-text);line-height:1.4;}
.timeline-event-loc{font-size:11px;color:var(--c-text-dim);margin-top:2px;}

/* Release form link button */
.tracking-doc-btn{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:var(--radius);background:rgba(46,115,248,.1);border:1px solid rgba(46,115,248,.25);color:var(--c-accent);font-size:11px;font-weight:600;text-decoration:none;transition:all .18s;white-space:nowrap;}
.tracking-doc-btn:hover{background:rgba(46,115,248,.2);border-color:var(--c-accent);}

/* Responsive */
@media(max-width:768px){
  .tracking-cards-grid{grid-template-columns:1fr;}
  .tracking-card-header{flex-direction:column;gap:10px;}
  .tracking-card-right{text-align:left;min-width:0;}
  .tracking-meta-row{justify-content:flex-start;}
}
@media(max-width:480px){
  .tracking-cards-grid{gap:10px;}
  .tracking-card-header{padding:12px;}
  .tracking-card-actions{padding:6px 12px;}
  .tracking-number{font-size:12px;}
}