/* ==========================================================================
   KiroServer Dashboard Custom Styles & Theme Overrides
   ========================================================================== */

/* Center Glance Navigation Bar */
header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

header .branding,
.header-branding {
  flex: 0 0 auto !important;
}

header nav,
nav,
.page-navigation,
nav[aria-label="Pages"] {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex: 1 1 auto !important;
  margin: 0 auto !important;
}

header nav ul,
nav ul,
.page-navigation ul {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0.75rem !important;
  margin: 0 auto !important;
  padding: 0 !important;
  list-style: none !important;
}

header nav a,
nav a {
  text-align: center !important;
  font-weight: 500 !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

header nav a:hover,
nav a:hover {
  color: var(--primary-color) !important;
  transform: translateY(-1px);
}

/* Tabbed Widget Stacks Styling */
.widget-stack {
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius-base);
}

.widget-stack nav,
.widget-stack-tabs {
  display: flex;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--border-radius-base) var(--border-radius-base) 0 0;
}

.widget-stack button,
.widget-stack-tab {
  font-size: 0.85rem;
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  background: transparent;
  color: var(--subdue-5);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.widget-stack button.active,
.widget-stack-tab.active {
  background: var(--primary-color);
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* Glassmorphic & Smooth Card Hover Effects */
.widget {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.widget:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
}

/* Custom App Colors - Aggressive SVGs */
svg[class*="truenas"], svg[class*="truenas"] * { color: #0095D5 !important; fill: #0095D5 !important; }
svg[class*="adguard"], svg[class*="adguard"] * { color: #5B95C3 !important; fill: #5B95C3 !important; }
svg[class*="nextcloud"], svg[class*="nextcloud"] * { color: #0082C9 !important; fill: #0082C9 !important; }
svg[class*="cloudflare"], svg[class*="cloudflare"] * { color: #F38020 !important; fill: #F38020 !important; }
svg[class*="tailscale"], svg[class*="tailscale"] * { color: #D7D7D7 !important; fill: #D7D7D7 !important; }
svg[class*="netbird"], svg[class*="netbird"] * { color: #FF5A00 !important; fill: #FF5A00 !important; }
svg[class*="dockge"], svg[class*="dockge"] * { color: #62A0EA !important; fill: #62A0EA !important; }
svg[class*="docker"], svg[class*="docker"] * { color: #2496ED !important; fill: #2496ED !important; }
svg[class*="openai"], svg[class*="openai"] * { color: #10A37F !important; fill: #10A37F !important; }
svg[class*="openwebui"], svg[class*="openwebui"] * { color: #3b82f6 !important; fill: #3b82f6 !important; }
svg[class*="robot"], svg[class*="robot"] * { color: #8C52FF !important; fill: #8C52FF !important; }
svg[class*="chat"], svg[class*="chat"] * { color: #00B3E6 !important; fill: #00B3E6 !important; }
svg[class*="plex"], svg[class*="plex"] * { color: #E5A00D !important; fill: #E5A00D !important; }
svg[class*="jellyfin"], svg[class*="jellyfin"] * { color: #00A4DC !important; fill: #00A4DC !important; }
svg[class*="immich"], svg[class*="immich"] * { color: #F6B900 !important; fill: #F6B900 !important; }
svg[class*="radarr"], svg[class*="radarr"] * { color: #FFC230 !important; fill: #FFC230 !important; }
svg[class*="sonarr"], svg[class*="sonarr"] * { color: #89C7E7 !important; fill: #89C7E7 !important; }
svg[class*="bazarr"], svg[class*="bazarr"] * { color: #8ED866 !important; fill: #8ED866 !important; }
svg[class*="prowlarr"], svg[class*="prowlarr"] * { color: #FF9800 !important; fill: #FF9800 !important; }
svg[class*="jellyseerr"], svg[class*="jellyseerr"] * { color: #E5A00D !important; fill: #E5A00D !important; }
svg[class*="qbittorrent"], svg[class*="qbittorrent"] * { color: #2D79C7 !important; fill: #2D79C7 !important; }
svg[class*="paperless"], svg[class*="paperless"] * { color: #6892C5 !important; fill: #6892C5 !important; }
svg[class*="vaultwarden"], svg[class*="vaultwarden"] * { color: #175DDC !important; fill: #175DDC !important; }
svg[class*="github"], svg[class*="github"] * { color: inherit !important; fill: currentColor !important; }
svg[class*="chart-donut"], svg[class*="chart-donut"] * { color: #FF5A00 !important; fill: #FF5A00 !important; }
svg[class*="link-variant"], svg[class*="link-variant"] * { color: #00B3E6 !important; fill: #00B3E6 !important; }
svg[class*="dumbbell"], svg[class*="dumbbell"] * { color: #8ED866 !important; fill: #8ED866 !important; }
svg[class*="folder-network"], svg[class*="folder-network"] * { color: #F6B900 !important; fill: #F6B900 !important; }
svg[class*="broom"], svg[class*="broom"] * { color: #D7D7D7 !important; fill: #D7D7D7 !important; }
svg[class*="apps"], svg[class*="apps"] * { color: #3b82f6 !important; fill: #3b82f6 !important; }
svg[class*="chart-bar"], svg[class*="chart-bar"] * { color: #E5A00D !important; fill: #E5A00D !important; }
svg[class*="account-cog"], svg[class*="account-cog"] * { color: #0095D5 !important; fill: #0095D5 !important; }
svg[class*="speedometer"], svg[class*="speedometer"] * { color: #F38020 !important; fill: #F38020 !important; }
svg[class*="view-dashboard"], svg[class*="view-dashboard"] * { color: #10A37F !important; fill: #10A37F !important; }
svg[class*="router-wireless"], svg[class*="router-wireless"] * { color: #00A4DC !important; fill: #00A4DC !important; }
svg[class*="web"], svg[class*="web"] * { color: #2496ED !important; fill: #2496ED !important; }


/* Hide DISK stat entirely when mountpoints are hidden */
.server-stats > div.server-stat-unavailable:nth-child(3) {
  display: none !important;
}


/* Change Monitor ERROR/Timed Out to Offline */
.monitor-site .list-horizontal-text li.color-negative {
  font-size: 0;
}
.monitor-site .list-horizontal-text li.color-negative::before {
  content: "OFFLINE";
  font-size: 0.9rem;
  text-transform: uppercase;
}