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

:root {
    --brand-primary: #053eca;
    --brand-dark: #0a0051;
    --brand-bg: #1b243a;
    --brand-accent: #064dfa;
    --bg-body: #0d1117;
    --bg-card: #1b243a;
    --bg-card-alt: #141c2e;
    --border: #2a3550;
    --text: #ccc;
    --text-bright: #e8eaf0;
    --text-muted: #788;
    --content-max: 1200px;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --bg-panel: #1e1e30;
    --bg-input: #16162a;
    --bg-hover: #2a2a40;
    --bg-hover-lit: #3a3a55;
    --border-subtle: #333;
    --border-input: #444;
    --accent-soft: #5b6abf;
    --accent-link: #7b8fff;
    --text-dim: #888;
    --text-label: #999;
    --text-nav: #aaa;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--bg-body);
    color: var(--text);
    line-height: 1.6;
}

a { color: var(--brand-accent); }

/* Navigation */
nav {
    background: var(--brand-dark);
    color: #fff;
    padding: 0.5rem 2rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.nav-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.nav-brand {
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
}
.nav-links { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
/* Mobile hamburger toggle — hidden on desktop, shown + wired in the <=720px
   query (collapsible nav). */
.nav-toggle { display: none; background: none; border: 1px solid #444;
    color: #ccc; border-radius: 5px; font-size: 1.3rem; line-height: 1;
    padding: 4px 11px; cursor: pointer; }
.nav-links a {
    color: var(--text-nav);
    text-decoration: none;
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    font-size: 0.9rem;
    transition: background 0.15s;
}
.nav-links a:hover { background: rgba(255,255,255,0.1); color: #fff; }
.nav-links a.active { background: var(--brand-primary); color: #fff; }

.badge {
    background: #e74c3c;
    color: #fff;
    font-size: 0.7rem;
    padding: 1px 6px;
    border-radius: 10px;
    margin-left: 4px;
}
.badge-blue { background: #3498db; }
.badge-green { background: #27ae60; }
.badge-amber { background: #f39c12; }
.badge-gray { background: #555; }
.badge-purple { background: #8e44ad; }
.badge-indigo { background: #6c3483; }

.nav-sep { color: #555; padding: 0 0.25rem; user-select: none; }

/* Main content — constrained width for readability, full-bleed pages override */
main {
    max-width: var(--content-max);
    margin: var(--spacing-lg) auto;
    padding: 0 var(--spacing-xl);
}
body.page-full main, body.page-pipeline main, body.nerp main {
    max-width: 100%;
}

/* Consistent page header pattern */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
}
.page-header h1, .page-header h2 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-bright);
}

h1 { margin-bottom: var(--spacing-lg); font-size: 1.4rem; color: var(--text-bright); }
h2 { color: var(--text-bright); }

/* Flash messages — dark-aware */
.flash {
    padding: 0.8rem 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}
.flash-success { background: #1e4d2e; color: #8fdfaa; border: 1px solid #2d5a3d; }
.flash-error { background: #5f1e1e; color: #f2a0a0; border: 1px solid #7a2d2d; }
.flash-info { background: var(--brand-bg); color: #8fc4df; border: 1px solid var(--border); }
.flash-warning { background: #5f4a1e; color: #f2c96d; border: 1px solid #7a5a2d; }

/* ── Standard card and section styles ── */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.25rem;
    margin-bottom: var(--spacing-md);
}
.card-compact {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.75rem;
    margin-bottom: var(--spacing-sm);
}
.card h2, .card h3 {
    margin: 0 0 0.75rem;
    font-size: 0.95rem;
    color: var(--text-bright);
}

/* ── Stat cards (used on team, invoices, deal register, etc.) ── */
.stat-row {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    flex-wrap: wrap;
}
.stat-box {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.75rem 1.25rem;
    text-align: center;
    min-width: 100px;
}
.stat-box .val {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-bright);
}
.stat-box .label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* ── Button styles ── */
.btn-action {
    background: var(--brand-primary);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 6px 16px;
    font-size: 0.85rem;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}
.btn-action:hover { background: var(--brand-accent); }

.btn-muted {
    background: var(--bg-card);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 6px 16px;
    font-size: 0.85rem;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}
.btn-muted:hover { background: #253050; border-color: var(--brand-primary); }

/* ── Section divider ── */
.section-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: var(--spacing-lg) 0;
}

/* Posting list */
.posting-list { display: flex; flex-direction: column; gap: 0.75rem; }

.posting-card {
    display: block;
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 1.2rem;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.posting-card:hover {
    border-color: var(--accent-soft);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.posting-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.posting-card h2 {
    font-size: 1.1rem;
    margin-bottom: 0.4rem;
    color: #fff;
}

.posting-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.85rem;
    color: var(--text-dim);
    margin-bottom: 0.5rem;
}

.description-preview {
    font-size: 0.9rem;
    color: var(--text-label);
    margin-bottom: 0.4rem;
}

.rationale {
    font-size: 0.85rem;
    color: var(--text-dim);
    font-style: italic;
}

/* Platform tag */
.platform-tag {
    background: var(--bg-hover);
    color: var(--text-nav);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
}

/* Score badges */
.score {
    font-weight: 700;
    font-size: 0.9rem;
    padding: 2px 10px;
    border-radius: 4px;
}
.score-high { background: #1e4d2e; color: #6df28e; }
.score-mid { background: #5f4a1e; color: #f2c96d; }
.score-low { background: #5f1e1e; color: #f26d6d; }
.score-pending { background: var(--border-subtle); color: var(--text-dim); }
.score-locked { background: #5f4a1e; color: #f2c96d; font-weight: 500; font-size: 0.8rem; }

/* Locked posting cards */
.posting-locked { opacity: 0.7; border-left: 3px solid #f39c12; }
.posting-locked:hover { opacity: 0.85; }

/* Expired posting cards */
.posting-expired { opacity: 0.5; border-left: 3px solid #dc3545; }
.posting-expired:hover { opacity: 0.7; }

/* Detail page */
.posting-detail { background: var(--bg-panel); border: 1px solid var(--border-subtle); border-radius: 8px; padding: 2rem; }

.detail-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.back-link {
    color: var(--accent-link);
    text-decoration: none;
    font-size: 0.9rem;
}

.detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    color: var(--text-label);
}

/* Status actions */
.status-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.current-status { font-size: 0.9rem; color: var(--text-label); }
.inline-form { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* Buttons */
.btn {
    display: inline-block;
    padding: 0.4rem 1rem;
    border: 1px solid #555;
    border-radius: 5px;
    font-size: 0.85rem;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
    background: #2a2a40;
    color: #e0e0e0;
    transition: opacity 0.15s, background 0.15s;
}
.btn:hover { opacity: 0.85; background: #363652; }
.btn-blue { background: #3498db; color: #fff; }
.btn-green { background: #27ae60; color: #fff; }
.btn-gray, .btn-grey { background: #555; color: #fff; }
.btn-red { background: #D55E00; color: #fff; }
.btn-outline { background: transparent; border-color: #555; color: #ccc; }

/* Sections */
.section {
    margin-bottom: 2rem;
}
.section h2 {
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--border-subtle);
}

/* Skill tags */
.skill-tags { margin: 0.5rem 0; }
.tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    margin: 2px;
}
.tag-green { background: #1e4d2e; color: #8fdfaa; }
.tag-red { background: #5f1e1e; color: #f26d6d; }

/* Description */
.description-full {
    white-space: pre-wrap;
    font-size: 0.9rem;
    line-height: 1.7;
    color: #ccc;
}

/* Draft editor */
.draft-editor {
    width: 100%;
    font-family: inherit;
    font-size: 0.9rem;
    padding: 1rem;
    border: 1px solid var(--border-input);
    border-radius: 6px;
    resize: vertical;
    line-height: 1.6;
    background: var(--bg-input);
    color: #ccc;
}
.draft-editor:focus { outline: none; border-color: var(--accent-soft); }
.draft-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

/* Freelance.nl draft fields */
.draft-fields {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.draft-field {
    display: grid;
    grid-template-columns: 160px 1fr auto;
    gap: 0.75rem;
    align-items: start;
    padding: 0.75rem;
    background: var(--bg-input);
    border-radius: 6px;
    border: 1px solid #2a2a3d;
}
/* Compact layout when draft fields are in a multi-column row */
div[style*="grid-template-columns: 1fr 1fr 1fr"] > .draft-field,
div[style*="grid-template-columns: 1fr 1fr;"] > .draft-field {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
}
div[style*="grid-template-columns: 1fr 1fr 1fr"] > .draft-field label,
div[style*="grid-template-columns: 1fr 1fr;"] > .draft-field label {
    grid-column: 1 / -1;
}
.draft-field label {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-label);
    padding-top: 2px;
}
.draft-field-value {
    font-size: 0.9rem;
    color: #eee;
    line-height: 1.5;
    user-select: all;
    min-width: 0;
    overflow-wrap: break-word;
}
.draft-field-long {
    white-space: pre-wrap;
}
.btn-copy {
    padding: 4px 10px;
    border: 1px solid var(--border-input);
    border-radius: 4px;
    background: var(--bg-hover);
    color: #ccc;
    font-size: 0.8rem;
    cursor: pointer;
    white-space: nowrap;
}
.btn-copy:hover { background: var(--bg-hover-lit); }

/* Log table */
.log-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.log-table th, .log-table td {
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #2a2a3d;
}
.log-table th {
    background: var(--bg-input);
    font-weight: 600;
    color: var(--text-label);
}
.log-error { background: rgba(95,30,30,0.3); }

/* Settings page */
.settings-card {
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.settings-card h2 {
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
    color: #fff;
}
.settings-desc {
    font-size: 0.9rem;
    color: var(--text-dim);
    margin-bottom: 1rem;
}
.settings-form { margin: 0; }
.settings-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.settings-row label {
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    color: #ccc;
}
.settings-input {
    width: 100px;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border-input);
    border-radius: 5px;
    font-size: 0.9rem;
    font-family: inherit;
    background: var(--bg-input);
    color: #ccc;
}
.settings-input:focus { outline: none; border-color: var(--accent-soft); }
.settings-hint {
    font-size: 0.8rem;
    color: var(--text-label);
    margin-top: 0.5rem;
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: 3rem;
    color: var(--text-dim);
}
.empty-description {
    background: #2a2a1e;
    border: 1px dashed #5f4a1e;
    border-radius: 6px;
    padding: 1rem;
    color: #f2c96d;
    font-size: 0.9rem;
}
.empty-description p { margin: 0; }

/* Prime opportunity tag */
.tag-prime { background: #3d2a5a; color: #c8a0e8; font-weight: 600; }
.tag-riu { background: #5b3b8c; color: #e0c8ff; font-weight: 600; }

/* Chip copy buttons for expertise/qualities */
.chip-copy {
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    border: 1px solid var(--border-input);
    background: var(--bg-hover);
    color: #ccc;
    cursor: pointer;
    font-size: 0.85rem;
    font-family: inherit;
    transition: background 0.2s, border-color 0.2s;
}
.chip-copy:hover { background: var(--bg-hover-lit); border-color: #555; }
.chip-copy.chip-copied { background: #1e4d2e; border-color: #27ae60; color: #8fdfaa; }

/* Deadline tag */
.deadline-tag {
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    background: #5f4a1e;
    color: #f2c96d;
    font-weight: 500;
    white-space: nowrap;
}
.deadline-tag.deadline-passed {
    background: #5f1e1e;
    color: #f26d6d;
    text-decoration: line-through;
}

/* Batch selection */
.posting-card-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}
.posting-card-row .posting-card {
    flex: 1;
    min-width: 0;
}
.batch-checkbox {
    flex-shrink: 0;
    padding-top: 1.3rem;
    cursor: pointer;
}
.batch-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}
.batch-toolbar {
    position: sticky;
    top: 0;
    background: #1a1a2e;
    color: #fff;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    z-index: 10;
    font-size: 0.9rem;
}
.batch-toolbar .btn { font-size: 0.8rem; padding: 0.3rem 0.75rem; }

/* Partners */
.partner-link {
    color: var(--accent-link);
    text-decoration: none;
    font-weight: 500;
}
.partner-link:hover { text-decoration: underline; }

.partner-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
}
.partner-status-prospect { background: var(--border-subtle); color: var(--text-label); }
.partner-status-identified { background: var(--border-subtle); color: var(--text-label); }
.partner-status-evaluating { background: #5f4a1e; color: #f2c96d; }
.partner-status-contacted { background: #1e3a5f; color: #8fc4df; }
.partner-status-in_discussion { background: #5f4a1e; color: #f2c96d; }
.partner-status-active_partner { background: #1e4d2e; color: #6df28e; }
.partner-status-inactive { background: #5f1e1e; color: #f26d6d; }

.partners-table td:first-child { font-weight: 500; }

/* ── Background task pulse animation ── */
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ── Forms (global dark) ─────────────────────────────────────────────── */
input, select, textarea {
    background: var(--bg-input);
    color: #ccc;
    border: 1px solid var(--border-input);
    border-radius: 4px;
    padding: 0.45rem 0.6rem;
    font-size: 0.88rem;
    font-family: inherit;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent-soft);
}

/* ── Sort bar (dark) ─────────────────────────────────────────────────── */
.sort-link {
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    text-decoration: none;
    color: var(--text-nav);
    background: var(--bg-hover);
}
.sort-link:hover { background: var(--bg-hover-lit); color: #fff; }
.sort-link.sort-active { background: var(--accent-soft); color: #fff !important; text-decoration: underline; font-weight: 600; }

/* ── NERP (Resource Planning) shared dark theme ─────────────────────────── */
.nerp-page { color: #ccc; }
.nerp-page h1 { color: #fff; margin-bottom: 0.5rem; font-size: 1.5rem; }
.nerp-page h2 { color: #fff; margin-top: 1.5rem; margin-bottom: 0.75rem; }

/* NERP pages use wider layout */
body.nerp main { max-width: 100% !important; padding: 0 0.75rem !important; }

.nerp-page .stat-card {
    background: var(--bg-panel); border: 1px solid var(--border-subtle); border-radius: 8px;
    padding: 0.75rem 1.25rem; min-width: 120px; text-align: center;
}
.nerp-page .stat-card .stat-value { font-size: 1.6rem; font-weight: 700; color: #fff; }
.nerp-page .stat-card .stat-label { font-size: 0.75rem; color: var(--text-label); text-transform: uppercase; letter-spacing: 0.05em; }

.nerp-page .btn-primary {
    background: var(--accent-soft); color: #fff; border: none; padding: 0.5rem 1.25rem;
    border-radius: 6px; cursor: pointer; font-size: 0.9rem;
}
.nerp-page .btn-primary:hover { background: #6d7cd4; }

.nerp-page .nerp-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.nerp-page .nerp-table th {
    text-align: left; padding: 0.5rem 0.75rem; border-bottom: 2px solid var(--border-subtle);
    color: var(--text-label); font-weight: 600; text-transform: uppercase; font-size: 0.75rem;
    letter-spacing: 0.04em;
}
.nerp-page .nerp-table td { padding: 0.5rem 0.75rem; border-bottom: 1px solid #2a2a3d; }
.nerp-page .nerp-table tr:hover { background: rgba(91, 106, 191, 0.08); }
.nerp-page .nerp-table a { color: var(--accent-link); text-decoration: none; }
.nerp-page .nerp-table a:hover { text-decoration: underline; }

.nerp-page .inline-form {
    display: none; background: var(--bg-panel); border: 1px solid var(--border-subtle); border-radius: 8px;
    padding: 1.25rem; margin-bottom: 1.5rem;
}
.nerp-page .inline-form.open { display: block; }
.nerp-page .form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.75rem; }
.nerp-page .form-group { display: flex; flex-direction: column; }
.nerp-page .form-group label { font-size: 0.8rem; color: var(--text-label); margin-bottom: 0.25rem; }
.nerp-page .form-actions { margin-top: 0.75rem; }

/* NERP skill/category/status badges */
.badge-skill { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 4px; font-size: 0.75rem; font-weight: 600; text-transform: capitalize; }
.badge-intern { background: var(--border-input); color: #ccc; }
.badge-junior { background: #2d5a3d; color: #8fdfaa; }
.badge-mid { background: #2d4a6d; color: #8fc4df; }
.badge-senior { background: #5a3d7a; color: #c8a0e8; }
.badge-director { background: #7a5a2d; color: #e8c880; }
.badge-managing_director { background: #7a2d2d; color: #e8a0a0; }
.badge-cat { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 4px; font-size: 0.75rem; font-weight: 600; }
.badge-technical { background: #1e3a5f; color: #6db3f2; }
.badge-risk { background: #5f1e1e; color: #f26d6d; }
.badge-status { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 4px; font-size: 0.75rem; font-weight: 600; }
.badge-active { background: #1e4d2e; color: #6df28e; }
.badge-inactive { background: var(--border-input); color: var(--text-label); }
.badge-on_leave { background: #5f4a1e; color: #f2c96d; }

/* NERP invoices */
.badge-inv-draft { background: var(--border-input); color: #ccc; }
.badge-inv-submitted { background: #2d4a6d; color: #8fc4df; }
.badge-inv-paid { background: #1e4d2e; color: #6df28e; }
.badge-inv-overdue { background: #5f1e1e; color: #f26d6d; }

/* ── Utility classes (replacing common inline styles) ──────────────── */

/* Spacing */
.mt-0 { margin-top: 0; }
.mt-05 { margin-top: 0.5rem; }
.mt-075 { margin-top: 0.75rem; }
.mt-1 { margin-top: 1rem; }
.mb-05 { margin-bottom: 0.5rem; }
.mb-075 { margin-bottom: 0.75rem; }
.mb-1 { margin-bottom: 1rem; }
.mb-15 { margin-bottom: 1.5rem; }
.p-03 { padding: 0.3rem; }
.p-04 { padding: 0.4rem; }
.p-05 { padding: 0.5rem; }
.p-06 { padding: 0.6rem; }

/* Typography */
.text-xs { font-size: 0.72rem; }
.text-sm { font-size: 0.78rem; }
.text-base { font-size: 0.82rem; }
.text-md { font-size: 0.85rem; }
.text-lg { font-size: 1.1rem; }
.text-xl { font-size: 1.5rem; }
.text-muted { color: var(--text-dim); }
.text-dimmed { color: var(--text-nav); }
.text-accent { color: var(--accent-link); }
.text-success { color: #009E73; }
.text-danger { color: #f26d6d; }
.text-warning { color: #f2c96d; }
.text-white { color: #fff; }
.fw-500 { font-weight: 500; }
.fw-700 { font-weight: 700; }
.section-label { font-size: 0.75rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; }
.page-title { font-size: 1.5rem; font-weight: 700; }

/* Layout */
.d-inline { display: inline; }
.d-flex { display: flex; }
.d-grid { display: grid; }
.flex-1 { flex: 1; }
.flex-wrap { flex-wrap: wrap; }
.flex-col { flex-direction: column; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-025 { gap: 0.25rem; }
.gap-05 { gap: 0.5rem; }
.gap-075 { gap: 0.75rem; }
.gap-1 { gap: 1rem; }
.gap-15 { gap: 1.5rem; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.w-full { width: 100%; }
.mt-05 { margin-top: 0.5rem; }
.mt-1 { margin-top: 1rem; }
.mb-05 { margin-bottom: 0.5rem; }
.mb-1 { margin-bottom: 1rem; }

/* Card/panel — replaces inline background:#1e1e30;border:1px solid #333;border-radius:8px;padding:1rem */
.card-box {
    background: var(--bg-panel, #1e1e30);
    border: 1px solid var(--border-subtle, #333);
    border-radius: 8px;
    padding: 1rem;
}
.card-box-sm {
    background: var(--bg-panel, #1e1e30);
    border: 1px solid var(--border-subtle, #333);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
}

/* Row layouts */
.flex-row-center { display: flex; align-items: center; gap: 0.5rem; }
.flex-row-between { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }

/* Form inputs */
.form-input {
    width: 100%;
    padding: 6px;
    background: var(--bg-input);
    border: 1px solid var(--border-input);
    border-radius: 4px;
    color: #eee;
    font-size: 0.82rem;
}
.form-input:focus {
    border-color: var(--accent-link);
    outline: none;
}

/* Accessibility: screen-reader only text */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Consolidated shared components ──────────────────────────────────── */

/* Stat cards (used on briefing, invoices, QBR, profitability) */
.stat-card { background: var(--bg-panel); border-radius: 8px; padding: 1rem; border: 1px solid var(--border-subtle); text-align: center; }
.stat-value { font-size: 1.4rem; font-weight: 700; }
.stat-label { font-size: 0.72rem; color: var(--text-dim); margin-top: 0.25rem; }
.stat-subtitle { font-size: 0.68rem; color: #6df28e; }

/* Status badges */
.badge-draft { background: var(--border-subtle); color: var(--text-nav); }
.badge-submitted { background: #1e3a5f; color: #8ab4f8; }
.badge-paid { background: #1e4d2e; color: #6df28e; }
.badge-overdue { background: #5f1e1e; color: #f26d6d; }

/* Engagement type badges */
.badge-type { padding: 2px 8px; border-radius: 10px; font-size: 0.72rem; font-weight: 600; }
.badge-type-pentest { background: #1e3a5f; color: #8ab4f8; }
.badge-type-red_team { background: #5f1e2e; color: #f2a0a0; }
.badge-type-assessment { background: #1e4d2e; color: #6df28e; }
.badge-type-nis2 { background: #2e1e5f; color: #c0a0f2; }
.badge-type-dora { background: #5f4a1e; color: #f2c96d; }
.badge-type-ai_security { background: #1e4a5f; color: #a0d8f2; }
.badge-type-consulting { background: #4a4a1e; color: #d8d86d; }

/* Info cards */
.info-card { background: var(--bg-panel); border-radius: 8px; padding: 1.25rem; border: 1px solid var(--border-subtle); margin-bottom: 1rem; }
.info-card h3 { margin: 0 0 0.75rem; color: #8ab4f8; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.04em; }

/* Form groups */
.form-group { margin-bottom: 0.75rem; }
.form-group label { display: block; font-size: 0.78rem; color: var(--text-dim); margin-bottom: 3px; }
.form-group input, .form-group select, .form-group textarea {
    background: var(--bg-input); color: #ddd; border: 1px solid var(--border-input); border-radius: 4px;
    padding: 6px 10px; width: 100%; font-size: 0.85rem;
}

/* Revenue confidence dots */
.confidence-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.confidence-high { background: #6df28e; }
.confidence-medium { background: #8ab4f8; }
.confidence-low { background: #f2c96d; }
.confidence-unknown { background: var(--text-dim); }

/* Profit margin color coding */
.margin-good { color: #6df28e; }
.margin-ok { color: #f2c96d; }
.margin-bad { color: #f26d6d; }

/* ── Full-height page layout ───────────────────────────────────────────
   Used by: engagements, capacity, team, invoices, deal_register,
            events, partners, ciso_targets (prospects)
   Set body class "page-full" to activate. NERP pages get both via
   body.nerp which also adds wide padding.
   ─────────────────────────────────────────────────────────────────────── */
body.page-full main, body.nerp main {
    display: flex; flex-direction: column;
    /* `auto`, not `hidden`: these fixed-height shells delegate scrolling to an
       inner `.page-content`, but many pages set body_class=nerp/page-full
       without that wrapper (e.g. timecard), which clipped everything past the
       viewport — the Save button became unreachable when a group expanded.
       With `auto`, main scrolls as a fallback; pages that DO wrap content in
       `.page-content` (flex:1) never overflow main, so they're unchanged. */
    height: calc(100vh - 8rem); overflow: auto;
    margin-top: 0.5rem !important;
}
body.page-full .page-header, body.nerp .page-header { flex-shrink: 0; }
body.page-full .page-content, body.nerp .page-content { flex: 1; overflow: auto; }

/* ── Engagement type badges ────────────────────────────────────────────
   Used by: nerp_engagements, nerp_engagement_detail, nerp_engagement_timeline
   ─────────────────────────────────────────────────────────────────────── */
.badge-engagement-type { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 4px; font-size: 0.75rem; font-weight: 600; text-transform: capitalize; }
.badge-assessment { background: #2d4a6d; color: #8fc4df; }
.badge-pentest { background: #5a3d7a; color: #c8a0e8; }
.badge-red_team { background: #7a2d2d; color: #e8a0a0; }
.badge-consulting { background: #2d5a3d; color: #8fdfaa; }
.badge-training { background: #7a5a2d; color: #e8c880; }
.badge-nis2 { background: #2d4a6d; color: #8fc4df; }
.badge-dora { background: #3d3d5a; color: #b0b0d0; }
.badge-ai_security { background: #5a3d7a; color: #c8a0e8; }
.badge-vciso { background: #2d5a3d; color: #8fdfaa; }
.badge-program_management { background: #7a5a2d; color: #e8c880; }
.badge-other { background: var(--border-input); color: #ccc; }
/* Engagement status badges (used alongside type badges) */
.badge-planned { background: #2d4a6d; color: #8fc4df; }
.badge-completed { background: #3d3d5a; color: #b0b0d0; }
.badge-cancelled { background: #5f1e1e; color: #f26d6d; }

/* ── NERP page flex layout ────────────────────────────────────────────
   Used by: nerp_engagements, nerp_capacity, nerp_team, nerp_invoices
   Apply .nerp-page-layout to the wrapper div inside body.nerp pages
   ─────────────────────────────────────────────────────────────────────── */
.nerp-page-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* ── Summary cards ────────────────────────────────────────────────────
   Used by: deal_register, nerp_invoices, nerp_invoices_by_client,
            timecard_admin, timecard_wbso
   ─────────────────────────────────────────────────────────────────────── */
.summary-cards { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.summary-card {
    background: var(--bg-panel); border: 1px solid var(--border-subtle); border-radius: 8px;
    padding: 0.75rem 1.25rem; min-width: 140px;
}
.summary-card .label,
.summary-card .card-label { font-size: 0.72rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.25rem; }
.summary-card .val,
.summary-card .value,
.summary-card .card-value { font-size: 1.5rem; font-weight: 700; color: #fff; }
.summary-card .card-count { font-size: 0.8rem; color: var(--text-label); }

/* ── Filter tabs ──────────────────────────────────────────────────────
   Used by: nerp_engagements (.status-tabs), deal_register (.filter-bar),
            events (inline filter tabs)
   ─────────────────────────────────────────────────────────────────────── */
.filter-tabs { display: flex; gap: 0.4rem; margin-bottom: 0.75rem; align-items: center; }
.filter-tabs a {
    padding: 0.35rem 0.85rem; border-radius: 4px; font-size: 0.82rem;
    text-decoration: none; color: #ccc; background: var(--bg-hover); border: 1px solid var(--border-subtle);
}
.filter-tabs a:hover { background: var(--bg-hover-lit); color: #fff; }
.filter-tabs a.active { background: var(--accent-soft); color: #fff; border-color: var(--accent-soft); }

/* ── Progress bars ────────────────────────────────────────────────────
   Used by: nerp_engagements (extracted from inline style block)
   ─────────────────────────────────────────────────────────────────────── */
.progress-bar-bg { background: var(--bg-input); border-radius: 3px; height: 8px; width: 100%; min-width: 60px; }
.progress-bar-fill { height: 8px; border-radius: 3px; background: var(--accent-soft); transition: width 0.3s; }
.progress-bar-fill.high { background: #6df28e; }
.progress-bar-fill.mid { background: #e8c880; }

/* ── Invoice status badges ────────────────────────────────────────────
   Used by: nerp_invoices, nerp_engagement_detail, nerp_invoices_by_client
   ─────────────────────────────────────────────────────────────────────── */
.inv-status { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 4px; font-size: 0.75rem; font-weight: 600; }
.inv-draft { background: var(--border-input); color: var(--text-label); }
.inv-submitted { background: #2d4a6d; color: #8fc4df; }
.inv-overdue { background: #5f1e1e; color: #f26d6d; }
.inv-paid { background: #1e4d2e; color: #6df28e; }

/* ── Data table ───────────────────────────────────────────────────────
   Used by: timecard_admin, timecard_wbso
   ─────────────────────────────────────────────────────────────────────── */
.data-table {
    width: 100%; border-collapse: collapse; font-size: 0.85rem;
    background: var(--bg-panel); border-radius: 8px; overflow: hidden;
    border: 1px solid var(--border-subtle);
}
.data-table th {
    background: var(--bg-input); color: var(--text-label); font-size: 0.72rem; text-transform: uppercase;
    padding: 0.5rem 0.75rem; text-align: left; font-weight: 700; border-bottom: 1px solid var(--border-subtle);
}
.data-table td { padding: 0.4rem 0.75rem; border-bottom: 1px solid #2a2a3d; color: #ccc; }
.data-table tr:hover { background: #22223a; }
.data-table .total-row { background: var(--bg-input); font-weight: 700; color: #fff; }

/* Kes context chips */
.kes-prompt { background: var(--bg-card-alt); border: 1px solid var(--border); border-radius: 8px; padding: 1rem; text-align: center; margin-top: var(--spacing-xl); }
.kes-prompt .kes-header { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.kes-prompt .kes-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-soft); display: inline-block; }
.kes-prompt .kes-title { color: #fff; font-size: 0.9rem; font-weight: 600; }
.kes-prompt .kes-desc { font-size: 0.82rem; color: var(--text-dim); margin-bottom: 0.75rem; }
.kes-chips { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }
.kes-chip { font-size: 0.78rem !important; padding: 4px 12px !important; background: var(--bg-hover) !important; color: #8ab4f8 !important; border: 1px solid var(--border-input) !important; border-radius: 4px; cursor: pointer; }
.kes-chip:hover { background: #3a3a50 !important; border-color: var(--accent-soft) !important; }

/* Internal engagement badge */
.badge-type-internal { background: #8e44ad; color: #fff; }

/* Work queue task control buttons */
.wq-btn { background: none; border: none; cursor: pointer; padding: 2px; opacity: 0.6; transition: opacity 0.15s; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 3px; }
.wq-btn:hover { opacity: 1; background: rgba(255,255,255,0.06); }

/* ── Kes message styles (extracted from kes.js inline) ──── */
.kes-msg-ai { background: var(--bg-panel); border: 1px solid var(--border-subtle); border-radius: 8px; padding: 0.6rem; font-size: 0.82rem; color: var(--text); line-height: 1.5; max-width: 90%; white-space: pre-wrap; }
.kes-msg-user { background: #2d4a6d; border-radius: 8px; padding: 0.5rem 0.6rem; font-size: 0.82rem; color: var(--text); align-self: flex-end; max-width: 85%; }
.kes-msg-error { color: #f26d6d; font-size: 0.78rem; padding: 0.3rem; }
.kes-msg-refresh { background: #1e3a5f; border: 1px solid #2d4a6d; border-radius: 6px; padding: 0.4rem 0.6rem; font-size: 0.78rem; color: #8fc4df; cursor: pointer; align-self: center; margin-top: 0.25rem; }
.kes-msg-loading { color: var(--text-dim); font-size: 0.78rem; padding: 0.3rem; }

/* Trust-tier freshness pill (shared macro: _macros.last_refreshed_pill) */
.freshness-pill {
    display: inline-block;
    font-size: 0.66rem;
    padding: 0.08rem 0.45rem;
    border-radius: 3px;
    background: #13132a;
    color: #9bd;
    border: 1px solid #2a2a40;
    vertical-align: middle;
    line-height: 1.4;
    letter-spacing: 0.01em;
}
.freshness-pill .freshness-pill-link { color: inherit; text-decoration: underline; }
.freshness-pill .freshness-pill-link:hover { color: #cfe; }

/* ─────────────────────────────────────────────────────────────────────────────
   Responsive breakpoints (WI-5a7908bcf60c, 2026-05-23)
   First-pass mobile fixes. Goal: campaign workflows usable on a 390px-wide
   iPhone viewport. Not a full mobile redesign — that's a larger product
   call. This is "stop the document from horizontal-scrolling + collapse
   two-column form grids to single-column."
   ────────────────────────────────────────────────────────────────────────── */

/* Tablet / narrow laptop (<= 720px) */
@media (max-width: 720px) {
    /* Collapse hardcoded 2-column form grids — used by the onboarding
       inline forms (race basics, press add, defense add) and a few
       other settings pages. */
    div[style*="grid-template-columns: 1fr 1fr"],
    div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Make every data-table horizontally scroll within its container
       rather than push the document out. */
    .data-table,
    table.data-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        max-width: 100%;
    }

    /* Narrow the wide search overlay so it fits the viewport. */
    #search-overlay > div {
        width: 95vw !important;
        max-width: 95vw !important;
    }

    /* Form inputs that hardcoded narrow widths in inline style attributes
       (style="width:80px" etc.) — let them fill the parent on mobile. */
    input[type="text"][style*="width:80px"],
    input[type="number"][style*="width:80px"],
    input[type="text"][style*="width:100px"],
    input[type="number"][style*="width:120px"],
    input[type="number"][style*="width:180px"] {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Let the nav links WRAP (their default — .nav-links is flex-wrap:wrap)
       on mobile instead of forcing a horizontal-scroll strip. The old
       overflow-x:auto/nowrap hid links off the right edge AND its overflow box
       clipped the absolute .dropdown-menu panels (they extend below the nav).
       Wrapping keeps every link visible and lets the dropdowns render
       unclipped. */
    nav, .nav-bar, .top-nav {
        overflow-x: visible;
        white-space: normal;
    }
    /* ── Collapsible "hamburger" nav (2026-06-08) ──────────────────────────
       The 12+ link menu is hidden behind the .nav-toggle button and drops down
       as a full-width vertical stack when opened, instead of a cramped wrapped
       or horizontally-scrolled strip. */
    .nav-toggle { display: inline-flex; align-items: center; justify-content: center;
        min-height: 44px; min-width: 44px; }
    .nav-header { flex-wrap: wrap; }
    .nav-links {
        display: none;            /* hidden until the hamburger is tapped */
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 0.1rem;
        margin-top: 0.25rem;
    }
    nav.nav-open .nav-links { display: flex; }
    .nav-links > a, .nav-dropdown { width: 100%; box-sizing: border-box; }
    .nav-links > a, .nav-dropdown > a { padding: 0.6rem 0.9rem; }
    /* Dropdowns expand INLINE within the open stack (not as an absolute overlay
       a touch user can't hover and that the nav box clipped). The existing tap
       handler toggles .open on the trigger's .nav-dropdown. */
    .nav-dropdown { display: block; position: static; }
    .nav-dropdown .dropdown-menu {
        position: static; min-width: 0; white-space: normal;
        border: none; background: #14141f; padding-left: 1rem;
    }

    /* Page padding tightens slightly to recover horizontal space. */
    .page-content, main, .container {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    /* ── Widget reflow (fix/mobile-responsive-ui) ──────────────────────────
       Class-based min-widths force odd fixed sizing / overflow on a phone.
       Relax them so stat/summary/KPI widgets reflow to full width. Desktop
       (>720px) keeps the original min-widths — these are inside the query. */
    .stat-box,                 /* style.css ~163: min-width:100px */
    .nerp-page .stat-card,     /* style.css ~676: min-width:120px */
    .summary-card {            /* style.css ~933: min-width:140px */
        min-width: 0;
        flex: 1 1 100%;
    }
    .progress-bar-bg {         /* style.css ~957: min-width:60px */
        min-width: 0;
    }
    /* Card/stat rows that lay out with flex should stack vertically so each
       widget gets the full viewport width instead of an awkward fixed size. */
    .summary-cards,
    .stat-row, .stats-row, .stat-grid {
        flex-direction: column;
    }
    /* Batch toolbar: let its controls wrap instead of overflowing. */
    .batch-toolbar {
        flex-wrap: wrap;
    }

    /* Kes chat panel hardcodes width:400px inline (base.html) which overflows
       a ~390px phone. Let it fill the viewport. (Override is !important
       because the width lives in an inline style attribute.) */
    #kes-panel {
        width: 100vw !important;
        max-width: 100vw !important;
        border-radius: 0 !important;
    }

    /* ── Touch-target floor (~44px) for nav menus + switchers ──────────────
       These were below the 44px tap floor (dropdown links 4px pad, the
       entity <select> 2px pad, the user-menu button 4px pad, and the
       .nav-dropdown triggers). Raise them here only on mobile. */
    .dropdown-menu a {
        min-height: 44px;
        display: flex;
        align-items: center;
        padding: 0.5rem 14px;
        font-size: 0.95rem;
    }
    .nav-dropdown > a,
    .nav-links a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        padding: 0.5rem 0.8rem;
        font-size: 0.95rem;
    }
    /* Entity switcher <select> (base.html:56, padding:2px 6px). */
    .entity-switcher select,
    select[name="entity_id"] {
        min-height: 44px;
        padding: 0.5rem 0.6rem !important;
        font-size: 0.9rem !important;
    }
    /* User-menu button (base.html:68, padding:4px 2px). */
    #user-menu > button {
        min-height: 44px;
        padding: 0.5rem 0.4rem !important;
        font-size: 0.9rem !important;
    }
    #user-dropdown a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* ── General "fit the viewport" rules (2026-06-08) ──────────────────────
       The per-width input fixes above only caught a handful of pixel values,
       and ~18 templates have fixed-width modal/panel containers (width:800px–
       1100px inline) with no max-width, so they overflowed a phone and pushed
       buttons/fields off-screen. These generalise it: ANYTHING in the content
       area with an inline fixed width is capped to its container, and inline
       min-widths are allowed to reflow. max-width:100% only shrinks elements
       WIDER than their parent, so small inline-width elements (icons, dots,
       progress bars) are untouched. */
    main [style*="width:"],
    .modal [style*="width:"],
    #search-overlay [style*="width:"] {
        max-width: 100% !important;
    }
    main [style*="min-width:"] {
        min-width: 0 !important;
    }

    /* Every content table scrolls horizontally inside its own box instead of
       pushing the page out. The .data-table rule above only covered tables
       with that class; this catches the rest (e.g. the inline-styled timecard
       grid) so no columns/cells are clipped off-screen. */
    main table {
        display: block;
        overflow-x: auto;
        max-width: 100%;
    }
}

/* Phone (<= 480px) — additional compaction */
@media (max-width: 480px) {
    /* Smaller H1s + tighter section spacing. */
    h1 { font-size: 1.3rem !important; }
    h2 { font-size: 1.05rem !important; }

    /* Touch-target floor on buttons + nav links.
       Raised 38px → 44px (fix/mobile-responsive-ui) to meet the touch floor,
       and the dropdown links / entity select / nav-dropdown triggers (set in
       the <=720px block) carry through here too. */
    button, .btn, .btn-primary, .nav-link, a.go {
        min-height: 44px;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    /* Onboarding form panels — give them edge-to-edge space rather
       than the desktop 2.5rem left margin. */
    .ob-form-panel {
        margin-left: 0 !important;
        padding: 0.75rem !important;
    }

    .ob-item {
        flex-direction: column;
        align-items: stretch !important;
    }
    .ob-item .go {
        align-self: flex-start;
        margin-top: 0.4rem;
    }
}