.monthly-dashboard-page{--dash-purple:#7043a2;--dash-teal:#087f80;--dash-amber:#a76613;--dash-violet:#9155a5;--dash-surface:#fff;--dash-soft:#edf2fa;--dash-grid:#dce3ee;--dash-shadow:0 4px 20px #17243b05}
.monthly-dashboard-page .monthly-shell{max-width:1280px}
.dashboard-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:32px 0 20px}
.dashboard-hero h1{margin-bottom:8px}.dashboard-hero p{margin-top:0;color:var(--report-muted)}
.dashboard-archive-link{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:44px;white-space:nowrap;text-decoration:none;font-weight:700;font-size:14px}
.dashboard-filters{gap:20px;margin-bottom:28px;box-shadow:var(--dash-shadow);padding:20px 24px 28px}
.dashboard-filters label:first-child{flex:1 1 280px}.dashboard-filters select{font-size:16px;cursor:pointer}.dashboard-filters input{width:100%;min-height:48px;border:1px solid #aab8cd;border-radius:9px;padding:10px}
.month-filter{flex:1 1 250px;min-width:0;display:grid;gap:6px;position:relative}.month-filter>label{display:block}.month-filter small{font-size:12px;color:var(--report-muted);position:absolute;top:100%;padding-top:2px}
.month-picker-trigger{width:100%;min-height:48px;display:flex;align-items:center;gap:12px;cursor:pointer;border:1px solid #aab8cd;background:var(--dash-surface);border-radius:9px;padding:10px 14px;text-align:left;color:var(--report-ink)}
.month-picker-trigger>span{flex:1}.month-picker-trigger>svg:first-child{color:var(--report-blue);flex:none}.month-picker-trigger:hover{border-color:var(--report-blue);background:var(--dash-soft)}
.filter-submit{min-height:48px}.filter-reset{display:inline-flex;align-items:center;min-height:48px;font-size:14px}
.dashboard-heading{display:flex;align-items:end;justify-content:space-between;gap:16px;margin:0 0 20px}.dashboard-heading .eyebrow{margin:0 0 4px}.dashboard-heading h2{font-size:26px;margin:0}.dashboard-period{font-size:13px;color:var(--report-muted);display:flex;gap:8px;align-items:center}.dashboard-period::before{content:"";width:7px;height:7px;background:var(--dash-teal);border-radius:50%;flex:none}
.dashboard-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-bottom:24px}
.dashboard-kpi{padding:24px;border:1px solid var(--report-line);border-radius:18px;background:var(--dash-surface);box-shadow:var(--dash-shadow);min-width:0;border-top:3px solid var(--report-blue)}
.kpi-repair{border-top-color:var(--dash-purple)}.kpi-room{border-top-color:var(--dash-teal)}
.kpi-heading{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.kpi-heading h3{font-size:17px;margin:0}.kpi-icon{display:flex;align-items:center;justify-content:center;width:38px;height:38px;background:var(--dash-soft);border-radius:11px;color:var(--report-blue);flex:none}.kpi-repair .kpi-icon{color:var(--dash-purple);background:#f3edf9}.kpi-room .kpi-icon{color:var(--dash-teal);background:#e9f5f3}.kpi-state{font-size:12px;margin-left:auto;color:var(--report-muted)}
.kpi-value{font-size:42px;font-weight:700;line-height:1.35;margin:20px 0 0;font-variant-numeric:tabular-nums;letter-spacing:-.02em}.kpi-value>span{font-size:14px;font-weight:400;margin-left:10px;letter-spacing:0;color:var(--report-muted)}.kpi-label{margin:0 0 16px;color:var(--report-muted);font-size:14px}
.kpi-secondary{border-top:1px solid var(--report-line);padding-top:12px;display:flex;flex-wrap:wrap;gap:6px 20px;min-height:52px;font-size:13px;color:var(--report-muted)}.kpi-secondary strong{font-size:16px;color:var(--report-ink);margin-left:4px;font-variant-numeric:tabular-nums}.kpi-report{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px;text-decoration:none;font-size:13px;font-weight:700;margin-top:6px}
.dashboard-charts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.dashboard-chart{min-width:0;padding:24px;border:1px solid var(--report-line);background:var(--dash-surface);border-radius:18px;box-shadow:var(--dash-shadow)}.chart-wide{grid-column:span 2}
.chart-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.chart-heading h3{font-size:19px;margin:0;line-height:1.5}.chart-heading .eyebrow{font-size:11px;margin:0 0 8px;color:var(--report-muted);letter-spacing:.1em}.chart-icon{color:var(--report-muted);flex:none}.chart-subtitle,.chart-note,.chart-scale{font-size:13px;color:var(--report-muted)}.chart-subtitle{margin:12px 0 24px}.chart-scale{margin:12px 0 0}.chart-note{border-top:1px solid var(--report-line);padding-top:14px;margin:16px 0 0;line-height:1.7}
.chart-legend{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:13px;margin:20px 0 0;color:var(--report-muted)}.chart-legend>span{display:flex;align-items:center;gap:7px}.chart-key{display:inline-block;width:10px;height:10px;border-radius:3px;flex:none}.series-repair{fill:var(--dash-purple);background:var(--dash-purple)}.series-complete,.series-room{fill:var(--dash-teal);background:var(--dash-teal)}.series-pending{fill:var(--dash-amber);background:var(--dash-amber)}.series-zoom{fill:var(--report-blue);background:var(--report-blue)}.series-recording{fill:var(--dash-violet);background:var(--dash-violet)}
.trend-chart{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin:8px 0 0;gap:4px}.trend-month{min-width:0;display:flex;align-items:center;flex-direction:column;border-radius:8px;padding:0 0 8px}.trend-month.is-current{background:var(--dash-soft)}.trend-bars{width:100%;height:176px;display:block}.chart-gridline{stroke:var(--dash-grid);stroke-width:1;stroke-dasharray:3 4}.trend-month-name{font-size:13px;white-space:nowrap}.trend-month>small{font-size:11px;color:var(--report-muted)}.trend-value{font-weight:700;font-size:16px;font-variant-numeric:tabular-nums;margin-top:4px}.chart-data{margin-top:12px;font-size:13px}.chart-data>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:8px;color:var(--report-blue);font-weight:700;border-radius:6px}.chart-data>summary::before{content:"+";font-size:20px}.chart-data[open]>summary::before{content:"−"}.chart-data p{color:var(--report-muted)}.chart-data caption{text-align:left;padding:12px;font-weight:700}
.room-bars{list-style:none;padding:0;margin:0;display:grid;gap:20px}.room-bars li>div{display:flex;justify-content:space-between;gap:12px;font-size:14px;align-items:baseline}.room-bars strong{font-weight:400;overflow-wrap:anywhere}.room-bars li>div>span{white-space:nowrap;font-weight:700;font-variant-numeric:tabular-nums}.room-bars svg{height:10px;width:100%;display:block;margin:9px 0 5px}.room-bar-track{fill:var(--dash-soft)}.room-bars small{font-size:12px;color:var(--report-muted)}.chart-empty{display:flex;align-items:center;justify-content:center;min-height:180px;border-radius:12px;background:var(--dash-soft);color:var(--report-muted);padding:24px;text-align:center;font-size:14px}
.dashboard-footnote{font-size:13px;color:var(--report-muted);margin:18px 0 0}.report-archive{margin-top:44px;padding-top:32px;border-top:1px solid var(--report-line);scroll-margin-top:24px}.archive-section-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:24px}.archive-section-heading .eyebrow{margin:0 0 6px}.archive-section-heading h2{font-size:25px;margin:0}.archive-section-heading p:last-child{font-size:14px;margin:6px 0 0;color:var(--report-muted)}.archive-section-heading>a{min-height:44px;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;white-space:nowrap}.report-archive .archive-card{padding:24px}.report-archive .archive-card h2{font-size:19px}
.month-picker-dialog{width:min(440px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:24px;border:1px solid var(--report-line);border-radius:22px;color:var(--report-ink);background:#fff;box-shadow:0 24px 80px #17243b33;font-family:WorklogThai,system-ui,sans-serif}.month-picker-dialog::backdrop{background:#17243b70;backdrop-filter:blur(3px)}.month-picker-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.month-picker-heading .eyebrow{margin:0 0 4px;font-size:12px}.month-picker-heading h2{margin:0;font-size:22px}.picker-close,.picker-year-nav>button{border:1px solid var(--report-line);background:#fff;border-radius:10px;width:44px;height:44px;color:var(--report-ink);font-size:28px;cursor:pointer;flex:none}.picker-year-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:24px 0 20px}.picker-year-nav label{display:flex;align-items:center;gap:8px;font-size:14px}.picker-year-nav select{font:700 18px WorklogThai,system-ui,sans-serif;border:1px solid #aab8cd;border-radius:9px;min-height:44px;padding:6px 10px;background:white;color:var(--report-ink);cursor:pointer}.picker-months{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.picker-months button{min-height:48px;border:1px solid var(--report-line);background:var(--report-bg);border-radius:10px;font:14px WorklogThai,system-ui,sans-serif;color:var(--report-ink);cursor:pointer;padding:8px 4px}.picker-months button[aria-pressed="true"]{background:var(--report-blue);border-color:var(--report-blue);color:white;font-weight:700}.picker-months button:hover,.picker-close:hover,.picker-year-nav>button:hover{border-color:var(--report-blue)}.picker-months button:active{transform:scale(.97)}.picker-hint{font-size:13px;color:var(--report-muted);margin:20px 0 12px}.picker-shortcuts{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--report-line);padding-top:12px}.picker-shortcuts button{min-height:44px;padding:8px 12px;border:0;border-radius:8px;background:var(--report-soft);color:var(--report-blue);font:700 14px WorklogThai,system-ui,sans-serif;cursor:pointer}.picker-year-nav button:disabled{opacity:.4;cursor:default}
.dashboard-filters button,.dashboard-archive-link,.picker-months button,.picker-shortcuts button,.kpi-report{transition:background-color .18s ease,border-color .18s ease}.chart-data>summary:focus-visible{outline:3px solid var(--report-blue);outline-offset:4px}
@media(min-width:1000px){.dashboard-kpis:has(>.dashboard-kpi:only-child){grid-template-columns:1fr}.dashboard-kpis:has(>.dashboard-kpi:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1000px){.dashboard-charts{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-charts>.dashboard-chart:first-child{grid-column:span 2}.dashboard-charts>.dashboard-chart:last-child{grid-column:span 2}.dashboard-kpis{gap:12px}.dashboard-kpi{padding:18px}.kpi-heading h3{font-size:16px}.kpi-state{width:100%;margin:0}.kpi-secondary{display:grid}.dashboard-filters{padding-bottom:28px}}
@media(max-width:640px){.dashboard-hero{display:block;padding-top:24px}.dashboard-hero h1{font-size:28px}.dashboard-hero p{font-size:15px}.dashboard-archive-link{justify-content:start}.dashboard-filters{gap:24px 16px;padding:20px;margin-bottom:24px}.dashboard-filters>label:first-child,.month-filter{flex-basis:100%}.dashboard-filters .filter-submit{flex:1}.dashboard-heading{align-items:start;flex-direction:column;gap:8px}.dashboard-heading h2{font-size:24px}.dashboard-kpis{grid-template-columns:1fr;gap:16px}.dashboard-kpi{padding:20px}.kpi-state{width:auto;margin-left:auto}.kpi-value{font-size:38px;margin-top:16px}.kpi-secondary{display:flex;min-height:0}.kpi-heading h3{font-size:17px}.dashboard-charts{grid-template-columns:1fr;gap:16px}.dashboard-charts>.dashboard-chart,.dashboard-charts>.dashboard-chart:first-child,.dashboard-charts>.dashboard-chart:last-child,.chart-wide{grid-column:auto}.dashboard-chart{padding:20px}.chart-heading h3{font-size:18px}.chart-legend{gap:8px 12px}.trend-month-name{font-size:12px}.trend-bars{height:160px}.trend-value{font-size:15px}.archive-section-heading{align-items:start;flex-direction:column;gap:12px}.archive-section-heading h2{font-size:23px}.report-archive{margin-top:32px;padding-top:24px}.month-picker-dialog{padding:20px}.picker-months{gap:8px}.picker-months button{font-size:13px}.dashboard-hero p{max-width:35ch}}
@media(prefers-reduced-motion:reduce){.monthly-dashboard-page *{transition:none!important;animation:none!important}}
.trend-month{position:relative}.trend-month:focus-visible{outline:3px solid var(--report-blue);outline-offset:2px}.chart-tooltip{display:none;position:absolute;bottom:44px;left:0;z-index:2;min-width:180px;padding:12px 14px;background:var(--report-ink);color:#fff;border-radius:10px;box-shadow:0 8px 24px #17243b30;font-size:12px;pointer-events:none;text-align:left}.chart-tooltip>strong{display:block;margin-bottom:6px}.chart-tooltip>span{display:flex;justify-content:space-between;gap:16px;white-space:nowrap;line-height:1.8}.trend-month:nth-last-child(-n+3) .chart-tooltip{left:auto;right:0}.trend-month:hover .chart-tooltip,.trend-month:focus .chart-tooltip{display:block}