/* Compact home navigation; retain the existing menu actions. */
body .header-bubble-wrapper { margin-bottom:12px; }
body .pln-bubble-soft { min-height:88px; padding:10px 20px; gap:12px; border-top-width:3px; border-radius:16px; }
body .pln-brand-mark { flex:0 0 64px; width:64px; height:64px; }
body .header-title-group { padding:6px 10px; }
body .header-role-panel { align-items:center; }
.live-clock-card { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto auto; align-items:center; column-gap:24px; padding:12px 22px; min-height:68px; box-sizing:border-box; border:0; box-shadow:none; margin-bottom:14px; border-radius:12px; }
.live-clock-card .animasi-pesan { grid-column:1; grid-row:1 / 3; margin:0; text-align:left; font-size:14px; line-height:1.5; }
.live-clock-card .clock-display { grid-column:2; grid-row:1; margin:0; font-size:25px; line-height:1.2; letter-spacing:2px; font-variant-numeric:tabular-nums; text-align:right; }
.live-clock-card .date-display { grid-column:2; grid-row:2; margin:4px 0 0; font-size:11px; text-align:right; }
.quick-menu-card { background:none; border:0; padding:0; box-shadow:none; margin-bottom:18px; overflow:visible; }
.quick-menu-card .clock-quick-menu { gap:12px; align-items:stretch; }
.quick-menu-card .clock-quick-menu .quick-menu-link { width:100%; min-width:0; height:auto; min-height:78px; padding:16px; box-sizing:border-box; display:flex; gap:12px; justify-content:flex-start; align-items:center; border:1px solid #dbe5ee; border-radius:12px; background:#fff; box-shadow:0 2px 5px #003b6f06; color:#004b87; transition:background .18s,border-color .18s,box-shadow .18s; }
.quick-menu-card .quick-menu-icon { flex:0 0 40px; width:40px; height:40px; border:0; border-radius:11px; background:#e9f5fb; color:#007dae; box-shadow:none; }
.quick-menu-card .quick-menu-text { width:auto; height:auto; font-size:13px; line-height:1.4; color:#004b87; text-align:left; text-transform:none; text-shadow:none; }
.quick-menu-card .clock-quick-menu .quick-menu-link:hover { background:#f5fbff; border-color:#57aeca; box-shadow:0 4px 12px #004b8710; }
.quick-menu-card .quick-menu-link:hover .quick-menu-icon { background:#d6effa; box-shadow:none; filter:none; }
.quick-menu-card .quick-menu-link:focus-visible { outline:3px solid #007dae; outline-offset:3px; }
@media(max-width:700px) {
 body .pln-bubble-soft { padding:12px; gap:8px; flex-wrap:wrap; }
 body .pln-brand-mark { flex-basis:52px; width:52px; height:52px; }
 body .header-title-group { flex:1; padding:0; }
 body .header-subtitle { font-size:9px; line-height:1.5; }
 .live-clock-card { padding:12px 14px; column-gap:12px; }
 .live-clock-card .animasi-pesan { font-size:12px; }
 .live-clock-card .clock-display { font-size:21px; }
 .quick-menu-card .clock-quick-menu,.quick-menu-card .clock-quick-menu.has-manual-input,.quick-menu-card .clock-quick-menu:not(.has-manual-input) { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
 .quick-menu-card .clock-quick-menu .quick-menu-link { width:100%; min-width:0; padding:12px; min-height:68px; gap:9px; }
 .quick-menu-card .quick-menu-text { width:auto; font-size:12px; }
}
@media(prefers-reduced-motion:reduce) { .quick-menu-card .clock-quick-menu .quick-menu-link { transition:none; } }

/* Balanced admin header and navigation. */
body .pln-bubble-soft { box-sizing:border-box; }
body .header-title-group { flex:1; }
body .header-role-panel { flex-shrink:0; padding:8px 10px; border:1px solid #ffffff26; border-radius:10px; background:#003b6f38; }
body .header-user-name { max-width:190px; overflow-wrap:anywhere; }
.quick-menu-card .clock-quick-menu { grid-template-columns:repeat(4,minmax(0,1fr)); }
.quick-menu-card .clock-quick-menu.has-manual-input { grid-template-columns:repeat(5,minmax(0,1fr)); }
.quick-menu-card .clock-quick-menu .quick-menu-link { justify-content:center; min-height:82px; padding:14px 10px; }
.quick-menu-card .clock-quick-menu .manual-entry-link { background:#00558d; border-color:#00558d; }
.quick-menu-card .manual-entry-link .quick-menu-text { color:white; }
.quick-menu-card .manual-entry-link .quick-menu-icon { background:#ffffff20; color:white; }
.quick-menu-card .clock-quick-menu .manual-entry-link:hover { background:#004575; border-color:#004575; }
@media(min-width:701px) and (max-width:1000px) {
 .quick-menu-card .clock-quick-menu .quick-menu-link { flex-direction:column; gap:7px; }
 .quick-menu-card .quick-menu-text { text-align:center; }
}
@media(max-width:700px) {
 body .header-role-panel { width:100%; margin:4px 0 0; padding:8px 10px; justify-content:space-between; box-sizing:border-box; }
 body .header-role-status { text-align:left; border:0; padding:0; }
 .quick-menu-card .clock-quick-menu,.quick-menu-card .clock-quick-menu.has-manual-input { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .quick-menu-card .clock-quick-menu .quick-menu-link { justify-content:flex-start; min-height:68px; padding:12px; }
 .quick-menu-card .clock-quick-menu .manual-entry-link { grid-column:1 / -1; justify-content:center; min-height:60px; }
}
@media(max-width:420px) {
 .live-clock-card { grid-template-columns:1fr; gap:4px; }
 .live-clock-card .animasi-pesan { grid-column:1; grid-row:1; text-align:center; }
 .live-clock-card .clock-display { grid-column:1; grid-row:2; text-align:center; }
 .live-clock-card .date-display { grid-column:1; grid-row:3; text-align:center; }
}

/* Menu cards with subtle depth and a clear primary action. */
.quick-menu-card .clock-quick-menu { gap:14px; }
.quick-menu-card .clock-quick-menu .quick-menu-link {
 position:relative !important; overflow:hidden; isolation:isolate;
 min-height:92px; border:1px solid #d6e6f0; border-radius:17px;
 background:linear-gradient(125deg,#ffffff 30%,#edf7fc 100%);
 box-shadow:0 4px 14px #003b6f08,inset 0 1px 0 #ffffff;
 transition:box-shadow .2s,border-color .2s,background .2s;
}
.quick-menu-card .clock-quick-menu .quick-menu-link::after {
 content:''; position:absolute; width:90px; height:90px; right:-39px; bottom:-50px;
 border:14px solid #0098c809; border-radius:50%; z-index:-1; pointer-events:none;
}
.quick-menu-card .quick-menu-icon {
 width:44px; height:44px; flex-basis:44px; border-radius:14px;
 background:linear-gradient(145deg,#e1f6ff,#c9eaf8); color:#0073a5;
 border:1px solid #ffffff; box-shadow:0 3px 8px #007dae12;
 transition:background .2s,box-shadow .2s;
}
.quick-menu-card .quick-menu-icon svg { width:23px; height:23px; stroke-width:1.9; }
.quick-menu-card .quick-menu-text { font-weight:700; letter-spacing:.1px; }
.quick-menu-card .clock-quick-menu .quick-menu-link:hover {
 background:linear-gradient(125deg,#ffffff,#e2f4fd); border-color:#7bbdd8;
 box-shadow:0 7px 20px #00558d15;
}
.quick-menu-card .quick-menu-link:hover .quick-menu-icon { background:#c4eafa; box-shadow:0 4px 10px #007dae20; }
.quick-menu-card .clock-quick-menu .manual-entry-link {
 background:linear-gradient(120deg,#004b87,#007dab); border-color:#00669d;
 box-shadow:0 5px 15px #00558d24;
}
.quick-menu-card .manual-entry-link .quick-menu-icon { background:#ffffff1f; border-color:#ffffff35; color:white; box-shadow:none; }
.quick-menu-card .manual-entry-link::after { border-color:#ffffff0d !important; }
.quick-menu-card .clock-quick-menu .manual-entry-link:hover { background:linear-gradient(120deg,#004478,#008bb8); border-color:#008bb8; }
.quick-menu-card .manual-entry-link:hover .quick-menu-icon { background:#ffffff30; }
@media(max-width:700px) {
 .quick-menu-card .clock-quick-menu { gap:10px; }
 .quick-menu-card .clock-quick-menu .quick-menu-link { min-height:76px; border-radius:14px; }
 .quick-menu-card .clock-quick-menu .manual-entry-link { min-height:64px; }
 .quick-menu-card .quick-menu-icon { width:38px; height:38px; flex-basis:38px; border-radius:11px; }
}
@media(prefers-reduced-motion:reduce) { .quick-menu-card .quick-menu-icon { transition:none; } }

/* Unified surfaces throughout the local dashboard. */
:root { --siaga-surface-border:#dce8f1; --siaga-surface-shadow:0 6px 22px #003b6f09; }
body { background:#edf3f8; }
body .pln-bubble-soft { border-radius:20px; box-shadow:0 6px 18px #004b8715; }
.live-clock-card { border-radius:17px; box-shadow:0 4px 14px #004b8710; }
.warning-container-card.status-dashboard,.section-bubble {
 border:1px solid var(--siaga-surface-border); border-radius:20px;
 background:linear-gradient(180deg,#fff,#fbfdff); box-shadow:var(--siaga-surface-shadow);
}
.warning-container-card.status-dashboard { padding:22px; }
.status-heading { padding-bottom:16px; border-bottom-color:#e7eef5; }
.status-heading>span { padding:7px 11px; border-radius:20px; background:#edf6fc; color:#356583; font-weight:600; }
.status-filter select { border-color:#d9e5ef; border-radius:10px; background:#f8fbfe; }
.status-filter button { background:linear-gradient(120deg,#00518e,#007fa9); border-radius:10px; box-shadow:0 3px 8px #00518e16; }
.status-circle-chart { border-radius:18px; border-color:#e0edf5; background:radial-gradient(ellipse at 20% 30%,#eaf6fc,transparent 65%),#f8fbfe; padding:22px; }
.status-circle-legend button.status-circle-item { border:1px solid #e5edf4; border-radius:12px; padding:12px; margin:7px 0; background:#ffffffd9; box-sizing:border-box; }
.status-circle-legend button.status-circle-item:hover { background:#eaf5fc; border-color:#b6d9eb; }
.status-list { border-radius:16px; border-color:#dfe8ef; border-top:3px solid var(--accent); box-shadow:0 3px 10px #003b6f06; }
.status-list header { background:linear-gradient(135deg,#f4f8fc,#fff); padding:13px 12px; }
.status-list h3 span { background:white; border:1px solid #e3ebf2; }
.status-list button[data-status-open] { border-radius:10px; border-color:#dae8f2; background:#eef7fd; }
.status-list button[data-status-open]:hover { background:#dceffc; }
.status-dashboard th,.status-dialog th { background:#eef5fa; }
.status-dashboard tbody tr:nth-child(even),.status-dialog tbody tr:nth-child(even) { background:#fafcfe; }
.status-dashboard tbody tr:hover,.status-dialog tbody tr:hover { background:#eff7fc; }
.status-table-scroll { scrollbar-width:thin; scrollbar-color:#c3d6e5 transparent; }
.section-bubble-header { border-radius:18px 18px 0 0; background:linear-gradient(110deg,#004b87,#006b9a); }
.sld-modal-card,.status-dialog { border:1px solid #dce8f1; border-radius:20px; box-shadow:0 22px 70px #00264240; }
.sld-modal-header,.status-dialog>header { background:linear-gradient(110deg,#004b87,#007aa4); }
.status-search input { border-radius:10px; background:#f8fbfe; }
.fuse-simulator,.load-result,.load-solution { border-radius:12px; }
@media(max-width:700px) {
 .warning-container-card.status-dashboard { padding:14px; border-radius:16px; }
 .status-circle-chart { padding:14px; border-radius:14px; }
 .status-circle-legend button.status-circle-item { padding:10px; }
 .section-bubble,.sld-modal-card,.status-dialog { border-radius:16px; }
 .status-heading>span { font-size:11px; }
}

/* Brand and live clock share one continuous panel. */
body .header-bubble-wrapper { border-radius:20px; overflow:hidden; background:linear-gradient(120deg,#004575,#0085ab); box-shadow:0 6px 20px #004b8718; margin-bottom:16px; }
body .header-bubble-wrapper .pln-bubble-soft { border-radius:20px 20px 0 0; box-shadow:none; border-bottom:0; }
.header-bubble-wrapper .live-clock-card { margin:0 20px; padding:12px 2px; background:transparent; border-radius:0; border-top:1px solid #ffffff30; box-shadow:none; }
.header-bubble-wrapper .live-clock-card::after { content:none; }
@media(max-width:700px) { .header-bubble-wrapper .live-clock-card { margin:0 14px; } }

/* Continuous Asmat background across the combined brand and clock panel. */
body .header-bubble-wrapper {
 background-image:linear-gradient(105deg,rgba(0,48,88,.94) 0%,rgba(0,79,126,.84) 48%,rgba(0,132,163,.76) 100%),url('/static/header-asmat-cenderawasih-v2.png');
 background-position:center,center 42%; background-size:cover; background-repeat:no-repeat;
 border:1px solid #ffffff50; border-top:3px solid #ffcf38;
 box-shadow:0 8px 24px #003b6f1a;
}
body .header-bubble-wrapper .pln-bubble-soft {
 background:transparent; border:0; border-radius:0;
}
body .header-bubble-wrapper .pln-bubble-soft::before,
body .header-bubble-wrapper .pln-bubble-soft::after { content:none; }
body .header-bubble-wrapper .header-title-group { background:transparent; backdrop-filter:none; }
body .header-bubble-wrapper .header-subtitle { color:#e0f1fa; }
.header-bubble-wrapper .live-clock-card { background:transparent; border-top-color:#ffffff24; }
.header-bubble-wrapper .date-display { color:#e1f3fc; }

.header-bubble-wrapper .live-clock-card { border-top:0; }

/* Readable, aligned popup headers. */
.sld-modal-header,.status-dialog>header {
 display:flex; flex-wrap:nowrap; align-items:center; justify-content:space-between;
 gap:16px; padding:16px 18px; box-sizing:border-box;
 background:linear-gradient(115deg,#004775,#00799f); color:#fff;
 border-radius:13px 13px 0 0; border-bottom:2px solid #ffcf38;
}
.status-dialog>header { border-radius:0; }
.sld-modal-header .sld-modal-title,.status-dialog>header h2 {
 flex:1 1 auto; min-width:0; margin:0; color:#fff; font-size:16px;
 font-weight:700; line-height:1.5; overflow-wrap:anywhere;
}
.sld-modal-header .sld-modal-close,.status-dialog .status-share-actions button {
 display:inline-flex; align-items:center; justify-content:center;
 flex:0 0 40px; width:40px; height:40px; padding:8px;
 border:1px solid #ffffff40; border-radius:11px; background:#ffffff14;
 color:#fff; box-sizing:border-box; cursor:pointer;
}
.sld-modal-header .sld-modal-close { font-size:26px; }
.status-dialog .status-share-actions { gap:8px; }
.status-dialog .status-share-actions #status-share-wa { background:#138452; border-color:#ffffff40; }
.sld-modal-header .sld-modal-close:hover,.status-dialog .status-share-actions #status-dialog-close:hover { background:#c73540; }
.status-dialog .status-share-actions #status-save-png:hover { background:#ffffff30; }
.sld-modal-header .sld-modal-close:focus-visible { outline:3px solid #ffcf38; outline-offset:2px; }
@media(max-width:560px) {
 .sld-modal-header,.status-dialog>header { padding:12px; gap:10px; }
 .sld-modal-header .sld-modal-title,.status-dialog>header h2 { font-size:14px; }
 .status-dialog>header { flex-wrap:wrap; }
 .status-dialog>header h2 { flex-basis:100%; }
 .status-dialog .status-share-actions { margin-left:auto; }
}

/* Compact history: retain the information in paired lines. */
.history-entry-bubble .filter-box { background:transparent; border:0; box-shadow:none; padding:12px 0; margin:0 0 10px; }
.history-entry-bubble .filter-row { gap:12px; align-items:center; }
.history-entry-bubble .filter-row select { max-width:240px; border-radius:9px; }
.history-entry-bubble table.data-table { min-width:560px; width:100%; border-collapse:collapse; }
.history-entry-bubble table.data-table th { background:#edf5fa; color:#35566e; font-size:12px; text-transform:none; padding:12px 14px; border:0; text-align:left; }
.history-entry-bubble table.data-table td { padding:12px 14px; text-align:left; border:0; border-bottom:1px solid #e7eef4; font-size:12px; background:transparent; }
.history-entry-bubble table.data-table tbody tr:nth-child(even) { background:#f8fbfd; }
.history-entry-bubble .history-secondary { display:block; margin-top:5px; color:#64748b; font-size:11px; font-weight:400; }
.history-entry-bubble .table-responsive { border:1px solid #e2eaf1; border-radius:12px; }
.history-entry-bubble .action-cell { white-space:nowrap; }
.history-entry-bubble .action-btn-group .btn-action { box-shadow:none; font-size:12px; border-radius:8px; }

.history-eye { display:inline-flex; vertical-align:middle; padding:5px; color:#00558d; background:#edf7fc; border:1px solid #d7e7f1; border-radius:7px; cursor:pointer; }
.history-period { display:inline-block; font-size:10px; padding:3px 6px; border-radius:6px; background:#e9f3fa; color:#00558d; }
.history-danger { color:#b91c1c; } .history-warning { color:#b45309; }
.history-values { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.history-values div { padding:12px; border-radius:10px; background:#f2f7fb; }
.history-values dt { font-size:12px; color:#64748b; } .history-values dd { margin:6px 0 0; font-weight:700; color:#004b87; }
@media(max-width:500px) { .history-values { grid-template-columns:repeat(2,minmax(0,1fr)); } }

.history-gardu-cell { display:flex; align-items:center; gap:10px; }
.history-gardu-cell .history-eye { flex-shrink:0; }
.history-gardu-label a { color:#00558d; font-weight:700; text-decoration:none; white-space:nowrap; }
.history-gardu-label a:hover { text-decoration:underline; }
.history-filter-apply { padding:10px 18px; border:0; border-radius:9px; background:#00558d; color:white; font-weight:700; cursor:pointer; }
.history-filter-apply:hover { background:#004575; }
.history-filter-apply:focus-visible { outline:3px solid #eab308; outline-offset:2px; }

/* Consistent history actions, with distinct destructive controls. */
.history-entry-bubble :is(.btn-download,.btn-delete-all,.btn-edit,.btn-danger) {
 display:inline-flex; align-items:center; justify-content:center; gap:7px;
 box-sizing:border-box; min-height:36px; height:auto; padding:8px 12px;
 border:1px solid #cee2ef; border-radius:10px; background:#edf7fd;
 color:#00558d; font-size:12px; font-weight:600; line-height:1.3;
 text-decoration:none; box-shadow:none; transform:none; transition:background .18s,border-color .18s;
}
.history-entry-bubble .history-action-icon { width:16px; height:16px; flex-shrink:0; }
.history-entry-bubble :is(.btn-delete-all,.btn-danger) { color:#b42332; background:#fff4f4; border-color:#f1d1d5; }
.history-entry-bubble .btn-download { background:#005b93; border-color:#005b93; color:white; }
.history-entry-bubble :is(.btn-download,.btn-delete-all,.btn-edit,.btn-danger)::after { content:none; }
.history-entry-bubble :is(.btn-delete-all,.btn-danger):hover { background:#ffe5e8; border-color:#e598a2; transform:none; box-shadow:none; }
.history-entry-bubble .btn-edit:hover { background:#dceffc; border-color:#8ec2df; }
.history-entry-bubble .btn-download:hover { background:#004775; border-color:#004775; transform:none; box-shadow:none; }
.history-entry-bubble :is(.btn-download,.btn-delete-all,.btn-edit,.btn-danger):focus-visible { outline:3px solid #eab308; outline-offset:3px; }
.history-entry-bubble .action-cell .btn-edit { margin-right:6px; }
.history-entry-bubble .action-btn-group { gap:10px; flex-wrap:wrap; }
@media(prefers-reduced-motion:reduce) { .history-entry-bubble :is(.btn-download,.btn-delete-all,.btn-edit,.btn-danger) { transition:none; } }

.gardu-directory { margin-bottom:20px; }
.directory-count { margin-left:8px; padding:3px 9px; border-radius:20px; background:#ffffff20; font-size:11px; font-weight:500; }
.gardu-directory-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(135px,1fr)); gap:10px; padding:16px; max-height:310px; overflow:auto; scrollbar-width:thin; scrollbar-color:#b9d1e3 transparent; }
.gardu-directory-item { display:flex; flex-direction:column; gap:6px; padding:12px 14px; border:1px solid #dfeaf3; border-radius:12px; text-decoration:none; background:linear-gradient(135deg,#fff,#f3f9fd); color:#00558d; }
.gardu-directory-item strong { font-size:13px; }
.gardu-directory-item span { font-size:16px; font-weight:700; }
.gardu-directory-item small { font-size:11px; font-weight:400; color:#64748b; }
.gardu-directory-item:hover { border-color:#83b9d7; background:#edf7fd; }
.gardu-directory-item:focus-visible,.gardu-directory-grid:focus-visible { outline:3px solid #eab308; outline-offset:-3px; }
body.input-page .gardu-directory { display:none; }
@media(max-width:500px) { .gardu-directory-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; padding:10px; } .gardu-directory-item { padding:10px; } }

.quick-menu-card .clock-quick-menu { grid-template-columns:repeat(5,minmax(0,1fr)); }
.quick-menu-card .clock-quick-menu.has-manual-input { grid-template-columns:repeat(6,minmax(0,1fr)); }
#gardu-directory-open { font-family:inherit; cursor:pointer; }
#gardu-directory-dialog .gardu-directory-grid { max-height:65vh; }
@media(min-width:701px) and (max-width:1100px) {
 .quick-menu-card .clock-quick-menu,.quick-menu-card .clock-quick-menu.has-manual-input { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:700px) {
 .quick-menu-card .clock-quick-menu,.quick-menu-card .clock-quick-menu.has-manual-input,.quick-menu-card .clock-quick-menu:not(.has-manual-input) { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .quick-menu-card .clock-quick-menu:not(.has-manual-input) #gardu-directory-open { grid-column:1 / -1; }
}

#gardu-directory-dialog .directory-layout { display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:18px; padding:18px; align-items:start; }
#gardu-directory-dialog .gardu-directory-grid { display:flex; flex-direction:column; gap:8px; padding:0 6px 0 0; max-height:60vh; }
#gardu-directory-dialog .gardu-directory-item { flex-direction:row; align-items:center; justify-content:space-between; gap:16px; padding:12px 16px; flex-shrink:0; }
.directory-summary { padding:20px; border:1px solid #dce8f1; border-radius:16px; background:linear-gradient(135deg,#f5fbff,#eaf4fa); }
.directory-summary h3 { margin:0 0 20px; font-size:15px; color:#004b87; }
.directory-summary div+div { margin-top:20px; padding-top:18px; border-top:1px solid #d4e4f0; }
.directory-summary span { display:block; font-size:12px; color:#587087; margin-bottom:8px; }
.directory-summary strong { display:block; font-size:28px; color:#00558d; }
.directory-summary small { font-size:13px; font-weight:500; }
@media(max-width:600px) { #gardu-directory-dialog .directory-layout { grid-template-columns:1fr; padding:12px; gap:12px; } .directory-summary { grid-row:1; padding:14px; } .directory-summary strong { font-size:23px; } #gardu-directory-dialog .gardu-directory-grid { max-height:40vh; } }

.catalog-actions { display:flex; flex-wrap:wrap; gap:8px; }
.catalog-actions button,#catalog-form button { padding:9px 12px; border:0; border-radius:8px; background:#00558d; color:white; cursor:pointer; }
#catalog-form label { display:block; margin:12px 0; font-size:12px; }
#catalog-form [hidden] { display:none; }
#catalog-form input,#catalog-form select { box-sizing:border-box; width:100%; margin-top:5px; padding:8px; border:1px solid #b9cedd; border-radius:7px; }
#catalog-message { font-size:12px; color:#b42332; }

.history-entry-bubble table.data-table th.history-actions-heading,
.history-entry-bubble table.data-table td.action-cell { text-align:right; width:160px; padding-right:20px; white-space:nowrap; }
.history-entry-bubble table.data-table td.action-cell .btn-edit { margin-right:8px; }

/* Keep filters compact on phones instead of a single vertical column. */
@media(max-width:720px) {
 .history-entry-bubble .filter-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; align-items:stretch; }
 .history-entry-bubble .filter-row select { width:100%; max-width:none; min-width:0; height:42px; box-sizing:border-box; font-size:13px; }
 .history-entry-bubble .filter-row .action-btn-group { grid-column:1 / -1; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; width:auto; }
 .history-entry-bubble .history-filter-apply { min-height:42px; }
 .status-filter { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr) auto; gap:8px; align-items:stretch; }
 .status-filter label { min-width:0; }
 .status-filter select { min-width:0; width:100%; box-sizing:border-box; padding:9px 6px; }
 .status-filter button { padding:9px 10px; }
}

.history-filter-download { display:flex; align-items:stretch; gap:8px; flex-shrink:0; }
.history-filter-download .history-filter-apply,.history-filter-download .btn-download { min-height:40px; white-space:nowrap; }
@media(max-width:720px) { .history-filter-download { grid-column:1 / -1; } .history-filter-download>* { flex:1; } }

.monthly-comparison { margin-top:20px; border:1px solid #dce8f1; border-radius:14px; padding:16px; background:white; }
.monthly-comparison h3 { margin:0; color:#004b87; font-size:16px; }
.monthly-comparison>p { font-size:12px; color:#64748b; line-height:1.6; margin:8px 0 14px; }
.comparison-scroll { overflow:auto; max-height:410px; scrollbar-width:thin; }
.status-dashboard .monthly-comparison table { min-width:700px; }
.monthly-comparison .comparison-note { display:block; margin-top:4px; font-size:10px; color:#64748b; }
.comparison-up { color:#15803d; font-weight:700; }.comparison-down { color:#b91c1c; font-weight:700; }
.comparison-scroll:focus-visible { outline:3px solid #eab308; outline-offset:2px; }

.metric-change-tables { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:20px; }
.metric-change-card { min-width:0; padding:16px; border:1px solid #dce8f1; border-radius:15px; background:#fff; }
.metric-change-card h3 { font-size:15px; color:#004b87; margin:0; }
.metric-change-card>p { font-size:11px; line-height:1.5; color:#64748b; margin:8px 0 12px; }
.metric-change-scroll { overflow:auto; max-height:330px; scrollbar-width:thin; }
.status-dashboard .metric-change-scroll table { min-width:480px; }
.metric-change-scroll td small { display:block; font-size:10px; color:#64748b; margin-top:4px; }
.metric-improved { color:#15803d; font-weight:600; }.metric-increased { color:#b91c1c; font-weight:600; }
.metric-change-scroll:focus-visible { outline:3px solid #eab308; outline-offset:2px; }
@media(max-width:1000px) { .metric-change-tables { grid-template-columns:1fr; } }

.change-period-select { display:block; width:calc(100% - 20px); box-sizing:border-box; margin:8px 10px; padding:6px 8px; border:1px solid #cbdce9; border-radius:8px; background:#f7fbff; color:#00558d; }
.metric-change-compact [hidden] { display:none; }
.change-description { font-size:12px; color:#64748b; line-height:1.5; }
.metric-change-compact .status-table-scroll { height:126px; }

/* Compact status tables with a consistent card hierarchy. */
.status-dashboard .status-lists { grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; align-items:stretch; }
.status-dashboard .status-list { display:flex; flex-direction:column; height:300px; box-sizing:border-box; border:1px solid #dce7f0; border-top:3px solid var(--accent); border-radius:17px; background:#fff; box-shadow:0 4px 14px #003b6f08; }
.status-dashboard .status-list>header { flex:0 0 auto; box-sizing:border-box; min-height:84px; padding:14px; gap:10px; flex-wrap:nowrap; background:linear-gradient(125deg,#eef6fc,#fff); border-bottom:1px solid #e6eef5; }
.status-dashboard .status-list h3 { color:#173e5b; font-size:13px; line-height:1.45; }
.status-dashboard .status-list h3 span { display:table; margin-top:6px; padding:3px 8px; font-size:10px; line-height:1.3; background:#fff; border:1px solid #dfe9f2; font-weight:600; }
.status-dashboard .status-list button[data-status-open] { width:36px; height:36px; border-radius:11px; border:1px solid #d5e6f3; background:#fff; box-shadow:0 2px 5px #004b8708; color:#00558d; }
.status-dashboard .status-list button[data-status-open]:hover { background:#e4f3fd; border-color:#93bfdc; }
.status-dashboard .status-list .status-table-scroll { flex:1 1 auto; min-height:0; height:auto; scrollbar-width:thin; scrollbar-color:#bdcfde transparent; }
.status-dashboard .status-list th { background:#f0f5f9; color:#5c7286; font-weight:600; font-size:10px; padding:9px 12px; border-bottom:1px solid #e4edf4; }
.status-dashboard .status-list td { padding:10px 12px; font-size:12px; line-height:1.5; font-variant-numeric:tabular-nums; }
.status-dashboard .status-list td:first-child { white-space:nowrap; font-weight:600; }
.status-dashboard .status-list tbody tr:nth-child(even) { background:#f8fbfd; }
.status-dashboard .status-list tbody tr:hover { background:#eef7fd; }
.status-dashboard .status-list .measurement-pill { border-radius:6px; font-size:10px; padding:3px 5px; }
.status-dashboard .status-list .status-empty { padding:26px 14px; text-align:center; font-weight:400; white-space:normal; }
.status-dashboard .change-period-select { flex-shrink:0; width:calc(100% - 28px); margin:9px 14px; padding:7px 10px; font-size:12px; font-weight:600; border-radius:9px; background:#f0f7fc; }
.status-dashboard .change-period-select:focus-visible { outline:3px solid #eab308; outline-offset:2px; }
@media(max-width:600px) {
 .status-dashboard .status-lists { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
 .status-dashboard .status-list { height:285px; border-radius:13px; }
 .status-dashboard .status-list>header { padding:10px; min-height:94px; gap:5px; }
 .status-dashboard .status-list h3 { font-size:11px; }
 .status-dashboard .status-list button[data-status-open] { width:30px; height:32px; padding:5px; border-radius:8px; }
 .status-dashboard .status-list td,.status-dashboard .status-list th { padding:8px; font-size:10px; }
}
@media(max-width:360px) { .status-dashboard .status-lists { grid-template-columns:1fr; } }

.header-bubble-wrapper .live-clock-card { color:#fff; }
.header-bubble-wrapper .animasi-pesan { color:#ffcf38; font-weight:600; }

.metric-value-first { color:#1565c0; font-weight:700; }
.metric-value-last { color:#c45b08; font-weight:700; }

/* History toolbar and table alignment. */
.history-entry-bubble .filter-box { padding:14px 0; }
.history-entry-bubble .filter-row { display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; }
.history-entry-bubble .history-filter-field { display:flex; flex-direction:column; flex:1 1 140px; min-width:0; margin:0; gap:7px; font-size:11px; font-weight:600; color:#536c80; }
.history-entry-bubble .history-filter-field select { flex:none; width:100%; max-width:none; height:40px; margin:0; text-align:left; padding:8px 12px; border:1px solid #cedce7; border-radius:9px; background:#f8fbfd; color:#174e73; font-size:12px; }
.history-entry-bubble .history-filter-download { flex:0 0 auto; }
.history-entry-bubble .action-btn-group:empty { display:none; }
.history-entry-bubble .filter-row .action-btn-group { width:auto; align-self:flex-end; }
.history-entry-bubble table.data-table { table-layout:fixed; }
.history-entry-bubble table.data-table th:nth-child(1) { width:22%; }
.history-entry-bubble table.data-table th:nth-child(2) { width:36%; }
.history-entry-bubble table.data-table th:nth-child(3) { width:18%; }
.history-entry-bubble table.data-table th:nth-child(4) { width:24%; }
.history-entry-bubble table.data-table:has(.history-actions-heading) th:nth-child(1) { width:18%; }
.history-entry-bubble table.data-table:has(.history-actions-heading) th:nth-child(2) { width:29%; }
.history-entry-bubble table.data-table:has(.history-actions-heading) th:nth-child(3) { width:15%; }
.history-entry-bubble table.data-table:has(.history-actions-heading) th:nth-child(4) { width:18%; }
.history-entry-bubble table.data-table:has(.history-actions-heading) th:nth-child(5) { width:20%; }
.history-entry-bubble table.data-table td { padding:10px 14px; vertical-align:middle; }
.history-entry-bubble .history-secondary { margin-top:3px; }
.history-entry-bubble table.data-table td:nth-child(3),.history-entry-bubble table.data-table td:nth-child(4),.history-entry-bubble table.data-table th:nth-child(3),.history-entry-bubble table.data-table th:nth-child(4) { text-align:right; font-variant-numeric:tabular-nums; }
.history-entry-bubble table.data-table:has(.history-actions-heading) { min-width:820px; }
@media(max-width:720px) {
 .history-entry-bubble .filter-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
 .history-entry-bubble .history-filter-field { width:100%; }
 .history-entry-bubble .history-filter-download { grid-column:1 / -1; }
 .history-entry-bubble .filter-row .action-btn-group { grid-column:1 / -1; justify-self:end; }
}

.history-delta { display:block; margin-top:5px; font-size:10px; line-height:1.5; }

.history-title-toolbar,.history-section-header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.history-header-download { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:10px; border:1px solid #ffffff55; background:#ffffff18; color:inherit; flex-shrink:0; }
.history-header-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-shrink:0}.history-header-delete{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;box-sizing:border-box;border-radius:10px;border:1px solid #ffd2d799;background:#7d243aaa;color:#fff;text-decoration:none;transition:background .18s ease,transform .18s ease}.history-header-delete:hover{background:#a12b47;transform:translateY(-1px)}.history-header-delete:focus-visible{outline:3px solid #ffcf38;outline-offset:3px}
.history-title-toolbar .history-header-download { color:white; }
.history-sort-controls { display:inline-flex; gap:4px; margin-left:5px; }
.history-sort-controls a { padding:3px 6px; border:1px solid #bfd4e4; border-radius:5px; color:#00558d; text-decoration:none; background:white; }
.history-sort-controls a.is-selected { color:white; background:#00558d; }
.history-entry-bubble table.data-table { table-layout:auto; min-width:1100px; }
.history-entry-bubble table.data-table th:nth-child(n) { width:auto; text-align:left; }
.history-entry-bubble table.data-table td:nth-child(n) { text-align:left; }
.history-entry-bubble table.data-table td:nth-child(n+5) { text-align:right; }
.history-entry-bubble table.data-table:has(.history-actions-heading) { min-width:1250px; }

.history-entry-bubble table.data-table:has(.history-actions-heading) th:nth-child(n) { width:auto; }

/* Refined full-width history, shared by home and gardu detail. */
#history-heading { border:1px solid #dbe7f0; border-radius:18px; background:#fff; box-shadow:0 5px 20px #004b8709; }
#history-heading .history-section-header,#history-heading .history-title-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 18px; background:linear-gradient(110deg,#004b80,#007b9e); color:white; border-bottom:2px solid #ffd044; text-align:left; text-transform:none; letter-spacing:0; }
#history-heading .history-title { text-align:left; font-size:16px; font-weight:700; }
#history-heading .history-header-download { width:38px; height:38px; color:#fff; background:#ffffff15; border:1px solid #ffffff45; border-radius:10px; transition:background .15s; }
#history-heading .history-header-download:hover { background:#ffffff30; }
#history-heading .history-header-download:focus-visible { outline:3px solid #ffcf38; outline-offset:3px; }
#history-heading .history-table-actions { justify-content:flex-end; margin:12px 0; }
#history-heading .history-table-actions:not(:has(a)) { display:none; }
#history-heading .table-responsive { margin-top:14px; border:1px solid #e0e9f1; border-radius:12px; scrollbar-width:thin; scrollbar-color:#b9d0df transparent; }
#history-heading table.data-table { min-width:1080px; table-layout:auto; border-collapse:collapse; }
#history-heading table.data-table th { padding:13px 14px; background:#edf5fa; color:#36576e; border:0; border-bottom:1px solid #dce7ef; font-size:11px; font-weight:700; text-align:left; vertical-align:middle; line-height:1.5; }
#history-heading table.data-table td { padding:13px 14px; border:0; border-bottom:1px solid #e9eff5; font-size:12px; line-height:1.55; text-align:left; color:#23445d; vertical-align:middle; }
#history-heading table.data-table tbody tr:nth-child(even) { background:#f8fbfd; }
#history-heading table.data-table tbody tr:hover { background:#edf7fd; }
#history-heading table.data-table td:nth-child(2) { font-weight:700; color:#005b93; white-space:nowrap; }
#history-heading table.data-table td:nth-child(n+5):nth-child(-n+8),#history-heading table.data-table th:nth-child(n+5):nth-child(-n+8) { text-align:right; font-variant-numeric:tabular-nums; }
#history-heading table.data-table td:nth-child(4) { white-space:nowrap; }
#history-heading .history-column-label { display:block; margin-bottom:5px; }
#history-heading .history-sort-controls { display:inline-flex; border:1px solid #cddfe9; border-radius:8px; gap:0; margin:0; overflow:hidden; background:white; }
#history-heading .history-sort-controls a { display:inline-flex; align-items:center; justify-content:center; min-width:30px; min-height:28px; padding:2px 7px; border:0; border-radius:0; font-size:14px; text-decoration:none; }
#history-heading .history-sort-controls a+a { border-left:1px solid #dce8f0; }
#history-heading .history-sort-controls a:hover { background:#dceefa; }
#history-heading .history-sort-controls a.is-selected { background:#005b93; color:white; }
#history-heading .history-sort-controls a:focus-visible { outline:2px solid #eab308; outline-offset:-2px; }
#history-heading .action-cell { white-space:nowrap; text-align:right !important; }
#history-heading .action-cell :is(.btn-edit,.btn-danger) { display:inline-flex; align-items:center; justify-content:center; gap:6px; border-radius:8px; padding:7px 10px; font-size:11px; border:1px solid #d5e6f2; background:#eaf5fc; color:#00558d; box-shadow:none; text-decoration:none; }
#history-heading .action-cell .btn-danger { background:#fff2f3; border-color:#efd2d7; color:#b42332; }
@media(max-width:720px) { #history-heading .history-section-header,#history-heading .history-title-toolbar { padding:12px; } #history-heading .history-title { font-size:14px; } #history-heading table.data-table td { padding:11px 12px; } }
@media(prefers-reduced-motion:reduce) { #history-heading .history-header-download { transition:none; } }

#history-heading .history-sort-heading { display:inline-flex; align-items:center; justify-content:flex-end; gap:8px; }
#history-heading .history-sort-heading .history-column-label { margin:0; }
#history-heading .history-sort-controls { flex-shrink:0; }

/* Subtle sorting arrows without a button-shaped surface. */
#history-heading .history-sort-controls { border:0; border-radius:0; background:transparent; overflow:visible; }
#history-heading .history-sort-controls a { min-width:24px; min-height:28px; padding:2px 4px; border:0; background:transparent; color:#8298a9; font-size:15px; }
#history-heading .history-sort-controls a.is-selected { background:transparent; color:#4b718b; }
#history-heading .history-sort-controls a:hover { background:transparent; color:#00558d; }
#history-heading .history-sort-controls a:focus-visible { outline:2px solid #007dae; outline-offset:2px; border-radius:3px; }

/* Left-align all history columns, including numeric values and actions. */
#history-heading table.data-table th:nth-child(n),
#history-heading table.data-table td:nth-child(n),
#history-heading table.data-table td.action-cell { text-align:left !important; }
#history-heading .history-sort-heading { justify-content:flex-start; }

/* Filter and export are equal actions; export keeps the current page open. */
.history-filter-download .history-filter-export { background:#168093;color:#fff; }
.history-filter-download .history-filter-export:hover { background:#116b7b; }

/* Compact, tidy main menu on phones without squeezing labels. */
@media(max-width:600px){
 body.dashboard-page .quick-menu-card{margin:0 0 10px;padding:7px 6px 8px;border-left-width:3px;border-radius:10px}
 body.dashboard-page .quick-menu-card .clock-quick-menu,
 body.dashboard-page .quick-menu-card .clock-quick-menu.has-manual-input,
 body.dashboard-page .quick-menu-card .clock-quick-menu:not(.has-manual-input){grid-template-columns:repeat(3,minmax(0,1fr));gap:5px 2px}
 body.dashboard-page .quick-menu-card .clock-quick-menu .quick-menu-link{width:100%;min-width:0;min-height:53px;padding:4px 2px;border-radius:8px}
 body.dashboard-page .quick-menu-card .quick-menu-icon{width:29px;height:29px;margin:0 auto 2px}
 body.dashboard-page .quick-menu-card .quick-menu-icon svg{width:16px;height:16px}
 body.dashboard-page .quick-menu-card .quick-menu-text{width:100%;font-size:8.5px;line-height:1.15;white-space:normal}
 .history-filter-download{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:8px}
 .history-filter-download .history-filter-apply{width:100%;min-height:42px;padding:8px 10px}
}

.change-detail-table .metric-value-first,.change-detail-table .metric-value-last { display:block; font-size:14px; margin-bottom:5px; }
.change-value-date,.change-value-time { display:block; white-space:nowrap; color:#64748b; font-size:11px; line-height:1.6; }
.status-dialog .change-detail-table { table-layout:fixed; width:100%; }
.status-dialog .change-detail-table th:first-child { width:18%; }
.status-dialog .change-detail-table td { vertical-align:top; }
@media(max-width:600px) {
 .status-dialog .change-detail-table th,.status-dialog .change-detail-table td { padding:9px 5px; font-size:11px; overflow-wrap:anywhere; }
 .change-detail-table .metric-value-first,.change-detail-table .metric-value-last { font-size:13px; }
 .change-value-date,.change-value-time { font-size:10px; }
 .status-dialog .status-full-table:has(.change-detail-table) { padding:0 8px 10px; }
}

/* Shared popup presentation for dashboard and analysis. */
.status-dialog { border:1px solid #dce9f2; border-radius:20px; background:#fbfdff; box-shadow:0 24px 90px #001d3c55; max-height:88vh; max-height:88dvh; }
.status-dialog::backdrop { background:rgba(8,29,47,.66); backdrop-filter:blur(3px); }
.status-dialog>header { position:sticky; top:0; z-index:5; padding:18px 20px; gap:16px; border-bottom:2px solid #f8cc46; background:linear-gradient(115deg,#034875,#007b9d); }
.status-dialog>header h2 { line-height:1.45; font-size:16px; font-weight:700; }
.status-dialog>header>button,.status-dialog .status-share-actions button { display:inline-flex; justify-content:center; align-items:center; width:38px; height:38px; flex:0 0 38px; padding:8px; border-radius:11px; color:#fff; border:1px solid #ffffff45; background:#ffffff12; cursor:pointer; }
.status-dialog>header>button:hover { background:#ffffff2b; }
.status-dialog>header>button:focus-visible { outline:3px solid #ffcf38; outline-offset:2px; }
#history-dialog { width:min(760px,calc(100% - 24px)); }
#history-body { color:#244760; }
#history-body>h3 { margin:0 0 10px; font-size:17px; color:#00558d; line-height:1.6; }
#history-body>p { margin:7px 0; color:#637c90; font-size:12px; line-height:1.65; }
#history-body .history-values { gap:12px; margin:18px 0 0; }
#history-body .history-values>div { padding:15px; border:1px solid #dbe8f1; border-radius:13px; background:linear-gradient(135deg,#fff,#f0f7fc); }
#history-body .history-values>div:nth-child(-n+3) { border-top:3px solid #2193ba; background:#eaf6fc; }
#history-body .history-values dt { font-size:11px; font-weight:600; color:#58748b; }
#history-body .history-values dd { margin-top:8px; font-size:19px; font-variant-numeric:tabular-nums; }
.status-dialog .status-full-table { padding:12px 16px 16px; scrollbar-width:thin; scrollbar-color:#b5cedf transparent; }
.status-dialog th { padding:12px 10px; background:#edf5fa; color:#47677e; }
.status-dialog td { padding:12px 10px; line-height:1.6; vertical-align:middle; font-variant-numeric:tabular-nums; }
.status-dialog tbody tr:nth-child(even) { background:#f4f9fc; }
.sld-modal-card { border:1px solid #dbe8f1; border-radius:20px; box-shadow:0 24px 90px #001d3c44; }
.sld-modal-header { border-radius:13px 13px 0 0; }
.gardu-metadata-form { border-radius:18px; box-shadow:0 24px 70px #001d3c33; }
.gardu-metadata-form-header { padding-bottom:12px; border-bottom:1px solid #dce8f1; }
.gardu-metadata-close { border-radius:9px; }
@media(max-width:560px) {
 .status-dialog { border-radius:15px; width:calc(100% - 16px); }
 .status-dialog>header { padding:13px; gap:10px; }
 #history-dialog>header,#gardu-directory-dialog>header { flex-wrap:nowrap; }
 #history-dialog>header h2,#gardu-directory-dialog>header h2 { flex:1; font-size:14px; }
 #history-body .history-values { gap:8px; grid-template-columns:repeat(2,minmax(0,1fr)); }
 #history-body .history-values>div { padding:12px; }
 #history-body .history-values dd { font-size:17px; }
 #history-body>h3 { font-size:15px; }
 .status-dialog .status-full-table { padding:8px; }
}