/* White dashboard skin. The map keeps its own selectable palette. */
:root {
  color-scheme: light;
  --bg: #f4f7fb;
  --panel: #ffffffed;
  --line: #d8e2ed;
  --text: #18324f;
  --muted: #526b83;
  --cyan: #0d6899;
  --blue: #245d97;
  --amber: #a87725;
  font-size: clamp(14px, .84vw, 20px);
}
body { background: var(--bg); }
button:hover { color: #0d6899; }
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible { outline-color: #2478b6; }

.map-backdrop { background: #edf3f9; }
.map-backdrop:has([data-provider="template"]) { background: linear-gradient(#f4f7fb94,#f4f7fbaa),url('./assets/template-map/terrain.jpg') center/cover no-repeat #edf3f9; }
.map-backdrop:after { background: linear-gradient(180deg,#f4f7fbee 0%,#f4f7fba8 17%,#f4f7fb12 48%,#f4f7fb8c 100%); }
.map-backdrop:has([data-provider="baidu"]):after { background: linear-gradient(180deg,#f4f7fbed 0%,#f4f7fba8 18%,#f4f7fb18 50%,#f4f7fb80 100%); }
.screen { background: none; }
.masthead { background: linear-gradient(180deg,#ffffffb8,transparent); }
.header-line { filter: none;opacity: .67; }
#headerGlow stop:first-child,#headerGlow stop:last-child { stop-color: #a6bdd4; }
#headerGlow stop:nth-child(2) { stop-color: #b18a4d; }
.header-line path:not(:first-child) { stroke: #adc2d7; }
.eyebrow,.brand small { color: #6986a2; }
.title h1 { text-shadow: none; }
.title h1 span { color: #b4873f; }
.title p,.clock span { color: #627b95; }
.brand-symbol i { border-color: #3975a5;background: #e4edf6; }
.brand-symbol i:nth-child(2) { border-color: #b58c4e;background: #f6ecdb; }
.icon-button { background: #fffffff0;border-color: #cfdae7;color: #466480;box-shadow: 0 2px 8px #153a6510; }
.icon-button:hover { background: #ebf3fb;border-color: #8fb2d1; }
.toolbar { padding: 4px 8px;border: 1px solid #dbe5ef;border-radius: 7px;background: #ffffffed;box-shadow: 0 6px 20px #274f7814; }
.nav-button { color: #506b86; }
.nav-button.active { background: #eaf2f9;border-color: #d0e0ed;box-shadow: inset 0 -2px #b28a49;color: #1e578c; }
.nav-button:hover { background: #f0f5fa; }
.demo-badge { color: #9b6b1e; }
.demo-badge i,.status-dot.amber { background: #b68a40;box-shadow: none; }
.status-dot { background: #257baa;box-shadow: none; }
.select-shell,.select-shell select { background: #fff;color: #294c6f; }
.select-shell { border-color: #d3dfeb; }
.select-shell select { color: #294c6f; }

.panel { background: #ffffffec;border-color: #d9e3ee;border-radius: 7px;box-shadow: 0 8px 24px #24486d1a;backdrop-filter: blur(6px); }
.panel:before { background: #b18a4b;box-shadow: none; }
.panel-heading h2>.icon { color: #2b6b9f; }
.panel-meta,.metric-label { color: #647c94; }
.metric { border-color: #e5ecf3; }
.metric-value { color: #245d97; }
.metric:first-child .metric-value { color: #165d91;text-shadow: none; }
.metric:last-child .metric-value { color: #a8782c; }
.metric-detail,.metric-value small { color: #71869b; }
.metric-detail span { color: #1d7593; }
.overview-foot { border-color: #e5ecf3;color: #687f97; }
.search-box { background: #f8fbfe;border-color: #d4e1ec;color: #61819f; }
.search-box input::placeholder,.search-key,.rank-label,.rank-number { color: #748aa0; }
.rank-row { border-color: #e6edf4; }
.rank-row:hover,.rank-row.active { background: #eaf3fb; }
.rank-row.top-three .rank-number { color: #a8782c; }
.rank-count,.rank-footer { color: #657d96; }
.rank-amount { color: #1f4d77; }
.rank-bar { background: #e4ebf2; }
.rank-bar i,.rank-row.top-three .rank-bar i { background: linear-gradient(90deg,#477fae,#c19a5a); }
.rank-pages button { background: #f7fafe;border-color: #d4e0eb; }
.dashboard-clean .empty,.dashboard-clean .trend-empty,.empty { color: #6b8198; }

.map-stage { background: none; }
.map-topline,.map-kpis,.map-location,.map-caption { text-shadow: none; }
.map-title { text-shadow: none; }
.map-title h2 { color: #1b4269; }
.map-title>div>span { color: #6986a2; }
.map-cross { color: #b58b4b; }
.map-source,.map-theme-picker,.map-controls,.map-legend,.map-mode,.south-sea-inset { background: #fffffff0;border-color: #d0deeb;color: #3c5d7c;box-shadow: 0 4px 15px #31587f1c; }
.map-theme-picker option { background: #fff;color: #294c6f; }
.map-source:hover,.map-controls button:hover,.map-mode button:hover { background: #eaf2fa;color: #165f98; }
.map-controls button { border-color: #e2eaf2;color: #3e6284; }
.map-mode button { color: #506e89; }
.map-mode button.selected { background: #e7f0f9;color: #1e5f96; }
.map-location { color: #244b71; }
.map-location small,.map-caption,.map-legend small,.south-sea-inset span { color: #657f99; }
.map-legend { color: #3c5d7c; }
.legend-colors i { background: #d7e5f1; }
.legend-colors i:nth-child(2) { background: #a6c4dc; }
.legend-colors i:nth-child(3) { background: #6797bc; }
.legend-colors i:nth-child(4) { background: #345f8a; }
.legend-colors i:nth-child(5) { background: #bd9756; }
.map-kpi { background: linear-gradient(90deg,#ffffffb8,transparent);border-color: #b48d4e; }
.map-kpi span,.map-kpi strong small { color: #5d7892; }
.map-kpi strong,.map-kpi:nth-child(2) strong,.map-kpi:nth-child(3) strong { color: #1e588a; }
.map-kpi:nth-child(4) strong { color: #a8782c; }
.map-loading { color: #215f91;text-shadow: none; }
.loading-orbit { border-color: #c8dbe9;border-top-color: #22699c; }
.city-marker { color: #1f679a; }
.city-marker.major { color: #bd914a; }
.city-marker i { border-color: #fff;box-shadow: 0 0 0 2px #ffffffb8,0 2px 8px #163a6470; }
.city-marker.major i { background: #bd914a;border-color: #fff; }
.city-marker.active:after { border-color: #b58b4b; }
#national-map[data-theme="gold"] .city-marker .city-label { color: #173e66;text-shadow: 0 1px 2px #fff,0 0 4px #fff,0 0 6px #fff; }
.south-sea-inset:before { border-color: #dce7ef; }
.city-card { background: #fffffff5;border-color: #cadcea;color: #183b5f;box-shadow: 0 12px 32px #284e7729; }
.city-card-top small,.city-card-metrics small,.city-card-progress { color: #66809b; }
.city-card-top button { color: #55718c; }
.city-card-metrics b,.city-card-link { color: #1b6298; }
.city-card-track { background: #dce8f2; }
.city-card-track i { background: #b48a4c; }

.segment { border-color: #d5e1ec;background: #f7fafe; }
.segment button { color: #627c96; }
.segment button.selected { background: #e4eff8;color: #195d91; }
.trend-subtitle,.trend-foot { color: #6b829a; }
.line-key.blue:before { background: #b48a4c; }
.chart-grid { stroke: #cad9e6; }
.chart-tick { fill: #6d8298; }
.chart-line { stroke: #1e75a7; }
.chart-line.previous { stroke: #b48a4c; }
.trend-foot b { color: #206e9d; }
.progress-ring { background: conic-gradient(from -90deg,#2877a5 var(--rate),#dfe9f2 0); }
.progress-ring:before { border-color: #c7d8e7; }
.ring-inner,.type-donut-inner { background: #fff; }
.ring-inner strong,.type-donut-inner strong { color: #1b4d78; }
.ring-inner strong small,.ring-inner>span,.progress-detail>span,.progress-detail>strong small,.type-donut-inner span { color: #71879d; }
.progress-detail>small { color: #2b779e; }
.stage-row { color: #627d96; }
.stage-row>b { color: #315c83; }
.stage-track { background: #e1eaf2; }
.count-badge { background: #f7eddc;color: #936720; }
.text-button { color: #1c6998; }
.alert-row { background: #fffbf4;border-color: #efdfc4;border-left-color: #c39754; }
.alert-row:hover { background: #fcf4e8; }
.alert-symbol,.alert-tag { color: #9b6f2e; }
.alert-title { color: #294866; }
.alert-description,.alert-foot { color: #75869a; }
.alert-tag { background: #f8ecd8;border-color: #e2c99e; }
.type-legend button,.type-foot { color: #627d96; }
.type-legend b,.type-foot b { color: #294f76; }
.type-foot { border-color: #e1eaf2; }
.screen-footer,.screen-footer b { color: #526e89; }
.maplibregl-ctrl-attrib { background: #ffffffe0!important;color: #56718a!important; }
.maplibregl-ctrl-attrib a { color: #245d90!important; }

dialog { background: #fff;border-color: #cbdbe9;color: var(--text);box-shadow: 0 25px 90px #1e385a4d; }
dialog::backdrop { background: #18344f99; }
.modal-top { border-color: #e1e9f1; }
.modal-intro { color: #617a94; }
.modal-controls select,.modal-controls input,.field input,.field select { background: #fff;border-color: #cad9e7;color: #24496d; }
.primary-button { background: #245f91;border-color: #245f91;color: #fff; }
.primary-button:hover { background: #174d7c;color: #fff; }
.data-table th { background: #eaf2f8;border-color: #d6e2ed;color: #3b6285; }
.data-table td { border-color: #e4ebf2;color: #32536f; }
.data-table tr:hover td { background: #f2f7fb; }
.table-progress>i,.compare-bar { background: #e0eaf3; }
.table-progress>i>i,.compare-bar i { background: linear-gradient(90deg,#3a80b1,#c39b5b); }
.status-tag { background: #eaf4f1;color: #28775e; }
.status-tag.warning { background: #fbf0df;color: #916721; }
.table-footer,.compare-row,.field { color: #627d96; }
.table-pagination button { border-color: #d2dfeb; }
.compare-row>span:first-child { color: #8296a9; }
.compare-row b { color: #245f91; }
.settings-card,.detail-metric,.analysis-summary div { background: #f7fafd;border-color: #dbe6ef; }
.settings-card p,.settings-card ol,.detail-metric>span,.analysis-summary span { color: #637e97; }
.settings-card a { color: #1d6698; }
.settings-status { background: #eef7f1;border-color: #c8e3ce;color: #326a43; }
.settings-status.warning { background: #fcf6e9;border-color: #ead9b8;color: #8b6429; }
.detail-metric>b,.analysis-summary strong { color: #205e91; }
.detail-metric>b small { color: #738ba2; }
.toast,.map-error { background: #fff;border-color: #c9dbe9;color: #284d6f;box-shadow: 0 12px 30px #1a3e6633; }
.map-error button { border-color: #9abbd6;color: #1c6799; }
@media(max-width:650px) {
  .map-backdrop:after { background: linear-gradient(180deg,#f4f7fbe9,#f4f7fb50 48%,#f4f7fb8c); }
  .toolbar { padding: 5px; }
}

/* Readable metadata and comfortably sized controls across the dashboard. */
.eyebrow,.brand small,.title p,.clock span { color: #4e6982; }
.panel-meta,.metric-label,.metric-detail,.metric-value small,.overview-foot,
.rank-label,.rank-number,.rank-count,.rank-footer,.trend-subtitle,.trend-foot,
.progress-detail>span,.progress-detail>strong small,.ring-inner>span,
.alert-description,.alert-foot,.type-foot,.type-legend button,
.map-title>div>span,.map-location small,.map-caption,.map-legend small,
.south-sea-inset span,.screen-footer,.screen-footer b { color: #506a83; }
.dashboard-clean .empty,.dashboard-clean .trend-empty,.empty { color: #506a83; }
.screen-footer,.overview-foot,.panel-meta,.trend-subtitle,.trend-foot,
.map-caption,.alert-foot,.rank-footer { font-size: max(11px, .7rem); }
.map-title>div>span,.brand small,.eyebrow { font-size: max(10px, .65rem); }
.nav-button { min-height: 40px;font-size: 13px; }
.icon-button { min-width: 40px;min-height: 40px; }
.select-shell,.select-shell select { min-height: 40px; }
.map-theme-picker select,.map-source { min-height: 40px;font-size: 12px; }
.map-sources .map-source { min-height: 40px; }
.map-sources #map-source { min-width: 40px;min-height: 40px;justify-content: center; }
.map-controls button { width: 42px;height: 42px; }
.map-mode button { min-height: 36px;font-size: 12px; }
.segment button { min-height: 30px;font-size: 11px; }
.alert-foot #alert-policy { min-width: 36px;min-height: 36px;justify-content: center; }
.alert-panel #all-alerts { min-height: 36px; }
.dashboard-clean.data-pending .alert-panel .panel-heading { padding-top: 8px;padding-bottom: 7px; }
.dashboard-clean.data-pending .alert-foot { padding-top: 5px;padding-bottom: 5px; }
.dashboard-clean.data-pending .alert-list .empty { min-height: 0;height: 100%; }
.city-marker .city-label { font-size: max(11px, .75rem); }
.ring-inner>span,.type-donut-inner span { font-size: max(11px, .68rem); }
.maplibregl-ctrl-attrib,.maplibregl-ctrl-attrib a { color: #506a83!important; }

@media (min-width:1101px) and (max-width:2399px) {
  .screen { grid-template-rows: clamp(84px,10.8vh,170px) minmax(50px,4.5vh) minmax(0,1fr) 36px; }
}
@media (min-width:2400px) {
  .screen { grid-template-rows: 10vh minmax(56px,4vh) minmax(0,1fr) 46px; }
}
@media (min-width:651px) and (max-width:1100px) {
  .header-line { left: -16px;width: calc(100% + 32px); }
}
@media (min-width:651px) and (max-width:850px) {
  .toolbar { display: grid;grid-template-columns: 1fr;gap: 7px;padding: 7px 9px; }
  .toolbar nav { height: auto;min-height: 42px;align-items: center; }
  .toolbar .filters { width: 100%;margin: 0;min-height: 40px;justify-content: flex-end; }
}
@media (max-width:650px) {
  .nav-button { min-height: 40px;padding: 8px 6px;font-size: 12px; }
  .filters { gap: 4px; }
  .city-filter select { width: 106px; }
  .filters .icon-button { width: 40px;height: 40px; }
  .select-shell,.select-shell select { min-height: 40px; }
  .map-title h2 { font-size: 14px; }
  .map-title>div>span { font-size: 10px;letter-spacing: .08em; }
  .map-source,.map-theme-picker select { min-height: 40px;font-size: 12px; }
  .segment button { min-height: 36px; }
  .map-controls button { width: 40px;height: 40px; }
  .map-mode button { min-height: 38px;padding: 7px 8px;font-size: 11px; }
  .map-location { font-size: 12px; }
  .map-caption { font-size: 11px;justify-content: flex-end; }
  .map-caption>span:first-child { display: none; }
  .panel-meta,.overview-foot,.alert-foot,.trend-subtitle,.trend-foot,
  .screen-footer,.screen-footer b { font-size: 11px; }
  .city-marker .city-label,.south-sea-inset span { font-size: 10px; }
}