/*
  Copyright (c) 2026 Blue Astra Technologies LLP, India. All Rights Reserved.
  Proprietary software. Unauthorized copying or use by any means or technology
  (including AI tools) is strictly prohibited.
*/
/* ============================================================
   FEATURES DESIGN SYSTEM  —  post-login application layer.

   Ports the bloocrm.com Features page (outer-layer/Features.html)
   onto the CRM shell so the product and the marketing site read as
   one design: same type stack, same navy/blue palette, same
   geometry (10px buttons, 16px cards, 30px pills), same elevation,
   and the same signature patterns (eyebrow pills, .hl accent
   headings, tick lists, dark bands, gradient CTA).

   Loaded LAST. Tokens live in themes.css.
   ============================================================ */

/* =====================================================
   1. TYPOGRAPHY  —  Features uses the Segoe UI stack at 1.7
   ===================================================== */
html, body,
.dashboard-container, .sidebar, .main-content,
.btn, input, select, textarea, button, table {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    line-height: 1.7;
    color: var(--f-text);
    -webkit-font-smoothing: antialiased;
}

.dashboard-container h1, .dashboard-container h2,
.dashboard-container h3, .dashboard-container h4,
.dashboard-container h5, .dashboard-container h6 {
    color: var(--f-navy);
    letter-spacing: -.5px;
    line-height: 1.15;
}

/* The blue accent word inside a navy heading — Features' <span class="hl"> */
.dashboard-container .hl { color: var(--f-blue); }

/* Body copy inside views */
.view p, .view li, .view td { color: var(--f-text); }

/* =====================================================
   2. APP SHELL
   ===================================================== */
.dashboard-container { background: var(--f-page); }

/* ---- Sidebar: white plane, hairline rule, no heavy shadow ---- */
.sidebar {
    width: 272px;
    background: #ffffff !important;
    border-right: 1px solid var(--f-line) !important;
    box-shadow: none;
}

.sidebar-header {
    padding: 20px 22px;
    border-bottom: 1px solid var(--f-line);
}
/* Wordmark matches the Features header logo: navy with a blue "CRM" */
.sidebar-header h2 {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.5px;
    color: var(--f-navy) !important;
}

/* ---- Nav: soft blue pill, blue inset accent (Features nav language) ---- */
.sidebar-nav { padding: 12px 12px; display: flex; flex-direction: column; gap: 2px; }

.nav-item {
    border-radius: var(--f-r-btn);
    padding: 11px 14px;
    gap: 13px;
    border-left: none !important;
    font-weight: 600;
    color: var(--f-navy);
}
.nav-item span { color: var(--f-navy) !important; flex: 1; font-weight: 600; }
.nav-item i { font-size: 1.05rem; width: 1.4rem; color: var(--f-blue) !important; }

.nav-item:hover { background: var(--f-soft) !important; transform: translateX(2px); }
.nav-item.active {
    background: var(--f-soft) !important;
    box-shadow: inset 3px 0 0 var(--f-blue) !important;
    font-weight: 700;
}
.nav-item.active span { color: var(--f-blue-dark) !important; font-weight: 700; }
/* body[data-theme] prefix needed to outrank `body[data-theme] .nav-item i`
   in themes.css, which would otherwise keep the active icon at plain blue. */
body[data-theme] .nav-item.active i { color: var(--f-blue-dark) !important; }

.sidebar-footer { padding: 16px 18px; border-top: 1px solid var(--f-line); }

/* ---- Top header: the Features sticky bar, translucent + hairline ---- */
.top-header {
    background: rgba(255,255,255,.92) !important;
    backdrop-filter: saturate(180%) blur(8px);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    border-bottom: none !important;
    box-shadow: 0 1px 0 rgba(16,35,58,.08) !important;
    padding: 16px 28px;
}

/* Features never uses gradient-filled text — headings are solid navy */
.header-left h1,
#pageTitle {
    background: none !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: currentColor !important;
    background-clip: initial !important;
    color: var(--f-navy) !important;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.5px;
}

.profile-avatar { border: 2px solid var(--f-soft); }

.views-container { padding: 28px 32px 48px; }

/* =====================================================
   3. BUTTONS  —  Features .btn / .btn-ghost
   ===================================================== */
.btn, .btn-primary, .btn-secondary, .btn-small, .btn-sm {
    border-radius: var(--f-r-btn);
    font-weight: 700;
    letter-spacing: 0;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: .2s;
}
.btn { padding: 12px 26px; font-size: 15px; }
.btn-sm, .btn-small { padding: 8px 16px; border-radius: 9px; font-size: 13px; }

.btn-primary {
    background: var(--f-blue) !important;
    color: #fff !important;
    box-shadow: var(--f-sh-btn);
}
.btn-primary:hover {
    background: var(--f-blue-dark) !important;
    transform: translateY(-1px);
    box-shadow: var(--f-sh-btn-hover);
    filter: none;
}
.btn-primary:active { transform: translateY(0); }

/* Features' ghost button: transparent, 2px blue rule */
.btn-secondary, .btn-outline, .btn-ghost {
    background: transparent !important;
    color: var(--f-blue) !important;
    border: 2px solid var(--f-blue) !important;
    box-shadow: none !important;
}
.btn-secondary:hover, .btn-outline:hover, .btn-ghost:hover {
    background: var(--f-soft) !important;
    color: var(--f-blue-dark) !important;
    border-color: var(--f-blue) !important;
    transform: translateY(-1px);
}

.btn:disabled { opacity: .55; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* =====================================================
   4. CARDS & PANELS  —  16px, the soft Features shadow
   ===================================================== */
.stat-card, .chart-container, .client-card, .client-box,
.info-card, .card, .pricing-card, .lead-card {
    background: #fff;
    border-radius: var(--f-r-card);
    border: 1px solid #eef2f7;
    box-shadow: var(--f-sh-card);
}
.stat-card:hover, .client-card:hover, .client-box:hover,
.card:hover, .lead-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--f-sh-card-hover);
}
.chart-container { padding: 26px 28px 22px; }

/* Grid children default to min-width:auto, and a bare <canvas> reports a
   300px intrinsic width — together that pushed multi-column chart rows
   (e.g. the vendor Q1-Q4 strip) past the viewport. Features never scrolls
   horizontally, so let these shrink and keep canvases fluid. */
.chart-container { min-width: 0; }
.chart-container canvas { max-width: 100%; }
/* Panel titles — Features sizes its capability-tile headings at 17-18px.
   Compact panels that carry their own inline font-size keep it. */
.chart-container > h3, .chart-container > h4 {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 16px;
}

/* Stat cards */
.stat-card { padding: 24px 26px; gap: 20px; }
.stat-icon {
    width: 58px; height: 58px;
    border-radius: 15px;
    box-shadow: 0 6px 16px rgba(46,134,255,.22);
    font-size: 1.5rem;
}
.stat-content h3 { font-size: 28px; font-weight: 800; color: var(--f-navy) !important; margin-bottom: 2px; }
.stat-content p { color: var(--f-muted); font-size: 14px; font-weight: 600; }

.dashboard-grid { gap: 22px; }

/* Activity rows */
.activity-item {
    border-radius: 12px;
    padding: 12px 14px;
    background: #fff;
    border-left: 4px solid var(--f-blue);
}
.activity-item:hover { background: var(--f-soft); }

/* =====================================================
   5. FORMS  —  10px fields, blue focus ring
   ===================================================== */
input, select, textarea,
.form-group input, .form-group select, .form-group textarea {
    border-radius: var(--f-r-btn);
    border: 1px solid #dfe6f1;
    padding: 11px 13px;
    font-size: 15px;
    color: var(--f-navy);
}
input:focus, select:focus, textarea:focus,
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    outline: none;
    border-color: var(--f-blue) !important;
    box-shadow: 0 0 0 3px var(--f-soft) !important;
    background: #fff;
}
.form-group label { color: var(--f-navy); font-weight: 600; font-size: 14px; }
::placeholder { color: #a9b2c1; }

/* =====================================================
   6. BADGES / PILLS  —  Features trust-pill shape
   ===================================================== */
.client-badge, .badge-blue, .badge-aqua, .badge-orange, .badge {
    border-radius: var(--f-r-pill);
    font-weight: 700;
    letter-spacing: .3px;
    padding: 5px 14px;
    font-size: 12.5px;
}

/* =====================================================
   7. MODALS  —  20px, gradient header like the Features CTA
   ===================================================== */
.modal-content {
    border-radius: var(--f-r-modal);
    box-shadow: 0 30px 60px rgba(22,35,58,.28);
    border: none;
}
.modal-header {
    background: linear-gradient(135deg, var(--f-blue), #5aa2ff) !important;
    border-radius: var(--f-r-modal) var(--f-r-modal) 0 0;
    padding: 20px 26px;
}
.modal-header h2, .modal-header h2 i { color: #fff !important; letter-spacing: -.3px; }
.modal-actions { border-top: 1px solid var(--f-line); padding-top: 20px; gap: 12px; }

/* =====================================================
   8. TABLES
   ===================================================== */
.data-table, table.data-table { border-radius: var(--f-r-card); overflow: hidden; }
.data-table thead, table thead { background: var(--f-soft); }
.data-table thead th, table thead th {
    color: var(--f-navy);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .3px;
    text-transform: uppercase;
    padding: 13px 16px;
}
.data-table tbody tr { border-bottom: 1px solid #f0f4fa; }
.data-table tbody tr:hover { background: #f9fbff; }

/* =====================================================
   9. FEATURES SIGNATURE PATTERNS
   Reusable in any view — mirrors Features.html markup.
   ===================================================== */

/* --- Eyebrow pill: uppercase blue label above a section title --- */
.eyebrow, .f-eyebrow {
    display: inline-block;
    background: var(--f-soft);
    color: var(--f-blue);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: var(--f-r-pill);
    margin-bottom: 10px;
    line-height: 1.4;
}

/* --- Section head: centered eyebrow + navy title + grey lede --- */
.f-section-head { text-align: center; max-width: 760px; margin: 0 auto 32px; }
.f-section-head h2 { font-size: 32px; color: var(--f-navy); letter-spacing: -.5px; margin: 8px 0 10px; }
.f-section-head p  { font-size: 17px; color: var(--f-text); }

/* --- View header: left-aligned eyebrow + navy title --- */
.view-header { margin-bottom: 22px; align-items: flex-end; }
.view-header h2, .view-header h3 {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -.5px;
    color: var(--f-navy) !important;
    line-height: 1.15;
}
.view-header .f-eyebrow { margin-bottom: 6px; }
.view-header .view-lede { color: var(--f-text); font-size: 16px; margin-top: 6px; max-width: 640px; }

/* Title block inside a view header: eyebrow stacked over the navy heading,
   actions stay on the right (the view-header is already space-between). */
.vh-title { display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-width: 0; }
.vh-title h2, .vh-title h3 { margin: 0; }
.vh-title h2 i, .vh-title h3 i { margin-right: 8px; }

/* --- Tick list: the ✓-in-a-soft-circle bullet --- */
.checks, .f-checks { list-style: none; margin: 0; padding: 0; }
.checks li, .f-checks li {
    position: relative;
    padding: 8px 0 8px 34px;
    color: var(--f-navy);
    font-weight: 600;
}
.checks li::before, .f-checks li::before {
    content: "✓";
    position: absolute;
    left: 0; top: 9px;
    width: 22px; height: 22px;
    background: var(--f-soft);
    color: var(--f-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
}

/* --- Dark band: the navy full-bleed section --- */
.f-band {
    background: var(--f-band);
    color: var(--f-band-text);
    border-radius: var(--f-r-modal);
    padding: 44px 40px;
    margin: 8px 0 28px;
}
/* These dark-surface patterns sit inside a .view, so their headings also match
   `body[data-theme] .view h3` (navy, !important) in themes.css. Without the
   body[data-theme] prefix the text would render navy-on-navy — invisible. */
body[data-theme] .f-band h2,
body[data-theme] .f-band h3 { color: #fff !important; }
body[data-theme] .f-band p { color: var(--f-band-dim) !important; }
.f-band .f-eyebrow { background: rgba(46,134,255,.18); color: #8dbcff; }
.f-band-card {
    background: var(--f-band-card);
    border: 1px solid var(--f-band-border);
    border-radius: var(--f-r-media);
    overflow: hidden;
    padding: 22px;
}
body[data-theme] .f-band-card h3 { color: #fff !important; font-size: 20px; margin-bottom: 8px; }
body[data-theme] .f-band-card p { color: #b9c6dd !important; font-size: 15px; }

/* --- CTA block: the blue gradient closer --- */
.f-cta {
    background: linear-gradient(135deg, var(--f-blue), #5aa2ff);
    color: #fff;
    text-align: center;
    padding: 44px 32px;
    border-radius: var(--f-r-modal);
    margin-top: 8px;
}
body[data-theme] .f-cta h2 { color: #fff !important; font-size: 30px; margin-bottom: 10px; letter-spacing: -.5px; }
body[data-theme] .f-cta p  { color: rgba(255,255,255,.95) !important; font-size: 17px; max-width: 620px; margin: 0 auto 20px; }
/* Inverted button on the gradient — must outrank `body[data-theme] .btn-primary`. */
body[data-theme] .f-cta .btn,
body[data-theme] .f-cta .btn-primary {
    background: #fff !important;
    color: var(--f-blue) !important;
    box-shadow: 0 6px 18px rgba(10,40,90,.18);
}
body[data-theme] .f-cta .btn:hover,
body[data-theme] .f-cta .btn-primary:hover { background: #eaf2ff !important; color: var(--f-blue-dark) !important; }

/* Eyebrow sitting on a dark or gradient surface (pricing hero, CTA, band) */
.pricing-hero .f-eyebrow,
.f-cta .f-eyebrow {
    background: rgba(255,255,255,.18);
    color: #fff;
    backdrop-filter: blur(2px);
}

/* --- Trust pills row --- */
/* align-items:flex-start stops the pills stretching to the row height */
.f-pills { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; }
.f-pills span {
    background: var(--f-soft);
    color: var(--f-navy);
    font-weight: 700;
    padding: 9px 17px;
    border-radius: var(--f-r-pill);
    font-size: 14px;
}

/* --- Media frame: the Features screenshot treatment --- */
.f-media, .f-media img, .f-media video {
    width: 100%;
    border-radius: var(--f-r-media);
    box-shadow: var(--f-sh-media);
    display: block;
}

/* --- Capability grid: the 8-tile "everything in one platform" block --- */
.f-cap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.f-cap {
    background: #fff;
    border-radius: var(--f-r-card);
    padding: 26px;
    box-shadow: var(--f-sh-card);
    border: 1px solid #eef2f7;
}
.f-cap .ic { font-size: 28px; line-height: 1; }
.f-cap h3 { color: var(--f-navy); font-size: 17px; margin: 12px 0 7px; }
.f-cap p  { font-size: 14.5px; color: var(--f-text); }

/* =====================================================
   10. SECTION CONTAINERS  —  Features geometry on the
   bespoke panels that aren't generic cards.
   ===================================================== */

/* Pricing hero = the Features CTA block */
.pricing-hero {
    border-radius: var(--f-r-modal) !important;
    padding: 48px 32px !important;
    box-shadow: 0 20px 45px rgba(46,134,255,.22) !important;
}
.pricing-hero h2 { font-size: 34px; font-weight: 800; letter-spacing: -.5px; }
.pricing-hero p  { font-size: 17px; }

/* On the gradient hero, Features inverts the button: white fill, blue label.
   Needs the `body[data-theme]` prefix to outrank the same-!important
   `body[data-theme] .toggle-btn.active` fill in themes.css, which would
   otherwise paint blue-on-blue. */
body[data-theme] .pricing-hero .toggle-btn {
    background: transparent !important;
    color: #fff !important;
    border: 2px solid rgba(255,255,255,.55) !important;
}
body[data-theme] .pricing-hero .toggle-btn.active {
    background: #fff !important;
    color: var(--f-blue) !important;
    border-color: #fff !important;
}

/* Workflow header + upload panels adopt the Features card shape */
.workflow-header,
.upload-section,
.upload-container > .upload-section {
    border-radius: var(--f-r-card);
    border: 1px solid #eef2f7;
    box-shadow: var(--f-sh-card);
}
/* This heading was display:flex with a 1rem gap, which turned the inline
   .hl accent into a flex item and opened a stray gap mid-sentence.
   Block flow keeps the icon inline and the accent tight to the text. */
.upload-section h2 {
    display: block;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.5px;
}
.upload-section h2 > i { margin-right: 10px; }
.upload-section .section-subtitle { color: var(--f-text); font-size: 16px; }
.instruction-card { border-radius: var(--f-r-card); }

/* Pricing cards inherit the Features card language */
.pricing-card { border-radius: var(--f-r-card); }
.pricing-card:hover { transform: translateY(-6px); box-shadow: var(--f-sh-card-hover); }
.price { font-weight: 800; letter-spacing: -1px; }

/* =====================================================
   11. SCROLLBARS & MISC
   ===================================================== */
.main-content ::-webkit-scrollbar, .sidebar ::-webkit-scrollbar { width: 9px; height: 9px; }
.main-content ::-webkit-scrollbar-thumb, .sidebar ::-webkit-scrollbar-thumb { background: #d7dfea; border-radius: 8px; }
.main-content ::-webkit-scrollbar-thumb:hover { background: #c2cddb; }

/* Anything still painting the retired red/orange inline keeps to the palette */
.dashboard-container [style*="color:#E74C3C"],
.dashboard-container [style*="color:#e74c3c"],
.dashboard-container [style*="color: #e74c3c"],
.dashboard-container [style*="color:#FB8C00"],
.dashboard-container [style*="color:#fb8c00"] { color: var(--f-blue) !important; }

/* =====================================================
   12. RESPONSIVE
   ===================================================== */
@media (max-width: 1024px) {
    .views-container { padding: 22px 20px 40px; }
    .view-header h2, .view-header h3 { font-size: 24px; }
    .f-band { padding: 32px 24px; }
}
@media (max-width: 768px) {
    .btn { padding: 10px 20px; font-size: 14px; }
    .header-left h1, #pageTitle { font-size: 22px; }
    .f-section-head h2 { font-size: 26px; }
    .f-cta h2 { font-size: 24px; }
}

/* ============================================================
   ASSET MANAGEMENT — balance sheet, allocation bars, ratios.
   Uses the Features tokens so it matches the rest of the app.
   ============================================================ */
.am-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.am-table th {
    text-align: left; font-size: .72rem; letter-spacing: .6px; text-transform: uppercase;
    color: #8a93a3; font-weight: 800; padding: 10px 12px; border-bottom: 1px solid var(--f-line, #eef2f7);
    white-space: nowrap;
}
.am-table td { padding: 11px 12px; border-bottom: 1px solid #f4f7fb; color: var(--f-text, #4a5568); vertical-align: top; }
.am-table tbody tr:last-child td { border-bottom: none; }
.am-table tbody tr:hover { background: var(--f-soft, #eef4ff); }
.am-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.am-table b { color: var(--f-navy, #16233a); }

.pos { color: #1b7a43; }
.neg { color: #b3261e; }
.am-muted { color: #8a93a3; }

/* Two-column panels that stack on narrow screens */
.am-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 900px) { .am-two-col { grid-template-columns: 1fr; } }

/* Net-worth header band */
.am-networth {
    display: flex; justify-content: space-between; align-items: flex-end; gap: 20px;
    flex-wrap: wrap; margin-bottom: 16px;
}
.am-nw-figure { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.am-nw-figure strong { font-size: 2rem; line-height: 1.1; letter-spacing: -.5px; }
.am-nw-figure .am-muted { font-size: .8rem; }

/* Allocation bars */
.am-alloc-row { display: grid; grid-template-columns: 150px 1fr auto; gap: 12px; align-items: center; padding: 7px 0; }
.am-alloc-label { font-size: .85rem; font-weight: 600; color: var(--f-navy, #16233a); }
.am-alloc-track { height: 8px; border-radius: 8px; background: #eef2f7; overflow: hidden; }
.am-alloc-fill { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--f-blue, #2E86FF), #5aa2ff); }
.am-alloc-val { font-size: .82rem; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--f-navy, #16233a); font-weight: 700; }
@media (max-width: 700px) { .am-alloc-row { grid-template-columns: 110px 1fr; } .am-alloc-val { grid-column: 1 / -1; text-align: right; } }

/* Ratio tiles */
.am-ratio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.am-ratio {
    display: flex; flex-direction: column; gap: 2px; padding: 14px;
    background: #fbfdff; border: 1px solid var(--f-line, #eef2f7); border-radius: 12px;
}
.am-ratio strong { font-size: 1.15rem; color: var(--f-navy, #16233a); letter-spacing: -.3px; }
.am-ratio .am-muted:first-child { font-size: .75rem; text-transform: uppercase; letter-spacing: .5px; font-weight: 700; }