/* =========================================================
   Pendax Conductor – Theme-aware stylesheet (Bootstrap 5)
   - Typography: Inter
   - Light/Dark via data-bs-theme
   - App components: portal-card, sidebar styles, forms
   ========================================================= */


/* =========================================================
   1) App tokens / Typography
   ========================================================= */

:root {
  /* Font stack */
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* App tokens */
  --card-radius: 0.75rem;
  --focus-ring: 0 0 0 .2rem rgba(13,110,253,.25);
}

body {
  font-family: var(--font-sans);
  font-feature-settings: "liga" 1, "kern" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.01em;
}


/* =========================================================
   2) Bootstrap-aligned base tweaks (safe, theme-aware)
   ========================================================= */

/* Keep cards theme-aware without forcing a custom background everywhere */
.card {
  border-radius: var(--card-radius);
  border: 1px solid var(--bs-border-color);
  color: var(--bs-body-color);
  /* NOTE: No background set here on purpose.
     This avoids "all cards look the same" and lets Bootstrap/components decide. */
}

.card-title,
.card-text {
  color: inherit;
}

/* Lists */
.list-group-item {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}

.list-group-item:hover {
  background-color: var(--bs-tertiary-bg);
}

/* Badges (typography only) */
.badge {
  font-size: 0.9rem;
  padding: 0.4em 0.7em;
}

/* Alerts: keep Bootstrap behavior but align border */
.alert {
  border: 1px solid var(--bs-border-color);
}

/* Gravatar ring */
img.rounded-circle {
  border: 2px solid var(--bs-primary);
}


/* =========================================================
   3) Forms (theme-aware)
   ========================================================= */

.form-control,
.form-select,
textarea,
input[type="text"],
input[type="email"],
input[type="password"] {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color);
}

.form-control::placeholder,
textarea::placeholder {
  color: var(--bs-secondary-color);
}

.form-control:focus,
.form-select:focus,
textarea:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus {
  border-color: var(--bs-primary);
  box-shadow: var(--focus-ring);
  outline: 0;
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}


/* =========================================================
   4) Sidebar (theme-aware)
   Requires HTML classes:
   - <ul class="... sidebar-nav"> for the nav list
   - .sidebar-user-toggle on the user dropdown toggle link
   ========================================================= */

.sidebar-nav .nav-link {
  color: var(--bs-body-color);
  border-radius: .5rem;
  padding: .5rem .75rem;
}

.sidebar-nav .nav-link:hover,
.sidebar-nav .nav-link:focus {
  background-color: var(--bs-primary);
  color: #fff;
}

.sidebar-nav .nav-link.active {
  background-color: var(--bs-primary);
  color: #fff;
}

.sidebar-nav .nav-link i {
  opacity: .85;
}

.sidebar-user-toggle {
  color: var(--bs-body-color);
}

.sidebar-user-toggle:hover {
  color: var(--bs-primary);
}

/* Dropdown menus should follow theme automatically.
   In dark, we slightly align with secondary-bg for "panel" feel. */
[data-bs-theme="dark"] .dropdown-menu {
  background-color: var(--bs-secondary-bg);
}


/* =========================================================
   5) App component: Portal cards
   Use on dashboard cards, device cards, zone cards, etc.
   Add class "portal-card" alongside "card".
   Status variants:
   - is-offline (dim/gray)
   - is-delayed (warning stripe)
   - is-error (danger stripe)
   ========================================================= */

.portal-card {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--card-radius);
}

/* Nice hover */
.portal-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
  transition: transform .15s ease, box-shadow .15s ease;
}

/* Dark cards: slightly more "panel" look */
[data-bs-theme="dark"] .portal-card {
  background-color: var(--bs-tertiary-bg);
}

[data-bs-theme="dark"] .portal-card:hover {
  box-shadow: 0 14px 30px rgba(0,0,0,.45);
}

/* Status variants */
.portal-card.is-offline {
  opacity: .6;
  filter: grayscale(70%);
}

.portal-card.is-delayed {
  border-left: 4px solid var(--bs-warning);
}

.portal-card.is-error {
  border-left: 4px solid var(--bs-danger);
}

/* Optional helper for compact metric lists inside cards */
.portal-card .metrics li {
  margin-bottom: .25rem;
}


/* =========================================================
   6) Dark theme overrides (only where needed)
   Keep this small and targeted.
   ========================================================= */

[data-bs-theme="dark"] {
  /* Your preferred dark portal feel */
  --bs-body-bg: #121212;
  --bs-body-color: #ffffff;

  --bs-secondary-bg: #1b1b1b;
  --bs-tertiary-bg: #1f1f1f;

  --bs-border-color: #333;
  --bs-link-color: #0d6efd;
}

/* Keep your "nice" alert looks in dark */
[data-bs-theme="dark"] .alert-success {
  background-color: #1e4620;
  color: #c9f5cc;
  border-color: #2b5a2f;
}

[data-bs-theme="dark"] .alert-danger {
  background-color: #5a1a1a;
  color: #f8d7da;
  border-color: #6a2a2a;
}

/* Legacy compatibility: if any old template still uses dropdown-menu-dark */
[data-bs-theme="dark"] .dropdown-menu-dark {
  background-color: #1a1a1a;
}

/* Legacy compatibility: if any page still uses btn-outline-light in dark */
[data-bs-theme="dark"] .btn-outline-light:hover,
[data-bs-theme="dark"] .btn-outline-light:focus {
  background-color: #f8f9fa;
  color: #212529;
}

/* =========================================================
   7) Dashboard: Systemhalsa
   ========================================================= */

.system-health-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.health-donut {
  --pct-active: 0;
  --pct-delayed: 0;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  background:
    conic-gradient(
      #22c55e 0 calc(var(--pct-active) * 1%),
      #f59e0b calc(var(--pct-active) * 1%) calc((var(--pct-active) + var(--pct-delayed)) * 1%),
      #ef4444 calc((var(--pct-active) + var(--pct-delayed)) * 1%) 100%
    );
}

.health-donut::after {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
}

.health-donut-center {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  line-height: 1.1;
}

.health-donut-center strong {
  font-size: 1.3rem;
}

.health-donut-center span {
  font-size: 0.8rem;
  color: var(--bs-secondary-color);
}

.health-legend {
  width: 100%;
  min-width: 160px;
}

.health-row {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.4rem;
  font-size: 0.95rem;
}

.health-row:last-child {
  margin-bottom: 0;
}

.health-row strong {
  font-variant-numeric: tabular-nums;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.dot-active {
  background: #22c55e;
}

.dot-delayed {
  background: #f59e0b;
}

.dot-inactive {
  background: #ef4444;
}

@media (max-width: 992px) {
  .health-donut {
    width: 104px;
    height: 104px;
  }
}