/* Expert Panel – Bootstrap 5 theme inspired by DevOps HQ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --sidebar-width: 224px;
  --content-bg: hsl(210, 20%, 98%);
  --card-bg: #ffffff;
  --border-color: hsl(220, 13%, 91%);
  --foreground: hsl(220, 20%, 10%);
  --muted-fg: hsl(220, 10%, 46%);
  --primary: hsl(225, 73%, 57%);
  --primary-light: hsl(225, 73%, 95%);
  --success: hsl(142, 71%, 45%);
  --danger: hsl(0, 72%, 51%);
  --warning: hsl(38, 92%, 50%);
  --sidebar-bg: hsl(220, 20%, 14%);
  --sidebar-accent: hsl(220, 20%, 18%);
  --sidebar-fg: hsl(220, 14%, 71%);
  --sidebar-muted: hsl(220, 14%, 40%);
  --sidebar-border: hsl(220, 20%, 20%);
  --radius: 12px;
}

body {
  background: var(--content-bg);
  color: var(--foreground);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 0.875rem;
}

/* ── Auth page ── */
#panel-auth-wrapper {
  min-height: 100vh;
  background: var(--sidebar-bg);
}

/* ── Sidebar ── */
#panel-sidebar {
  width: var(--sidebar-width);
  min-height: 100vh;
  flex-shrink: 0;
  background: var(--sidebar-bg);
  transition: transform 0.25s ease;
  z-index: 100;
  border-right: 1px solid var(--sidebar-border);
}

.sidebar-brand {
  border-bottom: 1px solid var(--sidebar-border);
}

.sidebar-brand-icon {
  width: 32px;
  height: 32px;
  background: var(--primary);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1rem;
  flex-shrink: 0;
}

.sidebar-brand-name {
  color: hsl(0, 0%, 95%);
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.2;
}

.sidebar-brand-sub {
  color: var(--sidebar-muted);
  font-size: 0.68rem;
  text-transform: capitalize;
  line-height: 1.2;
}

.sidebar-nav-label {
  color: var(--sidebar-muted);
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.sidebar-nav-link {
  color: var(--sidebar-fg);
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.15s;
  margin-bottom: 1px;
  display: flex;
  align-items: center;
  border-left: 2px solid transparent;
}

.sidebar-nav-link:hover {
  background: var(--sidebar-accent);
  color: hsl(0, 0%, 95%);
}

.sidebar-nav-link.active {
  background: var(--sidebar-accent);
  color: hsl(0, 0%, 95%);
  border-left-color: var(--primary);
}

.sidebar-nav-link i {
  font-size: 1rem;
  width: 1rem;
  text-align: center;
  flex-shrink: 0;
}

.sidebar-user {
  border-top: 1px solid var(--sidebar-border);
}

.sidebar-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  font-size: 0.72rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sidebar-user-name {
  color: hsl(0, 0%, 95%);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
  display: block;
}
.sidebar-user-name:hover { color: #fff; }

.sidebar-user-email {
  color: var(--sidebar-muted);
  font-size: 0.625rem;
  line-height: 1.3;
}

.sidebar-logout-btn {
  color: var(--sidebar-muted);
  font-size: 1rem;
  text-decoration: none;
  transition: color 0.15s;
  flex-shrink: 0;
}
.sidebar-logout-btn:hover { color: hsl(0, 72%, 60%); }

/* ── Server context sidebar ── */
.sidebar-server-header {
  border-bottom: 1px solid var(--sidebar-border);
}

.sidebar-back-link {
  color: var(--sidebar-muted);
  font-size: 0.75rem;
  text-decoration: none;
  transition: color 0.15s;
}
.sidebar-back-link:hover { color: var(--sidebar-fg); }

.sidebar-server-name {
  color: hsl(0, 0%, 95%);
  font-weight: 600;
  font-size: 0.75rem;
  line-height: 1.3;
}

.sidebar-server-ip {
  color: var(--sidebar-muted);
  font-size: 0.625rem;
  font-family: 'SF Mono', 'Cascadia Code', monospace;
}

/* ── Layout ── */
#panel-wrapper {
  min-height: 100vh;
}

#panel-content {
  min-height: 100vh;
  background: var(--content-bg);
}

/* ── Page Header ── */
.page-header {
  margin-bottom: 1.5rem;
}

.page-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--foreground);
  line-height: 1.3;
}

/* ── Breadcrumb ── */
.breadcrumb {
  font-size: 0.75rem;
  margin-bottom: 0.25rem;
}
.breadcrumb-item a {
  color: var(--primary) !important;
  text-decoration: none;
}
.breadcrumb-item a:hover { text-decoration: underline; }
.breadcrumb-item.active { color: var(--muted-fg); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--muted-fg); }

/* ── Cards ── */
.card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: box-shadow 0.2s;
}

.card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.07);
}

.card-header {
  background: transparent;
  border-bottom: 1px solid var(--border-color);
  color: var(--foreground);
  font-size: 0.875rem;
  font-weight: 600;
}

/* ── Stat Cards ── */
.stat-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: box-shadow 0.2s;
  animation: fadeIn 0.3s ease-out;
}
.stat-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.07);
}

.stat-icon {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--muted-fg);
  margin-bottom: 0.25rem;
}

.stat-icon i {
  font-size: 0.875rem;
}

.stat-label {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.75px;
  color: var(--muted-fg);
}

.stat-value {
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--foreground);
  margin-top: 0.125rem;
}

.stat-sub {
  font-size: 0.75rem;
  color: var(--muted-fg);
  margin-top: 0.125rem;
}

/* ── Progress Stats ── */
.progress-stat .progress {
  height: 6px;
  border-radius: 3px;
  background: hsl(220, 14%, 96%);
  margin-top: 0.5rem;
}

.progress-stat .progress-bar {
  border-radius: 3px;
  transition: width 0.5s ease;
}

/* ── Tables ── */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--foreground);
  --bs-table-border-color: var(--border-color);
  --bs-table-hover-bg: rgba(0,0,0,0.02);
  font-size: 0.875rem;
}

.table thead th {
  color: var(--muted-fg);
  font-weight: 600;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 1px solid var(--border-color);
  padding: 0.75rem 1.25rem;
  background: transparent;
}

.table tbody td {
  padding: 1rem 1.25rem;
  vertical-align: middle;
}

.table-hover tbody tr {
  transition: background 0.15s;
}

/* ── Service Cards ── */
.service-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: box-shadow 0.2s, border-color 0.2s;
  animation: fadeIn 0.3s ease-out;
}
.service-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.07);
}

.service-name {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--foreground);
}

.service-status {
  font-size: 0.75rem;
  font-weight: 500;
}

/* ── Status indicators ── */
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-online {
  background: var(--success);
  box-shadow: 0 0 6px hsla(142, 71%, 45%, 0.5);
}
.status-offline  { background: #9ca3af; }
.status-updating {
  background: var(--primary);
  box-shadow: 0 0 6px hsla(225, 73%, 57%, 0.5);
}

.badge-online  { background: hsl(142, 76%, 93%); color: hsl(142, 72%, 29%); }
.badge-offline { background: hsl(220, 14%, 96%); color: var(--muted-fg); }
.badge-updating { background: hsl(225, 73%, 93%); color: hsl(225, 73%, 40%); }

/* ── Badge overrides ── */
main .badge.bg-secondary { background-color: hsl(220, 14%, 96%) !important; color: var(--foreground) !important; font-weight: 500; }
main .badge.bg-primary   { background-color: var(--primary-light) !important; color: hsl(225, 73%, 40%) !important; font-weight: 600; }
main .badge.bg-info      { background-color: hsl(200, 73%, 93%) !important; color: hsl(200, 73%, 35%) !important; }

.badge {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 0.3em 0.6em;
  border-radius: 6px;
}

/* ── Type badges ── */
.badge-type {
  padding: 0.15em 0.5em;
  background: var(--primary-light);
  color: var(--primary);
  border-radius: 4px;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
}

/* ── Buttons ── */
.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
}
.btn-primary:hover {
  opacity: 0.9;
  background: var(--primary);
  border-color: var(--primary);
}

.btn-outline-primary {
  color: var(--primary);
  border-color: hsla(225, 73%, 57%, 0.2);
}
.btn-outline-primary:hover {
  background: hsla(225, 73%, 57%, 0.05);
  color: var(--primary);
  border-color: var(--primary);
}

.btn-sm {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.375rem 0.75rem;
  border-radius: 8px;
}

/* ── Form controls ── */
.form-control, .form-select {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  color: var(--foreground);
  border-radius: 8px;
  font-size: 0.875rem;
}

.form-control:focus, .form-select:focus {
  background: var(--card-bg);
  border-color: var(--primary);
  color: var(--foreground);
  box-shadow: 0 0 0 3px hsla(225, 73%, 57%, 0.12);
}

.form-control::placeholder { color: var(--muted-fg); }

.form-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--foreground);
}

/* ── Modals ── */
.modal-content {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

.modal-header {
  border-bottom: 1px solid var(--border-color);
  background: transparent;
  padding: 1.25rem 1.5rem;
}

.modal-body { padding: 1.5rem; }

.modal-footer {
  border-top: 1px solid var(--border-color);
  background: transparent;
  padding: 1rem 1.5rem;
}

.modal-title { color: var(--foreground) !important; font-weight: 600; }
.modal .form-label { color: var(--foreground) !important; }

/* ── Alerts ── */
.alert {
  border-radius: var(--radius);
  font-size: 0.875rem;
  border-width: 1px;
}

.alert-info    { background: hsl(217, 92%, 95%); border-color: hsl(217, 91%, 85%); color: hsl(221, 83%, 40%); }
.alert-success { background: hsl(141, 85%, 93%); border-color: hsl(142, 69%, 82%); color: hsl(142, 72%, 29%); }
.alert-danger  { background: hsl(0, 93%, 94%); border-color: hsl(0, 90%, 82%); color: hsl(0, 72%, 45%); }
.alert-warning { background: hsl(48, 96%, 89%); border-color: hsl(48, 96%, 78%); color: hsl(32, 95%, 30%); }

.alert-auto-dismiss { transition: opacity 0.5s; }

/* ── Device info table (detail pages) ── */
.device-info-table td {
  padding: 0.625rem 1.25rem;
  border-bottom: 1px solid var(--border-color);
  vertical-align: middle;
  font-size: 0.875rem;
}
.device-info-table tr:last-child td { border-bottom: none; }
.device-info-table td:first-child {
  width: 140px;
  color: var(--muted-fg);
  font-weight: 500;
  white-space: nowrap;
}
.device-info-table td:last-child { color: var(--foreground); }

/* ── Monospace text ── */
.font-mono, code {
  font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
  font-size: 0.8125rem;
}

/* ── Links ── */
a {
  color: var(--primary);
  text-decoration: none;
}
a:hover {
  color: var(--primary);
  text-decoration: underline;
}

/* ── Animations ── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeIn 0.3s ease-out;
}

/* ── Responsive sidebar ── */
@media (max-width: 991.98px) {
  #panel-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    transform: translateX(-100%);
  }
  #panel-sidebar.show {
    transform: translateX(0);
  }
  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 99;
  }
  .sidebar-overlay.show { display: block; }
}

/* ── Misc ── */
.text-muted { color: var(--muted-fg) !important; }
.fw-600 { font-weight: 600; }
.tracking-wide { letter-spacing: 0.5px; }
.tracking-wider { letter-spacing: 1px; }