/* =========================================================
   Recruitment – Site Styles (GlobalCom-inspired)
   - Light/Dark theme tokens via CSS variables
   - Sidebar (expand/collapse + mobile off-canvas)
   - Topbar & buttons
   - Calendar grid fixes
   - Dark-mode table visibility fixes
   ========================================================= */

/* ---------- THEME TOKENS ---------- */
:root {
    /* GlobalCom-ish gradient */
    --brand-1: #ff2bbf; /* magenta */
    --brand-2: #7a2cff; /* purple */
    --brand-3: #2b59ff; /* blue */
    --brand-gradient: linear-gradient(90deg, var(--brand-1) 0%, var(--brand-2) 50%, var(--brand-3) 100%);
    /* Light mode scaffold */
    --bg: #f6f7fb;
    --panel: #ffffff;
    --text: #0f172a;
    --muted: #64748b;
    --shadow: 0 10px 28px rgba(2, 8, 23, .08);
    --border: #e5e7eb;
    /* Sidebar sizing */
    --sidebar-w: 240px;
    --sidebar-w-collapsed: 64px;
    /* Sidebar colors */
    --sidebar-bg: #ffffff;
    --sidebar-text: #0f172a;
    --sidebar-muted: #6b7280;
    --sidebar-active: #7a2cff;
    --sidebar-hover: rgba(15, 23, 42, .05);
    /* Mobile overlay */
    --overlay: rgba(0,0,0,.55);
}

    /* Dark theme overrides */
    :root[data-theme="dark"] {
        --bg: #0b1020;
        --panel: #0f1833;
        --text: #e9ecf5;
        --muted: rgba(233,236,245,.72);
        --shadow: 0 10px 30px rgba(0,0,0,.40);
        --border: rgba(255,255,255,.10);
        /* Sidebar in dark */
        --sidebar-bg: #0f1833;
        --sidebar-text: #e9ecf5;
        --sidebar-muted: rgba(233,236,245,.70);
        --sidebar-active: #ff2bbf;
        --sidebar-hover: rgba(255,255,255,.06);
    }

/* ---------- PAGE SCAFFOLD ---------- */
* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";
    background: var(--bg);
    color: var(--text);
}

.wrapper {
    display: flex;
    min-height: 100%;
}

/* ---------- SIDEBAR ---------- */
.sidebar {
    position: sticky;
    top: 0;
    left: 0;
    height: 100vh;
    width: var(--sidebar-w);
    background: radial-gradient(1200px 600px at -10% 0%, rgba(255,43,191,.18), transparent 55%), radial-gradient(1200px 600px at 10% 40%, rgba(122,44,255,.14), transparent 60%), radial-gradient(900px 500px at 30% 120%, rgba(43,89,255,.12), transparent 60%), var(--sidebar-bg);
    color: var(--sidebar-text);
    border-right: 1px solid var(--border);
    transition: width .2s ease, transform .2s ease;
    z-index: 100;
    display: flex;
    flex-direction: column;
}

    .sidebar .brand {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        padding: .75rem .75rem .25rem .75rem;
        min-height: 56px;
    }

        .sidebar .brand img {
            height: 80px;
            width: auto;
            display: block;
            border-radius: 10px;
        }

/* Collapse button under the logo */
.collapse-btn {
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(255,255,255,.06);
    color: var(--sidebar-muted);
    cursor: pointer;
    margin: .25rem .5rem .75rem .5rem;
}

:root[data-theme="dark"] .collapse-btn {
    background: rgba(0,0,0,.18);
}

.collapse-btn:hover {
    color: var(--sidebar-active);
}

/* Nav */
.sidebar .nav {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    padding: .25rem .5rem;
    overflow-x: hidden;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: .625rem;
    color: var(--sidebar-text);
    padding: .5rem .625rem;
    border-radius: 12px;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
}

    .nav-link:hover {
        background: var(--sidebar-hover);
    }

    .nav-link.active {
        color: var(--sidebar-text);
        background: rgba(255,43,191,.14);
        border-color: rgba(255,43,191,.20);
    }

:root[data-theme="dark"] .nav-link.active {
    background: rgba(255,43,191,.16);
    border-color: rgba(255,43,191,.22);
}

.nav-link .icon {
    width: 1.375rem;
    min-width: 1.375rem;
    height: 1.375rem;
    display: inline-grid;
    place-items: center;
    color: var(--sidebar-muted);
}

.nav-link .label {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* User block */
.sidebar-user {
    padding: .75rem .875rem;
    margin: .25rem .75rem .5rem;
    border-radius: 14px;
    background: rgba(255,255,255,.65);
    color: var(--text);
    border: 1px solid var(--border);
    backdrop-filter: blur(6px);
}

:root[data-theme="dark"] .sidebar-user {
    background: rgba(255,255,255,.04);
    color: var(--text);
}

.sidebar-user .name {
    font-weight: 600;
    line-height: 1.2;
}

.sidebar-user .role {
    font-size: .8125rem;
    color: var(--muted);
}

/* Logout sits at bottom */
.sidebar .logout {
    margin-top: auto;
    padding: .5rem;
}

    .sidebar .logout .btn-logout,
    .sidebar .logout a.btn-logout {
        width: 100%;
        border: 1px solid var(--border);
        background: rgba(255,255,255,.06);
        color: var(--sidebar-text);
        border-radius: 999px;
        padding: .6rem .75rem;
        text-decoration: none;
        display: inline-block;
        text-align: center;
    }

        .sidebar .logout .btn-logout:hover,
        .sidebar .logout a.btn-logout:hover {
            background: var(--sidebar-hover);
        }

/* Collapsed state */
body.sidebar-collapsed .sidebar {
    width: var(--sidebar-w-collapsed);
}

body.sidebar-collapsed .nav-link .label {
    display: none;
}

body.sidebar-collapsed .brand img {
    height: 40px;
}

body.sidebar-collapsed .collapse-btn {
    margin-left: .5rem;
}

/* Collapsed user block compact */
.sidebar-collapsed .sidebar-user {
    margin: .25rem .5rem .5rem;
    padding: .5rem .4rem;
    text-align: center;
}

    .sidebar-collapsed .sidebar-user .name,
    .sidebar-collapsed .sidebar-user .role {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* ---------- MAIN AREA ---------- */
.main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Top gradient bar */
.topbar {
    background: var(--brand-gradient);
    color: #fff;
    padding: .85rem 1.25rem;
    font-weight: 600;
    letter-spacing: .2px;
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Theme toggle + mobile menu button */
.theme-toggle,
.mobile-menu {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: rgba(0,0,0,.16);
    color: #fff;
    border: 1px solid rgba(255,255,255,.22);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .theme-toggle:hover,
    .mobile-menu:hover {
        background: rgba(0,0,0,.26);
    }

/* Content & footer */
.content {
    padding: 1.25rem;
}

.main-content {
    padding-bottom: 1rem;
}

.app-footer,
.footer {
    margin-top: 2rem;
    padding: .75rem 1rem;
    border-top: 1px solid var(--border);
    color: var(--muted);
    background: transparent;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: space-between;
    font-size: .9rem;
}

    .app-footer a,
    .footer a {
        color: #2b59ff;
    }

:root[data-theme="dark"] .app-footer a,
:root[data-theme="dark"] .footer a {
    color: #7dc1ff;
}

/* ---------- CARDS / BUTTONS ---------- */
.card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow);
}

.card-header {
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--border);
}

.card-body {
    padding: 1rem;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text);
    border-radius: 12px;
    padding: .5rem .75rem;
    text-decoration: none;
}

    .btn:hover {
        filter: brightness(.98);
    }

.btn-primary {
    background: var(--brand-gradient);
    color: #fff;
    border: 0;
    box-shadow: var(--shadow);
}

    .btn-primary:hover {
        filter: brightness(1.06);
    }

/* ---------- FORM CONTROLS (nice in dark mode too) ---------- */
.form-control,
.form-select,
.input-group-text {
    background: var(--panel);
    color: var(--text);
    border-color: var(--border);
}

:root[data-theme="dark"] .form-control::placeholder {
    color: rgba(233,236,245,.55);
}

/* ---------- CALENDAR FIXES ---------- */
.cal-table {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
}

    .cal-table th,
    .cal-table td {
        border: 1px solid var(--border);
        vertical-align: top;
    }

    .cal-table th {
        font-weight: 600;
        padding: .5rem;
        background: rgba(0,0,0,.03);
    }

:root[data-theme="dark"] .cal-table th {
    background: rgba(255,255,255,.05);
}

.cal-table colgroup col {
    width: calc(100%/7);
}

.cal-day {
    height: 110px;
    padding: .25rem .35rem;
}

.cal-open {
    font-size: .8rem;
    color: var(--muted);
    text-decoration: none;
}

    .cal-open:hover {
        text-decoration: underline;
    }

.pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border-radius: 999px;
    padding: .2rem .55rem;
    border: 1px solid var(--border);
    max-width: 100%;
    background: var(--panel);
    margin-top: .25rem;
    box-shadow: var(--shadow);
}

    .pill .dot {
        width: .5rem;
        height: .5rem;
        border-radius: 50%;
        background: #2b59ff;
    }

.pill--interview .dot {
    background: #ff2bbf;
}

.pill--general .dot {
    background: #7a2cff;
}

.pill .time {
    color: var(--muted);
    font-weight: 600;
    font-size: .75rem;
}

.pill .title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Preserve spacing/line-breaks for job descriptions */
.job-copy {
    white-space: pre-wrap;
    line-height: 1.6;
    margin-top: .5rem;
}

/* =========================================================
   DARK MODE TABLE VISIBILITY FIX
   (Bootstrap tables + plain tables)
   ========================================================= */
:root[data-theme="dark"] table,
:root[data-theme="dark"] .table {
    color: var(--text) !important;
}

    :root[data-theme="dark"] table th,
    :root[data-theme="dark"] table td,
    :root[data-theme="dark"] .table th,
    :root[data-theme="dark"] .table td {
        color: var(--text) !important;
    }

    :root[data-theme="dark"] .table > :not(caption) > * > * {
        color: var(--text) !important;
    }

:root[data-theme="dark"] table,
:root[data-theme="dark"] .table {
    border-color: rgba(255,255,255,.10) !important;
}

:root[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255,255,255,.03);
    color: var(--text) !important;
}

:root[data-theme="dark"] .table-hover > tbody > tr:hover > * {
    background-color: rgba(255,255,255,.06);
    color: var(--text) !important;
}

:root[data-theme="dark"] table a,
:root[data-theme="dark"] .table a {
    color: #7dc1ff;
}

    :root[data-theme="dark"] table a:hover,
    :root[data-theme="dark"] .table a:hover {
        color: #9fd4ff;
    }

:root[data-theme="dark"] table .text-muted,
:root[data-theme="dark"] .table .text-muted {
    color: rgba(233,236,245,.72) !important;
}

/* ---------- MOBILE: OFF-CANVAS SIDEBAR ---------- */
/* Requires:
   - .sidebar-overlay element in layout
   - body.sidebar-open toggled by JS
*/
.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: var(--overlay);
    z-index: 99;
    display: none;
}

@media (max-width: 992px) {
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        transform: translateX(-105%);
        box-shadow: var(--shadow);
        z-index: 100;
    }

    body.sidebar-open .sidebar {
        transform: translateX(0);
    }

    body.sidebar-open .sidebar-overlay {
        display: block;
    }

    body.sidebar-open {
        overflow: hidden;
    }

    /* collapse button is desktop-only */
    .collapse-btn {
        display: none;
    }
}

@media (min-width: 993px) {
    /* mobile menu button hidden on desktop if present */
    .mobile-menu {
        display: none;
    }
}


/* =========================================================
   DARK MODE READABILITY PATCH
   - Fix Bootstrap table background + text contrast
   - Fix muted/help text in forms (My Account page)
   ========================================================= */

:root[data-theme="dark"] .text-muted,
:root[data-theme="dark"] .form-text,
:root[data-theme="dark"] .text-secondary {
    color: var(--muted) !important;
}

/* Labels and headings should be readable */
:root[data-theme="dark"] label,
:root[data-theme="dark"] .form-label,
:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3,
:root[data-theme="dark"] h4,
:root[data-theme="dark"] h5,
:root[data-theme="dark"] h6 {
    color: var(--text);
}

/* Bootstrap 5 table system uses CSS vars. Override them in dark mode. */
:root[data-theme="dark"] .table {
    --bs-table-color: var(--text);
    --bs-table-bg: var(--panel);
    --bs-table-border-color: rgba(255,255,255,.10);
    --bs-table-striped-color: var(--text);
    --bs-table-striped-bg: rgba(255,255,255,.03);
    --bs-table-hover-color: var(--text);
    --bs-table-hover-bg: rgba(255,255,255,.06);
    color: var(--text) !important;
    background-color: var(--panel) !important;
}

    /* Make sure cells don’t keep some random light background */
    :root[data-theme="dark"] .table > :not(caption) > * > * {
        color: var(--text) !important;
        background-color: transparent !important;
        border-color: rgba(255,255,255,.10) !important;
    }

/* If you have plain <table> without .table class */
:root[data-theme="dark"] table:not(.table) {
    background: var(--panel);
    color: var(--text);
    border-color: rgba(255,255,255,.10);
}

    :root[data-theme="dark"] table:not(.table) th,
    :root[data-theme="dark"] table:not(.table) td {
        color: var(--text);
        background: transparent;
        border-color: rgba(255,255,255,.10);
    }