@import url("https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");

/* =====================================================================
   RouteCraft Brand Identity
   Background (Off-White): #F8FAFC
   Surface (White):        #FFFFFF
   Text & Headers:         #09090B
   Accent (Route Amber):   #FF6B00
   Secondary/Borders:      #E2E8F0
   Fonts: Plus Jakarta Sans (headers), Inter (UI/data)
   ===================================================================== */

:root,
[data-bs-theme=light] {
    /* Primary brand — Route Amber */
    --theme-primary: #FF6B00;
    --theme-primary-rgb: 255, 107, 0;
    --theme-primary-text-emphasis: #cc5600;
    --theme-primary-border-subtle: #ffc399;
    --theme-primary-bg-subtle: #fff0e6;

    /* Secondary — Pitch Black */
    --theme-secondary: #09090B;
    --theme-secondary-rgb: 9, 9, 11;

    /* Links */
    --theme-link-color: #FF6B00;
    --theme-link-hover-color: #cc5600;

    /* Success */
    --theme-success: #10B981;
    --theme-success-rgb: 16, 185, 129;

    /* Focus ring */
    --theme-focus-ring-color: rgba(255, 107, 0, 0.25);

    /* Fonts */
    --theme-font-sans-serif: "Inter", sans-serif;
    --theme-body-font-family: "Inter", sans-serif;

    /* Body background — Off-White canvas */
    --theme-body-bg: #F8FAFC;

    /* Borders */
    --theme-border-color: #E2E8F0;

    /* Sidebar */
    --theme-sidenav-bg: #ffffff;
    --theme-sidenav-border-color: #E2E8F0;
    --theme-sidenav-item-color: #6c757d;
    --theme-sidenav-item-hover-color: #FF6B00;
    --theme-sidenav-item-hover-bg: rgba(255, 107, 0, 0.10);
    --theme-sidenav-item-active-color: #FF6B00;
    --theme-sidenav-item-active-bg: rgba(255, 107, 0, 0.10);

    /* Topbar */
    --theme-topbar-bg: #ffffff;
    --theme-topbar-border-color: #E2E8F0;
    --theme-topbar-item-color: #6c757d;
    --theme-topbar-item-hover-color: #FF6B00;
}

/* ---- Base ---- */
body {
    font-family: "Inter", sans-serif;
    background-color: #F8FAFC;
    color: #09090B;
}

/* ---- Typography ---- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.ibox-title h5,
.card-header h5 {
    font-family: "Plus Jakarta Sans", sans-serif;
    color: #09090B;
}

/* Numeric data — right-aligned, tabular */
.numeric-value,
td.numeric,
.e-grid .e-rowcell.e-numericcell {
    text-align: right;
    font-family: "Inter", sans-serif;
    font-variant-numeric: tabular-nums;
}

/* ---- Sidebar skin overrides ---- */
html[data-skin=minimal][data-menu-color=gray],
html[data-skin=minimal][data-menu-color=light],
html[data-skin=minimal][data-menu-color=dark] {
    --theme-sidenav-bg: #ffffff;
    --theme-sidenav-border-color: #E2E8F0;
    --theme-sidenav-item-color: #6c757d;
    --theme-sidenav-item-hover-color: #FF6B00;
    --theme-sidenav-item-hover-bg: rgba(255, 107, 0, 0.10);
    --theme-sidenav-item-active-color: #FF6B00;
    --theme-sidenav-item-active-bg: rgba(255, 107, 0, 0.10);
}

/* ---- Topbar skin overrides ---- */
html[data-skin=minimal][data-topbar-color=light],
html[data-skin=minimal][data-topbar-color=gray],
html[data-skin=minimal][data-topbar-color=dark] {
    --theme-topbar-bg: #ffffff;
    --theme-topbar-item-color: #6c757d;
    --theme-topbar-item-hover-color: #FF6B00;
}

/* ---- ibox panels — white surface on off-white canvas ---- */
.ibox {
    background-color: #ffffff;
    border: 1px solid #E2E8F0;
    border-radius: 0.5rem;
}

.ibox-title {
    background-color: #ffffff;
    border-bottom: 1px solid #E2E8F0;
    padding: 0.875rem 1.25rem;
}

.ibox-title h5 {
    margin-bottom: 0;
    font-weight: 600;
}

.ibox-content {
    background-color: #ffffff;
    border-radius: 0 0 0.5rem 0.5rem;
    padding: 1.25rem;
}

/* ---- Bootstrap cards — same white surface ---- */
.card {
    background-color: #ffffff;
    border: 1px solid #E2E8F0;
    border-radius: 0.5rem;
}

.card-header {
    background-color: #ffffff;
    border-bottom: 1px solid #E2E8F0;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 600;
    color: #09090B;
    padding: 0.875rem 1.25rem;
}

.card-body {
    background-color: #ffffff;
}

/* ---- Buttons ---- */
.btn-primary {
    background-color: #FF6B00;
    border-color: #FF6B00;
    color: #ffffff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:focus-visible {
    background-color: #cc5600 !important;
    border-color: #cc5600 !important;
    color: #ffffff !important;
}

.btn-outline-primary {
    color: #FF6B00;
    border-color: #FF6B00;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: #FF6B00;
    border-color: #FF6B00;
    color: #ffffff;
}

/* ---- Form controls ---- */
.form-control:focus,
.form-select:focus {
    border-color: #FF6B00;
    box-shadow: 0 0 0 0.2rem rgba(255, 107, 0, 0.20);
}

/* ---- Active nav item indicator ---- */
.side-nav .side-nav-link.active,
.side-nav .active > .side-nav-link {
    color: #FF6B00 !important;
}

.side-nav .side-nav-link.active::before,
.side-nav .active > .side-nav-link::before {
    background-color: #FF6B00;
}

/* ---- Sidebar toggle button ---- */
.sidenav-toggle-button.btn-primary {
    background-color: #FF6B00;
    border-color: #FF6B00;
}

/* ---- Auth pages ---- */
.auth-box {
    min-height: 100vh;
    background-color: #F8FAFC;
}

.auth-box .card {
    box-shadow: 0 4px 24px rgba(9, 9, 11, 0.08);
}

/* ---- PageBreadcrumb / page-title ---- */
.page-title-box .page-title {
    font-family: "Plus Jakarta Sans", sans-serif;
    color: #09090B;
    font-weight: 700;
}

/* ---- Syncfusion Grid — header row accent ---- */
.e-grid .e-headercell {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 600;
    color: #09090B;
}

/* ---- Footer ---- */
.footer {
    border-top: 1px solid #E2E8F0;
    background-color: #ffffff;
}