/* Transport ERP — admin theme (blue / green / orange) */
:root {
    --c-primary:        #1565c0; /* blue */
    --c-primary-dark:   #0d47a1;
    --c-primary-light:  #e3f2fd;
    --c-success:        #2e7d32; /* green */
    --c-success-dark:   #1b5e20;
    --c-success-light:  #e8f5e9;
    --c-accent:         #ef6c00; /* orange */
    --c-accent-dark:    #e65100;
    --c-accent-light:   #fff3e0;
    --c-warning:        #f9a825;
    --sidebar-bg:       #ffffff;
    --sidebar-text:     #475569;
    --sidebar-text-strong: #0d1b2a;
    --sidebar-border:   #e8ecf2;
    --font-ui:          'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --sidebar-w:        260px;
    --sidebar-w-collapsed: 76px;
    --topbar-h:         60px;
    --bs-body-bg:       #f4f6fa;
    --bs-primary:       var(--c-primary);
    --bs-primary-rgb:   21, 101, 192;
}

body.app { background: var(--bs-body-bg); font-family: var(--font-ui); }

/* All cards default to pure white per design request */
.card { background-color: #FFFFFF !important; }
.card-header.bg-white { background-color: #FFFFFF !important; }

/* Hide stuck DataTables processing overlay when window has been inactive */
.dataTables_processing:empty { display: none !important; }

/* Consistent icon spacing — keeps sidebar tidy even if a bi-* class is missing */
.sidebar-nav i.bi { min-width: 18px; display: inline-block; text-align: center; }
.btn i.bi { line-height: 1; vertical-align: -2px; }

/* -------- Professional billing software polish -------- */
body.app { color: #1d2331; font-family: var(--font-ui); }
/* Bootstrap components read this variable; keep them on the same font. */
:root { --bs-font-sans-serif: var(--font-ui); }
button, input, select, textarea { font-family: inherit; }
h1, h2, h3, h4, h5, h6 { color: #0d1b2a; font-weight: 600; letter-spacing: -0.01em; }
.card { border: 1px solid #ebeef3; border-radius: 10px; transition: box-shadow .2s; }
.card:hover { box-shadow: 0 .25rem .75rem rgba(15, 36, 75, .06); }
.card-header { border-bottom: 1px solid #ebeef3; padding: .8rem 1rem; }
.card-header h6 { font-size: .92rem; font-weight: 600; }
.btn { font-weight: 500; letter-spacing: .01em; border-radius: 6px; }
.btn:focus, .btn:focus-visible { box-shadow: 0 0 0 .2rem rgba(21,101,192,.15); }
.form-control, .form-select { border-radius: 6px; border-color: #d8dde6; font-size: .9rem; }
.form-control:focus, .form-select:focus { border-color: #1565c0; box-shadow: 0 0 0 .15rem rgba(21,101,192,.12); }
.form-label { font-size: .82rem; font-weight: 500; color: #475569; margin-bottom: .25rem; }
.table { font-size: .9rem; }
.table > thead th { font-weight: 600; color: #475569; text-transform: uppercase; font-size: .72rem; letter-spacing: .04em; background: #f7f9fc; border-bottom: 1px solid #e1e6ee; }
.table > tbody tr { transition: background .12s; }
.table > tbody tr:hover { background: #f8fafc; }
.table > :not(caption) > * > * { padding: .6rem .75rem; vertical-align: middle; }
.badge { font-weight: 500; padding: .35em .6em; letter-spacing: .01em; }
.avatar-circle { background: linear-gradient(135deg, #1565c0, #2e7d32); }
.sidebar-nav .nav-link { font-size: .92rem; }
.invoice-totals { border: 1px solid #d6e1ee; }
.invoice-totals .card-footer { background: #f7f9fc !important; border-top: 1px solid #ebeef3; }
.app-page-title { color: #0d1b2a; font-weight: 600; }

/* Buttons */
.btn-primary { --bs-btn-bg: var(--c-primary); --bs-btn-border-color: var(--c-primary); --bs-btn-hover-bg: var(--c-primary-dark); --bs-btn-hover-border-color: var(--c-primary-dark); --bs-btn-active-bg: var(--c-primary-dark); }
.btn-success { --bs-btn-bg: var(--c-success); --bs-btn-border-color: var(--c-success); --bs-btn-hover-bg: var(--c-success-dark); --bs-btn-hover-border-color: var(--c-success-dark); }
.btn-warning { --bs-btn-bg: var(--c-accent); --bs-btn-border-color: var(--c-accent); --bs-btn-color: #fff; --bs-btn-hover-bg: var(--c-accent-dark); --bs-btn-hover-color: #fff; }
.text-primary { color: var(--c-primary) !important; }
.bg-primary  { background-color: var(--c-primary) !important; }
.bg-success  { background-color: var(--c-success) !important; }

/* Form controls */
.form-control:focus, .form-select:focus { border-color: var(--c-primary); box-shadow: 0 0 0 .2rem rgba(21,101,192,.15); }
.form-check-input:checked { background-color: var(--c-primary); border-color: var(--c-primary); }

/* Sidebar */
.app-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-w);
    background: var(--sidebar-bg); color: var(--sidebar-text); z-index: 1030;
    overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #d5dbe5 transparent;
    transition: width .25s ease, transform .3s ease; box-shadow: 1px 0 0 var(--sidebar-border);
}
.app-brand { background: #fff; border-bottom: 1px solid var(--sidebar-border); min-height: var(--topbar-h); }
.brand-icon { font-size: 1.6rem; color: var(--c-accent); }
.brand-logo { height: 36px; max-width: 150px; width: auto; object-fit: contain; flex-shrink: 0; }
.brand-link { color: var(--sidebar-text-strong); min-width: 0; border-radius: 8px; transition: opacity .15s ease; }
.brand-link:hover { color: var(--sidebar-text-strong); opacity: .8; }
.brand-link:focus-visible { outline: none; box-shadow: 0 0 0 .2rem rgba(21,101,192,.25); }
.brand-text { font-weight: 700; letter-spacing: .2px; color: var(--sidebar-text-strong); }
.sidebar-nav { padding: .6rem 0; }
.sidebar-nav .nav-link {
    color: var(--sidebar-text); padding: .6rem .85rem; margin: .12rem .55rem;
    display: flex; align-items: center; gap: .65rem; position: relative;
    border-radius: .55rem; transition: background .18s ease, color .18s ease;
}
.sidebar-nav .nav-link:hover { background: #f1f5fb; color: var(--c-primary-dark); }
.sidebar-nav .nav-link.sub {
    padding-left: 2.35rem; font-size: .88rem; color: #64748b;
    margin-top: .05rem; margin-bottom: .05rem;
}
.sidebar-nav .nav-link.sub:hover { background: #f1f5fb; color: var(--c-primary-dark); }
/* Active item: light blue pill with a solid accent bar on the left. */
.sidebar-nav .nav-link.active {
    background: var(--c-primary-light); color: var(--c-primary-dark); font-weight: 600;
}
.sidebar-nav .nav-link.active::before {
    content: ""; position: absolute; left: -.55rem; top: 20%; bottom: 20%; width: 3px;
    border-radius: 0 3px 3px 0; background: var(--c-primary);
}
.sidebar-nav .nav-link.active i.bi { color: var(--c-primary); }
/* Open parent group gets a subtle tint so its context stays visible. */
.sidebar-nav .has-submenu > .nav-link[aria-expanded="true"] { background: #f7f9fc; color: var(--sidebar-text-strong); }
.sidebar-nav .has-submenu > .nav-link[aria-expanded="true"] .sub-arrow { transform: rotate(180deg); }
.sidebar-nav .sub-arrow { transition: transform .2s; font-size: .75rem; }

/* Main content area */
.app-main { margin-left: var(--sidebar-w); min-height: 100vh; display: flex; flex-direction: column; transition: margin-left .25s ease; }

/* Sidebar toggle button in the topbar */
.app-menu-btn {
    width: 38px; height: 38px; flex: 0 0 38px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid #e1e6ee; border-radius: 8px; background: #fff; color: var(--c-primary);
    font-size: 1.2rem; transition: background .15s, border-color .15s, color .15s;
}
.app-menu-btn:hover { background: var(--c-primary-light); border-color: #bcd4f0; color: var(--c-primary-dark); }
.app-menu-btn:focus-visible { outline: none; box-shadow: 0 0 0 .2rem rgba(21,101,192,.25); }
.app-topbar {
    height: var(--topbar-h); background: #fff; border-bottom: 1px solid #e5e9f0;
    position: sticky; top: 0; z-index: 1020;
}
.app-content { flex: 1; }
.app-footer { background: #fff; border-top: 1px solid #e5e9f0; }

/* Avatar */
.avatar-circle {
    width: 36px; height: 36px; border-radius: 50%; background: var(--c-success); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem;
}

/* Stat cards */
.stat-card .stat-icon {
    width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; color: #fff;
}
.stat-primary  .stat-icon { background: linear-gradient(135deg, var(--c-primary), var(--c-primary-dark)); }
.stat-success  .stat-icon { background: linear-gradient(135deg, var(--c-success), var(--c-success-dark)); }
.stat-accent   .stat-icon { background: linear-gradient(135deg, var(--c-accent),  var(--c-accent-dark)); }
.stat-warning  .stat-icon { background: linear-gradient(135deg, #f9a825, #f57f17); }
.stat-card { transition: transform .2s, box-shadow .2s; }
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.08) !important; }

/* Tables */
.table { --bs-table-bg: transparent; }
.table > thead { background: #f8fafc; }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select { border-radius: .375rem; border: 1px solid #ced4da; padding: .25rem .5rem; }

/* Auth screen */
.auth-wrapper {
    background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-success) 60%, var(--c-accent) 100%);
}
.auth-card { border-radius: 1rem; }

/* Mobile: sidebar slides in as an overlay above a dimmed backdrop. */
.sidebar-backdrop {
    position: fixed; inset: 0; z-index: 1029; background: rgba(8,20,40,.45);
    opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.sidebar-backdrop.show { opacity: 1; pointer-events: auto; }

@media (max-width: 767.98px) {
    .app-sidebar { width: 272px; transform: translateX(-100%); }
    .app-sidebar.show { transform: translateX(0); box-shadow: 0 0 32px rgba(0,0,0,.35); }
    .app-main { margin-left: 0; }
}

/* Desktop: the toggle collapses the sidebar to an icon rail. */
@media (min-width: 768px) {
    body.sidebar-collapsed { --sidebar-w: var(--sidebar-w-collapsed); }
    body.sidebar-collapsed .brand-text,
    body.sidebar-collapsed .sidebar-nav .nav-link span,
    body.sidebar-collapsed .sidebar-nav .sub-arrow,
    body.sidebar-collapsed .sidebar-nav .submenu { display: none; }
    body.sidebar-collapsed .app-brand { justify-content: center; padding-left: 0 !important; padding-right: 0 !important; }
    body.sidebar-collapsed .brand-link { justify-content: center; }
    body.sidebar-collapsed .app-brand .brand-icon { margin: 0 !important; }
    body.sidebar-collapsed .app-brand .brand-logo { margin: 0 !important; max-width: 40px; height: 36px; }
    body.sidebar-collapsed .sidebar-nav .nav-link { justify-content: center; padding: .65rem 0; margin: .12rem .5rem; gap: 0; }
    body.sidebar-collapsed .sidebar-nav .nav-link i.bi { font-size: 1.15rem; min-width: 0; }
}

/* ============================================================
   UI fixes — added during the system-wide audit.
   Purely additive: no existing rule, form control or field removed.
   ============================================================ */

/* --- Active-filter banner (see admin.js): makes a stray search term obvious
       instead of letting the grid read as an empty table. --- */
.dt-filter-note { font-size: .85rem; border-radius: 8px; }
.dt-filter-note .bi { font-size: .95rem; }

/* --- Inline field validation --- */
.invalid-feedback.js-field-error { font-size: .78rem; margin-top: .2rem; }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--bs-danger, #dc3545); }
.is-invalid + .select2-container .select2-selection { border-color: var(--bs-danger, #dc3545) !important; }

/* --- Disabled submit while saving --- */
button[type=submit]:disabled { opacity: .75; cursor: progress; }

/* --- Inputs: white field background everywhere; disabled and read-only fields stay grey. --- */
.form-control:not(:disabled):not([readonly]),
.form-select:not(:disabled) { background-color: #fff !important; }

/* --- Modal header: one consistent style for every dialog (white, dark title, brand accent). --- */
.modal-content { border: 0; border-radius: 14px; overflow: hidden; box-shadow: 0 24px 60px -20px rgba(13,27,42,.35); }
.app-modal-header {
    background: #fff; border-bottom: 1px solid #e8ecf2; padding: 1.1rem 1.5rem;
    display: flex; align-items: center;
}
.app-modal-header .modal-title { font-size: 1.1rem; font-weight: 700; color: #0d1b2a; letter-spacing: -.01em; margin: 0; }
/* Close (X) sits at the far right, in a soft square hover target. */
.app-modal-header .btn-close {
    margin: 0 0 0 auto; padding: 0; width: 34px; height: 34px; opacity: 1;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px; background-color: transparent; color: #64748b; transition: background .15s, color .15s;
}
.app-modal-header .btn-close:hover { background-color: #f1f5fb; color: #0d1b2a; }
.app-modal-header .btn-close:focus-visible { outline: none; box-shadow: 0 0 0 .2rem rgba(21,101,192,.25); }
.modal-body { padding: 1.5rem; }
.modal-footer { background: #fafbfd; border-top: 1px solid #e8ecf2; padding: .9rem 1.5rem; gap: .6rem; }
.modal-footer .btn { min-width: 104px; height: 42px; padding: 0 1.25rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; font-weight: 600; }
.modal-footer .btn-light { background: #fff; border: 1px solid #d8dde6; color: #334155; box-shadow: 0 1px 2px rgba(15,23,42,.05); }
.modal-footer .btn-light:hover { background: #f1f5fb; border-color: #c3ccd9; color: #0d1b2a; }

/* --- Modals: long forms scroll rather than clipping the footer buttons. --- */
.modal-dialog-scrollable .modal-body { max-height: calc(100vh - 12rem); }

/* --- Required-field marker so users can see what must be filled. --- */
.form-label .text-danger { font-weight: 700; }

/* --- Row action buttons keep their shape on narrow screens. --- */
td .btn-sm { padding: .2rem .45rem; line-height: 1.2; }
td .btn-sm + .btn-sm { margin-left: .25rem; }

/* --- Small screens: sidebar overlay and denser tables. --- */
@media (max-width: 767.98px) {
    .table { font-size: .82rem; }
}