/* ============================================================================
   Thracian Invest — premium client-app design system
   Loaded LAST (after bootstrap + custom.css) — overrides everything visual.
   Private-bank language: deep ink navy, warm ivory, refined gold, serif display.
   CSS-only: no template logic depends on this file.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
    --tn-ink: #10161d;
    --tn-ink-2: #1a232e;
    --tn-ink-3: #243040;
    --tn-ivory: #f6f4ef;
    --tn-paper: #fffdf9;
    --tn-gold: #c9a45c;
    --tn-gold-deep: #b18d44;
    --tn-gold-soft: #e9dcbe;
    --tn-hairline: #e6e0d3;
    --tn-text: #2a2f36;
    --tn-muted: #79808a;
    --tn-shadow-sm: 0 1px 2px rgba(16, 22, 29, 0.05), 0 2px 8px rgba(16, 22, 29, 0.05);
    --tn-shadow-md: 0 2px 4px rgba(16, 22, 29, 0.06), 0 12px 28px rgba(16, 22, 29, 0.09);
    --tn-shadow-lift: 0 4px 10px rgba(16, 22, 29, 0.10), 0 18px 38px rgba(16, 22, 29, 0.13);
    --tn-radius: 14px;
    --tn-radius-sm: 10px;
}

/* ---------- Foundation ---------- */
body {
    background-color: var(--tn-ivory) !important;
    background-image: radial-gradient(ellipse at top, #fbf9f5 0%, var(--tn-ivory) 55%);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    color: var(--tn-text);
    -webkit-font-smoothing: antialiased;
    letter-spacing: 0.005em;
}

h1, h2, h3, .h1, .h2, .h3, .auth-header h2, .card-header h4, .card-header h5,
.navbar-brand, .display-title {
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif !important;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--tn-ink);
}
h4, h5, h6, .h4, .h5, .h6 { color: var(--tn-ink); font-weight: 600; }

/* Dark surfaces keep LIGHT text — the ink heading override above must not
   paint headings black on navy surfaces (черен текст върху черен фон). */
.auth-header h1, .auth-header h2, .auth-header h3 { color: #f3efe6 !important; }
.auth-header p, .auth-header .text-muted { color: rgba(243, 239, 230, 0.75) !important; }
.card-header.bg-primary h4, .card-header.bg-primary h5,
.card-header.bg-dark h4, .card-header.bg-dark h5,
.section-header h1, .section-header h2, .section-header h3,
.section-header h4, .section-header h5 { color: #f3efe6 !important; }
.navbar h1, .navbar h2, .navbar h3, .navbar h4, .navbar h5 { color: #f3efe6 !important; }

::selection { background: var(--tn-gold-soft); color: var(--tn-ink); }

/* ---------- Navbar: deep ink, serif brand, gold underline ---------- */
.navbar {
    background: linear-gradient(180deg, #131b24 0%, var(--tn-ink) 100%) !important;
    border-bottom: 1px solid rgba(201, 164, 92, 0.35);
    box-shadow: 0 8px 24px rgba(16, 22, 29, 0.25) !important;
    min-height: 72px;
}
.navbar-brand {
    font-size: 1.45rem !important;
    letter-spacing: 0.06em !important;
    color: #f3efe6 !important;
}
.navbar-brand i { color: var(--tn-gold) !important; }
.navbar .nav-link {
    font-size: 0.92rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: rgba(243, 239, 230, 0.85) !important;
    border-radius: 0 !important;
    border-bottom: 2px solid transparent;
    background: none !important;
}
.navbar .nav-link:hover, .navbar .nav-link.active {
    color: var(--tn-gold) !important;
    border-bottom-color: var(--tn-gold);
    background: none !important;
}
.navbar .dropdown-menu {
    border: 1px solid var(--tn-hairline);
    border-radius: var(--tn-radius-sm);
    box-shadow: var(--tn-shadow-md);
    overflow: hidden;
}
.navbar .dropdown-item:active { background-color: var(--tn-ink); }

/* ---------- Cards: paper surface, hairline, layered shadow ---------- */
.card {
    background-color: var(--tn-paper);
    border: 1px solid var(--tn-hairline) !important;
    border-radius: var(--tn-radius) !important;
    box-shadow: var(--tn-shadow-sm) !important;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.card:hover { box-shadow: var(--tn-shadow-md) !important; }
.card-header {
    background: linear-gradient(180deg, #fbf8f2 0%, #f6f2e9 100%) !important;
    border-bottom: 1px solid var(--tn-hairline) !important;
    border-radius: var(--tn-radius) var(--tn-radius) 0 0 !important;
    padding: 1rem 1.4rem;
}
.card-header.bg-primary, .card-header.bg-dark,
.card-header[style*="232c33"], .section-header {
    background: linear-gradient(135deg, var(--tn-ink) 0%, var(--tn-ink-3) 100%) !important;
    color: #f3efe6 !important;
    border-bottom: 2px solid var(--tn-gold) !important;
}
.card-header.bg-primary h1, .card-header.bg-primary h2, .card-header.bg-primary h3,
.card-header.bg-primary h4, .card-header.bg-primary h5,
.card-header.bg-dark h4, .card-header.bg-dark h5 { color: #f3efe6 !important; }
.card-body { padding: 1.5rem 1.6rem; }

/* Gold accent bar on auth/onboarding hero cards */
.auth-card, .onboarding-card, .floating-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--tn-radius) !important;
    box-shadow: var(--tn-shadow-md) !important;
}
.auth-card::before, .onboarding-card::before, .floating-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--tn-gold-deep), var(--tn-gold) 35%, #e8cf96 50%, var(--tn-gold) 65%, var(--tn-gold-deep));
    z-index: 2;
}

/* ---------- Buttons: uniform height, ink primary, gold hover lift ---------- */
.btn {
    border-radius: var(--tn-radius-sm) !important;
    font-weight: 600;
    letter-spacing: 0.03em;
    transition: all 0.22s ease !important;
}
.btn-lg, .btn-primary.btn-lg, .auth-card .btn-primary, .onboarding-card .btn-primary {
    min-height: 52px;
}
.btn-primary, .btn-success, .btn-dark {
    background: linear-gradient(180deg, var(--tn-ink-2) 0%, var(--tn-ink) 100%) !important;
    border: 1px solid var(--tn-ink) !important;
    color: #f3efe6 !important;
    box-shadow: 0 2px 6px rgba(16, 22, 29, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
.btn-primary:hover, .btn-success:hover, .btn-dark:hover {
    background: linear-gradient(180deg, var(--tn-ink-3) 0%, var(--tn-ink-2) 100%) !important;
    border-color: var(--tn-gold) !important;
    color: var(--tn-gold) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(16, 22, 29, 0.3) !important;
}
.btn-primary:active, .btn-success:active { transform: translateY(0); }
.btn-warning {
    background: linear-gradient(180deg, #d9b46b 0%, var(--tn-gold) 100%) !important;
    border: 1px solid var(--tn-gold-deep) !important;
    color: var(--tn-ink) !important;
}
.btn-warning:hover {
    background: linear-gradient(180deg, #e2c280 0%, var(--tn-gold-deep) 100%) !important;
    color: var(--tn-ink) !important;
    transform: translateY(-1px);
}
.btn-outline-primary, .btn-outline-secondary, .btn-outline-dark {
    border: 1px solid #c9c2b2 !important;
    color: var(--tn-ink) !important;
    background: transparent !important;
}
.btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-outline-dark:hover {
    background: var(--tn-ink) !important;
    border-color: var(--tn-ink) !important;
    color: var(--tn-gold) !important;
}
.btn-link { color: var(--tn-gold-deep) !important; }

/* ---------- Forms: tall fields, gold focus ring, refined labels ---------- */
.form-control, .form-select {
    min-height: 48px;
    border: 1px solid #d9d2c2 !important;
    border-radius: var(--tn-radius-sm) !important;
    background-color: #fffefb !important;
    padding: 0.6rem 0.95rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
textarea.form-control { min-height: 0; }
.form-control-sm, .form-select-sm { min-height: 36px; padding: 0.35rem 0.7rem; }
.form-control:focus, .form-select:focus {
    border-color: var(--tn-gold) !important;
    box-shadow: 0 0 0 0.22rem rgba(201, 164, 92, 0.18) !important;
    background-color: #fff !important;
}
.form-label {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--tn-muted);
    margin-bottom: 0.45rem;
}
.form-check-input:checked {
    background-color: var(--tn-ink) !important;
    border-color: var(--tn-ink) !important;
}
.form-check-input:focus { box-shadow: 0 0 0 0.2rem rgba(201, 164, 92, 0.2) !important; }
.input-group-text {
    background-color: #f4f0e7;
    border: 1px solid #d9d2c2;
    border-radius: var(--tn-radius-sm);
    color: var(--tn-muted);
}

/* ---------- Progress steps (onboarding / questionnaires) ---------- */
.progress {
    height: 6px;
    border-radius: 3px;
    background-color: #e9e3d5;
}
.progress-bar {
    background: linear-gradient(90deg, var(--tn-gold-deep), var(--tn-gold)) !important;
}
.progress-step .step-circle, .progress-step [class*="circle"], .step-number {
    border: 2px solid #d9d2c2;
    background: #fff;
    color: var(--tn-muted);
    transition: all 0.25s ease;
}
.progress-step.active .step-circle, .progress-step.active .step-number {
    background: linear-gradient(135deg, var(--tn-gold-deep), var(--tn-gold)) !important;
    border-color: var(--tn-gold-deep) !important;
    color: var(--tn-ink) !important;
    box-shadow: 0 0 0 5px rgba(201, 164, 92, 0.18);
}
.progress-step.completed .step-circle, .progress-step.completed .step-number {
    background: var(--tn-ink) !important;
    border-color: var(--tn-ink) !important;
    color: var(--tn-gold) !important;
}

/* ---------- Tables: airy, hairline rows, small-caps headers ---------- */
.table { --bs-table-hover-bg: #faf6ec; }
.table thead th {
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--tn-muted);
    background-color: #f6f2e9 !important;
    border-bottom: 1px solid var(--tn-hairline) !important;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
}
.table td { border-color: #efeadf; padding-top: 0.75rem; padding-bottom: 0.75rem; vertical-align: middle; }

/* ---------- Badges / alerts ---------- */
.badge { border-radius: 6px; font-weight: 600; letter-spacing: 0.03em; padding: 0.42em 0.7em; }
.badge.bg-success { background-color: #2f5d46 !important; color: #e9f3ec !important; }
.badge.bg-warning { background-color: var(--tn-gold) !important; color: var(--tn-ink) !important; }
.alert { border-radius: var(--tn-radius-sm); border: 1px solid transparent; box-shadow: var(--tn-shadow-sm); }
.alert-success { background-color: #eef5ef; border-color: #cfe2d3; color: #2f5d46; }
.alert-danger { background-color: #faeeee; border-color: #ecd2d2; color: #8c3434; }
.alert-warning { background-color: #fbf4e3; border-color: #ecdcb4; color: #7a5d22; }
.alert-info { background-color: #eef2f6; border-color: #d4dde6; color: #33475c; }

/* ---------- Modals / dropdowns ---------- */
.modal-content {
    border: 1px solid var(--tn-hairline);
    border-radius: var(--tn-radius) !important;
    box-shadow: var(--tn-shadow-lift) !important;
}
.modal-header { border-bottom: 1px solid var(--tn-hairline); background: #fbf8f2; border-radius: var(--tn-radius) var(--tn-radius) 0 0 !important; }
.modal-footer { border-top: 1px solid var(--tn-hairline); }

/* ---------- Footer / fine print ---------- */
footer, .footer { color: var(--tn-muted); }
small, .small { color: inherit; }
.text-muted { color: var(--tn-muted) !important; }

/* ---------- Scrollbar (subtle) ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--tn-ivory); }
::-webkit-scrollbar-thumb { background: #cfc8b8; border-radius: 5px; border: 2px solid var(--tn-ivory); }
::-webkit-scrollbar-thumb:hover { background: var(--tn-gold); }

/* ---------- Mobile refinements ---------- */
@media (max-width: 640px) {
    .card-body { padding: 1.15rem 1.05rem; }
    .btn-lg { min-height: 50px; }
    h1, .h1 { font-size: 1.7rem; }
}