/*
 * NetShield panel template — Obsidian
 * Dark neutral surfaces, amber accent, oversized stat cards. Loaded after
 * ns-theme.css; the layout pins data-theme="dark" for this skin.
 */
[data-skin="obsidian"],
[data-skin="obsidian"][data-theme="dark"],
[data-skin="obsidian"][data-theme="light"] {
  color-scheme: dark;
  --ns-font: "Bricolage Grotesque", "Segoe UI", system-ui, -apple-system, sans-serif;
  --ns-bg: #17191d;
  --ns-bg-glow: #17191d;
  --ns-ink: #f4f5f7;
  --ns-muted: #a4a9b3;
  --bs-body-color: #f4f5f7;
  --bs-body-color-rgb: 244, 245, 247;
  --bs-secondary-color: #a4a9b3;
  --bs-secondary-color-rgb: 164, 169, 179;
  --bs-tertiary-color: #7d838e;
  --bs-emphasis-color: #ffffff;
  --bs-heading-color: #ffffff;
  --ns-line: #2b2f36;
  --ns-line-strong: #3a3f48;
  --ns-card: #212429;
  --ns-card-solid: #212429;
  --ns-card-hover: #262a30;
  --ns-surface: #1b1e23;
  --ns-surface-2: #17191d;
  --ns-input-bg: #17191d;
  --ns-input-border: #3a3f48;
  --ns-top-bg: #17191d;
  --ns-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  --ns-shadow-lg: 0 12px 32px rgba(0, 0, 0, .45);
  --ns-radius: 12px;
  --ns-radius-sm: 10px;
  --ns-sidebar: #17191d;
  --ns-sidebar-elev: #1b1e23;
  --ns-sidebar-hover: #24272d;
  --ns-sidebar-active: rgba(245, 192, 42, .12);
  --ns-sidebar-text: #f4f5f7;
  --ns-sidebar-muted: #8b919c;
  --ns-sidebar-border: #2b2f36;
  --ns-sidebar-shadow: none;
  --ns-sidebar-w: 300px;
  --ns-table-head: #1b1e23;
  --ns-table-hover: rgba(245, 192, 42, .06);
  --ns-act-ghost-bg: #212429;
  --ns-act-ghost-hover: #262a30;
  --ns-dropdown-bg: #212429;
  --ns-dropdown-shadow: 0 16px 48px rgba(0, 0, 0, .55);
  --ns-scroll-thumb: #3a3f48;
  --ns-accent: #f5c02a;
  --ns-accent-2: #ffd45c;
  --ns-accent-soft: rgba(245, 192, 42, .14);
  --ns-navy: #f5c02a;
  --ns-crimson: #ff5a5f;
  --ns-btn-from: #f5c02a;
  --ns-btn-to: #e6ad12;
  --ns-btn-hover-from: #ffd45c;
  --ns-btn-hover-to: #f5c02a;
  --ns-btn-shadow: rgba(245, 192, 42, .25);
  --ns-ok: #2fd67a;
  --ns-danger: #ff5a5f;
  --ns-warn: #f5c02a;
}

/* Primary actions read dark-on-amber, not white-on-amber */
[data-skin="obsidian"] .btn-ns,
[data-skin="obsidian"] .ns-act-primary,
[data-skin="obsidian"] .btn-primary { color: #17191d !important; font-weight: 700; }
[data-skin="obsidian"] .ns-act-primary i { color: #17191d; }

/* —— Sidebar —— */
[data-skin="obsidian"] .ns-sidebar {
  padding: 18px 14px 16px;
  border-right: 1px solid var(--ns-sidebar-border);
  color: #c9ced6;
}
[data-skin="obsidian"] .ns-sidebar-top { padding: 4px 8px 22px; border-bottom: 1px solid var(--ns-sidebar-border); margin-bottom: 18px; }
[data-skin="obsidian"] .ns-brand-logo { height: 40px; max-width: 190px; }
[data-skin="obsidian"] .ns-sidebar .ns-brand-logo { filter: brightness(0) invert(1); }
[data-skin="obsidian"] .ns-sidebar-collapse { border: 1px solid var(--ns-sidebar-border); background: var(--ns-sidebar-elev); color: #c9ced6; width: 34px; height: 34px; }
[data-skin="obsidian"] .ns-side-welcome {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px 8px 18px;
  border-bottom: 1px solid var(--ns-sidebar-border);
  margin-bottom: 14px;
}
[data-skin="obsidian"] .ns-side-welcome-kicker { font-size: .8rem; color: var(--ns-sidebar-muted); }
[data-skin="obsidian"] .ns-side-welcome-name { font-size: 1.15rem; font-weight: 700; color: #fff; letter-spacing: -.01em; }
[data-skin="obsidian"] .ns-nav-section-label {
  display: block;
  padding: 4px 8px 8px;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ns-sidebar-muted);
}
[data-skin="obsidian"] .ns-nav-parent,
[data-skin="obsidian"] .ns-nav-link { font-size: 1rem; font-weight: 500; color: #c9ced6; padding: 12px 10px; border-radius: 10px; }
[data-skin="obsidian"] .ns-nav-parent-left { gap: 14px; }
[data-skin="obsidian"] .ns-nav-parent-left i { color: #8b919c; font-size: 1.05rem; width: 22px; text-align: center; }
[data-skin="obsidian"] .ns-nav-parent.active,
[data-skin="obsidian"] .ns-nav-link.active,
[data-skin="obsidian"] .ns-nav-drop.is-open .ns-nav-parent { color: #fff; }
[data-skin="obsidian"] .ns-nav-parent.active .ns-nav-parent-left i,
[data-skin="obsidian"] .ns-nav-link.active .ns-nav-parent-left i,
[data-skin="obsidian"] .ns-nav-drop.is-open .ns-nav-parent-left i { color: #fff; }
[data-skin="obsidian"] .ns-nav-link.active { background: var(--ns-sidebar-active); }
[data-skin="obsidian"] .ns-nav-caret {
  width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center;
  background: #24272d; color: #c9ced6; font-size: .7rem;
}
[data-skin="obsidian"] .ns-nav-children { margin-left: 22px; border-left: 1px solid var(--ns-sidebar-border); padding-left: 10px; }
[data-skin="obsidian"] .ns-nav-child { font-size: .9rem; color: #a4a9b3; padding: 8px 10px; }
[data-skin="obsidian"] .ns-nav-child.active { color: #fff; background: transparent; }
[data-skin="obsidian"] .ns-nav-child.active::before { background: var(--ns-accent); }
[data-skin="obsidian"] .ns-sidebar-foot { border-top: 1px solid var(--ns-sidebar-border); padding-top: 12px; }
[data-skin="obsidian"] .ns-user-chip { display: none; }
[data-skin="obsidian"] .ns-nav-foot-link { font-size: 1rem; padding: 10px 10px; color: #c9ced6; }
[data-skin="obsidian"] .ns-nav-foot-link[href="?p=logout"] { color: var(--ns-danger); }
[data-skin="obsidian"] .ns-nav-foot-link[href="?p=logout"]:hover { background: rgba(255, 90, 95, .10); color: var(--ns-danger); }
[data-skin="obsidian"] .ns-user-avatar { background: var(--ns-accent); color: #17191d; }

/* —— Top bar + status strip —— */
[data-skin="obsidian"] .ns-top-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 28px;
  font-size: .95rem;
  color: #c9ced6;
  background: #17191d;
  border-bottom: 1px solid var(--ns-line);
}
[data-skin="obsidian"] .ns-top-status-left { display: inline-flex; align-items: center; gap: 10px; }
[data-skin="obsidian"] .ns-top-status-left i { color: var(--ns-accent); }
[data-skin="obsidian"] .ns-top-status-right { display: inline-flex; align-items: center; gap: 10px; }
[data-skin="obsidian"] .ns-top-status-pill {
  padding: 4px 10px; border-radius: 6px; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: rgba(47, 214, 122, .14); color: var(--ns-ok);
}
[data-skin="obsidian"] .ns-top-status-pill.is-degraded { background: rgba(245, 192, 42, .14); color: var(--ns-accent); }
[data-skin="obsidian"] .ns-top-status-pill.is-down { background: rgba(255, 90, 95, .14); color: var(--ns-danger); }
[data-skin="obsidian"] .ns-top-status-pill.is-unknown { background: #2b2f36; color: #a4a9b3; }
[data-skin="obsidian"] .ns-top { background: #17191d; padding: 12px 28px; border-bottom: 1px solid var(--ns-line); }
[data-skin="obsidian"] .ns-top-title { font-size: 1.15rem; font-weight: 700; }
[data-skin="obsidian"] .ns-jump-link.is-on { color: var(--ns-accent); }
[data-skin="obsidian"] .ns-main { background: var(--ns-bg); }
[data-skin="obsidian"] .ns-content { padding-top: 22px; }

/* Breadcrumb chips on dark: flat surfaces, amber current step */
[data-skin="obsidian"] .ns-crumb { margin-bottom: 14px; }
[data-skin="obsidian"] .ns-crumb-home,
[data-skin="obsidian"] .ns-crumb-step { background: var(--ns-surface); border-color: var(--ns-line); color: #a4a9b3; }
[data-skin="obsidian"] a.ns-crumb-home:hover,
[data-skin="obsidian"] a.ns-crumb-step:hover { color: #fff; background: #24272d; border-color: var(--ns-line-strong); }
[data-skin="obsidian"] .ns-crumb-now { color: var(--ns-accent); background: var(--ns-accent-soft); }
[data-skin="obsidian"] .ns-crumb-sep { color: #3a3f48; }

/* Page banner on dark: flatter surfaces, amber glow, oversized title */
[data-skin="obsidian"] .ns-crumb:has(+ .ns-page-hero),
[data-skin="obsidian"] .ns-page-hero {
  background:
    radial-gradient(760px 200px at 100% 0%, rgba(245, 192, 42, .10), transparent 60%),
    linear-gradient(160deg, #24272d 0%, #1d2025 100%) !important;
  border-color: var(--ns-line) !important;
}
[data-skin="obsidian"] .ns-crumb + .ns-page-hero { background: linear-gradient(160deg, #24272d 0%, #1d2025 100%) !important; }
[data-skin="obsidian"] .ns-page-hero { margin-bottom: 20px; }
[data-skin="obsidian"] .ns-page-title { font-size: 2.1rem; font-weight: 700; letter-spacing: -.03em; color: #fff; }
[data-skin="obsidian"] .ns-page-lead { color: var(--ns-muted); max-width: 720px; font-size: .92rem; }
[data-skin="obsidian"] .ns-page-hero-ico { opacity: .07; }

/* —— Cards —— */
[data-skin="obsidian"] .ns-card { border-radius: 14px; border-color: var(--ns-line); }
[data-skin="obsidian"] .ns-card:hover { border-color: var(--ns-line-strong); }
[data-skin="obsidian"] .ns-card-head h2 { font-size: 1.05rem; font-weight: 600; }
[data-skin="obsidian"] .ns-stat-card { padding: 22px 22px 18px; min-height: 150px; }
[data-skin="obsidian"] .ns-stat-ico {
  position: absolute; right: 18px; top: 16px;
  width: 64px; height: 64px; margin: 0; border-radius: 0;
  background: transparent !important; color: var(--ns-accent) !important; font-size: 2.4rem;
}
[data-skin="obsidian"] .ns-stat-ico.danger { color: var(--ns-danger) !important; }
[data-skin="obsidian"] .ns-stat-ico.ok { color: var(--ns-ok) !important; }
[data-skin="obsidian"] .ns-stat-label { text-transform: none; letter-spacing: 0; font-size: 1.25rem; font-weight: 600; color: #fff; max-width: calc(100% - 80px); line-height: 1.2; margin-bottom: 10px; }
[data-skin="obsidian"] .ns-stat-value { font-size: 2.6rem; font-weight: 700; }
[data-skin="obsidian"] .ns-stat-meta { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 6px; background: rgba(47, 214, 122, .12); color: var(--ns-ok); font-size: .82rem; font-weight: 700; }
[data-skin="obsidian"] .ns-stat-meta-muted { background: transparent; padding: 0; color: var(--ns-muted); font-weight: 500; }
[data-skin="obsidian"] .ns-stat-foot,
[data-skin="obsidian"] .ns-stat-hint { border-top: 1px solid var(--ns-line); margin: 14px -22px -18px; padding: 12px 22px; color: var(--ns-muted); font-size: .84rem; }

/* NetCore KPI cards + layer stack pick up the accent */
[data-skin="obsidian"] .ns-nc-kpi .ns-stat-label { font-size: 1rem; max-width: none; }
[data-skin="obsidian"] .ns-nc-kpi .ns-stat-value { font-size: 2rem; }

/* Tables, inputs, pills */
[data-skin="obsidian"] .ns-table thead th { background: var(--ns-table-head); color: var(--ns-muted); border-color: var(--ns-line); }
[data-skin="obsidian"] .ns-table td { border-color: var(--ns-line); }
[data-skin="obsidian"] .form-control,
[data-skin="obsidian"] .form-select { background: var(--ns-input-bg); border-color: var(--ns-input-border); color: var(--ns-ink); }
[data-skin="obsidian"] .form-control:focus,
[data-skin="obsidian"] .form-select:focus { border-color: var(--ns-accent); box-shadow: 0 0 0 3px var(--ns-accent-soft); }
[data-skin="obsidian"] .ns-pill-ok { background: rgba(47, 214, 122, .14); color: var(--ns-ok); }
[data-skin="obsidian"] .ns-pill-warn { background: rgba(245, 192, 42, .14); color: var(--ns-accent); }
[data-skin="obsidian"] .ns-pill-danger { background: rgba(255, 90, 95, .14); color: var(--ns-danger); }
[data-skin="obsidian"] .ns-pill-off { background: #2b2f36; color: #a4a9b3; }
[data-skin="obsidian"] .ns-page-live { background: var(--ns-surface); border-color: var(--ns-line); }
[data-skin="obsidian"] .ns-page-live-dot { background: var(--ns-ok); }
[data-skin="obsidian"] .ns-tr-chart { background: var(--ns-surface); border-color: var(--ns-line); }
[data-skin="obsidian"] .ns-tr-leg { background: var(--ns-surface); }
[data-skin="obsidian"] .dropdown-menu { background: var(--ns-dropdown-bg); border: 1px solid var(--ns-line) !important; }
[data-skin="obsidian"] .dropdown-item { color: var(--ns-ink); }
[data-skin="obsidian"] .dropdown-item:hover,
[data-skin="obsidian"] .dropdown-item.active { background: var(--ns-sidebar-hover); color: #fff; }
[data-skin="obsidian"] .btn-ns-outline { border-color: var(--ns-line-strong); color: var(--ns-ink); background: var(--ns-card); }
[data-skin="obsidian"] .btn-ns-outline:hover { border-color: var(--ns-accent); color: var(--ns-accent); }
[data-skin="obsidian"] ::selection { background: rgba(245, 192, 42, .35); }

@media (max-width: 991.98px) {
  [data-skin="obsidian"] { --ns-sidebar-w: 280px; }
  [data-skin="obsidian"] .ns-top-status { padding: 8px 16px; font-size: .82rem; }
  [data-skin="obsidian"] .ns-page-title { font-size: 1.8rem; }
}