@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700&display=swap');

/* ═══════════════════════════════════════════════════════════════════════════
   ERPLite Brand Color System
   Source: ERPlite — Final Logo.pdf (Brand Identity v1.0)
   Tokens: Primary #1E4ED8 · Accent #9BB8FF · Ink #0F1733 · Paper #F0EEE9
   ═══════════════════════════════════════════════════════════════════════════ */

:root,
[data-bs-theme=light] {
    /* ── Primary (brand blue) ── */
    --erpx-blue: #1E4ED8;
    --erpx-primary: #1E4ED8;
    --erpx-primary-rgb: 30, 78, 216;
    --erpx-primary-lighter: #BCD0FF;
    --erpx-primary-light: #9BB8FF;
    --erpx-primary-dark: #1740B0;
    --erpx-primary-darker: #0F2E8A;
    --erpx-primary-bg-subtle: #E8EEFB;
    --erpx-primary-bg-subtle-rgb: 232, 238, 251;
    --erpx-primary-text-emphasis: #0F2E8A;
    --erpx-primary-border-subtle: #9BB8FF;

    /* ── Links ── */
    --erpx-link-color: #1E4ED8;
    --erpx-link-color-rgb: 30, 78, 216;
    --erpx-link-hover-color: #1740B0;
    --erpx-link-hover-color-rgb: 23, 64, 176;

    /* ── Focus ring ── */
    --erpx-focus-ring-color: rgba(30, 78, 216, 0.25);

    /* ── Secondary (Wordmark Ink) ── */
    --erpx-secondary: #0F1733;
    --erpx-secondary-rgb: 15, 23, 51;

    /* ── Body background (Paper) ── */
    --erpx-body-bg: #F0EEE9;
    --erpx-body-bg-rgb: 240, 238, 233;

    /* ── Navbar active state ── */
    --erpx-navbar-vertical-link-active-color: #1E4ED8;

    /* ── Wizard ── */
    --erpx-theme-wizard-complete-color: #1E4ED8;
    --erpx-theme-wizard-active-color: #1E4ED8;

    /* ── Pagination (override legacy hardcoded #3874ff) ── */
    --erpx-pagination-active-bg: var(--erpx-primary);
    --erpx-pagination-active-border-color: var(--erpx-primary);
    --erpx-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(var(--erpx-primary-rgb), 0.25);
}

[data-bs-theme=dark] {
    /* ── Primary (lighter for dark surfaces) ── */
    --erpx-primary: #9BB8FF;
    --erpx-primary-rgb: 155, 184, 255;
    --erpx-primary-lighter: #0F2E8A;
    --erpx-primary-light: #1E4ED8;
    --erpx-primary-dark: #9BB8FF;
    --erpx-primary-darker: #9BB8FF;
    --erpx-primary-lighter-rgb: 15, 46, 138;
    --erpx-primary-light-rgb: 30, 78, 216;
    --erpx-primary-dark-rgb: 155, 184, 255;
    --erpx-primary-darker-rgb: 155, 184, 255;
    --erpx-primary-text-emphasis: #9BB8FF;
    --erpx-primary-bg-subtle: #1A2040;
    --erpx-primary-border-subtle: #2A3A6A;

    /* ── Links ── */
    --erpx-link-color: #9BB8FF;
    --erpx-link-hover-color: #BCD0FF;
    --erpx-link-color-rgb: 155, 184, 255;
    --erpx-link-hover-color-rgb: 188, 208, 255;

    /* ── Dark mode body background (must re-declare, :root Paper overrides it) ── */
    --erpx-body-bg: #0f111a;
    --erpx-body-bg-rgb: 15, 17, 26;
}

/* ── Hardcoded color overrides (theme.css uses raw hex, not variables) ── */
.form-control:focus {
    border-color: #1E4ED8;
}
.form-select:focus {
    border-color: #1E4ED8;
}
.form-check-input:checked {
    background-color: #1E4ED8;
    border-color: #1E4ED8;
}
.form-check-input:focus {
    border-color: #1E4ED8;
    box-shadow: 0 0 0 0.25rem rgba(30, 78, 216, 0.25);
}
.form-switch .form-check-input:checked {
    background-color: #1E4ED8;
}
.dropdown-item.active,
.dropdown-item:active {
    background-color: #1E4ED8;
}
.page-item.active .page-link {
    background-color: #1E4ED8;
    border-color: #1E4ED8;
}

[data-bs-theme=dark] .form-control:focus {
    border-color: #9BB8FF;
}
[data-bs-theme=dark] .form-select:focus {
    border-color: #9BB8FF;
}
[data-bs-theme=dark] .form-check-input:checked {
    background-color: #9BB8FF;
    border-color: #9BB8FF;
}
[data-bs-theme=dark] .form-check-input:focus {
    border-color: #9BB8FF;
    box-shadow: 0 0 0 0.25rem rgba(155, 184, 255, 0.25);
}

/* ── Primary button (theme.css hardcodes #3874ff in --erpx-btn-bg) ── */
.btn-primary {
    --erpx-btn-bg: #1E4ED8;
    --erpx-btn-hover-bg: #1740B0;
    --erpx-btn-active-bg: #0F2E8A;
    --erpx-btn-disabled-bg: #1E4ED8;
    --erpx-btn-focus-shadow-rgb: 30, 78, 216;
}
.btn-outline-primary {
    --erpx-btn-color: #1E4ED8;
    --erpx-btn-border-color: #1E4ED8;
    --erpx-btn-hover-bg: #1E4ED8;
    --erpx-btn-hover-border-color: #1E4ED8;
    --erpx-btn-active-bg: #0F2E8A;
    --erpx-btn-active-border-color: #0F2E8A;
    --erpx-btn-focus-shadow-rgb: 30, 78, 216;
}

[data-bs-theme=dark] .btn-primary {
    --erpx-btn-bg: #9BB8FF;
    --erpx-btn-hover-bg: #BCD0FF;
    --erpx-btn-active-bg: #9BB8FF;
    --erpx-btn-disabled-bg: #9BB8FF;
    --erpx-btn-color: #0F1733;
    --erpx-btn-hover-color: #0F1733;
    --erpx-btn-focus-shadow-rgb: 155, 184, 255;
}
[data-bs-theme=dark] .btn-outline-primary {
    --erpx-btn-color: #9BB8FF;
    --erpx-btn-border-color: #9BB8FF;
    --erpx-btn-hover-bg: #9BB8FF;
    --erpx-btn-hover-border-color: #9BB8FF;
    --erpx-btn-hover-color: #0F1733;
    --erpx-btn-focus-shadow-rgb: 155, 184, 255;
}

/* ── Dark mode: outline-secondary buttons use subtle border ── */
[data-bs-theme=dark] .btn-outline-secondary {
    --erpx-btn-color: var(--erpx-body-color);
    --erpx-btn-border-color: var(--erpx-border-color);
    --erpx-btn-hover-color: #fff;
    --erpx-btn-hover-bg: var(--erpx-tertiary-bg);
    --erpx-btn-hover-border-color: var(--erpx-tertiary-bg);
    --erpx-btn-disabled-color: var(--erpx-tertiary-color);
    --erpx-btn-disabled-border-color: var(--erpx-border-color);
}

/* ═══════════════════════════════════════════════════════════════════════════
   RTL & Layout
   ═══════════════════════════════════════════════════════════════════════════ */

html[dir="rtl"],
html[dir="rtl"] * {
    font-family: "Cairo", sans-serif !important;
}

/* Prevent content from overlapping the absolute-positioned footer */
.pc-content {
    padding-bottom: 5rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Collapsed vertical navbar — fixed, internally-scrollable icon rail.

   legacy's native collapsed nav is position:absolute/height:auto and grows the
   whole document (setDocumentMinHeight() in legacy.js) so the *page* scrolls to
   reveal the menu. Our module menu has 35+ items (taller than the viewport), so
   that ballooned the page. Pin the rail to the viewport and scroll it internally
   instead — the document height stays tied to the page content.

   The hover fly-out submenus would normally be clipped by overflow-x:hidden, so
   _nav_vertical.blade.php re-anchors each fly-out to the viewport (position:fixed)
   on hover, which escapes this clip. The footer toggle is position:fixed (pinned)
   and the theme's 4rem padding-bottom clears it. Scoped to >=992px (the rail only
   exists at the .navbar-expand-lg breakpoint; below that the navbar is offcanvas).
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
    html.navbar-vertical-collapsed .navbar-vertical {
        position: fixed !important;
        height: 100vh !important;
        min-height: 0 !important;
        overflow-x: hidden;
        overflow-y: auto;
    }
}