:root {
    --app-primary: #2563eb;
    --app-primary-soft: #eff6ff;
    --app-ink: #172033;
    --app-muted: #64748b;
    --app-border: #e2e8f0;
    --app-header-height: 8rem;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('/static/fonts/vazirmatn/Vazirmatn-Light.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Site-wide guard: nothing should ever push the page itself into horizontal scroll.
   Components that legitimately need to scroll sideways (wide tables, card strips) do it
   inside their own bounded wrapper with its own overflow-x — that scrolling is
   independent of this and keeps working; this only catches something overflowing the
   viewport by mistake. Set on both html and body: some browsers hand viewport-level
   scroll to whichever of the two actually ends up wider, so guarding only one left the
   other still able to produce a scrollbar. */
html {
    overflow-x: hidden;
    max-width: 100%;
}

body {
    min-height: 100vh;
    max-width: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    color: #212529;
    background: #f8fafc;
    font-family: 'Vazirmatn', sans-serif;
    overflow-x: hidden;
}

.content-wrapper {
    flex-grow: 1;
}

main.content-wrapper {
    margin-top: var(--app-header-height);
}

.gradient-text {
    background-image: linear-gradient(to right, #951595, rgba(13, 110, 253, 0.5));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 35px;
    font-weight: bold;
}

#install-btn {
    display: none;
    padding: 12px 24px;
    color: #fff;
    background: linear-gradient(45deg, #007bff, #6610f2);
    border: 0;
    border-radius: 12px;
    font-size: 16px;
    cursor: pointer;
    transition: 0.2s ease;
}

#install-btn i {
    margin-right: 8px;
}
#install-btn:disabled {
    background: #cbd5e1;
    cursor: not-allowed;
}

.app-navbar {
    padding: 0;
    background: rgba(255, 255, 255, 0.98);
    border-top: 3px solid var(--app-primary);
    border-bottom: 1px solid var(--app-border);
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.07);
    backdrop-filter: blur(14px);
}

.app-navbar__container {
    max-width: 1680px;
    margin: 0 auto;
    padding-inline: clamp(1rem, 3vw, 2.5rem);
    display: block;
}

.app-navbar__top {
    min-height: 3.2rem;
    display: flex;
    flex-direction: column;
    align-items: left;
    justify-content: space-between;
    gap: 1rem;
}

.app-brand {
    min-width: 0;
    margin: 0;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--app-ink);
    text-decoration: none;
}

.app-brand:hover {
    color: var(--app-primary);
}

.app-brand__logo {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    background: var(--app-primary-soft);
    border: 1px solid #dbeafe;
    border-radius: 13px;
}

.app-brand__logo img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}
.app-brand__text {
    min-width: 0;
    display: grid;
    line-height: 1.4;
}
.app-brand__title {
    font-size: 1.05rem;
    font-weight: 800;
    white-space: nowrap;
}
.app-brand__subtitle {
    color: var(--app-muted);
    font-size: 0.72rem;
    font-weight: 500;
}
.app-brand__title--short {
    display: none;
}

.app-navbar__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.app-user {
    max-width: 320px;
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    background: #f8fafc;
    border: 1px solid var(--app-border);
    border-radius: 12px;
}

.app-user__avatar {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: var(--app-primary);
    background: #fff;
    border: 1px solid #dbeafe;
    border-radius: 10px;
}

.app-user__details {
    min-width: 0;
    display: grid;
    line-height: 1.35;
}
.app-user__name {
    overflow: hidden;
    color: var(--app-ink);
    font-size: 0.82rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.app-user__role {
    overflow: hidden;
    color: var(--app-muted);
    font-size: 0.7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-navbar .navbar-toggler {
    width: 42px;
    height: 42px;
    padding: 0;
    color: var(--app-ink);
    background: #fff;
    border: 1px solid var(--app-border);
    border-radius: 11px;
    box-shadow: none;
}

.app-navbar__collapse {
    border-top: 0px solid #eef2f7;
}

.app-navbar__nav {
    width: 100%;
    min-height: 55px;
    margin-top: 8rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.2rem;
}

.app-navbar__nav .nav-link {
    padding: 0.55rem 0.68rem;
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    color: #475569;
    border-radius: 9px;
    font-size: 0.82rem;
    font-weight: 650;
    white-space: nowrap;
    transition:
        color 0.18s ease,
        background-color 0.18s ease,
        transform 0.18s ease;
}

.app-navbar__nav .nav-link i {
    width: 1rem;
    color: #64748b !important;
    text-align: center;
}
.app-navbar__nav .nav-link:hover {
    color: var(--app-primary);
    background: #f8fafc;
    transform: translateY(-1px);
}
.app-navbar__nav .nav-link.active {
    color: var(--app-primary) !important;
    background: var(--app-primary-soft);
    font-weight: 800;
}
.app-navbar__nav .nav-link.active i {
    color: var(--app-primary) !important;
}
.app-navbar__nav .nav-link.app-nav-logout {
    color: #dc2626 !important;
}
.app-navbar__nav .nav-link.app-nav-logout:hover {
    background: #fef2f2;
}
.app-navbar__nav .nav-link.app-nav-logout i {
    color: #dc2626 !important;
}

.app-navbar__mobile-user {
    margin: 0.75rem 0 0.35rem;
    padding: 0.75rem;
    display: none;
    align-items: center;
    gap: 0.65rem;
    background: #f8fafc;
    border: 1px solid var(--app-border);
    border-radius: 12px;
}

.app-quicklinks {
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--app-border);
    background: rgba(255, 255, 255, 0.7);
}

.app-quicklinks__inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.app-quicklinks__label {
    color: var(--app-muted);
    font-size: 0.78rem;
    font-weight: 700;
    margin-inline-end: 0.2rem;
    white-space: nowrap;
}

/* Deliberately mirrors the sidebar nav-link treatment (icon badge,
   bold label, hover/active lift) so these shortcuts read as an
   extension of the same primary navigation, not a separate control. */
.app-quicklink {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 1rem 0.5rem 0.6rem;
    border-radius: 999px;
    background: var(--app-primary-soft);
    border: 1px solid #dbeafe;
    color: var(--app-primary);
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        background-color 0.18s ease;
}

.app-quicklink__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    min-width: 1.9rem;
    border-radius: 50%;
    background: #fff;
    color: var(--app-primary);
    font-size: 0.85rem;
}

.app-quicklink:hover {
    color: var(--app-primary);
    background: #dbeafe;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.18);
}

.app-quicklink.active {
    background: var(--app-primary);
    border-color: var(--app-primary);
    color: #fff;
}

.app-quicklink.active .app-quicklink__icon {
    background: #fff;
    color: var(--app-primary);
}

.card {
    border-radius: 0.75rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
footer {
    margin-top: auto;
    background: #e9ecef;
    border-top: 1px solid #dee2e6;
    font-size: 0.85rem;
    font-weight: 500;
}
footer .container {
    margin-top: 0;
}
.total-exceeded {
    color: red;
    font-weight: bolder;
}
.table-responsive {
    max-height: 300px;
    overflow-y: auto;
}
.table-responsive table td {
    font-size: 0.9rem;
}

@media (max-width: 991.98px) {
    :root {
        --app-header-height: 5.25rem;
    }
    .app-navbar__top {
        min-height: 67px;
    }
    .app-navbar__collapse {
        max-height: calc(100vh - 76px);
        padding-bottom: 1rem;
        overflow-y: auto;
    }
    .app-navbar__mobile-user {
        display: flex;
    }
    .app-navbar__nav {
        min-height: 0;
        padding-top: 0.35rem;
        align-items: stretch;
    }
    .app-navbar__nav .nav-item {
        width: 100%;
    }
    .app-navbar__nav .nav-link {
        width: 100%;
        padding: 0.72rem 0.8rem;
        font-size: 0.88rem;
    }
}

/* From lg upward there's always room for the full nav, so instead of a
   top bar it's shown as a fixed right-hand sidebar (ul dir=rtl) — avoids
   the top row running out of horizontal space and squeezing items
   together. Below lg it falls back to the classic top bar + hamburger
   collapse (Bootstrap's navbar-expand-lg already handles showing/hiding
   the toggler and collapse at this breakpoint; only the visual layout is
   overridden here). */
@media (min-width: 992px) {
    :root {
        --app-sidebar-width: 17.5rem;
    }

    .app-navbar {
        top: 0;
        left: auto;
        right: 0;
        bottom: 0;
        width: var(--app-sidebar-width);
        height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        border-top: none;
        border-bottom: none;
        border-left: 1px solid var(--app-border);
        overflow-y: auto;
    }

    /* Specificity note: Bootstrap's .navbar>.container-fluid rule (2
       classes via child combinator) sets align-items:center and
       justify-content:space-between, which would center/shrink this to
       content width instead of filling the sidebar. Matching its
       specificity here (2 classes) and relying on source order — this
       block is after the Bootstrap stylesheet — overrides it instead of
       silently losing to it. */
    .app-navbar .app-navbar__container {
        max-width: none;
        min-height: 100%;
        padding: 1.25rem 1.1rem;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 7rem !important;
    }

    .app-navbar__top {
        min-height: 0.8rem;
        flex-direction: column;
        align-items: center;
        gap: 0;
    }

    /* The brand gets its own centered block, contained in its own
       padding, instead of sharing a loose `gap` with the user-card
       below — that loose gap let the logo sit flush against (and
       visually run into) the section below it. */
    .app-brand {
        width: 100%;
        align-items: center;
        text-align: center;
        padding-bottom: 1.1rem;
    }

    .app-brand__title--full,
    .app-brand__subtitle {
        display: none;
    }
    .app-brand__title--short {
        display: inline;
        font-size: 1rem;
    }

    /* Its own box (background/border, from the base .app-user rule),
       pushed clearly below the brand divider so it reads as a
       distinct "who's logged in" module sitting above the nav list —
       not squeezed against the logo. */
    .app-navbar__actions {
        width: 100%;
        margin-top: 1.1rem;
        flex-direction: column;
        align-items: stretch;
        gap: 0.6rem;
    }

    .app-user {
        max-width: none;
        width: 100%;
    }

    /* Bootstrap's base .navbar-collapse rule (not breakpoint-scoped) ships
       align-items:center for its usual job as a row of top-bar items —
       left undeclared here, that default survives and vertically centers
       the (short) nav list inside this now-tall, flex:1-grown sidebar
       column, stranding the links away from the brand row instead of
       starting right below it. flex-direction/align-items must be set
       explicitly to actually override it. */
    .app-navbar__collapse {
        /* border-top: 1px solid #eef2f7; */
        padding-top: 1rem;
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    /* Specificity note: Bootstrap's own .navbar-expand-lg .navbar-nav rule
       forces flex-direction:row at this breakpoint (2 classes). Matching
       it with .app-navbar__nav.navbar-nav (also 2 classes) lets source
       order — this block comes after the Bootstrap stylesheet — decide
       the tie in our favor, instead of silently losing to it. */
    .app-navbar__nav.navbar-nav {
        min-height: 0;
        flex-direction: column;
        align-items: stretch;
        flex-wrap: nowrap;
        gap: 0.35rem;
        margin-top: 0rem !important;
    }

    .app-navbar__nav .nav-item {
        width: 100%;
        flex-shrink: 0;
    }

    /* Sidebar-mode nav links get a bolder, more deliberate look than the
       plain top-bar ones — an icon badge and a start-edge accent bar —
       so the sidebar reads as the primary navigation surface rather than
       a strip of small text links. min-height guards against the row
       collapsing to the icon's line-height before the label's own font
       has finished laying out. */
    .app-navbar__nav .nav-link {
        width: 100%;
        min-height: 2.6rem;
        white-space: normal;
        box-sizing: border-box;
        padding: 0.7rem 0.85rem;
        gap: 0.7rem;
        font-size: 0.88rem;
        font-weight: 700;
        border-radius: 12px;
        border-inline-start: 3px solid transparent;
    }

    .app-navbar__nav .nav-link i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.1rem;
        height: 2.1rem;
        min-width: 2.1rem;
        border-radius: 10px;
        background: var(--app-primary-soft);
        font-size: 0.95rem;
        transition:
            background-color 0.18s ease,
            color 0.18s ease;
    }

    .app-navbar__nav .nav-link:hover {
        border-inline-start-color: var(--app-primary);
    }

    .app-navbar__nav .nav-link.active {
        border-inline-start-color: var(--app-primary);
        box-shadow: 0 6px 16px rgba(37, 99, 235, 0.16);
    }

    .app-navbar__nav .nav-link.active i {
        background: var(--app-primary);
        color: #fff !important;
    }

    .app-navbar__nav .nav-link.app-nav-logout i {
        background: #fef2f2;
    }

    main.content-wrapper {
        margin-top: 0;
        margin-right: var(--app-sidebar-width);
    }
    footer {
        margin-right: var(--app-sidebar-width);
    }
}

@media (max-width: 575.98px) {
    :root {
        --app-header-height: 4.75rem;
    }
    .app-navbar__container {
        padding-inline: 0.75rem;
    }
    .app-navbar__top {
        min-height: 3.2rem;
    }
    .app-brand__logo {
        width: 37px;
        height: 37px;
        border-radius: 11px;
    }
    .app-brand__logo img {
        width: 27px;
        height: 27px;
    }
    .app-brand__title--full,
    .app-brand__subtitle {
        display: none;
    }
    .app-brand__title--short {
        display: inline;
        font-size: 0.94rem;
    }
    .app-navbar .navbar-toggler {
        width: 39px;
        height: 39px;
    }
}