/* ============================================================================
   FolksHR — Bootstrap compatibility layer (design-system bridge)
   Maps the Bootstrap 5 component classes used across the existing ~160 pages
   onto the folkshr-theme.css design tokens, so pages adopt the new clay look
   WITHOUT editing page markup. Additive + token-driven. Loaded AFTER the theme.
   Only presentation is affected — no layout structure or behaviour changes.
   ============================================================================ */

/* ---- typography inheritance ------------------------------------------------ */
.maincontent, .content, .modal, .card, .panel, .table, .form-control, .form-select, .btn {
  font-family: var(--font);
}

/* ---- buttons --------------------------------------------------------------- */
.btn {
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 13.5px;
  padding: 8px 16px;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .05s;
}
.btn:active { transform: translateY(1px); }
.btn:focus, .btn:focus-visible { box-shadow: 0 0 0 3px var(--accent-ring); }

.btn-primary {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
}

.btn-secondary, .btn-light, .btn-outline-secondary {
  background: var(--surface) !important;
  border-color: var(--border-2) !important;
  color: var(--text-2) !important;
}
.btn-secondary:hover, .btn-light:hover, .btn-outline-secondary:hover {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border-color: var(--muted) !important;
}

.btn-outline-primary {
  background: var(--accent-soft) !important;
  border-color: transparent !important;
  color: var(--accent-hover) !important;
}
.btn-outline-primary:hover { background: var(--accent-softer) !important; color: var(--accent-hover) !important; }

.btn-success { background: var(--ok) !important; border-color: var(--ok) !important; color: #fff !important; }
.btn-danger  { background: var(--danger) !important; border-color: var(--danger) !important; color: #fff !important; }
.btn-warning { background: var(--warn) !important; border-color: var(--warn) !important; color: #fff !important; }
.btn-info    { background: var(--info) !important; border-color: var(--info) !important; color: #fff !important; }
.btn-sm { padding: 5px 11px; font-size: 12.5px; border-radius: var(--radius-xs); }
.btn-lg { padding: 11px 22px; font-size: 15px; }

/* ---- form controls --------------------------------------------------------- */
.form-control, .form-select {
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  font-size: 13.5px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.form-control:focus, .form-select:focus {
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--accent-ring);
  color: var(--text);
}
.form-control::placeholder { color: var(--faint); }
.form-label { font-size: 12.5px; font-weight: 600; color: var(--text-2); margin-bottom: 5px; }
.form-check-input { border-color: var(--border-2); }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.form-check-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.input-group-text { background: var(--surface-2); border-color: var(--border-2); color: var(--text-2); border-radius: var(--radius-sm); }

/* ---- cards ----------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.card-header {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  color: var(--text);
}
.card-footer { background: var(--surface-2); border-top: 1px solid var(--border); }

/* ---- tables ---------------------------------------------------------------- */
.table { color: var(--text-2); font-size: 13px; border-color: var(--border); }
/* Bug 55: headers read as "faded". The cause is not low contrast - #5C534B on
   #FBF8F4 is 7.1:1, already WCAG AAA - it is that .table sets body cells to the
   SAME var(--text-2), so the header row had no hierarchy against its own data.
   Promote headers to the darkest token (14.28:1) and add weight, so the header
   row separates from the rows beneath it. */
.table > thead th, .table thead th {
  background: var(--surface-2);
  color: var(--text);
  font-weight: 700;
  border-bottom: 2px solid var(--border);
  text-transform: none;
}
.table > tbody > tr > td, .table > tbody > tr > th { border-color: var(--border); vertical-align: middle; }
.table-hover > tbody > tr:hover > * { background: var(--accent-softer); color: var(--text); }
.table-striped > tbody > tr:nth-of-type(odd) > * { background: var(--surface-2); }

/* ---- modals ---------------------------------------------------------------- */
.modal-content {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  background: var(--surface);
}
.modal-header { border-bottom: 1px solid var(--border); }
.modal-header .modal-title { font-weight: 600; color: var(--text); }
.modal-footer { border-top: 1px solid var(--border); }

/* ---- alerts ---------------------------------------------------------------- */
.alert { border-radius: var(--radius-sm); border: 1px solid var(--border); border-left-width: 4px; font-size: 13.5px; }
.alert-success { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
.alert-danger  { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }
.alert-warning { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); }
.alert-info    { background: var(--info-bg); border-color: var(--info); color: var(--info); }

/* ---- badges ---------------------------------------------------------------- */
.badge { border-radius: 999px; font-weight: 600; padding: 4px 10px; }
.badge.bg-primary, .badge.text-bg-primary { background: var(--accent) !important; color: #fff !important; }
.badge.bg-success, .badge.text-bg-success { background: var(--ok-bg) !important; color: var(--ok) !important; }
.badge.bg-danger,  .badge.text-bg-danger  { background: var(--danger-bg) !important; color: var(--danger) !important; }
.badge.bg-warning, .badge.text-bg-warning { background: var(--warn-bg) !important; color: var(--warn) !important; }
.badge.bg-info,    .badge.text-bg-info    { background: var(--info-bg) !important; color: var(--info) !important; }
.badge.bg-secondary { background: var(--surface-2) !important; color: var(--text-2) !important; }

/* ---- nav tabs / pills ------------------------------------------------------ */
.nav-tabs { border-bottom: 1px solid var(--border); }
.nav-tabs .nav-link { color: var(--text-2); border: none; border-bottom: 2px solid transparent; border-radius: 0; font-weight: 600; font-size: 13.5px; }
.nav-tabs .nav-link:hover { color: var(--accent); border-bottom-color: var(--accent-soft); }
.nav-tabs .nav-link.active { color: var(--accent); background: transparent; border-bottom-color: var(--accent); }
.nav-pills .nav-link { color: var(--text-2); border-radius: var(--radius-sm); font-weight: 600; }
.nav-pills .nav-link.active { background: var(--accent); color: #fff; }

/* ---- bootstrap pagination -------------------------------------------------- */
.pagination { gap: 4px; }
.page-link { color: var(--text-2); border: 1px solid var(--border-2); border-radius: 8px !important; background: var(--surface); }
.page-link:hover { color: var(--accent); border-color: var(--accent); background: var(--surface-2); }
.page-item.active .page-link { background: var(--accent); border-color: var(--accent); color: #fff; }
.page-item.disabled .page-link { opacity: .45; }

/* legacy custom paginations already used by some pages */
.custom-pagination .page-btn.active,
.dataTables_paginate .paginate_button.active a { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; }

/* ---- dropdowns ------------------------------------------------------------- */
.dropdown-menu { border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); padding: 6px; }
.dropdown-item { border-radius: var(--radius-xs); font-size: 13.5px; color: var(--text-2); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--surface-2); color: var(--text); }
.dropdown-item.active, .dropdown-item:active { background: var(--accent); color: #fff; }

/* ---- misc accents ---------------------------------------------------------- */
a { color: var(--accent); }
.text-primary { color: var(--accent) !important; }
.bg-primary { background-color: var(--accent) !important; }
.border-primary { border-color: var(--accent) !important; }
.spinner-border, .spinner-grow { color: var(--accent); }
hr { border-color: var(--border); opacity: 1; }

/* ============================================================================
   LEGACY CASCADE FIXES — prevent generic class-name collisions with the theme
   ============================================================================ */

/* ~105 pages use <div class="content"> as a generic inner wrapper. The shell's
   <main class="content"> is padded + centered + max-width; reset the NESTED one
   to the original behaviour (vertical padding only) so pages don't double-pad
   or get width-constrained. */
main.content .content {
    padding: 20px 0;
    max-width: none;
    margin: 0;
}

/* Panels may contain custom dropdown menus; avoid clipping them. Panel head/body
   are transparent over the panel surface, so visible overflow is safe. */
.panel { overflow: visible; }

/* Section sub-heading used inside many panel bodies (was pink, now neutralized). */
.panel-title-inside {
    font-weight: 600;
    font-size: 15px;
    color: var(--text);
    margin: 0 0 4px;
}

/* ---- panel header alignment ------------------------------------------------
   A CollapsiblePanel called without a Header still rendered its .panel-head:
   an empty bar ~48px tall plus a bottom divider, sitting above the body's own
   .panel-title-inside. The result read as two stacked, misaligned headers with
   dead space between them (Create Interview -> "Hosting An Interview").

   Collapse that empty bar to zero height and float its chevron down onto the
   heading's line, so the in-body heading becomes the panel's single header and
   lines up with the collapse control. Panels that pass a real Header keep the
   original full head bar - this block only matches .no-title. */
.panel-head.no-title {
    height: 0;
    min-height: 0;
    padding: 0 20px;
    border-bottom: 0 !important;
    justify-content: flex-end;
    overflow: visible;
}

.panel-head.no-title .pt { display: none; }

/* Nudge the chevron down so it sits on the same line as the heading below it.
   It stays inside .panel-head, so it remains the collapse click target. */
.panel-head.no-title .chev {
    position: relative;
    top: 22px;
    z-index: 2;
}

/* The body now starts at the top of the panel; keep its normal inset. */
.panel-head.no-title + .panel-body { padding-top: 18px; }

/* Legacy pink "badge-pink" helper → clay accent badge. */
.badge-pink {
    background: var(--accent) !important;
    color: #fff !important;
    border-radius: 999px;
}

/* Legacy top accent bar used by the old shell — neutralize to a subtle clay line. */
.color-line { background: linear-gradient(90deg, var(--accent), var(--accent-2)) !important; }

/* ============================================================================
   CENTERED POPUPS — consistent enterprise modals
   ROOT CAUSE FIX: folkshr-theme.css defines a design-system `.modal` (a 460px
   styled box, position:static) that COLLIDES with Bootstrap's `.modal` used by
   every dialog in this app — stripping its fixed full-screen positioning and
   left-pinning it. Here we restore Bootstrap semantics and truly center it.
   ============================================================================ */

/* Restore Bootstrap's overlay behaviour for `.modal` (undo the theme box). */
.modal {
    position: fixed;
    inset: 0;
    width: auto;
    height: 100%;
    max-width: none;
    max-height: none;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: auto;
}

/* When shown (Bootstrap `.show`/`.d-block`, or a page toggling inline display),
   flex-center the dialog both axes. */
.modal.show,
.modal.d-block,
.modal[style*="display: block"],
.modal[style*="display:block"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px;
}

/* The dialog is a plain block (NOT flex — flex row was left-pinning content),
   auto-margined and width-capped; the content box carries the enterprise look. */
.modal-dialog {
    display: block;
    margin: auto !important;
    width: 100%;
    max-width: 600px;
}
.modal-dialog > .modal-content,
.modal .modal-content {
    width: 100%;
    margin: auto;
    max-height: calc(100vh - 48px);
    overflow: auto;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border);
    background: var(--surface);
}
@media (max-width: 576px) { .modal-dialog { max-width: calc(100vw - 24px); } }

/* dialog action buttons align to the reading-end; titles/close icons aligned */
.modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.modal-header { display: flex; align-items: center; justify-content: space-between; }