/* ---------------------------------------------------------------
   Eng-Auto modern theme
   Layered on top of Bootstrap 5.3 — overrides tokens + key
   components without touching individual view markup.
----------------------------------------------------------------*/

:root {
    --brand-50:  #eef2ff;
    --brand-100: #e0e7ff;
    --brand-200: #c7d2fe;
    --brand-400: #818cf8;
    --brand-500: #6366f1;
    --brand-600: #4f46e5;
    --brand-700: #4338ca;
    --brand-gradient: linear-gradient(135deg, #4f46e5 0%, #6366f1 55%, #818cf8 100%);

    --ink-900: #0f1424;
    --ink-800: #171d33;
    --ink-700: #232a45;

    --surface:      #f3f4f9;
    --surface-card: #ffffff;
    --surface-input: #f8fafc;
    --border-color: #dde1ec;
    --border-color-strong: #b6bcd1;
    --text-main:    #1e2233;
    --text-muted:   #6b7186;
    --text-strong:  #0f1424;

    --success: #16a34a;
    --warning: #d97706;
    --danger:  #dc2626;

    --radius-sm: .6rem;
    --radius-md: .9rem;
    --radius-lg: 1.25rem;

    --shadow-xs: 0 1px 2px rgba(15, 20, 36, .05);
    --shadow-sm: 0 2px 6px rgba(15, 20, 36, .06), 0 1px 2px rgba(15, 20, 36, .05);
    --shadow-md: 0 12px 28px -10px rgba(15, 20, 36, .16);
    --shadow-lg: 0 24px 48px -16px rgba(15, 20, 36, .22);

    /* Bootstrap root tokens that DO cascade */
    --bs-body-bg: var(--surface);
    --bs-body-color: var(--text-main);
    --bs-body-font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --bs-link-color-rgb: 79, 70, 229;
    --bs-link-hover-color-rgb: 67, 56, 202;
    --bs-border-color: var(--border-color);
    --bs-border-radius: var(--radius-sm);
    --bs-border-radius-sm: .5rem;
    --bs-border-radius-lg: var(--radius-md);
    --bs-emphasis-color-rgb: 15, 20, 36;
}

* { scrollbar-width: thin; }

body {
    background: var(--surface);
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
    -webkit-font-smoothing: antialiased;
    letter-spacing: -.005em;
}

h1, h2, h3, h4, h5, h6 { letter-spacing: -.02em; }

a { transition: color .15s ease; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c7cbdb; border-radius: 999px; border: 2px solid var(--surface); }
::-webkit-scrollbar-thumb:hover { background: #a0a6bd; }

/* ---------- Layout shell ---------- */

.sidebar {
    min-height: 100vh;
    background: linear-gradient(180deg, var(--ink-900) 0%, var(--ink-800) 100%) !important;
    box-shadow: var(--shadow-lg);
    position: sticky;
    top: 0;
}

.sidebar .brand {
    font-family: 'Inter', sans-serif;
    letter-spacing: -.01em;
}

.brand-logo-plate {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: #fff;
    border-radius: .65rem;
    padding: .5rem 1rem;
    box-shadow: 0 4px 12px -2px rgba(0, 0, 0, .35);
}

.brand-logo-img {
    height: 80px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.sidebar .nav-link {
    color: rgba(226, 232, 240, .68);
    font-size: .9rem;
    font-weight: 500;
    padding: .6rem .85rem;
    border-radius: .65rem;
    transition: background-color .18s ease, color .18s ease, transform .15s ease;
}

.sidebar .nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, .07);
    transform: translateX(2px);
}

[dir="rtl"] .sidebar .nav-link:hover { transform: translateX(-2px); }

.sidebar .nav-link.active {
    color: #fff;
    background: var(--brand-gradient);
    box-shadow: 0 6px 16px -4px rgba(99, 102, 241, .55);
}

.sidebar .nav-link i {
    width: 1.15rem;
    text-align: center;
    opacity: .95;
}

/* ---------- Topbar ---------- */

.navbar.bg-white {
    background: rgba(255, 255, 255, .92) !important;
    backdrop-filter: saturate(180%) blur(6px);
    box-shadow: 0 1px 0 var(--border-color);
    position: sticky;
    top: 0;
    z-index: 1020;
}

/* ---------- Cards ---------- */

.card {
    background: var(--surface-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm) !important;
    transition: box-shadow .2s ease, transform .2s ease;
}

.card-header {
    background: var(--surface-card);
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    color: var(--text-main);
    border-top-left-radius: var(--radius-md) !important;
    border-top-right-radius: var(--radius-md) !important;
}

.card .fs-2.fw-bold {
    font-family: 'Inter', sans-serif;
    letter-spacing: -.03em;
}

/* Stat cards on dashboards: icon chip + accent bar */
.stat-card {
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--brand-gradient);
}

.stat-card .stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .75rem;
    background: var(--brand-50);
    color: var(--brand-600);
    font-size: 1.15rem;
}

.text-total-value {
    color: var(--brand-600);
    font-weight: 700;
}

/* Bold gradient KPI cards (dashboard headline stats) */
.grad-card {
    color: #fff;
    border: none !important;
}

.grad-card .grad-card-label {
    font-size: .95rem;
    font-weight: 600;
    opacity: .95;
}

/* Dashboard-scoped text sizing (kept local to the dashboard, not global .small/.text-secondary) */
.dash-label {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-main);
}

.dash-value {
    font-size: 2.35rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

.dash-row-label { font-size: 1rem; font-weight: 600; }
.dash-row-value { font-size: 1rem; font-weight: 700; }

/* ---------- Profit breakdown (reports page) ---------- */

.profit-breakdown { display: flex; flex-direction: column; gap: .15rem; }

.profit-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .6rem .5rem;
    font-size: .95rem;
    color: var(--text-muted, #6b7186);
    border-radius: .6rem;
    transition: background-color .15s ease;
}

.profit-row:hover { background: var(--surface-hover, rgba(99, 102, 241, .06)); }

.profit-row-label { display: flex; align-items: center; gap: .65rem; }

.profit-row-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    font-size: .9rem;
    flex-shrink: 0;
}

.profit-icon-in { background: rgba(16, 185, 129, .12); color: #10b981; }
.profit-icon-out { background: rgba(239, 68, 68, .12); color: #ef4444; }
.profit-icon-neutral { background: rgba(99, 102, 241, .12); color: #6366f1; }

.profit-row-subtotal {
    margin: .1rem 0 .3rem;
    padding-top: .6rem;
    padding-bottom: .6rem;
    border-top: 1px dashed var(--surface-border, rgba(0, 0, 0, .12));
    font-size: .85rem;
    font-weight: 600;
    color: var(--text-strong);
}

.profit-row-subtotal:hover { background: none; }

.profit-row .profit-row-value { font-weight: 600; font-variant-numeric: tabular-nums; }

.profit-row-total {
    margin-top: .4rem;
    padding: 1rem .75rem;
    border-radius: .75rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, .08), rgba(99, 102, 241, .02));
    border: 1px solid var(--surface-border, rgba(0, 0, 0, .08));
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-strong);
}

.profit-row-total:hover { background: linear-gradient(135deg, rgba(99, 102, 241, .08), rgba(99, 102, 241, .02)); }

.profit-row-total .profit-row-value { font-size: 1.4rem; font-weight: 800; }

.grad-card canvas { opacity: .9; }

.grad-purple { background: linear-gradient(135deg, #4338ca 0%, #6366f1 100%) !important; }
.grad-blue   { background: linear-gradient(135deg, #0369a1 0%, #38bdf8 100%) !important; }
.grad-orange { background: linear-gradient(135deg, #c2410c 0%, #fb923c 100%) !important; }
.grad-red    { background: linear-gradient(135deg, #b91c1c 0%, #f87171 100%) !important; }

/* Fixed-height chart containers — required so Chart.js (responsive + maintainAspectRatio:false)
   has a bounded parent instead of growing unbounded. */
.chart-sparkline { position: relative; height: 40px; width: 100%; }
.chart-sparkline canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }

.chart-trend { position: relative; height: 260px; width: 100%; }
.chart-trend canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }

/* ---------- Buttons ---------- */

.btn {
    font-weight: 500;
    border-radius: var(--radius-sm);
    letter-spacing: .003em;
    transition: transform .12s ease, box-shadow .12s ease, background-color .15s ease, border-color .15s ease;
}

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

.btn-primary {
    --bs-btn-bg: var(--brand-600);
    --bs-btn-border-color: var(--brand-600);
    --bs-btn-hover-bg: var(--brand-700);
    --bs-btn-hover-border-color: var(--brand-700);
    --bs-btn-active-bg: var(--brand-700);
    --bs-btn-active-border-color: var(--brand-700);
    --bs-btn-focus-shadow-rgb: 79, 70, 229;
    box-shadow: 0 4px 12px -3px rgba(79, 70, 229, .45);
}

.btn-outline-primary {
    --bs-btn-color: var(--brand-600);
    --bs-btn-border-color: var(--brand-600);
    --bs-btn-hover-bg: var(--brand-600);
    --bs-btn-hover-border-color: var(--brand-600);
    --bs-btn-active-bg: var(--brand-600);
    --bs-btn-active-border-color: var(--brand-600);
}

.btn-outline-secondary {
    --bs-btn-color: var(--text-muted);
    --bs-btn-border-color: var(--border-color-strong);
    --bs-btn-hover-bg: var(--text-muted);
    --bs-btn-hover-border-color: var(--text-muted);
}

.btn-sm { border-radius: .5rem; }

/* ---------- Forms ---------- */

.form-control, .form-select {
    background-color: var(--surface-input);
    border: 1.5px solid var(--border-color-strong);
    border-radius: var(--radius-sm);
    color: var(--text-strong);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.form-control::placeholder {
    color: var(--text-muted);
}

.form-control:disabled, .form-control[readonly] {
    background-color: var(--surface);
    color: var(--text-muted);
}

.form-control:focus, .form-select:focus {
    background-color: var(--surface-card);
    border-color: var(--brand-500);
    box-shadow: 0 0 0 .2rem rgba(99, 102, 241, .18);
}

.form-label {
    font-weight: 600;
    font-size: .875rem;
    color: var(--text-strong);
    margin-bottom: .35rem;
}

.form-text {
    color: var(--text-muted);
}

.form-check-input:checked {
    background-color: var(--brand-600);
    border-color: var(--brand-600);
}

.form-check-input:focus {
    border-color: var(--brand-400);
    box-shadow: 0 0 0 .2rem rgba(99, 102, 241, .18);
}

/* ---------- Tables ---------- */

.table {
    --bs-table-color: var(--text-main);
    --bs-table-hover-bg: var(--brand-50);
    margin-bottom: 0;
}

.table > thead th {
    background: #3d4663 !important;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #ffffff !important;
    border-bottom: none;
    padding-block: .85rem;
    box-shadow: none !important;
}

/* Round the header's outer corners to match the card when the table
   sits directly inside a card (no card-header above it). */
.card > .table-responsive:first-child > table > thead > tr:first-child > th:first-child {
    border-start-start-radius: var(--radius-md);
}

.card > .table-responsive:first-child > table > thead > tr:first-child > th:last-child {
    border-start-end-radius: var(--radius-md);
}

.table > tbody tr { transition: background-color .12s ease; }

.table > tbody td {
    vertical-align: middle;
    border-color: var(--border-color);
}

/* ---------- Badges & alerts ---------- */

.badge {
    font-weight: 600;
    border-radius: 999px;
    padding: .38em .75em;
    letter-spacing: .01em;
}

.alert {
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
}

.alert-success { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.alert-danger  { background: #fef2f2; border-color: #fecaca; color: #991b1b; }

/* ---------- Dropdowns ---------- */

.dropdown-menu {
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
    border-radius: var(--radius-sm);
    padding: .4rem;
}

.dropdown-item {
    border-radius: .5rem;
    padding: .45rem .75rem;
    transition: background-color .12s ease;
}

.dropdown-item:hover, .dropdown-item:focus {
    background-color: var(--brand-50);
    color: var(--brand-700);
}

/* ---------- Pagination ---------- */

.pagination .page-link {
    border-radius: .5rem;
    margin-inline-end: .25rem;
    border-color: var(--border-color);
    color: var(--text-main);
}

.pagination .page-item.active .page-link {
    background: var(--brand-gradient);
    border-color: transparent;
    box-shadow: 0 4px 10px -3px rgba(79, 70, 229, .5);
}

/* ---------- Guest / login page ---------- */

.auth-shell {
    min-height: 100vh;
    background:
        radial-gradient(1100px 550px at 8% -10%, rgba(99, 102, 241, .28), transparent),
        radial-gradient(1100px 550px at 108% 110%, rgba(79, 70, 229, .22), transparent),
        var(--ink-900);
}

.auth-card {
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.auth-brand {
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--text-strong);
}

.auth-brand-logo-plate {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: #fff;
    border-radius: 1rem;
    padding: .75rem 1.5rem;
    box-shadow: var(--shadow-md);
}

.auth-brand-logo-img {
    height: 150px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* ---------- Entity profile header (customers, vehicles, job cards, ...) ---------- */

.entity-header {
    position: relative;
    overflow: hidden;
    background: var(--brand-gradient);
    border-radius: var(--radius-lg);
    color: #fff;
    padding: 1.5rem 1.75rem;
    box-shadow: var(--shadow-md);
    margin-bottom: 1.5rem;
}

.entity-header::after {
    content: '';
    position: absolute;
    inset-inline-end: -60px;
    top: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    pointer-events: none;
}

.entity-header::before {
    content: '';
    position: absolute;
    inset-inline-end: 40px;
    bottom: -80px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    pointer-events: none;
}

.entity-header .entity-avatar {
    width: 3.25rem;
    height: 3.25rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    background: rgba(255, 255, 255, .16);
    font-size: 1.4rem;
    position: relative;
    z-index: 1;
}

.entity-header .entity-title {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -.02em;
    margin-bottom: .15rem;
    position: relative;
    z-index: 1;
}

.entity-header .entity-meta {
    opacity: .88;
    font-size: .875rem;
    position: relative;
    z-index: 1;
}

.entity-header .badge {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

.entity-header .btn-light {
    --bs-btn-bg: rgba(255, 255, 255, .95);
    font-weight: 600;
}

.entity-header .btn-outline-light {
    --bs-btn-border-color: rgba(255, 255, 255, .5);
}

/* ---------- Detail list (replaces bare dl rows inside cards) ---------- */

.detail-list { position: relative; }

.detail-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .7rem 0;
    border-bottom: 1px dashed var(--border-color);
}

.detail-list-item:last-child { border-bottom: none; padding-bottom: 0; }
.detail-list-item:first-child { padding-top: 0; }

.detail-list-item .detail-label {
    color: var(--text-muted);
    font-size: .82rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: .5rem;
    white-space: nowrap;
}

.detail-list-item .detail-label i {
    color: var(--brand-500);
    font-size: .95rem;
}

.detail-list-item .detail-value {
    font-weight: 600;
    color: var(--text-main);
    text-align: end;
}

/* ---------- Toolbar (index page search/filter bar) ---------- */

.page-toolbar {
    background: var(--surface-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    padding: .75rem 1rem;
    margin-bottom: 1.25rem;
}

.search-input-group {
    position: relative;
}

.search-input-group i {
    position: absolute;
    top: 50%;
    inset-inline-start: .9rem;
    transform: translateY(-50%);
    color: var(--text-muted);
}

.search-input-group input {
    padding-inline-start: 2.25rem;
}

[dir="rtl"] .search-input-group input { padding-inline-start: .75rem; padding-inline-end: 2.25rem; }
[dir="rtl"] .search-input-group i { inset-inline-start: auto; inset-inline-end: .9rem; }

/* ---------- Empty state ---------- */

.empty-state {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--text-muted);
}

.empty-state i {
    font-size: 2.25rem;
    color: var(--border-color-strong);
    display: block;
    margin-bottom: .5rem;
}

/* ---------- Dark theme ---------- */

:root[data-theme="dark"] {
    --surface:      #0f121b;
    --surface-card: #171b28;
    --surface-input: #1e2332;
    --border-color: #2a3044;
    --border-color-strong: #3c4359;
    --text-main:    #d6d9e6;
    --text-muted:   #8b90a6;
    --text-strong:  #f3f4f9;

    --brand-50: #1e2140;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, .4), 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-md: 0 12px 28px -10px rgba(0, 0, 0, .6);
    --shadow-lg: 0 24px 48px -16px rgba(0, 0, 0, .65);
}

:root[data-theme="dark"] .navbar.bg-white {
    background: rgba(23, 27, 40, .92) !important;
}

:root[data-theme="dark"] .card .fs-2.fw-bold,
:root[data-theme="dark"] .entity-header .entity-title {
    color: var(--text-strong);
}

:root[data-theme="dark"] .btn-light {
    --bs-btn-color: var(--ink-900);
}

:root[data-theme="dark"] .alert-success { background: rgba(22, 163, 74, .15); border-color: rgba(22, 163, 74, .35); color: #4ade80; }
:root[data-theme="dark"] .alert-danger  { background: rgba(220, 38, 38, .15); border-color: rgba(220, 38, 38, .35); color: #f87171; }

:root[data-theme="dark"] .badge.text-bg-light { background-color: var(--surface-input) !important; color: var(--text-main) !important; }

/* Theme toggle button */
.theme-toggle-btn {
    border: 1px solid var(--border-color-strong);
    background: transparent;
    color: var(--text-muted);
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .15s ease, color .15s ease;
}

.theme-toggle-btn:hover {
    background: var(--brand-50);
    color: var(--brand-600);
}

[x-cloak] { display: none !important; }