@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

/* Air Theme Dark Mode - Soft Cyan/Green with Dark Background */
:root {
  --bg-primary: #0a1929;
  --bg-secondary: #132f4c;
  --bg-tertiary: #1e3a5f;
  --bg-card: #132f4c;
  --bg-card-hover: #1e3a5f;
  --text-primary: #ffffff;
  --text-secondary: #e0f7fa;
  --text-tertiary: #b2ebf2;
  --accent-green: #4dd0e1;
  --accent-cyan: #26c6da;
  --accent-blue: #00acc1;
  --accent-yellow: #ffd54f;
  --accent-orange: #ffb74d;
  --border-color: rgba(6, 182, 212, 0.3);
  --shadow: rgba(6, 182, 212, 0.2);
  --shadow-hover: rgba(6, 182, 212, 0.35);
}

body {
  background: linear-gradient(135deg, #0a1929 0%, #132f4c 50%, #1e3a5f 100%);
  background-attachment: fixed;
  color: var(--text-primary);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

header h1, h2, h3 {
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.5px;
}

/* Status dot indicator */
.status-dot {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--bg-primary);
  z-index: 10;
}
.status-running { background: var(--accent-green); }
.status-drop { background: var(--accent-yellow); }
.status-lost { background: #ff453a; }

.summary-card {
  border-radius: 20px;
  box-shadow: 0 8px 32px var(--shadow);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s, background-color 0.2s;
  border: 1px solid var(--border-color);
  background: #132f4c !important;
  color: #ffffff !important;
  position: relative;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.summary-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px var(--shadow-hover);
  background: #1e3a5f !important;
  border-color: rgba(6, 182, 212, 0.5);
}

.summary-card * {
  color: #ffffff !important;
}

.summary-card i {
  color: #b2ebf2 !important;
}

.summary-card .label {
  color: #b2ebf2 !important;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.3px;
}

.summary-card div,
.summary-card span,
.summary-card p {
  color: #ffffff !important;
}

.summary-card .mb-1,
.summary-card .mb-2,
.summary-card .mb-0,
.summary-card .mt-1 {
  color: #ffffff !important;
}

.summary-card .row,
.summary-card .col {
  color: #ffffff !important;
}

.summary-card .value {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--accent-cyan) !important;
  letter-spacing: 0.5px;
}

.summary-card .value.yellow { color: var(--accent-yellow) !important; }
.summary-card .value.blue { color: var(--accent-blue) !important; }

#meter-cards .col-md-4, #meter-cards .col-lg-3 {
  min-width: 260px;
}

/* Smart grid - responsive dengan scroll */
.smart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  padding: 16px;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: visible;
}

@media (max-width: 768px) {
  .smart-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 12px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .smart-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
}

.smart-grid.compact .summary-card {
  padding: 12px !important;
}

.smart-grid .summary-card .volt-row .value { 
  font-size: 1.2rem; 
  color: #ffffff !important;
}

.smart-grid .summary-card .volt-label { 
  font-size: 0.8rem; 
  color: #b2ebf2 !important; 
}

.smart-grid .summary-card .label {
  color: #b2ebf2 !important;
}

.table-success th {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.3) 0%, rgba(0, 172, 193, 0.3) 100%);
  color: var(--text-primary);
  font-weight: 700;
  position: sticky;
  top: 0;
  z-index: 2;
  border-color: var(--border-color) !important;
}

.table-bordered td, .table-bordered th {
  border: 1px solid var(--border-color) !important;
  color: #ffffff !important;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--bg-secondary) !important;
}

.table-striped tbody tr:nth-of-type(even) {
  background-color: var(--bg-card) !important;
}

.table-striped tbody tr:hover {
  background-color: var(--bg-tertiary) !important;
}

.table-striped tbody tr:hover td {
  color: #ffffff !important;
}

/* Table warning untuk WBP rows */
.table-warning {
  background-color: rgba(255, 213, 79, 0.15) !important;
}

.table-warning td {
  color: #ffffff !important;
  background-color: rgba(255, 213, 79, 0.15) !important;
  font-weight: 500;
}

.table-warning:hover {
  background-color: rgba(255, 213, 79, 0.25) !important;
}

.table-warning:hover td {
  background-color: rgba(255, 213, 79, 0.25) !important;
  color: #ffffff !important;
}

/* Number formatting in tables */
.table td {
  font-family: 'Courier New', monospace;
  font-size: 0.95rem;
  color: #ffffff !important;
}

.table th {
  color: #ffffff !important;
}

/* Format numbers in tables - align right for numeric columns */
.table td:nth-child(n+2) {
  text-align: right;
}

/* kWh / Kenaikan / Harga columns - use dark text for readability */
#meter-detail-table td:nth-child(11),
#meter-detail-table td:nth-child(12) {
  color: #0b0b0b !important;
  font-weight: 600;
}

#meter-detail-table td:nth-child(13) {
  color: #0b0b0b !important;
  font-weight: 600;
}

.btn-success, .btn-outline-success {
  border-radius: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
  box-shadow: 0 4px 12px var(--shadow);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-blue) 100%);
  border-color: var(--accent-cyan);
  color: var(--bg-primary);
}
.btn-success:hover, .btn-outline-success:hover {
  background: linear-gradient(135deg, #00bcd4 0%, #0097a7 100%);
  border-color: #00bcd4;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px var(--shadow-hover);
}

.btn-outline-success {
  background: transparent;
  color: var(--accent-cyan);
}

.btn-outline-success:hover {
  background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-blue) 100%);
  color: var(--bg-primary);
}

input[type="date"], .form-control, .form-select {
  border-radius: 12px;
  border: 1px solid var(--border-color);
  font-size: 1rem;
  padding: 10px 14px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  transition: all 0.2s;
}
input[type="date"]:focus, .form-control:focus, .form-select:focus {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.25);
  background: var(--bg-tertiary);
  outline: none;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.7) sepia(1) saturate(5) hue-rotate(160deg);
  cursor: pointer;
}

.loading {
  text-align: center;
  color: var(--accent-cyan);
  font-weight: 600;
  padding: 24px 0;
}

.empty-message {
  text-align: center;
  color: var(--text-tertiary);
  font-size: 1.1rem;
  padding: 24px 0;
}

/* Grafik Bar Horizontal */
.volt-bar-group {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 24px;
  margin: 24px 0 12px 0;
}
.volt-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 120px;
}
.volt-bar-value {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 4px;
}
.volt-bar-value.r { color: var(--accent-cyan); }
.volt-bar-value.s { color: var(--accent-yellow); }
.volt-bar-value.t { color: var(--accent-blue); }

.volt-bar-stack {
  width: 100%;
  height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 3px;
}
.volt-bar-segment {
  height: 10px;
  border-radius: 4px;
  margin-bottom: 2px;
  background: #e5e7eb;
  opacity: 1;
  transition: background 0.2s;
}
.volt-bar-segment.r { background: linear-gradient(90deg, var(--accent-cyan) 60%, rgba(6, 182, 212, 0.6) 100%); }
.volt-bar-segment.s { background: linear-gradient(90deg, var(--accent-yellow) 60%, rgba(255, 213, 79, 0.6) 100%); }
.volt-bar-segment.t { background: linear-gradient(90deg, var(--accent-blue) 60%, rgba(0, 172, 193, 0.6) 100%); }

.volt-bar-label {
  margin-top: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.8px;
  color: var(--text-tertiary);
  text-align: center;
}

.volt-row .value {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 0;
  line-height: 1.1;
}
.volt-label {
  font-size: 0.8rem;
  color: var(--text-tertiary);
  font-weight: 500;
  letter-spacing: 0.8px;
  margin-top: 0;
}

/* Styles untuk halaman Reports */
.list-group-item {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  margin-bottom: 0;
  border-radius: 0;
}

.list-group-item:first-child {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.list-group-item:last-child {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  margin-bottom: 0;
}

.list-group-item:hover {
  background: var(--bg-card-hover);
  border-color: var(--accent-cyan);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--shadow-hover);
}

/* Scrollable reports container - Air theme scrollbar */
#reports-list-container {
  scrollbar-width: thin;
  scrollbar-color: var(--accent-cyan) var(--bg-secondary);
}

#reports-list-container::-webkit-scrollbar {
  width: 8px;
}

#reports-list-container::-webkit-scrollbar-track {
  background: var(--bg-secondary);
  border-radius: 4px;
}

#reports-list-container::-webkit-scrollbar-thumb {
  background: var(--accent-cyan);
  border-radius: 4px;
}

#reports-list-container::-webkit-scrollbar-thumb:hover {
  background: #00bcd4;
}

/* Global scrollbar styling */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: var(--accent-cyan);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: #00bcd4;
}

.btn-sm {
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.2s ease;
}

.btn-outline-primary {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  background: transparent;
}

.btn-outline-primary:hover {
  background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-blue) 100%);
  border-color: var(--accent-cyan);
  color: var(--bg-primary);
}

.notification-toast {
  border-radius: 16px;
  box-shadow: 0 12px 48px var(--shadow-hover);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  animation: slideInRight 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Modal styles untuk preview */
.modal-content {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  box-shadow: 0 8px 32px var(--shadow-hover);
}

.modal-header {
  border-bottom: 1px solid var(--border-color);
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.1) 0%, rgba(0, 172, 193, 0.1) 100%);
}

.modal-footer {
  border-top: 1px solid var(--border-color);
}

.modal-backdrop {
  background-color: rgba(6, 182, 212, 0.3);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.table {
  color: #ffffff !important;
}

.table td, .table th {
  color: #ffffff !important;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--bg-secondary) !important;
}

.table-striped tbody tr:nth-of-type(even) {
  background-color: var(--bg-card) !important;
}

.table-striped tbody tr:hover {
  background-color: var(--bg-tertiary) !important;
}

.table-striped tbody tr:hover td {
  color: #ffffff !important;
}

.table-light th {
  color: #ffffff !important;
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.2) 0%, rgba(0, 172, 193, 0.2) 100%) !important;
}

/* Table small styling */
.table-sm td,
.table-sm th {
  color: #ffffff !important;
  font-size: 0.9rem;
}

/* Modal table styling */
.modal-body .table td,
.modal-body .table th {
  color: #ffffff !important;
}

.modal-body .table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--bg-secondary) !important;
}

.modal-body .table-striped tbody tr:nth-of-type(even) {
  background-color: var(--bg-card) !important;
}

.modal-body .table td {
  color: #ffffff !important;
}

/* Ensure all numbers and text in tables are readable */
#meter-detail-table td,
#meter-detail-table th,
.table td,
.table th {
  color: #ffffff !important;
  font-weight: 500;
}

/* Currency and price styling */
#meter-detail-table td:last-child {
  color: #0b0b0b !important;
  font-weight: 600;
}

/* Total biaya styling */
#total-biaya {
  color: #ffffff !important;
  font-size: 1.2rem;
  font-weight: 600;
  padding: 16px;
  background: var(--bg-card);
  border-radius: 12px;
  border: 1px solid var(--border-color);
  margin-bottom: 16px;
  text-align: right;
}

#total-biaya::before {
  content: "💰 ";
  margin-right: 8px;
}

/* Table responsive container */
.table-responsive {
  background: var(--bg-card);
  border-radius: 12px;
  padding: 16px;
  border: 1px solid var(--border-color);
  overflow-x: auto;
}

.table-light {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.1) 0%, rgba(0, 172, 193, 0.1) 100%) !important;
  color: var(--accent-cyan) !important;
}

.sticky-top {
  position: sticky;
  top: 0;
  z-index: 1020;
} 

/* Daily summary grid */
.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.summary-box {
  background: #132f4c !important;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 14px;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s, border-color 0.2s;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: #ffffff !important;
}
.summary-box:hover {
  transform: translateY(-3px);
  border-color: var(--accent-cyan);
  box-shadow: 0 12px 32px var(--shadow-hover);
  background: #1e3a5f !important;
}
.summary-box.clickable { cursor: pointer; }
.summary-box.error {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.2) !important;
}
.summary-box.error .metric b { color: #ff6b6b !important; }
.summary-box .box-title {
  font-weight: 600;
  margin-bottom: 8px;
  color: #ffffff !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.summary-box .box-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  color: #e0f7fa !important;
}
.summary-box .metric {
  color: #e0f7fa !important;
}
.summary-box .metric b { color: var(--accent-cyan) !important; }

/* Footer styles */
.footer {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  color: var(--text-tertiary);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  margin-top: auto;
  flex-shrink: 0;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Ensure main content takes available space */
.container {
  flex: 1;
}

.footer .text-muted {
  color: var(--text-tertiary) !important;
}

.footer:hover .text-muted {
  color: var(--accent-cyan) !important;
  transition: color 0.3s ease;
}

/* Status dot indicator - air theme dark mode */
.status-dot {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--bg-primary);
  z-index: 10;
}
.status-running { background: var(--accent-cyan); }
.status-drop { background: var(--accent-yellow); }
.status-lost { background: #ef4444; }

/* Bootstrap component overrides for air theme dark mode */
.card {
  background: #132f4c !important;
  border: 1px solid var(--border-color);
  color: #ffffff !important;
  border-radius: 20px;
  box-shadow: 0 8px 32px var(--shadow);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.card * {
  color: #ffffff !important;
}

.card div,
.card span,
.card p,
.card h1,
.card h2,
.card h3,
.card h4,
.card h5,
.card h6 {
  color: #ffffff !important;
}

.card-header {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.2) 0%, rgba(0, 172, 193, 0.2) 100%) !important;
  border-bottom: 1px solid var(--border-color);
  color: #ffffff !important;
}

.card-body {
  background: #132f4c !important;
  color: #ffffff !important;
}

.card-body * {
  color: #ffffff !important;
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-blue) 100%);
  border-color: var(--accent-cyan);
  color: var(--bg-primary);
  border-radius: 12px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #00bcd4 0%, #0097a7 100%);
  border-color: #00bcd4;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px var(--shadow-hover);
}

.btn-info {
  background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-blue) 100%);
  border-color: var(--accent-cyan);
  color: var(--bg-primary);
  border-radius: 12px;
}

.btn-info:hover {
  background: linear-gradient(135deg, #00bcd4 0%, #0097a7 100%);
  border-color: #00bcd4;
  color: var(--bg-primary);
}

.btn-outline-secondary {
  border-color: var(--text-tertiary);
  color: var(--text-secondary);
  background: transparent;
}

.btn-outline-secondary:hover {
  background: var(--bg-tertiary);
  border-color: var(--text-secondary);
  color: var(--text-primary);
}

.badge {
  background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-blue) 100%);
  color: var(--bg-primary);
  border-radius: 8px;
  padding: 4px 10px;
}

.badge.bg-primary {
  background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-blue) 100%) !important;
}

.badge.bg-danger {
  background: #ef4444 !important;
  color: #ffffff !important;
}

.text-success {
  color: var(--accent-cyan) !important;
}

/* Override Bootstrap default colors */
body {
  color: #ffffff !important;
}

/* Ensure all text elements are readable */
h1, h2, h3, h4, h5, h6 {
  color: #ffffff !important;
}

p, span, div, label {
  color: #ffffff !important;
}

/* Override Bootstrap text utilities */
.text-dark,
.text-black {
  color: #ffffff !important;
}

.text-light {
  color: #ffffff !important;
}

.text-white {
  color: #ffffff !important;
}

/* Form labels */
.form-label, label {
  color: var(--text-primary) !important;
  font-weight: 500;
}

/* Card text */
.card-body, .card-header {
  color: var(--text-primary) !important;
}

.card-body p, .card-body span, .card-body div {
  color: var(--text-primary) !important;
}

/* List group items text */
.list-group-item {
  color: var(--text-primary) !important;
}

.list-group-item * {
  color: var(--text-primary) !important;
}

/* Modal body text */
.modal-body {
  color: var(--text-primary) !important;
}

.modal-body p, .modal-body span, .modal-body div, .modal-body td, .modal-body th {
  color: var(--text-primary) !important;
}

/* Summary box text */
.summary-box * {
  color: var(--text-primary);
}

.summary-box .metric {
  color: var(--text-primary) !important;
}

.text-warning {
  color: var(--accent-yellow) !important;
}

/* Ensure modal close button is visible */
.btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* Ensure all text in reports modal is readable */
.modal-body strong {
  color: var(--text-primary) !important;
}

/* Table in reports modal */
.modal-body .table-warning {
  background-color: rgba(255, 213, 79, 0.15) !important;
}

.modal-body .table-warning td {
  color: #ffffff !important;
  background-color: rgba(255, 213, 79, 0.15) !important;
}

/* Ensure all numeric values are readable */
.table td:not(:first-child) {
  font-family: 'Courier New', monospace;
  text-align: right;
  color: #ffffff !important;
}

/* Badge in table cells */
.table .badge {
  color: #ffffff !important;
}

.text-muted {
  color: var(--text-tertiary) !important;
}

/* Modal title small text */
.modal-title small {
  color: var(--text-tertiary) !important;
}

/* Ensure all table data in detail modal is readable */
#summaryDetailModal .table td {
  color: #ffffff !important;
}

#summaryDetailModal .table th {
  color: #ffffff !important;
}

/* Ensure preview modal table is readable */
#previewModal .table td,
#previewModal .table th {
  color: #ffffff !important;
}

/* Page root - ensure scroll works */
#page-root {
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: visible;
}

/* Force all text in summary cards to be white */
.summary-card,
.summary-card *:not(.value):not(.label):not(i) {
  color: #ffffff !important;
}

/* Ensure meter name is readable */
.summary-card .label:first-child {
  color: #ffffff !important;
  font-weight: 600;
  font-size: 1rem;
}

/* Override any Bootstrap classes that might affect card colors */
.summary-card.bg-light,
.summary-card.bg-white {
  background: var(--bg-card) !important;
  color: #ffffff !important;
}

/* Ensure all numeric values in cards are visible */
.summary-card .value[style*="color"] {
  /* Keep inline styles for values but ensure they're visible */
  /* Linter: add an inherit fallback so rule is not empty */
  color: inherit !important;
}

/* Container fluid adjustments */
.container-fluid {
  width: 100%;
  overflow-x: hidden;
  overflow-y: visible;
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
  header h1 {
    font-size: 1.5rem;
  }
  
  .smart-grid {
    padding: 12px;
  }
}

/* CRITICAL: Force dark background and white text for all cards - must be at end to override everything */
.summary-card {
  background-color: #132f4c !important;
  background: #132f4c !important;
  color: #ffffff !important;
}

.summary-card,
.summary-card > *,
.summary-card > * > * {
  color: #ffffff !important;
}

/* Override any Bootstrap bg utilities */
.bg-light,
.bg-white {
  background-color: #132f4c !important;
  background: #132f4c !important;
}

/* Ensure card text is always white */
.card,
.card * {
  color: #ffffff !important;
}

.card {
  background-color: #132f4c !important;
  background: #132f4c !important;
}

/* ------------------------------------------------------------------
   Accessibility override: make modal / detail tables use dark text
   on a light row background so values are readable over the dark theme.
   These rules are intentionally specific and placed at the end to
   override earlier "white text" rules (use !important where needed).
   ------------------------------------------------------------------ */

/* Target known summary/preview/detail modals and any modal-body table */
#summaryDetailModal .table td,
#summaryDetailModal .table th,
#previewModal .table td,
#previewModal .table th,
.modal-body .table td,
.modal-body .table th,
.modal .table td,
.modal .table th {
  color: #0b0b0b !important; /* dark/black text for readability */
  background-color: rgba(255,255,255,0.95) !important; /* near-white rows */
}

/* Slightly different even/odd striping to keep subtle separation */
#summaryDetailModal .table-striped tbody tr:nth-of-type(odd),
#previewModal .table-striped tbody tr:nth-of-type(odd),
.modal-body .table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255,255,255,0.95) !important;
}

#summaryDetailModal .table-striped tbody tr:nth-of-type(even),
#previewModal .table-striped tbody tr:nth-of-type(even),
.modal-body .table-striped tbody tr:nth-of-type(even) {
  background-color: rgba(245,245,245,0.95) !important;
}

/* Keep table headers slightly tinted but with dark text */
#summaryDetailModal .table th,
#previewModal .table th,
.modal-body .table th {
  background-color: rgba(230,240,245,0.95) !important;
  color: #0b0b0b !important;
  font-weight: 700 !important;
}

/* Links/numeric badges inside modal tables should also be dark */
.modal-body .table td a,
.modal .table td a,
.modal-body .table .badge,
.modal .table .badge {
  color: #0b0b0b !important;
}

/* Right-align numeric cells but keep dark color */
.modal-body .table td:not(:first-child),
.modal .table td:not(:first-child) {
  text-align: right;
  color: #0b0b0b !important;
  font-weight: 600;
}

/* ------------------------------------------------------------------
   Meter detail table (per-id) readability override
   - Keep special numeric columns (kWh / Harga) intact
   - Make most cells dark text on light rows so values are readable
   ------------------------------------------------------------------ */

/* Base: make table text dark but skip special numeric columns (11-13) */
#meter-detail-table,
#meter-detail-table th {
  color: #0b0b0b !important;
}

#meter-detail-table td:not(:nth-child(11)):not(:nth-child(12)):not(:nth-child(13)) {
  color: #0b0b0b !important;
  background-color: rgba(255,255,255,0.95) !important;
}

/* Slight striping */
#meter-detail-table.table-striped tbody tr:nth-of-type(odd) td:not(:nth-child(11)):not(:nth-child(12)):not(:nth-child(13)) {
  background-color: rgba(255,255,255,0.95) !important;
}
#meter-detail-table.table-striped tbody tr:nth-of-type(even) td:not(:nth-child(11)):not(:nth-child(12)):not(:nth-child(13)) {
  background-color: rgba(245,245,245,0.95) !important;
}

/* Header: keep tinted header but use dark text */
#meter-detail-table thead th {
  background-color: rgba(6, 96, 115, 0.95) !important; /* slightly darker teal */
  color: #ffffff !important; /* keep header text white for contrast */
  font-weight: 700 !important;
}

/* Make kWh / Kenaikan / Harga columns black to match other cells */
#meter-detail-table td:nth-child(11),
#meter-detail-table td:nth-child(12) {
  color: #0b0b0b !important;
  font-weight: 600 !important;
  background-color: rgba(255,255,255,0.95) !important;
}

#meter-detail-table td:nth-child(13) {
  color: #0b0b0b !important;
  font-weight: 600 !important;
  background-color: rgba(255,255,255,0.95) !important;
}

/* Right-align numeric columns (keep readable) */
#meter-detail-table td:not(:first-child) {
  text-align: right;
}

/* ------------------------------------------------------------------
   Prevent double-scroll for report modals and make them mobile-friendly
   Target only the report-related modals created dynamically by app:
   #previewModal, #reportDataModal, #summaryDetailModal
   ------------------------------------------------------------------ */

/* When a modal is open, lock body scroll so only modal scrolls */
body.modal-open {
  overflow: hidden !important;
  touch-action: none; /* prevent background touch scrolling on mobile */
}

/* Make these modals fixed and centered, constrained to viewport */
#previewModal, #reportDataModal, #summaryDetailModal {
  position: fixed;
  top: 5vh;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 40px);
  max-width: 1100px;
  z-index: 2000; /* above typical backdrops */
  display: block; /* override bootstrap display:none on creation until shown */
}

/* Ensure modal-dialog doesn't add additional page scroll space */
#previewModal .modal-dialog,
#reportDataModal .modal-dialog,
#summaryDetailModal .modal-dialog {
  margin: 0 auto;
  max-width: 100%;
}

/* Keep modal content constrained and let modal-body scroll */
#previewModal .modal-content,
#reportDataModal .modal-content,
#summaryDetailModal .modal-content {
  max-height: 90vh;
  overflow: hidden;
  box-shadow: 0 12px 48px rgba(0,0,0,0.5);
}

/* The inner table container should scroll with smooth touch support */
#previewModal .modal-body .table-responsive,
#reportDataModal .modal-body .table-responsive,
#summaryDetailModal .modal-body .table-responsive {
  max-height: calc(90vh - 160px); /* leave room for header/footer */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
}

/* Make modal-footer sticky at bottom on small viewports */
#previewModal .modal-footer,
#reportDataModal .modal-footer,
#summaryDetailModal .modal-footer {
  position: sticky;
  bottom: 0;
  background: linear-gradient(180deg, rgba(19,47,76,0.85), rgba(19,47,76,0.95));
  z-index: 10;
}

/* Mobile adjustments: nearly full-screen modal */
@media (max-width: 600px) {
  #previewModal, #reportDataModal, #summaryDetailModal {
    top: 2vh;
    width: calc(100% - 12px);
    max-width: none;
    left: 50%;
    transform: translateX(-50%);
  }
  #previewModal .modal-content,
  #reportDataModal .modal-content,
  #summaryDetailModal .modal-content {
    max-height: 96vh;
    border-radius: 12px;
  }
  #previewModal .modal-body .table-responsive,
  #reportDataModal .modal-body .table-responsive,
  #summaryDetailModal .modal-body .table-responsive {
    max-height: calc(96vh - 140px);
    padding: 6px;
  }
}