/* ============================================================
   Modern theme layer — sits on top of Bootstrap 5 defaults.
   Overrides Bootstrap CSS variables + a handful of components
   so existing markup (cards, tables, buttons, forms, badges)
   picks up the new look with no PHP/HTML changes required.
   ============================================================ */

:root {
    /* Gold, matched to the ISY crest — deep enough for AA-contrast white
       button text (~4.9:1), with a brighter metallic gold reserved for
       accents/gradients where it's not sitting under white text alone. */
    --brand-primary: #8f6a0c;
    --brand-primary-dark: #6e530a;
    --brand-accent: #d4af37;
    --brand-ink: #211c11;
    --brand-muted: #6b6250;
    --brand-surface: #ffffff;
    --brand-bg: #f8f6f0;
    --brand-border: #e7e0cd;
    --brand-radius: 12px;

    --bs-primary: var(--brand-primary);
    --bs-primary-rgb: 143, 106, 12;
    --bs-link-color: var(--brand-primary);
    --bs-link-hover-color: var(--brand-primary-dark);
    --bs-body-color: var(--brand-ink);
    --bs-body-bg: var(--brand-bg);
    --bs-border-radius: 10px;
    --bs-border-radius-sm: 8px;
    --bs-border-radius-lg: var(--brand-radius);
}

body {
    font-family: "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    background: var(--brand-bg);
    color: var(--brand-ink);
    -webkit-font-smoothing: antialiased;
}

/* ---- Reference person-facing pages (form, thank-you) ---- */
/* No photo — a gold/charcoal gradient matching the rest of the theme,
   avoiding any stock-photo licensing question. */
body.reference-bg {
    min-height: 100vh;
    background:
        radial-gradient(circle at 15% 15%, rgba(212, 175, 55, 0.25), transparent 45%),
        radial-gradient(circle at 85% 90%, rgba(212, 175, 55, 0.18), transparent 50%),
        linear-gradient(160deg, #17130a 0%, #33280d 45%, #4a3a10 100%);
    background-attachment: fixed;
}

/* ---- Root domain landing page — real ISY campus photo ---- */
body.index-bg {
    min-height: 100vh;
    background:
        linear-gradient(160deg, rgba(23, 19, 10, 0.82) 0%, rgba(51, 40, 13, 0.75) 100%),
        url('../img/isybg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

body.index-bg .card {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(212, 175, 55, 0.3);
}

body.reference-bg .card {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(212, 175, 55, 0.3);
}

/* ---- Navbar ---- */
.navbar.bg-dark {
    background: linear-gradient(135deg, #17130a 0%, #33280d 100%) !important;
    box-shadow: 0 2px 12px rgba(23, 19, 10, 0.25);
    border-bottom: 1px solid rgba(212, 175, 55, 0.25);
}

.navbar-brand, .navbar-brand:hover, .navbar-brand:focus {
    font-weight: 700;
    letter-spacing: -0.01em;
    text-decoration: none;
}

.navbar-brand:focus, .navbar-brand:focus-visible,
.navbar-brand-mark:focus, .navbar-brand-mark:focus-visible {
    outline: none;
    box-shadow: none;
}

.navbar-brand, .navbar-brand-mark {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

.navbar-brand-mark {
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
}

.navbar-brand-mark {
    display: inline-block;
    outline: none;
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.navbar .btn-primary {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
}

.navbar .btn-outline-light {
    border-color: rgba(255, 255, 255, 0.35);
}

.navbar .btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.5);
}

.navbar .btn-outline-light.active {
    background: var(--brand-accent);
    border-color: var(--brand-accent);
    color: var(--brand-ink);
    font-weight: 600;
}

.navbar .btn-outline-light.active:hover {
    background: var(--brand-accent);
    border-color: var(--brand-accent);
}

/* ---- Buttons ---- */
.btn {
    font-weight: 500;
    border-radius: 8px;
    transition: transform 0.05s ease, box-shadow 0.15s ease;
}

.btn-primary {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    box-shadow: 0 1px 2px rgba(143, 106, 12, 0.25);
}

.btn-primary:hover, .btn-primary:focus {
    background: var(--brand-primary-dark);
    border-color: var(--brand-primary-dark);
}

.btn-outline-primary {
    color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.btn-outline-primary:hover {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
}

/* ---- Cards ---- */
.card {
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius);
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.05);
}

.card.shadow-sm {
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04) !important;
}

/* ---- Tables ---- */
.table thead.table-light th {
    background-color: #f9fafb;
    color: var(--brand-muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    border-bottom: 1px solid var(--brand-border);
}

.table-hover > tbody > tr:hover > * {
    background-color: #fbf6e8;
}

/* ---- Forms ---- */
.form-control, .form-select {
    border-radius: 8px;
    border-color: var(--brand-border);
}

.form-control:focus, .form-select:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 0.2rem rgba(143, 106, 12, 0.15);
}

.form-label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--brand-ink);
}

/* ---- Badges ---- */
.badge {
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 0.4em 0.7em;
    border-radius: 999px;
}

/* ---- Alerts ---- */
.alert {
    border: none;
    border-radius: 10px;
}

/* ---- Links ---- */
a { text-decoration: none; }
a:hover { text-decoration: underline; }

#signature-pad-canvas,
.question-signature-canvas {
    border: 1px solid #ced4da;
    border-radius: 6px;
    width: 100%;
    height: 180px;
    touch-action: none;
    background: #fff;
}

.rating-scale {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.rating-scale label {
    cursor: pointer;
}

.rating-scale input[type="radio"] {
    display: none;
}

.rating-scale span {
    display: inline-block;
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    border: 1px solid #ced4da;
    border-radius: 6px;
}

.rating-scale input[type="radio"]:checked + span {
    background: var(--brand-primary);
    color: #fff;
    border-color: var(--brand-primary);
}

/* ---- Draggable question list (hr/staff_type_edit.php) ---- */
.drag-handle {
    cursor: grab;
    color: var(--brand-muted);
    user-select: none;
    font-size: 1rem;
    line-height: 1.5;
}

.drag-handle:active {
    cursor: grabbing;
}

#question-list .sortable-ghost {
    opacity: 0.4;
}