/* ====================================================
   Dashboard Sự cố Lưới điện — Design System (Navy Theme)
   ==================================================== */

/* === TOKENS === */
:root {
  --navy-950: #060d1f;
  --navy-900: #0a1628;
  --navy-800: #0f2040;
  --navy-700: #152a58;
  --navy-600: #1d3a70;
  --navy-500: #2563ae;
  --navy-400: #3b82f6;
  --navy-300: #93c5fd;
  --navy-100: #dbeafe;

  --accent-cyan:    #06b6d4;
  --accent-green:   #10b981;
  --accent-amber:   #f59e0b;
  --accent-red:     #ef4444;
  --accent-purple:  #8b5cf6;
  --accent-orange:  #f97316;
  --accent-teal:    #14b8a6;
  --accent-pink:    #ec4899;
  --accent-lime:    #84cc16;
  --accent-sky:     #38bdf8;

  --surface-0:   #ffffff;
  --surface-50:  #f8fafc;
  --surface-100: #f1f5f9;
  --surface-200: #e2e8f0;
  --surface-300: #cbd5e1;
  --surface-400: #94a3b8;
  --surface-500: #64748b;
  --surface-700: #334155;
  --surface-900: #0f172a;

  --topbar-h:    60px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --shadow-sm:   0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.08);
  --shadow-md:   0 4px 16px rgba(0,0,0,.14),0 2px 6px rgba(0,0,0,.08);
  --shadow-lg:   0 10px 40px rgba(0,0,0,.2);

  --font-sans:  'Inter', 'Roboto', system-ui, -apple-system, sans-serif;
  --font-mono:  'JetBrains Mono', 'Fira Mono', monospace;

  /* Chart palette */
  --chart-1: #2563ae;
  --chart-2: #10b981;
  --chart-3: #f59e0b;
  --chart-4: #ef4444;
  --chart-5: #8b5cf6;
  --chart-6: #06b6d4;
  --chart-7: #f97316;
  --chart-8: #14b8a6;
  --chart-9: #ec4899;
  --chart-10:#84cc16;
}

/* === LIGHT THEME (GIAO DIỆN SÁNG CAO CẤP) === */
html[data-theme="light"], body.theme-light {
  --navy-950: #f1f5f9; /* Nền chính: xám bạc nhẹ nhàng dịu mắt */
  --navy-900: #ffffff; /* Nền topbar, filter-bar: trắng tinh khiết */
  --navy-800: #ffffff; /* Nền widget cards, popup: trắng có shadow */
  --navy-700: #e2e8f0; /* Đường viền nhẹ (border) */
  --navy-600: #cbd5e1; /* Viền ô input, divider */
  --navy-500: #2563eb; /* Màu chủ đạo xanh EVN rực rỡ */
  --navy-400: #3b82f6; /* Hover / Focus */
  --navy-300: #475569; /* Text phụ / link phụ */
  --navy-200: #1e293b;
  --navy-100: #0f172a;

  --surface-0:   #ffffff;
  --surface-50:  #0f172a; /* Màu chữ chính (Slate 900 sắc nét) */
  --surface-100: #1e293b; /* Text phụ */
  --surface-200: #334155;
  --surface-300: #64748b;
  --surface-400: #64748b;
  --surface-500: #94a3b8;
  --surface-700: #cbd5e1;
  --surface-900: #f8fafc;

  --shadow-sm:   0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md:   0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg:   0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
}

/* Light theme overrides for rich text & contrast */
html[data-theme="light"] .topbar-title,
body.theme-light .topbar-title {
  color: #0f172a !important;
  font-weight: 800;
}
html[data-theme="light"] .topbar,
body.theme-light .topbar {
  background: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;
}
html[data-theme="light"] .filter-bar,
body.theme-light .filter-bar {
  background: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
}
html[data-theme="light"] .filter-select,
html[data-theme="light"] .filter-input,
body.theme-light .filter-select,
body.theme-light .filter-input {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}
html[data-theme="light"] .filter-select:focus,
html[data-theme="light"] .filter-input:focus,
body.theme-light .filter-select:focus,
body.theme-light .filter-input:focus {
  background: #ffffff !important;
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}
html[data-theme="light"] .tab-btn,
body.theme-light .tab-btn {
  color: #64748b !important;
}
html[data-theme="light"] .tab-btn:hover,
body.theme-light .tab-btn:hover {
  color: #0f172a !important;
  background: #f1f5f9 !important;
}
html[data-theme="light"] .tab-btn.active,
body.theme-light .tab-btn.active {
  color: #2563eb !important;
  background: #ffffff !important;
  border-bottom: 2px solid #2563eb !important;
  font-weight: 700;
}
html[data-theme="light"] .widget-card,
body.theme-light .widget-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
}
html[data-theme="light"] .widget-card:hover,
body.theme-light .widget-card:hover {
  border-color: #93c5fd !important;
  box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.08) !important;
}
html[data-theme="light"] .widget-label,
body.theme-light .widget-label {
  background: #eff6ff !important;
  color: #2563eb !important;
  border: 1px solid #bfdbfe !important;
}
html[data-theme="light"] .widget-title,
body.theme-light .widget-title {
  color: #64748b !important;
  font-weight: 700;
}
html[data-theme="light"] .widget-sub,
body.theme-light .widget-sub {
  color: #94a3b8 !important;
}
html[data-theme="light"] .kpi-value,
body.theme-light .kpi-value {
  color: #0f172a !important;
}
html[data-theme="light"] .data-table th,
body.theme-light .data-table th {
  background: #f8fafc !important;
  color: #475569 !important;
  border-bottom: 2px solid #e2e8f0 !important;
}
html[data-theme="light"] .data-table td,
body.theme-light .data-table td {
  border-bottom: 1px solid #f1f5f9 !important;
  color: #1e293b !important;
}
html[data-theme="light"] .data-table tbody tr:hover,
body.theme-light .data-table tbody tr:hover {
  background: #f8fafc !important;
}
html[data-theme="light"] .data-table tfoot td,
body.theme-light .data-table tfoot td {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}
html[data-theme="light"] .user-menu-btn,
body.theme-light .user-menu-btn {
  color: #0f172a !important;
}
html[data-theme="light"] .user-menu-btn:hover,
body.theme-light .user-menu-btn:hover {
  background: #f1f5f9 !important;
}
html[data-theme="light"] .user-menu-dropdown,
body.theme-light .user-menu-dropdown {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
}
html[data-theme="light"] .user-menu-name,
body.theme-light .user-menu-name {
  color: #0f172a !important;
}
html[data-theme="light"] .user-menu-item,
body.theme-light .user-menu-item {
  color: #334155 !important;
}
html[data-theme="light"] .user-menu-item:hover,
body.theme-light .user-menu-item:hover {
  background: #f8fafc !important;
  color: #2563eb !important;
}
html[data-theme="light"] .btn-icon,
body.theme-light .btn-icon {
  color: #64748b !important;
}
html[data-theme="light"] .btn-icon:hover,
body.theme-light .btn-icon:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}
html[data-theme="light"] .detail-panel,
body.theme-light .detail-panel {
  background: #ffffff !important;
  border-left: 1px solid #e2e8f0 !important;
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.08) !important;
}
html[data-theme="light"] .detail-panel-header,
html[data-theme="light"] .detail-panel-footer,
body.theme-light .detail-panel-header,
body.theme-light .detail-panel-footer {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}
html[data-theme="light"] .detail-panel-title,
body.theme-light .detail-panel-title {
  color: #0f172a !important;
}
html[data-theme="light"] .detail-field-value,
body.theme-light .detail-field-value {
  color: #1e293b !important;
}
html[data-theme="light"] .admin-sidebar,
body.theme-light .admin-sidebar {
  background: #ffffff !important;
  border-right: 1px solid #e2e8f0 !important;
}
html[data-theme="light"] .admin-page-title,
body.theme-light .admin-page-title {
  color: #0f172a !important;
}
html[data-theme="light"] .section-card,
body.theme-light .section-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
}
html[data-theme="light"] .section-card-title,
body.theme-light .section-card-title {
  color: #0f172a !important;
}

/* Light Mode: Edit Toolbar & Buttons (Rõ nét, tương phản cao, dễ đọc) */
html[data-theme="light"] .edit-toolbar,
body.theme-light .edit-toolbar {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
}
html[data-theme="light"] .btn-default,
body.theme-light .btn-default {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  font-weight: 600 !important;
}
html[data-theme="light"] .btn-default:hover,
body.theme-light .btn-default:hover {
  background: #e2e8f0 !important;
  color: #000000 !important;
}
html[data-theme="light"] .btn-blue,
body.theme-light .btn-blue {
  background: #2563eb !important;
  color: #ffffff !important;
  border: 1px solid #1d4ed8 !important;
  font-weight: 600 !important;
}
html[data-theme="light"] .btn-blue:hover,
body.theme-light .btn-blue:hover {
  background: #1d4ed8 !important;
  color: #ffffff !important;
}
html[data-theme="light"] .btn-success,
body.theme-light .btn-success {
  background: #059669 !important;
  color: #ffffff !important;
  border: 1px solid #047857 !important;
  font-weight: 600 !important;
}
html[data-theme="light"] .btn-success:hover,
body.theme-light .btn-success:hover {
  background: #047857 !important;
}
html[data-theme="light"] .btn-warning,
body.theme-light .btn-warning {
  background: #fef3c7 !important;
  color: #b45309 !important;
  border: 1px solid #fde68a !important;
  font-weight: 600 !important;
}
html[data-theme="light"] .btn-warning:hover,
body.theme-light .btn-warning:hover {
  background: #fde68a !important;
  color: #92400e !important;
}
html[data-theme="light"] .btn-danger,
body.theme-light .btn-danger {
  background: #fee2e2 !important;
  color: #b91c1c !important;
  border: 1px solid #fecaca !important;
  font-weight: 600 !important;
}

/* Light Mode: Widget Action Buttons (Nút Resize và Xóa) */
html[data-theme="light"] .btn-widget-action,
body.theme-light .btn-widget-action {
  background: #f1f5f9 !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
}
html[data-theme="light"] .btn-widget-action:hover,
body.theme-light .btn-widget-action:hover {
  background: #fee2e2 !important;
  color: #dc2626 !important;
  border-color: #fca5a5 !important;
}

/* === RESET === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--navy-950);
  color: var(--surface-50);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--navy-300); text-decoration: none; }
a:hover { color: var(--navy-100); }
img { display: block; max-width: 100%; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }

/* === TOPBAR === */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  background: var(--navy-900);
  border-bottom: 1px solid var(--navy-700);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 16px;
  z-index: 100;
  box-shadow: 0 2px 12px rgba(0,0,0,.35);
}
.topbar-left  { display:flex; align-items:center; gap:12px; flex:0 0 auto; }
.topbar-center{ flex:1; display:flex; justify-content:center; }
.topbar-right { display:flex; align-items:center; gap:8px; flex:0 0 auto; }

.topbar-brand { display:flex; align-items:center; gap:12px; }
.topbar-icon  { font-size:24px; filter:drop-shadow(0 0 8px rgba(59,130,246,.7)); }
.topbar-title { font-size:15px; font-weight:700; letter-spacing:.01em; color:#fff; white-space:nowrap; }
.topbar-sub   { font-size:11px; color: var(--navy-300); display:flex; align-items:center; gap:6px; margin-top:1px; }

/* === BADGES === */
.badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 8px; border-radius:20px; font-size:10px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase;
}
.badge-online  { background: rgba(16,185,129,.2); color:#34d399; border:1px solid rgba(16,185,129,.3); }
.badge-online::before { content:''; display:inline-block; width:6px; height:6px; border-radius:50%; background:#10b981; animation:pulse-dot 1.5s ease infinite; }
.badge-stale   { background:rgba(245,158,11,.2); color:#fbbf24; border:1px solid rgba(245,158,11,.3); }
.badge-demo    { background:rgba(139,92,246,.2); color:#a78bfa; border:1px solid rgba(139,92,246,.3); }
.badge-warn    { background:rgba(245,158,11,.15);  color:#fbbf24; border:1px solid rgba(245,158,11,.3); }
.badge-danger  { background:rgba(239,68,68,.2);   color:#ef4444; border:1px solid rgba(239,68,68,.4); font-weight:700; }
.badge-info    { background:rgba(59,130,246,.15);  color:#60a5fa; border:1px solid rgba(59,130,246,.3); }
.badge-success { background:rgba(16,185,129,.15);  color:#34d399; border:1px solid rgba(16,185,129,.3); }

@keyframes pulse-dot {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.5; transform:scale(.8); }
}

@keyframes pulse-warn {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
  50%      { box-shadow: 0 0 0 5px rgba(239, 68, 68, 0); }
}

/* === ICON BUTTONS === */
.btn-icon {
  width:36px; height:36px; border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  color: var(--navy-300); transition: background .15s, color .15s;
}
.btn-icon:hover { background: var(--navy-700); color:#fff; }
.btn-icon.active { background: var(--navy-500); color:#fff; }

/* === USER MENU === */
.user-menu-wrap { position:relative; }
.user-menu-btn {
  display:flex; align-items:center; gap:8px;
  padding:5px 10px; border-radius:var(--radius-md);
  color:var(--surface-50); transition:background .15s;
}
.user-menu-btn:hover { background: var(--navy-700); }
.user-avatar {
  width:30px; height:30px; border-radius:50%;
  background: var(--navy-500); color:#fff;
  font-size:13px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.user-name { font-size:13px; font-weight:500; }

.user-menu-dropdown {
  position:absolute; right:0; top:calc(100% + 8px);
  background: var(--navy-800); border:1px solid var(--navy-600);
  border-radius:var(--radius-md); padding:4px 0;
  min-width:200px; box-shadow:var(--shadow-lg);
  opacity:0; pointer-events:none; transform:translateY(-6px);
  transition:opacity .15s,transform .15s;
  z-index:200;
}
.user-menu-dropdown.open { opacity:1; pointer-events:auto; transform:translateY(0); }
.user-menu-header { padding:10px 16px 8px; border-bottom:1px solid var(--navy-700); margin-bottom:4px; }
.user-menu-name { font-size:13px; font-weight:600; color:#fff; }
.user-menu-role { font-size:11px; color: var(--navy-300); margin-top:2px; }
.user-menu-item {
  display:flex; align-items:center; gap:8px;
  padding:8px 16px; font-size:13px; color:var(--surface-200);
  transition:background .1s, color .1s;
}
.user-menu-item:hover { background:var(--navy-700); color:#fff; }
.user-menu-divider { height:1px; background:var(--navy-700); margin:4px 0; }
.user-menu-logout { color: #fca5a5; }
.user-menu-logout:hover { background:rgba(239,68,68,.15); color:#fca5a5; }

/* === MAIN === */
#main-content {
  padding-top: var(--topbar-h);
  min-height:100vh;
}

/* === TABS === */
.tab-bar {
  display:flex; gap:2px; align-items:center;
  background: transparent;
}
.tab-btn {
  padding:8px 18px; border-radius:6px 6px 0 0;
  font-size:13px; font-weight:500; color: var(--navy-300);
  background:transparent; border:none;
  cursor:pointer; transition:color .15s, background .15s;
  white-space:nowrap;
}
.tab-btn:hover { color:#fff; background:var(--navy-800); }
.tab-btn.active { color:#fff; background:var(--navy-700); border-bottom:2px solid var(--navy-400); }

/* === FILTER BAR === */
.filter-bar {
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  padding:10px 20px;
  background: var(--navy-900);
  border-bottom:1px solid var(--navy-700);
  position:sticky; top:var(--topbar-h); z-index:90;
}
.filter-select, .filter-input {
  background:var(--navy-800); border:1px solid var(--navy-600);
  color:var(--surface-100); border-radius:var(--radius-sm);
  padding:5px 10px; font-size:12px; font-family:inherit;
  transition:border-color .15s;
}
.filter-select:focus, .filter-input:focus {
  outline:none; border-color:var(--navy-400);
}
.filter-input { min-width:160px; }
.filter-chips { display:flex; flex-wrap:wrap; gap:4px; }
.filter-chip {
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 10px; border-radius:20px; font-size:11px;
  background:rgba(37,99,174,.25); border:1px solid rgba(37,99,174,.5); color:var(--navy-200,#93c5fd);
}
.filter-chip-remove { cursor:pointer; font-size:14px; line-height:1; opacity:.7; }
.filter-chip-remove:hover { opacity:1; }
.btn-clear-filter {
  padding:5px 12px; border-radius:var(--radius-sm); font-size:12px;
  background:rgba(239,68,68,.1); color:#fca5a5; border:1px solid rgba(239,68,68,.3);
  transition:background .15s;
}
.btn-clear-filter:hover { background:rgba(239,68,68,.25); }

/* === CARDS / WIDGETS === */
.widget-card {
  background: var(--navy-800);
  border:1px solid var(--navy-700);
  border-radius:var(--radius-lg);
  padding:16px;
  box-shadow:var(--shadow-md);
  display:flex; flex-direction:column;
  height:100%; min-height:140px;
  transition:box-shadow .2s, border-color .2s;
  position:relative; overflow:hidden;
}
.widget-card:hover { border-color:var(--navy-500); box-shadow:var(--shadow-lg); }
.widget-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--navy-500),var(--accent-cyan));
  opacity:0; transition:opacity .2s;
}
.widget-card:hover::before { opacity:1; }

/* Widget header and action buttons (Remove, Resize) */
.widget-header {
  display:flex; align-items:flex-start; justify-content:space-between;
  margin-bottom:12px; gap:8px;
}
.widget-header-title { flex:1; }
.widget-actions {
  display:none; align-items:center; gap:4px;
}
body.is-editing .widget-actions { display:inline-flex; }
.btn-widget-action {
  width:24px; height:24px; border-radius:4px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.08); color:var(--surface-300);
  font-size:12px; cursor:pointer; border:none; transition:background .15s, color .15s;
}
.btn-widget-action:hover { background:rgba(239,68,68,0.25); color:#fca5a5; }

.widget-label {
  width:24px; height:24px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700;
  background:var(--navy-600); color:var(--navy-200,#93c5fd);
  flex-shrink:0;
}
.widget-title {
  font-size:12px; font-weight:600; color:var(--surface-400);
  text-transform:uppercase; letter-spacing:.06em; margin-bottom:2px;
}
.widget-subtitle { font-size:11px; color:var(--surface-500); }
.widget-body { flex:1; position:relative; min-height:60px; }

/* ============================================================
   UNIFIED DASHBOARD CANVAS (Lưới 12 Cột Tự Do)
   Cho phép kéo thả đổi vị trí giữa các hàng và co giãn kích thước
   ============================================================ */
.dashboard-canvas {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

/* Các kích thước mặc định và tùy chỉnh của Widget */
.widget-card {
  grid-column: span 6; /* Mặc định: 6/12 = 50% */
  transition: grid-column .2s ease, box-shadow .2s ease, transform .2s ease;
}

/* Kích thước KPI (3 cột = 25% = 4 ô một hàng) */
.widget-card.w-col-3 { grid-column: span 3 !important; }
/* Kích thước nửa màn hình (6 cột = 50%) */
.widget-card.w-col-6 { grid-column: span 6 !important; }
/* Kích thước 2/3 màn hình (8 cột = 66.6%) */
.widget-card.w-col-8 { grid-column: span 8 !important; }
/* Kích thước 1/3 màn hình (4 cột = 33.3%) */
.widget-card.w-col-4 { grid-column: span 4 !important; }
/* Kích thước full màn hình (12 cột = 100%) */
.widget-card.w-col-12,
.widget-card.col-span-full { grid-column: 1 / -1 !important; }

@media (max-width: 1024px) {
  .widget-card.w-col-3 { grid-column: span 6 !important; }
  .widget-card.w-col-6,
  .widget-card.w-col-8,
  .widget-card.w-col-4 { grid-column: span 12 !important; }
}
@media (max-width: 640px) {
  .widget-card.w-col-3 { grid-column: span 12 !important; }
}

/* Chế độ Chỉnh sửa: Tự do Kéo thả & Resize */
body.is-editing .dashboard-canvas {
  min-height: 400px;
}
body.is-editing .widget-card {
  cursor: grab;
  position: relative;
  outline: 2px dashed rgba(37, 99, 235, 0.55);
  outline-offset: -2px;
  user-select: none;
}
body.is-editing .widget-card:active {
  cursor: grabbing;
}
body.is-editing .widget-card.is-dragging {
  opacity: 0.35;
  transform: scale(0.97);
}
body.is-editing .widget-card.drag-over {
  outline: 3px solid #2563eb !important;
  box-shadow: 0 0 20px rgba(37, 99, 235, 0.4) !important;
  transform: translateY(-2px);
}
/* Đảm bảo các nút hành động (⤢ và ✕) luôn bấm được và không bị cản bởi drag */
body.is-editing .widget-actions {
  display: inline-flex !important;
  z-index: 20 !important;
  position: relative !important;
  pointer-events: auto !important;
}
body.is-editing .btn-widget-action {
  cursor: pointer !important;
  pointer-events: auto !important;
  z-index: 21 !important;
}
/* Khi đang chỉnh sửa, vô hiệu hóa tương tác hover/click của chart canvas để ưu tiên kéo thả */
body.is-editing .widget-body canvas,
body.is-editing [id^="chart-container-"] canvas {
  pointer-events: none !important;
}

/* KPI cards */
.kpi-value {
  font-size:36px; font-weight:800; line-height:1;
  color:#fff; margin-bottom:4px;
  font-variant-numeric: tabular-nums;
}
.kpi-sub { font-size:12px; color:var(--surface-400); }
.kpi-trend { font-size:13px; display:inline-flex; align-items:center; gap:4px; margin-top:6px; }
.kpi-trend.up   { color: var(--accent-amber); }
.kpi-trend.down { color: var(--accent-green); }
.kpi-trend.neutral { color: var(--surface-400); }

/* Progress bar (% chỉ tiêu) */
.progress-wrap { margin-top:8px; }
.progress-track { height:6px; background:var(--navy-700); border-radius:3px; overflow:hidden; }
.progress-bar { height:100%; border-radius:3px; transition:width .6s cubic-bezier(.4,0,.2,1); }
.progress-bar.green  { background:var(--accent-green); }
.progress-bar.amber  { background:var(--accent-amber); }
.progress-bar.red    { background:var(--accent-red); }

/* === PILL (bảng %) === */
.pill {
  display:inline-flex; align-items:center; justify-content:center;
  padding:2px 10px; border-radius:20px; font-size:11px; font-weight:700;
  min-width:52px;
}
.pill-green  { background:rgba(16,185,129,.15);  color:#34d399; }
.pill-amber  { background:rgba(245,158,11,.15);  color:#fbbf24; }
.pill-red    { background:rgba(239,68,68,.15);   color:#fca5a5; }
.pill-blue   { background:rgba(37,99,174,.15);   color:#93c5fd; }
.pill-gray   { background:rgba(100,116,139,.15); color:#94a3b8; }

/* === TABLES === */
.data-table { width:100%; border-collapse:collapse; font-size:13px; }
.data-table th {
  background:var(--navy-900); color:var(--surface-300);
  padding:8px 12px; text-align:left;
  font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em;
  border-bottom:2px solid var(--navy-700); white-space:nowrap;
}

/* Bảng tổng hợp hiển thị theo kiểu Google Sheet: lưới rõ, tiêu đề xanh cố định,
   hàng xen kẽ và cuộn ngang khi có nhiều cột. */
.sheet-like-table { border-collapse: separate; border-spacing: 0; background: #fff; color: #1f2937; }
.sheet-like-table th { background: #356b58 !important; color: #fff !important; border-right: 1px solid rgba(255,255,255,.22); border-bottom: 1px solid #285442; white-space: nowrap; }
.sheet-like-table td { border-right: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb; white-space: nowrap; }
.sheet-like-table tbody tr:nth-child(even) td { background: #f5f7f8; }
.sheet-like-table tbody tr:hover td { background: #e3f0ea; }
.sheet-like-table thead { position: sticky; top: 0; z-index: 3; }
.data-table td {
  padding:8px 12px; border-bottom:1px solid var(--navy-800);
  color:var(--surface-100);
}
.data-table tbody tr { transition:background .1s; cursor:pointer; }
.data-table tbody tr:hover { background:rgba(37,99,174,.08); }
.data-table tfoot td {
  font-weight:700; background:var(--navy-900);
  border-top:2px solid var(--navy-700);
}
.data-table th.sortable { user-select:none; }
.data-table th.sortable:hover { color:#fff; cursor:pointer; }
.data-table th.sort-asc::after  { content:' ↑'; opacity:.7; }
.data-table th.sort-desc::after { content:' ↓'; opacity:.7; }

/* === LOADING / SKELETON === */
.skeleton {
  background: linear-gradient(90deg,var(--navy-800) 25%,var(--navy-700) 50%,var(--navy-800) 75%);
  background-size:200% 100%;
  border-radius:var(--radius-sm);
  animation:shimmer 1.4s infinite;
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

.loading-overlay {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(10,22,40,.7); border-radius:inherit;
  z-index:10;
}
.dashboard-page.is-loading { min-height:320px; position:relative; }
.dashboard-page.is-loading::after { content:'Đang tải dữ liệu…'; position:absolute; inset:20px; display:flex; align-items:center; justify-content:center; color:var(--surface-400); background:linear-gradient(90deg,transparent 25%,rgba(255,255,255,.06) 50%,transparent 75%); background-size:200% 100%; animation:shimmer 1.4s infinite; border-radius:var(--radius-md); }
.status-summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; padding:0 16px 16px; }
.status-summary-card { border:1px solid var(--surface-200); border-left:4px solid var(--surface-400); border-radius:10px; padding:12px 14px; background:var(--surface-50); }
.sheet-like-table#table-incident-summary { table-layout:fixed; width:100%; min-width:0; }
.sheet-like-table#table-incident-summary th,
.sheet-like-table#table-incident-summary td { white-space:normal; overflow-wrap:anywhere; word-break:break-word; }
.sheet-like-table#table-incident-summary th:first-child,
.sheet-like-table#table-incident-summary td:first-child { width:5%; }
.sheet-like-table#table-incident-summary th:nth-child(2),
.sheet-like-table#table-incident-summary td:nth-child(2) { width:25%; }
.sheet-like-table#table-incident-summary th:nth-child(n+3),
.sheet-like-table#table-incident-summary td:nth-child(n+3) { width:8.75%; }
.status-summary-card span,.status-summary-card small { display:block; color:var(--surface-500); font-size:12px; }
.status-summary-card strong { display:block; margin:4px 0; font-size:24px; color:var(--surface-900); }
.status-summary-processing { border-left-color:#f59e0b; }
.status-summary-done { border-left-color:#10b981; }
.status-summary-other { border-left-color:#64748b; }
@media(max-width:700px){.status-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.status-summary-card strong{font-size:20px;}}
.spinner {
  width:32px; height:32px; border-radius:50%;
  border:3px solid var(--navy-700);
  border-top-color: var(--navy-400);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* === EMPTY STATE === */
.empty-state {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:40px 20px; color:var(--surface-500); gap:12px;
  font-size:13px; text-align:center;
}
.empty-state svg { opacity:.4; }

/* === ERROR BANNER === */
.error-banner {
  background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.3);
  color:#fca5a5; border-radius:var(--radius-md); padding:12px 16px;
  display:flex; align-items:flex-start; gap:10px; font-size:13px;
  margin:12px 20px;
}
.error-banner svg { flex-shrink:0; margin-top:2px; }
.btn-retry {
  margin-top:8px; padding:5px 12px; border-radius:var(--radius-sm);
  background:rgba(239,68,68,.2); color:#fca5a5; font-size:12px; border:none;
  cursor:pointer;
}
.btn-retry:hover { background:rgba(239,68,68,.35); }

/* === DASHBOARD GRID === */
.dashboard-page {
  padding:20px;
  display:flex; flex-direction:column; gap:16px;
}
.grid-wrapper { position:relative; }

/* === LOGIN PAGE === */
.login-page {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(ellipse at 30% 50%, var(--navy-800) 0%, var(--navy-950) 60%);
  padding:20px;
}
html[data-theme="light"] .login-page,
body.theme-light .login-page {
  background-image: linear-gradient(rgba(8, 20, 42, .48), rgba(8, 20, 42, .48)), url('../../bg.jpg') !important;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.login-card {
  background:var(--navy-800); border:1px solid var(--navy-600);
  border-radius:var(--radius-lg); padding:40px; width:100%; max-width:400px;
  box-shadow:var(--shadow-lg);
}
html[data-theme="light"] .login-card,
body.theme-light .login-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 20px 40px -15px rgba(0,0,0,0.08) !important;
}
html[data-theme="light"] .login-logo-title,
body.theme-light .login-logo-title {
  color: #0f172a !important;
}
html[data-theme="light"] .login-logo-sub,
body.theme-light .login-logo-sub {
  color: #64748b !important;
}
.login-logo { text-align:center; margin-bottom:24px; }
.login-logo-icon { font-size:48px; display:block; margin-bottom:8px;
  filter:drop-shadow(0 0 16px rgba(59,130,246,.6)); }
.login-logo-title { font-size:18px; font-weight:700; color:#fff; }
.login-logo-sub { font-size:12px; color:var(--navy-300); margin-top:4px; }
.login-error {
  background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.3);
  color:#fca5a5; border-radius:var(--radius-sm); padding:10px 14px;
  font-size:13px; margin-bottom:16px;
}
.form-group { margin-bottom:16px; }
.form-label { display:block; font-size:12px; font-weight:600; color:var(--surface-300); margin-bottom:6px; }
.form-input {
  width:100%; background:var(--navy-900); border:1px solid var(--navy-600);
  color:var(--surface-50); border-radius:var(--radius-sm);
  padding:10px 14px; font-size:14px; font-family:inherit;
  transition:border-color .15s, box-shadow .15s;
}
.form-input:focus {
  outline:none; border-color:var(--navy-400);
  box-shadow:0 0 0 3px rgba(37,99,174,.25);
}
.btn-primary {
  width:100%; padding:11px; border-radius:var(--radius-sm);
  background:var(--navy-500); color:#fff; font-size:14px; font-weight:600;
  border:none; cursor:pointer; transition:background .15s, transform .1s;
}
.btn-primary:hover { background:var(--navy-400); }
.btn-primary:active { transform:scale(.99); }
.btn-primary:disabled { opacity:.6; cursor:not-allowed; }

/* === ADMIN PAGES === */
.admin-layout { display:flex; min-height:calc(100vh - var(--topbar-h)); }
.admin-sidebar {
  width:220px; flex-shrink:0;
  background:var(--navy-900); border-right:1px solid var(--navy-700);
  padding:16px 0;
}
.admin-sidebar-title {
  padding:0 16px 8px; font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em; color:var(--surface-500);
}
.admin-nav-item {
  display:flex; align-items:center; gap:10px;
  padding:9px 16px; font-size:13px; color:var(--surface-300);
  transition:background .1s, color .1s;
}
.admin-nav-item:hover { background:var(--navy-800); color:#fff; }
.admin-nav-item.active { background:var(--navy-700); color:#fff; border-right:2px solid var(--navy-400); }
.admin-main { flex:1; padding:24px; overflow-y:auto; }
.admin-page-title { font-size:20px; font-weight:700; color:#fff; margin-bottom:4px; }
.admin-page-sub { font-size:13px; color:var(--surface-400); margin-bottom:24px; }

/* System check table */
.system-check-table { width:100%; border-collapse:collapse; font-size:13px; }
.system-check-table td { padding:10px 14px; border-bottom:1px solid var(--navy-800); }
.check-ok   { color:var(--accent-green); font-weight:600; }
.check-fail { color:var(--accent-red); font-weight:600; }
.check-warn { color:var(--accent-amber); font-weight:600; }

/* === SECTION CARDS (admin) === */
.section-card {
  background:var(--navy-800); border:1px solid var(--navy-700);
  border-radius:var(--radius-md); padding:20px; margin-bottom:20px;
}
.section-card-title {
  font-size:14px; font-weight:700; color:#fff; margin-bottom:16px;
  padding-bottom:10px; border-bottom:1px solid var(--navy-700);
}

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:6px; padding:8px 16px;
       border-radius:var(--radius-sm); font-size:13px; font-weight:500;
       cursor:pointer; transition:background .15s; border:none; font-family:inherit; }
.btn-sm { padding:5px 10px; font-size:12px; }
.btn-xs { padding:4px 10px; font-size:11px; font-weight:600; line-height:1.2; border-radius:4px; }
.btn-default { background:var(--navy-700); color:var(--surface-100); }
.btn-default:hover { background:var(--navy-600); }
.btn-primary { background:var(--navy-500); color:#fff; border:1px solid rgba(0,0,0,0.1); }
.btn-primary:hover { background:var(--navy-400); }

/* Segmented button group */
.btn-group-segmented {
  display: inline-flex;
  background: var(--navy-900);
  padding: 3px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--navy-700);
  gap: 2px;
  position: relative;
  z-index: 10;
  pointer-events: auto !important;
}
.btn-group-segmented .btn {
  border: none;
  border-radius: 4px;
  transition: all .15s ease;
  white-space: nowrap;
  cursor: pointer !important;
  user-select: none;
  pointer-events: auto !important;
}
html[data-theme="light"] .btn-group-segmented,
body.theme-light .btn-group-segmented {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}
html[data-theme="light"] .btn-group-segmented .btn-default,
body.theme-light .btn-group-segmented .btn-default {
  background: transparent !important;
  color: #475569 !important;
  border: none !important;
  font-weight: 500 !important;
}
html[data-theme="light"] .btn-group-segmented .btn-default:hover,
body.theme-light .btn-group-segmented .btn-default:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}
html[data-theme="light"] .btn-group-segmented .btn-primary,
body.theme-light .btn-group-segmented .btn-primary {
  background: #2563eb !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 3px rgba(37,99,235,0.3) !important;
}
.btn-success { background:rgba(16,185,129,.2); color:#34d399; border:1px solid rgba(16,185,129,.3); }
.btn-success:hover { background:rgba(16,185,129,.35); }
.btn-danger  { background:rgba(239,68,68,.15); color:#fca5a5; border:1px solid rgba(239,68,68,.3); }
.btn-danger:hover  { background:rgba(239,68,68,.35); }
.btn-warning { background:rgba(245,158,11,.15); color:#fbbf24; border:1px solid rgba(245,158,11,.3); }
.btn-warning:hover { background:rgba(245,158,11,.35); }
.btn-blue { background:rgba(37,99,174,.25); color:#93c5fd; border:1px solid rgba(37,99,174,.4); }
.btn-blue:hover { background:rgba(37,99,174,.45); }

/* === DETAIL PANEL (slide-in) === */
.detail-panel-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:300;
  opacity:0; pointer-events:none; transition:opacity .2s;
}
.detail-panel-overlay.open { opacity:1; pointer-events:auto; }
.detail-panel {
  position:fixed; right:0; top:0; bottom:0; width:480px; max-width:95vw;
  background:var(--navy-800); border-left:1px solid var(--navy-600);
  box-shadow:var(--shadow-lg); z-index:301;
  transform:translateX(100%); transition:transform .25s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column;
  overflow:hidden;
}
.detail-panel.open { transform:translateX(0); }
.detail-panel-header {
  padding:16px 20px; border-bottom:1px solid var(--navy-700);
  display:flex; align-items:center; gap:12px;
  background:var(--navy-900);
}
.detail-panel-title { font-size:15px; font-weight:700; color:#fff; flex:1; }
.detail-panel-body { flex:1; overflow-y:auto; padding:20px; }
.detail-panel-footer {
  padding:12px 20px; border-top:1px solid var(--navy-700);
  display:flex; gap:8px; justify-content:space-between;
  background:var(--navy-900);
}
.detail-field { margin-bottom:14px; }
.detail-field-label {
  font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--surface-500); margin-bottom:4px;
}
.detail-field-value { font-size:13px; color:var(--surface-100); white-space:pre-wrap; }
.detail-field-value.mono { font-family:var(--font-mono); font-size:12px; }

/* === POPOVER === */
.popover {
  position:absolute; background:var(--navy-700); border:1px solid var(--navy-600);
  border-radius:var(--radius-md); padding:10px 14px;
  font-size:12px; box-shadow:var(--shadow-lg); z-index:250;
  min-width:160px;
}
.popover-title { font-size:13px; font-weight:700; color:#fff; margin-bottom:6px; }

/* === HEATMAP === */
.heatmap-cell {
  width:36px; height:36px; border-radius:4px;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:600; cursor:pointer;
  transition:opacity .1s, transform .1s;
}
.heatmap-cell:hover { transform:scale(1.15); opacity:.9; }

/* === ALERTS / NOTIFICATIONS === */
.alert {
  padding:10px 14px; border-radius:var(--radius-sm); font-size:13px;
  display:flex; align-items:flex-start; gap:8px; margin-bottom:12px;
}
.alert-info { background:rgba(6,182,212,.1); border:1px solid rgba(6,182,212,.3); color:#67e8f9; }
.alert-success { background:rgba(16,185,129,.1); border:1px solid rgba(16,185,129,.3); color:#6ee7b7; }
.alert-warn { background:rgba(245,158,11,.1); border:1px solid rgba(245,158,11,.3); color:#fde68a; }
.alert-error { background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.3); color:#fca5a5; }

/* === TOAST === */
.toast-container { position:fixed; bottom:24px; right:24px; z-index:500; display:flex; flex-direction:column; gap:8px; }
.toast {
  background:var(--navy-700); border:1px solid var(--navy-600); border-radius:var(--radius-md);
  padding:10px 16px; font-size:13px; color:var(--surface-50);
  box-shadow:var(--shadow-lg); animation:slideIn .25s ease;
  display:flex; align-items:center; gap:10px; min-width:240px;
}
.toast.toast-success { border-color:rgba(16,185,129,.4); }
.toast.toast-error   { border-color:rgba(239,68,68,.4); }
@keyframes slideIn { from{transform:translateX(40px);opacity:0} to{transform:none;opacity:1} }

/* === PRESENTATION MODE === */
.presentation-mode .topbar { display:none; }
.presentation-mode #main-content { padding-top:0; }
.presentation-mode .filter-bar { display:none; }
.presentation-mode .edit-toolbar { display:none; }
.presentation-mode-overlay {
  position:fixed; top:12px; right:12px; z-index:500;
  background:rgba(0,0,0,.6); padding:6px 12px; border-radius:20px;
  font-size:12px; color:rgba(255,255,255,.7);
  display:flex; align-items:center; gap:8px;
}

/* === EDIT TOOLBAR === */
.edit-toolbar {
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  background:var(--navy-700); border:1px solid var(--navy-500);
  border-radius:40px; padding:8px 16px; z-index:200;
  display:flex; align-items:center; gap:8px;
  box-shadow:var(--shadow-lg);
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
  transform:translateX(-50%) translateY(8px);
}
.edit-toolbar.visible { opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }

/* === GRIDSTACK CUSTOMIZATION === */
.grid-stack { background:transparent; }
.grid-stack-item-content { background:transparent; border-radius:var(--radius-lg); }
.grid-stack-placeholder > .placeholder-content {
  background: rgba(37,99,174,.12) !important;
  border: 2px dashed var(--navy-500) !important;
  border-radius: var(--radius-lg) !important;
}
.widget-card.gs-dragging { opacity:.8; transform:rotate(1deg); }

/* === SCROLLBAR === */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--navy-600); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--navy-500); }

/* === RESPONSIVE === */
@media (max-width:768px) {
  .topbar { padding:0 12px; }
  .topbar-title { font-size:13px; }
  .admin-sidebar { display:none; }
  .detail-panel { width:100vw; }
}

/* === PRINT === */
/* Reading-focused workspace: quiet surfaces, explicit hierarchy and usable controls. */
.page-heading {display:flex;align-items:center;justify-content:space-between;gap:16px;padding:26px 28px 18px;max-width:1500px;margin:auto;}
.page-heading h1 {font-size:25px;line-height:1.3;font-weight:650;letter-spacing:-.4px;margin:0 0 6px;}
.page-heading p {font-size:14px;color:var(--surface-300);margin:0;}
#result-count {font-size:13px;white-space:nowrap;color:var(--surface-300);font-variant-numeric:tabular-nums;}
.home-link {color:var(--surface-300);font-size:13px;text-decoration:none;}
.topbar-icon {filter:none;font-size:13px;font-weight:700;border:1px solid var(--navy-600);border-radius:5px;padding:8px;}
#main-tab-bar {padding:0 28px;gap:24px;overflow-x:auto;border-bottom:1px solid var(--navy-700);}
#main-tab-bar .tab-btn {padding:13px 0;border-radius:0;font-size:14px;background:transparent!important;color:var(--surface-300)!important;}
#main-tab-bar .tab-btn.active {color:var(--surface-100)!important;border-bottom:2px solid #2563ae;font-weight:650;}
.filter-bar {padding:14px 28px;gap:10px;position:relative;top:auto;box-shadow:none!important;}
.filter-select,.filter-input {min-height:38px;font-size:13px;}
#filter-search {flex:1;min-width:220px;}
.filter-chips:empty {display:none;}
.analysis-nav {display:flex;gap:20px;padding:14px 28px 0;font-size:13px;}
.analysis-nav[hidden] {display:none;}
.analysis-nav a {color:var(--surface-300);text-decoration:none;border-bottom:1px solid var(--navy-600);padding-bottom:4px;}
.dashboard-page {max-width:1500px;margin:auto;padding:20px 28px;scroll-margin-top:80px;}
html[data-theme="light"] .widget-card,body.theme-light .widget-card {border:1px solid #dce2e8!important;box-shadow:none!important;border-radius:7px!important;}
html[data-theme="light"] .widget-card:hover,body.theme-light .widget-card:hover {transform:none!important;box-shadow:none!important;border-color:#c3cdd7!important;}
.widget-card::before,.widget-card::after {display:none!important;}
.widget-label,.widget-actions {display:none!important;}
.widget-title {font-size:14px!important;font-weight:650!important;}
.widget-subtitle {font-size:12px;line-height:1.5;}
.kpi-value {font-size:32px!important;font-weight:650!important;font-variant-numeric:tabular-nums;letter-spacing:-1px;}
.data-table th {font-size:12px;text-transform:none!important;letter-spacing:0!important;white-space:nowrap;}
.data-table td {font-size:13px;padding-top:11px;padding-bottom:11px;}
.data-table tbody tr:nth-child(even) {background:rgba(128,145,160,.035);}
.user-menu-item {width:100%;text-align:left;border:0;background:transparent;font:inherit;cursor:pointer;}
.login-page {
  background-image: linear-gradient(rgba(8, 20, 42, .48), rgba(8, 20, 42, .48)), url('../../bg.jpg') !important;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}
.login-card {box-shadow:none!important;border-radius:8px!important;}
.login-logo-icon {filter:none!important;font-size:14px!important;}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible {outline:2px solid #2563ae;outline-offset:3px;}
@media(max-width:900px) {.topbar-center {display:none;}.topbar-title {max-width:250px;overflow:hidden;text-overflow:ellipsis;}}
@media(max-width:768px) {
  .page-heading {padding:20px 16px 14px;align-items:flex-start;flex-direction:column;gap:8px;}
  .page-heading h1 {font-size:22px;}
  #main-tab-bar {padding:0 16px;gap:22px;}
  .filter-bar,.dashboard-page {padding:14px 16px;}
  .filter-select {flex:1;min-width:135px;}
  #filter-search {flex-basis:100%;}
  .topbar-title {max-width:180px;font-size:12px;}
  .user-name {display:none;}
  .admin-layout {display:block;}
  .admin-sidebar {display:flex!important;width:100%;min-height:0;overflow-x:auto;gap:4px;padding:12px;position:static;}
  .admin-nav-item {white-space:nowrap;flex-shrink:0;}
  .admin-sidebar-title {display:none;}
  .admin-main {padding:16px;min-width:0;}
  .section-card {overflow-x:auto;}
}
@media(prefers-reduced-motion:reduce) {*,*::before,*::after {animation:none!important;transition:none!important;scroll-behavior:auto!important;}}

@media print {
  @page { size:A4 landscape; margin:10mm; }
  .topbar, .filter-bar, .edit-toolbar, .detail-panel-overlay { display:none !important; }
  #main-content { padding-top:0 !important; }
  .widget-card { break-inside:avoid; box-shadow:none; border:1px solid #ccc; }
  body { background:#fff; color:#000; }
}

/* Electrical operations: records workspace */
.topbar-center {display:flex;align-items:center;gap:8px;}
.topbar-center .home-link {display:inline-flex;align-items:center;justify-content:center;padding:9px 13px;border-radius:6px;border:1px solid #d9e3ef;color:#25496c;text-decoration:none;white-space:nowrap;font-size:12px;font-weight:600;}
.topbar-center .home-link:hover {background:#edf4fc;border-color:#8aaed1;}
.records-page {max-width:1600px;margin:0 auto;padding:28px 30px;gap:20px;}
.records-page h1 {font-size:26px;color:var(--surface-100);margin:0;border-left:5px solid #edb52c;padding-left:14px;line-height:1.3;}
.records-nav {display:flex;flex-wrap:wrap;gap:8px;padding:12px;background:#123d66;border-radius:8px;box-shadow:0 3px 10px #14385912;}
.records-nav a {display:inline-flex;align-items:center;min-height:40px;padding:9px 16px;text-decoration:none;color:#edf5ff;background:#ffffff0b;border:1px solid #ffffff28;border-radius:5px;font-size:13px;font-weight:600;transition:background .15s,border-color .15s;}
.records-nav a:hover {background:#235780;border-color:#edb52c;color:#fff;}
.records-nav a[aria-current="page"] {background:#fff;color:#123d66;border-color:#fff;box-shadow:inset 0 -3px #edb52c;}
.records-page .section-card {background:var(--navy-800);border:1px solid var(--navy-600);border-top:3px solid #2167a5;border-radius:8px;padding:24px;}
.records-page .section-card h2 {font-size:17px;margin:0 0 20px;}
.records-page label {font-size:13px;font-weight:600;line-height:1.6;}
.records-page .form-input {margin-top:6px;min-height:42px;border-radius:5px;font-size:14px;font-weight:400;}
.records-page .btn-primary {display:inline-flex;align-items:center;justify-content:center;min-height:42px;margin-top:22px;padding:10px 25px;border:1px solid #15528a;border-radius:5px;background:#155c98;color:white;font-weight:650;cursor:pointer;box-shadow:0 2px 4px #123d6620;}
.records-page .btn-primary:hover {background:#104b7e;}
.records-page .data-table {border:1px solid #dce5ef;}
.records-page .data-table th {background:#e9f0f7;color:#234766;font-weight:650;}
.records-page .data-table td:first-child {min-width:125px;white-space:nowrap;}
.records-page .data-table td:first-child form {display:inline-flex;margin-left:6px;}
.btn-record-edit,.btn-record-delete {display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:5px 12px;border-radius:5px;font-size:12px;font-weight:600;text-decoration:none;cursor:pointer;font-family:inherit;}
.btn-record-edit {background:#edf5fc;color:#175b92;border:1px solid #b9d2e8;}
.btn-record-delete {background:#fff5f4;color:#ae3535;border:1px solid #edc9c5;}
.btn-record-edit:hover {background:#dcecf9;}
.btn-record-delete:hover {background:#ffe6e3;}
html[data-theme="light"] .records-page .section-card {background:#fff;border-color:#d8e3ee;border-top-color:#2167a5;box-shadow:0 3px 14px #183b5b06;}
@media(max-width:768px){.records-page {padding:20px 14px;}.records-page .section-card{padding:18px 14px;}.records-nav {gap:6px;padding:9px;}.records-nav a{padding:8px 10px;font-size:12px;}.records-page h1{font-size:22px;}.topbar-center{display:none;}}

/* Shared power utility interface */
:root {--power-blue:#123e68;--power-action:#1763a0;--power-yellow:#f4c431;}
.power-brand {font-size:34px!important;font-weight:900;color:var(--power-yellow)!important;background:var(--power-blue)!important;border:0!important;}
.topbar {border-bottom:1px solid #dbe5ef;box-shadow:none;}
.power-navigation {position:relative;z-index:45;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 24px;background:var(--power-blue);border-bottom:3px solid var(--power-yellow);}
.power-nav-button {display:inline-flex;align-items:center;gap:9px;min-height:42px;padding:9px 16px;border:1px solid #ffffff35;border-radius:6px;background:#ffffff09;color:#fff!important;text-decoration:none;font:600 13px/1.4 "Segoe UI",sans-serif;cursor:pointer;list-style:none;}
.power-nav-button::before {content:'ϟ';color:var(--power-yellow);font-size:23px;font-weight:900;line-height:1;}
.power-menu>summary::-webkit-details-marker {display:none;}
.power-menu>summary::after {content:'⌄';font-size:17px;margin-left:14px;}
.power-nav-button:hover,.power-menu[open]>summary {background:#245983;border-color:#f4c431;}
.power-menu {position:relative;}
.power-submenu {position:absolute;top:calc(100% + 8px);left:0;min-width:270px;padding:7px;background:#fff;border:1px solid #d7e3ee;border-radius:8px;box-shadow:0 12px 30px #0827482b;}
.power-submenu a {display:flex;align-items:center;gap:10px;padding:11px 13px;color:#214362;text-decoration:none;font-size:13px;font-weight:550;border-radius:4px;}
.power-submenu a::before {content:'ϟ';color:#b48600;font-size:18px;font-weight:800;}
.power-submenu a:hover,.power-submenu a[aria-current=page] {background:#eaf2fa;color:#114e80;}
.power-nav-caption {margin-left:auto;font-size:10px;letter-spacing:.08em;color:#bfd2e3;}
.btn,.filter-select,.filter-input,.form-input {border-radius:5px;}
.btn {min-height:34px;font-weight:600;transition:background .15s,box-shadow .15s;}
.btn-primary,.btn-success {background:#1763a0!important;border-color:#1763a0!important;color:#fff!important;}
.btn-primary:hover,.btn-success:hover {background:#114d7d!important;box-shadow:0 2px 6px #123e6820;}
.btn-default {background:#fff;border:1px solid #c9d8e6;color:#224b6e;}
.tab-bar {gap:8px!important;padding-top:12px!important;padding-bottom:12px!important;}
.tab-btn {border:1px solid #ccdbe8!important;border-radius:5px!important;padding:9px 15px!important;background:#fff!important;color:#284e70!important;font-weight:600;}
.tab-btn::before {content:'ϟ';color:#b58b00;font-size:18px;margin-right:7px;}
.tab-btn.active {background:#153f68!important;color:#fff!important;border-color:#153f68!important;box-shadow:inset 0 -3px #f4c431;}
.tab-btn.active::before {color:#f4c431;}
.admin-sidebar {background:#fff;border-right:1px solid #dce6ef;padding:16px;}
.admin-nav-item {margin-bottom:6px;border:1px solid #e0e8ef;border-radius:5px;padding:11px 12px;}
.admin-nav-item.active {background:#e9f2fb!important;color:#154d7b!important;border-left:3px solid #e6b520;}
.widget-card,.section-card {border-radius:8px!important;box-shadow:0 2px 8px #173d5e05;}
.widget-title,.section-card-title {color:#315578;}
@media(max-width:900px){.power-nav-caption{display:none;}.power-navigation{padding:10px 14px;gap:7px;}.power-nav-button{padding:8px 11px;font-size:12px;}}
@media(max-width:540px){.power-navigation{align-items:stretch;}.power-nav-button{justify-content:center;}.power-menu{flex:1;}.power-menu>summary{width:100%;}.power-submenu{position:absolute;min-width:240px;max-width:calc(100vw - 28px);}.power-navigation>.power-nav-button{width:100%;}.power-menu:last-of-type .power-submenu{left:auto;right:0;}}
html[data-theme=dark] .power-submenu{background:#102744;border-color:#365573;}
html[data-theme=dark] .power-submenu a{color:#e0ecf8;}
html[data-theme=dark] .power-submenu a:hover{background:#254b70;}
/* Header and navigation occupy normal document space so menus remain clickable. */
.topbar {position:relative!important;top:auto!important;z-index:100;}
#main-content {padding-top:0!important;}
.power-navigation {z-index:90;}

.brand-logo-link {display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;background:#fff;border-radius:50%;padding:2px;}
.brand-logo {display:block;width:42px;height:42px;object-fit:contain;}
.login-brand-logo {display:block;width:76px;height:76px;object-fit:contain;margin:0 auto 18px;background:#fff;border-radius:50%;padding:3px;}
@media(max-width:540px){.brand-logo{width:36px;height:36px;}.login-brand-logo{width:64px;height:64px;}}
/* Keep all dashboard content in one layer beneath shared dropdown navigation. */
#main-content {position:relative;z-index:0;isolation:isolate;}
.power-navigation {position:relative;z-index:110;overflow:visible;isolation:isolate;}
.power-menu[open] {z-index:2;}
.power-submenu {z-index:10;}
.topbar {z-index:120;}

/* One shared photographic background across login, dashboard and administration. */
html {min-height:100%;background:#e8eef4;}
body,body.theme-light,html[data-theme="light"] body,html[data-theme="dark"] body {
  min-height:100vh;
  background-color:#e8eef4!important;
  background-image:linear-gradient(rgba(237,243,249,.88),rgba(237,243,249,.88)),url('../../bg.jpg')!important;
  background-position:center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  background-attachment:fixed!important;
}
html[data-theme="dark"] body {
  background-image:linear-gradient(rgba(6,18,35,.87),rgba(6,18,35,.87)),url('../../bg.jpg')!important;
}
#main-content,.dashboard-page,.admin-layout,.admin-main,.page-heading {background:transparent!important;}
html[data-theme="light"] .widget-card,body.theme-light .widget-card,
html[data-theme="light"] .section-card,body.theme-light .section-card {background:rgba(255,255,255,.96)!important;}
html[data-theme="light"] .admin-sidebar,body.theme-light .admin-sidebar {background:rgba(255,255,255,.95)!important;}
@media(max-width:768px){body,body.theme-light,html[data-theme="light"] body,html[data-theme="dark"] body{background-attachment:scroll!important;}}

.records-page tbody tr:has(a[href*="edit="]) {cursor:pointer;}
.records-page tbody tr:has(a[href*="edit="]):hover {background:#eaf3fc!important;}
.record-edit-dialog {width:min(1000px,calc(100vw - 28px));max-height:90vh;overflow:auto;padding:24px;border:1px solid #b6cbde;border-top:4px solid #edbd28;border-radius:10px;background:#fff;color:#16324b;box-shadow:0 20px 80px #041a3866;}
.record-edit-dialog::backdrop {background:rgba(5,23,43,.6);}
.record-dialog-header {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;}
.record-dialog-header h2 {font-size:20px;margin:0;}
.record-dialog-header button {width:36px;height:36px;border:1px solid #cedce8;background:#eff4f9;border-radius:5px;font-size:24px;color:#244b6d;cursor:pointer;}
.record-edit-dialog .section-card {padding:0;border:0;box-shadow:none;}
.record-edit-dialog label {font-size:13px;font-weight:600;}
.record-edit-dialog .form-input {margin-top:6px;min-height:42px;background:#fff;color:#16324b;border-color:#bdcfdf;}
.record-edit-dialog .btn-primary {margin-top:20px;min-height:42px;padding:10px 24px;}
.record-dialog-status {font-size:13px;color:#225d8a;}
.record-dialog-status[role=alert] {color:#a52b2b;}
.records-page tbody tr.record-saved {background:#dff3e7!important;}
@media(max-width:540px){.record-edit-dialog{padding:16px;}.record-edit-dialog form>div[style]{grid-template-columns:1fr!important;}}

#user-form {padding-top:16px;}
.member-fields {display:grid;grid-template-columns:1fr 1fr;gap:18px 22px;}
.member-fields .form-group{margin:0;}
.member-fields .form-label{display:block;font-size:13px;font-weight:600;margin-bottom:7px;}
.member-fields .form-input{min-height:42px;width:100%;}
.permission-panel {margin:24px 0;border:1px solid #d3dfeb;border-radius:8px;overflow:hidden;background:#fff;}
.permission-heading {display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 20px;background:#f1f6fb;border-bottom:1px solid #d3dfeb;}
.permission-heading h3 {margin:0 0 5px;font-size:16px;color:#173f65;}
.permission-heading p{margin:0;font-size:12px;color:#60788f;line-height:1.6;}
.permission-tools {display:flex;gap:8px;flex-shrink:0;}
.permission-scroll{overflow-x:auto;}
.permission-table{width:100%;border-collapse:collapse;min-width:650px;}
.permission-table thead th{padding:12px 16px;background:#173f65;color:#fff;font-size:12px;font-weight:600;text-align:center;}
.permission-table thead th:first-child{text-align:left;}
.permission-table tbody th {text-align:left;font-weight:600;color:#254560;font-size:13px;padding:12px 18px;}
.permission-table tbody td{text-align:center;padding:8px 12px;}
.permission-table tbody tr+tr{border-top:1px solid #e3ebf2;}
.permission-table tbody tr:nth-child(even){background:#f7fafc;}
.permission-bolt{color:#b88c09;margin-right:10px;font-size:19px;}
.permission-check{display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:36px;cursor:pointer;}
.permission-check input {width:19px;height:19px;accent-color:#1763a0;cursor:pointer;}
.permission-check-text {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
.permission-row-toggle {padding:6px 10px;border:1px solid #c8d7e5;background:#fff;border-radius:5px;color:#225e90;font-size:12px;cursor:pointer;white-space:nowrap;}
.permission-row-toggle:hover{background:#eaf2fa;}
.permission-footnote{padding:12px 20px;border-top:1px solid #dce5ee;font-size:12px;color:#6a7f92;line-height:1.6;}
@media(max-width:700px){.member-fields{grid-template-columns:1fr;}.permission-heading{align-items:flex-start;flex-direction:column;}.permission-tools{flex-wrap:wrap;}}

/* Opaque, legible operational data tables over the shared background. */
.records-table-wrap {max-height:72vh;overflow:auto;background:#fff;border:1px solid #cbdbe9;border-radius:8px;box-shadow:0 3px 16px rgba(16,49,79,.08);isolation:isolate;}
.records-table-wrap .data-table {margin:0;width:100%;border:0!important;border-collapse:separate;border-spacing:0;background:#fff!important;}
.records-table-wrap .data-table thead {position:sticky;top:0;z-index:5;}
.records-table-wrap .data-table th {background:#153f67!important;color:#fff!important;padding:13px 14px!important;font-weight:650;font-size:12px;border-right:1px solid #ffffff19;border-bottom:3px solid #e9bd36;white-space:nowrap;}
.records-table-wrap .data-table tbody td {padding:13px 14px!important;line-height:1.6;font-size:13px;color:#193750;border-bottom:1px solid #e0e8ef;vertical-align:middle;background:transparent;}
.records-table-wrap .data-table tbody tr {background:#fff!important;}
.records-table-wrap .data-table tbody tr:nth-child(even) {background:#f1f6fa!important;}
.records-table-wrap .data-table tbody tr:has(a[href*="edit="]):hover {background:#e3effa!important;}
.records-table-wrap .data-table tbody tr.record-saved {background:#dff3e7!important;}
.records-table-wrap [data-column=incident_date],.records-table-wrap [data-column=asset] {min-width:145px;white-space:nowrap;}
.records-table-wrap [data-column=breaker] {min-width:195px;font-weight:600;}
.records-table-wrap [data-column=gis] {min-width:155px;}
.records-table-wrap [data-column=cause_tct_text],.records-table-wrap [data-column=cause_actual_text],.records-table-wrap [data-column=location] {min-width:235px;max-width:330px;}
.records-table-wrap [data-column=year],.records-table-wrap [data-column=month],.records-table-wrap [data-column=seq] {min-width:65px;font-variant-numeric:tabular-nums;}
.record-date {white-space:nowrap;font-variant-numeric:tabular-nums;}
.record-asset {display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid transparent;border-radius:5px;font-size:12px;font-weight:650;white-space:nowrap;}
.record-asset::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.record-asset-utility {background:#e5f1fc;color:#175c93;border-color:#bdd7ed;}
.record-asset-customer {background:#fff2dc;color:#875809;border-color:#efd59c;}
.record-asset-unknown {background:#edf1f5;color:#586b7d;border-color:#d7e0e8;}

/* Dashboard section navigation: opaque surface and clear selected state. */
#main-tab-bar {display:flex;flex-wrap:wrap;gap:9px!important;padding:14px 24px!important;background:#fff!important;border-top:1px solid #d8e4ef;border-bottom:1px solid #c5d6e6!important;box-shadow:0 3px 10px rgba(16,49,79,.06);overflow:visible;}
#main-tab-bar .tab-btn {display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 17px!important;background:#eef4fa!important;border:1px solid #bfd0e1!important;border-radius:6px!important;color:#20496e!important;font-size:13px;font-weight:650;opacity:1!important;box-shadow:none;transition:background .15s,border-color .15s;}
#main-tab-bar .tab-btn::before {content:'ϟ';font-size:22px;color:#ae8000;margin-right:9px;font-weight:900;}
#main-tab-bar .tab-btn:hover {background:#dfeefa!important;border-color:#6292b9!important;}
#main-tab-bar .tab-btn.active {background:#153f67!important;color:#fff!important;border-color:#153f67!important;box-shadow:inset 0 -3px #f4c431,0 2px 5px #123e6826;}
#main-tab-bar .tab-btn.active::before {color:#f4c431;}
#main-tab-bar .tab-btn:focus-visible {outline:3px solid #e8b524;outline-offset:3px;}
@media(max-width:600px){#main-tab-bar{flex-wrap:nowrap!important;overflow-x:auto!important;justify-content:flex-start;scrollbar-width:thin;}#main-tab-bar .tab-btn{flex:0 0 auto;white-space:nowrap;}}
@media(max-width:768px){#main-tab-bar{padding:12px 14px!important;gap:7px!important;}#main-tab-bar .tab-btn{padding:9px 12px!important;min-height:42px;font-size:12px;}}

.import-workspace{max-width:1200px;margin:0 auto;gap:18px;padding:28px 24px;}
.import-workspace h1{margin:0;font-size:26px;border-left:5px solid #e9bc2d;padding-left:14px;}
.import-intro{margin:0;color:#385974;}
.import-steps{display:flex;list-style:none;padding:16px 20px;margin:0;background:#fff;border:1px solid #d8e3ed;border-radius:8px;gap:30px;}
.import-steps li{display:flex;align-items:center;gap:9px;color:#62788c;font-size:13px;font-weight:600;}
.import-steps span{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#e9eff5;}
.import-steps .is-complete{color:#174f7b;}.import-steps .is-complete span{background:#174f7b;color:white;}
.import-upload{display:flex;align-items:center;gap:22px;flex-wrap:wrap;padding:24px;}
.import-upload h2{font-size:17px;margin:0 0 6px;}.import-upload p{font-size:12px;margin:0;color:#60768c;}
.import-file-label{flex:1;min-width:240px;font-size:13px;font-weight:600;}.import-file-label input{display:block;padding:10px;margin-top:7px;background:#f1f6fb;border:1px dashed #a5bfd6;border-radius:6px;width:100%;}
.import-workspace .btn-primary{width:auto;min-height:42px;padding:10px 20px;}
.import-note,.import-message{padding:15px 18px;background:#edf5fc;border:1px solid #bad3e9;border-left:4px solid #20639b;border-radius:6px;color:#234c6e;font-size:13px;line-height:1.7;}
.import-sheet{margin-top:18px;padding:20px;}.import-sheet-heading{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-bottom:15px;border-bottom:1px solid #dce6ef;}
.import-sheet-heading label{font-weight:650;color:#1b456a;}.import-sheet-heading span{font-size:12px;color:#5b7388;}
.import-field-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:9px;margin:18px 0;}
.import-field{display:flex;align-items:center;gap:9px;padding:10px 12px;border:1px solid #d5e1ec;border-radius:5px;font-size:13px;cursor:pointer;}.import-field:has(input:checked){background:#edf5fc;border-color:#b8d0e5;}.import-field.is-locked{color:#60778a;background:#f2f4f7;}.import-workspace input[type=checkbox]{width:17px;height:17px;accent-color:#1763a0;}
.import-preview summary{cursor:pointer;font-size:13px;color:#185d94;padding:10px 0;}.import-preview .records-table-wrap{max-height:300px;}.import-confirm{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px;background:white;border:1px solid #d5e1ec;border-radius:8px;margin-top:18px;}.import-confirm p{font-size:13px;color:#4b677e;margin:0;}
@media(max-width:600px){.import-workspace{padding:20px 14px;}.import-steps{gap:12px;flex-direction:column;}.import-upload,.import-confirm{align-items:stretch;flex-direction:column;}.import-file-label{min-width:0;}}

.user-menu-dropdown {width:270px!important;padding:7px;border:1px solid #d5e0eb;border-radius:9px;background:#fff;box-shadow:0 12px 32px #10345224;}
.user-menu-header {margin:-7px -7px 6px;padding:17px 19px;background:#edf4fb;border-radius:9px 9px 0 0;border-bottom:1px solid #dbe6f0;}
.user-menu-name {font-size:14px;font-weight:700;color:#183f63;}
.user-menu-role {display:inline-block;margin-top:5px;padding:3px 8px;border-radius:4px;background:#dae9f7;color:#315b7f;font-size:11px;}
.user-menu-dropdown .user-menu-item {display:flex;align-items:center;gap:11px;padding:11px 12px;margin:2px 0;border-radius:5px;font-size:13px;color:#294d6e;text-decoration:none;}
.user-menu-dropdown .user-menu-item:hover {background:#edf4fb;}
.user-menu-item svg {width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
.user-menu-dropdown .user-menu-logout {color:#b23d3d;}
.user-menu-dropdown .user-menu-logout:hover {background:#fff0ef;}
.account-card {padding:24px;scroll-margin-top:20px;}.account-card h2{font-size:18px;margin:0 0 10px;}.account-hint{font-size:13px;color:#5d758a;}.account-card label{font-size:13px;font-weight:600;}.account-card .form-input{margin-top:7px;}.account-card .btn{margin-top:20px;}

/* Consistent energy icons; one symbol per navigation item. */
.power-nav-button::before,.power-submenu a::before,.tab-btn::before,#main-tab-bar .tab-btn::before {content:'⚡';font-family:"Segoe UI Emoji","Apple Color Emoji",sans-serif;font-size:18px;font-weight:400;line-height:1;display:inline-flex;align-items:center;justify-content:center;width:22px;flex:0 0 22px;}
.power-navigation>a.power-nav-button::before,#tab-btn-overview::before,#main-tab-bar #tab-btn-overview::before {content:'💡';}
.power-submenu a[href*="section=cable_segments"]::before {content:'🔋';}
.records-nav a::before {content:'⚡';font-family:"Segoe UI Emoji","Apple Color Emoji",sans-serif;display:inline-block;font-size:16px;line-height:1;}
.records-nav a {gap:8px;}
.records-nav a[href*="section=cable_segments"]::before {content:'🔋';}
.records-nav a:last-child::before {content:'💡';}

/* Function-specific electrical operations iconography. */
.power-menu>summary::before {content:'🧰';}
.power-menu:first-of-type>summary::before {content:'⚡';}
.power-submenu a[href*="section=incidents"]::before,.records-nav a[href*="section=incidents"]::before {content:'⚡';}
.power-submenu a[href*="section=routes"]::before,.records-nav a[href*="section=routes"]::before {content:'🏗️';}
.power-submenu a[href*="section=abnormalities"]::before,.records-nav a[href*="section=abnormalities"]::before {content:'🛠️';}
.power-submenu a[href*="section=cable_segments"]::before,.records-nav a[href*="section=cable_segments"]::before {content:'🔌';}
.power-submenu a[href*="section=catalog"]::before,.records-nav a[href*="section=catalog"]::before {content:'🏭';}
.power-submenu a[href*="section=summary"]::before,.records-nav a[href*="section=summary"]::before {content:'💡';}
.power-submenu a[href$="/admin/users"]::before {content:'👨‍🔧';}
.power-submenu a[href$="/admin/system"]::before {content:'🏢';}
.power-submenu a[href$="/admin/backup"]::before {content:'🧰';}
#main-tab-bar #tab-btn-details::before {content:'⚡';}
#main-tab-bar #tab-btn-sotheodoi::before {content:'🛠️';}
#main-tab-bar #tab-btn-tuyenday::before {content:'🏗️';}
#main-tab-bar #tab-btn-summary::before {content:'💡';}

/* Audit log: clipboard denotes the history of administrative actions. */
.power-submenu a[href$="/admin/audit"]::before {content:'📋';}

/* Complete the shared navigation vocabulary. */
.power-submenu a[href$="/import"]::before {content:'📥';}
.power-submenu a[href$="/admin/dict"]::before {content:'📖';}
.power-submenu a[href$="/admin/backup"]::before {content:'💾';}
.admin-nav-item {display:flex;align-items:center;gap:9px;}
.admin-nav-item::before {font-family:"Segoe UI Emoji","Apple Color Emoji",sans-serif;display:inline-flex;align-items:center;justify-content:center;flex:0 0 22px;width:22px;font-size:17px;line-height:1;}
.admin-nav-item[href$="/admin/system"]::before {content:'🏢';}
.admin-nav-item[href$="/admin/records"]::before,.admin-nav-item[href$="/admin/sources"]::before {content:'🗂️';}
.admin-nav-item[href$="/admin/dict"]::before {content:'📖';}
.admin-nav-item[href$="/admin/users"]::before {content:'👨‍🔧';}
.admin-nav-item[href$="/admin/data-check"]::before {content:'🔎';}
.admin-nav-item[href$="/admin/audit"]::before {content:'📋';}
.admin-nav-item[href$="/import"]::before {content:'📥';}
.admin-nav-item[href$="/admin/backup"]::before {content:'💾';}
.admin-nav-item[href$="/"]::before {content:'💡';}

/* Compact dashboard title aligned with its tabs and filters. */
#dashboard-app .operations-heading {max-width:none;margin:0;padding:18px 28px!important;gap:14px;flex-direction:row;align-items:center;background:rgba(255,255,255,.94)!important;border-bottom:1px solid #d8e4ef;}
.operations-title {display:flex;align-items:center;gap:12px;min-width:0;}
.operations-mark {display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex-shrink:0;background:#eaf2fb;border:1px solid #c8dbee;border-radius:7px;font-size:23px;}
#dashboard-app .operations-heading h1 {margin:0 0 3px;font-size:21px;line-height:1.3;color:#153e62;letter-spacing:0;}
#dashboard-app .operations-heading p {font-size:12px;color:#657c90;line-height:1.5;margin:0;}
.operations-heading #result-count {display:inline-flex;align-items:center;min-height:32px;padding:6px 12px;border:1px solid #c8dbee;border-radius:6px;background:#edf4fb;color:#24577e;font-size:13px;font-weight:600;}
.operations-heading #result-count:empty {display:none;}
@media(max-width:600px){#dashboard-app .operations-heading {padding:14px!important;flex-wrap:wrap;}.operations-mark{width:34px;height:34px;font-size:20px;}#dashboard-app .operations-heading h1{font-size:19px;}#dashboard-app .operations-heading p{font-size:11px;}.operations-heading #result-count{font-size:12px;margin-left:46px;}}

html[data-theme="light"] .widget-title,body.theme-light .widget-title {color:#234766!important;font-weight:700;}
html[data-theme="light"] .widget-subtitle,body.theme-light .widget-subtitle {color:#536c82!important;font-size:12px;line-height:1.5;}
.record-filters{display:flex;align-items:end;gap:12px;flex-wrap:wrap;padding:16px;background:#fff;border:1px solid #d3dfeb;border-radius:8px;}.record-filters label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;color:#234c6e;}.record-filters [role=status]{font-size:12px;color:#536c82;margin-left:auto;align-self:center;}.record-filters label[hidden]{display:none;}.records-table-wrap tr[hidden]{display:none!important;}
.power-submenu a[href*="/admin/history"]::before{content:'🕘';}.power-submenu a[href*="mode=trash"]::before{content:'🗑️';}