/* Shared read-only month selection, isolated from weekly actions. */
html body .period-host>.period-toolbar{display:flex!important;justify-content:flex-end;margin:0 0 16px;gap:12px;position:relative;z-index:1}html body .period-modes{display:flex;border:1px solid var(--period-border,#dce4ee);padding:4px;border-radius:12px;gap:4px;background:var(--period-soft,#f1f5fa)}html body .period-modes button{border:0!important;background:transparent!important;color:inherit!important;padding:8px 18px!important;border-radius:8px!important;font-size:14px!important;font-weight:700!important;line-height:1.3!important;min-height:36px}html body .period-modes button[aria-pressed=true]{background:#1873df!important;color:#fff!important}html body .period-month-pane[hidden]{display:none!important}html body .period-host.period-month-active>:not(.period-toolbar):not(.period-month-pane){display:none!important}html body .period-month-nav{display:grid;grid-template-columns:40px minmax(0,260px) 40px;gap:8px;margin-bottom:20px;justify-content:center}html body .period-month-nav button,html body .period-month-nav input{height:44px!important;min-width:0;box-sizing:border-box;background:var(--period-soft,#f1f5fa)!important;border:1px solid var(--period-border,#dce4ee)!important;color:inherit!important;border-radius:10px!important;padding:8px!important;font-size:16px!important;text-align:center!important}html body .period-month-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}html body .period-month-heading h2{margin:0;font-size:22px}html body .period-month-heading span,html body .period-note,html body .period-kpis small{color:var(--period-muted,#667085)}html body .period-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}html body .period-kpis>div{padding:14px;background:var(--period-soft,#f1f5fa);border:1px solid var(--period-border,#dce4ee);border-radius:12px}html body .period-kpis small,html body .period-kpis b{display:block}html body .period-kpis b{font-size:22px;margin-top:6px}html body .period-note{font-size:13px;line-height:1.5;margin:16px 0}html body .period-chart-scroll{overflow:auto;margin:20px 0;-webkit-overflow-scrolling:touch}html body .period-chart{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(26px,1fr);gap:8px;min-width:950px;height:150px;align-items:end}html body .period-chart>div{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px}html body .period-chart i{display:block;background:#3787f5;width:14px;border-radius:5px 5px 0 0}html body .period-groups{display:grid;gap:10px}html body .period-groups details{border:1px solid var(--period-border,#dce4ee);border-radius:12px;padding:14px;background:var(--period-soft,#f1f5fa)}html body .period-groups summary{display:flex;align-items:center;gap:12px;flex-wrap:wrap;cursor:pointer;list-style:none}html body .period-groups summary::-webkit-details-marker{display:none}html body .period-groups summary>b{margin-left:auto}html body .period-groups summary>small{color:#3787f5}html body .period-entry{display:flex;align-items:center;gap:12px;border-top:1px solid var(--period-border,#dce4ee);padding:12px 0;font-size:14px}html body .period-entry>span{flex:1}html body .period-entry span small{display:block;color:var(--period-muted,#667085);margin-top:4px}html body .period-host{--period-soft:#f1f5fa;--period-border:#dce4ee;--period-muted:#667085}html[data-theme=dark] body .period-host,html body.dark .period-host,html body[data-theme=dark] .period-host,html body.agency-dark .period-host,html body[data-employee-theme=dark] .period-host,html.dark body .period-host{--period-soft:#142232;--period-border:#344253;--period-muted:#b4c1d3;color:#edf3ff}html body[data-employee-theme=dark] .period-month-nav input,html body.agency-dark .period-month-nav input,html[data-theme=dark] body .period-month-nav input{color-scheme:dark}@media(max-width:600px){html body .period-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}html body .period-kpis b{font-size:20px}html body .period-month-heading h2{font-size:21px}html body .period-groups summary{gap:8px}html body .period-groups summary>span{font-size:12px}html body .period-entry{font-size:13px;gap:8px}}
html body[data-admin-theme=dark] .period-host{--period-soft:#142232;--period-border:#344253;--period-muted:#b4c1d3;color:#edf3ff}html body[data-admin-theme=dark] .period-month-nav input{color-scheme:dark}
/* Compact month layout across employee, admin and agency. */
html body .period-host>.period-toolbar{margin-bottom:12px}
html body .period-month-nav{width:100%;max-width:360px;margin:0 auto 18px;grid-template-columns:40px minmax(0,1fr) 40px;gap:8px;align-items:center}
html body .period-month-nav>button,html body .period-month-nav>select{width:100%!important;max-width:100%!important;min-width:0!important;height:42px!important;min-height:42px!important;margin:0!important;padding:0 8px!important;box-sizing:border-box!important;align-self:center;line-height:normal!important;background:var(--period-soft)!important;border:1px solid var(--period-border)!important;border-radius:10px!important;color:inherit!important}
html body .period-month-nav>button{display:grid!important;place-items:center!important;font-size:24px!important;font-weight:600!important}
html body .period-month-nav>select{display:block!important;appearance:none!important;-webkit-appearance:none!important;background-image:none!important;text-align:center!important;text-align-last:center!important;font-size:15px!important;font-weight:700!important}
html body .period-month-heading{margin-bottom:12px;gap:6px}html body .period-month-heading h2{font-size:18px!important;margin:0!important}html body .period-month-heading>span{font-size:12px!important}
html body .period-kpis{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
html body .period-kpis>div{padding:10px 12px;min-height:0!important;box-shadow:none}
html body .period-kpis .period-kpi-primary{grid-column:span 2;padding:13px 14px}
html body .period-kpis small{font-size:12px!important;line-height:1.4!important}
html body .period-kpis b{font-size:18px!important;margin-top:4px;line-height:1.2;overflow-wrap:anywhere}
html body .period-kpis .period-kpi-primary b{font-size:25px!important}
html body .period-kpis .period-kpi-finance{grid-column:span 2}
html body .period-kpis .period-rate-missing{font-size:14px!important;color:#a76b00!important}
html body .period-chart-heading,html body .period-list-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:20px}
html body .period-chart-heading h3,html body .period-list-heading h3{font-size:15px!important;margin:0!important}
html body .period-chart-heading span,html body .period-list-heading span{font-size:11px;color:var(--period-muted)}
html body .period-chart-scroll{overflow:visible;margin:12px 0 18px}
html body .period-chart{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);min-width:0!important;width:100%;height:auto;gap:10px;align-items:end}
html body .period-chart>div{min-width:0;gap:8px;font-size:12px}
html body .period-chart>div>b{font-size:12px!important;white-space:nowrap}
html body .period-bar-track{height:105px;width:100%;display:flex;align-items:flex-end;justify-content:center}
html body .period-chart .period-bar-track i{width:22px;max-width:65%;border-radius:5px 5px 0 0;box-shadow:0 3px 8px #1873df18}
html body .period-chart small{text-align:center;line-height:1.35;font-size:10px;color:var(--period-muted)}
html body .period-groups{margin-top:10px;gap:8px}
html body .period-groups details{padding:12px;background:transparent}
html body .period-group-name{min-width:0;flex:1}html body .period-group-name strong{display:block;font-size:14px}
html body .period-group-name span{display:block;font-size:12px;color:var(--period-muted);margin-top:3px}
html body .period-groups summary>b{font-size:15px!important;white-space:nowrap}
html body .period-groups summary>small{font-size:12px}
html body .period-entry{font-size:12px;flex-wrap:wrap}html body .period-entry>small{text-transform:capitalize;color:var(--period-muted)}
html body[data-admin-theme=dark] .period-month-nav select,html body[data-employee-theme=dark] .period-month-nav select,html body.agency-dark .period-month-nav select{color-scheme:dark}
html body[data-admin-theme=dark] .period-kpis .period-rate-missing,html body[data-employee-theme=dark] .period-kpis .period-rate-missing,html body.agency-dark .period-kpis .period-rate-missing{color:#ffd483!important}
@media(max-width:600px){html body .period-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}html body .period-kpis .period-kpi-primary,html body .period-kpis .period-kpi-finance{grid-column:span 1}html body .period-kpis .period-kpi-primary b{font-size:23px!important}html body .period-kpis .period-kpi-finance:last-child:nth-child(odd){grid-column:1/-1}html body .period-kpis .period-kpi-detail{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:9px 10px;background:transparent}html body .period-kpis .period-kpi-detail b{font-size:15px!important;margin:0;white-space:nowrap}html body .period-kpis .period-kpi-detail small{font-size:11px!important}html body .period-chart>div>b{font-size:10px!important}html body .period-chart{gap:6px}html body .period-bar-track{height:90px}html body .period-chart .period-bar-track i{width:18px}html body .period-month-heading{align-items:baseline}html body .period-month-heading h2{font-size:17px!important}}

/* One compact summary card and collapsed weekly details. */
html body .period-host>.period-toolbar{justify-content:stretch;margin-bottom:10px}
html body .period-modes{width:100%;padding:3px}
html body .period-modes button{flex:1;padding:7px 12px!important;min-height:34px}
html body .period-month-nav{max-width:none;margin-bottom:8px;grid-template-columns:34px minmax(0,1fr) 34px;gap:6px}
html body .period-month-nav>button,html body .period-month-nav>select{height:38px!important;min-height:38px!important}
html body .period-month-heading{justify-content:flex-end;margin:0 0 10px}
html body .period-month-heading span{font-size:11px!important}
html body .period-summary-card,html body .period-chart-card,html body .period-weekly-collapse{background:var(--period-card,#fff);border:1px solid var(--period-border);border-radius:14px;box-shadow:0 3px 12px #14223808;padding:14px}
html body .period-summary-card .period-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
html body .period-summary-card .period-kpis>div{border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;grid-column:span 1;padding:8px 0!important}
html body .period-summary-card .period-kpis .period-kpi-primary{padding:0 0 12px!important;border-bottom:1px solid var(--period-border)!important}
html body .period-summary-card .period-kpis .period-kpi-primary:nth-child(2){padding-left:14px!important}
html body .period-summary-card .period-kpis .period-kpi-primary b{font-size:25px!important}
html body .period-summary-card .period-kpis .period-kpi-primary:nth-child(2) b{font-size:20px!important}
html body .period-summary-card .period-kpis .period-kpi-detail{display:flex!important;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:3px;padding:8px 0!important}
html body .period-summary-card .period-kpis .period-kpi-detail:nth-child(even){padding-left:14px!important}
html body .period-summary-card .period-kpis .period-kpi-detail small{font-size:12px!important}
html body .period-summary-card .period-kpis .period-kpi-detail b{font-size:15px!important;margin:0}
html body .period-summary-card .period-kpis .period-kpi-finance{grid-column:1/-1!important;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:7px 0!important}
html body .period-summary-card .period-kpis .period-kpi-finance:nth-child(7){border-top:1px solid var(--period-border)!important;margin-top:4px;padding-top:11px!important}
html body .period-summary-card .period-kpis .period-kpi-finance b{font-size:16px!important;margin:0;white-space:nowrap}
html body .period-summary-card .period-kpis .period-kpi-finance small{font-size:12px!important}
html body .period-income-note{font-size:10px!important;color:var(--period-muted);margin:3px 0 0}
html body .period-chart-card{margin-top:12px}
html body .period-chart-card .period-chart-heading{margin-top:0}
html body .period-chart-card .period-chart-scroll{margin:10px 0 0}
html body .period-chart-card .period-bar-track{height:65px}
html body .period-chart-card .period-chart>div{gap:5px}
html body .period-weekly-collapse{margin-top:12px;padding:12px 14px}
html body .period-weekly-collapse>summary{display:flex;align-items:center;gap:12px;cursor:pointer;list-style:none}
html body .period-weekly-collapse>summary::-webkit-details-marker{display:none}
html body .period-weekly-collapse>summary>div{flex:1}
html body .period-weekly-collapse>summary strong{display:block;font-size:14px}
html body .period-weekly-collapse>summary span{display:block;font-size:11px;color:var(--period-muted);margin-top:4px}
html body .period-weekly-collapse>summary>b{font-size:12px!important;color:#1873df;font-weight:600}
html body .period-weekly-collapse[open]>.period-groups{margin-top:12px;padding-top:4px}
html body .period-approval-note{font-size:10px!important;color:var(--period-muted);margin:9px 0 0}
html body .period-host{--period-card:#fff}
html body[data-admin-theme=dark] .period-host,html body[data-employee-theme=dark] .period-host,html body.agency-dark .period-host{--period-card:#192838}
html body[data-admin-theme=dark] .period-weekly-collapse>summary>b,html body[data-employee-theme=dark] .period-weekly-collapse>summary>b,html body.agency-dark .period-weekly-collapse>summary>b{color:#92c3ff}
@media(min-width:901px){html body .period-summary-card,html body .period-chart-card,html body .period-weekly-collapse{padding:18px}html body .period-chart-card .period-bar-track{height:90px}}

/* Employee month mode must override legacy weekly layout rules. */
html body #hours .week-overview-card.period-host.period-month-active > :not(.period-toolbar):not(.period-month-pane){display:none!important}

/* Desktop period layout; phone layout stays unchanged. */
@media(min-width:1100px){
 html body .period-host>.period-toolbar{justify-content:flex-start!important;margin-bottom:14px!important}
 html body .period-host>.period-toolbar .period-modes{width:200px!important;max-width:100%!important}
 html body .period-month-pane{min-width:0}
 html body .period-month-nav{max-width:420px!important;margin:0 auto 8px!important}
 html body .period-month-body{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:14px;align-items:stretch}
 html body .period-month-body>.period-month-heading,html body .period-month-body>.period-weekly-collapse,html body .period-month-body>.period-approval-note,html body .period-month-body>.period-note{grid-column:1/-1}
 html body .period-month-body>.period-month-heading{margin:0!important}
 html body .period-month-body>.period-summary-card,html body .period-month-body>.period-chart-card{margin:0!important;padding:16px!important;min-width:0;box-sizing:border-box}
 html body .period-month-body>.period-weekly-collapse{margin:0!important;padding:14px 16px!important}
 html body .period-month-body>.period-approval-note{margin:0!important}
 html body .period-chart-card{display:flex;flex-direction:column;justify-content:space-between}
 html body .period-chart-card .period-chart-scroll{margin:16px 0 0!important}
 html body .period-chart-card .period-bar-track{height:120px}
 html body .period-host.period-month-active{align-self:start!important;min-height:0!important;height:auto!important}
 html body #desktopReferenceDashboard .sketch-grid{align-items:start!important}
 html body #dashboard.period-host>.period-toolbar,html body #dashboard.period-host>.period-month-pane{max-width:1240px;margin-left:auto!important;margin-right:auto!important}
 html body #app main #hours .week-overview-card>.period-toolbar{position:static!important}
 html body #app main #hours .week-chart{position:relative!important;height:auto!important;min-height:0!important;margin:0!important;padding:18px 0 0!important;align-items:flex-end!important}
 html body #app main #hours .week-chart .chart-day{position:static!important;display:flex!important;flex-direction:column!important;align-items:center!important;gap:8px!important;flex:1!important;min-width:0!important}
 html body #app main #hours .week-chart .chart-day>b,html body #app main #hours .week-chart .chart-day>span{position:static!important;inset:auto!important;transform:none!important;display:block!important;line-height:1.4!important;margin:0!important}
 html body #app main #hours .week-chart .week-series-group{height:140px!important;margin:0!important;flex:none!important}
 html body #app main #hours .week-overview-card.period-month-active>.week-chart{display:none!important}
}

/* Reuse desktop dashboard cards when switching the period. */
@media(min-width:1100px){
 html body #desktopReferenceDashboard .sketch-grid{grid-auto-rows:1px!important;row-gap:0!important;column-gap:14px!important;align-items:start!important}
 html body #desktopReferenceDashboard .sketch-grid>.sketch-card{align-self:start!important;height:auto!important;margin-bottom:0!important}
 html body #app main #hours .employee-overview-grid{align-items:start!important}
 html body #app main #hours .week-overview-card.period-month-active>.dashboard-week-controls{display:none!important}
 html body #app main #hours .period-host.period-inline-month>:not(.period-toolbar):not(.period-month-pane):not(.dashboard-week-controls):not(#dashboardWeekFeedback):not(#weekChart):not(#weekChartLegend):not(.section-head){display:block!important}
 html body #app main #hours .period-host.period-inline-month>.section-head{display:flex!important}
 html body #app main #hours .period-host.period-inline-month>#weekChartLegend{display:flex!important;flex-wrap:wrap!important;gap:8px 16px!important;margin:12px 0!important;font-size:12px!important}
 html body #desktopReferenceDashboard .period-host.period-inline-month>:not(.period-toolbar):not(.period-month-pane):not(.desktop-hours-week-control):not(.period-inline-chart):not(.period-inline-legend){display:block!important}
 html body #desktopReferenceDashboard .period-host.period-inline-month>.sketch-title{display:flex!important}
 html body #desktopReferenceDashboard .period-host.period-inline-month .desktop-hours-week-control{display:none!important}
 html body #dashboard.period-host.period-inline-month>:not(.period-toolbar):not(.period-month-pane):not(.agency-dashboard-grid):not(#agencyKpiGrid):not(.agency-dashboard-heading){display:block!important}
 html body #dashboard.period-host.period-inline-month>#agencyKpiGrid{display:grid!important}
 html body #dashboard.period-host.period-inline-month>.agency-dashboard-heading{display:flex!important}
 html body #dashboard.period-host.period-inline-month .agency-dashboard-heading>.week-nav,html body #dashboard.period-inline-month .agency-overview-nav{display:none!important}
 html body .period-inline-month>.period-month-pane .period-month-body{display:none!important}
 html body #dashboard.period-inline-month>.period-toolbar,html body #dashboard.period-inline-month>.period-month-pane{max-width:none!important}
 html body #dashboard.period-host>.period-toolbar{max-width:none!important}
 html body .period-inline-month>.period-month-pane{margin-bottom:14px!important}
 html body #desktopReferenceDashboard .period-inline-month>.period-inline-legend{display:flex!important;flex-wrap:wrap!important;gap:8px 16px!important;margin:12px 0!important;font-size:12px!important}
 html body #app main #hours #weekChart.period-inline-chart,html body #desktopReferenceDashboard .period-inline-chart,html body #dashboard #agencyWeekChart.period-inline-chart{display:grid!important;grid-auto-flow:column!important;grid-auto-columns:minmax(0,1fr)!important;grid-template-columns:none!important;gap:14px!important;width:100%!important;height:auto!important;min-height:0!important;margin:14px 0 0!important;padding:0!important;position:static!important}
 html body .period-inline-chart>div{display:flex!important;flex-direction:column!important;align-items:center!important;min-width:0!important;gap:8px!important}
 html body .period-inline-chart>div>b,html body .period-inline-chart>div>small{position:static!important;inset:auto!important;transform:none!important;font-size:12px!important;line-height:1.4!important;color:inherit!important}
 html body .period-inline-chart .period-inline-tracks{display:flex!important;align-items:flex-end!important;justify-content:center!important;height:145px!important;width:100%!important;gap:4px!important}
 html body .period-inline-chart .period-inline-tracks i{display:block!important;width:20px!important;border-radius:5px 5px 0 0!important;background:#3787f5}
 html body .period-inline-chart .period-inline-tracks i.series-night{background:#8052df!important}
 html body .period-inline-chart .period-inline-tracks i.series-additional{background:#f59e0b!important}
}

/* Hide legacy employee week controls in Month on every screen size. */
html body #app main #hours .week-overview-card.period-host.period-month-active > .dashboard-week-controls,
html body #app main #hours .week-overview-card.period-host.period-month-active > #dashboardWeekFeedback{display:none!important}

@media(min-width:1100px){
html body #app main #hours .week-overview-card.period-host.period-inline-month>#weekChart.period-inline-chart,html body #desktopReferenceDashboard .period-host.period-inline-month>.period-inline-chart,html body #dashboard.period-host.period-inline-month #agencyWeekChart.period-inline-chart{display:grid!important;grid-auto-flow:column!important;grid-auto-columns:minmax(0,1fr)!important;grid-template-columns:none!important;height:auto!important;min-height:0!important}
html body #app main #hours .week-overview-card.period-host.period-inline-month>.section-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important}
html body #app main #hours .week-overview-card.period-host.period-inline-month>#weekChartLegend{display:flex!important;flex-wrap:wrap!important;gap:10px 16px!important}
html body #dashboard.period-host.period-inline-month>.agency-dashboard-grid{display:grid!important;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)!important;gap:16px!important;align-items:start!important}
html body #desktopReferenceDashboard .period-host.period-inline-month>.period-inline-legend{display:flex!important;gap:10px 16px!important;flex-wrap:wrap!important}
}

/* Two populated cards must fill the agency monthly surface. */
@media(min-width:901px){
 html body #commission.period-host .period-month-body{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)!important;gap:16px;align-items:stretch}
 html body #commission .period-month-body>:is(.period-month-heading,.period-weekly-collapse,.period-approval-note,.period-note){grid-column:1/-1}
 html body #commission .period-month-body>:is(.period-summary-card,.period-chart-card){margin:0!important;min-width:0;padding:20px!important;box-sizing:border-box}
 html body #commission .period-chart-card{display:flex;flex-direction:column;justify-content:space-between}
 html body #commission .period-chart-card .period-bar-track{height:160px}
 html body #commission>.period-toolbar{justify-content:flex-end!important;margin-bottom:10px!important}
 html body #commission>.period-toolbar .period-modes{width:220px!important}
 html body #commission .period-month-nav{max-width:420px!important;margin:0 0 14px auto!important}
}