*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',sans-serif;
background:#F5F5F5;color:#1A1A1A}

/* ─── LOGIN ──────────────────────────────────────────────────────────────── */
#loginScreen{display:flex;align-items:center;justify-content:center;min-height:100vh;
background:#F5F5F5;position:relative}
#loginScreen::before{content:'';position:absolute;inset:0;
background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(204,43,43,0.07) 0%,transparent 70%)}
.login-card{background:#FFF;padding:52px 44px;width:100%;max-width:400px;
border:1px solid #E8E8E8;border-radius:4px;
box-shadow:0 4px 24px rgba(0,0,0,0.07);position:relative;z-index:1}
.login-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;
background:linear-gradient(90deg,#8B1A1A,#CC2B2B)}
.login-header{text-align:center;margin-bottom:36px}
.login-logo-wrap{display:flex;justify-content:center;margin-bottom:16px}
.login-subtitle{font-size:13px;font-weight:700;letter-spacing:1.5px;color:#333;
text-transform:uppercase;margin-top:8px}
.login-desc{font-size:13px;color:#999;margin-top:6px;font-weight:400}
.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.form-group label{font-size:11px;font-weight:700;text-transform:uppercase;
color:#888;letter-spacing:0.8px}
.form-group input{padding:12px 14px;border:1.5px solid #E8E8E8;background:#FAFAFA;
font-size:14px;border-radius:3px;outline:none;transition:all 0.2s}
.form-group input:focus{border-color:#CC2B2B;background:#FFF;
box-shadow:0 0 0 3px rgba(204,43,43,0.08)}
.login-btn{width:100%;padding:13px;background:#CC2B2B;color:#FFF;border:none;
font-size:12px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;
cursor:pointer;border-radius:3px;margin-top:6px;transition:background 0.2s}
.login-btn:hover{background:#A82020}
.login-error{font-size:12px;color:#CC2B2B;margin-top:8px;display:none;font-weight:600}
.login-error.show{display:block}
.login-footer{text-align:center;margin-top:20px;font-size:11px;color:#BBBBBB}

/* ─── DASHBOARD ──────────────────────────────────────────────────────────── */
#dashboard{display:none;min-height:100vh;background:#F5F5F5}

/* ─── TOPBAR ─────────────────────────────────────────────────────────────── */
.topbar{background:#FFF;border-bottom:1px solid #E8E8E8;padding:0 32px;
display:flex;align-items:center;justify-content:space-between;height:60px;
position:sticky;top:0;z-index:100}
.topbar-left{display:flex;align-items:center;gap:16px}
.topbar-divider{width:1px;height:28px;background:#E8E8E8}
.topbar-location{font-size:13px;color:#555;font-weight:500}
.topbar-location strong{color:#1A1A1A;font-weight:700}
.topbar-right{display:flex;align-items:center;gap:12px}
.period-badge{background:#FFF4F4;border:1px solid #F5CCCC;color:#CC2B2B;
padding:5px 12px;font-size:10px;font-weight:700;letter-spacing:1.5px;
text-transform:uppercase;border-radius:20px}
.logout-btn{padding:7px 14px;background:transparent;border:1.5px solid #E8E8E8;
color:#888;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
cursor:pointer;border-radius:3px;transition:all 0.2s}
.logout-btn:hover{border-color:#CC2B2B;color:#CC2B2B}
.print-btn{padding:7px 14px;background:#CC2B2B;border:1.5px solid #CC2B2B;
color:#FFF;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
cursor:pointer;border-radius:3px;transition:all 0.2s}
.print-btn:hover{background:#A82020;border-color:#A82020}

/* Print-only header stamp (hidden on screen) */
.print-only{display:none}

/* ─── CONTENT ────────────────────────────────────────────────────────────── */
.content{padding:24px 32px;max-width:1400px;margin:0 auto}

/* ─── SECTION LABEL ──────────────────────────────────────────────────────── */
.section-label{font-size:10px;font-weight:800;letter-spacing:2px;
text-transform:uppercase;color:#CC2B2B;margin-bottom:14px;
display:flex;align-items:center;gap:10px}
.section-label::after{content:'';flex:1;height:1px;background:#E8E8E8}

/* ─── COMMISSION + BADGES (top) ──────────────────────────────────────────── */
.comm-top-card{background:#FFF;border:1px solid #E8E8E8;border-radius:4px;
padding:24px;margin-bottom:20px;box-shadow:0 1px 4px rgba(0,0,0,0.04)}
.comm-top-row{display:flex;align-items:flex-start;justify-content:space-between;
gap:24px;flex-wrap:wrap}
.comm-top-left{flex:1;min-width:260px}
.comm-top-title-row{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.comm-top-title{font-size:13px;font-weight:800;color:#1A1A1A;
letter-spacing:0.3px;text-transform:uppercase}
.comm-status-pill{padding:3px 10px;border-radius:20px;font-size:10px;font-weight:700;
letter-spacing:0.5px}
.comm-status-pill.active{background:#FFF4F4;color:#CC2B2B;border:1px solid #F5CCCC}
.comm-status-pill.progress{background:#F5F5F5;color:#888;border:1px solid #E8E8E8}
.comm-ytd-display{font-size:32px;font-weight:800;color:#1A1A1A;
letter-spacing:-1px;line-height:1;margin-bottom:4px}
.comm-ytd-sub{font-size:12px;color:#888;font-weight:500}
.comm-bar-section{margin-top:14px}
.comm-bar-label-row{display:flex;justify-content:space-between;
font-size:11px;color:#888;margin-bottom:6px;font-weight:500}
.comm-bar-track{height:8px;background:#F0F0F0;border-radius:4px;
overflow:visible;position:relative;margin-bottom:4px}
.comm-bar-fill{height:100%;background:linear-gradient(90deg,#CC2B2B,#E53935);
border-radius:4px;transition:width 0.8s ease;position:relative}
.comm-bar-tip{position:absolute;right:-4px;top:-4px;width:16px;height:16px;
background:#CC2B2B;border:3px solid #FFF;border-radius:50%;
box-shadow:0 1px 4px rgba(204,43,43,0.4)}
.comm-milestones{display:flex;gap:4px;margin-top:12px;flex-wrap:wrap}
.milestone{flex:1;min-width:0;padding:10px 8px;border-radius:4px;text-align:center;
border:1.5px solid #EEEEEE;transition:all 0.2s;position:relative}
.milestone.locked{background:#FAFAFA;border-color:#EEEEEE}
.milestone.unlocked{background:#FFF;border-color:#CC2B2B}
.milestone.unlocked::before{content:'';position:absolute;inset:0;border-radius:3px;
background:rgba(204,43,43,0.03)}
.milestone-icon{font-size:20px;display:block;margin-bottom:4px;line-height:1}
.milestone-label{font-size:9px;font-weight:700;letter-spacing:0.5px;
text-transform:uppercase;display:block}
.milestone.locked .milestone-label{color:#BBBBBB}
.milestone.unlocked .milestone-label{color:#CC2B2B}
.milestone-pct{font-size:11px;font-weight:800;display:block;margin-top:2px}
.milestone.locked .milestone-pct{color:#CCCCCC}
.milestone.unlocked .milestone-pct{color:#1A1A1A}
.comm-earned-note{margin-top:10px;font-size:12px;color:#CC2B2B;font-weight:600}

/* ─── YTD STATS ROW ──────────────────────────────────────────────────────── */
.ytd-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
.ytd-stat-card{background:#FFF;border:1px solid #E8E8E8;border-radius:4px;
padding:18px 20px;box-shadow:0 1px 4px rgba(0,0,0,0.04)}
.ytd-stat-label{font-size:10px;font-weight:700;letter-spacing:1.5px;
text-transform:uppercase;color:#999;margin-bottom:8px}
.ytd-stat-value{font-size:26px;font-weight:800;color:#1A1A1A;
letter-spacing:-0.5px;line-height:1}
.ytd-stat-sub{font-size:11px;color:#BBBBBB;margin-top:4px}
.ytd-stat-card.highlight .ytd-stat-value{color:#CC2B2B}

/* ─── KPI CARDS ──────────────────────────────────────────────────────────── */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
.kpi-card{background:#FFF;border:1px solid #E8E8E8;border-radius:4px;
padding:18px 20px;box-shadow:0 1px 4px rgba(0,0,0,0.04)}
.kpi-metric{font-size:10px;font-weight:700;letter-spacing:1px;
text-transform:uppercase;color:#999;margin-bottom:8px}
.kpi-value{font-size:26px;font-weight:800;color:#1A1A1A;
letter-spacing:-0.5px;line-height:1}
.kpi-compare{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap}
.kpi-prev{font-size:12px;color:#AAA;font-weight:500}
.kpi-change{font-size:11px;font-weight:700;padding:2px 8px;border-radius:10px}
.kpi-change.up{background:#FFF4F4;color:#CC2B2B}
.kpi-change.down{background:#F5F5F5;color:#888}
.kpi-change.neutral{background:#F5F5F5;color:#AAA}
.kpi-period{font-size:10px;color:#CCCCCC;margin-top:4px}

/* ─── CHARTS ─────────────────────────────────────────────────────────────── */
.charts-row{display:grid;gap:14px;margin-bottom:20px}
.charts-full{grid-template-columns:1fr}
.charts-2{grid-template-columns:1fr 1fr}
.chart-card{background:#FFF;border:1px solid #E8E8E8;border-radius:4px;
padding:20px;box-shadow:0 1px 4px rgba(0,0,0,0.04)}
.chart-title{font-size:12px;font-weight:700;color:#1A1A1A;margin-bottom:2px}
.chart-sub{font-size:11px;color:#BBBBBB;margin-bottom:16px}
.chart-wrap{position:relative;height:210px}
.chart-wrap.tall{height:250px}

/* ─── PRODUCT INTEL ──────────────────────────────────────────────────────── */
.prod-grid{display:grid;grid-template-columns:200px 1fr;gap:14px;margin-bottom:20px}
.donut-card{background:#FFF;border:1px solid #E8E8E8;border-radius:4px;
padding:20px;box-shadow:0 1px 4px rgba(0,0,0,0.04)}
.donut-canvas-wrap{position:relative;height:170px;width:170px;margin:0 auto}
.donut-legend{margin-top:12px}
.legend-item{display:flex;align-items:center;gap:8px;padding:5px 0;
font-size:11px;border-bottom:1px solid #F5F5F5}
.legend-item:last-child{border-bottom:none}
.legend-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.legend-name{flex:1;color:#666;font-weight:500}
.legend-pct{font-size:10px;font-weight:700;color:#333}

.top5-card{background:#FFF;border:1px solid #E8E8E8;border-radius:4px;
padding:20px;box-shadow:0 1px 4px rgba(0,0,0,0.04)}
.tab-bar{display:flex;gap:0;border-bottom:2px solid #F0F0F0;margin-bottom:16px}
.tab-btn{padding:8px 16px;font-size:10px;font-weight:700;letter-spacing:1px;
text-transform:uppercase;background:none;border:none;cursor:pointer;
color:#BBBBBB;border-bottom:2px solid transparent;margin-bottom:-2px;
transition:all 0.15s}
.tab-btn.active{color:#CC2B2B;border-bottom-color:#CC2B2B}
.tab-btn:hover{color:#CC2B2B}
.tab-content{display:none}
.tab-content.active{display:block}
.prod-item{display:flex;align-items:center;gap:10px;padding:9px 0;
border-bottom:1px solid #F8F8F8}
.prod-item:last-child{border-bottom:none}
.prod-rank{font-size:11px;font-weight:800;color:#DDDDDD;width:18px;flex-shrink:0}
.prod-name{flex:1;font-size:12px;color:#444;line-height:1.3}
.prod-bar-wrap{width:90px;flex-shrink:0}
.prod-bar{height:3px;background:#CC2B2B;border-radius:2px;opacity:0.7}
.prod-val{font-size:11px;font-weight:700;color:#1A1A1A;width:70px;
text-align:right;flex-shrink:0}
.no-data{font-size:12px;color:#CCCCCC;padding:16px 0;font-style:italic}

/* ─── INSIGHTS ───────────────────────────────────────────────────────────── */
.insights-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:20px}
.insights-card{background:#FFF;border:1px solid #E8E8E8;border-radius:4px;
padding:20px;box-shadow:0 1px 4px rgba(0,0,0,0.04)}
.insights-title{font-size:10px;font-weight:800;letter-spacing:2px;
text-transform:uppercase;margin-bottom:14px}
.insights-title.tk{color:#CC2B2B}
.insights-title.op{color:#C9942A}
.insight-item{display:flex;gap:10px;padding:7px 0;
border-bottom:1px solid #F8F8F8;font-size:12px;color:#555;line-height:1.6}
.insight-item:last-child{border-bottom:none}
.insight-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0;margin-top:6px}
.insight-dot.r{background:#CC2B2B}
.insight-dot.g{background:#C9942A}

/* ─── MANAGER CARD ───────────────────────────────────────────────────────── */
.manager-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:24px}
.manager-card{background:#FFF;border:1px solid #E8E8E8;border-radius:4px;
padding:20px;box-shadow:0 1px 4px rgba(0,0,0,0.04)}
.manager-role{font-size:10px;font-weight:800;letter-spacing:1.5px;
text-transform:uppercase;color:#CC2B2B;margin-bottom:10px}
.manager-name{font-size:18px;font-weight:700;color:#1A1A1A;margin-bottom:8px}
.manager-detail{display:flex;align-items:center;gap:8px;font-size:12px;
color:#666;padding:4px 0}
.manager-detail svg{flex-shrink:0;opacity:0.4}
.manager-empty{font-size:12px;color:#CCCCCC;font-style:italic}
.store-info-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.info-chip{background:#F8F8F8;border:1px solid #EEEEEE;border-radius:20px;
padding:4px 12px;font-size:11px;color:#666;font-weight:500}

/* ─── FOOTER ─────────────────────────────────────────────────────────────── */
.footer{background:#FFF;border-top:1px solid #E8E8E8;padding:16px 32px;
text-align:center;font-size:11px;color:#CCCCCC}

/* ─── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media(max-width:960px){
.ytd-row,.kpi-grid{grid-template-columns:repeat(2,1fr)}
.charts-2,.insights-grid,.manager-grid{grid-template-columns:1fr}
.prod-grid{grid-template-columns:1fr}
.content{padding:16px}
.topbar{padding:0 16px}
.comm-top-row{flex-direction:column}
}
@media(max-width:540px){
.ytd-row,.kpi-grid{grid-template-columns:1fr}
.comm-milestones{gap:3px}
}

/* ─── PURCHASE ORDERS (Acumatica) ────────────────────────────────────────── */
.po-filters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;
padding-bottom:14px;margin-bottom:10px;border-bottom:2px solid #F0F0F0}
.po-f{display:flex;flex-direction:column;gap:4px}
.po-f label{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#999}
.po-f input,.po-f select{padding:7px 10px;border:1.5px solid #E8E8E8;background:#FAFAFA;
font-size:12px;border-radius:3px;outline:none;font-family:inherit;color:#333;height:34px}
.po-f input:focus,.po-f select:focus{border-color:#CC2B2B;background:#FFF;
box-shadow:0 0 0 3px rgba(204,43,43,0.08)}
.po-f-search{flex:1;min-width:200px}
.po-clear{height:34px;padding:0 14px;background:transparent;border:1.5px solid #E8E8E8;
color:#888;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
cursor:pointer;border-radius:3px;transition:all 0.2s}
.po-clear:hover{border-color:#CC2B2B;color:#CC2B2B}
.po-count{font-size:11px;color:#AAA;margin-bottom:6px}
@media(max-width:540px){.po-f{flex:1 1 45%}.po-f-search{flex-basis:100%}}
.po-table-wrap{overflow-x:auto}
.po-table{width:100%;border-collapse:collapse;font-size:12px}
.po-table th{text-align:left;font-size:10px;font-weight:700;letter-spacing:1px;
text-transform:uppercase;color:#999;padding:8px 10px;border-bottom:2px solid #F0F0F0;
white-space:nowrap}
.po-table td{padding:9px 10px;border-bottom:1px solid #F8F8F8;color:#444;white-space:nowrap}
.po-table tr:last-child td{border-bottom:none}
.po-table tbody tr:hover td{background:#FAFAFA}
.po-table .num{text-align:right}
.po-table tr.po-overdue td{background:#FFF8F8}
.po-status{display:inline-block;padding:2px 8px;border-radius:10px;font-size:10px;
font-weight:700;letter-spacing:0.5px}
.po-status.open{background:#FFF4F4;color:#CC2B2B}
.po-status.hold{background:#FFF8EC;color:#C9942A}
.po-status.other{background:#F5F5F5;color:#888}
.po-late{color:#CC2B2B;font-weight:700}
.po-received{color:#BBBBBB}
@media print{
#poSection .chart-card{break-inside:auto;page-break-inside:auto}
.po-table tr{break-inside:avoid;page-break-inside:avoid}
.po-filters .po-clear{display:none}
}

/* ─── PRINT / EXPORT TO PDF ──────────────────────────────────────────────── */
@media print{
@page{margin:12mm}
body{background:#FFF !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
#loginScreen{display:none !important}
#dashboard{display:block !important}
.topbar{position:static;box-shadow:none;border-bottom:2px solid #CC2B2B}
.print-btn,.logout-btn{display:none !important}
.content{max-width:none;padding:0 4px}
/* Show the printed-page header stamp */
.print-only{display:block;font-size:12px;color:#888;font-weight:600;
margin:8px 0 14px;padding-bottom:8px;border-bottom:1px solid #E8E8E8}
/* Keep cards, charts and sections from splitting across pages */
.comm-top-card,.ytd-row,.kpi-grid,.charts-row,.prod-grid,.insights-grid,
.manager-grid,.chart-card,.insights-card,.ytd-stat-card,.kpi-card,
.donut-card,.top5-card,.manager-card{break-inside:avoid;page-break-inside:avoid}
.section-label{break-after:avoid;page-break-after:avoid}
.footer{position:static;border-top:1px solid #E8E8E8}
/* Fixed chart heights so canvases render on paper */
.chart-wrap{height:230px}
.chart-wrap.tall{height:260px}
}