/* ═══════════════════════════════════════════════════════════════
   HPRE — Horizon Design System
   FleetCore360 language · Sora + IBM Plex Mono
   Bright sidebar rail · cool workspace · signal cyan accent
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* Surfaces */
    --hpre-bg:    #f0f3f7;
    --hpre-sur:   #f7f9fc;
    --hpre-sur2:  #ffffff;
    --hpre-sur3:  #eef2f7;

    /* Borders */
    --hpre-bdr:   #dde3ea;
    --hpre-bdr2:  #e8edf3;

    /* Text */
    --hpre-txt:   #121a26;
    --hpre-txt2:  #3d4f63;
    --hpre-mut:   #6b7a8d;
    --hpre-mut2:  #9aa8b8;

    /* Ink — auth & emphasis panels */
    --hpre-ink:        #0c1018;
    --hpre-ink-2:      #141b27;
    --hpre-ink-3:      #1c2636;
    --hpre-ink-border: rgba(255,255,255,.08);

    /* Signal — primary accent */
    --hpre-signal:      #00b4d8;
    --hpre-signal-dk:   #0096c7;
    --hpre-signal-glow: rgba(0,180,216,.22);
    --hpre-signal-soft: rgba(0,180,216,.12);

    /* Semantic */
    --hpre-success: #2dc653;
    --hpre-success-dk: #1a8f3a;
    --hpre-warning: #ffb627;
    --hpre-warning-dk: #9a6b00;
    --hpre-danger:  #e63946;
    --hpre-danger-dk: #b81e2d;
    --hpre-info:    #4a6fa5;
    --hpre-alert:   #ff6b35;

    /* Layout — tbh matches theme .header-item height (70px) */
    --hpre-sw:  248px;
    --hpre-tbh: 70px;
    --hpre-content-offset: calc(var(--hpre-tbh) + 1.25rem);
    --hpre-tr:  0.2s cubic-bezier(.4,0,.2,1);
    --hpre-rad: 10px;
    --hpre-rad-sm: 6px;

    /* Typography */
    --hpre-font: 'Sora', system-ui, sans-serif;
    --hpre-mono: 'IBM Plex Mono', ui-monospace, monospace;

    /* Bootstrap remaps */
    --bs-body-font-family: var(--hpre-font);
    --bs-body-color: var(--hpre-txt);
    --bs-body-bg: var(--hpre-bg);
    --bs-primary: var(--hpre-signal);
    --bs-primary-rgb: 0, 180, 216;
    --bs-border-color: var(--hpre-bdr);
    --bs-link-color: var(--hpre-signal-dk);
    --bs-link-hover-color: #007a96;
}

/* ── Base ───────────────────────────────────────────────────── */
html { scrollbar-width: thin; scrollbar-color: #c5ced8 var(--hpre-bg); }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-thumb { background: #c5ced8; border-radius: 4px; }

body {
    font-family: var(--hpre-font) !important;
    background: var(--hpre-bg) !important;
    color: var(--hpre-txt) !important;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

code, kbd, pre, .font-monospace,
.hpre-mono, .hpre-reg {
    font-family: var(--hpre-mono) !important;
    font-variant-numeric: tabular-nums;
}

.hpre-eyebrow {
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--hpre-mut);
}

/* ── App shell (sidebar rail + in-flow sticky topbar) ───────── */
body:not(.hpre-login-page) {
    padding: 0 !important;
    margin: 0 !important;
    overflow-x: hidden;
}

/*
 * Velzon uses a fixed #page-topbar; padding hacks are fragile in detached mode.
 * FleetCore Horizon pattern: topbar lives in document flow (sticky), so content
 * always starts below it — no overlap with the welcome banner or page headers.
 */
html[data-layout="vertical"][data-layout-style="detached"] #layout-wrapper,
#layout-wrapper {
    display: flex !important;
    flex-direction: column !important;
    max-width: none !important;
    width: auto !important;
    margin: 0 0 0 var(--hpre-sw) !important;
    padding: 0 !important;
    min-height: 100vh;
}

/* Sticky topbar — in flow above .main-content, not fixed over it */
html[data-layout="vertical"][data-layout-style="detached"] #page-topbar,
#page-topbar {
    position: sticky !important;
    top: 0 !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    height: var(--hpre-tbh) !important;
    flex-shrink: 0;
    z-index: 1040 !important;
}

html[data-layout="vertical"][data-layout-style="detached"] .main-content,
.main-content {
    flex: 1 1 auto;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0;
    width: 100% !important;
    position: relative !important;
}

html[data-layout="vertical"][data-layout-style="detached"] .main-content > .page-content,
.main-content > .page-content,
.page-content {
    background: var(--hpre-bg) !important;
    padding: 1.25rem 1.25rem 1.5rem 1.25rem !important;
    margin: 0 !important;
    min-height: calc(100vh - var(--hpre-tbh) - 2.5rem);
}

.main-content .container-fluid {
    max-width: 1500px;
}

/* ── Cards & tables ─────────────────────────────────────────── */
.card {
    background: var(--hpre-sur2) !important;
    border: 1px solid var(--hpre-bdr) !important;
    border-radius: var(--hpre-rad) !important;
    box-shadow: 0 1px 3px rgba(12,16,24,.05) !important;
}

.card-header {
    background: var(--hpre-sur) !important;
    border-bottom: 1px solid var(--hpre-bdr2) !important;
}

.table thead th {
    background: var(--hpre-sur) !important;
    font-size: .68rem !important;
    text-transform: uppercase;
    font-weight: 700 !important;
    letter-spacing: .06em;
    color: var(--hpre-mut) !important;
    border-bottom: 1px solid var(--hpre-bdr) !important;
}

.table tbody td {
    border-bottom-color: var(--hpre-bdr2) !important;
    color: var(--hpre-txt2);
    font-size: .84rem;
}

.table-hover tbody tr:hover td {
    background: var(--hpre-sur) !important;
}

/* ── Forms ──────────────────────────────────────────────────── */
.form-control, .form-select {
    background: #fff !important;
    border: 1px solid var(--hpre-bdr) !important;
    border-radius: var(--hpre-rad-sm) !important;
    color: var(--hpre-txt2) !important;
    font-size: .82rem !important;
    font-family: var(--hpre-font) !important;
}

.form-control:focus, .form-select:focus {
    border-color: rgba(0,180,216,.5) !important;
    box-shadow: 0 0 0 3px var(--hpre-signal-soft) !important;
    color: var(--hpre-txt) !important;
}

.form-label {
    font-size: .72rem !important;
    font-weight: 600 !important;
    color: var(--hpre-txt2) !important;
    letter-spacing: .2px;
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn-primary {
    background: linear-gradient(135deg, var(--hpre-signal), var(--hpre-signal-dk)) !important;
    border-color: var(--hpre-signal-dk) !important;
    font-weight: 600;
    box-shadow: 0 4px 14px var(--hpre-signal-glow);
}

.btn-primary:hover, .btn-primary:focus {
    background: linear-gradient(135deg, var(--hpre-signal-dk), #007a96) !important;
    border-color: #007a96 !important;
    transform: translateY(-1px);
}

.btn-soft-primary, .btn-soft-info {
    background: var(--hpre-signal-soft) !important;
    color: var(--hpre-signal-dk) !important;
    border: 1px solid rgba(0,180,216,.18) !important;
}

.text-primary { color: var(--hpre-signal-dk) !important; }
.bg-primary { background-color: var(--hpre-signal) !important; }

.badge.bg-success, .bg-success { background-color: var(--hpre-success) !important; }
.badge.bg-warning, .bg-warning { background-color: var(--hpre-warning) !important; color: var(--hpre-warning-dk) !important; }
.badge.bg-danger, .bg-danger { background-color: var(--hpre-danger) !important; }

/* ── KPI / quick-action patterns (used across pages) ───────── */
.kpi-card, .filter-bar, .detail-card, .form-card {
    background: var(--hpre-sur2) !important;
    border: 1px solid var(--hpre-bdr) !important;
    border-radius: var(--hpre-rad) !important;
    box-shadow: 0 1px 3px rgba(12,16,24,.05) !important;
}

.kpi-value, .ps-val {
    font-family: var(--hpre-mono) !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.5px;
}

.qa-btn.qa-primary {
    background: var(--hpre-signal-soft) !important;
    color: var(--hpre-signal-dk) !important;
    border-color: rgba(0,180,216,.25) !important;
}

.qa-btn.qa-success {
    background: rgba(45,198,83,.12) !important;
    color: var(--hpre-success-dk) !important;
    border-color: rgba(45,198,83,.22) !important;
}

.qa-btn.qa-warning {
    background: rgba(255,182,39,.14) !important;
    color: var(--hpre-warning-dk) !important;
    border-color: rgba(255,182,39,.28) !important;
}

.qa-btn.qa-danger {
    background: rgba(230,57,70,.12) !important;
    color: var(--hpre-danger-dk) !important;
    border-color: rgba(230,57,70,.22) !important;
}

.qa-btn.qa-info {
    background: rgba(74,111,165,.12) !important;
    color: var(--hpre-info) !important;
    border-color: rgba(74,111,165,.22) !important;
}

.qa-btn.qa-muted {
    background: var(--hpre-sur) !important;
    color: var(--hpre-txt2) !important;
    border-color: var(--hpre-bdr) !important;
}

.welcome-banner {
    background: linear-gradient(120deg, var(--hpre-ink) 0%, var(--hpre-ink-2) 45%, #1a3a4a 100%) !important;
}

.welcome-banner .btn[style*="background:#fff"] {
    background: #fff !important;
    color: var(--hpre-signal-dk) !important;
}

/* ── TOPBAR ───────────────────────────────────────────────── */
#page-topbar {
    background: var(--hpre-sur2) !important;
    border-bottom: 1px solid var(--hpre-bdr) !important;
    box-shadow: 0 1px 0 rgba(12,16,24,.04);
}

#page-topbar .navbar-header {
    min-height: var(--hpre-tbh) !important;
    height: var(--hpre-tbh) !important;
    padding: 0 1.25rem !important;
}

#page-topbar .header-item,
#page-topbar .topbar-user .btn {
    height: var(--hpre-tbh) !important;
}

/* Brand lives in the sidebar — keep topbar for user actions only */
#page-topbar .horizontal-logo {
    display: none !important;
}

#page-topbar .vertical-menu-btn {
    display: none !important;
}

#page-topbar .logo span[style*="font-weight:700"] {
    font-family: var(--hpre-font) !important;
    color: var(--hpre-txt) !important;
    font-weight: 800 !important;
    letter-spacing: -.3px !important;
}

#page-topbar .logo span[style*="text-transform:uppercase"] {
    color: var(--hpre-mut2) !important;
    letter-spacing: 1.4px !important;
    font-size: .52rem !important;
}

#page-topbar .logo span[style*="background:#3b82f6"],
#page-topbar .logo span[style*="background: #3b82f6"] {
    background: linear-gradient(135deg, var(--hpre-signal), var(--hpre-signal-dk)) !important;
    box-shadow: 0 4px 12px var(--hpre-signal-glow);
    border-radius: 8px !important;
}

#page-topbar .avatar-xs.bg-primary,
#page-topbar .rounded-circle.bg-primary {
    background: linear-gradient(135deg, var(--hpre-signal), var(--hpre-info)) !important;
    border-radius: 8px !important;
}

#page-topbar .fw-semibold { color: var(--hpre-txt2) !important; font-weight: 600 !important; }
#page-topbar .text-muted { color: var(--hpre-mut) !important; }

#page-topbar .layout-width,
#page-topbar .navbar-header {
    width: 100%;
    height: 100%;
}

#page-topbar .navbar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ── SIDEBAR (bright rail) ────────────────────────────────── */
#hpre-sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--hpre-sw);
    z-index: 1050;
    display: flex;
    flex-direction: column;
    background: var(--hpre-sur2);
    border-right: 1px solid var(--hpre-bdr);
    box-shadow: 1px 0 8px rgba(12,16,24,.04);
    overflow: hidden;
}

#hpre-sidebar .sb-brand {
    flex-shrink: 0;
    height: var(--hpre-tbh);
    display: flex;
    align-items: center;
    padding: 0 16px;
    border-bottom: 1px solid var(--hpre-bdr);
    background: var(--hpre-sur);
    text-decoration: none;
}

#hpre-sidebar .sb-brand .sb-logo-icon {
    width: 32px; height: 32px;
    background: linear-gradient(135deg, var(--hpre-signal), var(--hpre-signal-dk));
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: .95rem; font-weight: 800; color: #fff;
    flex-shrink: 0;
    box-shadow: 0 4px 12px var(--hpre-signal-glow);
}

#hpre-sidebar .sb-brand .sb-logo-text { margin-left: 10px; line-height: 1.2; overflow: hidden; }
#hpre-sidebar .sb-brand .sb-logo-text strong {
    display: block;
    font-size: .9rem; font-weight: 800; color: var(--hpre-txt);
    letter-spacing: -.4px;
}
#hpre-sidebar .sb-brand .sb-logo-text small {
    font-size: .5rem; color: var(--hpre-mut2);
    text-transform: uppercase; letter-spacing: 1.8px;
}

#hpre-sidebar .sb-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    height: 0;
    padding: 6px 8px 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--hpre-bdr) transparent;
}

#hpre-sidebar .sb-section {
    padding: 12px 12px 4px;
    font-size: .52rem; font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--hpre-mut2);
    user-select: none;
}

#hpre-sidebar a.sb-link {
    display: flex; align-items: center; gap: 10px;
    margin: 2px 0; padding: 8px 12px;
    border-radius: var(--hpre-rad-sm);
    font-size: .78rem; font-weight: 500;
    color: var(--hpre-txt2);
    text-decoration: none;
    position: relative;
    border: 1px solid transparent;
    transition: color var(--hpre-tr), background var(--hpre-tr), border-color var(--hpre-tr);
}

#hpre-sidebar a.sb-link i {
    font-size: .92rem; flex-shrink: 0; width: 18px; text-align: center;
    color: var(--hpre-mut);
    transition: color var(--hpre-tr);
}

#hpre-sidebar a.sb-link:hover {
    background: var(--hpre-sur);
    color: var(--hpre-txt);
}

#hpre-sidebar a.sb-link:hover i { color: var(--hpre-txt2); }

#hpre-sidebar a.sb-link.active {
    background: var(--hpre-signal-soft);
    color: var(--hpre-txt);
    font-weight: 600;
    border-color: rgba(0,180,216,.18);
}

#hpre-sidebar a.sb-link.active::before {
    content: '';
    position: absolute; left: 0; top: 6px; bottom: 6px;
    width: 3px; background: var(--hpre-signal);
    border-radius: 0 3px 3px 0;
    box-shadow: 0 0 8px var(--hpre-signal-glow);
}

#hpre-sidebar a.sb-link.active i { color: var(--hpre-signal-dk); }

#hpre-sidebar .sb-dd-toggle {
    display: flex; align-items: center; gap: 10px;
    width: 100%; margin: 2px 0; padding: 8px 12px;
    border-radius: var(--hpre-rad-sm);
    font-size: .78rem; font-weight: 500;
    color: var(--hpre-txt2);
    background: none; border: 1px solid transparent;
    cursor: pointer; text-align: left;
    position: relative;
    transition: color var(--hpre-tr), background var(--hpre-tr);
    font-family: var(--hpre-font);
}

#hpre-sidebar .sb-dd-toggle i.sb-icon {
    font-size: .92rem; flex-shrink: 0; width: 18px; text-align: center;
    color: var(--hpre-mut);
}

#hpre-sidebar .sb-dd-toggle .sb-chevron {
    font-size: .6rem; color: var(--hpre-mut2);
    transition: transform .2s ease;
}

#hpre-sidebar .sb-dd-toggle:hover { background: var(--hpre-sur); color: var(--hpre-txt); }
#hpre-sidebar .sb-dd-toggle.open .sb-chevron { transform: rotate(90deg); }
#hpre-sidebar .sb-dd-toggle.has-active { color: var(--hpre-txt); font-weight: 600; }
#hpre-sidebar .sb-dd-toggle.has-active::before {
    content: '';
    position: absolute; left: 0; top: 6px; bottom: 6px;
    width: 3px; background: var(--hpre-signal);
    border-radius: 0 3px 3px 0;
}

#hpre-sidebar .sb-children {
    display: none;
    list-style: none; margin: 0;
    padding: 2px 0 4px 36px;
    background: transparent;
}

#hpre-sidebar .sb-children.open { display: block; }

#hpre-sidebar .sb-children li a {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px;
    font-size: .73rem; font-weight: 400;
    color: var(--hpre-mut);
    text-decoration: none;
    border-radius: var(--hpre-rad-sm);
    transition: color var(--hpre-tr), background var(--hpre-tr);
}

#hpre-sidebar .sb-children li a::before {
    content: '';
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--hpre-bdr);
    flex-shrink: 0;
}

#hpre-sidebar .sb-children li a:hover { color: var(--hpre-txt2); background: var(--hpre-sur); }
#hpre-sidebar .sb-children li a.active { color: var(--hpre-txt); font-weight: 600; }
#hpre-sidebar .sb-children li a.active::before { background: var(--hpre-signal); }

#hpre-sidebar .sb-logout {
    flex-shrink: 0;
    padding: 12px 14px;
    border-top: 1px solid var(--hpre-bdr);
    background: var(--hpre-sur);
}

#hpre-sidebar .sb-logout a {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    font-size: .78rem; font-weight: 500;
    color: var(--hpre-mut);
    border-radius: var(--hpre-rad-sm);
    text-decoration: none;
    transition: background var(--hpre-tr), color var(--hpre-tr);
}

#hpre-sidebar .sb-logout a:hover {
    background: rgba(230,57,70,.1);
    color: var(--hpre-danger);
}

/* ── LOGIN PAGE ───────────────────────────────────────────── */
body.hpre-login-page {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: var(--hpre-ink) !important;
}

body.hpre-login-page #page-topbar,
body.hpre-login-page #hpre-sidebar {
    display: none !important;
}

.hpre-login-wrapper {
    display: flex;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    background: var(--hpre-bg);
}

.hpre-panel {
    width: 55%;
    height: 100vh;
    max-height: 100vh;
    background: var(--hpre-ink);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 32px 40px;
    position: relative;
    overflow: hidden;
}

.hpre-panel::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 80% 10%, var(--hpre-signal-glow) 0%, transparent 45%),
        linear-gradient(rgba(0,180,216,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,180,216,.06) 1px, transparent 1px);
    background-size: auto, 36px 36px, 36px 36px;
    pointer-events: none;
}

.hpre-panel > * { position: relative; z-index: 1; }

.hpre-wordmark-icon {
    background: linear-gradient(135deg, var(--hpre-signal), var(--hpre-signal-dk)) !important;
    box-shadow: 0 4px 16px var(--hpre-signal-glow);
}

.hpre-hero h1 em,
.hpre-flow-node.center-node {
    color: var(--hpre-signal) !important;
}

.hpre-flow-node.center-node {
    background: linear-gradient(135deg, var(--hpre-signal), var(--hpre-signal-dk)) !important;
    border-color: transparent !important;
}

.hpre-feature-dot {
    background: var(--hpre-signal-soft) !important;
    color: var(--hpre-signal) !important;
}

.hpre-form-panel {
    width: 45%;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 40px;
    background: var(--hpre-sur2);
}

.hpre-form-header h2 {
    font-weight: 800;
    letter-spacing: -.4px;
    color: var(--hpre-txt);
}

.hpre-form-group .form-control:focus {
    border-color: var(--hpre-signal) !important;
    box-shadow: 0 0 0 3px var(--hpre-signal-soft) !important;
}

.btn-hpre-signin {
    width: 100%;
    height: 46px;
    background: linear-gradient(135deg, var(--hpre-signal), var(--hpre-signal-dk));
    color: #fff;
    border: none;
    border-radius: var(--hpre-rad-sm);
    font-family: var(--hpre-font);
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform var(--hpre-tr), box-shadow var(--hpre-tr);
    display: flex; align-items: center; justify-content: center; gap: 8px;
    box-shadow: 0 4px 14px var(--hpre-signal-glow);
}

.btn-hpre-signin:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px var(--hpre-signal-glow);
}

@media (max-width: 900px) {
    .hpre-panel { display: none; }
    .hpre-form-panel { width: 100%; }
}