/* Глобальна темна тема — застосовується через html[data-theme="dark"].
   Покриває generic-елементи (body, container, table, input, h1-h6, a, pre)
   щоб працювало на всіх сторінках без правок їхніх власних стилів. */

/* ── Плаваюча кнопка перемикача ───────────────────────────── */
.zte-theme-btn{
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 9999;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.15);
  background: rgba(255,255,255,0.9);
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.zte-theme-btn:hover{
  transform: scale(1.08);
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.zte-theme-btn:active{ transform: scale(0.95); }
html[data-theme="dark"] .zte-theme-btn{
  background: rgba(40,40,55,0.9);
  border-color: rgba(255,255,255,0.15);
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

/* ── Глобальні правила темної теми ─────────────────────────── */
html[data-theme="dark"] body{
  background: linear-gradient(135deg, #1a3a52, #3a1a4a) !important;
  color: #e0e0e0;
}
html[data-theme="dark"] .container{
  background-color: #1e1e2e !important;
  color: #e0e0e0;
  box-shadow: 0 5px 15px rgba(0,0,0,0.4);
}
html[data-theme="dark"] .container .title,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4{ color: #f0f0f0; }
html[data-theme="dark"] h2{ border-bottom-color: #333 !important; }
html[data-theme="dark"] h3{ border-bottom-color: #333 !important; }

html[data-theme="dark"] .muted,
html[data-theme="dark"] .meta,
html[data-theme="dark"] .small{ color: #888; }

/* Інпути / селекти */
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select{
  background-color: #2a2a3a !important;
  color: #e0e0e0 !important;
  border-color: #444 !important;
}
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus{
  border-color: #b78ce8 !important;
}
html[data-theme="dark"] form .input-box span.details{ color: #ccc; }

/* Лінки */
html[data-theme="dark"] a{ color: #74b9ff; }
html[data-theme="dark"] a.logout{ color: #aaa; }
html[data-theme="dark"] a.logout:hover{ background: #2a2a3a; color: #fff; }

/* Таблиці */
html[data-theme="dark"] table{ border-color: #333 !important; }
html[data-theme="dark"] th,
html[data-theme="dark"] td{ border-color: #333 !important; color: #ddd; }
html[data-theme="dark"] th{ background: #20202c !important; color: #ccc !important; }
html[data-theme="dark"] tbody tr:nth-child(even){ background: rgba(255,255,255,0.02); }
html[data-theme="dark"] tbody tr:hover{ background: rgba(255,255,255,0.05); }

/* Pre/code */
html[data-theme="dark"] pre,
html[data-theme="dark"] code{
  background: #1a1a24 !important;
  border-color: #333 !important;
  color: #ddd;
}

/* Кнопки .rb (diag rebuild buttons) */
html[data-theme="dark"] .rb{
  background: #2a2a3a !important;
  border-color: #444 !important;
  color: #ccc !important;
}
html[data-theme="dark"] .rb:hover{ background: #3a3a4a !important; }

/* Admin tools (form.html) */
html[data-theme="dark"] details.admin-tools{ border-top-color: #444 !important; }
html[data-theme="dark"] details.admin-tools > summary{ color: #888; }
html[data-theme="dark"] details.admin-tools > summary:hover{ color: #ddd; background: #2a2a3a; }
html[data-theme="dark"] details.admin-tools[open] > summary{ color: #bbb; }

/* Sticky submit на мобілі */
@media (max-width: 584px){
  html[data-theme="dark"] form .button{
    background: rgba(30,30,46,0.95) !important;
  }
}

/* Прибираємо нативну системну темну тему — тепер тільки через data-theme */
@media (prefers-color-scheme: dark){
  html:not([data-theme]) body { background: #15151f; color: #e0e0e0; }
}

/* Mobile: широкі таблиці (diag, onu_show, audit_*) — горизонтальний скрол
   у межах власного контейнера, не всієї сторінки. Desktop layout без змін. */
@media (max-width: 700px){
  table{
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}