/* FSO Reporting */
:root {
    --fsor-primary: #c5107b;
    --fsor-teal:    #5bb8b4;
    --fsor-green:   #8db63e;
    --fsor-orange:  #f5a623;
    --fsor-navy:    #1a237e;
}

.fsor-wrap { max-width:1200px; margin:0 auto; padding:20px 0; font-family:inherit; }
.fsor-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; }
.fsor-header h2 { margin:0; font-size:24px; }
.fsor-label { font-size:14px; color:#888; font-weight:normal; }
.fsor-loading { color:#aaa; padding:20px 0; }
.fsor-section { margin-bottom:40px; }
.fsor-section h3 { font-size:16px; font-weight:700; margin-bottom:16px; padding-bottom:8px; border-bottom:2px solid #f0f0f0; }

/* Period Bar */
.fsor-period-bar { display:flex; gap:0; border:2px solid var(--fsor-primary); border-radius:6px; overflow:hidden; width:fit-content; margin-bottom:16px; }
.fsor-period-btn { padding:7px 16px; border:none; background:#fff; color:var(--fsor-primary); font-size:13px; font-weight:600; cursor:pointer; }
.fsor-period-btn.active { background:var(--fsor-primary); color:#fff; }
.fsor-period-btn + .fsor-period-btn { border-left:1px solid var(--fsor-primary); }

/* Controls Bar */
.fsor-controls-bar { display:flex; gap:20px; align-items:flex-end; flex-wrap:wrap; margin-bottom:24px; padding:16px; background:#f9f9f9; border-radius:8px; border:1px solid #e8e8e8; }
.fsor-control-group { display:flex; flex-direction:column; gap:4px; }
.fsor-control-group label { font-size:11px; font-weight:700; text-transform:uppercase; color:#888; }
.fsor-control-group select { padding:7px 10px; border:1px solid #ccc; border-radius:4px; }

/* Stat Cards */
.fsor-target-grid { display:flex !important; flex-wrap:wrap !important; gap:8px !important; }
.fsor-stat-card { background:#fff !important; border:1px solid #e8e8e8 !important; border-radius:8px !important; padding:10px 12px !important; text-align:center !important; box-sizing:border-box !important; flex:1 1 100px !important; min-width:90px !important; max-width:160px !important; }
.fsor-stat-val { font-size:20px !important; font-weight:800 !important; line-height:1 !important; margin-bottom:3px !important; }
.fsor-stat-label { font-size:10px !important; color:#666 !important; font-weight:600 !important; text-transform:uppercase !important; letter-spacing:0.3px !important; line-height:1.2 !important; }
.fsor-stat-sub { font-size:10px !important; color:#aaa !important; margin-top:2px !important; }
/* Pipeline cards get more space */
#fsor-mgr-pipeline.fsor-target-grid,
#fsor-pipeline-cards.fsor-target-grid { gap:16px !important; flex-wrap:nowrap !important; }
#fsor-mgr-pipeline .fsor-stat-card,
#fsor-pipeline-cards .fsor-stat-card { min-width:0 !important; max-width:none !important; flex:1 !important; padding:24px 20px !important; }
#fsor-mgr-pipeline .fsor-stat-val,
#fsor-pipeline-cards .fsor-stat-val { font-size:28px !important; white-space:nowrap !important; overflow:visible !important; }
#fsor-mgr-pipeline .fsor-stat-label,
#fsor-pipeline-cards .fsor-stat-label { font-size:12px !important; }

/* Progress note */
.fsor-progress-note { font-size:13px; color:#888; margin-top:8px; font-style:italic; }

/* Funnel */
.fsor-funnel-wrap { display:flex; gap:24px; align-items:flex-start; flex-wrap:wrap; }
.fsor-funnel-steps { flex:0 0 300px; display:flex; flex-direction:column; gap:8px; align-items:center; }
.fsor-funnel-step { display:flex; justify-content:space-between; align-items:center; padding:10px 16px; border-radius:4px; color:#fff; font-weight:600; transition:width 0.4s; }
.fsor-funnel-label { font-size:13px; }
.fsor-funnel-val { font-size:20px; font-weight:800; }
.fsor-chart-wrap { flex:1; min-width:250px; }

/* Two column */
.fsor-two-col { display:grid; grid-template-columns:1fr 1fr; gap:24px; }

/* Table */
.fsor-table { width:100%; border-collapse:collapse; font-size:13px; }
.fsor-table th { padding:10px 12px; text-align:left; font-size:11px; font-weight:700; text-transform:uppercase; color:#888; border-bottom:2px solid #e8e8e8; }
.fsor-table td { padding:10px 12px; border-bottom:1px solid #f0f0f0; }
.fsor-table tr:last-child td { border-bottom:none; }
.fsor-table tr:hover td { background:#fafafa; }

/* Buttons */
.fsor-btn { display:inline-flex; align-items:center; gap:4px; padding:8px 16px; border:1px solid #ccc; background:#fff; border-radius:4px; cursor:pointer; font-size:13px; font-weight:600; text-decoration:none; color:#333; }
.fsor-btn-sm { padding:5px 10px; font-size:12px; }
.fsor-btn-primary { background:var(--fsor-primary); border-color:var(--fsor-primary); color:#fff; }

/* Print styles */
@media print {
    .fsor-period-bar, .fsor-controls-bar, .fsor-header-actions { display:none !important; }
    .fsor-section { page-break-inside:avoid; }
    .fsor-two-col { grid-template-columns:1fr 1fr; }
    .fsor-stat-card { border:1px solid #999; }
    body { font-size:12px; }
    canvas { max-height:200px !important; }
}

@media (max-width:768px) {
    .fsor-two-col { grid-template-columns:1fr; }
    .fsor-target-grid { grid-template-columns:repeat(2, 1fr); }
    .fsor-funnel-wrap { flex-direction:column; }
    .fsor-funnel-steps { flex:none; width:100%; }
}

/* Overall conversion note */
.fsor-overall-conv { margin-top:12px; padding:10px 16px; background:#f9e6f3; border-left:3px solid #c5107b; border-radius:4px; font-size:14px; color:#333; }
.fsor-overall-conv strong { color:#c5107b; font-size:16px; }

/* Management Summary Table */
.fsor-mgmt-table { width:100%; border-collapse:collapse; font-size:13px; white-space:nowrap; }
.fsor-mgmt-table th { padding:8px 12px; background:#1a237e; color:#fff; font-size:11px; font-weight:700; text-align:center; border:1px solid #283593; }
.fsor-mgmt-table th.fsor-mgmt-label { text-align:left; background:#0d1b6b; }
.fsor-mgmt-table th.fsor-mgmt-ytd { background:#283593; }
.fsor-mgmt-table td { padding:7px 12px; text-align:center; border:1px solid #e8e8e8; font-weight:600; font-size:12px; }
.fsor-mgmt-table td.fsor-mgmt-label { text-align:left; font-weight:700; }
.fsor-mgmt-table td.fsor-mgmt-ytd { background:#f5f5f5; font-weight:700; }
.fsor-mgmt-table td.fsor-mgmt-future { color:#ccc; }
.fsor-row-overall td { background:#e8eaf6; font-size:13px; }
.fsor-row-division td { background:#fafafa; }
.fsor-row-store td { background:#fff; font-size:11px; font-weight:500; }
.fsor-row-store td.fsor-mgmt-label { padding-left:24px; font-style:italic; }

/* Summary table hierarchy levels */
.fsor-level-overall { font-weight:800 !important; font-size:13px !important; text-transform:uppercase !important; letter-spacing:0.5px !important; }
.fsor-level-division { font-weight:700 !important; font-size:13px !important; }
.fsor-level-region { padding-left:20px !important; font-weight:600 !important; font-size:12px !important; }
.fsor-level-store { padding-left:40px !important; font-weight:400 !important; font-size:12px !important; color:#555 !important; font-style:italic !important; }

/* Row backgrounds — strong visual hierarchy */
.fsor-row-overall td { background:#1a237e !important; color:#fff !important; font-weight:700 !important; border-color:#283593 !important; }
.fsor-row-division td { background:#c5107b !important; color:#fff !important; font-weight:600 !important; border-color:#a00d67 !important; }
.fsor-row-region td { background:#f0f4ff !important; color:#333 !important; border-left:4px solid #5bb8b4 !important; }
.fsor-row-store td { background:#fff !important; color:#444 !important; border-left:4px solid #e0e0e0 !important; }
.fsor-row-store:hover td { background:#f9f9f9 !important; }
/* Keep color overrides working on dark rows */
.fsor-row-overall td[style], .fsor-row-division td[style] { color:#fff !important; }

.fsor-export-bar { display:flex; gap:8px; margin-bottom:12px; justify-content:flex-end; }