/* ===================================================================
   Bspro admin panel - light, quiet theme (white + very light grey).
   Loaded after Bootstrap on every admin page (main, auth, public layouts). Visual only: no behaviour,
   no web fonts, no external files. Dark mode keeps working (its own token values below).
   =================================================================== */

/* ---------- design tokens ---------- */
:root {
    --ui-bg: #f7f8fa;          /* page background */
    --ui-surface: #ffffff;     /* cards, sidebar, topbar */
    --ui-subtle: #f9fafb;      /* table headers, soft panels */
    --ui-hover: #f3f4f6;       /* hover backgrounds */
    --ui-active: #eef1f5;      /* selected menu item */
    --ui-border: #e7e9ee;      /* hairlines */
    --ui-border-strong: #d6dae1; /* inputs */
    --ui-text: #1f2937;
    --ui-text-strong: #111827;
    --ui-muted: #6b7280;
    --ui-accent: #1f2937;      /* neutral accent: dark slate, no strong colour */
    --ui-accent-hover: #111827;
    --ui-focus: rgba(100, 116, 139, .22);
    --ui-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .04);
    --ui-shadow-lg: 0 8px 24px rgba(16, 24, 40, .08);
    --ui-radius: .75rem;
    --ui-radius-sm: .5rem;
    --bs-border-radius: .5rem; --bs-border-radius-sm: .4rem; --bs-border-radius-lg: .75rem;
}
[data-bs-theme="dark"] {
    --ui-bg: #0b1220; --ui-surface: #111a2b; --ui-subtle: #162135; --ui-hover: #1a2639; --ui-active: #1e2b40;
    --ui-border: #233047; --ui-border-strong: #2e3d57; --ui-text: #e5e7eb; --ui-text-strong: #f3f4f6; --ui-muted: #9aa4b2;
    --ui-accent: #e5e7eb; --ui-accent-hover: #ffffff; --ui-focus: rgba(148, 163, 184, .28);
    --ui-shadow: 0 1px 2px rgba(0, 0, 0, .3); --ui-shadow-lg: 0 8px 24px rgba(0, 0, 0, .4);
}
/* Light mode: Bootstrap's own variables follow the quiet palette (primary = neutral slate instead of bright blue) */
:root:not([data-bs-theme="dark"]) {
    --bs-body-bg: var(--ui-bg);
    --bs-body-color: var(--ui-text);
    --bs-body-color-rgb: 31, 41, 55;
    --bs-secondary-color: var(--ui-muted);
    --bs-border-color: var(--ui-border);
    --bs-tertiary-bg: var(--ui-hover);
    --bs-primary: #334155; --bs-primary-rgb: 51, 65, 85;
    --bs-primary-bg-subtle: #f1f5f9; --bs-primary-border-subtle: #e2e8f0; --bs-primary-text-emphasis: #1e293b;
    --bs-link-color: #334155; --bs-link-color-rgb: 51, 65, 85;
    --bs-link-hover-color: #0f172a; --bs-link-hover-color-rgb: 15, 23, 42;
    --bs-heading-color: var(--ui-text-strong);
    --bs-emphasis-color: var(--ui-text-strong);
}

/* ---------- base & typography ---------- */
body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Tahoma, "Noto Sans Arabic", Arial, sans-serif;
    font-size: .9375rem; line-height: 1.55; color: var(--ui-text);
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { color: var(--ui-text-strong); letter-spacing: -.01em; }
h1.h4, h1.h5 { font-weight: 650; font-size: 1.35rem; }
h1.h4 > i.bi, h1.h5 > i.bi, h2.h6 > i.bi { color: var(--ui-muted); }
h2.h6, .card-title { font-weight: 600; font-size: .98rem; }
.text-muted, .text-body-secondary { color: var(--ui-muted) !important; }
small, .small { font-size: .84rem; }
a { text-underline-offset: 2px; }
hr { border-color: var(--ui-border); opacity: 1; }
::selection { background: #e2e8f0; }

/* ---------- buttons ---------- */
.btn { font-weight: 500; border-radius: var(--ui-radius-sm); transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease; box-shadow: none; }
.btn-sm { border-radius: .4rem; }
.btn-lg { border-radius: .65rem; padding-inline: 1.15rem; }
.btn:focus-visible { box-shadow: 0 0 0 .2rem var(--ui-focus) !important; }
.btn i.bi { vertical-align: -.06em; }
.btn:active { transform: none; }

/* Main action: neutral dark slate */
.btn-primary, .btn-dark {
    --bs-btn-bg: var(--ui-accent); --bs-btn-border-color: var(--ui-accent); --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--ui-accent-hover); --bs-btn-hover-border-color: var(--ui-accent-hover); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--ui-accent-hover); --bs-btn-active-border-color: var(--ui-accent-hover); --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: #9ca3af; --bs-btn-disabled-border-color: #9ca3af;
}
[data-bs-theme="dark"] .btn-primary, [data-bs-theme="dark"] .btn-dark { --bs-btn-color: #111827; --bs-btn-hover-color: #111827; --bs-btn-active-color: #111827; }

/* Secondary / quiet buttons: white with a hairline border */
.btn-light, .btn-outline-primary, .btn-outline-secondary, .btn-outline-dark, .btn-secondary {
    --bs-btn-bg: var(--ui-surface); --bs-btn-border-color: var(--ui-border-strong); --bs-btn-color: var(--ui-text);
    --bs-btn-hover-bg: var(--ui-hover); --bs-btn-hover-border-color: var(--ui-border-strong); --bs-btn-hover-color: var(--ui-text-strong);
    --bs-btn-active-bg: var(--ui-active); --bs-btn-active-border-color: var(--ui-border-strong); --bs-btn-active-color: var(--ui-text-strong);
}

/* Colour meaning kept, but soft: pale tint + coloured text instead of solid strong colours */
.btn-success { --bs-btn-bg: #ecfdf3; --bs-btn-border-color: #c6ecd5; --bs-btn-color: #166534; --bs-btn-hover-bg: #dcf5e6; --bs-btn-hover-border-color: #a9dfbf; --bs-btn-hover-color: #14532d; --bs-btn-active-bg: #d1f0de; --bs-btn-active-color: #14532d; }
.btn-danger  { --bs-btn-bg: #fef2f2; --bs-btn-border-color: #f6cfcf; --bs-btn-color: #b42318; --bs-btn-hover-bg: #fde6e6; --bs-btn-hover-border-color: #efb4b4; --bs-btn-hover-color: #912018; --bs-btn-active-bg: #fbd9d9; --bs-btn-active-color: #912018; }
.btn-warning { --bs-btn-bg: #fffaeb; --bs-btn-border-color: #f3dfa6; --bs-btn-color: #93370d; --bs-btn-hover-bg: #fef3d3; --bs-btn-hover-border-color: #ead18a; --bs-btn-hover-color: #7a2e0e; --bs-btn-active-bg: #fdecc0; --bs-btn-active-color: #7a2e0e; }
.btn-info    { --bs-btn-bg: #f0f6ff; --bs-btn-border-color: #cfe0f7; --bs-btn-color: #1e4f8a; --bs-btn-hover-bg: #e3eefc; --bs-btn-hover-border-color: #b9d1f1; --bs-btn-hover-color: #183f6e; --bs-btn-active-bg: #d8e7fb; --bs-btn-active-color: #183f6e; }
.btn-outline-success { --bs-btn-color: #166534; --bs-btn-border-color: #c6ecd5; --bs-btn-hover-bg: #ecfdf3; --bs-btn-hover-color: #14532d; --bs-btn-hover-border-color: #a9dfbf; --bs-btn-active-bg: #dcf5e6; --bs-btn-active-color: #14532d; --bs-btn-active-border-color: #a9dfbf; }
.btn-outline-danger  { --bs-btn-color: #b42318; --bs-btn-border-color: #f6cfcf; --bs-btn-hover-bg: #fef2f2; --bs-btn-hover-color: #912018; --bs-btn-hover-border-color: #efb4b4; --bs-btn-active-bg: #fde6e6; --bs-btn-active-color: #912018; --bs-btn-active-border-color: #efb4b4; }
.btn-outline-warning { --bs-btn-color: #93370d; --bs-btn-border-color: #f3dfa6; --bs-btn-hover-bg: #fffaeb; --bs-btn-hover-color: #7a2e0e; --bs-btn-hover-border-color: #ead18a; --bs-btn-active-bg: #fef3d3; --bs-btn-active-color: #7a2e0e; --bs-btn-active-border-color: #ead18a; }
.btn-outline-info    { --bs-btn-color: #1e4f8a; --bs-btn-border-color: #cfe0f7; --bs-btn-hover-bg: #f0f6ff; --bs-btn-hover-color: #183f6e; --bs-btn-hover-border-color: #b9d1f1; --bs-btn-active-bg: #e3eefc; --bs-btn-active-color: #183f6e; --bs-btn-active-border-color: #b9d1f1; }
[data-bs-theme="dark"] .btn-success, [data-bs-theme="dark"] .btn-danger, [data-bs-theme="dark"] .btn-warning, [data-bs-theme="dark"] .btn-info {
    --bs-btn-bg: var(--ui-subtle); --bs-btn-border-color: var(--ui-border-strong); --bs-btn-hover-bg: var(--ui-hover); --bs-btn-active-bg: var(--ui-active);
}
[data-bs-theme="dark"] .btn-success { --bs-btn-color: #86efac; --bs-btn-hover-color: #bbf7d0; }
[data-bs-theme="dark"] .btn-danger  { --bs-btn-color: #fca5a5; --bs-btn-hover-color: #fecaca; }
[data-bs-theme="dark"] .btn-warning { --bs-btn-color: #fcd34d; --bs-btn-hover-color: #fde68a; }
[data-bs-theme="dark"] .btn-info    { --bs-btn-color: #93c5fd; --bs-btn-hover-color: #bfdbfe; }
.btn-check:checked + .btn-outline-primary, .btn-check:checked + .btn-outline-secondary {
    background: var(--ui-accent); border-color: var(--ui-accent); color: #fff;
}
[data-bs-theme="dark"] .btn-check:checked + .btn-outline-primary, [data-bs-theme="dark"] .btn-check:checked + .btn-outline-secondary { color: #111827; }
.btn-group > .btn { box-shadow: none; }
.btn-close:focus { box-shadow: 0 0 0 .2rem var(--ui-focus); }

/* ---------- forms ---------- */
.form-control, .form-select {
    border-radius: var(--ui-radius-sm); border-color: var(--ui-border-strong); background-color: var(--ui-surface);
    padding: .5rem .75rem; transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control-sm, .form-select-sm { border-radius: .4rem; padding-top: .3rem; padding-bottom: .3rem; }
.form-control:focus, .form-select:focus { border-color: #94a3b8; box-shadow: 0 0 0 .2rem var(--ui-focus); }
.form-control::placeholder { color: #9ca3af; }
.form-label { font-weight: 500; margin-bottom: .35rem; font-size: .875rem; color: var(--ui-text); }
.input-group-text { border-radius: var(--ui-radius-sm); border-color: var(--ui-border-strong); background: var(--ui-subtle); color: var(--ui-muted); }
.form-check-input { border-color: #b8bfca; }
.form-check-input:checked { background-color: var(--ui-accent); border-color: var(--ui-accent); }
.form-check-input:focus { border-color: #94a3b8; box-shadow: 0 0 0 .2rem var(--ui-focus); }
.form-switch .form-check-input { cursor: pointer; }
.form-text { color: var(--ui-muted); }
.form-control:disabled, .form-select:disabled, .form-control[readonly] { background-color: var(--ui-subtle); }

/* ---------- cards & panels ---------- */
.card { border-radius: var(--ui-radius); border: 1px solid var(--ui-border); background: var(--ui-surface); }
.card.border-0 { border: 1px solid var(--ui-border) !important; }
.card.shadow-sm, .card.shadow { box-shadow: var(--ui-shadow) !important; }
.card-header, .card-footer { background: var(--ui-surface); border-color: var(--ui-border); }
.card-header { font-weight: 600; padding: .85rem 1.25rem; }
.card-body { padding: 1.25rem; }
.bg-light, .bg-body-tertiary { background-color: var(--ui-subtle) !important; }
.rounded-3, .rounded-4 { border-radius: var(--ui-radius) !important; }

/* Clickable cards (dashboard shortcuts / stat cards) */
.card-module, .stat-card-link { transition: border-color .15s ease, box-shadow .15s ease; cursor: pointer; }
.card-module:hover, .stat-card-link:hover { border-color: #cfd5de !important; box-shadow: var(--ui-shadow-lg) !important; }
a:hover > .stat-card-link { cursor: pointer; }
/* Dashboard stat icons: one quiet style instead of seven colours */
.stat-badge[class*="bg-"] { background: var(--ui-hover) !important; color: #475569 !important; }
[data-bs-theme="dark"] .stat-badge[class*="bg-"] { color: #cbd5e1 !important; }

/* ---------- tables ---------- */
.table { --bs-table-bg: transparent; --bs-table-hover-bg: var(--ui-subtle); --bs-table-striped-bg: var(--ui-subtle); border-color: var(--ui-border); margin-bottom: 0; }
.table > :not(caption) > * > * { padding: .65rem .6rem; border-bottom-color: var(--ui-border); }
.table-sm > :not(caption) > * > * { padding: .45rem .6rem; }
.table > thead th, .table-light > tr > th, thead.table-light th {
    background: var(--ui-subtle) !important; color: var(--ui-muted) !important; font-weight: 600; font-size: .76rem;
    text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--ui-border) !important; white-space: nowrap;
}
html[lang="ar"] .table > thead th { text-transform: none; letter-spacing: 0; font-size: .82rem; }
.table-light { --bs-table-bg: var(--ui-subtle); --bs-table-color: var(--ui-muted); --bs-table-border-color: var(--ui-border); }
.table > tbody > tr:last-child > * { border-bottom: 0; }
.table-hover > tbody > tr { transition: background-color .12s ease; }
/* Row buttons stay quiet: one dark button per row would be heavy, so table actions use the outlined style */
.table .btn-primary, .table .btn-dark {
    --bs-btn-bg: var(--ui-surface); --bs-btn-border-color: var(--ui-border-strong); --bs-btn-color: var(--ui-text-strong);
    --bs-btn-hover-bg: var(--ui-hover); --bs-btn-hover-border-color: #c3c9d2; --bs-btn-hover-color: var(--ui-text-strong);
    --bs-btn-active-bg: var(--ui-active); --bs-btn-active-color: var(--ui-text-strong);
}
/* Repairs list: status stripe on each row kept (it carries meaning), just thinner */
#repairTable tbody tr[style] { border-inline-start-width: 3px !important; }
.table tfoot th, .table tfoot td { background: var(--ui-subtle); }
.table-responsive { -webkit-overflow-scrolling: touch; border-radius: inherit; }
.card > .table-responsive:first-child .table > thead > tr:first-child > th:first-child { border-start-start-radius: var(--ui-radius); }
.card > .table-responsive:first-child .table > thead > tr:first-child > th:last-child { border-start-end-radius: var(--ui-radius); }

/* ---------- badges & alerts ---------- */
.badge { font-weight: 500; letter-spacing: .1px; border-radius: .4rem; }
.badge.rounded-pill { border-radius: 999px; }
/* Solid status badges become soft tints (meaning kept, no strong colour); red counters (bell, menu) stay solid on purpose */
:root:not([data-bs-theme="dark"]) .badge.bg-success { background-color: #e7f6ec !important; color: #166534 !important; }
:root:not([data-bs-theme="dark"]) .badge.bg-warning { background-color: #fdf3d8 !important; color: #854d0e !important; }
:root:not([data-bs-theme="dark"]) .badge.bg-info { background-color: #e8f1fb !important; color: #1e4f8a !important; }
:root:not([data-bs-theme="dark"]) .badge.bg-primary, :root:not([data-bs-theme="dark"]) .badge.bg-secondary,
:root:not([data-bs-theme="dark"]) .badge.bg-dark { background-color: #eef1f5 !important; color: #334155 !important; }
:root:not([data-bs-theme="dark"]) .badge.bg-danger:not(.rounded-pill) { background-color: #fdecec !important; color: #9b1c1c !important; }
.alert { border-radius: var(--ui-radius-sm); border-width: 1px; font-size: .9rem; }
.alert-success { --bs-alert-bg: #f0fdf4; --bs-alert-border-color: #cdebd8; --bs-alert-color: #166534; }
.alert-danger  { --bs-alert-bg: #fef2f2; --bs-alert-border-color: #f6d4d4; --bs-alert-color: #9b1c1c; }
.alert-warning { --bs-alert-bg: #fffbeb; --bs-alert-border-color: #f3e3b3; --bs-alert-color: #854d0e; }
.alert-info    { --bs-alert-bg: #f5f8fc; --bs-alert-border-color: #dde6f1; --bs-alert-color: #1e3a5f; }
.alert-light   { --bs-alert-bg: var(--ui-subtle); --bs-alert-border-color: var(--ui-border); --bs-alert-color: var(--ui-text); }
[data-bs-theme="dark"] .alert-success, [data-bs-theme="dark"] .alert-danger, [data-bs-theme="dark"] .alert-warning, [data-bs-theme="dark"] .alert-info {
    --bs-alert-bg: var(--ui-subtle); --bs-alert-border-color: var(--ui-border-strong); --bs-alert-color: var(--ui-text);
}

/* ---------- navigation inside pages (tabs, pills, dropdowns, list groups, modals) ---------- */
.nav-tabs { border-bottom-color: var(--ui-border); gap: .25rem; }
.nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; color: var(--ui-muted); font-weight: 500; border-radius: 0; padding: .6rem .9rem; }
.nav-tabs .nav-link:hover { color: var(--ui-text-strong); border-bottom-color: var(--ui-border-strong); }
.nav-tabs .nav-link.active { color: var(--ui-text-strong); background: transparent; border-bottom-color: var(--ui-accent); }
.nav-pills .nav-link { color: var(--ui-muted); border-radius: var(--ui-radius-sm); font-weight: 500; }
.nav-pills .nav-link:hover { background: var(--ui-hover); color: var(--ui-text-strong); }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background: var(--ui-active); color: var(--ui-text-strong); }
.dropdown-menu { border: 1px solid var(--ui-border); border-radius: .65rem; box-shadow: var(--ui-shadow-lg) !important; padding: .35rem; font-size: .9rem; }
.dropdown-item { border-radius: .4rem; padding: .45rem .7rem; color: var(--ui-text); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--ui-hover); color: var(--ui-text-strong); }
.dropdown-item.active, .dropdown-item:active { background: var(--ui-active); color: var(--ui-text-strong); font-weight: 600; }
.dropdown-header { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ui-muted); }
.list-group { --bs-list-group-border-color: var(--ui-border); --bs-list-group-action-hover-bg: var(--ui-hover); --bs-list-group-active-bg: var(--ui-active); --bs-list-group-active-color: var(--ui-text-strong); --bs-list-group-active-border-color: var(--ui-border); }
.modal-content { border: 1px solid var(--ui-border); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow-lg); }
.modal-header, .modal-footer { border-color: var(--ui-border); }
.modal-backdrop.show { opacity: .35; }
.progress { background-color: var(--ui-hover); border-radius: 999px; }
.progress-bar { background-color: #64748b; }
.page-link { color: var(--ui-text); border-color: var(--ui-border); }
.page-item.active .page-link { background: var(--ui-accent); border-color: var(--ui-accent); }

/* RTL tweak kept from the previous stylesheet */
html[dir="rtl"] .ms-auto { margin-right: auto !important; margin-left: 0 !important; }

/* ---------- phones ---------- */
@media (max-width: 575.98px) {
    .form-control, .form-select { font-size: 16px; }   /* no iOS zoom on focus */
    .btn { padding-top: .5rem; padding-bottom: .5rem; }
    .btn-sm { padding-top: .35rem; padding-bottom: .35rem; }
    .card-body { padding: 1rem; }
    h1.h4, h1.h5 { font-size: 1.15rem; }
    .table > :not(caption) > * > * { padding: .6rem .55rem; }
    .modal-dialog { margin: .75rem; }
}