/* ============================================================
   SolarBox Theme System
   Layer 1 : CSS Custom Properties (light defaults / dark overrides)
   Layer 2 : Component overrides for elements not using vars in main.css
   Layer 3 : Font-size increases (statistics, diagram, BMS labels)
   Layer 4 : Theme toggle component
============================================================ */

/* ── Layer 1: CSS Variables ── */
:root {
  /* Backgrounds */
  --bg-body:     #fafafa;
  --bg-card:     #ffffff;
  --bg-tabbar:   #ffffff;
  --bg-card-alt: #f5f5f5;
  --bg-popup:    #ffffff;
  --bg-input:    #ffffff;

  /* Text */
  --text-primary:   #000000;
  --text-secondary: #555555;
  --text-muted:     #777777;

  /* Borders & Shadows */
  --border-color:  #dddddd;
  --shadow-card:   rgba(0, 0, 0, 0.10);
  --shadow-tabbar: rgba(0, 0, 0, 0.10);

  /* Brand */
  --color-brand: #17B686;

  /* Font sizes — increased from originals */
  --fs-body:       18px;  /* .container was 15px  */
  --fs-label-sm:   15px;  /* statistics labels were 10px */
  --fs-label-md:   16px;  /* diagram / BMS labels were 12px */
  --fs-label-tab:  13px;  /* tab-item span was 12px */
  --fs-card-title: 19px;  /* box titles (inherited 15px) */
}

html.dark-theme {
  /* Backgrounds — AMOLED black */
  --bg-body:     #000000;
  --bg-card:     #0d0d0d;
  --bg-tabbar:   #0d0d0d;
  --bg-card-alt: #1a1a1a;
  --bg-popup:    #0d0d0d;
  --bg-input:    #000000;

  /* Text — improved contrast */
  --text-primary:   #f0f6fc;
  --text-secondary: #adbac7;
  --text-muted:     #909dab;

  /* Borders & Shadows */
  --border-color:  #2d333b;
  --shadow-card:   rgba(0, 0, 0, 0.75);
  --shadow-tabbar: rgba(0, 0, 0, 0.75);
}

/* ── Layer 2: Component dark-mode overrides ── */

/* Tab-bar items */
html.dark-theme .tab-item svg               { stroke: var(--text-muted); }
html.dark-theme .tab-item span              { color:  var(--text-muted); }
html.dark-theme .tab-item.active svg        { stroke: #2395E6; }
html.dark-theme .tab-item.active span       { color:  #2395E6; }

/* Input / select elements */
html.dark-theme .edtText {
  background-color: var(--bg-input);
  border-color:     var(--border-color);
  color:            var(--text-secondary);
}
html.dark-theme .select_opt {
  background-color: var(--bg-input);
  border-color:     var(--border-color);
  color:            #2395E6;
}

/* Popup */
html.dark-theme .popup-content {
  background-color: var(--bg-popup);
  color:            var(--text-primary);
}
html.dark-theme .popup input {
  background-color: var(--bg-input);
  border-color:     var(--border-color);
  color:            var(--text-primary);
}

/* Loader ring */
html.dark-theme .loader {
  border-color:     #2a2d3e;
  border-top-color: #3498db;
}

/* ── Layer 2b: BMS section — card container + header ── */

/* BMS outer card — mirrors .box in main.css */
#bms-container {
  background-color: var(--bg-card);
  border-radius: 4px;
  box-shadow: 0 4px 6px var(--shadow-card);
  overflow: hidden;
  margin-block: 6px;
  margin-inline: 14px;
}
#bms-row { padding: 10px; box-sizing: border-box; }

/* BMS colored header */
.bms-section-header {
  background-color: #008000;
  display: flex;
  align-items: center;
  padding: 4px 8px;
  gap: 6px;
}
.bms-section-header span { font-size: 16px; line-height: 1; flex-shrink: 0; }
.bms-section-header p    { color: #ffffff; margin: 0; font-weight: 500; }

/* BMS inner cards: use card-alt bg for depth */
.bms-cr-container { background: var(--bg-card-alt) !important; border-color: var(--border-color) !important; }

/* ── Layer 3a: BMS section — font-size reference ── */
/* Note: device.html <style> tag loads AFTER this file, so same-specificity rules
   below are overridden by the embedded CSS. Values kept here for documentation.
   Actual sizes set in device.html embedded CSS: +2px from original values. */
.bms-cr-stat-label { font-size: 13px; }  /* orig 11px */
.bms-cr-node-label { font-size: 14px; }  /* orig 12px */
.bms-cr-header     { font-size: 15px; }  /* orig 13px */

/* BMS dark-mode overrides — container, text, surfaces */
html.dark-theme .bms-cr-container   { background-color: var(--bg-card-alt); color: var(--text-primary); border-color: var(--border-color); }
html.dark-theme .bms-cr-stat-label  { color: var(--text-muted); }
html.dark-theme .bms-cr-stat-value  { color: var(--text-primary); }
html.dark-theme .bms-cr-node-label  { color: var(--text-secondary); }
html.dark-theme .bms-cr-node-power  { color: var(--text-primary); }
html.dark-theme .bms-cr-cell-v      { color: var(--text-primary); }
html.dark-theme .bms-cr-soc-label   { color: var(--text-muted); }
html.dark-theme .bms-cr-cap-val     { color: var(--text-muted); }
html.dark-theme .bms-cr-stat-panel  { background: var(--bg-card-alt); border-color: var(--border-color); }
html.dark-theme .bms-cr-cell-item   { background: var(--bg-card-alt); }
html.dark-theme .bms-cr-ring        { background: var(--bg-card-alt); }
html.dark-theme .bms-cr-icon-circle { background: var(--bg-card-alt); border-color: var(--border-color); }
html.dark-theme .bms-cr-path-idle   { stroke: var(--border-color); }

/* ── Layer 3a-fix: BMS light-mode cell text — explicit dark color ── */
/* Beats specificity (0,2,0) of .bms-cr-container .bms-cr-cell-v in embedded CSS */
html:not(.dark-theme) .bms-cr-cell-v    { color: #222 !important; }
html:not(.dark-theme) .bms-cr-cell-item { background: #f3f3f3; }
html:not(.dark-theme) .bms-cr-container .bms-cr-cell-item { background: #dde4ef; }

/* ── Layer 3b: Statistics section — font-size via !important (inline styles present) ── */
#box1-title, #box2-title, #box3-title, #box4-title {
  font-size: var(--fs-card-title) !important;
}

#box1-label1, #box1-label2,
#box2-label1, #box2-label2,
#box3-label1, #box3-label2,
#box4-label1, #box4-label2,
#box1-v1, #box1-v2,
#imall, #exall, #dchgall, #chgall,
#box4-v1, #box4-v2 {
  font-size: var(--fs-label-sm) !important;
  font-weight: bold !important;
}

/* Statistics dark-mode text color overrides */
html.dark-theme #box1-label1, html.dark-theme #box1-label2,
html.dark-theme #box2-label1, html.dark-theme #box2-label2,
html.dark-theme #box3-label1, html.dark-theme #box3-label2,
html.dark-theme #box4-label1, html.dark-theme #box4-label2,
html.dark-theme #box1-v1,     html.dark-theme #box1-v2,
html.dark-theme #imall,       html.dark-theme #exall,
html.dark-theme #dchgall,     html.dark-theme #chgall,
html.dark-theme #box4-v1,     html.dark-theme #box4-v2 {
  color: var(--text-muted) !important;
}

/* ── Layer 3c: Diagram section — font-size via !important (inline styles present) ── */
#dc-temp, #grid-l1, #grid-l2, #ac-temp, #load-l1, #load-l2, #bat-l1, #bat-l2 {
  font-size: var(--fs-label-md) !important;  /* was 12px */
  font-weight: bold !important;
}
html.dark-theme #dc-temp, html.dark-theme #grid-l1, html.dark-theme #grid-l2,
html.dark-theme #ac-temp, html.dark-theme #load-l1, html.dark-theme #load-l2,
html.dark-theme #bat-l1,  html.dark-theme #bat-l2 {
  color: var(--text-secondary) !important;
}

/* ── Layer 4: Theme toggle component ── */
/* Matches the flash-toggle slider style: 28×16px, knob 12px */
.theme-toggle-wrap {
  position: relative;
  display: inline-block;
  width: 28px;
  height: 16px;
  cursor: pointer;
  flex-shrink: 0;
}
.theme-toggle-wrap input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.theme-toggle-slider {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #ccc;
  border-radius: 16px;
  transition: background-color 0.3s;
}
.theme-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  background-color: #fff;
  border-radius: 50%;
  transition: transform 0.3s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.theme-toggle-wrap input:checked + .theme-toggle-slider {
  background-color: #334155;
}
.theme-toggle-wrap input:checked + .theme-toggle-slider .theme-toggle-knob {
  transform: translateX(12px);
}
.theme-toggle-label {
  font-size: 9px;
  color: #888;
}

/* ── Layer 5: Account Tab ("Tôi") — dark-mode overrides ── */

/* Main card backgrounds (inline style="background:#fff") */
html.dark-theme #account_device_management,
html.dark-theme #dongle-sn-container,
html.dark-theme #ble_device_section,
html.dark-theme #device-password-container {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
}

/* Section dividers (inline border-top:1px solid #eee) */
html.dark-theme #luxserver-switch-container,
html.dark-theme #luxserver-ip-container,
html.dark-theme #luxserver-select-container,
html.dark-theme #fix-luxserver-switch-container,
html.dark-theme #luxcloud-bms-switch-container,
html.dark-theme #bms1-connection-switch-container,
html.dark-theme #bms2-connection-switch-container {
  border-top-color: var(--border-color) !important;
}

/* Text labels — primary (inline color:#333) */
html.dark-theme #luxserver-switch-container span,
html.dark-theme #luxserver-ip-container > div > span:first-child,
html.dark-theme #fix-luxserver-switch-container span,
html.dark-theme #luxcloud-bms-switch-container span,
html.dark-theme #bms1-connection-switch-container span,
html.dark-theme #bms2-connection-switch-container span,
html.dark-theme #ble_device_controls label {
  color: var(--text-primary) !important;
}

/* Text labels — muted (inline color:#666) */
html.dark-theme #dongle-sn-container > div:last-child > div:last-child,
html.dark-theme #ble_device_controls [id$="_status"] {
  color: var(--text-muted) !important;
}

/* Auth required warning box */
html.dark-theme #device_management_auth_required > div:first-child {
  background: rgba(255, 236, 153, 0.07) !important;
  border-color: rgba(255, 200, 0, 0.25) !important;
}
html.dark-theme #device_management_auth_required p {
  color: #c9a540 !important;
}

/* Input fields */
html.dark-theme #dongle-sn-input,
html.dark-theme #device-password-input {
  background-color: var(--bg-input) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

/* Select dropdowns */
html.dark-theme #luxserver-region-select,
html.dark-theme #bms1_ble_select,
html.dark-theme #bms2_ble_select,
html.dark-theme #bms3_ble_select {
  background-color: var(--bg-input) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

/* Toggle switch — unchecked track in dark mode */
html.dark-theme #tab_account .slider {
  background-color: #30363d;
}
html.dark-theme #tab_account input:checked + .slider {
  background-color: #17b686;
}