/* =========================================
   global.css
   Site foundation — resets, scrollbars,
   body defaults, and utility classes.
   Import this FIRST in every page.
========================================= */

/* =========================================
   RESETS
========================================= */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* =========================================
   BODY
========================================= */
body {
    font-family: 'Inter', Segoe UI, Arial, sans-serif;
    background: #f8f9fa;
    color: #1a1a1a;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* =========================================
   OVERFLOW — desktop safe, mobile locked
========================================= */
html, body {
    width: 100%;
    position: relative;
    /* overflow-x: hidden intentionally removed for desktop sticky sidebar */
}

@media (max-width: 768px) {
    html, body {
        overflow-x: hidden;
    }
}

/* =========================================
   GLOBAL SCROLLBARS
========================================= */

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #2563eb transparent;
}

/* WebKit global */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #2563eb, #3b82f6);
    border-radius: 999px;
    border: none;
    transition: all .25s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #1d4ed8, #2563eb);
}

::-webkit-scrollbar-corner {
    background: transparent;
}

/* =========================================
   PHONE ICON FIX
========================================= */
i.fa-phone,
i.fa-phone-alt,
i.fas.fa-phone,
i.fas.fa-phone-alt {
    transform: scaleX(-1);
    display: inline-block;
}

/* =========================================
   GLOBAL SITE WIDTH SYSTEM
   All major containers share these rules
   so every page has identical left/right
   alignment.
========================================= */
.hero-inner,
.header-container,
.premium-section,
.browse-container,
.job-details-container,
.footer-container {
    max-width: 1300px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
    padding-left: 40px !important;
    padding-right: 40px !important;
}

@media (max-width: 768px) {
    .hero-inner,
    .header-container,
    .premium-section,
    .browse-container,
    .job-details-container,
    .footer-container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* =========================================
   MAIN CONTAINER (page body wrapper)
========================================= */
.main-container {
    width: 100%;
    /* Default: push content below the fixed header */
    padding-top: 90px !important;
}

/* Homepage — hero slides under the transparent header */
.main-container:has(.hero-wrap) {
    padding-top: 0 !important;
}

/* =========================================
   UTILITY CLASSES
========================================= */
.mt-3  { margin-top: 15px; }
.mt-4  { margin-top: 25px; }
.text-center { text-align: center; }

/* =========================================
   LOGO BOX & TEXT (shared across header/footer/modals)
========================================= */
.logo-box {
    background: linear-gradient(135deg, #0066ff, #0047cc);
    color: #fff;
    font-weight: 800;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    font-size: 13px;
    flex-shrink: 0;
}

.logo-text {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
}

.logo a {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

/* =========================================
   BUTTONS (shared site-wide)
========================================= */
.btn {
    padding: 10px 18px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: 0.3s;
    display: inline-block;
}

.btn-primary {
    background: #0066ff;
    color: #fff;
    border: none;
}

.btn-primary:hover {
    transform: translateY(-2px);
}

.btn-outline {
    border: 1px solid #dcdcdc;
    color: #333;
    background: #fff;
}

.btn-outline:hover {
    border-color: #0066ff;
    color: #0066ff;
}

.btn-employer {
    background: #16a34a;
    color: #fff;
}

.btn-white {
    background: #fff;
    color: #0066ff;
    padding: 14px 24px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
}

.btn-white:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important;
}

.btn-outline-white {
    background: transparent;
    border: 2px solid #fff;
    color: #fff;
    padding: 14px 24px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
}

.btn-outline-white:hover {
    background: #fff;
    color: #0066ff;
}

.btn-full {
    width: 100%;
    margin-top: 10px;
    display: block;
    text-align: center;
}

.btn-lg {
    padding: 14px 20px;
    font-size: 15px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
}

/* Luxury CTA button variants */
.btn-solid {
    background: #2563eb;
    color: white;
    padding: 14px 32px;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.2s;
    border: 2px solid #2563eb;
}

.btn-solid:hover {
    background: #3b82f6;
    border-color: #3b82f6;
    color: white;
}

.btn-glass {
    background: rgba(255,255,255,0.1);
    color: white;
    padding: 14px 32px;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.2s;
    border: 2px solid rgba(255,255,255,0.2);
    backdrop-filter: blur(10px);
}

.btn-glass:hover {
    background: rgba(255,255,255,0.2);
    color: white;
}

/* =========================================
   STATUS BADGES (shared across tables/cards)
========================================= */
.status-badge {
    padding: 6px 12px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
}

.badge-pending { background: #f1f5f9; color: #475569; }
.badge-success { background: #f0fdf4; color: #16a34a; }
.badge-danger  { background: #fef2f2; color: #dc2626; }
.badge-warning { background: #fffbeb; color: #d97706; }

/* =========================================
   ALERTS
========================================= */
.alert {
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
    margin-bottom: 20px;
    font-weight: 500;
}

.alert-error {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.alert-success {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}

/* =========================================
   ANIMATIONS (shared keyframes)
========================================= */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: translateY(0); }
}