:root {
    --border: #e6e4dd;
    --border-strong: #d8d5cb;
    --text: #2d2b26;
    --muted: #83817b;
    --accent: #025368;
    --accent-hover: #013e4d;
    --accent-soft: #d9e6ea;
    --danger: #b8452f;
    --danger-soft: #f6e2d8;
    --success-soft: #e3ecd9;
    --neutral-soft: #ece9e1;
    --bg: #faf9f6;
    --card: #ffffff;

    /* 4px-base spacing scale */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;

    /* Elevation ladder: resting surfaces -> hover -> overlays */
    --shadow-xs: 0 1px 2px rgba(61, 53, 41, 0.05);
    --shadow-sm: 0 1px 3px rgba(61, 53, 41, 0.06), 0 4px 10px rgba(61, 53, 41, 0.05);
    --shadow-md: 0 8px 24px rgba(61, 53, 41, 0.10), 0 2px 6px rgba(61, 53, 41, 0.06);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-8);
    background: var(--card);
    box-shadow: var(--shadow-xs);
    position: relative;
    z-index: 1;
}

.topbar .brand {
    font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--accent);
}

.topbar nav { display: flex; gap: var(--space-1); }

.topbar nav a {
    color: var(--muted);
    text-decoration: none;
    padding: var(--space-2) var(--space-3);
    border-radius: 7px;
    font-size: 0.9rem;
    transition: background 0.15s ease, color 0.15s ease;
}

.topbar nav a:hover { color: var(--text); background: var(--neutral-soft); }

.account { display: flex; align-items: center; gap: var(--space-4); color: var(--muted); font-size: 0.85rem; }

.account form { margin: 0; }

.account button {
    background: none;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    padding: var(--space-1) var(--space-3);
    cursor: pointer;
    color: var(--text);
    font-size: 0.85rem;
}

.account button:hover { background: var(--neutral-soft); }

main {
    max-width: 1000px;
    margin: var(--space-10) auto;
    padding: 0 var(--space-8);
}

h1 {
    font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
    font-size: 1.6rem;
    font-weight: 600;
    margin: 0 0 var(--space-6);
}

h2 {
    font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
    font-size: 1.2rem;
    font-weight: 600;
    margin: var(--space-10) 0 var(--space-4);
}

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

th, td {
    text-align: left;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
}

th {
    background: var(--neutral-soft);
    font-weight: 600;
    color: var(--text);
}

tr:last-child td { border-bottom: none; }

tbody tr:hover td { background: var(--neutral-soft); }

form.inline { display: inline; margin: 0; }

.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: var(--space-6) var(--space-8);
    margin-bottom: var(--space-6);
    box-shadow: var(--shadow-sm);
}

/* Native <dialog> overlay. The browser handles the backdrop, focus trap and Escape-to-close, so
   this is styling only — same surface treatment as .card, one rung higher on the elevation ladder. */
dialog.modal {
    background: var(--card);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: var(--space-6) var(--space-8);
    box-shadow: var(--shadow-md);
    width: min(34rem, calc(100vw - var(--space-8)));
}

dialog.modal::backdrop { background: rgba(61, 53, 41, 0.35); }

dialog.modal h2 { margin-top: 0; }

.modal-actions { display: flex; gap: var(--space-3); align-items: center; margin-top: var(--space-6); }

.filters { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); align-items: flex-end; }

label { display: block; font-size: 0.85rem; color: var(--muted); margin-bottom: var(--space-2); }

input, select, textarea {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    font-size: 0.9rem;
    background: var(--card);
    color: var(--text);
    font-family: inherit;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.field { margin-bottom: var(--space-4); }

button, .btn {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 7px;
    padding: var(--space-2) var(--space-5);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
    box-shadow: var(--shadow-xs);
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

button:hover, .btn:hover { background: var(--accent-hover); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
button:active, .btn:active { transform: scale(0.98); box-shadow: var(--shadow-xs); }

button.secondary, .btn.secondary { background: var(--card); color: var(--text); border: 1px solid var(--border-strong); box-shadow: none; }
button.secondary:hover, .btn.secondary:hover { background: var(--neutral-soft); }

button.danger, .btn.danger { background: var(--danger); }
button.danger:hover, .btn.danger:hover { background: #9c3a26; }

.badge {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    background: var(--neutral-soft);
    color: var(--text);
}

.badge.conflict { background: var(--danger-soft); color: var(--danger); }
.badge.status-HIRED { background: var(--success-soft); color: #4a6b3a; }
.badge.status-REJECTED { background: var(--danger-soft); color: var(--danger); }
.badge.status-WITHDRAWN { background: var(--neutral-soft); color: var(--muted); }

.badge.health-ok { background: var(--success-soft); color: #4a6b3a; }
.badge.health-error { background: var(--danger-soft); color: var(--danger); }
.badge.health-unknown { background: var(--neutral-soft); color: var(--muted); }

.login-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: var(--bg);
}

.login-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: var(--space-10);
    width: 340px;
    box-shadow: var(--shadow-md);
}

.error-text { color: var(--danger); font-size: 0.85rem; margin-top: var(--space-2); }

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.page-header-actions { display: flex; gap: var(--space-3); }

.split-view {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    align-items: start;
    margin-bottom: var(--space-6);
}

@media (max-width: 900px) {
    .split-view { grid-template-columns: 1fr; }
}

.resume-frame {
    width: 100%;
    height: 80vh;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card);
}

.resume-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80vh;
    border: 1px dashed var(--border-strong);
    border-radius: 10px;
    color: var(--muted);
    font-size: 0.9rem;
}

main:has(.split-view) { max-width: 1400px; }

.attachment-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-3);
}

.attachment-frame {
    flex-basis: 100%;
    max-height: 400px;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card);
    padding: var(--space-3);
}

.attachment-frame embed { width: 100%; height: 380px; }
.attachment-frame img { width: 100%; height: auto; display: block; }
.attachment-frame pre.attachment-text { white-space: pre-wrap; word-break: break-word; margin: 0; font-family: inherit; }

th a.sort-link { color: inherit; text-decoration: none; white-space: nowrap; }
th a.sort-link:hover { text-decoration: underline; }

.pagination {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-4);
    font-size: 0.9rem;
    color: var(--muted);
}

/* --- office/proposal-form.html only: 1/3 form, 2/3 document viewer --- */
.split-view.split-view--form { grid-template-columns: 1fr 2fr; }

/* --- Document viewer accordion (used only in proposal-form.html) --- */
.doc-viewer { display: flex; flex-direction: column; gap: var(--space-3); }

.doc-item {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}
.doc-item > summary {
    list-style: none;
    cursor: pointer;
    padding: var(--space-3) var(--space-4);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.doc-item > summary::-webkit-details-marker { display: none; }
.doc-item > summary::after { content: '\25B8'; color: var(--muted); transition: transform 0.15s ease; }
.doc-item[open] > summary::after { transform: rotate(90deg); }
.doc-item > summary:hover { background: var(--neutral-soft); }
.doc-item[open] > summary { border-bottom: 1px solid var(--border); }

.doc-item-body { padding: var(--space-4); }
.doc-embed { width: 100%; height: 65vh; border: none; display: block; }
.doc-empty { color: var(--muted); font-size: 0.9rem; margin: 0; }

.doc-item .attachment-frame { border: none; border-radius: 0; box-shadow: none; background: transparent; padding: var(--space-4); margin: 0; }

/* --- Per-office document groups (used in hr/applicant-detail.html) --- */
.office-documents { margin-bottom: var(--space-8); }
.office-documents h3 { font-size: 1rem; font-weight: 600; margin: 0 0 var(--space-3); }
.office-documents .doc-viewer { margin-top: var(--space-3); }

/* --- Input polish, scoped to the proposal form only --- */
#proposal-form label { margin-bottom: var(--space-1); }
#proposal-form .field { margin-bottom: var(--space-5); }
#proposal-form input,
#proposal-form select,
#proposal-form textarea {
    width: 100%;
    padding: var(--space-3);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#proposal-form input:hover,
#proposal-form select:hover,
#proposal-form textarea:hover { border-color: var(--muted); }
#proposal-form input[type="file"]::file-selector-button {
    background: var(--card);
    color: var(--text);
    border: 1px solid var(--border-strong);
    border-radius: 7px;
    padding: var(--space-2) var(--space-4);
    margin-right: var(--space-3);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease;
}
#proposal-form input[type="file"]::file-selector-button:hover { background: var(--neutral-soft); }