:root {
    --sidebar-width: 260px;
    --brand: #B8860B;
    --brand-rgb: 184, 134, 11;
    --brand-hover: #9c740a;
    --brand-active: #7f5f08;

    /* Re-theme Bootstrap's own "primary" from blue to the brand gold.
       Utilities driven directly by these vars (.bg-primary, .text-primary,
       .border-primary, .link-primary, focus rings) pick this up
       automatically; component variants like .btn-primary bake in their
       own hover/active shades at build time and are overridden below. */
    --bs-primary: var(--brand);
    --bs-primary-rgb: var(--brand-rgb);
    --bs-link-color: var(--brand);
    --bs-link-color-rgb: var(--brand-rgb);
    --bs-link-hover-color: var(--brand-active);
    --bs-link-hover-color-rgb: 127, 95, 8;

    /* Bootstrap hardcodes this as blue at :root instead of deriving it
       from --bs-primary-rgb, so it needs an explicit override too. */
    --bs-focus-ring-color: rgba(var(--brand-rgb), .25);
}

body {
    font-family: 'IBM Plex Sans Arabic', sans-serif;
    background-color: #f4f6f9;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-hover);
    --bs-btn-hover-border-color: var(--brand-hover);
    --bs-btn-focus-shadow-rgb: var(--brand-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--brand-active);
    --bs-btn-active-border-color: var(--brand-active);
    --bs-btn-disabled-bg: var(--brand);
    --bs-btn-disabled-border-color: var(--brand);
}

.btn-outline-primary {
    --bs-btn-color: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand);
    --bs-btn-hover-border-color: var(--brand);
    --bs-btn-focus-shadow-rgb: var(--brand-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--brand);
    --bs-btn-active-border-color: var(--brand);
    --bs-btn-disabled-color: var(--brand);
    --bs-btn-disabled-border-color: var(--brand);
}

/* Bootstrap bakes these as literal hardcoded blue values (not var()
   references) at build time, so .btn-primary's var overrides above
   don't reach them — each needs its own explicit override. */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: #d9b96a;
    box-shadow: 0 0 0 .25rem rgba(var(--brand-rgb), .25);
}

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

.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--brand);
}

.pagination {
    --bs-pagination-active-bg: var(--brand);
    --bs-pagination-active-border-color: var(--brand);
    --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(var(--brand-rgb), .25);
}

/* ---------- App shell ---------- */
.app-shell {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: var(--sidebar-width);
    background: #1b2431;
    color: #cfd6e4;
    flex-shrink: 0;
    position: fixed;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    overflow-y: auto;
    z-index: 1030;
    transition: transform .2s ease;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 1.25rem 1rem;
    font-weight: 700;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.sidebar-brand span {
    flex: 1;
}

.sidebar-close {
    background: transparent;
    border: 0;
    color: #cfd6e4;
    font-size: 1.1rem;
    line-height: 1;
    padding: .25rem;
}

.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 1025;
}

.sidebar-nav {
    padding: .75rem;
}

.sidebar-nav .nav-link {
    color: #cfd6e4;
    border-radius: .5rem;
    padding: .6rem .9rem;
    margin-bottom: .15rem;
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .925rem;
}

.sidebar-nav .nav-link:hover {
    background: rgba(255, 255, 255, .06);
    color: #fff;
}

.sidebar-nav .nav-link.active {
    background: var(--brand);
    color: #fff;
}

.sidebar-caret {
    margin-inline-start: auto;
    font-size: .75rem;
    transition: transform .2s ease;
}

.sidebar-group-toggle[aria-expanded="true"] .sidebar-caret {
    transform: rotate(180deg);
}

.sidebar-submenu {
    padding-inline-start: 1.4rem;
}

.sidebar-submenu .nav-link {
    font-size: .875rem;
}

.app-main {
    margin-inline-start: var(--sidebar-width);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.topbar {
    background: #fff;
    border-bottom: 1px solid #e7eaf0;
    padding: .75rem 1.25rem;
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1020;
}

.content-area {
    padding: 1.5rem;
    flex: 1;
}

@media (max-width: 991.98px) {
    .sidebar {
        transform: translateX(100%);
    }

    .sidebar.show {
        transform: translateX(0);
    }

    .sidebar-backdrop.show {
        display: block;
    }

    /* Once open, the sidebar visually covers the toggle button (both
       sit on the same edge in RTL) — hide it rather than leave a
       confusing dead control; use the backdrop or the sidebar's own
       close button instead. */
    .sidebar.show ~ .app-main #sidebarToggle {
        visibility: hidden;
    }

    .app-main {
        margin-inline-start: 0;
    }
}

/* ---------- Compact typography on phones ---------- */
@media (max-width: 767.98px) {
    html {
        font-size: 14px;
    }

    .content-area {
        padding: 1rem;
    }
}

@media (max-width: 375px) {
    html {
        font-size: 13px;
    }
}

/* ---------- Auth pages ---------- */
.auth-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    font-family: 'IBM Plex Sans Arabic', sans-serif;
    padding: 1rem;
}

.auth-card {
    background: #fff;
    border: 1px solid #e7eaf0;
    border-radius: 1rem;
    padding: 2rem;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .08);
}

/* ---------- Dashboard stat cards ---------- */
.stat-card {
    background: #fff;
    border-radius: .75rem;
    padding: 1.25rem;
    box-shadow: 0 .125rem .5rem rgba(0, 0, 0, .06);
    height: 100%;
}

.stat-card .stat-icon {
    width: 3rem;
    height: 3rem;
    border-radius: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    color: #fff;
}

/* ---------- Report tables ---------- */
.report-section-title {
    font-weight: 700;
    background: #eef1f6;
    padding: .5rem 1rem;
    border-radius: .5rem;
    margin-bottom: 1rem;
}

.report-scroll-table {
    max-height: 320px;
    overflow-y: auto;
}

.stat-box-inline {
    display: inline-block;
    background: #fff;
    border: 1px solid #e7eaf0;
    border-radius: .5rem;
    padding: .35rem .75rem;
    margin-inline-end: .5rem;
    margin-bottom: .25rem;
}

.signature-pad {
    border: 1px dashed #c3cad8;
    border-radius: .5rem;
    background: #fff;
    touch-action: none;
    width: 100%;
    height: 150px;
}

@media print {
    .sidebar, .topbar, .no-print {
        display: none !important;
    }

    .app-main {
        margin-inline-start: 0 !important;
    }
}