/* =============================================================================
   CentSay app styles — builds on the Solvyr design tokens (var(--*) only).
   No hardcoded colors/spacing/radius; everything references tokens.css.
   ============================================================================= */

.centsay-body {
    background: var(--color-bg);
    color: var(--color-text);
}

.centsay-subnav {
    background: var(--color-surface);
    border-color: var(--color-border-light) !important;
}

/* Page header / toolbar */
.centsay-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}
.centsay-page-head__title {
    font-family: var(--font-family-display, inherit);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    margin: 0;
}
.centsay-page-head__subtitle {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    margin: var(--space-1) 0 0;
}

/* Card surface */
.centsay-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg, 4px);
    box-shadow: var(--shadow-sm);
}
.centsay-card__body { padding: var(--space-4); }

/* KPI tiles (dashboard) */
.centsay-kpi {
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg, 4px);
    padding: var(--space-4);
    height: 100%;
}
.centsay-kpi__label {
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 var(--space-2);
}
.centsay-kpi__value {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    line-height: 1.1;
    margin: 0;
}
.centsay-kpi__meta {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    margin: var(--space-1) 0 0;
}

/* Signed money */
.money { font-variant-numeric: tabular-nums; }
.money--positive { color: var(--color-success); }
.money--negative { color: var(--color-danger); }

/* Make Bootstrap cards/tables sit on token surfaces */
.centsay-body .card {
    border-color: var(--color-border-light);
}

/* =============================================================================
   VAULT TEAL — CentSay brand reskin. Remaps Bootstrap --bs-* so components inherit
   teal. Per BS 5.3, :root alone does NOT recolor .btn-primary (it compiles literal
   colors into --bs-btn-*), so explicit component-var blocks follow. Accent = amber.
   Loads after the shared solvyr.css.
   ============================================================================= */
:root,
[data-bs-theme="light"] {
    --bs-primary: #0D9488;            --bs-primary-rgb: 13, 148, 136;
    --bs-info: #0D9488;               --bs-info-rgb: 13, 148, 136;
    --bs-link-color: #0F766E;         --bs-link-color-rgb: 15, 118, 110;
    --bs-link-hover-color: #115E59;   --bs-link-hover-color-rgb: 17, 94, 89;
    --bs-primary-bg-subtle: #CCFBF1;  --bs-primary-text-emphasis: #115E59;

    --cs-primary: #0D9488;
    --cs-primary-hover: #0F766E;
    --cs-primary-active: #115E59;
    --cs-ink-on-accent: #FFFFFF;
    --cs-accent: #F59E0B;             --cs-accent-rgb: 245, 158, 11;
    --focus-ring-color: #0D9488;

    /* CentSay type — Space Grotesk (display) + Inter (body), via Google Fonts */
    --font-family-display: 'Space Grotesk', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-family-body: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

body { font-family: var(--font-family-body); }
h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--font-family-display);
    letter-spacing: -0.01em;
}

.btn-primary {
    --bs-btn-bg: var(--cs-primary);
    --bs-btn-border-color: var(--cs-primary);
    --bs-btn-color: var(--cs-ink-on-accent);
    --bs-btn-hover-bg: var(--cs-primary-hover);
    --bs-btn-hover-border-color: var(--cs-primary-hover);
    --bs-btn-hover-color: var(--cs-ink-on-accent);
    --bs-btn-active-bg: var(--cs-primary-active);
    --bs-btn-active-border-color: var(--cs-primary-active);
    --bs-btn-active-color: var(--cs-ink-on-accent);
    --bs-btn-disabled-bg: var(--cs-primary);
    --bs-btn-disabled-border-color: var(--cs-primary);
    --bs-btn-disabled-color: var(--cs-ink-on-accent);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
.btn-outline-primary {
    --bs-btn-color: var(--bs-link-color);
    --bs-btn-border-color: var(--cs-primary);
    --bs-btn-hover-bg: var(--cs-primary);
    --bs-btn-hover-border-color: var(--cs-primary);
    --bs-btn-hover-color: var(--cs-ink-on-accent);
    --bs-btn-active-bg: var(--cs-primary-active);
    --bs-btn-active-border-color: var(--cs-primary-active);
    --bs-btn-active-color: var(--cs-ink-on-accent);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
.text-primary { color: var(--bs-link-color) !important; }
.link-primary { color: var(--bs-link-color) !important; }
.badge.text-bg-primary { background-color: var(--cs-primary) !important; color: #fff !important; }
.form-control:focus, .form-select:focus {
    border-color: var(--cs-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}
.form-check-input:checked {
    background-color: var(--cs-primary);
    border-color: var(--cs-primary);
}
.nav-pills .nav-link.active { background-color: var(--cs-primary); }
.text-accent { color: var(--cs-accent) !important; }

/* =============================================================================
   CentSay app navbar — single dark-teal top bar (all authenticated pages).
   Fixed-dark hexes (hero family), intentional and theme-independent.
   ============================================================================= */
.cs-nav {
    background: linear-gradient(180deg, #0F2E2B 0%, #0B201E 100%);
    border-bottom: 1px solid #1B3F3B;
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}
.cs-nav .navbar-brand { margin-right: 2.25rem; }
.cs-nav .navbar-brand img { border-radius: 7px; }
.cs-nav .cs-nav__name {
    font-family: var(--font-family-display, 'Space Grotesk', sans-serif);
    font-weight: 700; font-size: 1.2rem; color: #FFFFFF; letter-spacing: -0.01em;
}
.cs-nav .cs-nav__sub {
    font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.18em; color: #5FA89F;
}
/* X-axis breathing room + refined display-font links */
.cs-nav .navbar-nav { gap: 0.4rem; align-items: center; }
.cs-nav .nav-link {
    font-family: var(--font-family-display, 'Space Grotesk', sans-serif);
    font-weight: 500; font-size: 0.95rem;
    color: #B6D2CD;
    padding: 0.5rem 0.95rem;
    border-radius: 9px;
    transition: color .15s ease, background-color .15s ease;
}
.cs-nav .nav-link:hover, .cs-nav .nav-link:focus { color: #FFFFFF; background: rgba(255, 255, 255, 0.06); }
.cs-nav .nav-link.active { color: #FFFFFF; background: rgba(45, 212, 191, 0.16); }
.cs-nav .navbar-nav .dropdown-toggle::after { margin-left: 0.45rem; vertical-align: 0.12em; }
.cs-nav .dropdown-menu {
    background: #0E2A28; border: 1px solid #1B3F3B; border-radius: 10px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45); padding: 0.4rem; margin-top: 0.4rem;
}
.cs-nav .dropdown-item { color: #CFE6E2; border-radius: 7px; padding: 0.55rem 0.75rem; font-size: 0.92rem; }
.cs-nav .dropdown-item:hover, .cs-nav .dropdown-item:focus { background: #14302D; color: #FFFFFF; }
.cs-nav .dropdown-item-text { color: #8FB3AE; }
.cs-nav .dropdown-divider { border-color: #1B3F3B; }
.cs-nav .navbar-toggler { border-color: #2A554F; }
@media (max-width: 991.98px) {
    .cs-nav .navbar-nav { gap: 0.15rem; align-items: stretch; }
}