/* Shared layout for the dashboard and gardu analysis. */
body.dashboard-page, body.analysis-page {
  --surface-border: #dae6ef;
  --surface-shadow: 0 4px 18px rgba(14, 62, 96, .045);
  background: #edf3f7;
  padding: 18px;
  line-height: 1.5;
}
body.analysis-page { padding-bottom: 84px; }
.dashboard-page > .container, .analysis-page > .container {
  max-width: 1680px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.dashboard-page .header-bubble-wrapper, .analysis-page .header-bubble-wrapper { margin: 0 0 20px; }
.dashboard-page .quick-menu-card { margin-bottom: 20px; }
.dashboard-page .quick-menu-card .clock-quick-menu .quick-menu-link { min-height: 86px; border-radius: 16px; box-shadow: var(--surface-shadow); }
.dashboard-page .status-dashboard { padding: 22px; border: 1px solid var(--surface-border); border-radius: 18px; box-shadow: var(--surface-shadow); background: #fff; }
.dashboard-page .status-heading { gap: 12px; padding-bottom: 16px; }
.dashboard-page .status-heading h2 { font-size: 18px; }
.dashboard-page .status-circle-chart { margin: 20px 0; padding: 20px; background: #f7fafc; border-color: var(--surface-border); border-radius: 14px; }
.dashboard-page .status-circle-layout { gap: 36px; }
.dashboard-page .status-lists { gap: 16px; }
.dashboard-page .status-list { box-shadow: none; border-radius: 14px; }
.dashboard-page .status-list > header { min-height: 88px; }
.dashboard-page .status-table-scroll { scrollbar-gutter: stable; }
.dashboard-page #history-heading, .analysis-page #history-heading { margin-top: 22px; box-shadow: var(--surface-shadow); }
.dashboard-page #history-heading .history-title-toolbar { font-size: 16px; font-weight: 700; }
.dashboard-page #history-heading .filter-row { gap: 12px; }
.dashboard-page #history-heading .history-filter-field select { height: 44px; }
.dashboard-page #history-heading .history-filter-apply { min-height: 44px; }
.dashboard-page #history-heading table.data-table th:nth-child(n) { width: auto; }
.dashboard-page #history-heading table.data-table,
.analysis-page #history-heading table.data-table { table-layout: auto; }
.dashboard-page .table-responsive, .analysis-page .table-responsive { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.dashboard-page .history-eye, .analysis-page .history-eye { flex-shrink: 0; min-width: 36px; min-height: 36px; }
.analysis-page .filter-box { margin: 0 0 20px; padding: 16px 18px; background: #fff; border: 1px solid var(--surface-border); border-radius: 14px; }
.analysis-page .filter-row select { min-height: 44px; border-radius: 9px; background: #f8fbfd; }
.analysis-page .analysis-section-bubble { margin: 0; padding: 0 18px 18px; border: 1px solid var(--surface-border); border-radius: 18px; background: #f5f9fc; box-shadow: var(--surface-shadow); }
.analysis-page .analysis-section-header { margin: 0 -18px 18px; padding: 17px 20px; background: linear-gradient(110deg,#004b80,#007b9e); border-bottom: 2px solid #ffd044; text-align: left; }
.analysis-page .analysis-section-header h2 { font-size: 17px; letter-spacing: .15px; line-height: 1.5; }
.analysis-page :is(.gardu-map-card,.warning-container-card,.gardu-info-card,.chart-card) { margin: 0 0 18px; border-radius: 14px; border-color: var(--surface-border); box-shadow: none; padding: 18px; }
.analysis-page :is(.gardu-map-heading,.warning-title,.gardu-info-title,.chart-title) { gap: 12px; margin-bottom: 14px; padding-bottom: 12px; font-size: 14px; line-height: 1.5; }
.analysis-page .gardu-map-heading h3 { font-size: 14px; margin: 0; }
.analysis-page .gardu-map-frame { border-radius: 10px; }
.analysis-page .warning-grid { gap: 14px; }
.analysis-page .warning-col { border-radius: 11px; padding: 14px; }
.analysis-page .gardu-info-title { flex-wrap: wrap; }
.analysis-page .gardu-info-last-update { font-weight: 500; line-height: 1.6; }
.analysis-page .gardu-info-grid { gap: 12px; }
.analysis-page .gardu-info-item { padding: 14px 12px; border-radius: 11px; }
.analysis-page .gardu-info-label { font-size: 10px; margin-bottom: 8px; letter-spacing: .2px; }
.analysis-page .gardu-info-value { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.analysis-page .gardu-info-rating { font-size: 12px; }
.analysis-page .chart-title { text-transform: none; border-bottom: 1px solid var(--surface-border); }
.analysis-page .chart-wrapper { height: 310px; }
.analysis-page .load-period-filter { gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.analysis-page .btn-back { left: 18px; right: 18px; width: auto; max-width: 1680px; margin-inline: auto; border-radius: 12px; min-height: 44px; box-shadow: 0 3px 16px #003b6f20; }
:is(.dashboard-page,.analysis-page) :is(select,input,button,a):focus-visible { outline: 3px solid #e7b924; outline-offset: 3px; }
:is(.dashboard-page,.analysis-page) :is(#status-heading,#history-heading) { scroll-margin-top: 16px; }
@media(max-width: 900px) {
  body.dashboard-page, body.analysis-page { padding: 12px; }
  body.analysis-page { padding-bottom: 80px; }
  .dashboard-page .status-dashboard { padding: 16px; }
  .analysis-page .gardu-info-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .analysis-page .gardu-info-grid > .gardu-info-item { grid-column: auto; grid-row: auto; }
  .analysis-page .btn-back { left: 12px; right: 12px; }
}
@media(max-width: 600px) {
  body.dashboard-page, body.analysis-page { padding: 10px; }
  body.analysis-page { padding-bottom: 78px; }
  .dashboard-page .header-bubble-wrapper, .analysis-page .header-bubble-wrapper { margin-bottom: 14px; }
  .dashboard-page .status-dashboard { padding: 12px; border-radius: 14px; }
  .dashboard-page .status-heading h2 { font-size: 16px; }
  .dashboard-page .status-circle-chart { padding: 14px; margin: 14px 0; }
  .dashboard-page .status-circle-layout { gap: 16px; }
  .dashboard-page .status-circle-item { grid-template-columns: 8px minmax(0,1fr) 64px; gap: 9px; font-size: 12px; }
  .dashboard-page .status-circle-item strong { font-size: 18px; }
  .dashboard-page .status-lists { gap: 10px; }
  .dashboard-page .status-list > header { min-height: 94px; }
  .dashboard-page #history-heading .filter-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .analysis-page .analysis-section-bubble { padding: 0 10px 10px; border-radius: 14px; }
  .analysis-page .analysis-section-header { margin: 0 -10px 12px; padding: 14px; }
  .analysis-page .analysis-section-header h2 { font-size: 14px; }
  .analysis-page :is(.gardu-map-card,.warning-container-card,.gardu-info-card,.chart-card) { padding: 12px; margin-bottom: 12px; }
  .analysis-page .warning-grid { grid-template-columns: 1fr; gap: 10px; }
  .analysis-page .warning-title { flex-wrap: wrap; }
  .analysis-page .gardu-info-grid { gap: 8px; }
  .analysis-page .gardu-info-item { padding: 12px 8px; }
  .analysis-page .gardu-info-value { font-size: 16px; }
  .analysis-page .gardu-info-rating { display: block; margin-top: 3px; font-size: 11px; }
  .analysis-page .chart-wrapper { height: 250px; }
  .analysis-page .btn-back { left: 10px; right: 10px; font-size: 12px; }
}

/* SIAGA panel design: quiet surfaces, strong headings and compact navigation. */
body.dashboard-page, body.analysis-page { background:linear-gradient(180deg,#dfeef5 0,#f3f6fa 360px); }
:is(.dashboard-page,.analysis-page) > .container { max-width:1500px; }
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper { border-radius:24px 24px 8px 24px; border-top:0; border-left:5px solid #ffce32; box-shadow:0 12px 32px #003b6f14; }
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .pln-bubble-soft { padding:22px 26px 12px; }
body:is(.dashboard-page,.analysis-page,.input-page) .header-title-group .title-text { font-size:30px; letter-spacing:2px; }
body:is(.dashboard-page,.analysis-page,.input-page) .header-role-panel { border-radius:14px; background:#002e4d55; padding:10px 14px; }
:is(.dashboard-page,.analysis-page) .header-bubble-wrapper .live-clock-card { margin:0 26px; padding:10px 0 18px; }
.dashboard-page .quick-menu-card .clock-quick-menu { gap:12px; }
.dashboard-page .quick-menu-card .clock-quick-menu .quick-menu-link { justify-content:flex-start; background:#fff; border:1px solid #dce7ef; border-radius:14px; min-height:76px; padding:14px 18px; box-shadow:0 4px 12px #003b6f06; }
.dashboard-page .quick-menu-card .clock-quick-menu .quick-menu-link::after { content:none; }
.dashboard-page .quick-menu-card .quick-menu-icon { border-radius:12px; background:#e6f4fa; color:#007bad; width:42px; height:42px; flex-basis:42px; }
.dashboard-page .quick-menu-card .quick-menu-text { font-size:13px; }
.dashboard-page .quick-menu-card .clock-quick-menu .manual-entry-link { background:#00558d; }
.dashboard-page .quick-menu-card .manual-entry-link .quick-menu-icon { background:#ffffff22; color:white; }
.dashboard-page .quick-menu-card .clock-quick-menu .quick-menu-link:hover { border-color:#2399bc; background:#f0faff; }
.dashboard-page .quick-menu-card .clock-quick-menu .manual-entry-link:hover { background:#004575; }
.dashboard-page .status-dashboard { border:0; border-radius:20px; padding:24px; box-shadow:0 8px 28px #003b6f09; }
.dashboard-page .status-heading { border-bottom:0; padding-bottom:4px; }
.dashboard-page .status-heading h2 { border-left:4px solid #f7c52b; padding-left:12px; }
.dashboard-page .status-circle-chart { border:1px solid #dceaf2; background:linear-gradient(110deg,#edf7fb,#fafcfe); border-radius:18px; padding:22px; }
.dashboard-page .status-circle-chart figcaption { font-size:12px; color:#526f84; font-weight:600; }
.dashboard-page .status-circle-legend button.status-circle-item { border:0; border-radius:10px; background:#ffffffa6; margin:6px 0; }
.dashboard-page .status-list { border-top:0; border-left:3px solid var(--accent); border-radius:12px; background:#fff; }
.dashboard-page .status-list > header { background:#fff; border-bottom:1px solid #e7eef4; }
.dashboard-page .status-list h3 span { display:inline-block; margin-top:5px; background:#f0f5f9; border:0; }
.dashboard-page .status-list button[data-status-open] { background:#edf6fb; border:0; box-shadow:none; }
.analysis-page .filter-box { border-left:4px solid #008fb5; box-shadow:0 3px 14px #003b6f06; }
.analysis-page .analysis-section-bubble { border:0; background:transparent; box-shadow:none; padding:0; overflow:visible; }
.analysis-page .analysis-section-header { background:transparent; border:0; margin:26px 0 18px; padding:0 0 0 14px; border-left:4px solid #f5c128; }
.analysis-page .analysis-section-header h2 { color:#124c70; font-size:19px; font-weight:750; }
.analysis-page :is(.gardu-map-card,.warning-container-card,.gardu-info-card,.chart-card) { background:#fff; border:1px solid #e0e9f0; border-radius:18px; box-shadow:0 5px 22px #003b6f06; }
.analysis-page .gardu-info-card { border-top:3px solid #0094b7; }
.analysis-page .gardu-info-item { background:#f4f8fb; border-radius:12px; }
.analysis-page .gardu-info-label { text-transform:none; font-size:12px; font-weight:500; }
.analysis-page .gardu-info-value { font-size:21px; }
.analysis-charts-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-bottom:18px; }
.analysis-page .analysis-charts-grid .chart-card { margin:0; display:flex; flex-direction:column; min-width:0; }
.analysis-page .analysis-charts-grid .chart-wrapper { margin-top:auto; }
.analysis-page .chart-title { min-height:44px; align-items:flex-start; }
:is(.dashboard-page,.analysis-page) #history-heading { border:1px solid #dde7ef; border-radius:18px; box-shadow:0 6px 24px #003b6f07; }
:is(.dashboard-page,.analysis-page) #history-heading :is(.history-title-toolbar,.history-section-header) { background:#fff; color:#164b6c; border-bottom:1px solid #e0eaf1; padding-block:18px; }
:is(.dashboard-page,.analysis-page) #history-heading .history-header-download { background:#eaf5fb; border:1px solid #d6e8f2; color:#006c97; }
:is(.dashboard-page,.analysis-page) #history-heading .history-header-download:hover { background:#d7edf8; }
.analysis-page .btn-back { max-width:1500px; }
@media(max-width:1000px) { .analysis-charts-grid { grid-template-columns:1fr; } }
@media(max-width:600px) {
 body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper { border-radius:18px 18px 6px 18px; }
 body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .pln-bubble-soft { padding:16px 14px 8px; }
 body:is(.dashboard-page,.analysis-page,.input-page) .header-title-group .title-text { font-size:25px; }
 :is(.dashboard-page,.analysis-page) .header-bubble-wrapper .live-clock-card { margin:0 14px; padding-bottom:14px; }
 .dashboard-page .quick-menu-card .clock-quick-menu .quick-menu-link { padding:12px; min-height:72px; gap:9px; }
 .dashboard-page .quick-menu-card .quick-menu-text { font-size:11px; }
 .dashboard-page .status-dashboard { padding:14px; }
 .dashboard-page .status-circle-chart { padding:12px; }
 .analysis-page .analysis-section-header { margin:20px 0 14px; }
 .analysis-page .analysis-section-header h2 { font-size:16px; }
 .analysis-page .gardu-info-value { font-size:18px; }
 .analysis-charts-grid { gap:12px; }
}

/* Compact eye actions and softly accented status tables. */
:is(.dashboard-page,.analysis-page) .history-eye,
.dashboard-page .status-dashboard .status-list button[data-status-open] {
 display:inline-flex; align-items:center; justify-content:center;
 flex:0 0 26px; width:26px; height:26px; min-width:26px; min-height:26px;
 padding:3px; border:0; border-radius:6px; background:#eaf4fa;
 color:#006c98; box-shadow:none; cursor:pointer;
}
:is(.dashboard-page,.analysis-page) .history-eye svg,
.dashboard-page .status-list .status-eye-icon { display:block; width:18px; height:18px; flex-shrink:0; }
:is(.dashboard-page,.analysis-page) .history-eye:hover,
.dashboard-page .status-dashboard .status-list button[data-status-open]:hover { background:#d8edf8; color:#004b78; }
.dashboard-page .status-dashboard .status-list {
 border:1px solid #dce7ef; border-top:3px solid var(--accent);
 border-radius:15px; box-shadow:0 4px 14px #164b6c08;
 background:#fff; overflow:hidden;
}
.dashboard-page .status-dashboard .status-list > header {
 background:linear-gradient(125deg,#f1f7fb,#fff);
 background:linear-gradient(125deg,color-mix(in srgb,var(--accent) 8%,white),white);
 padding:14px 12px; min-height:84px; gap:10px; align-items:center;
 border-bottom:1px solid #e2ebf2;
}
.dashboard-page .status-dashboard .status-list h3 { font-size:12px; line-height:1.5; color:#24465e; font-weight:700; }
.dashboard-page .status-dashboard .status-list h3 span {
 display:table; width:fit-content; margin-top:6px; padding:3px 8px;
 background:#fff; border:1px solid #e1eaf1; border-radius:20px;
 color:var(--accent); font-size:10px; font-weight:600;
}
.dashboard-page .status-dashboard .status-list .status-table-scroll { margin:0 8px 8px; border-radius:0 0 9px 9px; scrollbar-width:thin; }
.dashboard-page .status-dashboard .status-list th { padding:10px 8px; background:#f5f8fb; color:#678094; font-size:10px; font-weight:600; }
.dashboard-page .status-dashboard .status-list td { padding:11px 8px; border-bottom:1px solid #edf2f6; line-height:1.55; font-size:12px; }
.dashboard-page .status-dashboard .status-list tbody tr:nth-child(even) { background:#f7fafc; }
.dashboard-page .status-dashboard .status-list tbody tr:hover { background:#edf6fb; }
.dashboard-page .status-dashboard .status-list td a { color:#175c85; font-weight:700; }
.dashboard-page .status-dashboard .status-list .measurement-pill { border-radius:5px; margin-top:3px; }
.dashboard-page .status-dashboard .change-period-select { width:calc(100% - 24px); margin:10px 12px; border:1px solid #dce7ef; background:#f7fafc; border-radius:8px; }
@media(max-width:600px) {
 .dashboard-page .status-dashboard .status-list > header { padding:11px 9px; min-height:94px; gap:6px; }
 .dashboard-page .status-dashboard .status-list h3 { font-size:11px; }
 .dashboard-page .status-dashboard .status-list .status-table-scroll { margin:0 5px 5px; }
 .dashboard-page .status-dashboard .status-list td { padding:9px 6px; font-size:11px; }
 .dashboard-page .status-dashboard .status-list th { padding:9px 6px; }
}

/* Shared line icons, readable values and grouped measurement details. */
.section-line-icon { width:20px; height:20px; display:inline-block; vertical-align:middle; flex:0 0 20px; margin-right:5px; }
.dashboard-page .status-list td:not(:first-child) { font-variant-numeric:tabular-nums; font-weight:600; }
.dashboard-page .status-list td :is(small,.status-progress) { font-weight:400; }
.dashboard-page .status-list .status-empty { font-weight:400; }
.change-period-buttons { display:flex; gap:4px; margin:10px 12px; padding:3px; background:#edf3f7; border-radius:9px; }
.dashboard-page .status-list .change-period-buttons button { flex:1; min-height:30px; padding:5px 9px; border:0; border-radius:6px; background:transparent; color:#5a7386; font-size:11px; font-weight:600; }
.dashboard-page .status-list .change-period-buttons button[aria-pressed=true] { background:#005c8b; color:white; box-shadow:0 2px 4px #003b6f14; }
.dashboard-page .status-list .change-period-buttons button:hover { color:#004575; background:#dcecf5; }
.dashboard-page .status-list .change-period-buttons button[aria-pressed=true]:hover { color:white; background:#004575; }
.measurement-identity { background:#edf6fb; padding:16px; border:1px solid #dbeaf3; border-radius:12px; }
.measurement-identity h3 { display:inline-block; margin:0 10px 8px 0; color:#00558d; font-size:22px; }
.measurement-period { display:inline-block; padding:3px 8px; background:#fff; border-radius:6px; color:#005b87; font-size:11px; font-weight:700; }
.measurement-identity p { margin:4px 0; color:#567186; font-size:12px; line-height:1.6; }
.measurement-group { margin-top:20px; }
.measurement-group h4 { margin:0 0 10px; font-size:13px; color:#345970; }
#history-body .measurement-group .history-values { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:0; gap:10px; }
#history-body .measurement-group .history-values > div { min-width:0; border:1px solid #dce7ef; background:#f7fafc; padding:13px; border-radius:10px; }
#history-body .measurement-group .history-values dd { margin:7px 0 0; font-size:18px; color:#164e70; overflow-wrap:anywhere; }
#history-body .measurement-group .history-values dd small { font-size:11px; font-weight:500; color:#647d8e; }
#history-body .measurement-group .measurement-results > div { background:#edf6fc; border-top:3px solid #138ab5; }
@media(max-width:560px) {
 #history-body .measurement-group .history-values { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
 #history-body .measurement-group .measurement-results { grid-template-columns:1fr; }
 #history-body .measurement-results > div { display:flex; align-items:center; justify-content:space-between; gap:12px; }
 #history-body .measurement-results dd { margin:0; }
 .measurement-identity { padding:12px; }
}

/* Asmat masthead and refreshed top navigation. */
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper {
 background-image:linear-gradient(100deg,rgba(0,37,68,.38),rgba(0,91,133,.12) 55%,rgba(0,49,80,.28)),url('/static/header-asmat-cenderawasih-v2.png');
 background-position:center,center; background-size:cover; background-repeat:no-repeat;
 border:1px solid #ffffff70; border-top:3px solid #ffce32; border-radius:22px;
 box-shadow:0 10px 28px #003b6f20;
}
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .pln-bubble-soft { padding:24px 26px 14px; }
body:is(.dashboard-page,.analysis-page,.input-page) .header-title-group { text-shadow:0 2px 5px #001d3b88; }
body:is(.dashboard-page,.analysis-page,.input-page) .header-role-panel { background:#002840a8; border:1px solid #ffffff35; }
.dashboard-page .quick-menu-card .clock-quick-menu { grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.dashboard-page .quick-menu-card .clock-quick-menu.has-manual-input { grid-template-columns:repeat(6,minmax(0,1fr)); }
.dashboard-page .quick-menu-card .clock-quick-menu .quick-menu-link {
 position:relative; display:flex; flex-direction:column; justify-content:center; align-items:center;
 gap:10px; min-height:112px; padding:18px 12px; border:1px solid #d4e5ef; border-bottom:3px solid #b8dbe9;
 border-radius:18px; background:linear-gradient(145deg,#fff 25%,#edf7fc);
 box-shadow:0 5px 14px #003b6f09; transition:background .18s,border-color .18s,box-shadow .18s;
}
.dashboard-page .quick-menu-card .quick-menu-icon {
 width:44px; height:44px; flex:0 0 44px; border-radius:14px;
 background:linear-gradient(135deg,#00689b,#009abe); color:white;
 box-shadow:0 4px 9px #007fab24; border:1px solid #ffffff80;
}
.dashboard-page .quick-menu-card .quick-menu-text { text-align:center; color:#174f70; font-weight:700; font-size:12px; }
.dashboard-page .quick-menu-card .clock-quick-menu .quick-menu-link:hover { background:#eaf6fc; border-color:#72bbd4; box-shadow:0 7px 18px #003b6f15; }
.dashboard-page .quick-menu-card .clock-quick-menu .manual-entry-link { background:linear-gradient(135deg,#00588c,#008baa); border-color:#007a9f; border-bottom-color:#ffd044; }
.dashboard-page .quick-menu-card .manual-entry-link .quick-menu-text { color:white; }
.dashboard-page .quick-menu-card .manual-entry-link .quick-menu-icon { background:#ffffff20; box-shadow:none; }
@media(max-width:1050px) {
 .dashboard-page .quick-menu-card .clock-quick-menu,.dashboard-page .quick-menu-card .clock-quick-menu.has-manual-input { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .dashboard-page .quick-menu-card .clock-quick-menu .manual-entry-link { grid-column:auto; }
}
@media(max-width:600px) {
 body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper { border-radius:17px; background-position:center,left center; }
 body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .pln-bubble-soft { padding:16px 14px 10px; }
 .dashboard-page .quick-menu-card .clock-quick-menu,.dashboard-page .quick-menu-card .clock-quick-menu.has-manual-input { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
 .dashboard-page .quick-menu-card .clock-quick-menu .quick-menu-link { flex-direction:row; justify-content:flex-start; min-height:80px; padding:12px 10px; gap:8px; border-radius:13px; }
 .dashboard-page .quick-menu-card .quick-menu-icon { width:36px; height:36px; flex-basis:36px; border-radius:11px; }
 .dashboard-page .quick-menu-card .quick-menu-text { text-align:left; font-size:11px; }
}
@media(prefers-reduced-motion:reduce) { .dashboard-page .quick-menu-card .clock-quick-menu .quick-menu-link { transition:none; } }

/* Subtle Asmat pattern on card surfaces; keep table cells unobstructed. */
.dashboard-page .quick-menu-card .clock-quick-menu .quick-menu-link {
 isolation:isolate;
}
.dashboard-page .quick-menu-card .clock-quick-menu .quick-menu-link::after {
 content:''; position:absolute; inset:0; width:auto; height:auto;
 border:0; border-radius:inherit; z-index:-1; pointer-events:none;
 background:url('/static/header-asmat-cenderawasih-v2.png') left center / auto 210px no-repeat;
 opacity:.07;
}
.dashboard-page .quick-menu-card .clock-quick-menu .manual-entry-link::after { opacity:.22; }
.dashboard-page .status-dashboard .status-list > header {
 position:relative; isolation:isolate; overflow:hidden;
}
.dashboard-page .status-dashboard .status-list > header::before {
 content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
 background:url('/static/header-asmat-cenderawasih-v2.png') right center / auto 180px no-repeat;
 opacity:.055;
}
.dashboard-page .status-circle-chart {
 position:relative; isolation:isolate; overflow:hidden;
}
.dashboard-page .status-circle-chart::before {
 content:''; position:absolute; top:0; bottom:0; left:0; width:130px;
 z-index:-1; pointer-events:none;
 background:url('/static/header-asmat-cenderawasih-v2.png') left center / auto 380px no-repeat;
 opacity:.045; mask-image:linear-gradient(to right,#000,transparent);
}
:is(.dashboard-page,.analysis-page) #history-heading :is(.history-title-toolbar,.history-section-header),
.analysis-page :is(.gardu-map-heading,.warning-title,.gardu-info-title,.chart-title) {
 position:relative; isolation:isolate; overflow:hidden;
}
:is(.dashboard-page,.analysis-page) #history-heading :is(.history-title-toolbar,.history-section-header)::before,
.analysis-page :is(.gardu-map-heading,.warning-title,.gardu-info-title,.chart-title)::before {
 content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
 background:url('/static/header-asmat-cenderawasih-v2.png') right center / auto 160px no-repeat;
 opacity:.045;
}
@media(max-width:600px) {
 .dashboard-page .quick-menu-card .clock-quick-menu .quick-menu-link::after { background-size:auto 150px; }
 .dashboard-page .status-dashboard .status-list > header::before { background-size:auto 140px; }
}

/* New masthead: brand row and an inset clock panel over Asmat artwork. */
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper {
 display:grid; grid-template-columns:minmax(0,1fr) 240px; align-items:center; gap:20px;
 padding:22px 26px; border:1px solid #ffffff55; border-bottom:4px solid #ffcf38; border-top:0;
 border-radius:12px 28px 12px 28px;
 background-image:linear-gradient(95deg,rgba(0,37,66,.52),rgba(0,79,119,.12) 55%,rgba(0,41,72,.45)),url('/static/header-asmat-cenderawasih-v2.png');
 background-size:cover; background-position:center; box-shadow:0 10px 30px #003b6f20;
}
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .pln-bubble-soft {
 display:flex; flex-wrap:wrap; align-items:center; gap:14px; padding:0; min-height:88px;
}
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .pln-brand-mark { width:76px; height:76px; flex:0 0 76px; }
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .header-title-group { padding:0; flex:1; min-width:160px; }
body:is(.dashboard-page,.analysis-page,.input-page) .header-title-group .title-text { font-size:34px; letter-spacing:3px; line-height:1.2; }
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .header-subtitle { margin-top:7px; font-size:10px; letter-spacing:1px; line-height:1.6; }
body:is(.dashboard-page,.analysis-page,.input-page) .header-role-panel { padding:10px 12px; border-radius:10px; background:#002d4ba6; }
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .live-clock-card {
 display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px;
 margin:0; padding:15px 14px; min-height:110px; border:1px solid #ffffff40;
 border-radius:16px; background:#00283e80; box-shadow:inset 0 1px 0 #ffffff15;
}
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .clock-display { order:1; font-size:28px; letter-spacing:2px; text-align:center; margin:0; }
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .date-display { order:2; font-size:11px; text-align:center; margin:0; }
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .animasi-pesan { order:3; font-size:11px; text-align:center; line-height:1.5; margin:5px 0 0; }
@media(max-width:1000px) {
 body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper { grid-template-columns:minmax(0,1fr) 200px; padding:20px; gap:16px; }
 body:is(.dashboard-page,.analysis-page,.input-page) .header-role-panel { width:100%; margin:0; justify-content:space-between; }
}
@media(max-width:600px) {
 body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper { grid-template-columns:minmax(0,1fr); padding:16px; gap:14px; border-radius:12px 22px 12px 22px; }
 body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .pln-brand-mark { width:58px; height:58px; flex-basis:58px; }
 body:is(.dashboard-page,.analysis-page,.input-page) .header-title-group .title-text { font-size:28px; }
 body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .header-subtitle { font-size:9px; letter-spacing:.4px; }
 body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .live-clock-card { min-height:0; padding:12px; gap:4px; }
 body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .clock-display { font-size:24px; }
}

/* Login aligned beneath the brand; original geometric header artwork. */
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper {
 background-image:url('/static/header-asmat-geometric.svg'); background-size:cover; background-position:center;
 border-radius:20px; border-bottom:3px solid #e9c269;
}
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .pln-bubble-soft {
 display:grid; grid-template-columns:76px minmax(0,1fr); column-gap:18px; row-gap:12px;
}
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .pln-brand-mark { grid-column:1; grid-row:1 / 3; align-self:start; }
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .header-title-group { grid-column:2; grid-row:1; min-width:0; }
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .header-role-panel {
 grid-column:2; grid-row:2; justify-self:start; width:auto; max-width:100%; margin:0; padding:0;
 display:flex; flex-wrap:wrap; justify-content:flex-start; gap:12px; background:transparent; border:0;
}
body:is(.dashboard-page,.analysis-page,.input-page) .header-role-status { text-align:left; border:0; padding:0; }
body:is(.dashboard-page,.analysis-page,.input-page) .header-role-panel .btn-role { border-radius:8px; min-height:34px; padding:8px 16px; }
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .live-clock-card { background:#032d4299; border-color:#7cceca55; }
@media(max-width:600px) {
 body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper { background-position:65% center; }
 body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .pln-bubble-soft { grid-template-columns:58px minmax(0,1fr); gap:10px 12px; }
 body:is(.dashboard-page,.analysis-page,.input-page) .header-role-panel .btn-role { padding:7px 12px; }
}

/* Compact account row under logo. */
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .pln-brand-mark { grid-row:1; }
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .header-role-panel { grid-column:1 / -1; grid-row:2; display:flex; align-items:center; gap:12px; }
body:is(.dashboard-page,.analysis-page,.input-page) .header-role-panel .btn-role { order:0; min-height:28px; padding:5px 10px; font-size:11px; border-radius:6px; }
body:is(.dashboard-page,.analysis-page,.input-page) .header-role-status { order:1; display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:0; }
body:is(.dashboard-page,.analysis-page,.input-page) .header-role-value,
body:is(.dashboard-page,.analysis-page,.input-page) .header-user-name { font-size:11px; margin:0; }

/* Keep the sticky table heading flush with its own scroll viewport. */
#status-detail-dialog .status-full-table { padding-top:0; }
#status-detail-dialog table { margin-top:0; border-spacing:0; }
#status-detail-dialog thead { position:sticky; top:0; z-index:2; background:#edf5fa; }
#status-detail-dialog thead th { position:static; background:#edf5fa; }
#status-detail-dialog .change-description { margin:0; padding:12px 0; }

/* Phone chart and legend remain side by side. */
@media(max-width:800px) {
 .dashboard-page .status-circle-chart { padding:10px; }
 .dashboard-page .status-circle-layout { display:grid; grid-template-columns:minmax(0, .8fr) minmax(0,1.2fr); align-items:center; gap:10px; padding:4px 0; }
 .dashboard-page .status-circle-svg { width:100%; max-width:200px; height:auto; }
 .dashboard-page .status-circle-legend { min-width:0; max-width:none; }
 .dashboard-page .status-circle-legend button.status-circle-item { grid-template-columns:6px minmax(0,1fr) auto; gap:5px; min-height:0; padding:7px 5px; margin:4px 0; font-size:10px; line-height:1.4; }
 .dashboard-page .status-circle-item strong { font-size:12px; }
 .dashboard-page .status-circle-item small { font-size:9px; margin-top:2px; }
 .dashboard-page .status-circle-dot { height:6px; }
 .dashboard-page .status-circle-chart figcaption { font-size:11px; margin-bottom:8px; }
}
@media(max-width:380px) {
 .dashboard-page .status-circle-layout { grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); gap:6px; }
 .dashboard-page .status-circle-legend button.status-circle-item { grid-template-columns:5px minmax(0,1fr); }
 .dashboard-page .status-circle-item strong { grid-column:2; text-align:left; }
}

/* Center Login beneath the logo using the same first-column width. */
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .header-role-panel {
 display:grid; grid-template-columns:76px minmax(0,1fr); column-gap:18px; justify-self:stretch;
}
body:is(.dashboard-page,.analysis-page,.input-page) .header-role-panel .btn-role { justify-self:center; }
body:is(.dashboard-page,.analysis-page,.input-page) .header-role-panel .header-role-status { justify-self:start; }
@media(max-width:600px) {
 body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .header-role-panel { grid-template-columns:58px minmax(0,1fr); column-gap:12px; }
}

/* Remove clipped dark image overlays from section titles only. */
:is(.dashboard-page,.analysis-page) #history-heading :is(.history-title-toolbar,.history-section-header)::before,
.analysis-page :is(.gardu-map-heading,.warning-title,.gardu-info-title,.chart-title)::before,
.dashboard-page .status-dashboard .status-list > header::before {
 content:none; background:none;
}

/* Compact phone information panel: summary, phase currents, then percentages. */
@media(max-width:600px) {
 .analysis-page .gardu-info-card { padding:10px; }
 .analysis-page .gardu-info-title { gap:6px; margin-bottom:9px; padding-bottom:8px; }
 .analysis-page .gardu-info-heading { gap:6px; font-size:12px; }
 .analysis-page .gardu-info-period-button { padding:5px 8px; font-size:10px; }
 .analysis-page .gardu-info-last-update { font-size:10px; line-height:1.4; }
 .analysis-page .gardu-info-grid { grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px; }
 .analysis-page .gardu-info-grid > .gardu-info-item { grid-column:span 2; padding:9px 4px; border-radius:8px; }
 .analysis-page .gardu-info-grid > .gardu-info-name { grid-column:1 / 3; grid-row:1; }
 .analysis-page .gardu-info-grid > .gardu-info-capacity { grid-column:3 / 5; grid-row:1; }
 .analysis-page .gardu-info-grid > .gardu-info-total { grid-column:5 / 7; grid-row:1; }
 .analysis-page .gardu-info-grid > .gardu-info-r { grid-column:1 / 3; grid-row:2; }
 .analysis-page .gardu-info-grid > .gardu-info-s { grid-column:3 / 5; grid-row:2; }
 .analysis-page .gardu-info-grid > .gardu-info-t { grid-column:5 / 7; grid-row:2; }
 .analysis-page .gardu-info-grid > .gardu-info-load { grid-column:1 / 4; grid-row:3; }
 .analysis-page .gardu-info-grid > .gardu-info-unbalance { grid-column:4 / 7; grid-row:3; }
 .analysis-page .gardu-info-label { font-size:10px; margin-bottom:4px; letter-spacing:0; line-height:1.3; }
 .analysis-page .gardu-info-value { font-size:13px; line-height:1.4; }
 .analysis-page .gardu-info-rating { font-size:9px; margin-top:1px; }
 .analysis-page .gardu-info-note { font-size:10px; margin:7px 0; line-height:1.4; }
 .analysis-page .gardu-metadata-panel { gap:6px; margin-top:8px; padding:8px; }
 .analysis-page .gardu-metadata-item { padding:6px; min-width:0; }
 .analysis-page .gardu-metadata-label { font-size:10px; }
 .analysis-page .gardu-metadata-value { font-size:11px; overflow-wrap:anywhere; }
 .analysis-page .gardu-metadata-actions { gap:6px; margin-top:8px; flex-wrap:wrap; }
 .analysis-page :is(.gardu-metadata-edit,.gardu-whatsapp-share) { font-size:11px; padding:8px 10px; }
}

/* Compact shared header, especially on phones. */
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper {
 min-height:0; padding:16px 20px; gap:14px; grid-template-columns:minmax(0,1fr) 210px;
}
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .pln-bubble-soft { min-height:0; grid-template-columns:60px minmax(0,1fr); gap:8px 14px; }
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .pln-brand-mark { width:60px; height:60px; flex-basis:60px; }
body:is(.dashboard-page,.analysis-page,.input-page) .header-title-group .title-text { font-size:28px; letter-spacing:2px; }
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .header-subtitle { margin-top:4px; font-size:9px; }
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .header-role-panel { grid-template-columns:60px minmax(0,1fr); column-gap:14px; }
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .live-clock-card { min-height:0; padding:12px; gap:3px; }
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .clock-display { font-size:24px; }
@media(max-width:600px) {
 body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper { grid-template-columns:minmax(0,1fr); padding:12px; gap:9px; border-radius:14px; }
 body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .pln-bubble-soft { grid-template-columns:46px minmax(0,1fr); gap:6px 10px; }
 body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .pln-brand-mark { width:46px; height:46px; flex-basis:46px; }
 body:is(.dashboard-page,.analysis-page,.input-page) .header-title-group .title-text { font-size:23px; line-height:1.15; }
 body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .header-subtitle { font-size:8px; line-height:1.4; letter-spacing:.3px; margin-top:3px; }
 body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .header-role-panel { grid-template-columns:46px minmax(0,1fr); column-gap:10px; }
 body:is(.dashboard-page,.analysis-page,.input-page) .header-role-panel .btn-role { font-size:10px; padding:4px 7px; min-height:26px; }
 body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .live-clock-card { display:grid; grid-template-columns:auto minmax(0,1fr); padding:8px 10px; gap:2px 10px; border-radius:9px; }
 body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .clock-display { grid-column:1; grid-row:1 / 3; font-size:20px; letter-spacing:1px; }
 body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .date-display { grid-column:2; grid-row:1; font-size:9px; text-align:right; }
 body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .animasi-pesan { grid-column:2; grid-row:2; font-size:9px; text-align:right; margin:0; }
}

/* Selected energy wireframe background; retain the compact header layout. */
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper {
 background-color:#031525;
 background-image:linear-gradient(90deg,rgba(0,15,30,.52),rgba(0,15,30,.2)),url('/static/header-energy-wireframe.jpg');
 background-size:cover,cover; background-position:center,center 56%; background-repeat:no-repeat;
}
@media(max-width:600px) {
 body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper { background-position:center,center; }
}

/* Midnight energy theme: continuous artwork with restrained teal lighting. */
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper {
 background-color:#031b30;
 background-image:linear-gradient(100deg,rgba(2,20,39,.94) 0%,rgba(3,35,55,.76) 36%,rgba(3,42,59,.3) 72%,rgba(2,20,39,.48) 100%),radial-gradient(ellipse at 76% 65%,rgba(15,213,205,.22),transparent 65%),url('/static/header-energy-wireframe.jpg');
 background-size:cover,cover,cover;
 background-position:center,center,center 56%; background-repeat:no-repeat;
 border:1px solid #56cbd23d; border-bottom:3px solid #edc653;
 box-shadow:0 8px 24px #03213e24,inset 0 1px 0 #b5f6ff20;
}
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .header-title-group { text-shadow:0 2px 8px #00112080; }
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .title-text { color:#f4fcff; }
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .header-subtitle { color:#bde6ee; }
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .live-clock-card {
 background:linear-gradient(135deg,rgba(11,67,85,.68),rgba(1,24,43,.72));
 border:1px solid #83e6ed35; box-shadow:inset 0 1px 0 #d4ffff15,0 3px 12px #00132120;
 backdrop-filter:blur(4px);
}
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .clock-display { color:#e4ffff; text-shadow:0 0 14px #39dfdf30; }
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .date-display { color:#b9dfe9; }
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .btn-login-admin { background:linear-gradient(135deg,#ffe077,#f2bf38); color:#15354b; border:1px solid #ffe79c; box-shadow:0 2px 7px #00132225; }
@media(max-width:600px) {
 body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper {
 background-image:linear-gradient(110deg,rgba(2,20,39,.9),rgba(3,35,55,.52)),radial-gradient(ellipse at 90% 65%,rgba(15,213,205,.2),transparent 70%),url('/static/header-energy-wireframe.jpg');
 background-position:center,center,center;
 }
}

/* Keep the source artwork near native size rather than stretching it across the header. */
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper {
 background-color:#021727;
 background-image:linear-gradient(90deg,#021727 0%,rgba(2,23,39,.94) 28%,rgba(2,23,39,.1) 68%,rgba(2,23,39,.15)),url('/static/header-energy-wireframe.jpg');
 background-size:100% 100%,auto 300px;
 background-position:center,right center;
 background-repeat:no-repeat;
}
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .live-clock-card { backdrop-filter:none; }
@media(max-width:600px) {
 body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper {
 background-image:linear-gradient(90deg,rgba(2,23,39,.7),rgba(2,23,39,.18)),url('/static/header-energy-wireframe.jpg');
 background-size:cover,cover; background-position:center,center;
 }
}

/* Full-width image without blur or heavy overlays. */
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper {
 background-color:#031525;
 background-image:linear-gradient(90deg,rgba(0,15,30,.28),rgba(0,15,30,.06)),url('/static/header-energy-wireframe.jpg');
 background-size:cover,cover;
 background-position:center,center 55%;
 background-repeat:no-repeat;
 filter:none; backdrop-filter:none;
}
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .live-clock-card {
 background:rgba(1,24,43,.7); backdrop-filter:none; filter:none;
}
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .header-title-group { text-shadow:0 1px 3px #001120; }
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .clock-display { text-shadow:none; }
@media(max-width:600px) {
 body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper { background-position:center,center; }
}

/* Crisp electrical linework, independent of bitmap resolution. */
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper {
 background-color:#04304a;
 background-image:url('/static/header-electric-circuit.svg'),linear-gradient(110deg,#031e35 0%,#064662 65%,#075f70 100%);
 background-size:240px 180px,100% 100%;
 background-position:center,center;
 background-repeat:repeat,no-repeat;
 filter:none; backdrop-filter:none;
 border-color:#53cdd13d; border-bottom-color:#edc653;
}
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .live-clock-card {
 background:rgba(2,27,46,.8); border-color:#80e0e438; backdrop-filter:none;
}

/* Restrained editorial masthead with an asymmetric energy-flow composition. */
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper {
 background:#0b293d url('/static/header-energy-flow.svg?v=4') center / cover no-repeat;
 border:1px solid #ffffff18; border-bottom:1px solid #a6c3ce40;
 border-radius:16px; box-shadow:0 8px 24px #05243a15;
 padding:19px 24px;
}
body:is(.dashboard-page,.analysis-page,.input-page) .header-title-group .title-text { font-size:29px; font-weight:700; letter-spacing:3px; color:#f4f8fb; }
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .header-title-group { text-shadow:none; }
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .header-subtitle { color:#b6cad6; font-size:9px; letter-spacing:1.1px; }
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .live-clock-card {
 background:transparent; border:0; border-left:1px solid #c7e3e226;
 border-radius:0; box-shadow:none; padding:8px 0 8px 22px;
 backdrop-filter:none;
}
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .clock-display { font-family:'Segoe UI',sans-serif; font-weight:500; font-size:27px; letter-spacing:2px; text-shadow:none; color:#edf5f7; }
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .date-display { color:#abc6d0; }
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .animasi-pesan { color:#dbc999; font-weight:400; }
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .btn-login-admin { background:#e1c77f; color:#173446; border:1px solid #e6d49f; box-shadow:none; }
@media(max-width:600px) {
 body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper { padding:12px 14px; border-radius:13px; background-position:62% center; }
 body:is(.dashboard-page,.analysis-page,.input-page) .header-title-group .title-text { font-size:23px; }
 body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .header-subtitle { font-size:8px; letter-spacing:.4px; }
 body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .live-clock-card { border-left:0; border-top:1px solid #c7e3e226; padding:9px 0 0; }
 body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .clock-display { font-size:20px; }
}

/* Plain gradient masthead requested by the user. */
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper {
 background-color:#092c43;
 background-image:linear-gradient(115deg,#071e33 0%,#10435c 55%,#087b87 100%);
 background-size:100% 100%; background-position:center; background-repeat:no-repeat;
}

/* Soft blue and teal surfaces across both pages. */
body.dashboard-page,body.analysis-page { background:linear-gradient(135deg,#d4e7f3 0%,#e0f0f3 55%,#cce4ed 100%); }
.dashboard-page .status-dashboard,.analysis-page :is(.gardu-info-card,.warning-container-card,.gardu-map-card,.chart-card),
:is(.dashboard-page,.analysis-page) #history-heading { background-color:#edf5fb; border-color:#bfd8e8; }
.dashboard-page .status-circle-chart { background:linear-gradient(120deg,#dceef8,#e4f4f2); border-color:#bad8e8; }
.dashboard-page .quick-menu-card .clock-quick-menu .quick-menu-link { background:linear-gradient(135deg,#e4f2fc,#d5edf0); border-color:#b5d7e7; }
.dashboard-page .quick-menu-card .clock-quick-menu .manual-entry-link { background:linear-gradient(135deg,#00588c,#008baa); }
.dashboard-page .status-dashboard .status-list { background:#eaf3fa; border-color:#bed6e5; border-top-color:var(--accent); }
.dashboard-page .status-dashboard .status-list > header { background:linear-gradient(110deg,#d2e7f5,#e0f0f4); border-bottom-color:#bdd6e5; }
.dashboard-page .status-dashboard .status-list th { background:#dbeaf4; color:#355d79; }
.dashboard-page .status-dashboard .status-list tbody tr { background:#eef6fb; }
.dashboard-page .status-dashboard .status-list tbody tr:nth-child(even) { background:#e0edf6; }
.dashboard-page .status-dashboard .status-list tbody tr:hover { background:#cfe7f4; }
:is(.dashboard-page,.analysis-page) #history-heading :is(.history-title-toolbar,.history-section-header) { background:linear-gradient(110deg,#cce3f3,#d6ecef); color:#174d70; }
:is(.dashboard-page,.analysis-page) #history-heading table.data-table th { background:#d7e9f4; }
:is(.dashboard-page,.analysis-page) #history-heading table.data-table tbody tr { background:#edf6fc; }
:is(.dashboard-page,.analysis-page) #history-heading table.data-table tbody tr:nth-child(even) { background:#e1eef7; }
:is(.dashboard-page,.analysis-page) #history-heading table.data-table tbody tr:hover { background:#d1e8f5; }
.analysis-page .filter-box { background:#e5f1f8; border-color:#bcd8e8; }
.analysis-page .gardu-info-item { background:#dcebf5; }
.analysis-page .gardu-info-r { background:#fbe7e8; }
.analysis-page .gardu-info-s { background:#faf1d4; }
.analysis-page .gardu-info-t { background:#dce8fb; }
:is(.dashboard-page,.analysis-page) .status-dialog { background:#edf5fb; }
:is(.dashboard-page,.analysis-page) .status-dialog tbody tr:nth-child(even) { background:#e1eef7; }

/* Bring Data Gardu surfaces into the blue theme. */
.dashboard-page #gardu-directory-dialog { background:#e7f2f9; }
.dashboard-page #gardu-directory-dialog .directory-layout { background:transparent; }
.dashboard-page #gardu-directory-dialog .gardu-directory-item { background:#dcecf6; border-color:#b9d5e6; }
.dashboard-page #gardu-directory-dialog .gardu-directory-item:nth-child(even) { background:#e6f2f8; }
.dashboard-page #gardu-directory-dialog .gardu-directory-item:hover { background:#cce5f3; border-color:#8ebed8; }
.dashboard-page #gardu-directory-dialog .directory-summary { background:linear-gradient(135deg,#d5e9f6,#d9eeee); border-color:#b6d4e5; }
.dashboard-page #catalog-form input,.dashboard-page #catalog-form select { background:#edf6fc; color:#174e73; }
.dashboard-page .quick-menu-card #gardu-directory-open .quick-menu-icon { background:linear-gradient(135deg,#00689b,#009abe); color:white; }

/* PLN-inspired blue, cyan and yellow palette; retain status colors. */
body.dashboard-page,body.analysis-page { background:linear-gradient(135deg,#d9eaf6,#edf6fa 55%,#d6eef0); color:#183b54; }
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper { background:linear-gradient(110deg,#003a70,#005f98 58%,#0098ad); border:1px solid #85cad85c; border-bottom:3px solid #ffcf27; }
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .header-subtitle,
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .date-display { color:#d9f2ff; }
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .animasi-pesan { color:#ffe07b; }
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .btn-login-admin { background:#ffcf27; border-color:#ffdd62; color:#073963; }
.dashboard-page .quick-menu-card .clock-quick-menu .quick-menu-link { background:linear-gradient(135deg,#e9f6ff,#d5eef5); border-color:#b9dce9; border-bottom:3px solid #009cba; }
.dashboard-page .quick-menu-card .quick-menu-icon,
.dashboard-page .quick-menu-card #gardu-directory-open .quick-menu-icon { background:linear-gradient(135deg,#00568c,#00a0bd); color:#fff; }
.dashboard-page .quick-menu-card .quick-menu-text { color:#004b7c; }
.dashboard-page .quick-menu-card .clock-quick-menu .manual-entry-link { background:linear-gradient(135deg,#004b87,#008eaa); border-bottom-color:#ffcf27; }
.dashboard-page .quick-menu-card .manual-entry-link .quick-menu-text { color:white; }
.dashboard-page .quick-menu-card .clock-quick-menu .quick-menu-link:hover { background:#d7eef9; border-color:#68b8d3; }
.dashboard-page .quick-menu-card .clock-quick-menu .manual-entry-link:hover { background:#005f92; }
.dashboard-page .status-heading h2 { color:#004b87; border-left-color:#ffcf27; }
.dashboard-page .status-circle-legend button.status-circle-item { background:#f1f8fc; }
:is(.dashboard-page,.analysis-page) #history-heading :is(.history-title-toolbar,.history-section-header) { background:linear-gradient(110deg,#004b87,#0089a5); color:#fff; border-bottom:2px solid #ffcf27; }
:is(.dashboard-page,.analysis-page) #history-heading .history-header-download { background:#ffffff18; color:#fff; border-color:#ffffff55; }
:is(.dashboard-page,.analysis-page) #history-heading .history-header-download:hover { background:#ffffff30; }
.analysis-page .analysis-section-header { border-left-color:#ffcf27; }
.analysis-page .analysis-section-header h2,.analysis-page .chart-title { color:#004b87; }
.analysis-page .filter-box { border-left-color:#009cba; }
:is(.dashboard-page,.analysis-page) .status-dialog > header { background:linear-gradient(110deg,#004b87,#0089a5); border-bottom:2px solid #ffcf27; }
.analysis-page .btn-back { background:linear-gradient(110deg,#004b87,#007e9e); border-bottom-color:#ffcf27; }

/* Fill the complete menu card: fixed-size nonrepeating artwork left a hard seam. */
.dashboard-page .quick-menu-card .clock-quick-menu .quick-menu-link::after {
 inset:0; width:auto; height:auto; border:0; border-radius:inherit;
 background-size:cover; background-position:center; background-repeat:no-repeat;
}

/* Dark navy-to-teal page canvas with readable data surfaces. */
body.dashboard-page,body.analysis-page {
 background-color:#071b2d;
 background-image:radial-gradient(ellipse at 95% 5%,rgba(0,146,165,.22),transparent 52%),linear-gradient(145deg,#061526 0%,#102e46 55%,#073d49 100%);
 background-attachment:fixed;
}
.analysis-page .analysis-section-header h2 { color:#e0f2fc; }
:is(.dashboard-page,.analysis-page) > .container { background:transparent; }

/* Lighter turquoise-green page gradient. */
body.dashboard-page,body.analysis-page {
 background-color:#95cec7;
 background-image:radial-gradient(ellipse at 15% 0%,rgba(239,255,247,.65),transparent 55%),linear-gradient(135deg,#b8e2d5 0%,#8ecfc8 52%,#69b8be 100%);
 background-attachment:fixed;
}
.analysis-page .analysis-section-header h2 { color:#004b67; }

/* Moderately deeper teal-green canvas. */
body.dashboard-page,body.analysis-page {
 background-color:#589f9c;
 background-image:radial-gradient(ellipse at 15% 0%,rgba(215,247,233,.25),transparent 55%),linear-gradient(135deg,#8ac4b6 0%,#5ba8a2 52%,#3c858f 100%);
}

/* User-selected contour artwork over a navy and teal page background. */
body.dashboard-page,body.analysis-page {
 background-color:#061727;
 background-image:linear-gradient(135deg,rgba(4,19,37,.2),rgba(5,65,70,.3)),url('/static/background-contour-teal.jpg');
 background-size:100% 100%,cover; background-position:center; background-repeat:no-repeat; background-attachment:fixed;
}
.analysis-page .analysis-section-header h2 { color:#e1f5fb; }
@media(max-width:600px) {
 body.dashboard-page,body.analysis-page { background-attachment:scroll; background-size:100% 100%,674px auto; background-repeat:no-repeat,repeat-y; }
}

/* Brighter teal gradient blended with the same contour artwork. */
body.dashboard-page,body.analysis-page {
 background-color:#286776;
 background-image:linear-gradient(135deg,#57938f 0%,#347f8b 55%,#225a78 100%),url('/static/background-contour-teal.jpg');
 background-blend-mode:screen,normal;
}

/* Updated flowing contour reference with a light teal lift. */
body.dashboard-page,body.analysis-page {
 background-color:#245b70;
 background-image:linear-gradient(135deg,#356f75 0%,#22647a 55%,#174963 100%),url('/static/background-flow-teal.jpg');
 background-blend-mode:screen,normal;
}

/* Selected geometric teal background, preserving the supplied colors. */
body.dashboard-page,body.analysis-page {
 background-color:#075470;
 background-image:url('/static/background-geometric-teal.jpg');
 background-blend-mode:normal;
 background-size:cover; background-position:center; background-repeat:no-repeat;
 background-attachment:fixed;
}
@media(max-width:600px) {
 body.dashboard-page,body.analysis-page { background-attachment:scroll; background-size:100% auto; background-repeat:repeat-y; background-position:center top; }
}

/* Restored polygon artwork with a translucent gradient veil. */
body.dashboard-page,body.analysis-page {
 background-color:#237f8b;
 background-image:linear-gradient(135deg,rgba(218,249,241,.24),rgba(110,190,199,.12) 55%,rgba(8,76,99,.16)),url('/static/background-polygon-hd.png');
 background-blend-mode:normal;
 background-size:100% 100%,cover; background-position:center; background-repeat:no-repeat; background-attachment:fixed;
}
@media(max-width:600px) {
 body.dashboard-page,body.analysis-page { background-size:100% 100%,auto 100vh; background-attachment:fixed; }
}

/* Soft layered shadows lift cards off the patterned page canvas. */
.dashboard-page .status-dashboard,
.analysis-page :is(.gardu-map-card,.warning-container-card,.gardu-info-card,.chart-card),
:is(.dashboard-page,.analysis-page) #history-heading {
 box-shadow:0 3px 7px rgba(0,35,61,.09),0 12px 28px rgba(0,35,61,.14);
}
.dashboard-page .quick-menu-card .clock-quick-menu .quick-menu-link {
 box-shadow:0 3px 6px rgba(0,35,61,.1),0 9px 18px rgba(0,35,61,.15),inset 0 1px 0 rgba(255,255,255,.6);
}
.dashboard-page .quick-menu-card .clock-quick-menu .quick-menu-link:hover {
 box-shadow:0 5px 10px rgba(0,35,61,.12),0 13px 24px rgba(0,35,61,.18);
}
.dashboard-page .status-dashboard .status-list {
 box-shadow:0 2px 4px rgba(0,45,74,.06),0 6px 14px rgba(0,45,74,.1);
}
.dashboard-page .status-circle-chart { box-shadow:0 3px 12px rgba(0,45,74,.08); }
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper { box-shadow:0 4px 9px rgba(0,27,49,.16),0 14px 30px rgba(0,27,49,.2); }
@media(max-width:600px) {
 .dashboard-page .status-dashboard,
 .analysis-page :is(.gardu-map-card,.warning-container-card,.gardu-info-card,.chart-card),
 :is(.dashboard-page,.analysis-page) #history-heading { box-shadow:0 2px 5px rgba(0,35,61,.09),0 7px 16px rgba(0,35,61,.13); }
}

/* Keep navigation appearance stable on hover and touch. */
.dashboard-page .quick-menu-card .clock-quick-menu .quick-menu-link,
.dashboard-page .quick-menu-card .clock-quick-menu .quick-menu-link:hover {
 background:linear-gradient(135deg,#e9f6ff,#d5eef5);
 border-color:#b9dce9; border-bottom-color:#009cba;
 box-shadow:0 3px 6px rgba(0,35,61,.1),0 9px 18px rgba(0,35,61,.15),inset 0 1px 0 rgba(255,255,255,.6);
 transition:none; animation:none; transform:none; filter:none;
}
.dashboard-page .quick-menu-card .clock-quick-menu .manual-entry-link,
.dashboard-page .quick-menu-card .clock-quick-menu .manual-entry-link:hover {
 background:linear-gradient(135deg,#004b87,#008eaa); border-color:#007a9f; border-bottom-color:#ffcf27;
}
.dashboard-page .quick-menu-card .quick-menu-link .quick-menu-icon,
.dashboard-page .quick-menu-card .quick-menu-link:hover .quick-menu-icon {
 background:linear-gradient(135deg,#00568c,#00a0bd); color:#fff;
 box-shadow:0 4px 9px #007fab24; transition:none; animation:none; transform:none; filter:none;
}
.dashboard-page .quick-menu-card .manual-entry-link .quick-menu-icon,
.dashboard-page .quick-menu-card .manual-entry-link:hover .quick-menu-icon { background:#ffffff20; box-shadow:none; }

/* Pie slices retain their geometry when focused with the keyboard. */
.status-circle-svg.status-pie-svg [data-status-open]:focus-visible { stroke-width:104; filter:brightness(1.15) drop-shadow(0 0 3px #004b87); }
.status-pie-svg { filter:drop-shadow(0 5px 7px #003b6f20); }

.status-pie-collection { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; width:100%; }
.dashboard-page .status-circle-layout:has(.status-pie-collection) { grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); max-width:1100px; gap:24px; }
.status-pie-card { text-align:center; min-width:0; }
.status-pie-heading { display:block; min-height:36px; font-size:12px; font-weight:700; color:#245571; }
.status-pie-card .status-pie-svg { width:100%; height:auto; }
.status-pie-percent { fill:#003f66; font-size:23px; font-weight:700; }
.status-pie-card small { display:block; color:#496a80; font-size:11px; }
@media(max-width:800px) {
 .dashboard-page .status-circle-layout:has(.status-pie-collection) { grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:12px; }
 .status-pie-collection { grid-template-columns:1fr; gap:12px; }
 .status-pie-card .status-pie-svg { max-width:135px; margin:auto; }
 .status-pie-heading { min-height:0; font-size:10px; }
 .status-pie-card small { font-size:9px; }
}
.single-pie-wrap { min-width:0; width:100%; }
.single-status-pie { width:100%; height:auto; display:block; overflow:visible; }
.slice-percent { fill:white; font-size:15px; font-weight:700; paint-order:stroke; stroke:#123c5370; stroke-width:2px; }
.slice-label { font-size:11px; font-weight:600; }
.single-status-pie [data-status-open] { cursor:pointer; }
.single-status-pie [data-status-open]:focus-visible { outline:none; stroke:#ffc72c; stroke-width:4px; }
.pie-basis-note { display:block; text-align:center; font-size:10px; color:#506b7e; }
.dashboard-page .status-circle-layout:has(.single-pie-wrap) { grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); max-width:1200px; gap:20px; }
@media(max-width:700px) {
 .dashboard-page .status-circle-layout:has(.single-pie-wrap) { grid-template-columns:1fr; gap:12px; }
 .slice-label { font-size:12px; }
}

/* Balanced pie presentation with tidy two-line callouts. */
.dashboard-page .status-circle-layout:has(.single-pie-wrap) { grid-template-columns:minmax(0,1.7fr) minmax(260px,1fr); align-items:center; gap:28px; }
.single-pie-wrap { padding:8px 0; }
.single-status-pie { filter:drop-shadow(0 5px 5px #003b6f12); }
.slice-percent { font-family:'Segoe UI',sans-serif; font-size:16px; font-weight:700; stroke-width:2px; letter-spacing:.1px; }
.slice-label { font-family:'Segoe UI',sans-serif; font-size:12px; font-weight:600; }
.single-status-pie [data-status-open] { transition:filter .15s; }
.single-status-pie [data-status-open]:hover { filter:brightness(1.08); }
.pie-basis-note { max-width:430px; margin:0 auto; line-height:1.5; color:#617888; font-size:10px; }
.dashboard-page .status-circle-layout:has(.single-pie-wrap) .status-circle-legend button { margin:8px 0; padding:12px; border:1px solid #cfdfeb; border-radius:10px; }
@media(max-width:700px) {
 .dashboard-page .status-circle-layout:has(.single-pie-wrap) { grid-template-columns:1fr; gap:12px; }
 .single-pie-wrap { padding:0; }
 .slice-percent { font-size:18px; }
 .slice-label { font-size:13px; }
 .dashboard-page .status-circle-layout:has(.single-pie-wrap) .status-circle-legend { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
 .dashboard-page .status-circle-layout:has(.single-pie-wrap) .status-circle-legend button { margin:0; grid-template-columns:6px minmax(0,1fr); padding:9px; }
 .dashboard-page .status-circle-layout:has(.single-pie-wrap) .status-circle-item strong { grid-column:2; text-align:left; }
}
@media(prefers-reduced-motion:reduce) { .single-status-pie [data-status-open] { transition:none; } }

/* Tight chart composition and nonrectangular keyboard focus on slices. */
.single-status-pie [data-status-open]:focus { outline:none; }
.single-status-pie [data-status-open]:focus-visible { outline:none; stroke:#ffcf27; stroke-width:4px; }
.dashboard-page .status-circle-layout:has(.single-pie-wrap) { grid-template-columns:minmax(0,1.45fr) minmax(250px,1fr); max-width:980px; gap:8px; }
.single-pie-wrap { padding:0; }
.dashboard-page .quick-menu-card .clock-quick-menu .quick-menu-link { min-height:76px; padding:10px 12px; gap:7px; border-radius:12px; }
.dashboard-page .quick-menu-card .clock-quick-menu .quick-menu-icon { width:32px; height:32px; flex-basis:32px; border-radius:9px; }
.dashboard-page .quick-menu-card .quick-menu-icon svg { width:19px; height:19px; }
.dashboard-page .quick-menu-card .quick-menu-text { font-size:11px; }
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper,
:is(.dashboard-page,.analysis-page) #history-heading :is(.history-title-toolbar,.history-section-header),
:is(.dashboard-page,.analysis-page) .status-dialog > header {
 background-image:linear-gradient(90deg,rgba(6,19,56,.48),rgba(0,65,78,.32)),url('/static/title-teal-glow-hd.png');
 background-color:#123c55; background-size:cover; background-position:center; color:#fff;
}
.dashboard-page .status-dashboard .status-list > header,
.analysis-page :is(.gardu-info-title,.chart-title,.warning-title,.gardu-map-heading) {
 background-image:linear-gradient(90deg,#eaf4faf0,#eaf4fae3),url('/static/title-teal-glow-hd.png');
 background-size:cover; background-position:center;
}
@media(max-width:700px) {
 .dashboard-page .status-circle-layout:has(.single-pie-wrap) { grid-template-columns:1fr; gap:6px; }
 .dashboard-page .quick-menu-card .clock-quick-menu .quick-menu-link { min-height:62px; padding:9px; gap:7px; }
}



/* Fit both glossy edges to the actual main header boundaries. */
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper {
 background-size:100% 100%,100% 100%;
 background-position:center;
 background-repeat:no-repeat;
}

/* Quiet dark teal gradient with a subtle diagonal line motif. */
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper,
:is(.dashboard-page,.analysis-page) #history-heading :is(.history-title-toolbar,.history-section-header),
:is(.dashboard-page,.analysis-page) .status-dialog > header {
 background-color:#103e50;
 background-image:repeating-linear-gradient(125deg,transparent 0 31px,rgba(156,226,229,.045) 32px,transparent 33px 64px),linear-gradient(110deg,#102b40 0%,#124b59 58%,#176571 100%);
 background-size:auto;
 background-position:center;
 color:#fff;
}
.dashboard-page .status-dashboard .status-list > header,
.analysis-page :is(.gardu-info-title,.chart-title,.warning-title,.gardu-map-heading) {
 background-image:repeating-linear-gradient(125deg,transparent 0 31px,rgba(22,94,111,.035) 32px,transparent 33px 64px),linear-gradient(110deg,#e5eff3,#d8ebee);
 background-size:auto;
 background-position:center;
}

/* Opaque, edge-to-edge title bars on analysis panels. */
.analysis-page :is(.gardu-map-card,.warning-container-card,.gardu-info-card,.chart-card) {
 --panel-inset:18px;
 padding:var(--panel-inset);
 overflow:hidden;
}
.analysis-page :is(.gardu-map-heading,.warning-title,.gardu-info-title,.chart-title) {
 margin:calc(-1 * var(--panel-inset)) calc(-1 * var(--panel-inset)) 16px;
 padding:14px var(--panel-inset);
 width:auto;
 max-width:none;
 border-radius:0;
 border-bottom:2px solid #f4ca39;
 background-color:#123e50;
 background-image:repeating-linear-gradient(125deg,transparent 0 31px,rgba(156,226,229,.045) 32px,transparent 33px 64px),linear-gradient(110deg,#102b40,#124b59 58%,#176571);
 color:#fff;
 opacity:1;
 align-items:center;
}
.analysis-page :is(.gardu-map-heading h3,.gardu-info-heading,.chart-title,.warning-title) { color:#fff; }
.analysis-page :is(.gardu-info-last-update,.warning-last-measured) { color:#d9edf2; }
@media(max-width:600px) {
 .analysis-page :is(.gardu-map-card,.warning-container-card,.gardu-info-card,.chart-card) { --panel-inset:12px; }
 .analysis-page .gardu-info-card { --panel-inset:10px; }
 .analysis-page :is(.gardu-map-heading,.warning-title,.gardu-info-title,.chart-title) { padding:12px var(--panel-inset); margin-bottom:12px; }
}

/* Slow ambient motion on the main masthead only. */
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper {
 background-color:#102b40;
 background-image:linear-gradient(90deg,rgba(5,23,39,.15),rgba(5,23,39,.08)),url('/static/header-motion.gif');
 background-size:100% 100%;
 background-position:center;
 background-repeat:no-repeat;
}
@media(prefers-reduced-motion:reduce) {
 body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper {
  background-image:linear-gradient(110deg,#102b40,#124b59 58%,#176571);
 }
}

/* Simple inline titles for status, information and charts. */
.analysis-page :is(.warning-title,.gardu-info-title,.chart-title) {
 background:none;
 border:0;
 margin:0 0 14px;
 padding:0;
 min-height:0;
 color:#124b59;
 overflow:visible;
}
.analysis-page :is(.warning-title,.gardu-info-title,.chart-title)::before,
.analysis-page :is(.warning-title,.gardu-info-title,.chart-title)::after { content:none; }
.analysis-page .gardu-info-heading { color:#124b59; }
.analysis-page :is(.gardu-info-last-update,.warning-last-measured) { color:#526d7b; }

/* Explicit contrast for titles after removing their dark bars. */
body.analysis-page :is(.warning-title,.gardu-info-title,.gardu-info-heading,.chart-title) {
 color:#12394d;
 text-shadow:none;
}
body.analysis-page .warning-title > span:not(.warning-last-measured),
body.analysis-page .gardu-info-heading > span:not(.gardu-info-period-tabs) { color:#12394d; }
body.analysis-page :is(.gardu-info-last-update,.warning-last-measured) { color:#486172; }
body.analysis-page .chart-title .section-line-icon { color:#08768a; }

/* Static circuit detail on upper navigation cards. */
.dashboard-page .quick-menu-card .clock-quick-menu .quick-menu-link::after {
 content:'';
 background:url('/static/menu-circuit.svg') right center / cover no-repeat;
 opacity:.18;
 mask-image:none;
 transform:none;
 animation:none;
 transition:none;
 pointer-events:none;
}
.dashboard-page .quick-menu-card .clock-quick-menu .manual-entry-link::after { opacity:.38; }

/* Colored card titles above the status tables. */
.dashboard-page .status-dashboard .status-list > header {
 background:linear-gradient(110deg,#e1effa,#d4eeed);
 border-bottom:2px solid #a7d8dd;
 color:#244b60;
}
.dashboard-page .status-dashboard .status-list > header h3 { color:#244b60; }
.dashboard-page .status-dashboard .status-list > header h3 span { background:#e1f2f5; color:#124759; }
.dashboard-page .status-dashboard .status-list > header button { background:#e1f2f5; color:#12546a; border-color:#b7dce5; }

/* User-selected curved blue motif for table card titles only. */
.dashboard-page .status-dashboard .status-list > header,
:is(.dashboard-page,.analysis-page) #history-heading :is(.history-title-toolbar,.history-section-header) {
 background-color:#103955;
 background-image:linear-gradient(90deg,rgba(5,24,41,.12),rgba(5,24,41,.04)),url('/static/table-title-curved-blue.jpg');
 background-size:cover;
 background-position:center;
 background-repeat:no-repeat;
 color:#fff;
 border-bottom-color:#83bdcd;
}
.dashboard-page .status-dashboard .status-list > header h3 { color:#fff; }
.dashboard-page .status-dashboard .status-list > header h3 span { background:#e1f2f5; color:#124759; }

/* Match the location card title to the table title motif. */
body.analysis-page .gardu-map-heading {
 background-color:#103955;
 background-image:linear-gradient(90deg,rgba(5,24,41,.12),rgba(5,24,41,.04)),url('/static/table-title-curved-blue.jpg');
 background-size:cover;
 background-position:center;
 background-repeat:no-repeat;
 color:#fff;
 border-bottom-color:#83bdcd;
}
body.analysis-page .gardu-map-heading h3 { color:#fff; }

/* Soft PLN teal tint over the supplied polygon motif. */
.dashboard-page .status-dashboard .status-list > header,
:is(.dashboard-page,.analysis-page) #history-heading :is(.history-title-toolbar,.history-section-header),
body.analysis-page .gardu-map-heading {
 background-color:#007f80;
 background-image:linear-gradient(110deg,rgba(0,117,117,.80),rgba(26,158,145,.68)),url('/static/table-title-polygon.jpg');
 background-size:cover;
 background-position:center;
 background-repeat:no-repeat;
 color:#fff;
 border-bottom-color:#9ad8c8;
}
.dashboard-page .status-dashboard .status-list > header h3,
body.analysis-page .gardu-map-heading h3 { color:#fff; }

/* Original flowing-light motion, recolored to match the teal table titles. */
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper {
 background-color:#087f7e;
 background-image:linear-gradient(90deg,rgba(0,28,35,.18) 0%,rgba(3,40,67,.38) 55%,rgba(5,25,61,.85) 100%),url('/static/header-motion-teal.gif');
 background-size:100% 100%;
 background-position:center;
 background-repeat:no-repeat;
 animation:none;
}
@media(prefers-reduced-motion:reduce) {
 body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper {
  background-image:linear-gradient(90deg,#086469,#105569 55%,#071f40);
 }
}

/* Selected navy artwork for table titles inside Status Gardu only. */
.dashboard-page .status-dashboard .status-list > header {
 background-color:#061735;
 background-image:url('/static/status-table-title-teal-waves.jpg');
 background-size:cover;
 background-position:center;
 background-repeat:no-repeat;
 color:#fff;
 border-bottom-color:#427da5;
}
.dashboard-page .status-dashboard .status-list > header h3 { color:#fff; }

/* White luminous waves and right-to-left snow on the main header. */
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper {
 background-image:url('/static/header-motion-snow.gif');
 background-size:100% 100%;
 background-position:center;
}
@media(prefers-reduced-motion:reduce) {
 body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper {
  background-image:linear-gradient(90deg,#086469,#105569 55%,#071f40);
 }
}

/* Smooth browser-rendered motion replaces the low-frame-rate GIF. */
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper {
 position:relative; isolation:isolate; overflow:hidden;
 background-image:linear-gradient(90deg,#086469,#105569 55%,#071f40);
}
.header-motion-canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; }
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper > :not(.header-motion-canvas) { position:relative; z-index:1; }

/* Soft translucent gradient over the selected green ring motif. */
.dashboard-page .status-dashboard .status-list > header {
 background-color:#e0eeed;
 background-image:linear-gradient(110deg,rgba(216,237,235,.30),rgba(161,213,205,.16)),url('/static/status-table-green-rings.jpg');
 background-size:cover;
 background-position:center;
 background-repeat:no-repeat;
 border-bottom-color:#83bdb7;
 color:#fff;
}
.dashboard-page .status-dashboard .status-list > header h3 { color:#fff; }

.analysis-page .chart-wrapper[hidden] { display:none; }
.analysis-page .period-comparison-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.analysis-page .period-comparison-panel { min-width:0; border:1px solid #c5dce2; border-radius:12px; padding:12px; background:#f1f8fa; }
.analysis-page .period-comparison-panel h4 { margin:0 0 12px; color:#155b70; text-align:center; }
.analysis-page .period-comparison-panel p { font-size:12px; color:#526d7b; }
.analysis-page .period-comparison-panel .chart-wrapper { height:290px; }
@media(max-width:600px) {
 .analysis-page .period-comparison-grid { gap:6px; }
 .analysis-page .period-comparison-panel { padding:5px; border-radius:8px; }
 .analysis-page .period-comparison-panel .chart-wrapper { height:260px; }
}

.analysis-page .comparison-legend { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px; }
.analysis-page .comparison-legend h4 { margin:0 0 6px;color:#155b70;font-size:12px; }
.analysis-page .comparison-legend button { display:flex;align-items:center;gap:7px;width:100%;min-height:36px;padding:5px 0;border:0;background:transparent;color:#345366;font-size:11px;text-align:left;cursor:pointer; }
.analysis-page .comparison-legend button[aria-pressed=false] { opacity:.45;text-decoration:line-through; }
.comparison-legend-line { width:22px;flex:0 0 22px;border-top:3px solid; }

/* Compact comparison legend aligned with the standard chart legend. */
.analysis-page .comparison-legend { width:fit-content;max-width:100%;margin:6px auto 0;column-gap:18px;row-gap:0; }
.analysis-page .comparison-legend h4 { font-size:12px;margin:0 0 3px;text-align:center; }
.analysis-page .comparison-legend button { width:auto;min-height:24px;padding:2px 0;gap:6px;font-size:12px;line-height:1.3; }
.analysis-page .comparison-legend-line { width:40px;flex-basis:40px;border-top-width:2px; }
@media(max-width:576px) {
 .analysis-page .comparison-legend { column-gap:12px; }
 .analysis-page .comparison-legend h4 { font-size:9px;margin-bottom:2px; }
 .analysis-page .comparison-legend button { font-size:8px;min-height:24px;gap:5px; }
 .analysis-page .comparison-legend-line { width:18px;flex-basis:18px; }
}

/* Consistent analysis charts and measurement history spacing. */
.analysis-page .chart-card { padding:18px; }
.analysis-page .chart-title { gap:8px;margin-bottom:14px;line-height:1.5; }
.analysis-page .load-period-filter { display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px;padding:0;background:none;border:0; }
.analysis-page .load-period-chip { min-height:36px;padding:8px 13px;border:1px solid #bfd5df;border-radius:8px;background:#eef6f8;color:#24546a;font-size:12px;cursor:pointer; }
.analysis-page .load-period-chip.is-active { background:#126879;color:white;border-color:#126879; }
.analysis-page .load-period-note { margin:0 0 14px;font-size:11px;line-height:1.5;color:#58717d; }
.analysis-page .chart-wrapper { height:320px;min-width:0; }
.analysis-page .comparison-legend { gap:0 20px;margin:10px auto 0;padding-top:8px;border-top:1px solid #dce8ed; }
.analysis-page .comparison-legend.single-period-legend { grid-template-columns:minmax(0,1fr); }
.analysis-page .comparison-legend h4 { font-size:11px;font-weight:600;margin-bottom:4px; }
.analysis-page .comparison-legend button { font-size:11px;min-height:30px; }
.analysis-page .comparison-legend button:focus-visible { outline:2px solid #16879a;outline-offset:2px;border-radius:3px; }
.analysis-page #history-heading table.data-table th,
.analysis-page #history-heading table.data-table td { padding:12px 10px;vertical-align:middle;text-align:left;line-height:1.45; }
.analysis-page #history-heading table.data-table th { font-size:12px;white-space:nowrap; }
.analysis-page #history-heading table.data-table td { font-size:12px; }
.analysis-page #history-heading .table-responsive { border-radius:10px; }
@media(max-width:600px) {
 .analysis-page .chart-card { padding:12px; }
 .analysis-page .load-period-chip { font-size:11px;padding:7px 10px; }
 .analysis-page .chart-wrapper { height:280px; }
 .analysis-page .comparison-legend { column-gap:14px; }
 .analysis-page .comparison-legend button { font-size:10px;min-height:32px; }
 .analysis-page .comparison-legend h4 { font-size:10px; }
 .analysis-page #history-heading table.data-table td,
 .analysis-page #history-heading table.data-table th { padding:10px 8px;font-size:11px; }
}

/* HD geometric artwork for table and location title bars only. */
.dashboard-page .status-dashboard .status-list > header,
:is(.dashboard-page,.analysis-page) #history-heading :is(.history-title-toolbar,.history-section-header),
body.analysis-page .gardu-map-heading {
 background-color:#195d75;
 background-image:linear-gradient(90deg,rgba(5,26,51,.12),rgba(5,45,54,.22)),url('/static/table-title-geometric-hd.png');
 background-size:cover;
 background-position:center;
 background-repeat:no-repeat;
 color:#fff;
 border-bottom-color:#8bcbd0;
}
.dashboard-page .status-dashboard .status-list > header h3,
body.analysis-page .gardu-map-heading h3 { color:#fff; }

/* Matching Status Gardu title treatment and compact mobile layout. */
body.analysis-page .warning-title,
body.dashboard-page .status-dashboard > .status-heading {
 background-color:#195d75;
 background-image:linear-gradient(90deg,rgba(5,26,51,.12),rgba(5,45,54,.22)),url('/static/table-title-geometric-hd.png');
 background-size:cover;
 background-position:center;
 color:#fff;
 border-bottom:2px solid #8bcbd0;
 padding:14px 16px;
 border-radius:10px;
 gap:8px 12px;
 display:flex;
 flex-wrap:wrap;
 align-items:center;
}
body.analysis-page .warning-title { margin:calc(-1 * var(--panel-inset)) calc(-1 * var(--panel-inset)) 14px;padding:14px var(--panel-inset);border-radius:0; }
body.analysis-page .warning-title > span:not(.warning-last-measured),
body.dashboard-page .status-dashboard > .status-heading h2 { color:#fff; }
body.analysis-page .warning-title .warning-last-measured,
body.dashboard-page .status-dashboard > .status-heading > span { color:#e6f4f8; }
@media(max-width:600px) {
 body.dashboard-page .status-dashboard > .status-heading { padding:12px;gap:5px;align-items:flex-start; }
 body.dashboard-page .status-dashboard > .status-heading h2 { font-size:14px;line-height:1.4;margin:0; }
 body.dashboard-page .status-dashboard > .status-heading > span { flex-basis:100%;font-size:11px;line-height:1.4; }
 body.analysis-page .warning-title { padding:12px var(--panel-inset);gap:5px;font-size:12px; }
 body.analysis-page .warning-title .warning-last-measured { flex-basis:100%;font-size:10px;line-height:1.5; }
 .dashboard-page .status-dashboard .status-list > header { gap:8px;align-items:center; }
 .dashboard-page .status-dashboard .status-list > header h3 { min-width:0;overflow-wrap:break-word;line-height:1.5; }
 .dashboard-page .status-dashboard .status-list > header button { flex-shrink:0; }
 body.analysis-page .gardu-map-heading { gap:8px; }
 body.analysis-page .gardu-map-heading h3 { font-size:12px;line-height:1.5; }
}

/* Flush home status banner, matching the history section geometry. */
body.dashboard-page .status-dashboard { --status-inset:24px;padding:var(--status-inset);overflow:hidden; }
body.dashboard-page .status-dashboard > .status-heading {
 margin:calc(-1 * var(--status-inset)) calc(-1 * var(--status-inset)) 16px;
 padding:16px var(--status-inset);
 border-radius:0;
 background-image:linear-gradient(90deg,rgba(5,26,51,.32),rgba(5,45,54,.32)),url('/static/table-title-geometric-hd.png');
}
body.dashboard-page .status-dashboard > .status-heading h2 { color:#fff;opacity:1;margin:0; }
/* Analysis status remains a plain title on a light surface. */
body.analysis-page .warning-container-card > .warning-title {
 background:none;border:0;border-radius:0;margin:0 0 14px;padding:0;color:#12394d;
}
body.analysis-page .warning-container-card > .warning-title > span:not(.warning-last-measured) { color:#12394d; }
body.analysis-page .warning-container-card > .warning-title .warning-last-measured { color:#486172; }
body.analysis-page .gardu-info-card .gardu-info-heading,
body.analysis-page .gardu-info-card .gardu-info-name .gardu-info-value { color:#12394d; }
body.analysis-page .gardu-map-card .gardu-map-heading h3 { color:#fff;opacity:1; }
@media(max-width:600px) {
 body.dashboard-page .status-dashboard { --status-inset:14px; }
 body.dashboard-page .status-dashboard > .status-heading { padding:12px var(--status-inset); }
}

/* High-contrast status month and count on the patterned heading. */
body.dashboard-page .status-dashboard > .status-heading > span {
 color:#fff;
 opacity:1;
 background:#10374de6;
 border:1px solid #ffffff40;
 border-radius:7px;
 padding:6px 10px;
 font-weight:600;
 line-height:1.5;
}
@media(max-width:600px) {
 body.dashboard-page .status-dashboard > .status-heading > span {
  flex-basis:auto;
  max-width:100%;
  font-size:11px;
 }
}

/* Soft gradient over HD blue facets for Status Gardu table titles. */
.dashboard-page .status-dashboard .status-list > header {
 background-color:#cfe3ef;
 background-image:linear-gradient(110deg,rgba(220,239,246,.27),rgba(20,65,100,.20)),url('/static/status-table-blue-facets-hd.png');
 background-size:cover;
 background-position:center;
 background-repeat:no-repeat;
 border-bottom-color:#8ec3d5;
 color:#fff;
}
.dashboard-page .status-dashboard .status-list > header h3 { color:#fff;text-shadow:0 1px 2px #10374d60; }

/* Compact status tables and title cards. */
.dashboard-page .status-dashboard .status-list > header { min-height:68px;padding:9px 10px;gap:6px; }
.dashboard-page .status-dashboard .status-list > header h3 { font-size:11px;line-height:1.4; }
.dashboard-page .status-dashboard .status-list > header h3 span { font-size:10px;margin-top:4px;padding:2px 6px; }
.dashboard-page .status-dashboard .status-list th { font-size:10px;padding:7px 7px; }
.dashboard-page .status-dashboard .status-list td { font-size:11px;padding:7px 7px;line-height:1.4; }
.dashboard-page .status-dashboard .status-list td :is(small,.measurement-pill,.status-progress) { font-size:9px; }
.dashboard-page .status-dashboard .status-lists { gap:12px; }
@media(max-width:600px) {
 .dashboard-page .status-dashboard .status-list > header { min-height:64px;padding:8px; }
 .dashboard-page .status-dashboard .status-list > header h3 { font-size:10px; }
 .dashboard-page .status-dashboard .status-list td { font-size:10px;padding:6px; }
 .dashboard-page .status-dashboard .status-list th { font-size:9px;padding:6px; }
}

/* Smaller upper navigation with usable touch targets. */
.dashboard-page .quick-menu-card .clock-quick-menu .quick-menu-link {
 min-height:60px;padding:8px 10px;gap:6px;border-radius:10px;
}
.dashboard-page .quick-menu-card .clock-quick-menu .quick-menu-icon {
 width:27px;height:27px;flex-basis:27px;border-radius:8px;
}
.dashboard-page .quick-menu-card .quick-menu-icon svg { width:16px;height:16px; }
.dashboard-page .quick-menu-card .quick-menu-text { font-size:10px;line-height:1.3; }
@media(max-width:600px) {
 .dashboard-page .quick-menu-card .clock-quick-menu .quick-menu-link { min-height:50px;padding:7px;gap:5px; }
 .dashboard-page .quick-menu-card .clock-quick-menu .quick-menu-icon { width:24px;height:24px;flex-basis:24px; }
 .dashboard-page .quick-menu-card .quick-menu-text { font-size:10px; }
}

/* Compact pie chart and adjacent summary cards. */
.dashboard-page .status-circle-chart { padding:14px;margin:14px 0; }
.dashboard-page .status-circle-layout:has(.single-pie-wrap) { max-width:800px;grid-template-columns:minmax(0,1.45fr) minmax(215px,1fr);gap:8px;margin-inline:auto; }
.dashboard-page .single-pie-wrap { max-width:460px;margin-inline:auto; }
.dashboard-page .status-circle-layout:has(.single-pie-wrap) .status-circle-legend button { padding:8px 9px;margin:5px 0;border-radius:8px;min-height:44px; }
.dashboard-page .status-circle-layout .status-circle-item { font-size:11px;line-height:1.35; }
.dashboard-page .status-circle-layout .status-circle-item strong { font-size:14px; }
.dashboard-page .status-circle-layout .status-circle-item small { font-size:10px; }
@media(max-width:700px) {
 .dashboard-page .status-circle-chart { padding:10px;margin:12px 0; }
 .dashboard-page .status-circle-layout:has(.single-pie-wrap) { grid-template-columns:1fr;gap:4px; }
 .dashboard-page .single-pie-wrap { max-width:360px; }
 .dashboard-page .status-circle-layout:has(.single-pie-wrap) .status-circle-legend { gap:6px; }
 .dashboard-page .status-circle-layout:has(.single-pie-wrap) .status-circle-legend button { margin:0;padding:7px; }
 .dashboard-page .status-circle-layout .status-circle-item strong { font-size:13px; }
}

/* HD topographic artwork on section/table title bars. */
.dashboard-page .status-dashboard .status-list > header,
body.dashboard-page .status-dashboard > .status-heading,
:is(.dashboard-page,.analysis-page) #history-heading :is(.history-title-toolbar,.history-section-header),
body.analysis-page .gardu-map-heading {
 background-color:#126181;
 background-image:linear-gradient(90deg,rgba(3,32,65,.40),rgba(3,45,61,.48)),url('/static/table-title-topography-hd.png');
 background-size:cover;
 background-position:center;
 background-repeat:no-repeat;
 color:#fff;
 border-bottom-color:#8bcbd0;
}

/* Single-period legends sit in a horizontal row beneath the chart. */
.analysis-page .comparison-legend.single-period-legend { display:block;width:100%;max-width:100%; }
.analysis-page .comparison-legend.single-period-legend > section {
 display:flex;align-items:center;justify-content:center;gap:6px 16px;flex-wrap:wrap;
}
.analysis-page .comparison-legend.single-period-legend h4 { display:none; }
.analysis-page .comparison-legend.single-period-legend button { width:auto;flex:0 0 auto;white-space:nowrap;margin:0; }
@media(max-width:600px) {
 .analysis-page .comparison-legend.single-period-legend { overflow-x:auto; }
 .analysis-page .comparison-legend.single-period-legend > section { flex-wrap:nowrap;justify-content:flex-start;width:max-content;min-width:100%;gap:12px; }
}

/* Compact location map nested inside the analysis status card. */
body.analysis-page .warning-container-card .status-inset-map {
 --panel-inset:10px;
 padding:10px;margin:0 0 14px;
 border:1px solid #c8dfe6;border-radius:10px;box-shadow:none;
}
body.analysis-page .status-inset-map .gardu-map-heading { padding:8px 10px;margin:-10px -10px 10px;gap:6px; }
body.analysis-page .status-inset-map .gardu-map-heading h3 { font-size:12px; }
body.analysis-page .status-inset-map .gardu-map-frame { height:210px; }
@media(max-width:600px) {
 body.analysis-page .status-inset-map .gardu-map-frame { height:170px; }
 body.analysis-page .status-inset-map .gardu-map-heading h3 { font-size:11px; }
}

/* Teal polygon motif limited to the home status table cards. */
body.dashboard-page .status-dashboard .status-list > header {
 background-color:#063544;
 background-image:url('/static/home-status-teal-polygon.jpg');
 background-size:cover;
 background-position:center;
 background-repeat:no-repeat;
 color:#fff;
 border-bottom-color:#619ca5;
}
body.dashboard-page .status-dashboard .status-list > header h3 { color:#fff; }

/* Dark upper navigation with a static neon circuit accent. */
body.dashboard-page .quick-menu-card .clock-quick-menu .quick-menu-link,
body.dashboard-page .quick-menu-card .clock-quick-menu .quick-menu-link:hover {
 background:linear-gradient(125deg,#071e31,#103e4b);
 border-color:#245763;border-bottom-color:#28c8ce;
 color:#e9fcff;
}
body.dashboard-page .quick-menu-card .clock-quick-menu .quick-menu-link::after {
 opacity:.8;
 filter:brightness(1.8) drop-shadow(0 0 3px #20e8dc);
}
body.dashboard-page .quick-menu-card .clock-quick-menu .quick-menu-link .quick-menu-text { color:#e9fcff; }
body.dashboard-page .quick-menu-card .clock-quick-menu .quick-menu-link .quick-menu-icon,
body.dashboard-page .quick-menu-card .clock-quick-menu .quick-menu-link:hover .quick-menu-icon {
 background:#103e51;color:#78fff0;border:1px solid #38aab7;
 box-shadow:0 0 8px #1eead52b;
}

/* Softer translucent menu surfaces with clear foreground icons. */
body.dashboard-page .quick-menu-card .clock-quick-menu .quick-menu-link,
body.dashboard-page .quick-menu-card .clock-quick-menu .quick-menu-link:hover {
 background:linear-gradient(125deg,rgba(7,30,49,.72),rgba(16,62,75,.64));
}
body.dashboard-page .quick-menu-card .clock-quick-menu .quick-menu-link::after {
 opacity:.28;filter:brightness(1.5) drop-shadow(0 0 2px #20e8dc);
}
body.dashboard-page .quick-menu-card .clock-quick-menu .quick-menu-link .quick-menu-icon,
body.dashboard-page .quick-menu-card .clock-quick-menu .quick-menu-link:hover .quick-menu-icon {
 position:relative;z-index:1;background:#d7f6f4;color:#075269;
 border:1px solid #a9e8e5;box-shadow:0 2px 6px #001e3533;
}
body.dashboard-page .quick-menu-card .clock-quick-menu .quick-menu-link .quick-menu-icon svg { opacity:1;color:inherit; }

/* Match all navigation icons to the Data Gardu blue gradient. */
body.dashboard-page .quick-menu-card .clock-quick-menu .quick-menu-link .quick-menu-icon,
body.dashboard-page .quick-menu-card .clock-quick-menu .quick-menu-link:hover .quick-menu-icon,
body.dashboard-page .quick-menu-card #gardu-directory-open .quick-menu-icon {
 background:linear-gradient(135deg,#00568c,#00a0bd);
 color:#fff;
 border:1px solid #78cddd;
 box-shadow:0 2px 6px #001e3533;
}
body.dashboard-page .quick-menu-card .clock-quick-menu .quick-menu-icon svg {
 stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}

/* Teal gradient wallpaper behind the main and analysis pages. */
body.dashboard-page,body.analysis-page {
 background-color:#075765;
 background-image:url('/static/background-teal-painterly-hd.png');
 background-size:cover;
 background-position:center;
 background-repeat:no-repeat;
 background-attachment:fixed;
}

/* Compact sticky gardu selector. */
body.analysis-page .filter-box {
 position:sticky;top:8px;z-index:1000;
 display:flex;align-items:center;gap:10px;
 width:fit-content;max-width:100%;box-sizing:border-box;
 padding:7px 10px;margin:0 0 14px;
 border-radius:10px;background:#e5f1f8;
 box-shadow:0 3px 12px #002b4530;
}
body.analysis-page .gardu-select-label { margin:0;color:#154b61;font-size:12px;font-weight:600;white-space:nowrap; }
body.analysis-page .filter-box .filter-row { display:flex;align-items:center;gap:8px;margin:0;flex-wrap:wrap; }
body.analysis-page .filter-box #garduSelect { width:120px;min-height:36px;padding:6px 10px;font-size:12px;margin:0; }
body.analysis-page .filter-box .filter-row p { font-size:10px;margin:0; }
@media(max-width:600px) {
 body.analysis-page .filter-box { top:5px;gap:8px;padding:6px 8px; }
 body.analysis-page .filter-box #garduSelect { width:105px; }
}

/* Gardu selector sits at the right edge of the Status Gardu title. */
body.analysis-page .warning-container-card > .warning-title { display:flex;align-items:center;flex-wrap:wrap;gap:8px; }
body.analysis-page .warning-title .status-gardu-selector {
 position:static;top:auto;z-index:auto;margin:0 0 0 auto;padding:4px 6px;
 flex-shrink:0;border-radius:8px;box-shadow:none;
}
body.analysis-page .warning-title .status-gardu-selector .gardu-select-label { font-size:10px; }
body.analysis-page .warning-title .status-gardu-selector #garduSelect { min-height:32px;width:100px;font-size:11px; }
@media(max-width:600px) {
 body.analysis-page .warning-container-card > .warning-title > span:first-child { order:0; }
 body.analysis-page .warning-title .status-gardu-selector { order:1; }
 body.analysis-page .warning-container-card > .warning-title .warning-last-measured { order:2;flex-basis:100%; }
 body.analysis-page .warning-title .status-gardu-selector .gardu-select-label { display:none; }
}

body.analysis-page .sticky-status-toolbar {
 position:sticky;top:6px;z-index:1000;
 display:flex;flex-wrap:wrap;align-items:center;gap:8px;
 margin:0 0 10px;padding:10px 12px;
 background:#e5f1f8;border:1px solid #bfd9e2;border-radius:10px;
 color:#12394d;box-shadow:0 3px 10px #002b4526;
 overflow:visible;
}
body.analysis-page .sticky-status-toolbar > span { color:#12394d; }
body.analysis-page .sticky-status-toolbar .warning-last-measured { color:#486172;font-size:10px; }
@media(max-width:600px) {
 body.analysis-page .sticky-status-toolbar { top:4px;padding:8px; }
 body.analysis-page .sticky-status-toolbar > span:first-child { order:0; }
 body.analysis-page .sticky-status-toolbar .status-gardu-selector { order:1;margin-left:auto; }
 body.analysis-page .sticky-status-toolbar .warning-last-measured { order:2;flex-basis:100%; }
}

body.analysis-page .sticky-analysis-title {
 position:sticky;top:6px;z-index:1000;display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;
 padding:10px 12px;margin:16px 0 12px;background:#e5f1f8;border-radius:10px;box-shadow:0 3px 10px #002b4526;
}
body.analysis-page .sticky-analysis-title h2 { margin:0;color:#154b61;font-size:15px; }
body.analysis-page .sticky-analysis-title .status-gardu-selector { position:static;margin:0;padding:0;border:0;background:none;box-shadow:none;z-index:auto; }
body.analysis-page .sticky-analysis-title .gardu-select-label { display:none; }
body.analysis-page .analysis-status-caption { margin:0 0 12px;padding:0;background:none;border:0;color:#12394d; }
body.analysis-page .analysis-status-caption > span { color:#e5f1f8; }
@media(max-width:600px) {
 body.analysis-page .sticky-analysis-title { top:4px;padding:8px;gap:6px; }
 body.analysis-page .sticky-analysis-title h2 { font-size:12px; }
 body.analysis-page .sticky-analysis-title #garduSelect { width:100px;min-height:34px; }
}

/* Status title restored inside its light card. */
body.analysis-page .warning-container-card > .analysis-status-caption { margin:0 0 12px;padding:0;background:none;border:0;color:#12394d; }
body.analysis-page .warning-container-card > .analysis-status-caption > span { color:#12394d; }
body.analysis-page .warning-container-card > .analysis-status-caption .warning-last-measured { color:#486172; }

/* Analysis title and selector stay flush to the viewport top. */
body.analysis-page .sticky-analysis-title {
 top:0;flex-wrap:nowrap;justify-content:flex-start;gap:10px;
 border-radius:0 0 10px 10px;
}
body.analysis-page .sticky-analysis-title h2 { white-space:nowrap;flex-shrink:0; }
body.analysis-page .sticky-analysis-title .status-gardu-selector { margin:0; }
@media(max-width:600px) {
 body.analysis-page .sticky-analysis-title { top:0;gap:8px; }
}

/* Smaller sticky analysis title and selector. */
body.analysis-page .sticky-analysis-title { padding:5px 9px;gap:7px;margin-bottom:9px; }
body.analysis-page .sticky-analysis-title h2 { font-size:12px;line-height:1.3; }
body.analysis-page .sticky-analysis-title .status-gardu-selector #garduSelect { width:90px;min-height:30px;height:30px;padding:4px 6px;font-size:11px;border-radius:6px; }
@media(max-width:600px) {
 body.analysis-page .sticky-analysis-title { padding:4px 7px;gap:6px; }
 body.analysis-page .sticky-analysis-title h2 { font-size:11px; }
 body.analysis-page .sticky-analysis-title .status-gardu-selector #garduSelect { width:86px; }
}

/* Compact return control anchored to the bottom edge. */
body.analysis-page .btn-back {
 position:fixed;bottom:0;left:0;right:0;
 width:fit-content;max-width:calc(100% - 16px);margin-inline:auto;
 min-height:32px;box-sizing:border-box;
 padding:6px 14px calc(6px + env(safe-area-inset-bottom,0px));
 font-size:10px;line-height:1.3;
 border-radius:8px 8px 0 0;border-bottom-width:2px;
}

/* Translucent glass navigation inspired by the rounded glass reference. */
body.dashboard-page .quick-menu-card .clock-quick-menu .quick-menu-link,
body.dashboard-page .quick-menu-card .clock-quick-menu .quick-menu-link:hover {
 position:relative;isolation:isolate;overflow:hidden;
 background:linear-gradient(135deg,rgba(214,242,255,.28),rgba(155,203,222,.12) 48%,rgba(195,226,240,.22));
 backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
 border:1px solid rgba(222,249,255,.58);border-bottom:1px solid rgba(172,226,239,.65);
 border-radius:16px;
 box-shadow:inset 0 1px 2px #ffffffa6,inset 1px 0 2px #baf3ff66,inset 0 -2px 3px #082f4959,0 4px 10px #001e3538;
 color:#f3fcff;transform:none;filter:none;transition:none;
}
body.dashboard-page .quick-menu-card .clock-quick-menu .quick-menu-link::after {
 content:'';position:absolute;inset:0;width:auto;height:auto;border-radius:inherit;
 background:linear-gradient(90deg,transparent 12%,rgba(255,217,184,.65) 48%,transparent 88%) center top / 100% 2px no-repeat,
 linear-gradient(90deg,transparent 20%,rgba(182,242,255,.55) 55%,transparent 90%) center bottom / 100% 2px no-repeat;
 opacity:1;filter:none;mask-image:none;pointer-events:none;z-index:-1;
}
body.dashboard-page .quick-menu-card .clock-quick-menu .quick-menu-link .quick-menu-text { color:#f1fbff;text-shadow:0 1px 3px #002d46aa; }
body.dashboard-page .quick-menu-card .clock-quick-menu .quick-menu-link .quick-menu-icon,
body.dashboard-page .quick-menu-card .clock-quick-menu .quick-menu-link:hover .quick-menu-icon,
body.dashboard-page .quick-menu-card #gardu-directory-open .quick-menu-icon {
 background:linear-gradient(135deg,rgba(3,73,101,.85),rgba(10,124,143,.75));
 color:#fff;border:1px solid #c4f3ff99;
 box-shadow:inset 0 1px 1px #ffffff55,0 2px 4px #002c4540;
}

/* Content-sized glass menu cards instead of full-width columns. */
body.dashboard-page .quick-menu-card .clock-quick-menu,
body.dashboard-page .quick-menu-card .clock-quick-menu.has-manual-input {
 display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;
}
body.dashboard-page .quick-menu-card .clock-quick-menu .quick-menu-link {
 flex:0 0 auto;width:auto;min-width:0;max-width:100%;
 padding:8px 12px;min-height:50px;height:auto;
 display:flex;flex-direction:row;align-items:center;justify-content:center;gap:7px;
}
body.dashboard-page .quick-menu-card .quick-menu-text { white-space:nowrap; }
@media(max-width:600px) {
 body.dashboard-page .quick-menu-card .clock-quick-menu { gap:6px; }
 body.dashboard-page .quick-menu-card .clock-quick-menu .quick-menu-link { padding:7px 9px;min-height:46px;gap:5px; }
}

/* Clean title edges without pale outer frames. */
body.dashboard-page .status-dashboard .status-list { border:0; }
body.dashboard-page .status-dashboard .status-list > header,
body.dashboard-page .status-dashboard > .status-heading,
:is(.dashboard-page,.analysis-page) #history-heading :is(.history-title-toolbar,.history-section-header) {
 border:0;box-shadow:none;outline:none;
}
body.dashboard-page .status-dashboard .status-list > header h3 { text-shadow:none; }
:is(.dashboard-page,.analysis-page) #history-heading { border:0; }

/* Glass analysis toolbar with inline return navigation. */
body.analysis-page .sticky-analysis-title {
 background:linear-gradient(135deg,rgba(214,242,255,.28),rgba(155,203,222,.12) 48%,rgba(195,226,240,.22));
 backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
 border:1px solid #def9ff94;border-radius:12px;
 box-shadow:inset 0 1px 2px #ffffffa6,0 4px 10px #001e3538;
}
body.analysis-page .sticky-analysis-title h2 { color:#f1fbff;text-shadow:0 1px 3px #002d46aa; }
body.analysis-page .sticky-analysis-title .analysis-back-link {
 margin-left:auto;display:inline-flex;align-items:center;gap:4px;flex-shrink:0;
 padding:6px 9px;min-height:30px;box-sizing:border-box;
 border:1px solid #c4f3ff99;border-radius:7px;
 background:#075269aa;color:#fff;text-decoration:none;font-size:11px;
}
@media(max-width:600px) {
 body.analysis-page .sticky-analysis-title { gap:5px; }
 body.analysis-page .sticky-analysis-title .analysis-back-link { font-size:10px;padding:5px 7px; }
}

/* Align account controls to the right of the shared header. */
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .header-role-panel {
 display:flex;grid-column:1 / -1;grid-row:2;
 justify-content:flex-end;align-items:center;flex-wrap:wrap;
 width:100%;min-width:0;margin:0;gap:8px;
}
body:is(.dashboard-page,.analysis-page,.input-page) .header-role-panel .btn-role { flex:0 0 auto; }
body:is(.dashboard-page,.analysis-page,.input-page) .header-role-panel .header-role-status {
 flex:0 1 auto;min-width:0;justify-content:flex-end;text-align:right;
}
body:is(.dashboard-page,.analysis-page,.input-page) .header-role-panel .header-user-name { overflow-wrap:anywhere; }
@media(max-width:600px) {
 body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .header-role-panel { gap:6px; }
}

/* Account controls level with the SIAGA title. */
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .pln-bubble-soft {
 grid-template-columns:60px minmax(0,1fr) auto;
 align-items:center;
}
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .header-role-panel {
 grid-column:3;grid-row:1;width:auto;align-self:center;
 max-width:240px;
}
@media(max-width:600px) {
 body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .pln-bubble-soft {
  grid-template-columns:40px minmax(0,1fr) auto;column-gap:8px;
 }
 body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .header-role-panel {
  max-width:120px;gap:5px;
 }
 body:is(.dashboard-page,.analysis-page,.input-page) .header-role-panel .header-role-status { font-size:0;gap:4px; }
 body:is(.dashboard-page,.analysis-page,.input-page) .header-role-panel :is(.header-role-value,.header-user-name) { font-size:10px; }
 body:is(.dashboard-page,.analysis-page,.input-page) .header-title-group .header-subtitle { overflow-wrap:anywhere; }
}


/* Larger SIAGA brand while retaining right-aligned account controls. */
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .pln-bubble-soft { grid-template-columns:80px minmax(0,1fr) auto; }
body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .pln-brand-mark { width:80px;height:80px;flex-basis:80px; }
body:is(.dashboard-page,.analysis-page,.input-page) .header-title-group .title-text { font-size:38px;line-height:1.15;letter-spacing:3px; }
@media(max-width:600px) {
 body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .pln-bubble-soft { grid-template-columns:54px minmax(0,1fr) auto;gap:6px; }
 body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .pln-brand-mark { width:54px;height:54px;flex-basis:54px; }
 body:is(.dashboard-page,.analysis-page,.input-page) .header-title-group .title-text { font-size:27px;letter-spacing:1px; }
 body:is(.dashboard-page,.analysis-page,.input-page) .header-bubble-wrapper .header-role-panel { max-width:100px; }
}

/* Phone history title: flush edges and a fixed download slot. */
@media(max-width:720px) {
 body:is(.dashboard-page,.analysis-page) #history-heading {
  padding:0 12px 12px;box-sizing:border-box;overflow:hidden;
 }
 body:is(.dashboard-page,.analysis-page) #history-heading :is(.history-title-toolbar,.history-section-header) {
  display:grid;grid-template-columns:minmax(0,1fr) 36px;
  align-items:center;gap:8px;
  width:auto;max-width:none;box-sizing:border-box;
  margin:0 -12px 12px;padding:10px 12px;
  border-radius:0;font-size:13px;line-height:1.4;
 }
 body:is(.dashboard-page,.analysis-page) #history-heading :is(.history-title-toolbar,.history-section-header) > span {
  display:flex;align-items:center;gap:6px;min-width:0;
  font-size:13px;line-height:1.4;white-space:normal;overflow-wrap:anywhere;
 }
 body:is(.dashboard-page,.analysis-page) #history-heading .section-line-icon { width:16px;height:16px;flex:0 0 16px; }
 body:is(.dashboard-page,.analysis-page) #history-heading .history-header-download {
  width:36px;height:36px;min-width:36px;margin:0;padding:0;box-sizing:border-box;justify-self:end;
 }
}

.input-mode-tabs { display:flex;gap:8px;margin:12px 0; }
.input-mode-tabs button,.pdf-batch-row button { padding:9px 14px;border:1px solid #a9cdd7;border-radius:8px;background:#edf7fa;color:#174c60;cursor:pointer; }
.input-mode-tabs button[aria-pressed=true] { background:#086c80;color:white; }
#formPengukuran .pdf-import-box[hidden],#formPengukuran .manual-input-panel[hidden] { display:none!important; }
#formPengukuran[data-input-mode=auto] .pdf-import-box:not([hidden]) { display:block; }
.pdf-batch-row { padding:10px 0;border-bottom:1px solid #c8dce4;overflow-wrap:anywhere;font-size:12px; }
.pdf-batch-row small { display:block;margin-top:5px; }
.pdf-batch-row.is-error { color:#b42332; }

#formPengukuran .separate-json-bubble { margin:16px 0;padding:16px;border:1px solid #bfd8e2;border-radius:12px;background:#eef6fa; }
#formPengukuran .separate-json-bubble[hidden] { display:none!important; }
#formPengukuran[data-input-mode=auto] .manual-input-panel:not([hidden]) { display:block;margin-top:14px;padding-top:14px;border-top:1px solid #bad2dc; }

#formPengukuran .import-card { width:100%;box-sizing:border-box;margin:14px 0;padding:16px;border:1px solid #bfd8e2;border-radius:12px;background:#eef6fa; }
#formPengukuran .import-card.is-idle { background:#f0f3f5;border-color:#d9e1e5; }
.import-card button:disabled { opacity:.4;cursor:not-allowed; }
.pdf-batch-row > button { margin:6px 6px 6px 0; }
.import-record-detail { padding:8px 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:5px 12px;font-size:11px; }
.import-record-detail[hidden] { display:none; }

/* Upload page uses the same teal background and patterned card headings. */
body.input-page { background:#075765 url('/static/background-teal-painterly-hd.png') center/cover fixed no-repeat; }
body.input-page .form-entry-bubble { background:#eaf3fa;border:0;border-radius:16px;box-shadow:0 6px 20px #001e3538; }
#formPengukuran .import-card { overflow:hidden;background:#eef6fa;border:0;box-shadow:0 3px 12px #123c5320; }
#formPengukuran .import-card > .pdf-import-title { margin:-16px -16px 16px;padding:14px 16px;background:#063544 url('/static/home-status-teal-polygon.jpg') center/cover;color:white;font-size:13px; }
#formPengukuran .import-card.is-idle { background:#edf2f5; }
.import-row-actions { display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:8px 0; }
.import-row-actions button { padding:7px 12px;border:1px solid #aacdd7;border-radius:7px;background:#e5f2f7;color:#154c60;cursor:pointer; }
.upload-state { display:inline-flex;align-items:center;gap:6px;font-size:12px; }
.upload-state.success { color:#15803d; }.upload-state.error { color:#b42332; }.upload-state.loading { color:#146478; }
.upload-state-icon { font-weight:800;font-size:18px; }
.upload-spinner { width:14px;height:14px;border:2px solid #bddce4;border-top-color:#147b8c;border-radius:50%;animation:upload-spin .8s linear infinite; }
@keyframes upload-spin { to { transform:rotate(360deg); } }
#formPengukuran .import-record-detail { display:block;overflow-x:auto;padding:4px 0; }
#formPengukuran .import-record-detail[hidden] { display:none; }
.import-preview-table { width:100%;border-collapse:collapse;font-size:12px;table-layout:fixed; }
.import-preview-table th,.import-preview-table td { padding:8px 10px;text-align:left;border-bottom:1px solid #cbdfe6;overflow-wrap:anywhere; }
.import-preview-table thead { background:#d7eaf0;color:#17495f; }
.import-preview-table tbody th { width:48%;font-weight:500;color:#345969; }
.import-preview-table tbody tr:nth-child(even) { background:#e4f0f5; }
@media(prefers-reduced-motion:reduce) { .upload-spinner { animation:none; } }

/* Compact horizontal import review and touch-friendly manual entry. */
.import-record-detail[hidden] { display:none!important; }
.import-preview-meta { display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12px;color:#234e60;margin:8px 0; }
.import-preview-scroll { max-width:100%;overflow-x:auto;border:1px solid #c8dce4;border-radius:8px; }
.import-preview-scroll .import-preview-table { min-width:690px;table-layout:auto;margin:0; }
.import-preview-scroll .import-preview-table th,.import-preview-scroll .import-preview-table td { padding:7px 9px;text-align:center;white-space:nowrap; }
.import-preview-scroll .import-preview-table tbody th { width:auto; }
.import-preview-scroll .import-preview-table th:first-child { position:sticky;left:0;background:#d7eaf0;color:#17495f; }
.import-preview-warning { font-size:12px;color:#785a23;margin:8px 0; }
body.input-page .measurement-table-layout { margin:10px 0 0; }
body.input-page .measurement-table-layout .table-responsive { overflow-x:auto;border-radius:10px;border:1px solid #bed5df; }
body.input-page table.form-table { min-width:520px; }
body.input-page table.form-table td,body.input-page table.form-table th { padding:4px;font-size:12px; }
body.input-page table.form-table input[type=number] { box-sizing:border-box;width:100%;min-width:58px;height:40px;padding:5px 4px;font-size:16px;border:1px solid #c1d6df;border-radius:6px;background:#fff;color:#143e52; }
body.input-page table.form-table input:focus { outline:2px solid #008e9e;outline-offset:0;background:#f0ffff; }
body.input-page .agt-header-content { gap:6px;flex-wrap:wrap; }
body.input-page .agt-header-title { font-size:20px; }
body.input-page .measurement-label-cell { min-width:32px;width:32px; }
body.input-page .side-label-arus,body.input-page .side-label-tegangan { min-width:20px;width:20px; }
body.input-page .feeder-header { min-width:66px;padding-right:28px!important; }
body.input-page .remove-feeder-button { width:26px;height:26px;top:2px;right:1px; }
body.input-page .measurement-time-header { gap:4px; }
body.input-page .measurement-time-input { font-family:inherit;font-size:12px; }
body.input-page .manual-input-panel .btn-submit { min-height:44px;margin:12px 0;width:100%;font-size:13px;border-radius:9px; }
@media(max-width:600px) {
 body.input-page .form-entry-bubble { padding:12px 10px; }
 body.input-page .manual-input-panel { min-width:0; }
 body.input-page .measurement-table-layout::before { content:'Arus (A) · Tegangan (V) — Geser tabel ke samping →';display:block;margin:6px 0 8px;font-size:11px;color:#426578; }
 body.input-page table.form-table .section-divider { height:3px;padding:0; }
 body.input-page .input-mode-tabs button { flex:1;min-height:42px; }
 .import-preview-meta { gap:5px 12px;font-size:11px; }
}

/* Input uses the same title artwork as Status Gardu. */
body.input-page .form-entry-bubble { padding-top:0; }
body.input-page .form-entry-bubble > .section-bubble-header {
 background:#126181 linear-gradient(90deg,rgba(3,32,65,.40),rgba(3,45,61,.48));
 background-image:linear-gradient(90deg,rgba(3,32,65,.40),rgba(3,45,61,.48)),url('/static/table-title-topography-hd.png');
 background-size:cover;background-position:center;background-repeat:no-repeat;
 color:#fff;border:0;box-shadow:none;outline:none;padding:12px 16px;
}
@media(max-width:600px) {
 body.input-page .form-entry-bubble > .section-bubble-header { margin:0 -10px 14px;padding:12px 10px;font-size:13px; }
}

body.input-page .form-entry-bubble > .section-bubble-header { display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left; }
body.input-page .form-entry-bubble > .section-bubble-header > span { min-width:0; }
body.input-page .section-bubble-header .input-page-back {
 position:static;inset:auto;z-index:auto;margin:0 0 0 auto;display:inline-flex;flex-shrink:0;
 padding:6px 9px;min-height:30px;box-sizing:border-box;border:1px solid #c4f3ff99;border-radius:7px;
 background:#075269aa;color:#fff;text-decoration:none;font-size:11px;font-weight:400;
 text-transform:none;letter-spacing:normal;box-shadow:none;
}
@media(max-width:600px) { body.input-page .section-bubble-header .input-page-back { font-size:10px;padding:5px 7px; } }

/* Period selection at the left end of the change-dialog action row. */
.status-dialog.has-change-periods > header { flex-wrap:wrap; }
.status-dialog.has-change-periods > header > h2 { flex-basis:100%; }
.status-dialog.has-change-periods .status-share-actions { width:100%; }
#status-change-periods { display:flex;gap:6px;margin-right:auto; }
#status-change-periods[hidden] { display:none; }
.status-dialog #status-change-periods button { width:auto;flex:0 0 auto;padding:6px 10px;font-size:11px;font-weight:700; }
.status-dialog #status-change-periods button[aria-pressed=true] { background:#d7f6f4;color:#075269;border-color:#b1f3e9; }

/* Clearly identify failed PDF reads without hiding the reason. */
.pdf-batch-results .pdf-read-error {
 display:flex;flex-direction:column;gap:5px;margin:10px 0;padding:12px 14px;
 background:rgba(251,182,206,.38);border:1px solid rgba(225,91,135,.32);
 border-radius:12px;color:#a51d3b;font-size:12px;line-height:1.5;overflow-wrap:anywhere;
}
.pdf-batch-results .pdf-read-error strong { color:#981b36;font-weight:700; }
.pdf-batch-results .pdf-read-error span { color:#b01e3d; }
/* Manual entry: comfortable touch targets and a stable phase column on phones. */
.manual-column-nav{display:none}
@media(max-width:600px){
 body.input-page .manual-column-nav{display:flex;gap:6px;overflow-x:auto;padding:4px 0 10px}
 body.input-page .manual-column-nav button{flex:1;min-width:48px;min-height:44px;border:1px solid #b9d4dc;border-radius:10px;background:#edf8fa;color:#125669;font-size:13px;font-weight:700}
 body.input-page .manual-column-nav button:focus{outline:2px solid #009eae}
 body.input-page .manual-input-panel .table-responsive{scroll-behavior:smooth;scroll-padding-left:70px;overscroll-behavior-x:contain}
 body.input-page .manual-input-panel table.form-table{min-width:650px;border-collapse:separate;border-spacing:0;table-layout:auto}
 body.input-page .manual-input-panel table.form-table td,body.input-page .manual-input-panel table.form-table th{padding:6px}
 body.input-page .manual-input-panel table.form-table input[type=number]{height:48px;min-width:78px;padding:8px;font-size:16px;border-radius:9px}
 body.input-page .manual-input-panel .measurement-label-cell{position:sticky;left:28px;z-index:2;min-width:38px;background:#e9f4f7!important;color:#164f61;font-weight:700;box-shadow:3px 0 5px #14465c12}
 body.input-page .manual-input-panel :is(.side-label-arus,.side-label-tegangan){position:sticky;left:0;z-index:3;min-width:28px;width:28px;background:#d5eaf0!important;color:#14576b}
 body.input-page .manual-input-panel .btn-submit{min-height:48px;font-size:14px;letter-spacing:.3px;box-shadow:0 5px 14px #064d6522}
 body.input-page .measurement-table-layout::before{content:'Arus dalam A · Tegangan dalam V. Pilih bagian atau geser →';font-size:12px;line-height:1.5;margin-bottom:10px}
 body.input-page .manual-input-panel .feeder-header{min-width:100px}
 body.input-page .manual-input-panel .remove-feeder-button{width:32px;height:32px}
 body.input-page .manual-input-panel input{scroll-margin-block:100px}
}
/* Phone manual form: vertically stacked groups, using the original inputs. */
.mobile-manual-cards{display:none}
@media(max-width:600px){
 body.input-page .manual-input-panel .measurement-table-layout{display:none}
 .mobile-manual-cards{display:grid;gap:14px;padding:4px 0}
 .manual-mobile-meta,.manual-mobile-card{min-width:0;padding:14px;border:1px solid #c1dce3;border-radius:14px;background:#f6fbfd;color:#174c60}
 .manual-mobile-card h3{margin:-14px -14px 10px;padding:12px 14px;background:#146679;color:white;border-radius:13px 13px 0 0;font-size:16px}
 .manual-mobile-card p{margin:0 0 12px;font-size:12px;color:#526d79}
 .manual-mobile-card h4{margin:14px 0 8px;font-size:13px;color:#14576a}
 .manual-mobile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .mobile-manual-cards label{display:flex;flex-direction:column;gap:6px;margin:0;font-size:13px;font-weight:600;min-width:0}
 body.input-page .mobile-manual-cards input[type=number]{width:100%!important;min-width:0;max-width:100%;height:46px;padding:10px;border:1px solid #b7cfd8;border-radius:8px;background:white;color:#173f50;font-size:16px;box-sizing:border-box}
 .mobile-manual-cards input:focus{outline:2px solid #009aac;outline-offset:1px}
 .manual-mobile-time{margin-top:12px;font-size:12px;overflow-wrap:anywhere}
 body.input-page .manual-mobile-time .measurement-time-input{max-width:100%;width:100%;color:#174c60;background:#e8f3f7;font-size:14px;box-sizing:border-box}
 body.input-page .manual-mobile-time .measurement-time-value{color:#174c60}
}
/* Manual entry on phones follows a single vertical reading/input order. */
@media(max-width:600px){
 body.input-page .manual-mobile-grid{grid-template-columns:minmax(0,1fr);gap:12px}
 body.input-page .mobile-manual-cards{gap:18px;width:100%;box-sizing:border-box}
 body.input-page .manual-mobile-meta,body.input-page .manual-mobile-card{padding:14px;overflow:hidden}
 body.input-page .mobile-manual-cards label{font-size:14px;gap:7px}
 body.input-page .mobile-manual-cards input[type=number]{height:50px;font-size:18px;padding:12px}
 body.input-page .manual-mobile-card h4{padding-bottom:7px;border-bottom:1px solid #c7dfe5;margin-top:18px;font-size:14px}
 body.input-page .manual-mobile-card h3{font-size:17px}
 body.input-page .manual-input-panel{min-width:0;max-width:100%}
 body.input-page .mobile-manual-cards input{scroll-margin-top:90px}
}
@media(min-width:601px){
 body.input-page #formPengukuran[data-input-mode=manual] .add-feeder-button,
 body.input-page #formPengukuran[data-input-mode=manual] .activate-feeder-button,
 body.input-page #formPengukuran[data-input-mode=manual] .remove-feeder-button{display:none!important}
}