/* Topdata Light / Night theme */

html[data-theme="dark"] {
  color-scheme: dark;
}

html[data-theme="dark"] body {
  background-color: #050505 !important;
  color: #e8e8e8 !important;
}

html[data-theme="dark"] .navbar {
  background-color: #0d0d0d !important;
  border-bottom: 1px solid #2a2a2a;
}

html[data-theme="dark"] .navbar a,
html[data-theme="dark"] .navbar-text,
html[data-theme="dark"] .menu-icon {
  color: #f2f2f2 !important;
}

html[data-theme="dark"] .navbar a:hover {
  background-color: #262626 !important;
}

html[data-theme="dark"] .container,
html[data-theme="dark"] .info-box,
html[data-theme="dark"] .server-box,
html[data-theme="dark"] .chart-container,
html[data-theme="dark"] #historySettings {
  background-color: #111 !important;
  color: #e8e8e8 !important;
  border-color: #333 !important;
}

html[data-theme="dark"] table {
  background-color: #111 !important;
  color: #e8e8e8 !important;
}

html[data-theme="dark"] th,
html[data-theme="dark"] td {
  border-color: #333 !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select {
  background-color: #171717 !important;
  color: #eee !important;
  border-color: #444 !important;
}

html[data-theme="dark"] .footer {
  background-color: #0d0d0d !important;
  color: #aaa !important;
}

html[data-theme="dark"] .footer a {
  color: #ddd !important;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-left: 8px;
  padding: 7px 11px;
  border: 1px solid #666;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.theme-toggle:hover {
  background: rgba(255,255,255,0.10);
}

html[data-theme="dark"] .theme-toggle {
  border-color: #555;
  color: #f2f2f2;
}

/* =========================================================
   TOPDATA FULL DARK OVERRIDES
   ========================================================= */

html[data-theme="dark"] canvas,
html[data-theme="dark"] #chartContainer {
  background: #111 !important;
}

/* 3D tlac */
html[data-theme="dark"] .info-box,
html[data-theme="dark"] .printer-info > div,
html[data-theme="dark"] .progress-bar {
  background: #151515 !important;
  color: #e8e8e8 !important;
  border-color: #333 !important;
}

html[data-theme="dark"] .progress-bar {
  background: #292929 !important;
}

html[data-theme="dark"] .state-operational {
  background: #102719 !important;
  color: #62d98b !important;
}

html[data-theme="dark"] .state-printing {
  background: #2b1117 !important;
  color: #ff7185 !important;
}


/* =========================================================
   SERVRE
   ========================================================= */

html[data-theme="dark"] .summary-box,
html[data-theme="dark"] .server-box,
html[data-theme="dark"] .toolbar {
  background: #111 !important;
  color: #e8e8e8 !important;
  border-color: #333 !important;
  box-shadow: 0 0 15px rgba(0,0,0,.45) !important;
}

html[data-theme="dark"] .summary-neutral {
  background: linear-gradient(180deg, #171717 0%, #101010 100%) !important;
}

html[data-theme="dark"] .summary-online,
html[data-theme="dark"] .summary-availability {
  background: linear-gradient(180deg, #142019 0%, #101511 100%) !important;
}

html[data-theme="dark"] .summary-offline {
  background: linear-gradient(180deg, #241313 0%, #151010 100%) !important;
}

html[data-theme="dark"] .summary-update {
  background: linear-gradient(180deg, #15192a 0%, #101116 100%) !important;
}

html[data-theme="dark"] .summary-cpu {
  background: linear-gradient(180deg, #261e10 0%, #15120d 100%) !important;
}

html[data-theme="dark"] .summary-ram {
  background: linear-gradient(180deg, #101e29 0%, #0d1419 100%) !important;
}

html[data-theme="dark"] .summary-disk {
  background: linear-gradient(180deg, #1b1628 0%, #111015 100%) !important;
}

html[data-theme="dark"] .detail-box {
  background: #181818 !important;
  color: #ddd !important;
  border-color: #333 !important;
}

html[data-theme="dark"] .docker-containers {
  background: #151515 !important;
  color: #ddd !important;
  border-color: #333 !important;
}

html[data-theme="dark"] .status.online {
  background: #102719 !important;
  color: #68db91 !important;
}

html[data-theme="dark"] .status.offline {
  background: #2b1117 !important;
  color: #ff7b83 !important;
}


/* =========================================================
   DACOV
   ========================================================= */

html[data-theme="dark"] .chart-container,
html[data-theme="dark"] #historySettings,
html[data-theme="dark"] #logs,
html[data-theme="dark"] .door-section {
  background: #111 !important;
  color: #e8e8e8 !important;
  border-color: #333 !important;
  box-shadow: 0 0 15px rgba(0,0,0,.4) !important;
}


/* =========================================================
   DVIERKA WINDOW V6
   ========================================================= */

html[data-theme="dark"] .door-window-v6 {
  background: #101010 !important;
  color: #e8e8e8 !important;
  border-color: #333 !important;
}

html[data-theme="dark"] .door-window-v6 .door-status-indicator,
html[data-theme="dark"] .dw6-panel,
html[data-theme="dark"] .dw6-card,
html[data-theme="dark"] .dw6-section,
html[data-theme="dark"] .dw6-box,
html[data-theme="dark"] .dw6-item {
  background: #171717 !important;
  color: #e8e8e8 !important;
  border-color: #343434 !important;
}

html[data-theme="dark"] .dw6-closed,
html[data-theme="dark"] .dw6-unk,
html[data-theme="dark"] .dd-free {
  background: #1a1a1a !important;
  color: #ddd !important;
  border-color: #444 !important;
}

html[data-theme="dark"] .dw6-open,
html[data-theme="dark"] .dw6-ok {
  background: #102719 !important;
  color: #67dd90 !important;
  border-color: #245c36 !important;
}

html[data-theme="dark"] .dw6-bad {
  background: #2b1117 !important;
  color: #ff7b83 !important;
  border-color: #6c2932 !important;
}

html[data-theme="dark"] .dw6-active {
  background: #102133 !important;
  border-color: #254d72 !important;
}

html[data-theme="dark"] .dw6-warn,
html[data-theme="dark"] .dw6-alert {
  background: #2a220e !important;
  color: #f5c451 !important;
  border-color: #66551f !important;
}

html[data-theme="dark"] .door-window-v6 button,
html[data-theme="dark"] .door-window-v6 summary {
  background: #1b1b1b !important;
  color: #eee !important;
  border-color: #444 !important;
}


/* =========================================================
   GENERIC LIGHT PANELS
   ========================================================= */

html[data-theme="dark"] pre,
html[data-theme="dark"] code,
html[data-theme="dark"] textarea {
  background: #151515 !important;
  color: #e8e8e8 !important;
  border-color: #333 !important;
}


/* =========================================================
   DACOV - DVIERKA FULL DARK
   ========================================================= */

html[data-theme="dark"] .door-window-v6,
html[data-theme="dark"] .door-v6-live,
html[data-theme="dark"] .door-window-v6 .door-visual,
html[data-theme="dark"] .door-v6-visual,
html[data-theme="dark"] .door-widget-v6,
html[data-theme="dark"] .door-window-v6 .door-chart-wrapper,
html[data-theme="dark"] .door-v6-chart {
  background: #111 !important;
  color: #e8e8e8 !important;
  border-color: #333 !important;
}

html[data-theme="dark"] .door-v6-head,
html[data-theme="dark"] .door-v6-subtitle,
html[data-theme="dark"] .door-window-v6 .chart-title,
html[data-theme="dark"] .door-v6-chart-title {
  color: #e8e8e8 !important;
}

html[data-theme="dark"] .door-window-v6 .door-label,
html[data-theme="dark"] .door-window-v6 .door-time-label,
html[data-theme="dark"] .door-window-v6 .door-time {
  color: #e8e8e8 !important;
}

html[data-theme="dark"] .dw6-kpi,
html[data-theme="dark"] .dw6-chip {
  background: #181818 !important;
  color: #e8e8e8 !important;
  border-color: #383838 !important;
}

html[data-theme="dark"] .dw6-kpi span,
html[data-theme="dark"] .dw6-chip span,
html[data-theme="dark"] .dw6-rows span {
  color: #999 !important;
}

html[data-theme="dark"] .dw6-kpi b,
html[data-theme="dark"] .dw6-chip b,
html[data-theme="dark"] .dw6-rows b {
  color: #f2f2f2 !important;
}

html[data-theme="dark"] .dw6-more {
  background: #151515 !important;
  border-color: #383838 !important;
}

html[data-theme="dark"] .dw6-more summary {
  background: #1b1b1b !important;
  color: #e8e8e8 !important;
  border-color: #383838 !important;
}

html[data-theme="dark"] .dw6-rows,
html[data-theme="dark"] .dw6-rows div {
  background: #151515 !important;
  color: #e8e8e8 !important;
  border-color: #333 !important;
}

html[data-theme="dark"] .door-window-v6 .door-btn {
  background: #202020 !important;
  color: #eee !important;
  border-color: #444 !important;
}

html[data-theme="dark"] .door-window-v6 .door-status-indicator.status-online,
html[data-theme="dark"] .door-v6-online {
  background: #102719 !important;
  color: #67dd90 !important;
  border-color: #245c36 !important;
}

html[data-theme="dark"] .door-window-v6 .door-status-indicator.status-offline {
  background: #2b1117 !important;
  color: #ff7b83 !important;
  border-color: #6c2932 !important;
}

html[data-theme="dark"] #doorTime,
html[data-theme="dark"] .door-time {
  color: #f2f2f2 !important;
}


/* =========================================================
   FINAL DARK TEXT FIXES
   ========================================================= */

/* 3D TLAC */
html[data-theme="dark"] .info-box h3,
html[data-theme="dark"] .info-box p,
html[data-theme="dark"] .printer-info,
html[data-theme="dark"] .printer-info span,
html[data-theme="dark"] .printer-info strong {
  color: #f2f2f2 !important;
}

html[data-theme="dark"] .progress-bar-text {
  color: #ffffff !important;
  text-shadow: 0 1px 2px #000;
}

/* DACOV - LOGY */
html[data-theme="dark"] #logs,
html[data-theme="dark"] #logs *,
html[data-theme="dark"] #logs p,
html[data-theme="dark"] #logs span,
html[data-theme="dark"] #logs div {
  color: #f2f2f2 !important;
}

html[data-theme="dark"] #logs li[style*="color: red"] {
  color: #ff4d4d !important;
}

html[data-theme="dark"] #logs {
  background: #111 !important;
  border-color: #333 !important;
}

/* SERVRE - sekundarne sive texty */
html[data-theme="dark"] .server-box,
html[data-theme="dark"] .server-box p,
html[data-theme="dark"] .server-box span,
html[data-theme="dark"] .server-box small,
html[data-theme="dark"] .server-id,
html[data-theme="dark"] .server-details,
html[data-theme="dark"] .detail-box,
html[data-theme="dark"] .detail-box span,
html[data-theme="dark"] .detail-box p,
html[data-theme="dark"] .docker-containers,
html[data-theme="dark"] .docker-containers span,
html[data-theme="dark"] .history-chart-wrap {
  color: #eeeeee !important;
}

/* Nechame stavove farby farebne */
html[data-theme="dark"] .status.online {
  color: #67dd90 !important;
}

html[data-theme="dark"] .status.offline {
  color: #ff7b83 !important;
}

/* =========================================================
   THEME BUTTON - FINAL DESIGN
   ========================================================= */

.navbar-links {
  flex: 1;
  align-items: center;
}

.theme-toggle {
  margin-left: auto !important;
  margin-right: 10px !important;

  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;

  padding: 0 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.35) !important;
  border-radius: 50% !important;

  color: #ffd54f !important;
  font-size: 17px !important;
  line-height: 1 !important;

  cursor: pointer;
  box-shadow: none !important;

  transition:
    background-color .15s ease,
    border-color .15s ease,
    transform .15s ease;
}

.theme-toggle:hover {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.75) !important;
  transform: scale(1.08);
}

html[data-theme="dark"] .theme-toggle {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.45) !important;
  color: #ffd54f !important;
}

/* Mobil - o nieco mensie */
@media (max-width: 768px) {
  .theme-toggle {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    margin-right: 4px !important;
    font-size: 16px !important;
  }
}


/* MOBILE THEME BUTTON FIX */
@media (max-width: 768px) {
  .navbar-links .theme-toggle {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    flex: 0 0 28px !important;

    padding: 0 !important;
    margin: 7px 12px 7px auto !important;

    align-self: flex-end !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 15px !important;
    line-height: 1 !important;

    border-radius: 50% !important;
  }
}

/* =========================================================
   THEME BUTTON - DESKTOP / MOBILE LAYOUT
   ========================================================= */

/* Mobilny button je na desktope skryty */
.mobile-theme-toggle {
  display: none !important;
}

/* Telefon / tablet */
@media (max-width: 768px) {

  /* Povodny mesiacik z hamburger menu schovame */
  .navbar-links .theme-toggle {
    display: none !important;
  }

  /* Samostatny mesiacik v hornej liste */
  .mobile-theme-toggle {
    display: inline-flex !important;

    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;

    margin-left: auto !important;
    margin-right: 10px !important;
    padding: 0 !important;

    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 28px !important;

    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.40) !important;
    border-radius: 50% !important;

    color: #ffd54f !important;
    font-size: 15px !important;
    line-height: 1 !important;

    position: relative !important;
    top: 0 !important;

    box-shadow: none !important;
  }

  .mobile-theme-toggle:hover,
  .mobile-theme-toggle:active {
    background: rgba(255,255,255,0.12) !important;
  }
}