/* ============================================================
   VMS Modern Design System
   KASOTIC Visitor Management System
   Primary: #244123 (Forest Green)
   ============================================================ */

/* =================== TOP NAVBAR (NEW DESIGN) =================== */

/* Override old navbar dimensions — overflow:visible is CRITICAL for dropdowns */
nav.navbar.default-layout-navbar {
    padding: 0 !important;
    height: 64px !important;
    min-height: 64px !important;
    overflow: visible !important;
}

.vms-topnav {
    display: flex;
    flex: 1; /* fill the bootstrap d-flex navbar wrapper */
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 64px;
    padding: 0 20px;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 1px 8px rgba(0,0,0,0.07);
    position: relative;
    overflow: visible !important;
}

    /* RTL: sidebar on the RIGHT — pad the start (right) side so user+bell don't touch the sidebar */
    .vms-topnav[dir="rtl"] {
        padding-inline-start: 20px; /* resolves to padding-right in RTL */
    }

/* Logo — hidden, replaced by text brand */
.vms-topnav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    text-decoration: none;
}

    .vms-topnav-logo img {
        display: none !important; /* hide the logo image */
    }

    /* Brand text removed — sidebar brand handles identity */
    .vms-topnav-logo::after {
        content: none;
    }

/* User + bell group (sits near the sidebar) */
.vms-topnav-start {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Language + logout group (sits at the far end) */
.vms-topnav-end {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Keep old class working if referenced elsewhere */
.vms-topnav-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Thin separator between user/notif and lang/logout */
.vms-topnav-sep {
    width: 1px;
    height: 24px;
    background: #e2e8f0;
    margin: 0 4px;
}

/* Direct logout button */
.vms-logout-direct {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 8px;
    border: 1.5px solid #e2e8f0;
    background: #ffffff;
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.18s ease;
    white-space: nowrap;
}

    .vms-logout-direct:hover {
        background: #fef2f2;
        border-color: #fca5a5;
        color: #dc2626;
    }

    .vms-logout-direct i {
        font-size: 13px;
    }

/* Dropdown containers MUST have position:relative for Bootstrap */
.vms-topnav-right .dropdown,
.vms-topnav-start .dropdown,
.vms-topnav-end .dropdown {
    position: relative !important;
    overflow: visible !important;
}

/* High z-index so dropdowns appear above everything */
.vms-topnav-right .dropdown-menu,
.vms-topnav-start .dropdown-menu,
.vms-topnav-end .dropdown-menu {
    z-index: 9999 !important;
    margin-top: 6px !important;
}

/* ── Generic nav icon button (bell) ── */
.vms-nav-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    border: none !important;
    background: #ffffff !important;
    color: #475569 !important;
    cursor: pointer !important;
    transition: background 0.15s ease !important;
    text-decoration: none !important;
    font-size: 16px !important;
    position: relative !important;
    padding: 0 !important;
    box-shadow: none !important;
}

    .vms-nav-btn:hover {
        background: #e2e8f0 !important;
        color: #1e293b !important;
    }

/* Language + logout pushed to the far end */
.vms-topnav-end {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-inline-start: auto;
}

/* Language button overrides the circular bell shape */
.vms-lang-nav-btn {
    border-radius: 8px !important;
    padding: 0 10px !important;
    min-width: unset !important;
    gap: 5px !important;
}

/* ── Language toggle ── */
.vms-lang-label {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--vms-primary);
    font-family: 'Segoe UI', 'Cairo', sans-serif;
}

.vms-nav-btn:hover .vms-lang-label {
    color: var(--vms-primary-mid);
}

/* ── Notification button & badge ── */
.vms-notif-btn {
    position: relative;
}

.vms-notif-badge {
    position: absolute;
    top: 4px;
    inset-inline-end: 4px;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    background: #dc2626;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    border: 2px solid #fff;
    line-height: 1;
}

/* ── Notification dropdown ── */
/* Hidden by default — shown via .vms-notif-open */
.vms-notif-dropdown {
    display: none !important;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 360px;
    max-width: calc(100vw - 20px);
    padding: 0;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.12);
    overflow: hidden;
    z-index: 9999;
    background: #fff;
}
    /* RTL: align right edge of menu to button */
    #vmsTopnav[dir="rtl"] .vms-notif-dropdown,
    .vms-notif-dropdown[dir="rtl"] {
        left: auto;
        right: 0;
    }
    /* Show state */
    .vms-notif-dropdown.vms-notif-open {
        display: block !important;
    }

.vms-notif-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    font-size: 14px;
    font-weight: 700;
    color: var(--vms-text);
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.vms-notif-count-pill {
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
}

.vms-notif-body {
    max-height: 260px;
    overflow-y: auto;
    overflow-x: hidden;
}

.vms-notif-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 18px;
    text-decoration: none;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.15s;
    color: inherit;
}

    .vms-notif-item:hover {
        background: #f8fafc;
    }

.vms-notif-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    flex-shrink: 0;
    margin-top: 5px;
}

.vms-notif-msg {
    font-size: 13px;
    font-weight: 600;
    color: var(--vms-text);
    line-height: 1.4;
    margin-bottom: 2px;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

.vms-notif-time {
    font-size: 11px;
    color: #94a3b8;
}

.vms-notif-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 32px 18px;
    color: #94a3b8;
    font-size: 13px;
}

    .vms-notif-empty i {
        font-size: 28px;
        opacity: 0.5;
    }

.vms-notif-footer {
    padding: 10px 18px;
    text-align: center;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}

    .vms-notif-footer a {
        font-size: 13px;
        font-weight: 700;
        color: var(--vms-primary);
        text-decoration: none;
    }

        .vms-notif-footer a:hover {
            text-decoration: underline;
        }

/* ── User profile button ── */
.vms-user-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    height: 40px !important;
    padding: 0 12px !important;
    border-radius: 20px !important;
    border: none !important;
    background: #ffffff !important;
    cursor: pointer !important;
    transition: background 0.15s ease !important;
    color: #1e293b !important;
    font-family: inherit !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}

    .vms-user-btn:hover {
        background: #f1f5f9 !important;
    }

/* Avatar circle */
.vms-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--vms-primary);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: 0.5px;
}

.vms-avatar-lg {
    width: 44px;
    height: 44px;
    font-size: 18px;
    flex-shrink: 0;
}

.vms-user-info {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    text-align: start;
}

.vms-user-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--vms-text);
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vms-user-role {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 500;
}

.vms-user-chevron {
    font-size: 10px;
    color: #94a3b8;
    transition: transform 0.18s;
}

.vms-user-btn[aria-expanded="true"] .vms-user-chevron {
    transform: rotate(180deg);
}

/* ── Profile dropdown ── */
.vms-profile-dropdown {
    display: none !important;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 230px;
    padding: 0;
    border: 1px solid #e8edf5;
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(26,39,68,0.14), 0 2px 8px rgba(0,0,0,0.06);
    overflow: hidden;
    z-index: 9999;
    background: #fff;
}

    .vms-profile-dropdown[dir="rtl"] {
        left: auto;
        right: 0;
    }

    .vms-profile-dropdown.vms-pd-open {
        display: block !important;
    }

/* Header section */
.vms-pd-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 16px 14px;
    background: linear-gradient(135deg, #1a2744 0%, #2d4270 100%);
}

    .vms-pd-header .vms-avatar {
        width: 42px;
        height: 42px;
        font-size: 16px;
        background: rgba(255,255,255,0.2);
        color: #fff;
        border: 2px solid rgba(255,255,255,0.35);
        flex-shrink: 0;
    }

.vms-pd-info {
    flex: 1;
    min-width: 0;
}

.vms-pd-name {
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.vms-pd-role {
    font-size: 11px;
    color: rgba(255,255,255,0.65);
    margin-top: 2px;
    font-weight: 500;
}

/* Menu items */
.vms-pd-divider {
    height: 1px;
    background: #f0f4fa;
    margin: 4px 0;
}

.vms-pd-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 500;
    color: #334155;
    text-decoration: none;
    transition: background 0.15s;
    cursor: pointer;
}

    .vms-pd-item:hover {
        background: #f5f8ff;
        color: #1a2744;
        text-decoration: none;
    }

    .vms-pd-item i {
        font-size: 14px;
        color: #1a2744;
        width: 18px;
        text-align: center;
        opacity: 0.75;
    }

    .vms-pd-item:hover i {
        opacity: 1;
    }

/* Logout item */
.vms-pd-logout {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px 13px;
    font-size: 13px;
    font-weight: 500;
    color: #dc2626 !important;
    text-decoration: none;
    transition: background 0.15s;
    cursor: pointer;
}

    .vms-pd-logout:hover {
        background: #fef2f2 !important;
        text-decoration: none;
    }

    .vms-pd-logout i {
        font-size: 14px;
        color: #dc2626 !important;
        width: 18px;
        text-align: center;
    }

/* ── Logout button ── */
.vms-logout-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 18px;
    font-size: 13px;
    font-weight: 700;
    color: #dc2626 !important;
    text-decoration: none !important;
    transition: background 0.15s;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

    .vms-logout-btn:hover {
        background: #fef2f2 !important;
        color: #dc2626 !important;
    }

    .vms-logout-btn i {
        font-size: 14px;
    }

/* Override old navbar-menu-wrapper interference */
.navbar-menu-wrapper {
    padding: 0 !important;
    height: auto !important;
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    display: block !important;
    overflow: visible !important;
}

.navbar-center-logo {
    display: none !important;
}

/* RTL: reverse actions order */
[dir="rtl"] .vms-topnav-actions {
    flex-direction: row-reverse;
}

[dir="rtl"] .vms-notif-badge {
    inset-inline-end: auto;
    inset-inline-start: 4px;
}

/* ===== Notification dropdown RTL fixes ===== */
.vms-notif-dropdown[dir="rtl"] .vms-notif-header {
    direction: rtl;
    text-align: right;
    font-family: 'Cairo', 'Tajawal', sans-serif;
}

.vms-notif-dropdown[dir="rtl"] .vms-notif-item {
    direction: rtl;
    text-align: right;
    flex-direction: row-reverse;
}

.vms-notif-dropdown[dir="rtl"] .vms-notif-dot {
    margin-inline-start: 0;
    margin-inline-end: 0;
}

.vms-notif-dropdown[dir="rtl"] .vms-notif-msg,
.vms-notif-dropdown[dir="rtl"] .vms-notif-time {
    direction: rtl;
    text-align: right;
    font-family: 'Cairo', 'Tajawal', sans-serif;
}

.vms-notif-dropdown[dir="rtl"] .vms-notif-footer {
    direction: rtl;
    font-family: 'Cairo', 'Tajawal', sans-serif;
}

.vms-notif-dropdown[dir="rtl"] .vms-notif-count-pill {
    margin-inline-start: auto;
    margin-inline-end: 0;
}

/* Let Popper.js handle dropdown positioning — z-index ensures they appear above sidebar */
.vms-profile-dropdown,
.vms-notif-dropdown {
    z-index: 9999 !important;
}

/* =================== DESIGN TOKENS =================== */
:root {
    /* ── Primary palette (Forest Green #244123) ── */
    --vms-primary: #244123; /* main brand color              */
    --vms-primary-dark: #1a2e19; /* darker — sidebar bg, headings */
    --vms-primary-mid: #2d5429; /* hover on buttons              */
    --vms-primary-light: #356030; /* lighter variant               */
    --vms-primary-pale: #eef5ee; /* very light bg for highlights  */
    --vms-primary-ring: rgba(36,65,35,0.25); /* focus ring          */
    /* keep legacy aliases pointing to primary */
    --vms-navy: #1a2e19;
    --vms-navy-mid: #244123;
    --vms-blue: #244123;
    --vms-blue-hover: #1a2e19;
    --vms-blue-pale: #eef5ee;
    --vms-blue-light: #d4e8d3;
    --vms-success: #059669;
    --vms-success-bg: #ecfdf5;
    --vms-warning: #d97706;
    --vms-warning-bg: #fffbeb;
    --vms-danger: #dc2626;
    --vms-danger-bg: #fef2f2;
    --vms-info: #0284c7;
    --vms-info-bg: #f0f9ff;
    --vms-bg: #f4f6f4; /* light green-tinted background  */
    --vms-card-bg: #ffffff;
    --vms-border: #dde8dd; /* green-tinted border            */
    --vms-border-focus: #244123;
    --vms-text: #1a2e19;
    --vms-text-secondary: #3d5a3c;
    --vms-text-muted: #7a9479;
    /* ── Sidebar colors ── */
    --vms-sidebar-bg: #1a2e19;
    --vms-sidebar-text: #ffffff;
    --vms-sidebar-active-bg: rgba(74,222,128,0.38);
    --vms-sidebar-active-text: #ffffff;
    --vms-sidebar-hover-bg: rgba(74,222,128,0.30);
    --vms-sidebar-hover-text: #ffffff;
    --vms-sidebar-accent: #4ade80;
    --vms-sidebar-width: 260px;
    --vms-navbar-bg: #ffffff;
    --vms-navbar-height: 64px;
    --vms-radius-sm: 6px;
    --vms-radius: 10px;
    --vms-radius-lg: 14px;
    --vms-radius-xl: 20px;
    --vms-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --vms-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
    --vms-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
    --vms-shadow-lg: 0 10px 25px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    --vms-transition: 0.18s ease;
}

/* =================== BASE & TYPOGRAPHY =================== */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    background: var(--vms-bg) !important;
    color: var(--vms-text) !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}

body {
    font-family: 'Cairo', 'Segoe UI', system-ui, -apple-system, sans-serif !important;
}

/* Arabic font override */
[lang="ar"] body,
.dir-rtl,
[dir="rtl"] {
    font-family: 'Cairo', sans-serif !important;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--vms-bg);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb {
    background: #a8c4a6;
    border-radius: 3px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--vms-primary-light);
    }

/* =================== TOP NAVBAR =================== */
nav.navbar.default-layout-navbar {
    background: var(--vms-navbar-bg) !important;
    border-bottom: 1px solid var(--vms-border) !important;
    box-shadow: 0 1px 8px rgba(0,0,0,0.08) !important;
    height: var(--vms-navbar-height) !important;
    min-height: var(--vms-navbar-height) !important;
    padding: 0 !important;
    z-index: 1100 !important;
}

.navbar-menu-wrapper {
    height: var(--vms-navbar-height) !important;
    background: var(--vms-navbar-bg) !important;
    border-bottom: none !important;
    padding: 0 24px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* Logo in navbar */
.navbar-center-logo img {
    height: 48px !important;
    object-fit: contain !important;
    filter: none !important;
}

/* User avatar in navbar */
.navbar-menu-wrapper img[alt="profile"] {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    border: 2px solid var(--vms-border) !important;
    object-fit: cover !important;
}

/* Language toggle icon */
#languageToggle {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    border: 2px solid var(--vms-border) !important;
    cursor: pointer !important;
    transition: border-color var(--vms-transition) !important;
}

    #languageToggle:hover {
        border-color: var(--vms-blue) !important;
    }

/* Bell icon */
.navbar-menu-wrapper .fa-bell {
    font-size: 18px !important;
    color: var(--vms-text-secondary) !important;
    transition: color var(--vms-transition) !important;
}

    .navbar-menu-wrapper .fa-bell:hover {
        color: var(--vms-blue) !important;
    }

/* Notification badge */
.navbar-menu-wrapper .bg-danger.rounded-circle {
    width: 8px !important;
    height: 8px !important;
    background: var(--vms-danger) !important;
    border: 2px solid #fff !important;
}

/* User name in navbar */
.navbar-menu-wrapper .fw-bold[style*="color: #333"] {
    color: var(--vms-text) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

/* Sign-out icon */
.fa-sign-out-alt {
    font-size: 18px !important;
    color: var(--vms-text-secondary) !important;
    transition: color var(--vms-transition) !important;
}

    .fa-sign-out-alt:hover {
        color: var(--vms-danger) !important;
    }

/* Notification dropdown */
.navbar-menu-wrapper .dropdown-menu {
    border: 1px solid var(--vms-border) !important;
    border-radius: var(--vms-radius) !important;
    box-shadow: var(--vms-shadow-lg) !important;
    padding: 8px 0 !important;
    font-size: 13px !important;
}

.navbar-menu-wrapper .dropdown-header {
    color: var(--vms-text) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    padding: 8px 16px !important;
}

.navbar-menu-wrapper .dropdown-item {
    padding: 10px 16px !important;
    color: var(--vms-text-secondary) !important;
    transition: background var(--vms-transition) !important;
    font-size: 13px !important;
}

    .navbar-menu-wrapper .dropdown-item:hover {
        background: var(--vms-blue-pale) !important;
        color: var(--vms-blue) !important;
    }

/* =================== SIDEBAR =================== */
/*
  POSITIONING NOTE:
  left/right and main-panel margins are handled by the layout's own
  language-specific <style> blocks (RTL → right:0 / LTR → left:0).
  We only override visual styling here, never position or margin.
*/
.sidebar {
    background: var(--vms-sidebar-bg) !important;
    box-shadow: 2px 0 16px rgba(0,0,0,0.18) !important;
    width: 250px !important;
    top: 0 !important;
    height: 100vh !important;
    min-height: unset !important;
    z-index: 1110 !important; /* above navbar (1100) — sidebar covers full height */
    overflow: hidden !important; /* brand stays fixed; nav scrolls */
    padding-bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Sidebar brand / system identity header — positioned below the fixed navbar */
.sidebar-brand {
    height: auto;
    display: flex;
    align-items: center;
    padding: 14px 16px 14px;
    margin-top: var(--vms-navbar-height);
    gap: 11px;
    background: rgba(0,0,0,0.18);
    border-bottom: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
    text-decoration: none;
}

.sidebar-brand-icon {
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, #4ade80 0%, #16a34a 100%);
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(74, 222, 128, 0.50);
}

.sidebar-brand-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.25;
    letter-spacing: 0.5px;
}

.sidebar-brand-subtitle {
    font-size: 0.68rem;
    color: rgba(255,255,255,0.48);
    letter-spacing: 0.3px;
}

/* Sidebar nav icon (per-module icon) */
.sidebar-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    font-size: 13px;
    color: rgba(255,255,255,0.45);
    transition: color 0.18s ease;
    margin-inline-end: 2px;
}

.sidebar .nav .nav-item > .nav-link:hover .sidebar-nav-icon,
.sidebar .nav .nav-item > .nav-link.active .sidebar-nav-icon,
.sidebar .nav .nav-item > .nav-link[aria-expanded="true"] .sidebar-nav-icon {
    color: var(--vms-sidebar-accent) !important;
}

/* Collapse containers must use sidebar dark background — prevent any white bleeding */
.sidebar .collapse,
.sidebar .collapsing {
    background: var(--vms-sidebar-bg) !important;
}

.sidebar .nav.sub-menu,
.sidebar .nav.sub-menu .nav-item {
    background: transparent !important;
}

/* ── Override old template rules that set white/near-white on nav-item ── */
.sidebar .nav .nav-item.active,
.sidebar .nav .nav-item:hover {
    background: transparent !important;
}
/* Old template sets dark text color on hover — force sidebar hover text */
.sidebar .nav:not(.sub-menu) > .nav-item:hover > .nav-link,
.sidebar .nav:not(.sub-menu) > .nav-item > .nav-link:hover {
    color: var(--vms-sidebar-hover-text) !important;
}
/* Sub-menu old template overrides */
.sidebar .nav.sub-menu .nav-item .nav-link:before {
    color: rgba(255,255,255,0.35) !important;
}

/* Nav scrolls independently; brand stays at top */
.sidebar .nav {
    padding-top: 4px !important;
    padding-bottom: 24px !important;
    list-style: none !important;
    margin: 0 !important;
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

    .sidebar .nav::-webkit-scrollbar {
        width: 4px !important;
    }

    .sidebar .nav::-webkit-scrollbar-track {
        background: transparent !important;
    }

    .sidebar .nav::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,0.1) !important;
        border-radius: 2px !important;
    }

    /* Module collapse toggle (parent nav-link) */
    .sidebar .nav .nav-item > .nav-link {
        display: flex !important;
        align-items: center !important;
        padding: 10px 12px !important;
        border-radius: var(--vms-radius-sm) !important;
        color: var(--vms-sidebar-text) !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        letter-spacing: 0.2px !important;
        white-space: normal !important;
        word-break: break-word !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease !important;
        cursor: pointer !important;
        text-decoration: none !important;
        gap: 8px !important;
        line-height: 1.4 !important;
        margin: 0 !important;
        /* transparent border to avoid layout shift on hover */
        border-inline-start: 3px solid transparent !important;
    }

        .sidebar .nav .nav-item > .nav-link:hover {
            background: var(--vms-sidebar-hover-bg) !important;
            color: var(--vms-sidebar-hover-text) !important;
            border-inline-start: 3px solid var(--vms-sidebar-accent) !important;
            padding-inline-start: 9px !important;
        }

        .sidebar .nav .nav-item > .nav-link.active,
        .sidebar .nav .nav-item > .nav-link[aria-expanded="true"] {
            background: var(--vms-sidebar-active-bg) !important;
            color: var(--vms-sidebar-active-text) !important;
            border-inline-start: 3px solid var(--vms-sidebar-accent) !important;
            padding-inline-start: 9px !important;
        }

    /* Module icon */
    .sidebar .nav .nav-item .menu-icon {
        font-size: 15px !important;
        color: #64748b !important;
        flex-shrink: 0 !important;
        transition: color var(--vms-transition) !important;
    }

    .sidebar .nav .nav-item > .nav-link:hover .menu-icon,
    .sidebar .nav .nav-item > .nav-link.active .menu-icon {
        color: var(--vms-sidebar-active-text) !important;
    }

    /* Arrow icon */
    .sidebar .nav .nav-item .menu-arrow {
        width: 14px !important;
        height: 14px !important;
        margin-inline-start: auto !important;
        flex-shrink: 0 !important;
        transition: transform var(--vms-transition) !important;
        display: inline-block !important;
    }

        .sidebar .nav .nav-item .menu-arrow::before {
            content: '\f078' !important;
            font-family: 'Font Awesome 5 Free' !important;
            font-weight: 900 !important;
            font-size: 10px !important;
            color: #64748b !important;
            display: block !important;
        }

    .sidebar .nav .nav-item > .nav-link[aria-expanded="true"] .menu-arrow {
        transform: rotate(180deg) !important;
    }

    /* ── Sub-menu: reset ALL old margin/width hacks ── */
    .sidebar .nav.sub-menu {
        padding: 4px 0 6px 0 !important;
        margin: 0 !important; /* ← fix: kill margin-right: -55px / -2vw */
        list-style: none !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

        .sidebar .nav.sub-menu .nav-item {
            padding: 1px 6px !important;
            width: 100% !important;
            box-sizing: border-box !important;
        }

            .sidebar .nav.sub-menu .nav-item .nav-link {
                display: block !important;
                padding: 8px 12px 8px 22px !important;
                font-size: 12.5px !important;
                font-weight: 400 !important;
                color: rgba(255,255,255,0.75) !important;
                border-radius: var(--vms-radius-sm) !important;
                text-decoration: none !important;
                transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
                white-space: normal !important;
                word-break: break-word !important;
                line-height: 1.5 !important;
                position: relative !important;
                width: 100% !important;
                max-width: 100% !important;
                box-sizing: border-box !important;
                margin: 0 !important;
                margin-right: 0 !important;
                margin-left: 0 !important;
                border-inline-start: 2px solid transparent !important;
            }

                /* Sub-menu bullet */
                .sidebar .nav.sub-menu .nav-item .nav-link::before {
                    content: '' !important;
                    position: absolute !important;
                    width: 5px !important;
                    height: 5px !important;
                    border-radius: 50% !important;
                    background: rgba(255,255,255,0.35) !important;
                    top: 50% !important;
                    transform: translateY(-50%) !important;
                    inset-inline-start: 10px !important;
                    transition: background var(--vms-transition) !important;
                }

                .sidebar .nav.sub-menu .nav-item .nav-link:hover {
                    background: var(--vms-sidebar-hover-bg) !important;
                    color: var(--vms-sidebar-hover-text) !important;
                    border-inline-start: 2px solid var(--vms-sidebar-accent) !important;
                }

                    .sidebar .nav.sub-menu .nav-item .nav-link:hover::before {
                        background: var(--vms-sidebar-accent) !important;
                    }

                .sidebar .nav.sub-menu .nav-item .nav-link.active {
                    background: var(--vms-sidebar-active-bg) !important;
                    color: var(--vms-sidebar-active-text) !important;
                    font-weight: 600 !important;
                    border-inline-start: 2px solid var(--vms-sidebar-accent) !important;
                }

    /* Sidebar divider between modules */
    .sidebar .nav .nav-item + .nav-item {
        border-top: 1px solid rgba(255,255,255,0.04) !important;
    }

/* Sidebar container scrollbar (fallback) */
.sidebar::-webkit-scrollbar {
    width: 0 !important;
}

/* =================== BREADCRUMB (REUSABLE) =================== */
.vms-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border: 1px solid var(--vms-border);
    border-radius: 10px;
    padding: 11px 18px;
    margin-bottom: 18px;
    box-shadow: 0 1px 4px rgba(36,65,35,0.06);
}

.vms-breadcrumb {
    display: flex;
    align-items: center;
    gap: 5px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

.vms-bc-item {
    display: flex;
    align-items: center;
}

.vms-bc-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--vms-primary);
    font-size: .84rem;
    font-weight: 600;
    text-decoration: none;
    transition: color .15s;
}

    .vms-bc-link:hover {
        color: var(--vms-primary-dark);
        text-decoration: underline;
    }

.vms-bc-sep {
    color: #94a3b8;
    font-size: 11px;
    margin: 0 2px;
}

.vms-bc-module {
    color: #64748b;
    font-size: .84rem;
    font-weight: 500;
}

.vms-bc-current {
    color: var(--vms-primary-dark);
    font-size: .84rem;
    font-weight: 700;
}

.vms-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    padding: 7px 16px;
    color: #64748b;
    font-size: .84rem;
    font-weight: 600;
    text-decoration: none;
    transition: all .15s;
    white-space: nowrap;
}

    .vms-back-btn:hover {
        background: var(--vms-primary-pale);
        border-color: var(--vms-border);
        color: var(--vms-primary);
    }

/* =================== MAIN PANEL & CONTENT =================== */
/*
  margin-left / margin-right handled by layout's language <style> blocks.
  We only set visual / background properties.
*/
.main-panel {
    background: var(--vms-bg) !important;
    min-height: 100vh !important;
}

.content-wrapper {
    padding: 2px !important;
    background: var(--vms-bg) !important;
    min-height: calc(100vh - var(--vms-navbar-height) - 48px) !important;
    width: 100% !important;
}

    /* =================== PAGE HEADER =================== */
    .page-header,
    .content-wrapper > .row:first-child > div > h2,
    .content-wrapper h2 {
        font-size: 20px !important;
        font-weight: 700 !important;
        color: var(--vms-text) !important;
        margin-bottom: 20px !important;
        padding: 0 !important;
        background: none !important;
        border: none !important;
        text-align: start !important;
    }

/* =================== CARDS =================== */
.card {
    background: var(--vms-card-bg) !important;
    border: 1px solid var(--vms-border) !important;
    border-radius: var(--vms-radius-lg) !important;
    box-shadow: var(--vms-shadow) !important;
    transition: box-shadow var(--vms-transition) !important;
    overflow: hidden !important;
}

    .card:hover {
        box-shadow: var(--vms-shadow-md) !important;
    }

.card-body {
    padding: 20px 24px !important;
}

.card-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--vms-text) !important;
    margin-bottom: 16px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* Stat cards (colored gradient) */
.card.bg-gradient-danger,
.card.bg-gradient-info,
.card.bg-gradient-success,
.card.bg-gradient-warning,
.card.bg-gradient-primary {
    border: none !important;
    border-radius: var(--vms-radius-lg) !important;
    position: relative !important;
    overflow: hidden !important;
}

.card.bg-gradient-danger {
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%) !important;
}

.card.bg-gradient-info {
    background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%) !important;
}

.card.bg-gradient-success {
    background: linear-gradient(135deg, #34d399 0%, #059669 100%) !important;
}

.card.bg-gradient-warning {
    background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%) !important;
}

.card.bg-gradient-primary {
    background: linear-gradient(135deg, var(--vms-primary-light) 0%, var(--vms-primary) 100%) !important;
}

    .card.bg-gradient-danger .card-body h3,
    .card.bg-gradient-info .card-body h3,
    .card.bg-gradient-success .card-body h3,
    .card.bg-gradient-warning .card-body h3,
    .card.bg-gradient-primary .card-body h3 {
        font-size: 14px !important;
        font-weight: 500 !important;
        opacity: 0.9 !important;
        margin-bottom: 8px !important;
        font-family: 'Cairo', sans-serif !important;
        text-shadow: none !important;
    }

    .card.bg-gradient-danger .card-body h1,
    .card.bg-gradient-info .card-body h1,
    .card.bg-gradient-success .card-body h1,
    .card.bg-gradient-warning .card-body h1,
    .card.bg-gradient-primary .card-body h1 {
        font-size: 42px !important;
        font-weight: 800 !important;
        color: #ffffff !important;
        background: none !important;
        text-align: start !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.1 !important;
    }

/* Decorative circle on stat cards */
.card-img-absolute {
    position: absolute !important;
    top: -20px !important;
    opacity: 0.12 !important;
    width: 160px !important;
}

[dir="rtl"] .card-img-absolute {
    right: -20px !important;
    left: auto !important;
}

[dir="ltr"] .card-img-absolute {
    left: -20px !important;
    right: auto !important;
}

/* =================== STAT CARD (MODERN FLAT) =================== */
.vms-stat-card {
    background: var(--vms-card-bg);
    border: 1px solid var(--vms-border);
    border-radius: var(--vms-radius-lg);
    padding: 20px 24px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    box-shadow: var(--vms-shadow);
    transition: all var(--vms-transition);
    cursor: default;
}

    .vms-stat-card:hover {
        box-shadow: var(--vms-shadow-md);
        transform: translateY(-1px);
    }

.vms-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--vms-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 20px;
}

    .vms-stat-icon.danger {
        background: var(--vms-danger-bg);
        color: var(--vms-danger);
    }

    .vms-stat-icon.info {
        background: var(--vms-info-bg);
        color: var(--vms-info);
    }

    .vms-stat-icon.success {
        background: var(--vms-success-bg);
        color: var(--vms-success);
    }

    .vms-stat-icon.warning {
        background: var(--vms-warning-bg);
        color: var(--vms-warning);
    }

    .vms-stat-icon.primary {
        background: var(--vms-primary-pale);
        color: var(--vms-primary);
    }

.vms-stat-body {
    flex: 1;
    min-width: 0;
}

.vms-stat-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--vms-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.vms-stat-value {
    font-size: 32px;
    font-weight: 800;
    color: var(--vms-text);
    line-height: 1;
    margin-bottom: 4px;
}

.vms-stat-sub {
    font-size: 12px;
    color: var(--vms-text-muted);
}

/* =================== TABLES =================== */
.table,
table.dataTable,
#dataGrid {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    font-size: 13px !important;
    color: var(--vms-text) !important;
    background: var(--vms-card-bg) !important;
}

/* Table wrapper */
.table-responsive,
.grid-margin {
    background: var(--vms-card-bg) !important;
    border: 1px solid var(--vms-border) !important;
    border-radius: var(--vms-radius-lg) !important;
    box-shadow: var(--vms-shadow) !important;
    overflow: hidden !important;
}

/* Table header */
.table thead th,
table.dataTable thead th,
#dataGrid thead th {
    background: #f8fafc !important;
    color: var(--vms-text-secondary) !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 14px 16px !important;
    border-bottom: 2px solid var(--vms-border) !important;
    border-top: none !important;
    white-space: nowrap !important;
}

/* Table body rows */
.table tbody tr,
table.dataTable tbody tr,
#dataGrid tbody tr {
    border-bottom: 1px solid var(--vms-border) !important;
    transition: background var(--vms-transition) !important;
}

    .table tbody tr:last-child,
    #dataGrid tbody tr:last-child {
        border-bottom: none !important;
    }

    .table tbody tr:hover,
    table.dataTable tbody tr:hover,
    #dataGrid tbody tr:hover {
        background: #f8fafc !important;
    }

.table tbody td,
table.dataTable tbody td,
#dataGrid tbody td {
    padding: 13px 16px !important;
    vertical-align: middle !important;
    border: none !important;
    color: var(--vms-text) !important;
    font-size: 13px !important;
}

/* Striped rows */
.table-striped tbody tr:nth-of-type(odd) {
    background: rgba(241,245,249,0.5) !important;
}

/* Table action icons */
.table td i.material-icons,
.table td i.fa,
.table td i.fas,
.table td i.far {
    cursor: pointer !important;
    padding: 6px !important;
    border-radius: 6px !important;
    transition: all var(--vms-transition) !important;
    font-size: 15px !important;
}

    .table td i.material-icons:hover,
    .table td i.fa:hover {
        background: var(--vms-blue-pale) !important;
        color: var(--vms-blue) !important;
    }

/* =================== SEARCH BOX =================== */
#searchField,
input[id*="search"],
input[id*="Search"] {
    border: 1px solid var(--vms-border) !important;
    border-radius: var(--vms-radius-xl) !important;
    padding: 8px 16px 8px 40px !important;
    font-size: 13px !important;
    background: #fff !important;
    color: var(--vms-text) !important;
    transition: border-color var(--vms-transition), box-shadow var(--vms-transition) !important;
    min-width: 240px !important;
}

[dir="rtl"] #searchField,
[dir="rtl"] input[id*="search"] {
    padding: 8px 40px 8px 16px !important;
}

#searchField:focus,
input[id*="search"]:focus {
    border-color: var(--vms-border-focus) !important;
    box-shadow: 0 0 0 3px var(--vms-primary-ring) !important;
    outline: none !important;
}

/* =================== FORMS & INPUTS =================== */
.form-control,
.form-select,
select.form-control,
input.form-control,
textarea.form-control {
    border: 1px solid var(--vms-border) !important;
    border-radius: var(--vms-radius-sm) !important;
    padding: 9px 14px !important;
    font-size: 13px !important;
    color: var(--vms-text) !important;
    background: #ffffff !important;
    transition: border-color var(--vms-transition), box-shadow var(--vms-transition) !important;
    box-shadow: var(--vms-shadow-sm) !important;
    height: auto !important;
}

    .form-control:focus,
    .form-select:focus {
        border-color: var(--vms-border-focus) !important;
        box-shadow: 0 0 0 3px var(--vms-primary-ring) !important;
        outline: none !important;
        background: #fff !important;
    }

    .form-control::placeholder {
        color: var(--vms-text-muted) !important;
    }

    .form-control.error,
    .form-control:invalid:not(:focus):not(:placeholder-shown) {
        border-color: var(--vms-danger) !important;
        background: var(--vms-danger-bg) !important;
    }

/* Labels */
.form-group label,
label.form-label,
label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--vms-text-secondary) !important;
    margin-bottom: 6px !important;
    display: block !important;
}

/* Form group spacing */
.form-group {
    margin-bottom: 16px !important;
}

/* Select2 override */
.select2-container--default .select2-selection--single {
    border: 1px solid var(--vms-border) !important;
    border-radius: var(--vms-radius-sm) !important;
    height: 38px !important;
    background: #fff !important;
}

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 38px !important;
        color: var(--vms-text) !important;
        font-size: 13px !important;
        padding-inline-start: 14px !important;
    }

    .select2-container--default .select2-selection--single:focus,
    .select2-container--default.select2-container--focus .select2-selection--single {
        border-color: var(--vms-border-focus) !important;
        box-shadow: 0 0 0 3px var(--vms-primary-ring) !important;
    }

/* =================== BUTTONS =================== */
.btn,
button:not(.navbar-toggler):not([class*="close"]) {
    border-radius: var(--vms-radius-sm) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 8px 18px !important;
    transition: all var(--vms-transition) !important;
    border-width: 1px !important;
    border-style: solid !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    line-height: 1.5 !important;
}

/* Primary button */
.btn-primary,
[data-theme="brown"] .btn,
[data-theme="brown"] button,
[data-theme="brown"] input[type="button"],
[data-theme="brown"] input[type="submit"] {
    background: var(--vms-navy-mid) !important;
    border-color: var(--vms-navy-mid) !important;
    color: #ffffff !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15) !important;
}

    .btn-primary:hover,
    [data-theme="brown"] .btn:hover,
    [data-theme="brown"] button:hover {
        background: var(--vms-navy) !important;
        border-color: var(--vms-navy) !important;
        color: #ffffff !important;
        box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
        transform: translateY(-1px) !important;
    }

/* Secondary / ghost button */
.btn-secondary,
.btn-outline,
.ghost-btn {
    background: transparent !important;
    border: 1.5px solid var(--vms-border-dark) !important;
    color: var(--vms-text-secondary) !important;
    border-radius: var(--vms-radius-xl) !important;
}

    .btn-secondary:hover,
    .ghost-btn:hover {
        background: var(--vms-blue-pale) !important;
        border-color: var(--vms-blue) !important;
        color: var(--vms-blue) !important;
    }

/* Success button */
.btn-success {
    background: var(--vms-success) !important;
    border-color: var(--vms-success) !important;
    color: #fff !important;
}

    .btn-success:hover {
        background: #047857 !important;
        border-color: #047857 !important;
    }

/* Danger button */
.btn-danger {
    background: var(--vms-danger) !important;
    border-color: var(--vms-danger) !important;
    color: #fff !important;
}

    .btn-danger:hover {
        background: #b91c1c !important;
        border-color: #b91c1c !important;
    }

/* Warning button */
.btn-warning {
    background: var(--vms-warning) !important;
    border-color: var(--vms-warning) !important;
    color: #fff !important;
}

/* Small button */
.btn-sm {
    padding: 5px 12px !important;
    font-size: 12px !important;
}

/* Large button */
.btn-lg {
    padding: 12px 28px !important;
    font-size: 15px !important;
}

/* Button with icon */
.btn .material-icons,
.btn i.fa,
.btn i.fas,
.btn i.far {
    font-size: 15px !important;
    vertical-align: middle !important;
}

/* =================== BADGES =================== */
.badge,
.label {
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

    .badge.bg-success, .badge-success {
        background: var(--vms-success-bg) !important;
        color: var(--vms-success) !important;
    }

    .badge.bg-danger, .badge-danger {
        background: var(--vms-danger-bg) !important;
        color: var(--vms-danger) !important;
    }

    .badge.bg-warning, .badge-warning {
        background: var(--vms-warning-bg) !important;
        color: var(--vms-warning) !important;
    }

    .badge.bg-info, .badge-info {
        background: var(--vms-info-bg) !important;
        color: var(--vms-info) !important;
    }

    .badge.bg-primary, .badge-primary {
        background: var(--vms-primary-pale) !important;
        color: var(--vms-primary) !important;
    }

/* =================== COLLAPSIBLE SECTIONS =================== */
.collapsible,
button.collapsible {
    background: var(--vms-navy-mid) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: var(--vms-radius) !important;
    padding: 12px 20px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-align: start !important;
    cursor: pointer !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 2px !important;
    transition: background var(--vms-transition) !important;
    box-shadow: var(--vms-shadow-sm) !important;
}

    .collapsible:hover,
    button.collapsible:hover {
        background: var(--vms-navy) !important;
    }

    .collapsible.active,
    button.collapsible.active {
        background: var(--vms-navy) !important;
        border-radius: var(--vms-radius) var(--vms-radius) 0 0 !important;
    }

    /* Collapsible content */
    .collapsible + div,
    .collapsible-content {
        background: #fff !important;
        border: 1px solid var(--vms-border) !important;
        border-top: none !important;
        border-radius: 0 0 var(--vms-radius) var(--vms-radius) !important;
        padding: 20px !important;
        margin-bottom: 12px !important;
    }

/* h2 used as section header in forms */
[data-theme="brown"] h2,
h2.section-title {
    background: var(--vms-navy-mid) !important;
    color: #ffffff !important;
    border-radius: var(--vms-radius-sm) !important;
    padding: 12px 20px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    margin: 0 0 16px 0 !important;
    text-align: start !important;
    border: none !important;
}

/* =================== ALERTS =================== */
.alert {
    border-radius: var(--vms-radius) !important;
    border-width: 1px !important;
    padding: 12px 16px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.alert-success {
    background: var(--vms-success-bg) !important;
    border-color: #a7f3d0 !important;
    color: #065f46 !important;
}

.alert-danger,
.alert-error {
    background: var(--vms-danger-bg) !important;
    border-color: #fecaca !important;
    color: #991b1b !important;
}

.alert-warning {
    background: var(--vms-warning-bg) !important;
    border-color: #fde68a !important;
    color: #92400e !important;
}

.alert-info {
    background: var(--vms-info-bg) !important;
    border-color: #bae6fd !important;
    color: #0c4a6e !important;
}

/* =================== MODALS =================== */
/* Stack modals above the fixed layout. The navbar (1100) and sidebar (1110-1120) are fixed with high
   z-indexes, while Bootstrap puts modals at 1055 and the backdrop at 1050 - so modals opened *under*
   the top bar, which covered the header and its close button (clicks hit the navbar instead).
   Some views also forced the backdrop to -1 (--bs-backdrop-zindex: -1) to work around it. */
.modal {
    z-index: 1200 !important;
}

.modal-backdrop {
    z-index: 1190 !important;
}
/* SweetAlert2 pop-ups (default 1060) must also sit above the layout and any open modal */
.swal2-container {
    z-index: 1300 !important;
}

.modal-content {
    border: none !important;
    border-radius: var(--vms-radius-lg) !important;
    box-shadow: var(--vms-shadow-lg) !important;
}

/* Plain header for every modal (was a solid green title bar) */
.modal-header {
    background: transparent !important;
    color: var(--vms-text, #1e293b) !important;
    border-radius: var(--vms-radius-lg) var(--vms-radius-lg) 0 0 !important;
    padding: 14px 20px !important;
    border-bottom: 1px solid var(--vms-border, #e2e8f0) !important;
}

    .modal-header .modal-title {
        font-size: 16px !important;
        font-weight: 700 !important;
        color: var(--vms-text, #1e293b) !important;
    }

/* Close (x) button - always visible. The global button rules (incl. [data-theme="brown"] button,
   which sets background with !important) wiped Bootstrap's icon, leaving an empty coloured square. */
button.btn-close,
.btn-close {
    box-sizing: content-box !important;
    width: 1em !important;
    height: 1em !important;
    padding: 0.4em !important;
    margin: 0 !important;
    margin-inline-start: auto !important;
    border: 0 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    transform: none !important;
    color: #000 !important;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center / 1em auto no-repeat !important;
    opacity: 0.55 !important;
    filter: none !important;
    cursor: pointer !important;
}

    button.btn-close:hover,
    .btn-close:hover {
        opacity: 0.9 !important;
        background-color: rgba(15, 23, 42, 0.06) !important;
    }
/* A header that only holds the close button (e.g. the image viewers): keep the x on the RIGHT in both
   English and Arabic. margin-left:auto pushes it to the right edge in LTR and RTL alike. Headers with a
   title keep the logical position above (x opposite the title). */
.modal-header:not(:has(.modal-title)) .btn-close {
    margin-left: auto !important;
    margin-right: 0 !important;
}

/* white x where a modal header/toast sets .btn-close-white on a dark background */
.btn-close.btn-close-white {
    filter: invert(1) grayscale(100%) brightness(200%) !important;
}

.modal-body {
    padding: 24px !important;
    font-size: 14px !important;
}

.modal-footer {
    padding: 16px 24px !important;
    border-top: 1px solid var(--vms-border) !important;
    gap: 8px !important;
}

/* =================== PAGINATION =================== */
.pagination {
    gap: 4px !important;
}

.page-item .page-link {
    border: 1px solid var(--vms-border) !important;
    border-radius: var(--vms-radius-sm) !important;
    color: var(--vms-text-secondary) !important;
    padding: 7px 13px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    transition: all var(--vms-transition) !important;
    background: #fff !important;
}

    .page-item .page-link:hover {
        background: var(--vms-blue-pale) !important;
        border-color: var(--vms-blue) !important;
        color: var(--vms-blue) !important;
    }

.page-item.active .page-link {
    background: var(--vms-primary) !important;
    border-color: var(--vms-primary) !important;
    color: #fff !important;
}

.page-item.disabled .page-link {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
}

/* =================== FOOTER =================== */
footer.footer {
    background: #ffffff !important;
    border-top: 1px solid var(--vms-border) !important;
    padding: 14px 24px !important;
    font-size: 12px !important;
    color: var(--vms-text-muted) !important;
    text-align: center !important;
}

/* =================== VISIT NUMBER BANNER =================== */
#divVisitNumber {
    background: linear-gradient(135deg, var(--vms-primary), var(--vms-primary-dark)) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: var(--vms-radius) !important;
    padding: 14px 24px !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    text-align: center !important;
    box-shadow: var(--vms-shadow-md) !important;
    letter-spacing: 0.5px !important;
}

/* =================== CHART AREA =================== */
.chart-container,
canvas[id*="Chart"],
canvas[id*="chart"] {
    border-radius: var(--vms-radius) !important;
}

/* Chart buttons */
#barChart2 + .mt-4 .btn,
button[onclick*="drillDown"] {
    background: var(--vms-navy-mid) !important;
    border-color: var(--vms-navy-mid) !important;
    color: #fff !important;
    border-radius: var(--vms-radius-sm) !important;
    font-size: 12px !important;
    padding: 7px 16px !important;
}

/* Dashboard time period buttons */
button[onclick*="Today"],
button[onclick*="Week"],
button[onclick*="Month"],
button[onclick*="Year"] {
    background: var(--vms-card-bg) !important;
    border: 1px solid var(--vms-border) !important;
    color: var(--vms-text-secondary) !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    padding: 6px 14px !important;
    font-weight: 600 !important;
    transition: all var(--vms-transition) !important;
}

    button[onclick*="Today"]:hover,
    button[onclick*="Week"]:hover,
    button[onclick*="Month"]:hover,
    button[onclick*="Year"]:hover {
        background: var(--vms-navy-mid) !important;
        color: #fff !important;
        border-color: var(--vms-navy-mid) !important;
    }

/* =================== SweetAlert2 OVERRIDES =================== */
.swal2-popup {
    border-radius: var(--vms-radius-lg) !important;
    font-size: 14px !important;
    font-family: 'Cairo', sans-serif !important;
}

.swal2-confirm {
    background: var(--vms-navy-mid) !important;
    border-radius: var(--vms-radius-sm) !important;
    font-weight: 700 !important;
}

.swal2-cancel {
    background: #e2e8f0 !important;
    color: var(--vms-text) !important;
    border-radius: var(--vms-radius-sm) !important;
}

/* =================== HOME PAGE QUICK ACTIONS =================== */
.ghost-btn {
    background: #ffffff !important;
    border: 1.5px solid var(--vms-border) !important;
    color: var(--vms-text-secondary) !important;
    border-radius: var(--vms-radius-xl) !important;
    padding: 8px 20px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all var(--vms-transition) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-shadow: var(--vms-shadow-sm) !important;
}

    .ghost-btn:hover {
        background: var(--vms-navy-mid) !important;
        border-color: var(--vms-navy-mid) !important;
        color: #ffffff !important;
        box-shadow: var(--vms-shadow-md) !important;
        transform: translateY(-1px) !important;
        text-decoration: none !important;
    }

    .ghost-btn .material-icons {
        font-size: 16px !important;
        vertical-align: middle !important;
    }

/* =================== PAGE BREADCRUMB / HEADER AREA =================== */
.page-title-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--vms-border);
}

    .page-title-area h1,
    .page-title-area h2 {
        font-size: 20px !important;
        font-weight: 700 !important;
        color: var(--vms-text) !important;
        background: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

/* =================== LOADING STATE =================== */
.vms-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
    color: var(--vms-text-muted);
    font-size: 13px;
    gap: 10px;
}

/* =================== EMPTY STATE =================== */
.vms-empty {
    text-align: center;
    padding: 48px 24px;
    color: var(--vms-text-muted);
}

    .vms-empty i {
        font-size: 48px;
        opacity: 0.3;
        display: block;
        margin-bottom: 12px;
    }

    .vms-empty p {
        font-size: 14px;
        margin: 0;
    }

/* =================== DROPDOWN MENUS =================== */
.dropdown-menu {
    border: 1px solid var(--vms-border) !important;
    border-radius: var(--vms-radius) !important;
    box-shadow: var(--vms-shadow-lg) !important;
    padding: 6px !important;
    font-size: 13px !important;
}

.dropdown-item {
    border-radius: 6px !important;
    padding: 8px 12px !important;
    color: var(--vms-text-secondary) !important;
    font-size: 13px !important;
    transition: all var(--vms-transition) !important;
}

    .dropdown-item:hover {
        background: var(--vms-blue-pale) !important;
        color: var(--vms-blue) !important;
    }

.dropdown-divider {
    border-color: var(--vms-border) !important;
    margin: 4px 0 !important;
}

/* =================== PRINT =================== */
@media print {
    .sidebar, nav.navbar, footer.footer {
        display: none !important;
    }

    .main-panel {
        margin: 0 !important;
        width: 100% !important;
    }

    .content-wrapper {
        padding: 0 !important;
    }
}

/* =================== RESPONSIVE =================== */
/* Menu button + backdrop only exist on tablets/phones */
.vms-menu-toggle {
    display: none !important;
}

.vms-sidebar-backdrop {
    display: none;
}

/* ---- Tablets & phones (< 992px): sidebar becomes a slide-in drawer ----
   _Layout.cshtml's inline <style> blocks load after this file and pin the sidebar/navbar with
   !important (e.g. navbar right: 250px), so these rules use body.vms-rtl / body.vms-ltr for
   higher specificity. RTL is set via CSS (direction), not a dir attribute, hence the body class. */
@media (max-width: 991.98px) {
    body.vms-ltr .sidebar,
    body.vms-rtl .sidebar {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        height: 100vh !important;
        max-height: none !important;
        margin-top: 0 !important;
        width: 280px !important;
        max-width: 85vw !important;
        overflow-y: auto !important;
        transition: transform 0.3s ease !important;
        z-index: 1120 !important;
    }

    body.vms-ltr .sidebar {
        left: 0 !important;
        right: auto !important;
        transform: translateX(-100%) !important;
    }

    body.vms-rtl .sidebar {
        right: 0 !important;
        left: auto !important;
        transform: translateX(100%) !important;
    }

        body.vms-ltr .sidebar.sidebar-open,
        body.vms-rtl .sidebar.sidebar-open {
            transform: none !important;
        }

    /* the brand header no longer needs to sit below the navbar - the drawer covers it */
    body .sidebar .sidebar-brand {
        margin-top: 0 !important;
    }

    .vms-sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.45);
        z-index: 1115;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    body.vms-sidebar-is-open .vms-sidebar-backdrop {
        opacity: 1;
        visibility: visible;
    }

    body.vms-sidebar-is-open {
        overflow: hidden;
    }
    /* no page scroll behind the open drawer */

    /* navbar spans the full width (no 250px gap for a hidden sidebar) */
    body.vms-ltr nav.navbar.default-layout-navbar,
    body.vms-rtl nav.navbar.default-layout-navbar {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
    }

    body .main-panel {
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
        width: 100% !important;
    }

    .content-wrapper {
        padding: 16px !important;
    }

    /* top bar: menu button + compact controls */
    #vmsTopnav {
        padding: 0 12px !important;
        gap: 8px;
    }

        #vmsTopnav .vms-menu-toggle {
            display: inline-flex !important;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            padding: 0 !important;
            border-radius: 10px !important;
            font-size: 18px !important;
            flex-shrink: 0;
        }

    /* wide fixed banner used on visit pages */
    #divVisitNumber {
        position: static !important;
        width: auto !important;
        margin: 0 0 12px 0 !important;
        font-size: 1.25rem !important;
    }

    /* centred + overflow cut off the first steps; start-aligned they can be scrolled */
    .wizard-steps-bar {
        justify-content: flex-start !important;
        padding: 12px !important;
    }

    .wizard-step-connector {
        min-width: 16px !important;
        flex: 1 1 16px !important;
    }
}

/* ---- Phones (< 768px) ---- */
@media (max-width: 767.98px) {
    .content-wrapper {
        padding: 12px !important;
    }

    .card-body {
        padding: 16px !important;
    }

    .ghost-btn {
        padding: 7px 14px !important;
        font-size: 12px !important;
    }

    /* top bar: icons only */
    #vmsTopnav .vms-user-name,
    #vmsTopnav .vms-user-chevron {
        display: none !important;
    }

    #vmsTopnav .vms-logout-direct {
        font-size: 0 !important;
        padding: 8px 10px !important;
    }

        #vmsTopnav .vms-logout-direct i {
            font-size: 16px !important;
            margin: 0 !important;
        }

    /* nothing wider than the screen */
    .content-wrapper img,
    .content-wrapper video,
    .content-wrapper iframe,
    .content-wrapper canvas {
        max-width: 100% !important;
    }

    .content-wrapper input,
    .content-wrapper select,
    .content-wrapper textarea {
        max-width: 100% !important;
    }

    /* wide tables scroll sideways inside their card instead of stretching the page */
    .content-wrapper table:not(.table-condensed):not(.ui-datepicker-calendar) {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Bootstrap grid rows/cols that were laid out for desktop */
    .content-wrapper .row > [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* side-by-side form fields written as inline "display: flex" rows stack on phones */
    .content-wrapper [style*="display: flex"]:not(.wizard-steps-bar):not(.wizard-nav-row):not(.wizard-step-item),
    .content-wrapper [style*="display:flex"]:not(.wizard-steps-bar):not(.wizard-nav-row):not(.wizard-step-item) {
        flex-wrap: wrap !important;
    }

    .content-wrapper [style*="display: flex"] > [style*="flex: 1"],
    .content-wrapper [style*="display: flex"] > [style*="flex: 2"],
    .content-wrapper [style*="display: flex"] > [style*="flex: 3"],
    .content-wrapper [style*="display:flex"] > [style*="flex:1"],
    .content-wrapper [style*="display:flex"] > [style*="flex:2"],
    .content-wrapper [style*="display:flex"] > [style*="flex:3"] {
        flex: 1 1 100% !important;
        min-width: 0 !important;
    }

    /* Prev / Next / Send buttons stay usable */
    .wizard-nav-row {
        flex-wrap: wrap;
        gap: 8px;
    }

        .wizard-nav-row .wizard-btn {
            flex: 1 1 auto;
            justify-content: center;
        }

    /* modals fit the screen */
    .modal-dialog {
        margin: 8px !important;
        max-width: calc(100% - 16px) !important;
    }
}

/* =================== BACK BUTTON (one look everywhere) ===================
   Standard markup:
     <a href="..." class="grp-back-btn"><i class="fas fa-arrow-right|left"></i> Back</a>
   (arrow right in Arabic, left in English). This was defined separately inside ~26 pages, 4 of them with
   a different look; it now lives here so every page's Back button is identical. */
.grp-back-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: #f8fafc; border: 1.5px solid #e2e8f0; border-radius: 8px;
  padding: 7px 16px; color: #64748b; font-size: .84rem; font-weight: 600;
  text-decoration: none; transition: all .15s; white-space: nowrap; cursor: pointer;
}
.grp-back-btn:hover { background: #f0f7f0; border-color: #c8d9c7; color: #244123; text-decoration: none; }

/* =================== GRIDS: grow with their content (no inner scroll) ===================
   Grids were wrapped in boxes with a fixed max-height (mostly an inline "max-height:420px; overflow-y:auto"
   in ~30 views, plus #tableContainer / .table-scroll-wrapper / .tbl-wrap), so each grid scrolled inside
   itself. Now the wrapper is as tall as the table and the page scrolls instead. Lists are paged, so they
   stay short. Only boxes that directly hold a <table> are affected - dropdowns, checkbox lists and
   image previews keep their own max-height; date-picker tables are excluded.
   Horizontal scrolling for wide tables (overflow-x) is unchanged. */
.content-wrapper div:has(> table):not([class*="datepicker"]),
.content-wrapper #tableContainer,
.content-wrapper .table-scroll-wrapper,
.content-wrapper .tbl-wrap {
  max-height: none !important;
  overflow-y: visible !important;
}

/* =================== LIST PAGER (Views/ReviewVisit/_RvPagination.cshtml) ===================
   Scoped to .rv-pagination with !important because the global button rules above style every <button>. */
.rv-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid #eef5ee;
}

    .rv-pagination .rv-page-btn {
        background: #f0f7f0 !important;
        color: #244123 !important;
        border: 1.5px solid #c8d9c7 !important;
        border-radius: 8px !important;
        padding: 5px 14px !important;
        font-size: .84rem !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        transition: all .15s !important;
        box-shadow: none !important;
        transform: none !important;
        min-width: 38px;
        justify-content: center;
    }

        .rv-pagination .rv-page-btn:hover:not(:disabled) {
            background: #dde8dd !important;
            color: #1a2e19 !important;
            border-color: #244123 !important;
        }

        .rv-pagination .rv-page-btn:disabled {
            opacity: .4 !important;
            cursor: not-allowed !important;
        }

        .rv-pagination .rv-page-btn.active,
        .rv-pagination .rv-page-btn.active:disabled,
        .rv-pagination .rv-page-btn.active:hover {
            background: #244123 !important;
            color: #fff !important;
            border-color: #244123 !important;
            font-weight: 800 !important;
            opacity: 1 !important;
            cursor: default !important;
            pointer-events: none;
            box-shadow: 0 0 0 3px rgba(36,65,35,.18) !important;
        }

    .rv-pagination .rv-page-info {
        font-size: .84rem;
        color: #64748b;
        font-weight: 600;
    }

    .rv-pagination .rv-page-gap {
        color: #94a3b8;
        font-weight: 600;
    }

    .rv-pagination .rv-page-size {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin: 0;
        font-size: .84rem;
        color: #64748b;
        font-weight: 600;
    }

        .rv-pagination .rv-page-size select {
            border: 1.5px solid #c8d9c7;
            border-radius: 8px;
            padding: 4px 8px;
            font-size: .84rem;
            color: #244123;
            background: #fff;
            cursor: pointer;
            width: auto;
        }

/* =================== UTILITY CLASSES =================== */
.vms-card {
    background: var(--vms-card-bg);
    border: 1px solid var(--vms-border);
    border-radius: var(--vms-radius-lg);
    box-shadow: var(--vms-shadow);
    padding: 24px;
    margin-bottom: 20px;
}

.vms-section-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--vms-text);
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--vms-border);
}

.text-vms-primary {
    color: var(--vms-navy-mid) !important;
}

.text-vms-blue {
    color: var(--vms-blue) !important;
}

.text-vms-success {
    color: var(--vms-success) !important;
}

.text-vms-danger {
    color: var(--vms-danger) !important;
}

.text-vms-warning {
    color: var(--vms-warning) !important;
}

.text-vms-muted {
    color: var(--vms-text-muted) !important;
}

.bg-vms-pale {
    background: var(--vms-blue-pale) !important;
}

.bg-vms-success {
    background: var(--vms-success-bg) !important;
}

.bg-vms-danger {
    background: var(--vms-danger-bg) !important;
}

/* Smooth transitions */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* container-scroller RTL fix */
.container-scroller {
    position: relative !important;
}