/* ADDCALC.NET Advisor Portal — custom overrides for OneUI + Bootstrap 5 */

:root {
    --ac-primary: #006496;
    --ac-primary-dark: #004e76;
    --ac-secondary: #8296aa;
    --ac-accent: #e8f0f7;
    --ac-border: #dee2e6;
    /* Override Bootstrap/OneUI primary colour */
    --bs-primary: #006496;
    --bs-primary-rgb: 0, 100, 150;
    --bs-link-color: #006496;
    --bs-link-hover-color: #004e76;
}

/* ===== Bootstrap / OneUI colour overrides ===== */
.bg-primary { background-color: var(--ac-primary) !important; }
.text-primary { color: var(--ac-primary) !important; }
.btn-primary {
    --bs-btn-bg: var(--ac-primary);
    --bs-btn-border-color: var(--ac-primary);
    --bs-btn-hover-bg: var(--ac-primary-dark);
    --bs-btn-hover-border-color: var(--ac-primary-dark);
    --bs-btn-active-bg: var(--ac-primary-dark);
    --bs-btn-active-border-color: var(--ac-primary-dark);
    --bs-btn-focus-shadow-rgb: 0, 100, 150;
    border-radius: 0;
}
.btn-primary:hover { border-radius: 0; }
.btn-outline-primary {
    --bs-btn-color: var(--ac-primary);
    --bs-btn-border-color: var(--ac-primary);
    --bs-btn-hover-bg: var(--ac-primary);
    --bs-btn-hover-border-color: var(--ac-primary);
    --bs-btn-active-bg: var(--ac-primary);
}
.btn-secondary { border-radius: 0; }
.btn-primary-modal { min-width: 150px; }

/* ===== Page layout ===== */
#main-content {
    padding-top: 58px !important; /* clear fixed header (no sidebar to trigger OneUI's rule) */
}
#page-content {
    padding-bottom: 80px; /* clear fixed action bar */
}

/* ===== Codex-style design tokens (match demo.investordesktop.com) ===== */
body {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    background: #f6f7f9 !important;
    color: #19202a;
}
#page-container { background: #f6f7f9; }
.content { color: #19202a; }

/* ===== Brand header (matches Codex compact top bar with logo lockup) ===== */
#page-header {
    background: #ffffff !important;
    border-bottom: 1px solid #d9dee7;
    box-shadow: 0 1px 0 rgba(25, 32, 42, 0.02);
}
#page-header .content-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 clamp(16px, 4vw, 40px);
    color: #19202a;
    max-width: 1380px;
    margin: 0 auto;
}
.ap-header-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
}
.ap-header-brand:hover { color: inherit; text-decoration: none; }
.ap-header-mark {
    width: 38px; height: 38px;
    flex-shrink: 0;
    border-radius: 9px;
    box-shadow: 0 6px 14px rgba(5, 41, 77, 0.18);
    display: block;
    overflow: hidden;
}
.ap-header-mark svg { display: block; width: 100%; height: 100%; }
.ap-header-wordmark { display: flex; flex-direction: column; line-height: 1.1; }
.ap-header-wordmark-name {
    font-weight: 700;
    font-size: 1.02rem;
    color: #05294d;
    letter-spacing: 0.01em;
}
.ap-header-wordmark-dot { color: #0f6b7a; }
.ap-header-wordmark-tag {
    font-size: 0.66rem;
    font-weight: 600;
    color: #5a6a7a;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-top: 1px;
}
.ap-header-right { display: flex; align-items: center; gap: 10px; }
#page-header .dropdown-toggle.btn-codex-secondary { font-size: 0.85rem; padding: 7px 14px; }

/* ===== Codex-style suite header (matches demo.investordesktop.com) ===== */
.ap-shell { max-width: 1220px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }

.ap-suite-header {
    align-items: center;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(243, 247, 251, 0.98)),
        linear-gradient(90deg, rgba(6, 55, 109, 0.09), transparent 52%);
    border: 1px solid #d9dee7;
    border-radius: 8px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    min-height: 132px;
    padding: 22px clamp(18px, 4vw, 36px);
    margin: 24px 0 18px 0;
}
.ap-brand-lockup { display: flex; align-items: center; gap: 18px; min-width: 0; }
.ap-product-logo {
    background: linear-gradient(135deg, #05294d, #0f6b7a 72%, #7fbf90);
    border-radius: 16px;
    box-shadow: 0 18px 34px rgba(5, 41, 77, 0.2);
    color: #fff;
    flex: 0 0 auto;
    width: 76px;
    height: 76px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ap-product-logo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 28%, rgba(255,255,255,0.35), transparent 55%);
    pointer-events: none;
}
.ap-product-logo span {
    font-weight: 800;
    font-size: 1.25rem;
    letter-spacing: 0.02em;
    line-height: 1;
    position: relative;
    z-index: 1;
}
.ap-brand-text { min-width: 0; }
.ap-brand-text .ap-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.7rem;
    font-weight: 600;
    color: #5a6a7a;
    margin: 0 0 .15rem 0;
}
.ap-brand-text h1 {
    font-weight: 700;
    font-size: 1.65rem;
    line-height: 1.15;
    margin: 0 0 .15rem 0;
    color: #05294d;
}
.ap-brand-text h1 .ap-name { color: #0f6b7a; }
.ap-brand-text .ap-subtitle {
    color: #4d5a6a;
    margin: 0;
    font-size: 0.95rem;
    max-width: 56ch;
}
.ap-suite-visual {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
}
.ap-suite-visual img { width: 220px; height: auto; max-height: 110px; object-fit: contain; }

@media (max-width: 768px) {
    .ap-suite-header { grid-template-columns: 1fr; }
    .ap-suite-visual { justify-content: flex-start; }
    .ap-suite-visual img { width: 180px; }
}

/* ===== KPI tiles ===== */
.ap-stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin: 0 0 18px 0;
}
.ap-stat-tile {
    background: #ffffff;
    border: 1px solid #d9dee7;
    border-radius: 8px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.ap-stat-tile .ap-stat-icon {
    flex-shrink: 0;
    width: 40px; height: 40px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(5, 41, 77, 0.08);
    color: #05294d;
    font-size: 1rem;
}
.ap-stat-tile.tile-accent .ap-stat-icon { background: rgba(15, 107, 122, 0.10); color: #0f6b7a; }
.ap-stat-tile.tile-info   .ap-stat-icon { background: rgba(127, 191, 144, 0.18); color: #2f7a4e; }
.ap-stat-tile .ap-stat-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: #05294d;
    line-height: 1.1;
    margin: 0;
}
.ap-stat-tile .ap-stat-label {
    color: #5a6a7a;
    font-size: 0.72rem;
    margin: 2px 0 0 0;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

/* ===== Cards (subtle Codex style) ===== */
/* Partial swap: dims #profile-panel briefly while the fetch is in flight,
   so prospect clicks feel responsive even on a slow connection. */
#profile-panel.is-loading { opacity: 0.55; transition: opacity .12s ease; pointer-events: none; }
#profile-panel             { transition: opacity .12s ease; }

.block.ap-card {
    background: #ffffff;
    border: 1px solid #d9dee7;
    border-radius: 8px;
    box-shadow: none;
}
.block.ap-card .block-header {
    background: transparent;
    border-bottom: 1px solid #e8ecf2;
    padding: 14px 18px;
}
.block.ap-card .block-header .block-title {
    color: #05294d;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
}
.block.ap-card .block-content { padding: 18px 20px; }
.block.ap-card .block-content.p-0 { padding: 0 !important; }   /* list cards override */
.block.ap-card .block-header { padding: 14px 20px; }
.block.ap-card .table { color: #19202a; }
.block.ap-card .table thead.table-light th {
    background: #f6f7f9;
    color: #5a6a7a;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    border-bottom: 1px solid #d9dee7;
    padding: 10px 16px;
}
.block.ap-card .table tbody td { padding: 12px 16px; border-color: #eef2f6; }

/* ===== Empty state ===== */
.ap-empty { text-align: center; padding: 56px 24px; color: #5a6a7a; }
.ap-empty .ap-empty-icon {
    width: 64px; height: 64px;
    margin: 0 auto 14px auto;
    border-radius: 12px;
    background: rgba(5, 41, 77, 0.06);
    color: #05294d;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
}
.ap-empty h3 { color: #05294d; font-weight: 600; font-size: 1rem; margin: 0 0 .35rem 0; }
.ap-empty p { margin: 0; font-size: .9rem; }

/* ===== Prospect list (Codex-style clean rows) ===== */
.ap-prospect-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ap-prospect-item {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid #eef2f6;
    gap: 12px;
    transition: background 0.12s ease;
}
.ap-prospect-item:last-child { border-bottom: 0; }
.ap-prospect-item:hover { background: #f9fafc; }
.ap-prospect-item.is-selected { background: #f0f5fa; box-shadow: inset 3px 0 0 #0f6b7a; }
.ap-prospect-link {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}
.ap-prospect-link:hover { color: inherit; text-decoration: none; }
.ap-prospect-avatar {
    flex: 0 0 auto;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #05294d, #0f6b7a);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 600;
    font-size: 0.95rem;
}
.ap-prospect-info { min-width: 0; display: flex; flex-direction: column; }
.ap-prospect-name {
    font-weight: 600;
    color: #19202a;
    font-size: 0.95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ap-prospect-meta {
    color: #5a6a7a;
    font-size: 0.8rem;
}
.ap-prospect-actions {
    flex: 0 0 auto;
    display: flex;
    gap: 4px;
}
.ap-icon-btn {
    width: 30px; height: 30px;
    border-radius: 6px;
    background: transparent;
    border: 0;
    color: #5a6a7a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
/* Language-aware variant — PDF/Excel buttons in EN/FR pairs. Slimmer than the
   normal action button so four of them fit comfortably in a row. */
.ap-icon-btn.ap-lang-btn {
    width: 26px;
}
.ap-icon-btn:hover { background: #eef2f6; color: #05294d; }
.ap-icon-btn-danger:hover { background: #fdecec; color: #c0392b; }

/* Header strip above the profile list — labels the 4 language-aware columns
   (PDF EN, PDF FR, XLS EN, XLS FR) so the buttons themselves can stay icon-only. */
.ap-profile-action-headers {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
    padding: 6px 16px 4px;
    border-bottom: 1px solid #eef2f6;
    background: #fafbfc;
}
/* Reserve 26px per language-button column plus the trailing trash icon (30px)
   so the headers sit centred over the icons below. The pencil/edit button at
   the left of the action area is optional per row, so we don't reserve a slot
   for it in the header strip — the labels still align over the 4 lang buttons. */
.ap-profile-action-headers .ap-action-col {
    width: 26px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #5a6a7a;
    line-height: 1.15;
    white-space: nowrap;
}
.ap-profile-action-headers .ap-action-col b { font-weight: 700; }
.ap-profile-action-headers .ap-action-col > span {
    font-weight: 600;
    color: #7a8694;
    margin-top: 1px;
}
/* Reserve trailing space matching the delete trash icon (30px + 4px gap) so
   the column labels stop just before the delete button column. */
.ap-profile-action-headers::after {
    content: "";
    width: 34px;
    flex: 0 0 auto;
}
.ap-illustration-avatar {
    background: linear-gradient(135deg, #1d3a5c, #003e60 55%, #001f33) !important;
}
.ap-illustration-avatar i { font-size: 0.85rem; }

/* ===== Buttons (Codex flavor) ===== */
.btn-codex-primary {
    background: #05294d;
    border: 0;
    color: #fff;
    font-weight: 600;
    padding: 9px 18px;
    border-radius: 6px;
    transition: background 0.15s ease;
    font-size: 0.92rem;
}
.btn-codex-primary:hover { background: #0a3866; color: #fff; }
.btn-codex-secondary {
    background: #ffffff;
    border: 1px solid #d9dee7;
    color: #05294d;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.9rem;
}
.btn-codex-secondary:hover { background: #f6f7f9; border-color: #c4ccd6; color: #05294d; }
.btn-codex-danger {
    background: #ffffff;
    border: 1px solid #f0c8c8;
    color: #c0392b;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.9rem;
}
.btn-codex-danger:hover { background: #fdecec; border-color: #e0a8a8; color: #a02818; }
.btn-codex-danger-filled {
    background: #c0392b;
    border: 0;
    color: #fff;
    font-weight: 600;
    padding: 9px 18px;
    border-radius: 6px;
    font-size: 0.92rem;
}
.btn-codex-danger-filled:hover { background: #a02818; color: #fff; }

/* ===== Breadcrumbs ===== */
.ap-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: #5a6a7a;
    margin: 24px 0 14px 0;
}
.ap-breadcrumb a {
    color: #05294d;
    text-decoration: none;
    font-weight: 600;
}
.ap-breadcrumb a:hover { color: #0a3866; text-decoration: underline; }
.ap-breadcrumb-sep { color: #c4ccd6; }

/* ===== Forms (Codex flavor) ===== */
/* Roomy card content for forms */
.block.ap-card .block-content.ap-form-body { padding: 22px 24px 24px 24px; }
.ap-form .form-label {
    font-weight: 600;
    color: #05294d;
    font-size: 0.82rem;
    margin-bottom: 6px;
    display: block;
    text-transform: none;
    letter-spacing: 0;
}
.ap-form .form-control,
.ap-form .form-select {
    border: 1px solid #d9dee7;
    border-radius: 6px;
    background-color: #ffffff;
    color: #19202a;
    padding: 9px 12px;
    font-size: 0.92rem;
    transition: border-color 0.12s, box-shadow 0.12s;
}
.ap-form .form-select {
    /* Restore native-style chevron arrow that the bg-color override clobbered */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2305294d'%3E%3Cpath d='M3.204 5h9.592L8 10.481zm-.753.659l4.796 5.48a1 1 0 0 0 1.506 0l4.796-5.48c.566-.647.106-1.659-.753-1.659H3.204a1 1 0 0 0-.753 1.659z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 12px;
    padding-right: 36px;
    appearance: none;
}
.ap-form .form-control:focus,
.ap-form .form-select:focus {
    border-color: #0f6b7a;
    box-shadow: 0 0 0 3px rgba(15, 107, 122, 0.12);
    outline: none;
}
.ap-form .form-control::placeholder { color: #aab3bf; }

/* ==========================================================================
   GLOBAL CODEX OVERRIDES — apply codex styling to OneUI/Bootstrap classes
   so the 35 pages that haven't been hand-converted still look right.
   ========================================================================== */

/* PageHero "bg-body-light" band → codex breadcrumb area */
#main-content > .bg-body-light {
    background: transparent !important;
    border-bottom: 0 !important;
}
#main-content > .bg-body-light > .content {
    max-width: 1220px;
    margin: 0 auto;
    padding: 18px clamp(16px, 4vw, 40px) 6px;
}
#main-content > .bg-body-light .breadcrumb {
    margin: 0;
    background: transparent;
    padding: 0;
    font-size: 0.85rem;
}
#main-content > .bg-body-light .breadcrumb-item {
    color: #5a6a7a;
    font-weight: 500;
}
#main-content > .bg-body-light .breadcrumb-item a {
    color: #05294d;
    text-decoration: none;
    font-weight: 600;
}
#main-content > .bg-body-light .breadcrumb-item a:hover { color: #0a3866; text-decoration: underline; }
#main-content > .bg-body-light .breadcrumb-item.active { color: #19202a; font-weight: 600; }
#main-content > .bg-body-light .breadcrumb-item + .breadcrumb-item::before {
    color: #c4ccd6;
}

/* Page content wrapper — give .content the same shell width */
#page-content > .content {
    max-width: 1220px;
    margin: 0 auto;
    padding: 12px clamp(16px, 4vw, 40px) 24px;
}

/* OneUI .block default — apply codex card look everywhere */
.block {
    background: #ffffff;
    border: 1px solid #d9dee7;
    border-radius: 8px;
    box-shadow: none;
}
.block-header.block-header-default {
    background: transparent;
    border-bottom: 1px solid #e8ecf2;
    padding: 14px 20px;
}
.block-header.block-header-default .block-title {
    color: #05294d;
    font-weight: 600;
    font-size: 0.98rem;
    letter-spacing: 0.01em;
}
.block-content { padding: 18px 20px; }
.block-content.p-0 { padding: 0 !important; }

/* Nav tabs (concept page tabs) — codex flavor */
.nav-tabs {
    border-bottom: 1px solid #d9dee7;
    gap: 4px;
}
.nav-tabs .nav-link {
    color: #5a6a7a;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 10px 18px;
    font-weight: 600;
    font-size: 0.92rem;
    margin-bottom: -1px;
}
.nav-tabs .nav-link:hover { color: #05294d; background: rgba(5, 41, 77, 0.04); border-bottom-color: transparent; }
.nav-tabs .nav-link.active {
    color: #05294d;
    background: #ffffff;
    border-bottom: 2px solid #0f6b7a;
}

/* Tab content area below nav-tabs — give it a card look */
.tab-content {
    background: #ffffff;
    border: 1px solid #d9dee7;
    border-top: 0;
    border-radius: 0 0 8px 8px;
    padding: 20px;
}

/* Bootstrap buttons — remap to codex */
.btn-primary {
    background: #05294d;
    border: 1px solid #05294d;
    color: #fff;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: 6px;
    font-size: 0.92rem;
}
.btn-primary:hover, .btn-primary:focus { background: #0a3866; border-color: #0a3866; color: #fff; box-shadow: none; }
.btn-primary.btn-sm { padding: 6px 14px; font-size: 0.85rem; }

.btn-secondary, .btn-alt-secondary {
    background: #ffffff;
    border: 1px solid #d9dee7;
    color: #05294d;
    font-weight: 600;
    padding: 7px 16px;
    border-radius: 6px;
    font-size: 0.9rem;
}
.btn-secondary:hover, .btn-alt-secondary:hover { background: #f6f7f9; border-color: #c4ccd6; color: #05294d; }
.btn-secondary.btn-sm, .btn-alt-secondary.btn-sm { padding: 5px 12px; font-size: 0.82rem; }

.btn-danger {
    background: #c0392b;
    border: 1px solid #c0392b;
    color: #fff;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: 6px;
    font-size: 0.92rem;
}
.btn-danger:hover { background: #a02818; border-color: #a02818; color: #fff; }
.btn-alt-danger {
    background: #ffffff;
    border: 1px solid #f0c8c8;
    color: #c0392b;
    font-weight: 600;
    padding: 7px 16px;
    border-radius: 6px;
    font-size: 0.9rem;
}
.btn-alt-danger:hover { background: #fdecec; border-color: #e0a8a8; color: #a02818; }
.btn-alt-danger.btn-sm { padding: 5px 12px; font-size: 0.82rem; }

/* Native form controls — codex even without ap-form wrapper */
.form-control, .form-select {
    border: 1px solid #d9dee7;
    border-radius: 6px;
    background-color: #ffffff;
    color: #19202a;
    padding: 9px 12px;
    font-size: 0.92rem;
    transition: border-color 0.12s, box-shadow 0.12s;
}
.form-select {
    /* Restore native-style chevron arrow that the bg-color override clobbered */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2305294d'%3E%3Cpath d='M3.204 5h9.592L8 10.481zm-.753.659l4.796 5.48a1 1 0 0 0 1.506 0l4.796-5.48c.566-.647.106-1.659-.753-1.659H3.204a1 1 0 0 0-.753 1.659z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 12px;
    padding-right: 36px;
    appearance: none;
}
.form-control:focus, .form-select:focus {
    border-color: #0f6b7a;
    box-shadow: 0 0 0 3px rgba(15, 107, 122, 0.12);
    outline: none;
}
.form-control::placeholder { color: #aab3bf; }
.form-label { font-weight: 600; color: #05294d; font-size: 0.82rem; margin-bottom: 6px; }

/* Bootstrap headings on concept pages */
#page-content h4.fw-semibold { color: #05294d; font-size: 1.15rem; font-weight: 700; }

/* Alerts — slightly more refined */
.alert {
    border-radius: 8px;
    border: 1px solid;
    font-size: 0.9rem;
    padding: 12px 16px;
}
.alert-success  { background: #ecf8f0; border-color: #b8e2c7; color: #1d6c3a; }
.alert-warning  { background: #fdf6e3; border-color: #f0d990; color: #8a5a08; }
.alert-danger   { background: #fdecec; border-color: #f0c8c8; color: #a02818; }
.alert-info     { background: #eaf2fb; border-color: #b8d4ee; color: #1a4878; }

/* Settings/Error pages basics */
#page-content table.table { color: #19202a; }
#page-content table.table th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: #5a6a7a; font-weight: 600; background: #f6f7f9; border-bottom: 1px solid #d9dee7; }

/* AI portion live-total display */
.ai-portion-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: #f6f7f9;
    border: 1px solid #d9dee7;
    border-radius: 6px;
    font-size: 0.92rem;
    color: #19202a;
    margin-top: .5rem;
}
.ai-portion-total-label { color: #5a6a7a; font-weight: 500; }
.ai-portion-total-value { font-weight: 700; color: #1d6c3a; font-variant-numeric: tabular-nums; }
.ai-portion-total.is-invalid {
    background: #fdecec;
    border-color: #f0c8c8;
}
.ai-portion-total.is-invalid .ai-portion-total-value { color: #a02818; }
.form-control.is-invalid { border-color: #e6a8a8; box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.10); background-image: none; padding-right: 12px; }
.form-control.is-invalid:focus { border-color: #c0392b; box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.18); }
.invalid-feedback {
    display: none;
    margin-top: 4px;
    font-size: 0.78rem;
    color: #a02818;
}
.form-control.is-invalid ~ .invalid-feedback,
.input-group:has(.form-control.is-invalid) ~ .invalid-feedback,
.col-sm-3:has(.form-control.is-invalid) .invalid-feedback,
.col-sm-6:has(.form-control.is-invalid) .invalid-feedback,
.col-12:has(.form-control.is-invalid) .invalid-feedback { display: block; }
.input-group:has(.form-control.is-invalid) { border-radius: 6px; }

/* ===== Fixed action bar ===== */
.ap-action-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid var(--ac-border);
    z-index: 1030;
    padding: 0.5rem 1rem;
}
.ap-action-bar-inner {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* ===== Wizard tab nav (stepper style) ===== */
#TabMenu {
    border-bottom: 2px solid var(--ac-border);
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: nowrap;
    overflow-x: auto;
}
#TabMenu .nav-item { flex: 1 1 0; }
#TabMenu .nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    padding: 0.6rem 0.5rem;
    font-size: 0.8rem;
    white-space: nowrap;
    text-align: center;
    width: 100%;
}
#TabMenu .nav-link .fas {
    font-size: 1rem;
    margin-bottom: 0.25rem;
}
#TabMenu .nav-link.active {
    color: var(--ac-primary);
    border-bottom-color: var(--ac-primary);
    font-weight: 600;
    background: transparent;
}
#TabMenu .nav-link:hover:not(.active) {
    color: var(--ac-primary-dark);
    background: var(--ac-accent);
    border-bottom-color: transparent;
}

/* sub-menubar-3/4/8 — adjusts tab item widths based on count (set by server) */
.sub-menubar-3 .nav-item { min-width: 180px; }
.sub-menubar-4 .nav-item { min-width: 140px; }
.sub-menubar-8 .nav-item { min-width: 100px; }
.sub-menubar-8 .nav-link { font-size: 80%; }

/* ===== Tables ===== */
th, .table-header {
    padding: 5px;
    background-color: var(--ac-primary);
    color: white;
    border: 1px solid white;
}
.table-header { text-align: center; }
.table thead.table-light th { font-size: small; }
.concepttable { border-collapse: initial; }

/* Report-page table header override */
#UserReportTable th {
    background-color: var(--ac-primary);
    background-image: none;
    color: white;
    font-weight: bold;
}

/* ===== Form controls ===== */
label { text-align: left; }
fieldset { margin-top: 15px; margin-bottom: 15px; }
h1, h2, h3, h4, h5, h6 { text-align: left; }
.form-control { border-radius: 0 !important; }
.input-group-text { border-radius: 0; }

/* ===== Scrollable containers ===== */
.select-container {
    max-height: calc((100vh - 140px) * .40);
    overflow-y: auto;
    border: 1px solid #e5e5e5;
    margin-bottom: 15px;
    line-height: normal;
    padding: 10px;
}
.table-container {
    max-height: calc((100vh - 140px) * .66);
    overflow-y: auto;
    border: 1px solid #e5e5e5;
    margin-bottom: 15px;
    padding: 10px;
}
#scrollableTable {
    max-height: calc((100vh - 140px - 15rem));
    overflow-y: auto;
}

/* ===== List group overrides ===== */
.list-group-item {
    position: relative;
    display: flex;
    padding: .15rem 0;
    margin-bottom: -1px;
    background-color: #fff;
    border: none;
    margin: 0;
}
.list-group-item.active {
    background-color: #bfbfbf;
    border-color: #bfbfbf;
}
div.list-group-item.active .action-button { color: white; }

/* ===== Tab pane helpers ===== */
.tab-pane-wide {
    margin-left: -100px;
    margin-right: -100px;
}
.tab-pane-table-container { overflow-x: auto; }
.tab-pane-table { margin-bottom: 2px; }
.tab-pane-table thead th { min-width: 145px; }
.tab-pane-table thead th.th-wide { min-width: 300px; }
.tab-pane-table thead th.th-empty { min-width: 1px; }

/* ===== Misc utility ===== */
.cursor-pointer { cursor: pointer; }
.custom-number { min-width: 100px; text-align: right; }
.no-pad { padding: .15rem 0; line-height: normal; }
.btn-add-row { margin-top: 7px; }
.concept-descr { padding: 10px; text-align: left; font-size: 90%; }
.tableconcept { border-collapse: initial; }
.smallprint { font-size: 0.82rem; color: #6c757d; }
.tinyprint { font-size: 0.78rem; color: #6c757d; }

/* ===== Report page ===== */
#ReportName {
    color: var(--ac-primary);
    display: inline-block;
    font-size: 2.75rem;
    width: 60%;
    line-height: 2.5rem;
    text-align: right;
    vertical-align: middle;
}
#EmpireLogo {
    display: inline-block;
    width: 39%;
}