:root {
    /* Sky & Ink palette (replaces the previous dark "Ember & Ink" theme) */
    --app-bg: #f2f6fc;
    --app-surface: #ffffff;
    --app-surface-alt: #eaf0fa;
    --app-surface-elevated: #ffffff;
    --app-border: #9fb4d9;
    --app-border-strong: #7f97c4;

    --app-accent: #123a94;
    --app-accent-hover: #0c2a70;
    --app-accent-soft: rgba(18, 58, 148, 0.10);
    --app-secondary: #0e93a8;

    --app-text: #16213a;
    --app-text-muted: #64708c;

    --app-success: #178a4c;
    --app-danger: #cf3f3f;
    --app-warning: #b9740f;

    --app-shadow: 0 1px 2px rgba(22, 33, 58, 0.06), 0 1px 1px rgba(22, 33, 58, 0.04);
    --app-shadow-hover: 0 10px 28px rgba(22, 33, 58, 0.12);

    /* Glassmorphism surface: translucent + blurred, used only on prominent chrome
       (cards, menus, sidebar) - data tables stay solid via .bg-white below for readability. */
    --app-glass-bg: rgba(255, 255, 255, 0.72);
    --app-glass-bg-strong: rgba(255, 255, 255, 0.85);
    --app-glass-border: rgba(22, 33, 58, 0.08);
    /* Kept light: backdrop-filter forces continuous recompositing of everything behind it,
       and stacking many of these (sidebar + topbar + several cards at once) with a heavy
       blur radius was expensive enough to freeze the tab on modest hardware. */
    --app-glass-blur: blur(8px);
    --app-glass-shadow: 0 8px 32px rgba(22, 33, 58, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.5);

    /* Let Bootstrap's own components (buttons, links, focus rings, cards) pick up our palette
       automatically instead of overriding every .btn-primary etc. individually. */
    --bs-primary: var(--app-accent);
    --bs-primary-rgb: 18, 58, 148;
    --bs-link-color: var(--app-accent);
    --bs-link-color-rgb: 30, 75, 199;
    --bs-link-hover-color: var(--app-accent-hover);
    --bs-body-bg: var(--app-bg);
    --bs-body-color: var(--app-text);
    --bs-border-color: var(--app-border);
    --bs-border-radius: 0.6rem;
    --bs-border-radius-sm: 0.4rem;
    --bs-border-radius-lg: 0.85rem;
    --bs-success: var(--app-success);
    --bs-danger: var(--app-danger);
    --bs-warning: var(--app-warning);
    --bs-info: var(--app-secondary);
}

body {
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    background-color: var(--app-bg);
    background-image:
        radial-gradient(circle at 12% 12%, rgba(30, 75, 199, 0.07), transparent 45%),
        radial-gradient(circle at 88% 8%, rgba(14, 147, 168, 0.06), transparent 42%);
    background-attachment: fixed;
    min-height: 100vh;
}

.navbar-brand {
    font-weight: 600;
}

table.table-hover tbody tr {
    cursor: pointer;
}

a {
    text-decoration: none;
}

.btn-primary {
    color: #fff;
    font-weight: 600;
}

.btn-primary:hover, .btn-primary:active {
    color: #fff;
}

.btn-outline-primary {
    --bs-btn-color: var(--app-accent);
    --bs-btn-border-color: var(--app-accent);
    --bs-btn-hover-bg: var(--app-accent);
    --bs-btn-hover-color: #fff;
}

/* --- App shell: sidebar + main content --- */
.app-shell {
    display: flex;
    min-height: 100vh;
    align-items: stretch;
}

.app-sidebar {
    width: 260px;
    flex: 0 0 260px;
    background-color: var(--app-glass-bg);
    -webkit-backdrop-filter: var(--app-glass-blur);
    backdrop-filter: var(--app-glass-blur);
    border-inline-start: 1px solid var(--app-glass-border);
    box-shadow: var(--app-glass-shadow);
    display: flex;
    flex-direction: column;
    padding: 0.85rem 0.75rem;
    position: sticky;
    top: 0;
    max-height: 100vh;
    overflow-y: auto;
}

.app-sidebar .sidebar-brand {
    font-weight: 700;
    font-size: 1.1rem;
    background: linear-gradient(135deg, var(--app-accent), var(--app-secondary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 0.6rem;
}

.app-sidebar .nav-link {
    color: #45516c;
    border-radius: 0.5rem;
    padding: 0.4rem 0.75rem;
    margin-bottom: 0.1rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.92rem;
    line-height: 1.3;
    border-inline-start: 3px solid transparent;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.app-sidebar .nav-link i {
    width: 1.1em;
    text-align: center;
    color: var(--app-text-muted);
    transition: color 0.15s ease;
}

.app-sidebar .nav-link:hover {
    background-color: var(--app-surface-elevated);
    color: var(--app-text);
}

.app-sidebar .nav-link:hover i {
    color: var(--app-secondary);
}

.app-sidebar .nav-link.active {
    background-color: var(--app-accent-soft);
    color: var(--app-accent);
    font-weight: 600;
    border-inline-start-color: var(--app-accent);
}

.app-sidebar .nav-link.active i {
    color: var(--app-accent);
}

.app-sidebar .nav-section-title {
    color: var(--app-text-muted);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.35rem 0.75rem 0.15rem;
}

.app-sidebar .nav-section-divider {
    border-top: 1px solid var(--app-border);
    margin: 0.35rem 0.3rem;
}

.app-sidebar .sidebar-footer {
    margin-top: auto;
    padding-top: 0.6rem;
    border-top: 1px solid var(--app-border);
    flex-shrink: 0;
}

.app-main {
    flex: 1 1 auto;
    min-width: 0;
    padding: 1.5rem;
}

.app-topbar {
    display: flex;
    background-color: var(--app-glass-bg);
    -webkit-backdrop-filter: var(--app-glass-blur);
    backdrop-filter: var(--app-glass-blur);
    border-bottom: 1px solid var(--app-glass-border);
    padding: 0.6rem 1rem;
    align-items: center;
    gap: 0.75rem;
}

.offcanvas {
    background-color: var(--app-glass-bg-strong);
    -webkit-backdrop-filter: var(--app-glass-blur);
    backdrop-filter: var(--app-glass-blur);
    border-inline-end: 1px solid var(--app-glass-border);
}

.dropdown-menu {
    background-color: var(--app-glass-bg-strong);
    -webkit-backdrop-filter: var(--app-glass-blur);
    backdrop-filter: var(--app-glass-blur);
    border: 1px solid var(--app-glass-border);
    box-shadow: var(--app-glass-shadow);
}

@media (max-width: 991.98px) {
    .app-sidebar { display: none; }
}

/* --- KPI cards (dashboard) --- */
/* No backdrop-filter here on purpose: several of these render on screen at once
   (one per stat), and stacking that many blur layers is what caused the freeze -
   translucent-but-unblurred still reads as "glass" next to the blurred chrome. */
.kpi-card {
    background-color: var(--app-glass-bg);
    border: 1px solid var(--app-glass-border);
    border-radius: 0.85rem;
    padding: 1.1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 100%;
    box-shadow: var(--app-glass-shadow);
    transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.kpi-card:hover {
    box-shadow: var(--app-shadow-hover), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transform: translateY(-2px);
    background-color: var(--app-glass-bg-strong);
    border-color: var(--app-border-strong);
}

.kpi-card .kpi-icon {
    width: 46px;
    height: 46px;
    border-radius: 0.7rem;
    background: linear-gradient(135deg, var(--app-accent-soft), rgba(14, 147, 168, 0.14));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: var(--app-accent);
    flex-shrink: 0;
}

.kpi-card .kpi-value {
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--app-text);
}

.kpi-card .kpi-label {
    color: var(--app-text-muted);
    font-size: 0.85rem;
}

/* No backdrop-filter here on purpose: a page can have half a dozen .card elements
   on screen at once (complaint, diagnosis, parts, labor, ...), and stacking that
   many blur layers is what caused the whole tab to freeze when a modal opened.
   Translucent-but-unblurred still reads as "glass" next to the blurred chrome. */
.card {
    background-color: var(--app-glass-bg);
    border: 1px solid var(--app-glass-border);
    box-shadow: var(--app-glass-shadow);
}

.card-title {
    color: var(--app-text);
}

.modal-content {
    background-color: var(--app-glass-bg-strong);
    -webkit-backdrop-filter: var(--app-glass-blur);
    backdrop-filter: var(--app-glass-blur);
    border: 1px solid var(--app-glass-border);
    box-shadow: var(--app-glass-shadow);
}

/* Browsers without backdrop-filter support (or with it disabled) fall back to a solid surface
   instead of a see-through panel with unreadable text on top of the body's gradient. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .app-sidebar, .app-topbar, .offcanvas, .dropdown-menu, .modal-content {
        background-color: var(--app-surface);
    }
}

.btn {
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}

.btn:active {
    transform: translateY(1px);
}

/* A tinted fill (not just a border) so a field reads as its own box against the page background,
   even at a glance - border color alone wasn't enough contrast on its own. */
.form-control, .form-select {
    background-color: var(--app-surface-alt);
}

.form-control:focus, .form-select:focus {
    background-color: var(--app-surface);
    border-color: var(--app-accent);
    box-shadow: 0 0 0 0.2rem var(--app-accent-soft);
}

.table {
    --bs-table-bg: transparent;
}

/* Many pages hardcode Bootstrap's light-theme "bg-white" utility on tables/cards;
   override it here instead of touching every template. */
.bg-white {
    background-color: var(--app-surface) !important;
    color: var(--app-text);
}

/* Same issue as .bg-white - the calendar's "other month" day cells use this light-theme utility. */
.bg-light {
    background-color: var(--app-surface-alt) !important;
    color: var(--app-text-muted) !important;
}