@font-face { font-family:Inter; font-style:normal; font-weight:400 700; font-display:swap; src:url('/assets/fonts/inter-normal.woff2') format('woff2'); }
:root { --wine:#641b3a; --magenta:#c52f73; --ink:#29232a; --muted:#665b63; --line:#e8dfe4; --blush:#faf7f8; --soft:#f4eaf0; --font:Inter,Arial,sans-serif; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:#f7f5f6; font:400 16px/1.55 var(--font); }
button,input,select { font:inherit; }
button,a,select,summary { -webkit-tap-highlight-color:transparent; }
button,summary { cursor:pointer; }
a { color:var(--wine); text-decoration:none; }
button { color:inherit; }
h1,h2,h3,p { margin:0; }
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible { outline:3px solid var(--magenta); outline-offset:4px; }
[hidden] { display:none !important; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.icon-library { position:absolute; width:0; height:0; overflow:hidden; }
.icon { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.skip-link { position:fixed; z-index:20; top:10px; left:10px; padding:12px; background:white; border:2px solid var(--wine); transform:translateY(-150%); }
.skip-link:focus { transform:none; }
.sidebar { position:fixed; inset:0 auto 0 0; width:224px; padding:34px 22px 26px; border-right:1px solid var(--line); background:white; display:flex; flex-direction:column; z-index:5; }
.brand { display:inline-block; align-self:flex-start; }
.brand-lockup { display:grid; grid-template-columns:22.5% 72%; column-gap:5.5%; align-items:center; width:178px; }
.brand-image-frame { display:block; position:relative; overflow:hidden; }
.brand-image-frame>img { display:block; position:absolute; max-width:none; height:auto; }
.brand-emblem { aspect-ratio:783/626; }
.brand-emblem>img { width:160.1532567%; left:-34.8659004%; top:-29.7124601%; }
.brand-lettering { aspect-ratio:1158/173; }
.brand-lettering>img { width:108.2901554%; left:-5.4404145%; top:-498.265896%; }
.sidebar-caption { font-size:12px; color:var(--muted); margin:14px 0 40px; }
.dashboard-tabs { display:flex; flex-direction:column; gap:9px; }
.dashboard-tabs>button { min-height:48px; display:flex; align-items:center; gap:12px; padding:11px 14px; border:0; border-radius:9px; background:transparent; color:var(--muted); text-align:left; font-size:15px; font-weight:500; }
.dashboard-tabs>button[aria-selected="true"] { background:var(--soft); color:var(--wine); font-weight:650; }
.dashboard-tabs>button:hover { background:var(--blush); color:var(--wine); }
.sidebar-note { margin:auto 0 24px; padding:23px 0; border-top:1px solid var(--line); }
.small-label,.eyebrow { color:var(--wine); font-size:11px; line-height:1.65; font-weight:650; letter-spacing:1.3px; }
.sidebar-note>p { font-size:13px; color:var(--muted); margin:12px 0 17px; }
.sidebar-note>a { display:flex; align-items:center; justify-content:space-between; gap:5px; font-size:13px; font-weight:650; }
.back-link { display:flex; align-items:center; gap:10px; font-size:14px; min-height:44px; }
.dashboard-main { max-width:1730px; margin-left:224px; padding:36px clamp(22px,3vw,48px) 24px; }
.dashboard-header { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:24px; }
.dashboard-header { flex-wrap:wrap; }
.dashboard-header > div:first-child { flex:1 1 300px; }
.dashboard-actions { display:flex; flex-wrap:wrap; gap:10px; }
.dashboard-actions > .button { flex:1 1 auto; }
.pdf-export-message { color:var(--wine); font-size:14px; padding:13px 16px; background:var(--soft); border-left:3px solid var(--magenta); border-radius:6px; margin-bottom:20px; }
h1 { font-size:clamp(25px,2.3vw,36px); font-weight:600; line-height:1.3; letter-spacing:-1px; margin:8px 0; }
.dashboard-header p:not(.eyebrow) { color:var(--muted); font-size:15px; }
.button { min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:11px 17px; border:1px solid transparent; border-radius:8px; font-size:14px; font-weight:600; text-align:center; line-height:1.5; }
.button-primary { color:white; background:var(--wine); }
.button-primary:hover { background:#451329; }
.button-outline { background:white; border-color:#d7c5cf; color:var(--wine); }
.button-outline:hover { border-color:var(--wine); background:var(--blush); }
button:disabled { opacity:.45; cursor:default; }
.fiction-banner { display:flex; gap:13px; padding:16px 20px; background:var(--soft); border:1px solid #e9d3df; border-radius:10px; margin-bottom:22px; }
.fiction-dot { width:8px; height:8px; margin-top:7px; border-radius:50%; background:var(--magenta); flex-shrink:0; }
.fiction-banner strong { font-size:13px; color:var(--wine); font-weight:650; }
.fiction-banner p { font-size:12px; margin-top:4px; color:var(--muted); line-height:1.65; }
.filter-panel,.panel { background:white; border:1px solid var(--line); border-radius:12px; padding:23px; min-width:0; }
.panel-top { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:21px; }
h2 { font-size:17px; font-weight:650; line-height:1.4; letter-spacing:-.25px; }
.panel-top p { font-size:12px; color:var(--muted); margin-top:5px; line-height:1.7; }
.text-button { background:transparent; border:0; color:var(--wine); display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:0; min-height:34px; font-size:13px; font-weight:600; white-space:nowrap; }
.text-button .icon { width:17px; height:17px; }
.filter-panel .panel-top { align-items:center; margin-bottom:14px; }
.filter-grid { display:grid; grid-template-columns:.7fr 1.1fr 1fr 1fr 1.25fr 1fr; gap:13px; }
.field { min-width:0; }
.field>label,.field-label { display:block; color:var(--muted); font-size:12px; margin-bottom:7px; font-weight:500; }
select,.field summary { width:100%; border:1px solid #d7cbd2; border-radius:7px; background:white; min-height:44px; padding:10px 30px 10px 11px; color:var(--ink); font-size:13px; }
select { overflow:hidden; text-overflow:ellipsis; }
.field summary { list-style:none; display:flex; align-items:center; justify-content:space-between; gap:10px; padding-right:12px; }
.field summary::-webkit-details-marker { display:none; }
.month-field { position:relative; }
.month-popover { position:absolute; z-index:6; top:calc(100% + 8px); left:0; width:285px; max-width:calc(100vw - 44px); background:white; border:1px solid var(--line); border-radius:10px; padding:17px; box-shadow:0 10px 35px #45132920; }
.month-popover fieldset { border:0; margin:0; padding:0; }
.month-actions { display:flex; justify-content:space-between; margin-bottom:11px; }
.month-actions button { border:0; background:transparent; color:var(--wine); padding:5px 0; font-size:13px; font-weight:600; }
.month-checkboxes { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; margin-bottom:15px; }
.month-checkboxes>label { display:flex; align-items:center; gap:6px; padding:8px 3px; font-size:13px; cursor:pointer; }
input[type="checkbox"] { accent-color:var(--wine); width:17px; height:17px; }
.month-popover>.button { width:100%; }
.filter-bottom { display:flex; align-items:center; justify-content:space-between; gap:18px; padding-top:17px; margin-top:19px; border-top:1px solid var(--line); }
.search-field { display:flex; align-items:center; gap:10px; min-width:0; width:min(380px,55%); color:var(--muted); }
.search-field input { min-width:0; width:100%; border:0; background:transparent; font-size:13px; min-height:34px; color:var(--ink); padding:4px; }
.search-field input::placeholder { color:var(--muted); opacity:1; }
#filter-context { font-size:12px; color:var(--muted); text-align:right; }
.metric-heading { display:flex; align-items:center; justify-content:space-between; gap:15px; margin:27px 0 13px; }
.metric-heading h2 { font-size:15px; }
.metric-heading p { font-size:11px; color:var(--muted); }
.kpi-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:13px; margin-bottom:22px; }
.kpi { padding:18px 16px; background:white; border:1px solid var(--line); border-radius:10px; }
.kpi:first-child { border-top:3px solid var(--magenta); padding-top:16px; }
.kpi-label { font-size:12px; color:var(--muted); }
.kpi strong { display:block; font-size:clamp(20px,1.85vw,29px); font-weight:650; letter-spacing:-.9px; line-height:1.2; margin:12px 0 8px; color:var(--wine); white-space:nowrap; }
.kpi small { font-size:10px; color:var(--muted); }
.chart-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(0,1fr); gap:20px; }
.lower-grid { margin-top:20px; }
.segmented { display:flex; background:var(--blush); padding:3px; border:1px solid var(--line); border-radius:7px; }
.segmented button { border:0; border-radius:5px; background:transparent; font-size:12px; min-height:32px; padding:6px 10px; color:var(--muted); }
.segmented button[aria-pressed="true"] { color:var(--wine); background:white; box-shadow:0 1px 4px #45132912; font-weight:600; }
.trend-chart { min-height:220px; display:flex; align-items:center; }
.trend-chart svg { display:block; width:100%; overflow:visible; font-family:var(--font); }
.chart-guide { stroke:var(--line); stroke-width:1; }
.chart-axis { fill:var(--muted); font-size:11px; }
.chart-line { fill:none; stroke:var(--magenta); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round; }
.chart-point { fill:white; stroke:var(--magenta); stroke-width:2; cursor:pointer; }
.chart-point.active { fill:var(--wine); stroke:var(--wine); }
.chart-bar { fill:var(--magenta); cursor:pointer; }
.chart-bar.active { fill:var(--wine); }
.chart-inspect { display:flex; align-items:center; flex-wrap:wrap; gap:10px; border-top:1px solid var(--line); margin-top:10px; padding-top:15px; }
.chart-inspect label { font-size:12px; color:var(--muted); }
.chart-inspect select { width:90px; min-height:36px; padding:6px 18px 6px 9px; }
#month-readout { font-size:12px; color:var(--wine); margin-left:auto; }
.channel-chart { display:flex; flex-direction:column; align-items:center; gap:23px; padding-top:4px; }
.donut { width:162px; height:162px; border-radius:50%; position:relative; display:grid; place-items:center; }
.donut::before { content:''; position:absolute; inset:19px; border-radius:50%; background:white; }
.donut>span { position:relative; text-align:center; color:var(--wine); font-size:22px; font-weight:650; }
.donut small { display:block; color:var(--muted); font-size:11px; font-weight:400; }
.channel-legend { list-style:none; padding:0; margin:0; width:100%; }
.channel-legend>li { display:flex; align-items:center; gap:9px; font-size:12px; padding:7px 0; }
.legend-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.channel-legend strong { margin-left:auto; font-size:12px; font-weight:600; white-space:nowrap; }
.channel-legend small { color:var(--muted); margin-left:5px; font-size:10px; }
.product-ranking { display:grid; gap:15px; }
.ranking-row { display:block; width:100%; border:0; background:transparent; text-align:left; padding:3px 0; border-radius:3px; }
.ranking-row>span:first-child { display:flex; justify-content:space-between; gap:15px; font-size:12px; margin-bottom:8px; }
.ranking-row strong { color:var(--wine); font-size:12px; font-weight:600; }
.ranking-track { display:block; height:7px; border-radius:5px; background:var(--soft); overflow:hidden; }
.ranking-track>span { display:block; height:100%; background:var(--magenta); border-radius:5px; }
.status-summary { display:grid; gap:14px; }
.status-row { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); padding-bottom:13px; font-size:13px; }
.status-row strong { font-size:18px; color:var(--wine); font-weight:600; }
.status-chip { display:inline-flex; align-items:center; padding:4px 9px; border-radius:5px; font-size:11px; font-weight:500; white-space:nowrap; }
.status-chip.completed { color:#245847; background:#edf5f1; }
.status-chip.pending { color:#725019; background:#faf4e7; }
.status-chip.canceled { color:#833c52; background:#f8ebf0; }
.calculation-note { font-size:11px; color:var(--muted); line-height:1.8; padding-top:19px; }
.sort-field { width:185px; flex-shrink:0; }
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
table { border-collapse:collapse; width:100%; text-align:left; font-size:13px; white-space:nowrap; }
th { padding:14px 14px; background:var(--blush); color:var(--muted); font-weight:500; font-size:11px; }
td { padding:17px 14px; border-bottom:1px solid var(--line); }
td:first-child,th:first-child { padding-left:12px; }
.numeric { text-align:right; font-variant-numeric:tabular-nums; }
.table-link { border:0; background:transparent; padding:0; color:var(--wine); font-size:13px; font-weight:600; text-align:left; min-height:30px; }
.table-link:hover { text-decoration:underline; text-underline-offset:4px; }
td small { display:block; color:var(--muted); margin-top:3px; font-size:11px; }
.table-note { font-size:12px; color:var(--muted); margin-top:18px; }
.pagination { display:flex; align-items:center; flex-wrap:wrap; justify-content:space-between; gap:16px; padding-top:20px; font-size:12px; color:var(--muted); }
.page-size,.page-buttons { display:flex; align-items:center; gap:10px; }
.page-size select { width:65px; min-height:38px; padding:6px 17px 6px 9px; }
.page-buttons>.button { font-size:12px; min-height:38px; padding:7px 12px; }
.empty-state { text-align:center; padding:40px 18px; color:var(--muted); font-size:13px; width:100%; line-height:1.8; }
.empty-state strong { display:block; color:var(--wine); font-size:16px; margin-bottom:6px; font-weight:600; }
.dashboard-cta { display:flex; align-items:center; justify-content:space-between; gap:28px; border:1px solid #e8d4df; background:#f0e6eb; border-radius:12px; padding:27px; margin-top:26px; }
.dashboard-cta h2 { font-size:22px; margin:7px 0 9px; color:var(--wine); }
.dashboard-cta p { font-size:13px; color:var(--muted); }
.dashboard-cta>.button { flex-shrink:0; }
.dashboard-footer { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px 22px; margin-top:24px; font-size:10px; color:var(--muted); }
.dashboard-footer>a { font-size:11px; }
.noscript-note { padding:18px; background:white; margin-bottom:20px; border:1px solid var(--magenta); }
#detail-dialog { width:min(560px,calc(100% - 32px)); max-height:calc(100dvh - 32px); margin:auto; padding:52px 30px 30px; border:0; border-radius:15px; color:var(--ink); background:white; overflow:auto; font:400 15px/1.6 var(--font); }
#detail-dialog::backdrop { background:#240e1bbf; }
.dialog-close { position:absolute; top:13px; right:13px; width:38px; height:38px; display:grid; place-items:center; background:var(--blush); border:1px solid var(--line); border-radius:50%; }
#detail-title { font-size:26px; line-height:1.3; color:var(--wine); margin:12px 0 22px; }
.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; padding:20px; margin:18px 0; background:var(--blush); border-radius:9px; }
.detail-grid dt { font-size:12px; color:var(--muted); }
.detail-grid dd { margin:5px 0 0; font-size:16px; color:var(--wine); font-weight:600; }
.detail-note { font-size:12px; color:var(--muted); }
#detail-orders { margin-top:21px; }
body.dialog-open { overflow:hidden; }
@media(min-width:1600px) { .dashboard-main { margin-right:auto; } }
@media(max-width:1320px) { .sidebar { width:200px; padding-inline:17px; } .brand-lockup { width:165px; } .dashboard-main { margin-left:200px; } .kpi-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .kpi strong { font-size:27px; } .filter-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .chart-grid { grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); } }
@media(max-width:1050px) { .chart-grid { grid-template-columns:1fr; } .channel-chart { flex-direction:row; gap:30px; padding:8px 10px; } .donut { width:150px; height:150px; flex-shrink:0; } .lower-grid { grid-template-columns:1fr 1fr; } .dashboard-cta { flex-direction:column; align-items:flex-start; } }
@media(max-width:800px) { .sidebar { position:static; width:100%; padding:20px 22px 12px; border-right:0; border-bottom:1px solid var(--line); flex-direction:row; align-items:center; flex-wrap:wrap; justify-content:space-between; gap:14px; } .brand-lockup { width:175px; } .sidebar-caption,.sidebar-note { display:none; } .back-link { font-size:12px; } .dashboard-tabs { order:3; flex-direction:row; width:100%; gap:7px; } .dashboard-tabs>button { flex:1; justify-content:center; min-height:44px; padding:8px 9px; font-size:13px; } .dashboard-main { margin-left:0; padding:25px 22px; } .dashboard-header { align-items:flex-start; } h1 { font-size:27px; } .dashboard-header>.button { font-size:12px; padding-inline:12px; } .metric-heading { align-items:flex-start; } .metric-heading p { max-width:240px; text-align:right; } }
@media(max-width:560px) { body { font-size:16px; } .sidebar { padding-inline:18px; } .dashboard-main { padding:23px 18px; } .dashboard-header { flex-wrap:wrap; gap:15px; } .dashboard-header p:not(.eyebrow) { font-size:14px; } h1 { font-size:29px; letter-spacing:-.7px; } .dashboard-header>.button { width:100%; font-size:14px; } .fiction-banner { padding:15px; } .fiction-banner strong { font-size:13px; } .fiction-banner p { font-size:12px; } .filter-panel,.panel { padding:18px; } .filter-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 12px; } .field>label,.field-label { font-size:13px; } select,.field summary { font-size:14px; min-height:46px; } .month-popover { left:auto; right:0; } .filter-bottom { flex-direction:column; align-items:flex-start; gap:10px; } .search-field { width:100%; } .search-field input { font-size:14px; } #filter-context { text-align:left; } .metric-heading { flex-direction:column; gap:6px; } .metric-heading p { text-align:left; max-width:none; font-size:12px; } .kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .kpi { padding:17px 13px; } .kpi strong { font-size:26px; } .kpi-label { font-size:13px; } .kpi small { font-size:11px; } .lower-grid { grid-template-columns:1fr; } .panel-top { gap:12px; } h2 { font-size:18px; } .panel-top p { font-size:13px; } .trend-panel .panel-top { flex-wrap:wrap; } .trend-chart { min-height:180px; } .chart-inspect { gap:10px; } #month-readout { width:100%; margin-left:0; font-size:13px; } .channel-chart { flex-direction:column; padding:5px 0; gap:20px; } .donut { width:160px; height:160px; } .channel-legend>li,.ranking-row>span:first-child { font-size:13px; } .status-chip { font-size:12px; } .calculation-note { font-size:12px; } .sort-field { width:100%; } .view-panel>.panel-top { flex-wrap:wrap; } .pagination { gap:18px; font-size:13px; } .page-buttons { width:100%; justify-content:space-between; } .page-buttons>.button { font-size:13px; min-height:44px; } .dashboard-cta { padding:22px; gap:22px; } .dashboard-cta p { font-size:14px; } .dashboard-cta>.button { width:100%; min-height:48px; font-size:15px; } .dashboard-footer { font-size:11px; } #detail-dialog { padding:55px 22px 25px; } .detail-grid { padding:16px; gap:20px 14px; } }
@media print { .sidebar,.filter-panel,.dashboard-cta,.dashboard-header>.button,.pagination button,.segmented,#detail-dialog { display:none!important; } .dashboard-main { margin:0; padding:0; } body { background:white; } .panel,.kpi { break-inside:avoid; } }
@media (max-width:560px) { .dashboard-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; gap:10px; } .dashboard-actions > .button { min-width:0; gap:7px; padding:10px 9px; font-size:13px; line-height:1.45; } .dashboard-actions .icon { width:17px; height:17px; } }
@media print { .dashboard-actions,.pdf-export-message { display:none!important; } }