/*
 * Shared responsive + RTL behavior for every page in the app (every page
 * hand-rolls the same --sidebar-width: 250px fixed sidebar + margin-left
 * layout, rather than sharing one Blade layout, so this one stylesheet is
 * linked from each page's <head> instead of duplicating these rules
 * 50+ times).
 *
 * IMPORTANT: this file is linked near the TOP of <head>, before each
 * page's own inline <style> block, and every combination of [dir=rtl] x
 * mobile-media-query needs its OWN explicit rule at matching specificity
 * -- two !important rules of unequal specificity don't resolve by "which
 * media query is narrower", the more specific one always wins regardless
 * of source order. Every rule pair below is written so both halves of
 * each condition (ltr/rtl, desktop/mobile) share the same selector shape
 * on purpose, so the only thing deciding which wins is which one appears
 * later in this file.
 */

:root { --app-sidebar-width: 250px; }

/* ================= Sidebar nav rows: flexbox instead of float+inline =====
   The original markup used a floated chevron ("float-end") next to a plain
   icon + <span>, relying on normal inline layout to place them. That's
   fragile under bidi reordering (RTL) and is what made row text vanish.
   Flexbox with gap + margin-inline-start:auto is direction-aware by
   itself, so dir="rtl" doesn't need any special-casing here at all. */
.sidebar-nav .nav-link {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem;
}
.sidebar-nav .nav-link > i:first-child {
    margin: 0 !important;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}
.sidebar-nav .nav-link > span {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: break-word;
}
.sidebar-nav .nav-link > i.float-end,
.sidebar-nav .nav-link > i.fa-chevron-down {
    float: none !important;
    margin: 0 !important;
    margin-inline-start: auto !important;
    flex-shrink: 0;
}

/* ================= Desktop base (screens > 991px) ================= */
.sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    width: var(--sidebar-width, var(--app-sidebar-width)) !important;
    height: 100vh !important;
    z-index: 1030;
    transform: none;
    overflow-y: auto;
    overflow-x: hidden; /* overflow-y:auto alone computes overflow-x to auto too (CSS2 rule) -- pin it explicitly so nothing gets an unwanted horizontal scrollbar/clip */
}
[dir="rtl"] .sidebar {
    left: auto !important;
    right: 0 !important;
}

.main-content {
    margin-left: var(--sidebar-width, var(--app-sidebar-width)) !important;
    margin-right: 0 !important;
}
[dir="rtl"] .main-content {
    margin-right: var(--sidebar-width, var(--app-sidebar-width)) !important;
    margin-left: 0 !important;
}

/* ================= Mobile hamburger button + overlay (hidden on desktop) ================= */
.app-hamburger-btn {
    display: none;
    position: fixed;
    top: 14px;
    left: 14px;
    z-index: 1050;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    border: none;
    background: #4361ee;
    color: #fff;
    font-size: 1.15rem;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}
[dir="rtl"] .app-hamburger-btn { left: auto; right: 14px; }

.app-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1035;
}
.app-sidebar-overlay.show { display: block; }

/* ================= Tablet & phone (<= 991px): sidebar becomes an off-canvas drawer =================
   Every selector here that also has a desktop-base equivalent above is
   written with the SAME specificity as that desktop rule (e.g.
   "[dir=rtl] .main-content" here matches "[dir=rtl] .main-content" above)
   so this block reliably wins on mobile purely because it comes later in
   the file -- not by accident of one side having an extra selector. */
@media (max-width: 991.98px) {
    .app-hamburger-btn { display: flex; }

    /* The hamburger button is fixed at the top corner of the viewport, and
       the open drawer's header ("BSC System" / whatever brand text) starts
       right there too -- reserve space so the button sits beside the title
       instead of on top of it. padding-inline-start is direction-aware on
       its own, so this needs no separate [dir=rtl] rule. */
    .sidebar.app-sidebar-open .sidebar-header {
        padding-inline-start: 4.5rem !important;
    }

    .sidebar {
        width: min(85vw, 320px) !important;
        z-index: 1040 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.25s ease;
    }
    [dir="rtl"] .sidebar {
        transform: translateX(100%) !important;
    }
    .sidebar.app-sidebar-open {
        transform: translateX(0) !important;
    }

    .main-content {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 1rem !important;
        padding-top: 4.5rem !important;
        width: 100% !important;
    }
    [dir="rtl"] .main-content {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Cards/forms that assumed desktop-width columns stack cleanly since
       they already use Bootstrap's row/col grid; this just tightens
       spacing so nothing overflows a phone-width viewport. */
    .card { padding: 1rem !important; }
    .page-header-title { font-size: 1.25rem !important; }
    table { font-size: 0.82rem; }

    /* Every page's own title-bar (".header-bar" on ~15 legacy pages,
       ".page-header-bar" from the shared partial, or a plain Bootstrap
       "d-flex justify-content-between" row elsewhere) assumed desktop
       width and never wrapped -- on a phone the title and the user-badge/
       bell/language-switch cluster on its right end up squeezed onto the
       same line and overlapping. Force it to stack instead. */
    .header-bar,
    .page-header-bar,
    .main-content > .d-flex.justify-content-between {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem;
    }
    .header-bar > *,
    .page-header-bar > *,
    .main-content > .d-flex.justify-content-between > * {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .kpi-value, .stats-number { font-size: 1.4rem !important; }
    .modal-dialog { margin: 0.5rem; }
}

/* Never let a wide table or fixed-width block force the whole page to
   scroll sideways -- individual tables scroll within .table-responsive
   (already used across the app); this is just the outer safety net. */
html { max-width: 100%; overflow-x: hidden; }
body { max-width: 100%; overflow-x: hidden; }

/* ================= RTL text alignment for anything not covered above ================= */
[dir="rtl"] .text-start { text-align: right !important; }
[dir="rtl"] .text-end { text-align: left !important; }
[dir="rtl"] body { text-align: right; }