/* RecruitPro Enterprise base styles (white-label variables can override) */
:root {
    --rp-primary: #1a73e8;
}

body {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------------------------------------------------------------------
 * Typography & spacing polish
 * ------------------------------------------------------------------- */
h1, .h1, h2, .h2, h3, .h3 { font-weight: 600; letter-spacing: -0.01em; }
h4, .h4, h5, .h5, h6, .h6 { font-weight: 600; }

.navbar-brand {
    letter-spacing: 0.02em;
    font-weight: 600;
}

/* Black-based gradient to match the logo's own black canvas -- in either
   theme, since the top bar is always dark-styled regardless of the page
   theme. A subtle downward shadow lifts it off the page content below. */
.navbar.bg-dark {
    background: linear-gradient(180deg, #3a3a3a 0%, #000000 100%) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}

.btn {
    font-weight: 500;
    letter-spacing: 0.01em;
}

.form-label {
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.01em;
}

.card {
    border-radius: 0.75rem;
    border-color: var(--bs-border-color-translucent);
}

.card-header {
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* Muted, uppercase table headers -- a cleaner, more "dashboard" feel than
   Bootstrap's default bold black header text. */
.table > thead > tr > th {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    border-bottom-width: 1px;
}

.badge {
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* ---------------------------------------------------------------------
 * Dark mode
 *
 * Bootstrap 5.3's [data-bs-theme=dark] block only redefines the
 * body/emphasis/secondary/tertiary/subtle/border CSS variables -- NOT
 * --bs-light or --bs-dark themselves. That means components built purely
 * from those variables (.card, .form-control, .navbar, .alert, .dropdown-
 * menu, .modal, .table's own striping) already adapt automatically with
 * zero extra CSS. But utility classes that hardcode the literal gray
 * scale -- .bg-light, .table-light, .text-bg-light -- do NOT adapt on
 * their own and would otherwise stay bright white/light-gray inside an
 * otherwise-dark page. The overrides below fix exactly those cases.
 * ------------------------------------------------------------------- */
[data-bs-theme="dark"] {
    color-scheme: dark;
}

[data-bs-theme="dark"] .bg-light {
    background-color: var(--bs-tertiary-bg) !important;
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .table-light,
[data-bs-theme="dark"] .table-light > * {
    --bs-table-bg: var(--bs-tertiary-bg);
    --bs-table-color: var(--bs-body-color);
    --bs-table-border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .text-bg-light {
    background-color: var(--bs-secondary-bg) !important;
    color: var(--bs-body-color) !important;
}

/* Several sortable-column headers (candidates, interviews, questions lists)
   use a plain "text-decoration-none text-dark" link for the column label +
   sort arrow -- .text-dark is a literal near-black that reads fine on a
   light thead but is nearly invisible on a dark one. */
[data-bs-theme="dark"] .table > thead a.text-dark {
    color: var(--bs-secondary-color) !important;
}
[data-bs-theme="dark"] .table > thead a.text-dark:hover {
    color: var(--bs-body-color) !important;
}

/* .bg-white is used deliberately in a few places (QR codes, uploaded
   logos) where a literal white backing is functionally required for
   contrast/scannability regardless of theme -- so it's left untouched.
   Card headers are the one ".bg-white" usage that's purely decorative
   and should follow the theme like every other card header. */
[data-bs-theme="dark"] .card-header.bg-white {
    background-color: var(--bs-tertiary-bg) !important;
    color: var(--bs-body-color);
    border-bottom-color: var(--bs-border-color);
}


/* Native scrollbars already switch via color-scheme:dark above; this just
   tidies up the WebKit/Blink track to match the app chrome more closely. */
[data-bs-theme="dark"] ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
[data-bs-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--bs-body-bg);
}
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
    background-color: var(--bs-secondary-bg);
    border-radius: 6px;
    border: 3px solid var(--bs-body-bg);
}

/* ---------------------------------------------------------------------
 * Theme toggle button
 *
 * Deliberately NOT using Bootstrap's .btn-outline-* here: its :hover and
 * :focus states fill the button solid, which reads as a jarring white
 * (or light) box sitting in the middle of the navbar/page. This is a
 * plain "ghost" button instead -- transparent at rest, a soft tinted
 * background on hover/focus, no fill.
 * ------------------------------------------------------------------- */
.theme-toggle-btn {
    line-height: 1;
    border: 1px solid transparent;
    background-color: transparent;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
.theme-toggle-btn:focus {
    box-shadow: none;
}

.theme-toggle-btn-navbar {
    color: rgba(255, 255, 255, 0.85);
}
.theme-toggle-btn-navbar:hover,
.theme-toggle-btn-navbar:focus {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.18);
}

.theme-toggle-btn-floating {
    z-index: 1050;
    color: var(--bs-secondary-color);
    border-color: var(--bs-border-color);
    background-color: var(--bs-body-bg);
}
.theme-toggle-btn-floating:hover,
.theme-toggle-btn-floating:focus {
    color: var(--bs-body-color);
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
}

/* ---------------------------------------------------------------------
 * "Modern" page shell -- a tabbed-profile-card / avatar-initials /
 * dashed-circle-empty-state layout used by My Profile, the admin
 * Employee detail page, Shift Types and Shift Roster. Everything here
 * is scoped under .rp-modern-page so it can never bleed into any other
 * screen. In dark mode this uses the warm near-black/coral palette;
 * in light mode it falls back to the app's existing primary color
 * instead of forcing a dark island into an otherwise light page.
 * ------------------------------------------------------------------- */
.rp-modern-page {
    --rpm-accent: var(--bs-primary);
    --rpm-accent-contrast: #fff;
    --rpm-accent-soft: rgba(13, 110, 253, 0.12);
}
[data-bs-theme="dark"] .rp-modern-page {
    --rpm-accent: #e8825c;
    --rpm-accent-contrast: #201510;
    --rpm-accent-soft: rgba(232, 130, 92, 0.15);
}

.rp-modern-page .rpm-eyebrow {
    color: var(--rpm-accent);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.rp-modern-page .rpm-title { font-weight: 700; font-size: 1.6rem; margin-bottom: 0.15rem; }
.rp-modern-page .rpm-subtitle { color: var(--bs-secondary-color); }

.rp-modern-page .btn-rpm {
    background-color: var(--rpm-accent);
    border-color: var(--rpm-accent);
    color: var(--rpm-accent-contrast);
    border-radius: 2rem;
    font-weight: 600;
    padding: 0.45rem 1.15rem;
}
.rp-modern-page .btn-rpm:hover,
.rp-modern-page .btn-rpm:focus {
    filter: brightness(1.08);
    color: var(--rpm-accent-contrast);
}
.rp-modern-page .btn-rpm-outline {
    background: transparent;
    border: 1px solid var(--bs-border-color);
    color: var(--bs-body-color);
    border-radius: 2rem;
    font-weight: 600;
}
.rp-modern-page .btn-rpm-outline:hover,
.rp-modern-page .btn-rpm-outline:focus {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

.rp-modern-page .rpm-card {
    border-radius: 1rem;
    border: 1px solid var(--bs-border-color-translucent);
    background-color: var(--bs-tertiary-bg);
    padding: 1.25rem;
}
/* When rpm-card is combined with Bootstrap's .card (and content sits in a
   nested .card-body, e.g. "<div class="card rpm-card"><div class="card-body">"),
   .card-body already supplies its own padding -- zero out the outer padding
   here so the two don't stack. Without this rule (missing until now), every
   *bare* rpm-card used directly as a content box -- e.g. the Personal
   Information / Identity cards on the Employee edit form, and the dashboard
   widget cards -- had no padding at all, so headings and icons sat flush
   against the 1rem-rounded corners instead of inside them. */
.rp-modern-page .rpm-card.card {
    padding: 0;
}

.rp-modern-page .rpm-avatar {
    width: 96px; height: 96px; border-radius: 50%;
    background: var(--rpm-accent-soft);
    color: var(--rpm-accent);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1.6rem;
    margin: 0 auto;
}
.rp-modern-page .rpm-avatar-sm { width: 40px; height: 40px; font-size: 0.95rem; }

/* Clickable avatar/photo -- a <label for="..."> wrapping the image so a
   click opens the paired file input directly, no JS needed. The overlay is
   just a discoverability hint (hidden until hover/focus) rather than the
   only way in -- the actual "Choose file" input stays visible below it. */
.rpm-photo-click, .my-profile .rpm-photo-click { cursor: pointer; }
.rpm-photo-click-overlay {
    position: absolute; inset: 0; bottom: 0.75rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: #fff; font-size: 1.1rem;
    opacity: 0; transition: opacity 0.15s ease;
}
.rpm-photo-click:hover .rpm-photo-click-overlay,
.rpm-photo-click:focus-visible .rpm-photo-click-overlay { opacity: 1; }

.rp-modern-page .rpm-status-dot {
    width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 0.35rem;
}
.rp-modern-page .rpm-status-active { background: #22c55e; }
.rp-modern-page .rpm-status-inactive { background: var(--bs-secondary-color); }

.rp-modern-page .rpm-sidebar-item {
    display: flex; gap: 0.6rem; align-items: flex-start;
    padding: 0.5rem 0; font-size: 0.85rem;
}
.rp-modern-page .rpm-sidebar-item i { color: var(--bs-secondary-color); margin-top: 0.15rem; }
.rp-modern-page .rpm-sidebar-label {
    display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--bs-secondary-color); font-weight: 700;
}

.rp-modern-page .rpm-tabs { border-bottom: 1px solid var(--bs-border-color); }
.rp-modern-page .rpm-tabs .nav-link {
    color: var(--bs-secondary-color); border: none; border-bottom: 2px solid transparent;
    background: none; padding: 0.6rem 0.1rem; margin-right: 1.5rem; font-weight: 600; border-radius: 0;
}
.rp-modern-page .rpm-tabs .nav-link.active {
    color: var(--rpm-accent); border-bottom-color: var(--rpm-accent); background: none;
}

.rp-modern-page .rpm-field-label {
    font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--bs-secondary-color); font-weight: 700; margin-bottom: 0.1rem;
}
.rp-modern-page .rpm-field-value { font-size: 0.95rem; margin-bottom: 1rem; }

.rp-modern-page .rpm-empty { text-align: center; padding: 3rem 1rem; }
.rp-modern-page .rpm-empty-icon {
    width: 68px; height: 68px; border-radius: 50%;
    background: var(--rpm-accent); color: var(--rpm-accent-contrast);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; margin: 0 auto 1rem;
    border: 3px dashed var(--rpm-accent-soft);
    box-shadow: 0 0 0 6px var(--rpm-accent-soft);
}

.rp-modern-page .rpm-search-input {
    border-radius: 2rem;
    padding-left: 2.25rem;
    background-repeat: no-repeat;
    background-position: 0.75rem center;
}
.rp-modern-page .rpm-search-wrap { position: relative; }
.rp-modern-page .rpm-search-wrap i {
    position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%);
    color: var(--bs-secondary-color);
}
.rp-modern-page .rpm-search-wrap input { padding-left: 2.15rem; border-radius: 2rem; }

/* Customize Dashboard's Add/Added pill toggle -- built on Bootstrap's
   btn-check pattern (hidden checkbox + label styled as a button) so no JS
   is needed; the two inner spans swap visibility purely via the :checked
   sibling selector. Shared between the Employee Dashboard (rp-modern-page,
   uses --rpm-accent) and the main Admin/HR Dashboard (plain Bootstrap page,
   falls back to --bs-primary) via the plain .dash-widget-toggle class name;
   .rpm-widget-toggle is kept as an alias so any older markup still works. */
.rpm-widget-toggle, .dash-widget-toggle {
    border: 1px solid var(--bs-border-color);
    border-radius: 2rem;
    background: transparent;
    color: var(--bs-body-color);
}
.rpm-widget-toggle .added-text, .dash-widget-toggle .added-text { display: none; }
.btn-check:checked + .rpm-widget-toggle {
    background: var(--rpm-accent-soft, rgba(13, 110, 253, .12));
    border-color: var(--rpm-accent, var(--bs-primary));
    color: var(--rpm-accent, var(--bs-primary));
}
.btn-check:checked + .dash-widget-toggle {
    background: rgba(13, 110, 253, .12);
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}
.btn-check:checked + .rpm-widget-toggle .add-text, .btn-check:checked + .dash-widget-toggle .add-text { display: none; }
.btn-check:checked + .rpm-widget-toggle .added-text, .btn-check:checked + .dash-widget-toggle .added-text { display: inline; }

/* Bootstrap's own tab CSS shows/hides panes with a direct-child selector
   (".tab-content > .active { display: block }"), which assumes every
   .tab-pane sits immediately inside .tab-content. The Company edit page's
   Payroll Cycle tab (and any future page with the same shape) nests its
   panes one level deeper -- inside a <form> that wraps several panes so
   they can all submit together -- so Bootstrap's selector never matches
   and every pane stays invisible/visible regardless of which tab is
   selected (the active/show classes toggle correctly via JS; only the
   CSS that reads them was too narrow). This override makes visibility
   depend on the .active class alone, at any nesting depth under
   .tab-content, while leaving Bootstrap's other tab behavior untouched. */
.tab-content .tab-pane.active { display: block !important; }
.tab-content .tab-pane:not(.active) { display: none !important; }