/* ═══════════════════════════════════════════════════════════════
   Infinite Route Travel — Design System v1.0
   ir-design.css
   Premium SaaS travel dashboard. Blue palette. Inter + Plus Jakarta Sans.
   ═══════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────
   1. CSS CUSTOM PROPERTIES
────────────────────────────────────────── */
:root {
    /* Brand */
    --ir-primary:        #2563EB;
    --ir-primary-dark:   #1D4ED8;
    --ir-primary-darker: #1E3A8A;
    --ir-primary-mid:    #DBEAFE;
    --ir-primary-light:  #EFF6FF;

    /* Accent */
    --ir-accent:         #F59E0B;

    /* Neutrals */
    --ir-dark:           #0F172A;
    --ir-gray-700:       #374151;
    --ir-gray-500:       #64748B;
    --ir-gray-400:       #94A3B8;
    --ir-gray-300:       #CBD5E1;
    --ir-gray-200:       #E2E8F0;
    --ir-gray-100:       #F1F5F9;
    --ir-gray-50:        #F8FAFC;
    --ir-white:          #FFFFFF;

    /* Semantic */
    --ir-success:        #10B981;
    --ir-warning:        #F59E0B;
    --ir-error:          #EF4444;
    --ir-info:           #3B82F6;

    /* Legacy compatibility — old red vars remapped to blue */
    --red:       #2563EB;
    --red-dark:  #1D4ED8;
    --red-light: #EFF6FF;

    /* Sidebar dimensions */
    --sb-w:           240px;
    --sb-w-collapsed: 64px;
    --sb-top-bar:     60px;

    /* Border radius */
    --radius-sm: 6px;
    --radius:    10px;
    --radius-lg: 14px;
    --radius-xl: 20px;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
    --shadow:    0 4px 12px rgba(15,23,42,0.08), 0 2px 4px rgba(15,23,42,0.04);
    --shadow-lg: 0 10px 30px rgba(15,23,42,0.10), 0 4px 8px rgba(15,23,42,0.06);
    --shadow-xl: 0 20px 50px rgba(15,23,42,0.14);

    /* Transition */
    --transition: all 0.2s ease;
}

/* ──────────────────────────────────────────
   2. TYPOGRAPHY OVERRIDES
────────────────────────────────────────── */
body {
    font-family: 'Inter', sans-serif;
    background: #F8FAFC;
    color: #0F172A;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: #0F172A;
}

/* ──────────────────────────────────────────
   3. SIDEBAR — DARK NAVY WITH BLUE ACCENTS
────────────────────────────────────────── */
.staff-sidebar {
    background: #0F172A !important;
    border-right: 1.5px solid rgba(255,255,255,0.06) !important;
}

.sb-top {
    border-bottom: 1.5px solid rgba(255,255,255,0.06) !important;
}

.sb-section-label {
    color: #475569 !important;
}

.sb-link {
    color: #94A3B8 !important;
}

.sb-link i {
    color: #64748B !important;
}

.sb-link:hover {
    background: rgba(37,99,235,0.12) !important;
    color: #fff !important;
}

.sb-link:hover i {
    color: #93C5FD !important;
}

.sb-link.active {
    background: rgba(37,99,235,0.18) !important;
    color: #DBEAFE !important;
    border-left: 3px solid #2563EB;
    padding-left: 7px;
}

.sb-link.active i {
    color: #93C5FD !important;
}

.sb-toggle {
    background: rgba(255,255,255,0.06) !important;
    border: 1.5px solid rgba(255,255,255,0.1) !important;
    color: #94A3B8 !important;
}

.sb-toggle:hover {
    background: rgba(37,99,235,0.2) !important;
    color: #93C5FD !important;
    border-color: rgba(37,99,235,0.3) !important;
}

.sb-divider {
    background: rgba(255,255,255,0.06) !important;
}

.sb-footer {
    border-top: 1.5px solid rgba(255,255,255,0.06) !important;
}

.sb-user-name {
    color: #E2E8F0 !important;
}

.sb-user-role {
    color: #64748B !important;
}

.sb-user-avatar {
    background: linear-gradient(135deg, #2563EB, #1D4ED8) !important;
}

.sb-logout {
    color: #64748B !important;
}

.sb-logout:hover {
    background: rgba(239,68,68,0.1) !important;
    color: #FCA5A5 !important;
}

/* Sidebar tooltip — keep dark bg, white text */
.staff-sidebar.collapsed .sb-link::after {
    background: #1a1a1a;
    color: #fff;
}

/* Scrollbar inside dark sidebar */
.sb-nav {
    scrollbar-color: rgba(255,255,255,0.1) transparent !important;
}
.sb-nav::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.1) !important;
}

/* ──────────────────────────────────────────
   4. PUBLIC NAVIGATION (.site-nav)
────────────────────────────────────────── */
.nav-links li a:hover {
    background: #EFF6FF !important;
    color: #2563EB !important;
}

.nav-links li a.active-link {
    color: #2563EB !important;
    background: #EFF6FF !important;
}

.nav-hamburger:hover {
    border-color: #2563EB !important;
    color: #2563EB !important;
}

.nav-btn-logout:hover {
    border-color: #2563EB !important;
    color: #2563EB !important;
    background: #EFF6FF !important;
}

.nav-btn-signin {
    background: #2563EB !important;
}

.nav-btn-signin:hover {
    background: #1D4ED8 !important;
}

/* ──────────────────────────────────────────
   5. MOBILE DRAWER
────────────────────────────────────────── */
.drawer-links li a i {
    color: #2563EB !important;
}

.drawer-links li a:hover {
    background: #EFF6FF !important;
    color: #2563EB !important;
}

.drawer-links li a.active-link {
    background: #EFF6FF !important;
    color: #2563EB !important;
}

.drawer-close:hover {
    border-color: #2563EB !important;
    color: #2563EB !important;
}

.drawer-footer .drawer-signin {
    background: #2563EB !important;
}

.drawer-footer .drawer-signin:hover {
    background: #1D4ED8 !important;
}

.drawer-footer .drawer-logout:hover {
    border-color: #2563EB !important;
    color: #2563EB !important;
}

/* ──────────────────────────────────────────
   6. STAFF TOPBAR
────────────────────────────────────────── */
.staff-topbar-hamburger:hover {
    border-color: #2563EB !important;
    color: #2563EB !important;
}

/* ──────────────────────────────────────────
   7. FOOTER
────────────────────────────────────────── */
.footer-contact-icon {
    background: rgba(37,99,235,0.15) !important;
    color: #2563EB !important;
}

.footer-social-btn:hover {
    background: #2563EB !important;
    border-color: #2563EB !important;
}

/* ──────────────────────────────────────────
   8. LEGACY UTILITY CLASS REMAPS
────────────────────────────────────────── */
.give_color      { color: #2563EB !important; }
.give_background { background: #2563EB !important; }
.make_bg_one     { background: #2563EB !important; }
.make_color_one  { color: #2563EB !important; }
.make_bg_two     { background: #2563EB !important; }
.make_color_two  { color: #2563EB !important; }
.make_border          { border: 1px solid #2563EB !important; }
.make_border_two      { border: 1px solid #2563EB !important; }
.make_border_bottom   { border-bottom: 3px solid #2563EB !important; }
.make_bg_base    { background: #0F172A !important; }
.btn_style,
.btn_style:hover {
    background: #2563EB !important;
    color: white !important;
    padding: 14px 25px;
    border-radius: 10px;
}
.mark_up_bg,
.mark_up_bg:hover {
    background: #2563EB !important;
}

/* ──────────────────────────────────────────
   9. ACCESS DENIED CARD
────────────────────────────────────────── */
.mt-access-card::before {
    background: linear-gradient(90deg, #2563EB 0%, #3B82F6 100%) !important;
}

.mt-access-icon-wrap {
    background: #EFF6FF !important;
    border-color: #BFDBFE !important;
    color: #2563EB !important;
}

.mt-access-code {
    background: #EFF6FF !important;
    color: #2563EB !important;
    border-color: #BFDBFE !important;
}

.mt-access-btn-primary {
    background: #2563EB !important;
    font-family: 'Inter', sans-serif !important;
}

.mt-access-btn-primary:hover {
    background: #1D4ED8 !important;
    box-shadow: 0 4px 14px rgba(37,99,235,0.3) !important;
}

.mt-access-btn-ghost {
    font-family: 'Inter', sans-serif !important;
}

.mt-access-btn-ghost:hover {
    border-color: #2563EB !important;
    color: #2563EB !important;
}

.mt-access-footer a {
    color: #2563EB !important;
}

/* ──────────────────────────────────────────
   10. GLOBAL BUTTON STYLES (new reusable classes)
────────────────────────────────────────── */
.ir-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: var(--transition);
    border: none;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    line-height: 1.4;
}

.ir-btn-primary {
    background: #2563EB;
    color: #fff;
}
.ir-btn-primary:hover {
    background: #1D4ED8;
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(37,99,235,0.3);
}

.ir-btn-ghost {
    background: transparent;
    color: #64748B;
    border: 1.5px solid #E2E8F0;
}
.ir-btn-ghost:hover {
    border-color: #2563EB;
    color: #2563EB;
    background: #EFF6FF;
    text-decoration: none;
}

.ir-btn-danger {
    background: #EF4444;
    color: #fff;
}
.ir-btn-danger:hover {
    background: #DC2626;
    color: #fff;
    text-decoration: none;
}

.ir-btn-success {
    background: #10B981;
    color: #fff;
}
.ir-btn-success:hover {
    background: #059669;
    color: #fff;
    text-decoration: none;
}

/* ──────────────────────────────────────────
   11. GLOBAL CARD STYLES
────────────────────────────────────────── */
.ir-card {
    background: #fff;
    border: 1.5px solid #E2E8F0;
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
}

.ir-card-header {
    padding: 20px 24px;
    border-bottom: 1.5px solid #F1F5F9;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ir-card-body {
    padding: 24px;
}

.ir-card-title {
    font-size: 15px;
    font-weight: 700;
    color: #0F172A;
    font-family: 'Plus Jakarta Sans', sans-serif;
    margin: 0;
}

/* ──────────────────────────────────────────
   12. FORM / INPUT OVERRIDES
────────────────────────────────────────── */
.form-control:focus,
.form-select:focus {
    border-color: #2563EB !important;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.12) !important;
}

.form-outline .form-control:focus ~ .form-notch .form-notch-leading,
.form-outline .form-control:focus ~ .form-notch .form-notch-middle,
.form-outline .form-control:focus ~ .form-notch .form-notch-trailing {
    border-color: #2563EB !important;
}

.form-outline .form-control:focus ~ .form-label,
.form-outline .form-control.active ~ .form-label {
    color: #2563EB !important;
}

/* ──────────────────────────────────────────
   13. BADGE / PILL STYLES
────────────────────────────────────────── */
.ir-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.ir-badge-blue   { background: #DBEAFE; color: #1E40AF; }
.ir-badge-green  { background: #D1FAE5; color: #065F46; }
.ir-badge-red    { background: #FEE2E2; color: #991B1B; }
.ir-badge-yellow { background: #FEF3C7; color: #92400E; }
.ir-badge-gray   { background: #F1F5F9; color: #475569; }

/* ──────────────────────────────────────────
   14. TABLE STYLES
────────────────────────────────────────── */
.ir-table {
    width: 100%;
    border-collapse: collapse;
}

.ir-table th {
    background: #F8FAFC;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 16px;
    border-bottom: 1.5px solid #E2E8F0;
    text-align: left;
}

.ir-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #F1F5F9;
    font-size: 13px;
    color: #374151;
}

.ir-table tbody tr:hover {
    background: #F8FAFC;
}

.ir-table-wrap {
    border: 1.5px solid #E2E8F0;
    border-radius: 14px;
    overflow: hidden;
    overflow-x: auto;
}

/* ──────────────────────────────────────────
   15. NAV LINK ACTIVE OVERRIDES
────────────────────────────────────────── */
.nav-link:hover  { color: #2563EB !important; }
.nav-link.active { border-color: #2563EB !important; color: #2563EB !important; }

.small_nav_li:hover,
.big_nav_li:hover {
    background-color: rgba(37,99,235,0.28) !important;
    border-radius: 20px;
}

/* ──────────────────────────────────────────
   16. RECAPTCHA MODAL BUTTON
────────────────────────────────────────── */
#recaptchaModalBtn {
    background: #2563EB !important;
    font-family: 'Inter', sans-serif !important;
}

/* ──────────────────────────────────────────
   17. CONFIRM MODAL BUTTON
────────────────────────────────────────── */
#globalConfirmBtn {
    background: #2563EB !important;
}

/* ──────────────────────────────────────────
   18. STYLED INPUT
────────────────────────────────────────── */
.styled_input {
    background: #1e293b !important;
    color: #e2e8f0 !important;
    font-family: 'Inter', sans-serif !important;
}

/* ──────────────────────────────────────────
   19. PROF TOAST
────────────────────────────────────────── */
.prof-toast {
    background: #F8FAFC;
    color: #0F172A;
}

/* ──────────────────────────────────────────
   20. SECTION LABEL (qw carry-over)
────────────────────────────────────────── */
.qw-section-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #94A3B8;
    margin-bottom: 8px;
}

/* ──────────────────────────────────────────
   SCROLLBAR — global subtle style
────────────────────────────────────────── */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94A3B8;
}

/* ──────────────────────────────────────────
   FOCUS VISIBLE — accessibility
────────────────────────────────────────── */
:focus-visible {
    outline: 2px solid #2563EB;
    outline-offset: 2px;
}

/* ──────────────────────────────────────────
   LINK DEFAULT COLOR OVERRIDE
────────────────────────────────────────── */
a.give_color:hover { color: #1D4ED8 !important; }