/* ===== Brandenbed Living Spaces ===== */
:root {
    /* Brand navy/gold now sourced from tokens.css (loaded before this file)
       so the public site and admin panel share one canonical brand value. */
    --navy: var(--bb-navy-900, #0D1B2E);
    --navy-hover: var(--bb-navy-800, #162438);
    --navy-light: var(--bb-navy-700, #1E3050);
    --navy-muted: rgba(255,255,255,0.55);

    --gold: var(--bb-gold-500, #C9A227);
    --gold-dark: var(--bb-gold-600, #A8891F);
    --gold-light: var(--bb-gold-400, #D9B640);
    --gold-bg: #FBF7EC;
    --gold-border: #E8D088;

    --text: #111827;
    --text-muted: #6B7280;
    --text-light: #9CA3AF;
    --bg: #F3F4F6;
    --bg-2: #FFFFFF;
    --bg-3: #F9FAFB;
    --bg-4: #F3F4F6;
    --border: #E5E7EB;
    --border-dark: #D1D5DB;
    --success: #15803D;
    --success-bg: #F0FDF4;
    --success-border: #86EFAC;
    --danger: #B91C1C;
    --danger-bg: #FEF2F2;
    --danger-border: #FCA5A5;
    --warning: #92400E;
    --warning-bg: #FFFBEB;
    --warning-border: #FCD34D;
    --blue: #1D4ED8;
    --radius: var(--bb-radius-md, 12px);
    --radius-sm: var(--bb-radius-sm, 8px);
    --shadow-sm: var(--bb-shadow-1, 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05));
    --shadow: var(--bb-shadow-2, 0 4px 6px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04));
    --shadow-md: var(--bb-shadow-3, 0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.05));
}

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

body {
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* ---- Header ---- */
.site-header {
    background: var(--navy);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 12px rgba(13,27,46,0.35);
}

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

.logo-img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    flex-shrink: 0;
}

.logo-text {
    line-height: 1.15;
}

.logo-text strong {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.3px;
}

.logo-text span {
    display: block;
    font-size: 0.62rem;
    color: var(--gold);
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.header-nav { display: flex; align-items: center; gap: 0.25rem; }

.header-nav a {
    color: var(--navy-muted);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
    display: flex;
    align-items: center;
    gap: 5px;
}

.header-nav a:hover { background: var(--navy-light); color: #fff; }

/* ---- Progress Stepper ---- */
.stepper-wrap {
    background: var(--navy);
    border-bottom: none;
    padding: 1.1rem 2rem 1rem;
    box-shadow: 0 2px 8px rgba(13,27,46,0.2);
}

/*
 * Two-row layout:
 *   Row 1 (.stepper-track)  — circles and connector lines, all perfectly centred
 *   Row 2 (.stepper-labels) — labels aligned under each circle
 */
.stepper {
    max-width: 680px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Row 1 — circles + lines */
.stepper-track {
    display: flex;
    align-items: center;   /* vertically centre everything in this row */
    justify-content: center;
}

.step-circle {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.07);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.45);
    transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
    position: relative;
    z-index: 1;
}

.step-connector {
    position: relative;
    flex: 1;
    height: 1.5px;
    background: rgba(255,255,255,0.14);
    min-width: 20px;
    overflow: hidden;
}

/* Filled in as the tenant scrolls past each step (see updateStepper() JS) —
   a left-to-right wipe (transform, not background-color) reads as visible
   progress rather than a flat on/off toggle. This is the one piece of
   chrome visible through the entire scroll, so it's worth the extra polish. */
.step-connector::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s var(--bb-ease-out, ease-out);
}
.step-connector.completed::after { transform: scaleX(1); }

/* Row 2 — labels */
.stepper-labels {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.step-label-wrap {
    width: 38px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-label {
    font-size: 0.65rem;
    font-weight: 600;
    color: rgba(255,255,255,0.4);
    text-align: center;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

/* Spacers in label row that match connector widths */
.step-label-spacer {
    flex: 1;
    min-width: 20px;
}

/* Active step (JS-driven on scroll) */
.step-circle.step-item-group.active {
    background: var(--gold);
    border-color: var(--gold);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(201,162,39,0.25);
}

.step-label-wrap.step-item-group.active .step-label {
    color: var(--gold);
    font-weight: 700;
}

/* ---- Container ---- */
.container {
    max-width: 820px;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
}

.container-wide {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 1.5rem;
}

/* ---- Page Title ---- */
.page-title {
    text-align: center;
    padding: 2.5rem 0 2rem;
}

.page-title h1 {
    font-size: 1.65rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.5px;
    margin-bottom: 0.4rem;
}

.page-title p {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.gold-line {
    width: 40px;
    height: 3px;
    background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 100%);
    border-radius: 2px;
    margin: 0.85rem auto 0;
}

/* ---- Card ---- */
.card {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.75rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s;
}

.card:focus-within {
    box-shadow: var(--shadow);
}

.card-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.card-title .step-badge {
    width: 26px;
    height: 26px;
    background: var(--navy);
    color: #fff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 800;
    flex-shrink: 0;
}

.card-title .title-icon {
    color: var(--gold);
    flex-shrink: 0;
}

/* ---- Form Elements ---- */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.form-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }

.form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.form-group.full { grid-column: 1 / -1; }

.field-label {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 2px;
}

.field-label .required { color: var(--danger); }

.note-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: var(--gold-bg);
    color: var(--gold);
    font-size: 0.67rem;
    padding: 2px 7px;
    border-radius: 999px;
    font-weight: 600;
    border: 1px solid var(--gold-border);
    text-transform: none;
    letter-spacing: 0;
}

.input-wrap {
    position: relative;
}

.input-wrap .input-icon {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-light);
    pointer-events: none;
    display: flex;
    align-items: center;
    line-height: 1;
}

/* For textarea wrappers the icon should sit at the top, not vertically centred */
.input-wrap:has(textarea) .input-icon {
    top: 0.75rem;
    transform: none;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="number"],
textarea,
select {
    background: var(--bg-3);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    padding: 0.65rem 0.9rem;
    font-size: 0.9rem;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    width: 100%;
    appearance: none;
    font-weight: 400;
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--gold);
    background: var(--bg-2);
    box-shadow: 0 0 0 3px rgba(184,146,42,0.1);
}

input::placeholder,
textarea::placeholder {
    color: var(--text-light);
}

textarea { resize: vertical; min-height: 90px; }

input[readonly] {
    background: var(--bg-4);
    color: var(--text-muted);
    cursor: not-allowed;
    border-style: dashed;
}

/*
 * Icon-padded inputs — declared AFTER the generic input block so this
 * padding-left wins (same specificity, last rule takes effect).
 */
.input-wrap input,
.input-wrap textarea {
    padding-left: 2.6rem !important;
}

/* ---- Flatpickr overrides ---- */
.flatpickr-input { cursor: pointer; }

.flatpickr-calendar {
    font-family: inherit !important;
    border-radius: var(--radius) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-md) !important;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: var(--gold) !important;
    border-color: var(--gold) !important;
}

.flatpickr-day:hover {
    background: var(--gold-bg) !important;
    border-color: var(--gold-border) !important;
    color: var(--gold) !important;
}

.flatpickr-months .flatpickr-month { color: var(--text) !important; fill: var(--text) !important; }
.flatpickr-current-month { font-family: inherit !important; font-weight: 700 !important; font-size: 1rem !important; }
.numInputWrapper:hover { background: var(--gold-bg) !important; }

/* ---- File Upload ---- */
.upload-box {
    border: 2px dashed var(--border-dark);
    border-radius: var(--radius-sm);
    padding: 1.75rem 1.25rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    position: relative;
    background: var(--bg-3);
}

.upload-box:hover {
    border-color: var(--gold);
    background: var(--gold-bg);
    box-shadow: 0 0 0 3px rgba(184,146,42,0.08);
}

.upload-box.has-file {
    border-color: var(--success);
    background: var(--success-bg);
    border-style: solid;
}

.upload-box input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
}

.upload-icon-wrap {
    width: 48px;
    height: 48px;
    background: var(--bg-2);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.75rem;
    color: var(--text-muted);
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    box-shadow: var(--shadow-sm);
}

.upload-box:hover .upload-icon-wrap {
    background: var(--gold-bg);
    border-color: var(--gold-border);
    color: var(--gold);
}

.upload-box.has-file .upload-icon-wrap {
    background: var(--success-bg);
    border-color: var(--success-border);
    color: var(--success);
}

.upload-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.upload-label strong {
    color: var(--gold);
    font-weight: 600;
}

.upload-hint {
    font-size: 0.75rem;
    color: var(--text-light);
    margin-top: 0.3rem;
}

.file-name {
    margin-top: 0.6rem;
    font-size: 0.8rem;
    color: var(--success);
    font-weight: 600;
    display: none;
    align-items: center;
    gap: 5px;
    justify-content: center;
}
/* A successful upload is positive confirmation, not a neutral state change
   — the checkmark earns a small expressive pop rather than the plain fades
   used elsewhere on this page. */
@keyframes fileNamePop {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}
@keyframes checkPop {
    from { transform: scale(0.6); }
    to   { transform: scale(1); }
}
.file-name.pop-in { animation: fileNamePop 0.25s var(--bb-ease-out, ease-out) both; }
.file-name.pop-in svg { animation: checkPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@media (prefers-reduced-motion: reduce) {
    .file-name.pop-in, .file-name.pop-in svg { animation: none; }
}

/* Signature draw/upload panel switch — a short fade+rise instead of an
   instant pop; display toggling itself stays in JS (the canvas needs to be
   laid out before resizeCanvas() can measure it), this just softens the
   already-instant swap. */
@keyframes panelEnter {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}
.panel-enter { animation: panelEnter 0.25s var(--bb-ease-out, ease-out) both; }
@media (prefers-reduced-motion: reduce) {
    .panel-enter { animation: none; }
}

/* Signature error message — corrective feedback fades and settles, no
   bounce (that expressiveness is reserved for positive confirmations like
   .file-name.pop-in above). */
@keyframes errorSettle {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}
#sig-error.pop-in { animation: errorSettle 0.2s var(--bb-ease-out, ease-out) both; }
@media (prefers-reduced-motion: reduce) {
    #sig-error.pop-in { animation: none; }
}

/* Germany-residency document group — display toggling stays in JS (kept
   simple/robust rather than a grid-template-rows height transition, which
   proved unreliable in testing); the .panel-enter fade+rise on reveal
   still replaces the old instant, un-animated swap. */
#germany-docs-group { display: none; }

/* ---- Signature Tabs ---- */
.sig-tabs {
    display: flex;
    gap: 0;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: 0.75rem;
    width: fit-content;
}

.sig-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0.5rem 1.1rem;
    font-size: 0.82rem;
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
    border: none;
    background: var(--bg-3);
    color: var(--text-muted);
    transition: background 0.15s, color 0.15s;
}

.sig-tab:not(:last-child) {
    border-right: 1.5px solid var(--border);
}

.sig-tab.active {
    background: var(--gold);
    color: #fff;
}

.sig-tab:not(.active):hover {
    background: var(--gold-bg);
    color: var(--gold);
}

/* ---- Signature Upload Zone ---- */
.sig-upload-zone {
    border: 1.5px dashed var(--border-dark);
    border-radius: var(--radius-sm);
    background: var(--bg-3);
    padding: 2rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    min-height: 140px;
}

.sig-upload-zone:hover {
    border-color: var(--gold);
    background: var(--gold-bg);
}

/* ---- Signature Pad ---- */
.sig-container {
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-2);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

#signature-canvas {
    display: block;
    width: 100%;
    height: 180px;
    cursor: crosshair;
    background: #fff;
}

.sig-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 0.9rem;
    border-top: 1px solid var(--border);
    background: var(--bg-3);
}

.sig-hint {
    font-size: 0.75rem;
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 5px;
}

.btn-clear-sig {
    font-size: 0.775rem;
    color: var(--danger);
    background: none;
    border: 1px solid var(--danger-border);
    cursor: pointer;
    font-family: inherit;
    padding: 0.3rem 0.7rem;
    border-radius: 6px;
    transition: background 0.15s;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

.btn-clear-sig:hover { background: var(--danger-bg); }

/* ---- Terms Checkbox ---- */
.terms-box {
    background: var(--bg-3);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 1.1rem 1.25rem;
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    transition: border-color 0.2s;
}

.terms-box:has(input:checked) {
    border-color: var(--gold-border);
    background: var(--gold-bg);
}

.terms-box input[type="checkbox"] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    accent-color: var(--gold);
    cursor: pointer;
    margin-top: 2px;
    border: none;
    background: transparent;
    padding: 0;
}

.terms-text {
    font-size: 0.875rem;
    color: var(--text-muted);
    line-height: 1.65;
}

.terms-text a {
    color: var(--gold);
    text-decoration: none;
    font-weight: 600;
}

.terms-text a:hover { text-decoration: underline; }

/* ---- Buttons ---- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0.7rem 1.5rem;
    border-radius: 8px;
    border: 1.5px solid transparent;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s var(--bb-ease-out, ease-out), box-shadow 0.15s var(--bb-ease-out, ease-out), background 0.15s var(--bb-ease-out, ease-out), border-color 0.15s var(--bb-ease-out, ease-out), color 0.15s var(--bb-ease-out, ease-out);
    text-decoration: none;
    letter-spacing: 0.01em;
}

.btn:active { transform: scale(0.98); transition-duration: 0.1s; }

.btn-primary {
    background: linear-gradient(135deg, var(--navy-light) 0%, var(--navy) 100%);
    color: #fff;
    border-color: var(--navy);
    box-shadow: 0 2px 8px rgba(13,27,46,0.35), inset 0 1px 0 rgba(255,255,255,0.08);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--navy-hover) 0%, var(--navy-light) 100%);
    box-shadow: 0 4px 14px rgba(13,27,46,0.45);
    border-color: var(--gold);
}

.btn-secondary {
    background: var(--bg-2);
    color: var(--text);
    border-color: var(--border-dark);
    box-shadow: var(--shadow-sm);
}

.btn-secondary:hover { border-color: var(--gold); color: var(--gold); background: var(--gold-bg); }

.btn-success { background: var(--success); color: #fff; border-color: var(--success); }
.btn-success:hover { opacity: 0.88; }

.btn-danger  { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-danger:hover { opacity: 0.88; }

.btn-warning { background: #D97706; color: #fff; border-color: #B45309; }
.btn-warning:hover { opacity: 0.88; }

.btn-sm { padding: 0.38rem 0.85rem; font-size: 0.8rem; border-radius: 6px; }

.btn-lg { padding: 0.85rem 2rem; font-size: 0.95rem; border-radius: 10px; }

.btn-full { width: 100%; }

/* ---- Status Badge ---- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0.22rem 0.65rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.badge-pending  { background: var(--warning-bg);  color: var(--warning); border: 1px solid var(--warning-border); }
.badge-accepted { background: var(--success-bg);  color: var(--success); border: 1px solid var(--success-border); }
.badge-rejected { background: var(--danger-bg);   color: var(--danger);  border: 1px solid var(--danger-border); }

/* ---- Alert ---- */
.alert {
    padding: 0.85rem 1.1rem;
    border-radius: 8px;
    margin-bottom: 1.25rem;
    font-size: 0.875rem;
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    border: 1px solid transparent;
}

.alert-success { background: var(--success-bg); border-color: var(--success-border); color: var(--success); }
.alert-error   { background: var(--danger-bg);  border-color: var(--danger-border);  color: var(--danger); }
.alert-info    { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning); }
.alert strong  { font-weight: 700; color: inherit; }

/* ---- Table ---- */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.data-table th {
    background: var(--bg-3);
    color: var(--text-muted);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    font-weight: 700;
}

.data-table td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.data-table tbody tr:hover { background: var(--bg-3); }

.data-table .no-data {
    text-align: center;
    color: var(--text-muted);
    padding: 3.5rem;
    font-size: 0.9rem;
}

/* ---- Detail View ---- */
.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.detail-item label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 4px;
}

.detail-item .value {
    font-size: 0.925rem;
    color: var(--text);
    word-break: break-word;
    font-weight: 500;
}

/* .stats-row / .stat-card are admin-only (admin/index.php) — fully
   owned by admin.css, which loads after this file and already
   redeclares every property below plus hover states. Having a second
   copy here meant admin.css's unconditional 3-column rule always won
   over this file's responsive 2-col/1-col breakpoints regardless of
   viewport width, since admin.css loads later — the dashboard's stat
   cards never actually collapsed on mobile. See admin.css for the
   (now single) source of truth, including its own responsive rules. */

/* ---- Document Link ---- */
.doc-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--gold);
    font-size: 0.85rem;
    text-decoration: none;
    padding: 0.4rem 0.85rem;
    background: var(--gold-bg);
    border-radius: 6px;
    border: 1px solid var(--gold-border);
    transition: background 0.15s;
    font-weight: 600;
}

.doc-link:hover { background: #F3E8C8; }

/* ---- Submit Area ---- */
.submit-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0;
    text-align: center;
}

.submit-note {
    font-size: 0.82rem;
    color: var(--text-muted);
    max-width: 420px;
    line-height: 1.6;
}

/* ---- Footer ---- */
.site-footer {
    text-align: center;
    padding: 1.75rem;
    color: var(--text-light);
    font-size: 0.8rem;
    border-top: 1px solid var(--border);
    background: var(--bg-2);
}

/* Admin sidebar/topbar layout (.admin-wrapper, .sidebar, .sidebar-label,
   .stats-row 3-col-desktop rule, and their mobile treatment) all now live
   solely in admin.css — see the note there for why this used to be split
   across both files with !important overrides fighting each other. */

.sidebar a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0.6rem 1.25rem;
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: background 0.12s, color 0.12s;
    border-left: 2px solid transparent;
}

.sidebar a:hover { background: var(--navy-light); color: #fff; }

.sidebar a.active {
    border-left-color: var(--gold);
    background: rgba(201,162,39,0.12);
    color: var(--gold);
    font-weight: 600;
}

.sidebar .badge-count {
    margin-left: auto;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.55);
    font-size: 0.68rem;
    padding: 1px 7px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.12);
    font-weight: 700;
}

.sidebar a.active .badge-count {
    background: rgba(201,162,39,0.18);
    color: var(--gold);
    border-color: rgba(201,162,39,0.35);
}

.main-content { flex: 1; padding: 2rem; overflow: auto; background: var(--bg); }

/* ---- Modal ---- */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 200;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}

.modal-overlay.open { display: flex; }

.modal {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2rem;
    width: 100%;
    max-width: 480px;
    box-shadow: var(--shadow-md);
    animation: modalIn 0.18s ease;
}

@keyframes modalIn {
    from { opacity: 0; transform: scale(0.96) translateY(-8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.modal h3 { margin-bottom: 0.6rem; font-size: 1rem; font-weight: 700; }
.modal p  { color: var(--text-muted); font-size: 0.875rem; margin-bottom: 1rem; }

.modal textarea {
    width: 100%;
    background: var(--bg-3);
    border: 1.5px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    padding: 0.75rem;
    font-family: inherit;
    font-size: 0.875rem;
    resize: vertical;
    min-height: 90px;
}

.modal textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(184,146,42,0.1); }
.modal-actions { display: flex; gap: 0.75rem; margin-top: 1rem; justify-content: flex-end; }

.edit-field {
    background: var(--bg-3);
    border: 1.5px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    padding: 0.5rem 0.75rem;
    font-family: inherit;
    font-size: 0.875rem;
    width: 100%;
}

.edit-field:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(184,146,42,0.1); }

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
    padding: 0.35rem 0.7rem;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
}

.back-link:hover { background: var(--bg-3); color: var(--gold); }

/* ---- Divider ---- */
.divider { border: none; border-top: 1px solid var(--border); margin: 1.5rem 0; }

/* ---- Responsive ---- */
/* ============================================================
   Responsive — tablet (≤ 768px)
   ============================================================ */
@media (max-width: 768px) {
    /* Header */
    .site-header { padding: 0 1rem; height: 56px; }
    .logo-text strong { font-size: 0.95rem; }
    .logo-text span   { font-size: 0.68rem; }
    .header-nav a span { display: none; } /* hide nav labels, keep icon */

    /* Container */
    .container      { padding: 1.25rem 1rem 3rem; }
    .container-wide { padding: 0 1rem; margin: 1rem auto; }

    /* Page title */
    .page-title h1 { font-size: 1.35rem; }

    /* Cards */
    .card { padding: 1.25rem 1rem; }

    /* Form grids */
    .form-grid,
    .form-grid.cols-3 { grid-template-columns: 1fr; gap: 1rem; }
    .form-group.full  { grid-column: 1; }

    /* Detail grid (.stats-row responsive rules moved to admin.css) */
    .detail-grid { grid-template-columns: 1fr; }

    /* Stepper */
    .stepper-wrap { padding: 0.75rem 1rem 0.6rem; }
    .stepper      { max-width: 100%; gap: 5px; }
    .step-circle  { width: 28px; height: 28px; min-width: 28px; }
    .step-circle svg { width: 12px; height: 12px; }
    .step-connector   { min-width: 8px; }
    .step-label-wrap  { width: 28px; }
    .step-label       { font-size: 0.55rem; }

    /* Signature tabs */
    .sig-tabs { width: 100%; }
    .sig-tab  { flex: 1; justify-content: center; font-size: 0.8rem; }

    /* Admin sidebar mobile layout is owned by admin.css's own
       (max-width: 900px) off-canvas drawer block — this file used to
       ship a competing horizontal-scrolling-topbar version of the same
       component, which admin.css had to fight off with !important on
       every property. Removed rather than fixed in place, since the
       two designs were mutually exclusive by nature. */

    /* Profile header card */
    .profile-header { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .profile-header > div:last-child { flex-wrap: wrap; gap: 0.5rem; }
    .profile-header .btn { flex: 1 1 auto; justify-content: center; min-width: 0; }

    /* Modals */
    .modal { width: calc(100% - 2rem); padding: 1.5rem 1.25rem; margin: 1rem; max-width: none; }

    /* Buttons */
    .btn-lg { padding: 0.75rem 1.5rem; font-size: 0.9rem; }

    /* Submit area */
    .submit-area { flex-direction: column; align-items: stretch; gap: 0.75rem; }
    .submit-area .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   Responsive — mobile (≤ 480px)
   ============================================================ */
@media (max-width: 480px) {
    /* Header — hide tagline */
    .logo-text span { display: none; }
    .site-header { padding: 0 0.75rem; }

    /* Cards tighter */
    .card { padding: 1rem 0.875rem; border-radius: 10px; }

    /* Card title */
    .card-title { font-size: 0.78rem; gap: 0.5rem; }
    .step-badge { width: 26px; height: 26px; font-size: 0.75rem; }

    /* Page title */
    .page-title { padding: 1.25rem 0 0.75rem; }
    .page-title h1 { font-size: 1.15rem; }

    /* Stepper — hide labels, show only circles */
    .stepper-labels { display: none; }
    .stepper-wrap   { padding: 0.6rem 0.75rem 0.5rem; }
    .step-circle    { width: 26px; height: 26px; min-width: 26px; }
    .step-circle svg { width: 11px; height: 11px; }

    /* Fields */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="date"],
    input[type="number"],
    textarea,
    select { font-size: 0.875rem; padding: 0.6rem 0.8rem; }

    .input-wrap input,
    .input-wrap textarea { padding-left: 2.4rem !important; }

    /* Signature canvas shorter */
    #signature-canvas { height: 140px; }

    /* Upload zone compact */
    .sig-upload-zone { padding: 1.25rem 0.75rem; min-height: 110px; }

    /* Alerts */
    .alert { font-size: 0.82rem; padding: 0.75rem 0.9rem; }

    /* Terms box */
    .terms-box { padding: 0.75rem; gap: 0.65rem; }
    .terms-text { font-size: 0.82rem; }

    /* Footer */
    .site-footer { font-size: 0.78rem; padding: 1rem; text-align: center; }

    /* Admin table — hide less critical columns */
    .data-table th:nth-child(4),
    .data-table td:nth-child(4) { display: none; }
    .data-table th:nth-child(5),
    .data-table td:nth-child(5) { display: none; }
    .table-wrap { overflow-x: auto; }

    /* Profile detail items */
    .detail-grid { grid-template-columns: 1fr; gap: 0.75rem; }
    .detail-item label { font-size: 0.68rem; }
    .detail-item .value { font-size: 0.875rem; }
}