/*
 * inferra-theme.css — Inferra Fleet branded theme for NetBox 4.5.
 *
 * Loaded via configuration.py:
 *   EXTRA_CSS = "inferra_netbox_ui/css/inferra-theme.css"
 *
 * Strategy: override NetBox's CSS custom properties so the entire UI
 * inherits the slate+cyan palette without touching Bootstrap or NetBox
 * core templates.
 *
 * Palette (slate + cyan):
 *   --inferra-bg-deep:    #0B1220   (page background, dark mode)
 *   --inferra-bg:         #0F172A   (panel background, dark mode)
 *   --inferra-surface:    #1E293B   (raised surfaces, dark mode)
 *   --inferra-border:     #334155   (subtle borders, dark mode)
 *   --inferra-text:       #F1F5F9   (primary text, dark mode)
 *   --inferra-text-muted: #94A3B8   (secondary text, dark mode)
 *   --inferra-text-subtle:#64748B   (tertiary text, dark mode)
 *   --inferra-accent:     #06B6D4   (primary accent — cyan)
 *   --inferra-accent-hover: #0891B2 (cyan darker, for hover)
 *   --inferra-success:    #10B981   (emerald)
 *   --inferra-warning:    #F59E0B   (amber)
 *   --inferra-danger:     #EF4444   (red)
 *   --inferra-info:       #3B82F6   (blue)
 *
 * Light-mode equivalents are derived; we lean dark-first.
 */

/* =========================================================================
   1. CSS variables — these cascade to all NetBox components
   ========================================================================= */

:root,
[data-bs-theme="dark"] {
    /* Inferra palette tokens */
    --inferra-bg-deep:      #0B1220;
    --inferra-bg:           #0F172A;
    --inferra-surface:      #1E293B;
    --inferra-surface-hi:   #334155;
    --inferra-border:       #334155;
    --inferra-border-soft:  #1E293B;
    --inferra-text:         #F1F5F9;
    --inferra-text-muted:   #94A3B8;
    --inferra-text-subtle:  #64748B;
    --inferra-accent:       #06B6D4;
    --inferra-accent-soft:  rgba(6, 182, 212, 0.15);
    --inferra-accent-hover: #0891B2;
    --inferra-success:      #10B981;
    --inferra-success-soft: rgba(16, 185, 129, 0.15);
    --inferra-warning:      #F59E0B;
    --inferra-warning-soft: rgba(245, 158, 11, 0.15);
    --inferra-danger:       #EF4444;
    --inferra-danger-soft:  rgba(239, 68, 68, 0.15);
    --inferra-info:         #3B82F6;
    --inferra-info-soft:    rgba(59, 130, 246, 0.15);

    /* Override Bootstrap/NetBox surface colors (dark mode) */
    --bs-body-bg:           var(--inferra-bg);
    --bs-body-color:        var(--inferra-text);
    --bs-secondary-bg:      var(--inferra-surface);
    --bs-tertiary-bg:       var(--inferra-bg-deep);
    --bs-border-color:      var(--inferra-border);
    --bs-emphasis-color:    var(--inferra-text);

    /* Primary brand color (cyan replaces NetBox's default blue) */
    --bs-primary:           var(--inferra-accent);
    --bs-primary-rgb:       6, 182, 212;
    --bs-link-color:        var(--inferra-accent);
    --bs-link-color-rgb:    6, 182, 212;
    --bs-link-hover-color:  var(--inferra-accent-hover);
}

/* Light-mode overrides */
[data-bs-theme="light"] {
    --inferra-bg-deep:      #F1F5F9;
    --inferra-bg:           #FFFFFF;
    --inferra-surface:      #F8FAFC;
    --inferra-surface-hi:   #E2E8F0;
    --inferra-border:       #CBD5E1;
    --inferra-border-soft:  #E2E8F0;
    --inferra-text:         #0F172A;
    --inferra-text-muted:   #475569;
    --inferra-text-subtle:  #64748B;
    --inferra-accent:       #0891B2;
    --inferra-accent-hover: #0E7490;

    --bs-body-bg:           var(--inferra-bg);
    --bs-body-color:        var(--inferra-text);
    --bs-secondary-bg:      var(--inferra-surface);
    --bs-tertiary-bg:       var(--inferra-bg-deep);
    --bs-border-color:      var(--inferra-border);

    --bs-primary:           var(--inferra-accent);
    --bs-link-color:        var(--inferra-accent);
    --bs-link-hover-color:  var(--inferra-accent-hover);
}

/* =========================================================================
   2. Top navigation — retint the header bar
   ========================================================================= */

.navbar.navbar-dark,
.navbar.bg-dark,
.navbar-fixed-top {
    background-color: var(--inferra-bg-deep) !important;
    border-bottom: 1px solid var(--inferra-border-soft);
}

.navbar-brand,
.navbar-brand img {
    /* The logo SVG already has the right colors for both modes */
    max-height: 32px;
}

.navbar .nav-link {
    color: var(--inferra-text-muted);
    font-weight: 400;
    transition: color 100ms ease;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: var(--inferra-text);
}

.navbar .nav-link.active,
.navbar .nav-item.active > .nav-link {
    color: var(--inferra-accent);
}

/* =========================================================================
   3. Buttons — primary, success, warning, danger
   ========================================================================= */

.btn-primary {
    background-color: var(--inferra-accent);
    border-color: var(--inferra-accent);
    color: #0F172A;
    font-weight: 500;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--inferra-accent-hover);
    border-color: var(--inferra-accent-hover);
    color: #FFFFFF;
}

.btn-outline-primary {
    color: var(--inferra-accent);
    border-color: var(--inferra-accent);
}

.btn-outline-primary:hover {
    background-color: var(--inferra-accent);
    color: #0F172A;
}

.btn-success {
    background-color: var(--inferra-success);
    border-color: var(--inferra-success);
    color: #0F172A;
}

.btn-warning {
    background-color: var(--inferra-warning);
    border-color: var(--inferra-warning);
    color: #0F172A;
}

.btn-danger {
    background-color: var(--inferra-danger);
    border-color: var(--inferra-danger);
}

/* =========================================================================
   4. Badges and status pills
   ========================================================================= */

.badge.bg-primary {
    background-color: var(--inferra-accent) !important;
    color: #0F172A;
}

.badge.bg-success {
    background-color: var(--inferra-success-soft) !important;
    color: var(--inferra-success);
    border: 1px solid var(--inferra-success);
}

.badge.bg-warning {
    background-color: var(--inferra-warning-soft) !important;
    color: var(--inferra-warning);
    border: 1px solid var(--inferra-warning);
}

.badge.bg-danger {
    background-color: var(--inferra-danger-soft) !important;
    color: var(--inferra-danger);
    border: 1px solid var(--inferra-danger);
}

.badge.bg-info {
    background-color: var(--inferra-info-soft) !important;
    color: var(--inferra-info);
    border: 1px solid var(--inferra-info);
}

/* =========================================================================
   5. Cards and panels
   ========================================================================= */

.card {
    background-color: var(--inferra-surface);
    border: 1px solid var(--inferra-border);
    border-radius: 8px;
}

.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--inferra-border);
    color: var(--inferra-text);
    font-weight: 500;
}

/* =========================================================================
   6. Tables
   ========================================================================= */

.table {
    color: var(--inferra-text);
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(255, 255, 255, 0.02);
    --bs-table-hover-bg: var(--inferra-accent-soft);
    --bs-table-border-color: var(--inferra-border);
}

[data-bs-theme="light"] .table {
    --bs-table-striped-bg: rgba(0, 0, 0, 0.02);
    --bs-table-hover-bg: rgba(8, 145, 178, 0.08);
}

.table thead th {
    color: var(--inferra-text-muted);
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--inferra-border);
}

/* =========================================================================
   7. Forms
   ========================================================================= */

.form-control,
.form-select {
    background-color: var(--inferra-surface);
    border: 1px solid var(--inferra-border);
    color: var(--inferra-text);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--inferra-accent);
    box-shadow: 0 0 0 2px var(--inferra-accent-soft);
    background-color: var(--inferra-surface);
    color: var(--inferra-text);
}

/* =========================================================================
   8. Inferra-specific dashboard components (used by plugin views)
   ========================================================================= */

.inferra-stat-card {
    background: var(--inferra-surface);
    border: 1px solid var(--inferra-border);
    border-left: 3px solid var(--inferra-accent);
    border-radius: 8px;
    padding: 14px 16px;
}

.inferra-stat-card.success { border-left-color: var(--inferra-success); }
.inferra-stat-card.warning { border-left-color: var(--inferra-warning); }
.inferra-stat-card.danger  { border-left-color: var(--inferra-danger); }
.inferra-stat-card.info    { border-left-color: var(--inferra-info); }

.inferra-stat-card .label {
    font-size: 11px;
    color: var(--inferra-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}

.inferra-stat-card .value {
    font-size: 22px;
    color: var(--inferra-text);
    font-weight: 500;
    line-height: 1.2;
}

.inferra-stat-card .value.warning { color: var(--inferra-warning); }
.inferra-stat-card .value.danger  { color: var(--inferra-danger); }

.inferra-status-pill {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 500;
    display: inline-block;
}

.inferra-status-pill.lifecycle-active {
    color: var(--inferra-success);
    background: var(--inferra-success-soft);
}
.inferra-status-pill.lifecycle-commissioning {
    color: var(--inferra-accent);
    background: var(--inferra-accent-soft);
}
.inferra-status-pill.lifecycle-planned {
    color: var(--inferra-text-muted);
    background: var(--inferra-surface-hi);
}
.inferra-status-pill.lifecycle-decommissioning {
    color: var(--inferra-warning);
    background: var(--inferra-warning-soft);
}
.inferra-status-pill.lifecycle-lab {
    color: var(--inferra-text-muted);
    background: var(--inferra-surface-hi);
}

.inferra-drift-row {
    background: var(--inferra-warning-soft);
    border-left: 2px solid var(--inferra-warning);
    border-radius: 4px;
    padding: 10px 12px;
    margin-bottom: 6px;
    font-size: 13px;
}

.inferra-drift-row .object-name {
    color: var(--inferra-text);
    font-weight: 500;
}

.inferra-drift-row .field-name {
    color: var(--inferra-text-muted);
    font-size: 11px;
    margin-left: 8px;
}

.inferra-drift-row .values {
    color: var(--inferra-text-muted);
    font-size: 12px;
    margin-top: 4px;
    font-family: var(--bs-font-monospace, ui-monospace, monospace);
}

.inferra-section-heading {
    font-size: 12px;
    color: var(--inferra-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 24px 0 12px;
    font-weight: 500;
}

/* =========================================================================
   9. Topology view — SVG container styling
   ========================================================================= */

.inferra-topology {
    background: var(--inferra-bg-deep);
    border: 1px solid var(--inferra-border);
    border-radius: 8px;
    padding: 24px;
    min-height: 480px;
}

.inferra-topology .node {
    cursor: pointer;
    transition: opacity 100ms ease;
}

.inferra-topology .node:hover {
    opacity: 0.85;
}

.inferra-topology .node-label {
    fill: var(--inferra-text);
    font-size: 12px;
    font-weight: 500;
    text-anchor: middle;
}

.inferra-topology .node-sublabel {
    fill: var(--inferra-text-muted);
    font-size: 10px;
    text-anchor: middle;
}

.inferra-topology .edge {
    stroke: var(--inferra-border);
    stroke-width: 1.5;
    fill: none;
}

.inferra-topology .edge.active {
    stroke: var(--inferra-accent);
    stroke-width: 2;
}

.inferra-topology .legend-item {
    fill: var(--inferra-text-muted);
    font-size: 11px;
}

/* =========================================================================
   10. Login page
   ========================================================================= */

body.login-page {
    background-color: var(--inferra-bg-deep);
}

.login-page .login-form-container {
    background: var(--inferra-surface);
    border: 1px solid var(--inferra-border);
    border-radius: 12px;
    padding: 32px;
}

/* =========================================================================
   11. Footer customization
   ========================================================================= */

.footer-banner {
    background: var(--inferra-bg-deep);
    border-top: 1px solid var(--inferra-border-soft);
    color: var(--inferra-text-subtle);
    font-size: 12px;
    padding: 12px 16px;
    text-align: center;
}

.footer-banner a {
    color: var(--inferra-accent);
}

/* =========================================================================
   12. Custom links — make them more visible on object detail pages
   ========================================================================= */

.custom-links .btn {
    margin-right: 4px;
    margin-bottom: 4px;
}

/* =========================================================================
   13. Subtle improvements
   ========================================================================= */

/* Smoother transitions on interactive elements */
.btn,
.nav-link,
.form-control,
.form-select {
    transition: all 100ms ease;
}

/* Scrollbar styling for dark mode */
[data-bs-theme="dark"] ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--inferra-bg);
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--inferra-border);
    border-radius: 4px;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--inferra-surface-hi);
}

/* =========================================================================
   14. Sidebar override — force slate background so wordmark contrasts
   ========================================================================= */

/* The sidebar in NetBox 4.5 is <aside class="navbar navbar-vertical">.
   Force solid slate background — overrides any gradient or default. */
aside.navbar-vertical,
.navbar.navbar-vertical {
    background-color: var(--inferra-bg) !important;
    background-image: none !important;
    border-right: 1px solid var(--inferra-border-soft);
}

/* The brand area where our logo sits */
aside.navbar-vertical .navbar-brand {
    background-color: var(--inferra-bg) !important;
}

/* Edition badge below the logo (e.g. "Community") */
aside.navbar-vertical .netbox-edition {
    color: var(--inferra-text-muted) !important;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.7;
}

/* Nav menu items */
aside.navbar-vertical .nav-link {
    color: var(--inferra-text) !important;
}

aside.navbar-vertical .nav-link:hover,
aside.navbar-vertical .nav-link:focus {
    color: var(--inferra-accent) !important;
    background-color: var(--inferra-surface) !important;
}

aside.navbar-vertical .nav-link.active {
    color: var(--inferra-accent) !important;
    background-color: var(--inferra-accent-soft) !important;
}

/* =========================================================================
   15. Ghost-out NetBox attribution at the bottom of the sidebar
   ========================================================================= */

/* The release info block at the bottom of the sidebar uses the very specific
   class combo `.text-muted.text-center.fs-5.my-3.px-3`. Within the sidebar
   only — we don't want to ghost text-muted globally. Set color to background
   to make it invisible without removing it (honors the BRANDING_POWERED_BY_NETBOX
   attribution requirement). */
aside.navbar-vertical .text-muted.fs-5,
aside.navbar-vertical .text-muted.fs-5 a,
aside.navbar-vertical .text-muted.fs-5 a:hover {
    color: var(--inferra-bg) !important;
    text-decoration: none !important;
    /* Optional: make the area still mouse-discoverable without ink */
    cursor: default;
    transition: color 200ms ease;
}

/* But on hover over the whole block, fade them in slightly so admins can
   still find them when needed (low-contrast but legible). */
aside.navbar-vertical .text-muted.fs-5:hover {
    color: var(--inferra-text-subtle) !important;
}
aside.navbar-vertical .text-muted.fs-5:hover a {
    color: var(--inferra-text-subtle) !important;
}

/* =========================================================================
   16. Top header bar — apply slate to the desktop top bar
   ========================================================================= */

header.navbar.sticky-top {
    background-color: var(--inferra-bg) !important;
    border-bottom: 1px solid var(--inferra-border-soft);
}

/* Search input in the top bar gets surface color for visibility */
header.navbar .form-control {
    background-color: var(--inferra-surface) !important;
    color: var(--inferra-text) !important;
    border-color: var(--inferra-border) !important;
}

/* =========================================================================
   17. Page background (main content area)
   ========================================================================= */

body,
.page,
.page-wrapper,
#page-content {
    background-color: var(--inferra-bg-deep) !important;
}

/* =========================================================================
   18. Aggressive sidebar override — defeat any nested gradient/tint
   ========================================================================= */
aside.navbar-vertical *,
aside.navbar-vertical .container-fluid,
aside.navbar-vertical .collapse,
aside.navbar-vertical .navbar-collapse {
    background-color: transparent !important;
    background-image: none !important;
}
/* Re-assert the slate fill at the top level after stripping inner backgrounds */
aside.navbar-vertical {
    background-color: var(--inferra-bg) !important;
    background-image: none !important;
}
/* The h1.navbar-brand wrapping our logo */
aside.navbar-vertical h1.navbar-brand {
    background: transparent !important;
    margin-bottom: 0;
}
/* =========================================================================
   20. Polish: ghost out the edition tag, add top spacing
   ========================================================================= */

/* Ghost out the "Community" edition tag (or "Enterprise"/"Cloud" if applicable).
   It sits inside the navbar-brand block as `.netbox-edition`. We want it gone
   visually but present in the DOM for accessibility/screen readers. */
html body aside.navbar-vertical .netbox-edition {
    color: var(--inferra-bg) !important;
    font-size: 0 !important;
    line-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    overflow: hidden;
    /* Keep it screen-reader-readable but visually hidden */
    position: absolute;
    width: 1px;
    clip: rect(0 0 0 0);
}

/* Add breathing room above the wordmark — the current logo is butted right
   up against the top of the viewport. */
html body aside.navbar-vertical .navbar-brand,
html body aside.navbar-vertical h1.navbar-brand {
    padding-top: 16px !important;
    padding-bottom: 8px !important;
}

/* And give the navbar overall a bit more top padding too */
html body aside.navbar-vertical {
    padding-top: 8px !important;
}
/* =========================================================================
   20. Polish: ghost out the edition tag, add top spacing
   ========================================================================= */

/* Ghost out the "Community" edition tag (or "Enterprise"/"Cloud" if applicable).
   It sits inside the navbar-brand block as `.netbox-edition`. We want it gone
   visually but present in the DOM for accessibility/screen readers. */
html body aside.navbar-vertical .netbox-edition {
    color: var(--inferra-bg) !important;
    font-size: 0 !important;
    line-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    overflow: hidden;
    /* Keep it screen-reader-readable but visually hidden */
    position: absolute;
    width: 1px;
    clip: rect(0 0 0 0);
}

/* Add breathing room above the wordmark — the current logo is butted right
   up against the top of the viewport. */
html body aside.navbar-vertical .navbar-brand,
html body aside.navbar-vertical h1.navbar-brand {
    padding-top: 16px !important;
    padding-bottom: 8px !important;
}

/* And give the navbar overall a bit more top padding too */
html body aside.navbar-vertical {
    padding-top: 8px !important;
}

/* =========================================================================
   21. Page heading spacing (Fleet operations dashboard, etc.)
   ========================================================================= */

/* The h1 inferra-heading at the top of plugin pages — give it more room */
html body .page-wrapper h1.inferra-heading,
html body #page-content h1.inferra-heading {
    padding-top: 12px !important;
    padding-left: 24px !important;
    margin-bottom: 24px !important;
    font-size: 28px !important;
    font-weight: 600 !important;
    color: var(--inferra-text) !important;
}

/* Default page-content area gets a bit more left/top breathing room overall */
html body #page-content {
    padding-top: 8px !important;
}