/* ─── Firearmflow Brand Theme (v3 — Light/Dark) ─── */

/* Shared tokens that don't change between themes */
:root {
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
    --emerald:#22A06B;
    --emerald-dark:#1B8659;
    --bg-app: #f1f4f9;
    --bg-surface: #ffffff;
    --bg-subtle: #f8fafc;
    --bg-hover: #f1f5f9;
    --border-soft: #e2e8f0;
    --border-focus: #94a3b8;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    --blue: #2563eb;
    --blue-dark: #1d4ed8;
    --green: #16a34a;
    --green-dark: #15803d;
    --amber: #d97706;
    --rose: #dc2626;
    --red-bg: #fef2f2;
    --red-border: #fca5a5;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.15);
    --radius: 10px;
    --radius-sm: 6px;
}

/* Dark theme (default) */
:root,
/* Light theme */
[data-theme="light"] {
    --bg-primary: #f1f4f9;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f8fafc;
    --bg-hover: #f1f5f9;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    --border: #e4eaf1;
    --border-soft: #e2e8f0;    
    --danger: #c0392b;
    --warning: #b8860b;
    --success: #1e8449;
    --info: #1a5276;
    --shadow: rgba(16, 32, 51, 0.08);
    color-scheme: light;
}
[data-theme="dark"] {
    --bg-primary: #162a42;
    --bg-secondary: #123A63;
    --bg-tertiary: #1e3a5c;
    --bg-hover: #0E2E4F;
    --text-primary: #f0f0f0;
    --text-secondary: #c0c0c0;
    --text-muted: #8899aa;
    --border: #2a4a6a;
    --border-soft: #e2e8f0;    
    --danger: #e74c3c;
    --warning: #f39c12;
    --success: #2ecc71;
    --info: #3498db;
    --shadow: rgba(0, 0, 0, 0.35);
    color-scheme: dark;
}

:root {
    --bg:var(--bg-primary) !important;--bg2:var(--bg-secondary) !important;--panel:var(--bg-primary)--panel2:var(--bg-secondary) !important;--line:var(--border) !important;--line2:var(--border) !important;
    --ink:#e7eef7 !important;--muted:#8ea2ba !important;--gold:#e9c04a !important;--gold-d:#c9a233 !important;--blue:#3f6bb0 !important;--green:#2ecc71 !important;--green-d:#1f9d57 !important;
    --red:#e06666 !important;--amber:#e6a94a !important;--radius:11px !important;
}

html, body {
    margin: 0!important;
    padding: 0!important;
}

:not(#motivation-generator *) { box-sizing: border-box; }

body {
    font-family: var(--font-sans)!important;
    background: var(--bg-primary)!important;
    color: var(--text-primary)!important;
    line-height: 1.6!important;
    min-height: 100vh!important;
    transition: background-color 0.2s ease, color 0.2s ease!important;
}

/* ─── Theme Toggle Button ─── */
#theme-toggle {
    display: inline-flex!important;
    align-items: center!important;
    justify-content: center!important;
    width: 32px!important;
    height: 32px!important;
    padding: 0!important;
    background: var(--bg-tertiary)!important;
    border: 1px solid var(--border)!important;
    border-radius: 6px!important;
    color: var(--text-secondary)!important;
    cursor: pointer!important;
    font-size: 15px!important;
    line-height: 1!important;
    transition: background 0.15s, border-color 0.15s, color 0.15s!important;
}

#theme-toggle:hover {
    background: var(--bg-hover)!important;
    color: var(--text-primary)!important;
}

#theme-toggle:focus-visible {
    outline: 2px solid var(--emerald)!important;
    outline-offset: 2px!important;
}

/* Sun icon in dark mode (tap to go light), moon icon in light mode (tap to go dark) */
#theme-toggle::before { content: "☀"!important; }
[data-theme="light"] #theme-toggle::before { content: "☾"!important; }

/* Smooth, professional theme transition across all surfaces (skipped for users who prefer reduced motion) */
@media (prefers-reduced-motion: no-preference) {
    .nav, .login-card, .portal-card, .modal-content, .form-section, .form-input,
    .pipeline-card, .stat-card, .client-table-container, .section, .badge, .status,
    .review-text-block, .preview-text, .doc-item, .client-table th, .client-table td,
    .tab, .btn {
        transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease!important;
    }
}

/* ─── Navigation ─── */
.nav {
    background: var(--bg-secondary)!important;
    border-bottom: 1px solid var(--border)!important;
    padding: 0 24px!important;
    position: sticky!important;
    top: 0!important;
    z-index: 100!important;
}

.nav-inner {
    max-width: 1400px!important;
    margin: 0 auto!important;
    display: flex!important;
    align-items: center!important;
    justify-content: space-between!important;
    height: 52px!important;
}

.nav-brand {
    display: flex!important;
    align-items: center!important;
    gap: 8px!important;
    text-decoration: none!important;
    color: var(--text-primary)!important;
}

.brand-icon {
    color: var(--emerald)!important;
    font-size: 18px!important;
}

.brand-icon.large { font-size: 36px!important; }
.brand-icon.large img { height: 56px!important; }

.brand-text {
    font-weight: 600!important;
    font-size: 15px!important;
    letter-spacing: 0.3px!important;
}

.nav-links { display: flex!important; align-items: center!important; gap: 16px!important; }

.nav-link {
    color: var(--text-secondary)!important;
    text-decoration: none!important;
    font-size: 13px!important;
    transition: color 0.15s!important;
    background: none!important;
    border: none!important;
    cursor: pointer!important;
    font-family: inherit!important;
}

.nav-link:hover { color: var(--text-primary)!important; }
.nav-user { color: var(--text-muted)!important; font-size: 13px!important; }

/* ─── Breadcrumbs ─── */
.breadcrumbs {
    display: flex!important;
    align-items: center!important;
    gap: 6px!important;
    font-size: 12px!important;
    color: var(--text-muted)!important;
    margin-bottom: 8px!important;
}

.breadcrumbs a {
    color: var(--text-muted)!important;
    text-decoration: none!important;
}

.breadcrumbs a:hover { color: var(--text-primary)!important; }

.breadcrumb-sep { color: var(--text-muted)!important; font-size: 14px!important; }

.breadcrumb-current {
    color: var(--text-primary)!important;
    font-weight: 500!important;
}

/* ─── Main Content ─── */
.main {
    max-width: 1400px!important;
    margin: 0 auto!important;
    padding: 24px!important;
}

/* ─── Login ─── */
.login-container {
    display: flex!important;
    align-items: center!important;
    justify-content: center!important;
    min-height: 100vh!important;
    padding: 24px!important;
}

.login-card {
    background: var(--bg-secondary)!important;
    border: 1px solid var(--border)!important;
    border-radius: 8px!important;
    padding: 40px!important;
    width: 100%!important;
    max-width: 420px!important;
}

.login-header {
    text-align: center!important;
    margin-bottom: 32px!important;
}

.login-header h1 {
    font-size: 22px!important;
    font-weight: 600!important;
    margin-top: 12px!important;
}

.login-subtitle {
    color: var(--text-muted)!important;
    font-size: 13px!important;
    margin-top: 4px!important;
}

.login-form .form-group { margin-bottom: 20px!important; }
.login-footer { text-align: center!important; margin-top: 24px!important; }

/* ─── Forms ─── */
.form-group {
    margin-bottom: 16px!important;
}

.form-group label,
form label {
    display: block!important;
    font-size: 12px!important;
    font-weight: 500!important;
    color: var(--text-secondary)!important;
    margin-bottom: 6px!important;
    text-transform: uppercase!important;
    letter-spacing: 0.5px!important;
}

.form-input,
:where(.woocommerce) .select2-container .select2-selection--single .select2-selection__rendered {
    width: 100%!important;
    padding: 12px 16px!important;
    background: var(--bg-primary)!important;
    border: 1px solid var(--border)!important;
    border-radius: 6px!important;
    color: var(--text-primary)!important;
    font-family: var(--font-sans)!important;
    font-size: 16px!important;
    transition: border-color 0.15s!important;
}

.form-input:focus {
    outline: none!important;
    border-color: var(--emerald)!important;
}

.form-input::placeholder { color: var(--text-muted)!important; }

textarea.form-input {
    resize: vertical!important;
    min-height: 100px!important;
    font-family: var(--font-sans)!important;
}

select.form-input {
    appearance: auto!important;
    padding: 12px 16px!important;
    font-size: 16px!important;
}

.field-hint {
    display: block!important;
    font-size: 11px!important;
    color: var(--text-muted)!important;
    margin-top: 4px!important;
}

.field-hint.warning { color: var(--warning)!important; }

.form-grid {
    display: grid!important;
    grid-template-columns: 1fr 1fr!important;
    gap: 16px!important;
}

.form-section {
    background: var(--bg-secondary)!important;
    border: 1px solid var(--border)!important;
    border-radius: 8px!important;
    padding: 24px!important;
    margin-bottom: 24px!important;
}

.form-section h3 {
    font-size: 16px!important;
    font-weight: 600!important;
    margin-bottom: 24px!important;
    color: var(--emerald)!important;
    text-transform: uppercase!important;
    letter-spacing: 0.5px!important;
}

.form-actions {
    margin-top: 24px!important;
    display: flex!important;
    align-items: center!important;
    gap: 16px!important;
    flex-wrap: wrap!important;
}

.save-indicator {
    font-size: 13px!important;
    color: var(--text-muted)!important;
}

/* ─── Buttons ─── */
.btn {
    display: inline-flex!important;
    align-items: center!important;
    justify-content: center!important;
    padding: 8px 16px!important;
    background: var(--bg-tertiary)!important;
    border: 1px solid var(--border)!important;
    border-radius: 4px!important;
    color: var(--text-primary)!important;
    font-family: var(--font-sans)!important;
    font-size: 13px!important;
    cursor: pointer!important;
    text-decoration: none!important;
    transition: background 0.15s, border-color 0.15s!important;
}

.btn:hover { background: var(--bg-hover)!important; }

.btn-primary {
    background: var(--emerald)!important;
    color: var(--bg-primary)!important;
    border-color: var(--emerald)!important;
    font-weight: 500!important;
}

.btn-primary:hover { background: var(--emerald-dark) !important; }

.btn-primary:disabled {
    opacity: 0.4!important;
    cursor: not-allowed!important;
}

.btn-full { width: 100%!important; }

.btn-sm {
    padding: 4px 10px!important;
    font-size: 12px!important;
}

.btn-lg {
    padding: 12px 24px!important;
    font-size: 15px!important;
}

.btn-link {
    background: none!important;
    border: none!important;
    color: var(--danger)!important;
    cursor: pointer!important;
    font-size: 16px!important;
    padding: 0 4px!important;
}

/* ─── Dashboard ─── */
.dashboard { max-width: 100%!important; }

.dash-header {
    display: flex!important;
    align-items: center!important;
    justify-content: space-between!important;
    margin-bottom: 24px!important;
}

.dash-header h2 {
    font-size: 20px!important;
    font-weight: 600!important;
}

/* ─── Pipeline ─── */
.pipeline-summary {
    display: flex!important;
    gap: 12px!important;
    margin-bottom: 24px!important;
}

.pipeline-card {
    flex: 1!important;
    background: var(--bg-secondary)!important;
    border: 1px solid var(--border)!important;
    border-radius: 6px!important;
    padding: 16px!important;
    text-align: center!important;
}

.pipeline-count {
    display: block!important;
    font-size: 28px!important;
    font-weight: 700!important;
    color: var(--emerald)!important;
}

.pipeline-label {
    display: block!important;
    font-size: 11px!important;
    color: var(--text-muted)!important;
    text-transform: uppercase!important;
    letter-spacing: 0.5px!important;
    margin-top: 4px!important;
}

/* ─── Stats ─── */
.stats-grid {
    display: grid!important;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr))!important;
    gap: 12px!important;
    margin-bottom: 24px!important;
}

.stat-card {
    background: var(--bg-secondary)!important;
    border: 1px solid var(--border)!important;
    border-radius: 6px!important;
    padding: 20px!important;
    text-align: center!important;
}

.stat-value {
    display: block!important;
    font-size: 24px!important;
    font-weight: 700!important;
    color: var(--emerald)!important;
}

.stat-label {
    display: block!important;
    font-size: 11px!important;
    color: var(--text-muted)!important;
    text-transform: uppercase!important;
    margin-top: 4px!important;
}

/* ─── Client Table ─── */
.client-table-container {
    background: var(--bg-secondary)!important;
    border: 1px solid var(--border)!important;
    border-radius: 6px!important;
    overflow: hidden!important;
}

.search-input {
    border: none!important;
    border-bottom: 1px solid var(--border)!important;
    border-radius: 0!important;
    padding: 12px 16px!important;
}

.client-table {
    width: 100%!important;
    border-collapse: collapse!important;
}

table th,
.client-table th {
    padding: 10px 16px!important;
    text-align: left;
    font-size: 11px!important;
    font-weight: 500!important;
    color: var(--text-muted)!important;
    text-transform: uppercase!important;
    letter-spacing: 0.5px!important;
    border-bottom: 1px solid var(--border)!important;

}
table td,
.client-table td {
    padding: 10px 16px!important;
    font-size: 13px!important;
    border-bottom: 1px solid var(--border)!important;
}

table tr:last-child td,
.client-table tr:last-child td { border-bottom: none!important; }
table tr:hover
.client-table tr:hover { background: var(--bg-hover)!important; }

.client-link {
    color: var(--text-primary)!important;
    text-decoration: none!important;
    font-weight: 500!important;
}

.client-link:hover { color: var(--emerald)!important; }

.application-link {
    color: var(--text-primary)!important;
    text-decoration: none!important;
    font-weight: 500!important;
}

.application-link:hover { color: var(--emerald)!important; }

.empty-state {
    text-align: center!important;
    padding: 40px!important;
    color: var(--text-muted)!important;
}

/* ─── Badges & Status ─── */
.badge {
    display: inline-block!important;
    padding: 2px 8px!important;
    background: var(--bg-tertiary)!important;
    border: 1px solid var(--border)!important;
    border-radius: 3px!important;
    font-size: 11px!important;
    font-family: var(--font-mono)!important;
}

.status {
    display: inline-block!important;
    padding: 2px 8px!important;
    border-radius: 3px!important;
    font-size: 11px!important;
    font-family: var(--font-mono)!important;
    text-transform: lowercase!important;
}

.status-intake { background: #2c3e50!important; color: #95a5a6!important; }
.status-documents { background: #1a5276!important; color: #85c1e9!important; }
.status-drafting { background: #7d6608!important; color: #f9e79f!important; }
.status-review { background: #7b2d8e!important; color: #e8b4e8!important; }
.status-done { background: #1e8449!important; color: #a9dfbf!important; }

/* ─── Workspace ─── */
.workspace { max-width: 100%!important; }

.workspace-header {
    display: flex!important;
    align-items: flex-start!important;
    justify-content: space-between!important;
    margin-bottom: 4px!important;
}

.workspace-header h2 {
    font-size: 20px!important;
    font-weight: 600!important;
    margin-top: 4px!important;
}

.workspace-actions {
    display: flex!important;
    align-items: center!important;
    gap: 8px!important;
}

.status-select { width: auto!important; min-width: 120px!important; }

.review-queue-table-container .status-select {
    padding: 6px 8px !important;
}

.back-link {
    color: var(--text-muted)!important;
    text-decoration: none!important;
    font-size: 13px!important;
}

.back-link:hover { color: var(--text-primary)!important; }

/* ─── Tabs ─── */
.workspace-tabs {
    display: flex!important;
    gap: 6px !important;
    border-bottom: 1px solid var(--border)!important;
    overflow-x: auto!important;
}

.toggle button.yes.on {
    color: var(--text-primary) !important;
}

.tab {
    display: flex!important;
    align-items: center!important;
    gap: 6px!important;
    padding: 10px 16px!important;
    color: var(--text-muted)!important;
    text-decoration: none!important;
    font-size: 12px!important;
    border-bottom: 2px solid transparent!important;
    transition: color 0.15s, border-color 0.15s!important;
    white-space: nowrap!important;
    flex-shrink: 0!important;
    background: var(--bg-secondary)!important;
}

.tab:hover { color: var(--text-primary)!important; }
.tab.active {
    color: var(--text-primary)!important;
    border-bottom-color: var(--emerald)!important;
}

.tab-icon { font-size: 13px!important; }
.doc-badge {
    font-size: 9px!important;
    padding: 1px 5px!important;
    background: var(--bg-tertiary)!important;
    border-radius: 10px!important;
}

/* ─── Tab Content ─── */
.tab-content { min-height: 400px!important; padding: 24px !important; background: var(--bg-secondary) !important;}

/* ─── Documents Tab ─── */
.doc-progress {
    margin-bottom: 20px!important;
}

.progress-bar {
    height: 6px!important;
    background: var(--bg-primary)!important;
    border-radius: 3px!important;
    overflow: hidden!important;
    margin-bottom: 8px!important;
}
.progress-bar.active {
    background: var(--text-primary)!important;
}
.progress-fill {
    height: 100%!important;
    background: var(--emerald)!important;
    border-radius: 3px!important;
    transition: width 0.3s!important;
}

.progress-text {
    font-size: 12px!important;
    color: var(--text-muted)!important;
}

.doc-item {
    display: flex!important;
    align-items: center!important;
    justify-content: space-between!important;
    padding: 8px 0!important;
    border-bottom: 1px solid var(--border)!important;
}

.doc-item:last-child { border-bottom: none!important; }

.doc-info { display: flex!important; align-items: center!important; gap: 8px!important; }
.doc-name { font-size: 13px!important; }
.doc-status { font-size: 10px!important; color: var(--text-muted)!important; }

.doc-actions {
    display: flex!important;
    align-items: center!important;
    gap: 8px!important;
}

.doc-status-select { width: 100px!important; }
.doc-upload { font-size: 12px!important; }
.doc-file { font-size: 11px!important; color: var(--text-muted)!important; }

/* ─── Generate Tab ─── */
.alert {
    padding: 16px 20px!important;
    border-radius: 6px!important;
    font-size: 16px!important;
    margin-bottom: 20px!important;
}

.alert-warning { background: #7d6608!important; color: #f9e79f!important; }
.alert-info { background: #1a5276!important; color: #85c1e9!important; }
.alert-success { background: #1e8449!important; color: #a9dfbf!important; }
.alert-error { background: #c0392b!important; color: #ffcccc!important; }

.missing-list {
    list-style: none!important;
    margin-bottom: 20px!important;
}

.missing-list li {
    padding: 6px 0!important;
    font-size: 16px!important;
    font-family: var(--font-mono)!important;
}

.pack-info {
    display: flex!important;
    gap: 24px!important;
    margin-bottom: 20px!important;
    font-size: 16px!important;
    flex-wrap: wrap!important;
}

.text-warning { color: var(--warning)!important; }

.pack-preview { margin-top: 20px!important; }

.preview-text {
    background: var(--bg-primary)!important;
    border: 1px solid var(--border)!important;
    border-radius: 6px!important;
    padding: 20px!important;
    font-family: var(--font-mono)!important;
    font-size: 14px!important;
    line-height: 1.6!important;
    white-space: pre-wrap!important;
    overflow-x: auto!important;
    max-height: 400px!important;
    overflow-y: auto!important;
    margin-bottom: 16px!important;
}

.spinner {
    display: inline-block!important;
    animation: spin 1s linear infinite!important;
    font-size: 20px!important;
    margin-left: 10px!important;
}

@keyframes spin {
    0% { transform: rotate(0deg)!important; }
    100% { transform: rotate(360deg)!important; }
}

/* Enhanced mobile responsiveness */
@media (max-width: 768px) {
    .form-grid { grid-template-columns: 1fr!important; }
    .pipeline-summary { flex-wrap: wrap!important; }
    .pipeline-card { min-width: calc(50% - 12px)!important; margin-bottom: 12px!important; }
    .workspace-header { flex-direction: column!important; gap: 16px!important; align-items: stretch!important; }
    .nav-links { gap: 12px!important; flex-wrap: wrap!important; }
    .stats-grid { grid-template-columns: repeat(2, 1fr)!important; }
    .saps-timeline { gap: 0!important; }
    .timeline-step .step-label { font-size: 9px!important; }
    .review-summary { grid-template-columns: 1fr!important; }
    .review-row { min-width: 0!important; }
    .changes-section { margin: 16px 0!important; padding: 12px!important; }
    .change-highlight { padding: 4px 8px!important; }
    .change-highlight del, .change-highlight ins { font-size: 15px!important; }
    
    .btn {
        min-height: 48px!important;
        padding: 12px 20px!important;
        font-size: 16px!important;
    }
    
    .btn-lg {
        min-height: 56px!important;
        padding: 16px 24px!important;
        font-size: 18px!important;
    }
    
    .form-input {
        min-height: 48px!important;
        font-size: 16px!important;
    }
    
    select.form-input {
        min-height: 48px!important;
        font-size: 16px!important;
    }
    
    .tab {
        min-height: 48px!important;
        padding: 12px 16px!important;
        font-size: 15px!important;
    }
    
    .tab-icon { font-size: 16px!important; }
    
    .doc-badge {
        font-size: 12px!important;
        padding: 2px 8px!important;
    }
    
    .breadcrumbs {
        font-size: 14px!important;
        gap: 8px!important;
    }
    
    .breadcrumb-sep { font-size: 16px!important; }
    
    .review-doc-count { font-size: 16px!important; }
    
    .alert { padding: 20px 24px!important; font-size: 16px!important; }
    
    .missing-list li { font-size: 16px!important; padding: 8px 0!important; }
    
    .pack-info { gap: 20px!important; margin-bottom: 16px!important; font-size: 16px!important; }
    
    .preview-text { font-size: 15px!important; padding: 16px!important; }
    
    .form-section h3 { font-size: 18px!important; margin-bottom: 20px!important; }
    
    .form-actions { gap: 16px!important; }
    
    .review-actions { margin-top: 20px!important; }
}

/* ─── Review Tab ─── */
.review-summary {
    display: grid!important;
    grid-template-columns: 1fr 1fr!important;
    gap: 0!important;
}

.review-row {
    display: flex!important;
    padding: 8px 12px!important;
    border-bottom: 1px solid var(--border)!important;
    font-size: 13px!important;
}

.review-row:nth-child(even) { background: var(--bg-tertiary)!important; }

.review-label {
    font-weight: 500!important;
    color: var(--text-secondary)!important;
    min-width: 160px!important;
    text-transform: uppercase!important;
    font-size: 11px!important;
    letter-spacing: 0.3px!important;
}

.review-value { color: var(--text-primary)!important; }

.review-text-block {
    background: var(--bg-primary)!important;
    border: 1px solid var(--border)!important;
    border-radius: 4px!important;
    padding: 16px!important;
    font-size: 13px!important;
    line-height: 1.6!important;
    white-space: pre-wrap!important;
}

.review-doc-count { font-size: 13px!important; }

.review-actions {
    border-top: 1px solid var(--border)!important;
    padding-top: 16px!important;
    margin-top: 8px!important;
}

/* ─── Modal ─── */
.modal {
    display: none;
    position: fixed!important;
    top: 0!important;
    left: 0!important;
    width: 100%!important;
    height: 100%!important;
    align-items: center!important;
    justify-content: center!important;
    z-index: 200!important;
}

.modal-backdrop {
    position: absolute!important;
    width: 100%!important;
    height: 100%!important;
    background: rgba(0,0,0,0.6)!important;
}

.modal-content {
    position: relative!important;
    background: var(--bg-secondary)!important;
    border: 1px solid var(--border)!important;
    border-radius: 8px!important;
    padding: 24px!important;
    min-width: 400px!important;
    max-width: 500px!important;
}

.modal-content h3 {
    font-size: 16px!important;
    margin-bottom: 20px!important;
}

.modal-actions {
    display: flex!important;
    gap: 8px!important;
    justify-content: flex-end!important;
    margin-top: 20px!important;
}

/* ─── Client Portal ─── */
.portal-container {
    display: flex!important;
    align-items: center!important;
    justify-content: center!important;
    min-height: 100vh!important;
    padding: 24px!important;
}

.portal-card {
    background: var(--bg-secondary)!important;
    border: 1px solid var(--border)!important;
    border-radius: 8px!important;
    padding: 40px!important;
    width: 100%!important;
    max-width: 520px!important;
}

.portal-card.confirmation { text-align: center!important; }

.portal-card h1 {
    font-size: 22px!important;
    margin: 12px 0 8px!important;
}

.portal-card p {
    color: var(--text-secondary)!important;
    font-size: 14px!important;
    margin-bottom: 12px!important;
}

.portal-header { margin-bottom: 24px!important; }

.portal-note {
    font-size: 12px!important;
    color: var(--text-muted)!important;
    margin: 16px 0!important;
}

.portal-form .form-group { margin-bottom: 20px!important; }

/* ─── Template Editor ─── */
.template-editor { max-width: 900px!important; }

.template-textarea {
    font-family: var(--font-mono)!important;
    font-size: 13px!important;
    line-height: 1.5!important;
}

.template-preview {
    margin-top: 20px!important;
    background: var(--bg-secondary)!important;
    border: 1px solid var(--border)!important;
    border-radius: 6px!important;
    padding: 20px!important;
}

/* ─── Utilities ─── */
.text-muted { color: var(--text-muted)!important; }

.badge-trial { background: #1a5276!important; color: #85c1e9!important; }
.badge-active { background: #1e8449!important; color: #a9dfbf!important; }
.badge-suspended { background: #c0392b!important; color: #ffcccc!important; }
.badge-cancelled { background: #4a235a!important; color: #d2b4de!important; }
.badge-paid { background: #1e8449!important; color: #a9dfbf!important; }
.badge-pending { background: #7d6608!important; color: #f9e79f!important; }
.badge-free { background: #2c3e50!important; color: #95a5a6!important; }
.badge-monthly { background: #1a5276!important; color: #85c1e9!important; }
.badge-credit_purchase { background: #1e8449!important; color: #a9dfbf!important; }
.badge-admin_adjustment { background: #7d6608!important; color: #f9e79f!important; }

.stat-trial { border-color: #1a5276!important; }
.stat-active { border-color: #1e8449!important; }
.stat-suspended { border-color: #c0392b!important; }
.stat-revenue { border-color: #f39c12!important; }

.section {
    background: var(--bg-secondary)!important;
    border: 1px solid var(--border)!important;
    border-radius: 8px!important;
    padding: 24px!important;
    margin-top: 24px!important;
}

.section h3 {
    font-size: 16px!important;
    font-weight: 600!important;
    margin-bottom: 16px!important;
    color: var(--emerald)!important;
}

/* ─── Responsive ─── */
@media (max-width: 768px) {
    .form-grid { grid-template-columns: 1fr!important; }
    .pipeline-summary { flex-wrap: wrap!important; }
    .pipeline-card { min-width: calc(33% - 12px)!important; }
    .workspace-header { flex-direction: column!important; gap: 12px!important; }
    .nav-links { gap: 8px!important; }
    .stats-grid { grid-template-columns: repeat(2, 1fr)!important; }
    .saps-timeline { gap: 0!important; }
    .timeline-step .step-label { font-size: 8px!important; }
    .review-summary { grid-template-columns: 1fr!important; }
    .review-row { min-width: 0!important; }
}

/* ─── Upload Progress ─── */
.upload-wrapper {
    display: inline-flex!important;
    flex-direction: column!important;
    gap: 4px!important;
}

.upload-progress {
    height: 4px!important;
    background: var(--bg-primary)!important;
    border-radius: 2px!important;
    overflow: hidden!important;
    width: 100px!important;
}

.upload-progress-bar {
    height: 100%!important;
    background: var(--emerald)!important;
    border-radius: 2px!important;
    transition: width 0.2s!important;
}

.doc-error {
    font-size: 11px!important;
    color: var(--danger)!important;
    margin-top: 4px!important;
}

.doc-files {
    display: inline-flex!important;
    flex-wrap: wrap!important;
    gap: 4px!important;
    align-items: center!important;
}

/* ─── SAPS Timeline ─── */
.saps-timeline {
    display: flex!important;
    align-items: center!important;
    justify-content: space-between!important;
    padding: 16px 0!important;
    overflow-x: auto!important;
    gap: 0!important;
}

.timeline-step {
    display: flex!important;
    flex-direction: column!important;
    align-items: center!important;
    gap: 6px!important;
    position: relative!important;
    flex: 1!important;
    text-align: center!important;
}

.timeline-step::after {
    content: ''!important;
    position: absolute!important;
    top: 10px!important;
    left: 50%!important;
    width: 100%!important;
    height: 2px!important;
    background: var(--bg-tertiary)!important;
    z-index: 0!important;
}

.timeline-step:last-child::after {
    display: none!important;
}

.timeline-step.completed::after {
    background: var(--success)!important;
}

.step-marker {
    width: 22px!important;
    height: 22px!important;
    border-radius: 50%!important;
    display: flex!important;
    align-items: center!important;
    justify-content: center!important;
    font-size: 11px!important;
    font-weight: 700!important;
    background: var(--bg-tertiary)!important;
    color: var(--text-muted)!important;
    border: 2px solid var(--border)!important;
    z-index: 1!important;
    position: relative!important;
}

.timeline-step.completed .step-marker {
    background: var(--success)!important;
    color: #fff!important;
    border-color: var(--success)!important;
}

.timeline-step.active .step-marker {
    background: var(--emerald)!important;
    color: #0c1b2e!important;
    border-color: var(--emerald)!important;
    box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.3)!important;
}

.timeline-step.refused .step-marker {
    background: var(--danger)!important;
    color: #fff!important;
    border-color: var(--danger)!important;
}

.step-label {
    font-size: 10px!important;
    color: var(--text-muted)!important;
    white-space: nowrap!important;
}

.timeline-step.active .step-label {
    color: var(--text-primary)!important;
    font-weight: 500!important;
}
/* ─── Pagination ─── */
.pagination {
    display: flex!important;
    align-items: center!important;
    justify-content: center!important;
    gap: 12px!important;
    margin-top: 20px!important;
    padding: 12px!important;
}

.pagination-text {
    font-size: 13px!important;
    color: var(--text-muted)!important;
}

.pagination .btn {
    font-size: 12px!important;
    min-width: 70px!important;
    justify-content: center!important;
}

.hide {
    display: none!important;
}

.vault-container {
    width: 100% !important;
    border-radius: 16px !important;
    /*box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06) !important;
    padding: 28px 32px 36px !important;
    position: fixed !important;
    z-index: 100 !important;*/
    position: relative !important;
    background: transparent !important;
}

/* ----- Header ----- */
.vault-container .vault-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 28px !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
}
.vault-container .vault-header h1 {
    font-size: 24px !important;
    font-weight: 700 !important;
    letter-spacing: -0.4px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}
.vault-container .vault-header h1 span {
    font-size: 12px !important;
    font-weight: 500 !important;
    padding: 2px 12px !important;
    border-radius: 30px !important;
    border: 1px solid var(--border) !important;
}
.vault-container .user-profile {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 4px 16px 4px 4px !important;
    border-radius: 40px !important;
    border: 1px solid var(--border) !important;
}
.vault-container .user-profile .avatar {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 700 !important;
    font-size: 14px !important;
}
.vault-container .user-profile .name {
    font-weight: 500 !important;
    font-size: 14px !important;
}
.vault-container .user-profile .role {
    font-size: 12px !important;
}

/* ----- Tabs ----- */
.vault-container .tab-nav {
    display: flex !important;
    gap: 4px !important;
    border-bottom: 2px solid var(--border) !important;
    margin-bottom: 24px !important;
}
.vault-container .tab-btn {
    padding: 10px 24px 12px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    border: none !important;
    cursor: pointer !important;
    border-bottom: 3px solid transparent !important;
    margin-bottom: -2px !important;
    transition: 0.15s !important;
}
.vault-container .tab-btn:hover {
    border-radius: 6px 6px 0 0 !important;
}
.vault-container .tab-btn.active {
    border-bottom-color: var(--emerald) !important;
}
.vault-container .tab-content {
    display: none !important;
    animation: fadeIn 0.2s ease !important;
}
.vault-container .tab-content.active {
    display: block !important;
}
.btn-tooltip {
    min-height: 0 !important;
    padding: 6px !important;
    border: 1px solid var(--border) !important;
    border-radius: 100% !important;
}
#tooltip {
  max-width: 400px;
  border: 1px solid var(--border) !important;
  background: var(--bg-primary) !important;
  color: #ffffff !important;
  font-weight: 500 !important;
  padding: 6px 12px !important;
  font-size: 14px !important;
  border-radius: 4px !important;
  visibility: hidden !important;
  opacity: 0 !important;
  transition: opacity 0.15s ease-in-out !important;
  z-index: 9999 !important;
  margin-bottom: 8px !important;
}

/* Classes to handle showing the tooltip */
#tooltip[data-show] {
  visibility: visible !important;
  opacity: 1 !important;
}

/* Styling the optional layout arrow */
#arrow, #arrow::before {
  position: absolute !important;
  width: 8px !important;
  height: 8px !important;
  background: inherit !important;
}

#arrow {
  visibility: hidden !important;
}

#arrow::before {
  visibility: visible !important;
  content: '' !important;
  transform: rotate(45deg) !important;
}

/* Position arrow based on Popper's active placement side */
#tooltip[data-popper-placement^='top'] > #arrow { bottom: -4px; }
#tooltip[data-popper-placement^='bottom'] > #arrow { top: -4px; }
#tooltip[data-popper-placement^='left'] > #arrow { right: -4px; }
#tooltip[data-popper-placement^='right'] > #arrow { left: -4px; }

@keyframes fadeIn {
    from {
        opacity: 0.6 !important;
        transform: translateY(4px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ----- Toolbar (Search + 2 Filters) ----- */
.vault-container .toolbar {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 16px !important;
    margin-bottom: 20px !important;
    padding: 12px 16px !important;
    border-radius: var(--radius) !important;
    border: 1px solid var(--border) !important;
}
.vault-container .toolbar .search-group {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 2 !important;
    min-width: 200px !important;
}
.vault-container .toolbar .search-group input {
    flex: 1 !important;
    padding: 8px 14px !important;
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--border) !important;
    font-size: 14px !important;
    min-width: 150px !important;
    transition: 0.15s !important;
}
.vault-container .toolbar .search-group input:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
}
.vault-container .toolbar .filter-group {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}
.vault-container .toolbar .filter-group .filter-item {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}
.vault-container .toolbar .filter-group label {
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}
.vault-container .toolbar .filter-group select {
    padding: 8px 14px !important;
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--border) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
}
.vault-container .toolbar .filter-group select:focus {
    outline: none !important;
}
.vault-container .btn-primary-sm {
    border: none !important;
    padding: 8px 20px !important;
    border-radius: var(--radius-sm) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    cursor: pointer !important;
    transition: 0.15s !important;
    white-space: nowrap !important;
}

/* ----- Tables ----- */
.vault-container .table-wrap {
    overflow-x: auto !important;
    border-radius: var(--radius) !important;
    border: 1px solid var(--border) !important;
}
.vault-container .register-table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 14px !important;
    min-width: 800px !important;
}
.vault-container .register-table th {
    padding: 14px 16px 12px 16px !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    border-bottom: 1px solid var(--border) !important;
}
.vault-container .register-table td {
    padding: 14px 16px !important;
    border-bottom: 1px solid var(--border) !important;
    vertical-align: middle !important;
}
.vault-container .register-table tbody tr:last-child td {
    border-bottom: none !important;
}

.vault-container .type-badge {
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 2px 10px !important;
    border-radius: 30px !important;
    white-space: nowrap !important;
    background: #e0e7ff !important;
    color: #3730a3 !important;
}
.vault-container .category-badge {
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 2px 10px !important;
    border-radius: 30px !important;
    white-space: nowrap !important;
    background: #f1f5f9 !important;
    color: #475569 !important;
}
.vault-container .category-badge.legislation {
    background: #fef3c7 !important;
    color: #92400e !important;
}
.vault-container .category-badge.case {
    background: #dbeafe !important;
    color: #1e40af !important;
}
.vault-container .category-badge.policy {
    background: #dcfce7 !important;
    color: #166534 !important;
}
.vault-container .category-badge.directive {
    background: #fce4ec !important;
    color: #9a3412 !important;
}

.vault-container .status-badge {
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 3px 12px !important;
    border-radius: 30px !important;
    white-space: nowrap !important;
}
.vault-container .status-draft {
    background: #f1f5f9 !important;
    color: #475569 !important;
}
.vault-container .status-review {
    background: #fef3c7 !important;
    color: #92400e !important;
}
.vault-container .status-approved {
    background: #dcfce7 !important;
    color: #166534 !important;
}
.vault-container .status-published {
    background: #dbeafe !important;
    color: #1e40af !important;
}

.vault-container .reviewer-avatars {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
}
.vault-container .avatar-sm {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    background: var(--border-soft) !important;
    color: var(--text-secondary) !important;
}
.vault-container .avatar-sm.filled {
    background: var(--blue) !important;
    color: #fff !important;
}
.vault-container .avatar-sm.empty {
    border: 1.5px dashed var(--border) !important;
}
.vault-container .btn-icon {
    border: none !important;
    padding: 4px 8px !important;
    border-radius: var(--radius-sm) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: 0.1s !important;
}

.vault-container .source-tag {
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 2px 10px !important;
    border-radius: 30px !important;
}

@keyframes modalFade {
    from {
        opacity: 0 !important;
        transform: scale(0.97) !important;
    }
    to {
        opacity: 1 !important;
        transform: scale(1) !important;
    }
}

.vault-container .modal-box {
    width: 100% !important;
    background: var(--bg-secondary) !important;
    border-radius: 16px !important;
    max-height: 95vh !important;
    overflow-y: auto !important;
    position: relative !important;
}
.vault-container .modal-box .modal-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    margin-bottom: 20px !important;
}
.vault-container .modal-box .modal-header h2 {
    font-size: 20px !important;
    font-weight: 700 !important;
    letter-spacing: -0.3px !important;
}
.vault-container .modal-box .modal-header .close-btn {
    border: none !important;
    font-size: 24px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    padding: 0 4px !important;
}
.vault-container .modal-box .modal-body {
    margin-bottom: 24px !important;
}
.vault-container .modal-box .modal-footer {
    display: flex !important;
    gap: 12px !important;
    justify-content: flex-end !important;
    border-top: 1px solid var(--border) !important;
    padding-top: 20px !important;
    flex-wrap: wrap !important;
}

.vault-container .btn-modal {
    padding: 10px 28px !important;
    border-radius: var(--radius-sm) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    border: none !important;
    cursor: pointer !important;
    transition: 0.15s !important;
}
.vault-container .p-6 {
    padding: calc(var(--spacing) * 6) !important;
}
.vault-container .btn-modal.outline {
    border: 1px solid var(--border) !important;
    color: var(--text-secondary) !important;
}
.vault-container .btn-modal.outline:hover {
}
.vault-container .btn-modal:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* ==========================================
   IMPROVED REVIEW MODAL SPECIFICS
   ========================================== */
.vault-container .meta-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px 24px !important;
    padding: 12px 16px !important;
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--border) !important;
    margin-bottom: 16px !important;
}
.vault-container .meta-grid .meta-item {
    display: flex !important;
    align-items: baseline !important;
    gap: 6px !important;
    font-size: 14px !important;
    padding: 4px 0 !important;
}
.vault-container .meta-grid .meta-item .label {
    font-weight: 600 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    min-width: 70px !important;
}
.vault-container .meta-grid .meta-item .value {
    font-weight: 500 !important;
}

.vault-container .content-preview {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    padding: 14px 16px !important;
    margin-bottom: 20px !important;
}
.vault-container .content-preview strong {
    display: block !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    margin-bottom: 4px !important;
}
.vault-container .content-preview p {
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

.vault-container .reviewer-section-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-bottom: 10px !important;
}
.vault-container .reviewer-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
}
.vault-container .reviewer-card {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 6px 14px 6px 6px !important;
    border-radius: 40px !important;
    border: 1px solid var(--border) !important;
    flex: 1 1 auto !important;
    min-width: 150px !important;
}
.vault-container .reviewer-card .avatar-sm {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    flex-shrink: 0 !important;
}
.vault-container .reviewer-card .info {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
}
.vault-container .reviewer-card .info .name {
    font-weight: 600 !important;
    font-size: 13px !important;
}
.vault-container .reviewer-card .info .status {
    font-size: 11px !important;
    font-weight: 500 !important;
}

.vault-container .comment-area label {
    display: block !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    margin-bottom: 4px !important;
}
.vault-container .comment-area textarea {
    width: 100% !important;
    padding: 10px 14px !important;
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--border) !important;
    font-size: 14px !important;
    font-family: inherit !important;
    resize: vertical !important;
    min-height: 70px !important;
}
.vault-container .comment-area textarea:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
}

/* ==========================================
   CONFIRMATION OVERLAY (inside modal)
   ========================================== */
.vault-container .confirmation-overlay {
    display: none !important;
    position: absolute !important;
    inset: 0 !important;
    backdrop-filter: blur(2px) !important;
    border-radius: 16px !important;
    padding: 28px 32px 32px !important;
    z-index: 10 !important;
    flex-direction: column !important;
}
.vault-container .confirmation-overlay.active {
    display: flex !important;
}

.vault-container .confirmation-box {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}
.vault-container .confirmation-box h3 {
    font-size: 18px !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
}
.vault-container .confirmation-box h3 .action-label {
    text-transform: capitalize !important;
}

.vault-container .confirmation-box .comment-preview {
    border-left: 4px solid var(--blue) !important;
    padding: 12px 16px !important;
    border-radius: var(--radius-sm) !important;
    margin: 12px 0 16px 0 !important;
    font-size: 14px !important;
    font-style: italic !important;
}
.vault-container .confirmation-box .comment-preview .empty {
    font-style: normal !important;
}

.vault-container .disclaimer-box {
    border: 1px solid var(--red-border) !important;
    border-radius: var(--radius-sm) !important;
    padding: 14px 16px !important;
    margin: 8px 0 16px 0 !important;
}
.vault-container .disclaimer-box p {
    font-size: 13px !important;
    margin: 0 !important;
    line-height: 1.5 !important;
    font-weight: 500 !important;
}

.vault-container .confirmation-footer {
    display: flex !important;
    gap: 12px !important;
    justify-content: flex-end !important;
    margin-top: 12px !important;
    border-top: 1px solid var(--border) !important;
    padding-top: 20px !important;
}

/* ==========================================
   WIZARD STYLES
   ========================================== */
.vault-container .wizard-steps {
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
}
.vault-container #submitModal {
    margin-bottom: 24px !important;
}
.vault-container .modal-header {
    margin-bottom: 12px !important;
}
.vault-container .wizard-step-indicator {
    width: 32px !important;
    height: 4px !important;
    border-radius: 4px !important;
    transition: 0.3s !important;
    background: var(--bg-primary) !important;
}
.vault-container .wizard-step-indicator.active {
    background: var(--bg-primary) !important;
}
.vault-container .wizard-step-indicator.done {
    background: var(--green) !important;
}

.vault-container .wizard-step {
    display: none !important;
    animation: fadeIn 0.2s ease !important;
}
.vault-container .wizard-step.active {
    display: block !important;
}

.vault-container .wizard-step .field {
    margin-bottom: 16px !important;
}
.vault-container .wizard-step label {
    display: block !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    margin-bottom: 4px !important;
}
.vault-container .wizard-step input,
.vault-container .wizard-step select,
.vault-container .wizard-step textarea {
    width: 100% !important;
    padding: 10px 14px !important;
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--border) !important;
    font-size: 14px !important;
    font-family: inherit !important;
}
.vault-container .wizard-step textarea {
    min-height: 100px !important;
    resize: vertical !important;
}
.vault-container .wizard-step input:focus,
.vault-container .wizard-step select:focus,
.vault-container .wizard-step textarea:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
}

/* Disclaimer Box (Wizard) */
.vault-container .disclaimer-box-wizard {
    background: var(--red-bg);
    border: 1px solid var(--red-border);
    border-radius: var(--radius-sm);
    padding: 16px 18px !important;
    margin: 16px 0 8px 0 !important;
}
.vault-container .disclaimer-box-wizard strong {
    display: block !important;
    font-size: 14px !important;
    color: #991b1b !important;
    margin-bottom: 4px !important;
}
.vault-container .disclaimer-box-wizard p {
    font-size: 13px !important;
    margin: 0 !important;
    color: #7f1d1d !important;
    line-height: 1.5 !important;
}
.vault-container .disclaimer-box-wizard ul {
    margin: 6px 0 0 18px !important;
    font-size: 13px !important;
    padding-left: 4px !important;
    color: #7f1d1d !important;
}

.vault-container .summary-preview {
    padding: 14px 18px !important;
    border-radius: var(--radius-sm) !important;
    font-size: 14px !important;
    border-left: 3px solid var(--blue) !important;
    margin: 12px 0 !important;
}
.vault-container .summary-preview .row {
    display: flex !important;
    padding: 4px 0 !important;
    border-bottom: 1px solid var(--border) !important;
}
.vault-container .summary-preview .row:last-child {
    border-bottom: none !important;
}
.vault-container .summary-preview .label {
    font-weight: 600 !important;
    width: 120px !important;
    flex-shrink: 0 !important;
}

/* ==========================================
   IMPORT MODAL SPECIFICS
   ========================================== */
.vault-container .detail-row {
    display: flex !important;
    padding: 6px 0 !important;
    border-bottom: 1px solid var(--border) !important;
    font-size: 14px !important;
}
.vault-container .detail-row .label {
    font-weight: 600 !important;
    width: 120px !important;
    flex-shrink: 0 !important;
}


/* ==========================================
   EDIT MODE TOGGLE (for Personal Register)
   ========================================== */
.vault-container .editing-active {
    border: 1px solid var(--blue) !important;
}
.vault-container .editing-active .edit-actions {
    display: inline-flex !important;
    gap: 4px !important;
}
.vault-container .edit-actions {
    display: none !important;
}
.accordion {
    overflow: auto !important;
    margin: 20px auto !important;
    font-family: sans-serif !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
  }

  .accordion-item {
    border-bottom: 1px solid var(--border) !important;
  }

  .accordion-item:last-child {
    border-bottom: none !important; /* */
  }

  /* Header/Button Styling */
  .accordion-header {
    width: 100% !important;
    display: flex;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 16px 20px !important;
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border: none !important;
    outline: none !important;
    text-align: left !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
  }

  .accordion-header:hover {
    background-color: var(--bg-secondary) !important;
    color: var(--text-secondary) !important;
  }

  /* The Sliding Content Panel */
  .accordion-item:not(.active) .accordion-content {
    max-height: 0;
    width: 100% !important;
    overflow: hidden !important; /* */
    /*transition: max-height 0.3s ease-out !important; /* */
  }
  .hide {
      display: none;
  }

  /* Padding inside the panel must be on a child element, 
     otherwise the animation will jump unexpectedly. */
  .accordion-inner {
    background-color: var(--bg-secondary) !important;
    padding: 24px !important;
    color: var(--text-primary) !important;
    line-height: 1.5 !important;
  }

  /* Plus/Minus Indicator Icon */
  .accordion-icon {
    position: relative !important;
    width: 12px !important;
    height: 12px !important;
  }

  .accordion-icon::before,
  .accordion-icon::after {
    content: '' !important;
    position: absolute !important;
    background-color: var(--text-primary) !important;
    transition: transform 0.2s ease !important;
  }

  /* Horizontal line */
  .accordion-icon::before {
    top: 5px !important;
    left: 0 !important;
    width: 100% !important;
    height: 2px !important;
  }

  /* Vertical line */
  .accordion-icon::after {
    top: 0 !important;
    left: 5px !important;
    width: 2px !important;
    height: 100% !important;
  }

  /* Active State Transformation */
  .accordion-item.active .accordion-icon::after {
    transform: rotate(90deg) !important;
    opacity: 0 !important; /* Hides the vertical line to form a minus sign */
  }

  .accordion-item.active .accordion-header {
    background-color: var(--bg-primary) !important;
  }

.upload-container {
    background-color: var(--bg-primary);
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    width: 100%;
}
.upload-container:hover {
    background-color: var(--bg-secondary);
}

/* Drop Zone Styles */
.drop-zone {
    border: 2px dashed var(--border);
    border-radius: 8px;
    display: flex;    
    padding: 24px !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.drop-zone--over {
    border-color: var(--border);
    background-color: var(--bg-secondary);
}

.drop-zone__prompt {
    font-size: 15px;
    color: var(--text-secondary);
}

.drop-zone__prompt span {
    color: var(--text-primary);
    font-weight: 600;
}

.drop-zone__input {
    display: none; /* Hide standard input; click event proxy handled in JS */
}

/* File List & Progress Tracker Items */
.file-list {
    margin-top: 20px !important;
    overflow-y: auto;
}

.file-item {
    background-color: transparent;
    border-color: var(--border);
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.file-info {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--text-primary);
}

.file-name {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70%;
}

.file-status {
    font-size: 12px;
    color: var(--text-primary);
}

/* Progress Bar Container */
.progress-bar-container {
    width: 100%;
    height: 6px;
    background-color: var(--bg-secondary);
    border-radius: 3px;
    overflow: hidden;
}

.progress-bar {
    width: 0%;
    height: 100%;
    background-color: var(--bg-secondary);
    transition: width 0.1s linear;
}

/* Responsive */
@media (max-width: 768px) {
    .vault-container .vault-container {
        padding: 16px !important;
    }
    .vault-container .vault-header {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .vault-container .toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .vault-container .toolbar .filter-group {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .vault-container .modal-box {
        padding: 20px !important;
    }
    .vault-container .meta-grid {
        grid-template-columns: 1fr !important;
        gap: 4px !important;
    }
    .vault-container .reviewer-list {
        flex-direction: column !important;
    }
    .vault-container .confirmation-overlay {
        padding: 20px !important;
    }
    .vault-container .summary-preview .row {
        flex-direction: column !important;
        gap: 2px !important;
    }
    .vault-container .summary-preview .label {
        width: auto !important;
    }
    .vault-container .detail-row {
        flex-direction: column !important;
        gap: 2px !important;
    }
    .vault-container .detail-row .label {
        width: auto !important;
    }
}

.sub{color:var(--muted) !important;font-size:12.5px !important;margin:0 0 22px 24px !important;}
  .tabs{display:flex !important;gap:6px !important;flex-wrap:wrap !important;margin-bottom:20px !important;border-bottom:1px solid var(--line) !important;padding-bottom:14px !important;}
  .tab-content ..tab{background:transparent !important;border:1px solid var(--line) !important;color:var(--muted) !important;padding:8px 13px !important;border-radius:8px !important;cursor:pointer !important;font-size:13px !important;}
  .demoflag{font-size:11px !important;color:var(--muted) !important;border:1px dashed var(--line2) !important;border-radius:6px !important;padding:2px 7px !important;margin-left:auto}
  .panel{background:linear-gradient(180deg,var(--panel) 0%,var(--bg2) 100%) !important;border:1px solid var(--line) !important;border-radius:var(--radius) !important;padding:22px !important;margin-bottom:18px !important;}
  .panel h2{margin:0 0 3px !important;font-size:16px !important;}
  .note{color:var(--muted) !important;font-size:13px !important;margin:0 0 18px !important;}
  .eyebrow{color:var(--gold) !important;font-size:11px !important;letter-spacing:1.4px !important;text-transform:uppercase !important;font-weight:700 !important;margin:0 0 12px !important;}
  .screen{display:none}.screen.on{display:block !important;animation:fade .25s ease}
  @keyframes fade{from{opacity:0 !important;transform:translateY(4px)}to{opacity:1 !important;transform:none}}
  .qnum{display:inline-flex !important;align-items:center !important;justify-content:center !important;width:22px !important;height:22px !important;border-radius:50% !important;background:var(--gold) !important;color:#1b1405 !important;font-size:12px !important;font-weight:700 !important;margin-right:9px !important;}
  .qhead{display:flex !important;align-items:center !important;margin-bottom:12px !important;}.qhead .qh{font-size:14.5px !important;font-weight:600}
  select.secsel{width:100% !important;background:var(--panel2) !important;color:var(--ink) !important;border:1px solid var(--line2) !important;border-radius:9px !important;padding:12px 14px !important;font-size:14.5px !important;cursor:pointer}
  select.secsel:focus{outline:none !important;border-color:var(--gold)}
  .fgrid{display:grid !important;grid-template-columns:1fr 1fr !important;gap:12px !important;}
  @media(max-width:680px){.fgrid{grid-template-columns:1fr}}
  .fld label{display:block !important;font-size:11px !important;color:var(--muted) !important;letter-spacing:.4px !important;text-transform:uppercase !important;margin:0 0 4px !important;}
  .fld input,.fld select{width:100% !important;background:var(--panel2) !important;color:var(--ink) !important;border:1px solid var(--line2) !important;border-radius:8px !important;padding:9px 11px !important;font-size:13.5px !important;font-family:inherit}
  .fld input:focus,.fld select:focus{outline:none !important;border-color:var(--gold)}
  .fld input.bad{border-color:var(--red)}
  .fld .err{color:var(--red) !important;font-size:11px !important;margin-top:3px !important;display:none}
  .fld input.bad + .err{display:block}
  .submitbar{margin-top:14px !important;}
  .payload-out{margin-top:14px !important;background:#0c1424 !important;border:1px solid var(--line) !important;border-radius:8px !important;padding:12px !important;font-family:ui-monospace,monospace !important;font-size:11.5px !important;color:#c9d6e6 !important;white-space:pre-wrap !important;max-height:320px !important;overflow:auto !important;display:none}
  .payload-out.on{display:block}
  .divider{height:1px !important;background:var(--line) !important;margin:22px 0 20px !important;}
  .condwrap{display:none}.condwrap.on{display:block}
  .condhint{color:var(--muted) !important;font-size:12.5px !important;margin:-6px 0 16px !important;}
  .split{display:grid !important;grid-template-columns:1fr 290px !important;gap:18px !important;}
  @media(max-width:820px){.split{grid-template-columns:1fr}}
  .aside{position:sticky !important;top:18px !important;align-self:start}
  .aside .box{background:var(--panel2) !important;border:1px solid var(--line) !important;border-radius:10px !important;padding:15px !important;}
  .aside h3{margin:0 0 10px !important;font-size:13px !important; color: var(--text-primary) !important;}
  .doc{display:flex !important;align-items:center !important;gap:9px !important;font-size:12.5px !important;padding:5px 0 !important;border-bottom:1px solid #1c2f49}
  .doc:last-child{border-bottom:0}.doc .dot{width:8px !important;height:8px !important;border-radius:50% !important;flex-shrink:0}
  .dot.stat{background:var(--gold)}.dot.cond{background:var(--blue)}
  .qrow{border:1px solid var(--line) !important;border-radius:10px !important;padding:14px 16px !important;margin-bottom:10px !important;background:var(--panel2)}
  .qrow.blk{border-left:3px solid var(--amber)}
  .qtop{display:flex !important;align-items:center !important;gap:14px !important;}.qtext{flex:1}
  .elig{background:var(--bg-primary) !important;color:var(--text-primary) !important; border: 1px solid var(--line2) !important;display:inline-block !important;font-size:10.5px !important;border-radius:20px !important;padding:1px 8px !important;margin-top:5px !important;}
  .toggle{display:inline-flex !important;border:1px solid var(--line2) !important;border-radius:8px !important;overflow:hidden !important;flex-shrink:0}
  .toggle button{background:transparent !important;border:0 !important;color:var(--muted) !important;padding:7px 15px !important;cursor:pointer !important;font-size:13px !important;}
  .toggle button.yes.on{background:var(--green-d) !important;color:#eafff2}.toggle button.no.on{background:#324058 !important;color:var(--ink)}
  /* document menu */
  .menu{margin-top:13px !important;border-top:1px dashed var(--line2) !important;padding-top:13px !important;display:none}
  .qrow.active .menu{display:block}
  .menu .mhint{font-size:12.5px !important;color:var(--amber) !important;margin:0 0 10px !important;}
  .pick{border:1px solid var(--border) !important;border-radius:9px !important;margin-bottom:8px !important;background: var(--bg-primary) !important;overflow:hidden}
  .pick .prow{display:flex !important;align-items:center !important;gap:11px !important;padding:10px 12px !important;cursor:pointer}
  .pick .prow:hover{background:var(--bg-tertiary)}
  .chk{width:17px !important;height:17px !important;border-radius:5px !important;border:2px solid var(--line2) !important;flex-shrink:0 !important;position:relative}
  .pick.on .chk{border-color:var(--green) !important;background:var(--green-d)}
  .pick.on .chk:after{content:"\2713" !important;position:absolute !important;inset:-2px 0 0 1px !important;color:#eafff2 !important;font-size:13px !important;}
  .plabel{flex:1 !important;font-size:13.5px !important; color: var(--text-primary);}
  .info-btns{display:flex !important;gap:6px !important;flex-shrink:0}
  .ilink{font-size:11px !important;background:transparent !important;color:var(--text-primary) !important;}
  .ibtn{font-size:11px !important;border:1px solid var(--line2) !important;background:transparent !important;color:var(--muted) !important;border-radius:6px !important;padding:3px 8px !important;cursor:pointer}
  .ibtn:hover{color:var(--ink) !important;border-color:var(--gold-d)}
  .idetail{display:none !important;padding:0 12px 12px !important;font-size:12.5px !important;color:var(--muted)}
  .idetail.on{display:block !important;}
  .idetail .lbl{color:var(--gold) !important;font-size:10.5px !important;letter-spacing:.8px !important;text-transform:uppercase !important;font-weight:700 !important;margin:8px 0 4px !important;}
  .idetail pre{white-space:pre-wrap !important;background:var(--bg-secondary) !important;border:1px solid var(--border) !important;border-radius:7px !important;padding:10px !important;color:var(--text-secondary) !important;font-size:12px !important;margin:2px 0 0}
  .other{border:1px dashed var(--border) !important;border-radius:9px !important;padding:11px 12px !important;margin-top:4px !important;background:var(--bg-tertiary)}
  .other input,.other textarea{width:100% !important;background:var(--bg-secondary) !important;border:1px solid var(--line2) !important;color:var(--ink) !important;border-radius:7px !important;padding:8px 10px !important;font-size:13px !important;margin-top:6px !important;font-family:inherit}
  .other textarea{resize:vertical !important;min-height:38px !important;}
  .other .olab{font-size:11.5px !important;color:var(--muted)}
  .addother{margin-top:8px !important;background:transparent !important;border:1px dashed var(--line2) !important;color:var(--muted) !important;border-radius:8px !important;padding:8px 12px !important;font-size:12.5px !important;cursor:pointer !important;width:100%}
  .addother:hover{border-color:var(--blue)}
  .rmother{float:right !important;background:none !important;border:0 !important;color:var(--red) !important;cursor:pointer !important;font-size:12px !important;}
  .progress{height:8px !important;background:#152741 !important;border-radius:20px !important;overflow:hidden !important;margin:6px 0 4px !important;}
  .progress>i{display:block !important;height:100% !important;background:linear-gradient(90deg,var(--green-d),var(--green)) !important;width:0 !important;transition:.4s}
  .pmeta{display:flex !important;justify-content:space-between !important;font-size:12.5px !important;color:var(--muted) !important;margin-bottom:18px !important;}
  .grp{border:1px solid var(--line) !important;border-radius:10px !important;margin-bottom:12px !important;overflow:hidden}
  .grp .ghead{color:var(--text-primary) !important;background:var(--bg-primary) !important;padding:11px 14px !important;font-size:13.5px !important;display:flex !important;align-items:center !important;gap:10px !important;}
  .grp .ghead .gstat{margin-left:auto !important;font-size:11px !important;padding:2px 9px !important;border-radius:20px !important;}
  .gstat.ok{background:var(--bg-primary) !important;color:var(--green) !important;border: 1px solid var(--border) !important;}
  .gstat.pending{background:var(--bg-primary) !important;color:var(--text-primary) !important; border: 1px solid var(--line2) !important;}
  .grp .gbody{padding:8px 12px !important;}
  .anyone{font-size:11.5px !important;color:var(--muted) !important;padding:4px 2px 8px !important;}
  .drow{display:flex !important;align-items:center !important;gap:10px !important;padding:9px 4px !important;border-bottom:1px solid var(--border)}
  .drow:last-child{border-bottom:0}.dname{flex:1 !important;font-size:13.5px !important; color: var(--text-primary)}
  .badge{font-size:10.5px !important;padding:2px 8px !important;border-radius:20px !important;font-weight:600}
  .badge.stat{background:var(--bg-primary) !important;color:var(--text-primary) !important;}
  .state{font-size:11px !important;padding:3px 9px !important;border-radius:20px !important;border:1px solid var(--line2) !important;color:var(--muted)}
  .state.uploaded_pending_verification{background:var(--bg-primary) !important;color:var(--text-primary); border: 1px solid var(--line2);}
  .state.verified{color:var(--green);border-color:var(--border) !important;background:var(--bg-primary) !important;}
  .state.rejected{color:var(--red);border-color:var(--border) !important;background:var(--bg-primary) !important;}
  .file{position:relative !important;overflow:hidden !important;display:inline-flex !important;}.file input{position:absolute !important;inset:0 !important;opacity:0;cursor:pointer}
  .btn{border:0 !important;border-radius:8px !important;padding:9px 16px !important;font-size:13.5px !important;cursor:pointer !important;font-weight:600}
  .btn.gold{background:var(--gold) !important;color:#1b1405}.btn.gold:disabled{background:#4a4526 !important;color:#8a8468 !important;cursor:not-allowed}
  .btn.blue{background:var(--blue) !important;color:var(--bg-primary) !important;}.btn.ghost{background:transparent !important;border:1px solid var(--line2) !important;color:var(--ink)}
  .btn.sm{padding:6px 12px !important;font-size:12.5px !important;}.btn.tiny{padding:4px 10px !important;font-size:12px !important;}
  .empty{color:var(--muted) !important;font-size:13px !important;border:1px dashed var(--line2) !important;border-radius:10px !important;padding:22px !important;text-align:center}
  .banner{border-radius:10px !important;padding:13px 15px !important;margin-bottom:16px !important;display:flex !important;gap:12px !important;align-items:flex-start !important;background:var(--bg-primary) !important;border:1px solid var(--line2);}
  .banner .ic{font-size:18px !important;}.banner b{display:block !important;margin-bottom:2px !important;}.banner p{margin:0 !important;font-size:13px !important;color:var(--muted)}
  .pill{font-size:12px !important;padding:4px 11px !important;border-radius:20px !important;background:#152d4d !important;color:#8fbdf0 !important;border:1px solid #24456f}
  .arg{display:flex !important;gap:10px !important;padding:9px 12px !important;border-radius:8px !important;margin-bottom:7px !important;font-size:13.5px !important;}
  .arg.keep{background:#0c2417 !important;border:1px solid #1f5a37}.arg.drop{background:#1a1410 !important;border:1px solid #43371f !important;color:var(--muted)}
  .gatebox{border-top:1px solid var(--line) !important;margin-top:18px !important;padding-top:18px !important;}
  .gatemsg{font-size:13px !important;margin-bottom:12px !important;}.gatemsg.blocked{color:var(--text-primary)}.gatemsg.ok{color:var(--green)}