/* =========================================================
   Provision ERP — Roundz-inspired design system
   ========================================================= */

:root {
    /* Brand — bright blue primary (Midwest palette) */
    --brand: #1F6FEB;
    --brand-soft: #1857BD;
    --brand-tint: #E6EFFD;
    --brand-tint-2: #D5E2FB;
    --accent: #2563EB;
    /* Surfaces — light blue body, white sidebar/cards, soft tinted bands */
    --bg-body: #EEF1FB;
    --bg-surface: #FFFFFF;
    --bg-tint: #F3F5FA; /* used as filled form-field bg */
    --bg-soft: #EEF3FB; /* used as section-header band */
    /* Text */
    --text-primary: #0F172A;
    --text-secondary: #4B5563;
    --text-muted: #8A93A6;
    --text-disabled: #BCC3D1;
    --text-inverse: #FFFFFF;
    /* Borders */
    --border: #E4E8F0;
    --border-soft: #EEF1F6;
    /* Status (semantic) */
    --success: #16A34A;
    --success-bg: #E1F5E8;
    --success-text: #15803D;
    --warning: #F97316;
    --warning-bg: #FFF1E1;
    --warning-text: #C2410C;
    --info: #3B82F6;
    --info-bg: #E0EBFF;
    --info-text: #1E40AF;
    --danger: #EF4444;
    --danger-bg: #FEE2E2;
    --danger-text: #B91C1C;
    --neutral-bg: #F1F2F6;
    --neutral-text: #5B6178;
    /* Icon-tile palette (KPI cards / chips) */
    --tile-lavender-bg: #EEF0FF;
    --tile-lavender-fg: #5B6AC7;
    --tile-peach-bg: #FFF1E1;
    --tile-peach-fg: #F97316;
    --tile-mint-bg: #E1F5E8;
    --tile-mint-fg: #16A34A;
    --tile-rose-bg: #FFE4EC;
    --tile-rose-fg: #DB2777;
    --tile-sky-bg: #DDEEFF;
    --tile-sky-fg: #2563EB;
    /* Effects */
    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-pill: 999px;
    --shadow-xs: 0 1px 2px rgba(15, 18, 53, .04);
    --shadow-sm: 0 1px 3px rgba(15, 18, 53, .06);
    --shadow: 0 4px 18px rgba(15, 18, 53, .06);
    --shadow-lg: 0 12px 40px rgba(15, 18, 53, .10);
    /* Layout */
    --sidebar-w: 264px;
    --topbar-h: 72px;
    --footer-h: 56px;
}

/* ========== Reset / base ========== */
*, *::before, *::after {
    box-sizing: border-box;
}

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

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-primary);
    background: var(--bg-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

h1 {
    font-size: 26px;
}

h2 {
    font-size: 22px;
}

h3 {
    font-size: 18px;
}

h4 {
    font-size: 16px;
}

h5 {
    font-size: 15px;
}

p {
    margin: 0;
}

a {
    color: var(--accent);
    text-decoration: none;
}

    a:hover {
        text-decoration: underline;
    }

/* ========== Layout shell ========== */
.app-layout {
    display: grid;
    /*    grid-template-columns: var(--sidebar-w) 1fr;*/
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    min-height: 100vh;
    background: var(--bg-body);
}
/*.main-area {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}*/

.main-area {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-width: 0;
    overflow-x: hidden;
}

/* ========== Sidebar ========== */
.sidebar {
    background: var(--bg-surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    padding: 22px 18px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    transition: width 200ms ease;
}

    .sidebar.is-collapsed {
        width: 72px;
        padding: 18px 8px;
    }

.app-layout:has(.sidebar.is-collapsed) {
    grid-template-columns: 72px 1fr;
}

.sidebar.is-collapsed .nav-label,
.sidebar.is-collapsed .logo-text,
.sidebar.is-collapsed .sidebar-section-caret {
    display: none;
}

.sidebar.is-collapsed .sidebar-nav-item,
.sidebar.is-collapsed .sidebar-section-toggle {
    justify-content: center;
    padding: 11px 6px;
}

    .sidebar.is-collapsed .sidebar-nav-item.sub {
        display: none;
    }

.sidebar.is-collapsed .sidebar-section-body {
    display: none;
}

.sidebar.is-collapsed .sidebar-logo {
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.sidebar.is-collapsed .logo-icon {
    margin: 0;
}

.sidebar-logo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 6px 22px;
    margin-bottom: 14px;
}

.sidebar-logo-left {
    display: flex;
    align-items: center;
}

.logo-icon {
    display: none;
}

.logo-text {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: 0.04em;
}

.sidebar-logo-img {
    max-height: 44px;
    max-width: 160px;
    object-fit: contain;
    border-radius: 6px;
}

.sidebar.is-collapsed .sidebar-logo-img {
    max-width: 36px;
    max-height: 36px;
}

.logo-sub {
    display: none;
}

.sidebar-collapse {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--text-secondary);
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 20px;
    line-height: 1;
    transition: background 120ms ease, color 120ms ease, transform 120ms ease;
}

    .sidebar-collapse:hover {
        background: var(--brand-tint);
        color: var(--brand);
        transform: scale(1.05);
    }

.sidebar-section {
    margin-bottom: 4px;
}

.sidebar-section-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 16px 14px 8px;
}

.sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    margin: 2px 0;
    border-radius: 8px;
    color: var(--text-primary);
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    transition: background 120ms ease, color 120ms ease;
    cursor: pointer;
}

    .sidebar-nav-item:hover {
        background: var(--bg-soft);
        text-decoration: none;
    }

    .sidebar-nav-item.active {
        background: var(--brand-tint);
        color: var(--text-primary);
        font-weight: 600;
    }

    .sidebar-nav-item .nav-icon {
        width: 26px;
        text-align: center;
        font-size: 20px;
        line-height: 1;
        color: var(--text-secondary);
        flex: 0 0 auto;
    }

.sidebar-section-toggle .nav-icon {
    width: 26px;
    text-align: center;
    font-size: 20px;
    line-height: 1;
    color: var(--text-secondary);
    flex: 0 0 auto;
}

.sidebar-nav-item.active .nav-icon {
    color: var(--accent);
}

/* Collapsible group toggle (works like a nav row) */
.sidebar-section-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 14px;
    margin: 2px 0;
    border-radius: 8px;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    text-align: left;
    transition: background 120ms ease;
}

    .sidebar-section-toggle:hover {
        background: var(--bg-soft);
    }

    .sidebar-section-toggle.open {
        color: var(--text-primary);
        font-weight: 600;
    }

    .sidebar-section-toggle .nav-label {
        flex: 1 1 auto;
    }

.sidebar-section-caret {
    color: var(--text-muted);
    font-size: 10px;
    transition: transform 150ms ease;
    flex: 0 0 auto;
}

.sidebar-section-toggle.open .sidebar-section-caret {
    color: var(--brand);
}

/* Sub-links (children of an open group) */
.sidebar-section-body {
    margin-left: 8px;
    padding-left: 12px;
    border-left: 2px solid var(--border-soft);
    animation: nav-section-slide 150ms ease-out;
}

@keyframes nav-section-slide {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sidebar-nav-item.sub {
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 500;
}

    .sidebar-nav-item.sub .nav-icon {
        font-size: 17px;
        width: 24px;
    }

/* When the sidebar is collapsed, hovering a group reveals its children as a
   floating panel to the right. Pure CSS — no JS needed. */
.sidebar.is-collapsed .sidebar-section-toggle {
    position: relative;
}

    .sidebar.is-collapsed .sidebar-section-toggle:hover + .sidebar-section-body.is-flyout,
    .sidebar.is-collapsed .sidebar-section-body.is-flyout:hover {
        display: block;
        position: absolute;
        left: 70px;
        margin: 0;
        padding: 8px 0;
        background: var(--bg-surface);
        border: 1px solid var(--border);
        border-radius: 10px;
        box-shadow: 0 12px 32px rgba(0,0,0,0.10);
        min-width: 220px;
        z-index: 200;
    }

.sidebar.is-collapsed .sidebar-section-body.is-flyout {
    display: none;
}

    .sidebar.is-collapsed .sidebar-section-body.is-flyout .sidebar-nav-item.sub {
        display: flex;
        padding: 8px 14px;
        border-radius: 0;
        margin: 0;
    }

.sidebar-bottom {
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

/* ========== Topbar ========== */
.topbar {
    height: var(--topbar-h);
    padding: 0 32px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 160;
}

.topbar-breadcrumb {
    display: none;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 18px;
}

.topbar-icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: transparent;
    border: 0;
    color: var(--text-secondary);
    display: grid;
    place-items: center;
    cursor: pointer;
    text-decoration: none;
    font-size: 18px;
    transition: background 120ms ease;
    position: relative;
}

    .topbar-icon-btn:hover {
        background: var(--bg-soft);
        text-decoration: none;
    }

.topbar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px 6px 6px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background 120ms ease;
}

    .topbar-user:hover {
        background: var(--bg-tint);
    }

.topbar-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--brand);
    color: var(--text-inverse);
    font-weight: 700;
    display: grid;
    place-items: center;
    font-size: 13px;
    overflow: hidden;
}

    .topbar-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
    }

.topbar-user-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 14px;
}

.topbar-user-caret {
    color: var(--text-muted);
    font-size: 12px;
}

.topbar-branch-switcher .btn {
    font-weight: 500;
}

/* ========== Main content + footer ========== */
/*.page-content {
    padding: 28px 32px;
    flex: 1;
}*/
.page-content {
    padding: 28px 32px 10px;
    flex: 1;
    min-width: 0;
    overflow-x: hidden;
}

.app-footer {
    padding: 14px 32px;
    border-top: 1px solid var(--border);
    background: var(--bg-body);
    display: flex;
    align-items: center;
    color: var(--text-secondary);
    font-size: 13px;
}

    .app-footer a {
        color: var(--text-muted);
        margin-left: 24px;
    }

        .app-footer a:hover {
            color: var(--accent);
            text-decoration: none;
        }

    .app-footer .copyright-c {
        display: inline-grid;
        place-items: center;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        border: 1px solid currentColor;
        font-size: 10px;
        margin: 0 4px;
    }

/* ========== Page header (used inside pages) ========== */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    gap: 20px;
}

.page-header-left h2 {
    font-size: 24px;
}

.page-header-left p {
    color: var(--text-muted);
    font-size: 14px;
    margin-top: 4px;
}

.page-header-right {
    display: flex;
    gap: 10px;
}

/* ========== Hero / welcome card ========== */
.hero-card {
    background: linear-gradient(120deg, #EEF0FF 0%, #F1F2FF 60%, #F8F6FF 100%);
    border: 1px solid var(--brand-tint-2);
    border-radius: var(--radius-lg);
    padding: 28px 32px;
    margin-bottom: 24px;
}

    .hero-card h1 {
        font-size: 30px;
        font-weight: 800;
        color: var(--brand);
        letter-spacing: -0.02em;
    }

    .hero-card p {
        color: var(--text-secondary);
        margin-top: 8px;
        font-size: 14px;
        max-width: 720px;
    }

/* ========== Cards ========== */
.card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px;
    box-shadow: var(--shadow-xs);
    margin-bottom: 24px;
}

.card-pad-sm {
    padding: 16px;
}

.card-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

/* Sectioned card: a tinted band at the top of an inner section, used on
   detail/form pages (e.g. "Plot Information", "Customer Information"). */
.card-section-head {
    background: var(--bg-soft);
    margin: -22px -22px 0px;
    padding: 14px 22px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    color: var(--text-primary);
}

    .card-section-head + .card-section-head {
        margin-top: 0;
    }

    .card-section-head .head-meta {
        font-weight: 500;
        color: var(--text-secondary);
        font-size: 13px;
    }

    .card-section-head .head-action {
        color: var(--accent);
        font-weight: 600;
        font-size: 13px;
        cursor: pointer;
    }

/* ========== KPI cards ========== */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.kpi-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
    box-shadow: var(--shadow-xs);
    display: flex;
    flex-direction: column;
    gap: 14px;
    /* Grid items default to min-width:auto, so a card refuses to shrink
       below its content's natural width (e.g. a long "73,12,83,432.02"
       value) — that forces the whole .kpi-grid row wider than the viewport
       instead of the value wrapping/truncating. Letting the card shrink is
       what makes overflow-wrap on .kpi-value actually take effect. */
    min-width: 0;
}

.kpi-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.kpi-tile {
    width: 55px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 18px;
    flex-shrink: 0;
}

    .kpi-tile.lavender {
        background: var(--tile-lavender-bg);
        color: var(--tile-lavender-fg);
    }

    .kpi-tile.peach {
        background: var(--tile-peach-bg);
        color: var(--tile-peach-fg);
    }

    .kpi-tile.mint {
        background: var(--tile-mint-bg);
        color: var(--tile-mint-fg);
    }

    .kpi-tile.rose {
        background: var(--tile-rose-bg);
        color: var(--tile-rose-fg);
    }

    .kpi-tile.sky {
        background: var(--tile-sky-bg);
        color: var(--tile-sky-fg);
    }

.kpi-label {
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 500;
}

.kpi-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.kpi-value {
    font-size: 32px;
    font-weight: 800;
    color: var(--brand);
    letter-spacing: -0.02em;
    line-height: 1.0;
    overflow-wrap: break-word;
    min-width: 0;
}

.kpi-tag {
    background: var(--bg-soft);
    color: var(--text-muted);
    font-size: 12px;
    padding: 5px 10px;
    border-radius: var(--radius-pill);
    font-weight: 500;
    white-space: nowrap;
}

/* ========== Buttons ========== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 140ms ease;
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
}

    .btn:disabled {
        opacity: 0.55;
        cursor: not-allowed;
    }

.btn-primary {
    background: var(--accent);
    color: var(--text-inverse);
}

    .btn-primary:hover {
        background: var(--brand-soft);
        color: var(--text-inverse);
        text-decoration: none;
    }

.btn-outline {
    background: var(--bg-surface);
    color: var(--text-primary);
    border-color: var(--border);
}

    .btn-outline:hover {
        background: var(--bg-soft);
        text-decoration: none;
    }

.btn-outline-primary {
    background: var(--bg-surface);
    color: var(--accent);
    border-color: var(--accent);
}

    .btn-outline-primary:hover {
        background: var(--brand-tint);
        text-decoration: none;
    }

.btn-success {
    background: var(--success);
    color: var(--text-inverse);
}

    .btn-success:hover {
        background: var(--success-text);
        color: var(--text-inverse);
        text-decoration: none;
    }

.btn-warning {
    background: var(--warning);
    color: var(--text-inverse);
}

    .btn-warning:hover {
        background: var(--warning-text);
        color: var(--text-inverse);
        text-decoration: none;
    }

.btn-danger {
    background: var(--danger);
    color: var(--text-inverse);
}

    .btn-danger:hover {
        background: var(--danger-text);
        color: var(--text-inverse);
        text-decoration: none;
    }

.btn-sm {
    padding: 7px 12px;
    font-size: 13px;
    border-radius: 8px;
}

.btn-lg {
    padding: 12px 22px;
    font-size: 15px;
}

.btn-group {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
}

.w-100 {
    width: 100%;
}

/* ========== Forms ========== */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.form-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.required {
    color: var(--danger);
}

.form-control, .form-select {
    width: 100%;
    padding: 11px 4px;
    font-size: 14px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: var(--bg-tint);
    color: var(--text-primary);
    transition: border 120ms ease, box-shadow 120ms ease, background 120ms ease;
    font-family: inherit;
}

    .form-control::placeholder {
        color: var(--text-muted);
    }

    .form-control:hover, .form-select:hover {
        background: #EBEEF6;
    }

    .form-control:focus, .form-select:focus {
        outline: none;
        background: var(--bg-surface);
        border-color: var(--accent);
        box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
    }

    .form-control:disabled, .form-select:disabled {
        background: var(--bg-soft);
        color: var(--text-muted);
    }

.form-textarea {
    min-height: 80px;
    resize: vertical;
}

.form-grid {
    display: grid;
    gap: 14px;
}

.form-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.form-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.form-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

.form-section-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 12px;
    margin-top: 4px;
}

.search-input-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 280px;
}

    .search-input-wrap .form-control {
        padding-left: 38px;
    }

.search-icon {
    position: absolute;
    left: 12px;
    color: var(--text-muted);
    pointer-events: none;
    font-size: 14px;
}

.filter-bar {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
    box-shadow: var(--shadow-xs);
}

    .filter-bar .search-input-wrap {
        flex: 1 1 280px;
        min-width: 220px;
        max-width: 380px;
    }

    .filter-bar .form-select,
    .filter-bar > .form-control:not(.search-input-wrap .form-control) {
        background: var(--bg-tint);
        border-color: var(--border);
        min-width: 140px;
    }

/* ========== Tables ========== */
/*.table-responsive { overflow-x: auto; border-radius: 10px; border: 1px solid var(--border-soft); }*/

.table-responsive {
    width: 100%;
    overflow-x: auto;
}

.prov-table {
    width: 100%;
    /* auto (not fixed) so column widths follow content/header instead of
       splitting evenly — fixed layout was squeezing columns like Email/Phone
       into the same narrow width as Status/Action, causing their text to
       overflow and visually overlap the neighboring column. */
    table-layout: auto;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
}

    .prov-table thead th {
        font-size: 13px;
        font-weight: 600;
        color: var(--text-primary);
        /* padding: 14px 18px;*/
        text-align: left;
        background: var(--bg-soft);
        border-bottom: 1px solid var(--border-soft);
        padding: 12px;
        /*overflow: hidden;*/
        /*text-overflow: ellipsis;*/
        /*white-space: nowrap;*/
    }

    .prov-table tbody td {
        /*padding: 14px 18px;*/
        border-bottom: 1px solid var(--border-soft);
        vertical-align: middle;
        color: var(--text-primary);
        padding: 12px;
        /* Long unbreakable strings (emails, etc.) wrap inside their own cell
           instead of overflowing into the next column. */
        overflow-wrap: anywhere;
    }

    .prov-table tbody tr:last-child td {
        border-bottom: none;
    }

    .prov-table tbody tr:hover {
        background: var(--bg-tint);
    }

.text-primary {
    color: var(--brand);
}

.text-success {
    color: var(--success-text);
}

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

.text-danger {
    color: var(--danger-text);
}

.td-muted {
    color: var(--text-muted);
}

.fw-semibold {
    font-weight: 600;
}

.fw-bold {
    font-weight: 700;
}

.text-right {
    text-align: right;
}

.text-center {
    text-align: center;
}

.d-flex {
    display: flex;
}

.gap-1 {
    gap: 8px;
}

.gap-2 {
    gap: 14px;
}

.mt-1 {
    margin-top: 8px;
}

.mt-2 {
    margin-top: 16px;
}

.mt-3 {
    margin-top: 24px;
}

.mb-2 {
    margin-bottom: 16px;
}

.mb-3 {
    margin-bottom: 24px;
}

/* ========== Badges ========== */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 600;
    background: var(--neutral-bg);
    color: var(--neutral-text);
}

.badge-success {
    background: var(--success-bg);
    color: var(--success-text);
}

.badge-warning {
    background: var(--warning-bg);
    color: var(--warning-text);
}

.badge-info {
    background: var(--info-bg);
    color: var(--info-text);
}

.badge-danger {
    background: var(--danger-bg);
    color: var(--danger-text);
}

.badge-purple {
    background: #EFE7FF;
    color: #6B21A8;
}

.badge-secondary {
    background: var(--neutral-bg);
    color: var(--neutral-text);
}

/* ========== Alerts ========== */
.alert {
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 14px;
    border: 1px solid transparent;
}

.alert-info {
    background: var(--info-bg);
    color: var(--info-text);
}

.alert-warning {
    background: var(--warning-bg);
    color: var(--warning-text);
}

.alert-success {
    background: var(--success-bg);
    color: var(--success-text);
}

.alert-danger {
    background: var(--danger-bg);
    color: var(--danger-text);
}

/* ========== Empty state ========== */
.empty-state {
    text-align: center;
    padding: 60px 24px;
}

.empty-icon {
    font-size: 56px;
    margin-bottom: 12px;
    color: var(--text-disabled);
}

.empty-state h3 {
    font-size: 18px;
    margin-bottom: 8px;
}

.empty-state p {
    color: var(--text-muted);
    margin-bottom: 16px;
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
}

/* ========== Modals ========== */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 18, 53, 0.30);
    backdrop-filter: blur(2px);
    display: grid;
    place-items: center;
    z-index: 1000;
    padding: 24px;
}

.modal-box {
    background: var(--bg-surface);
    border-radius: var(--radius-xl);
    width: 560px;
    max-width: 100%;
    max-height: 88vh;
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-sm {
    width: 420px;
}

.modal-lg {
    width: 800px;
}

.modal-xl {
    width: 1100px;
}

.modal-followup-log {
    width: min(1400px, 95vw);
    max-width: 95vw;
}

/* Kanban drag-and-drop (CRM Enquiries) */
.kanban-card.is-dragging {
    opacity: 0.45;
}

.kanban-col.is-drop-target {
    outline: 2px dashed var(--accent);
    outline-offset: -2px;
    background: var(--brand-tint) !important;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
}

.modal-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.modal-close {
    background: transparent;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: var(--text-muted);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: grid;
    place-items: center;
}

    .modal-close:hover {
        background: var(--bg-tint);
        color: var(--text-primary);
    }

.modal-body {
    padding: 22px 24px;
    overflow-y: auto;
    flex: 1;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid var(--border);
}

/* ========== Tabs ========== */
.tabs {
    display: inline-flex;
    gap: 4px;
    background: var(--bg-soft);
    border-radius: var(--radius-pill);
    padding: 4px;
    margin-bottom: 20px;
}

.tab-item {
    padding: 8px 18px;
    border-radius: var(--radius-pill);
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 120ms ease;
    font-size: 14px;
}

    .tab-item:hover {
        color: var(--text-primary);
    }

    .tab-item.active {
        background: var(--bg-surface);
        color: var(--brand);
        font-weight: 600;
        box-shadow: var(--shadow-xs);
    }

/* ========== Spinner ========== */
.loading-spinner {
    display: grid;
    place-items: center;
    padding: 40px 0;
}

.spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--brand-tint);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ========== Trip-detail row (expandable) ========== */
.expand-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
    cursor: pointer;
    background: transparent;
    border: 0;
    padding: 0;
}

    .expand-cell:hover {
        color: var(--text-primary);
    }

.point-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 6px 0;
}

.point-pin {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: white;
    font-size: 11px;
    flex-shrink: 0;
    margin-top: 2px;
}

    .point-pin.start {
        background: var(--success);
    }

    .point-pin.end {
        background: var(--danger);
    }

.point-line {
    width: 2px;
    height: 20px;
    background: var(--border);
    margin-left: 10px;
}

.mini-card {
    background: var(--bg-tint);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    padding: 14px 18px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    font-size: 13px;
}

    .mini-card .key {
        color: var(--text-muted);
        font-size: 12px;
        margin-bottom: 4px;
    }

    .mini-card .val {
        font-weight: 600;
        color: var(--text-primary);
    }

/* ========== Wallet card ========== */
.wallet-card {
    padding: 22px;
}

.wallet-header {
    display: flex;
    align-items: center;
    gap: 14px;
}

.wallet-amount {
    font-size: 28px;
    font-weight: 800;
    color: var(--brand);
    letter-spacing: -0.02em;
    margin-top: 4px;
}

.wallet-status {
    margin-top: 14px;
}

.wallet-note {
    color: var(--text-muted);
    font-size: 13px;
    margin: 10px 0 16px;
}

.summary-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 4px;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-soft);
}

    .summary-row:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .summary-row .key {
        color: var(--text-secondary);
    }

    .summary-row .val {
        font-weight: 700;
        color: var(--text-primary);
    }

    .summary-row.neg .val {
        color: var(--danger-text);
    }

    .summary-row.pos .val {
        color: var(--success-text);
    }

/* ========== Auth shell ========== */
.auth-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--bg-body);
}

.auth-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 64px 72px;
    background: var(--bg-surface);
}

.auth-right {
    background: linear-gradient(135deg, #EEF0FF 0%, #DCE0FF 50%, #C7CCFF 100%);
    display: grid;
    place-items: center;
    padding: 64px;
}

.auth-right-art {
    background: var(--bg-surface);
    border-radius: var(--radius-xl);
    padding: 36px;
    max-width: 460px;
    box-shadow: var(--shadow);
}

.auth-card-form {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
}

.auth-brand {
    display: flex;
    align-items: center;
    margin-bottom: 56px;
}

    .auth-brand .logo-text {
        font-size: 26px;
    }

.auth-title {
    font-size: 30px;
    font-weight: 800;
    color: var(--brand);
    letter-spacing: -0.02em;
}

.auth-subtitle {
    color: var(--text-muted);
    margin-top: 8px;
    margin-bottom: 32px;
    font-size: 14px;
}

@media (max-width: 1100px) {
    .auth-shell {
        grid-template-columns: 1fr;
    }

    .auth-right {
        display: none;
    }
}

/* ========== QuickAddSelect ========== */
.qa-select {
    position: relative;
}

.qa-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

    .qa-input-wrap .form-control {
        padding-right: 56px;
    }

.qa-clear {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border: 0;
    background: var(--bg-soft);
    color: var(--text-secondary);
    border-radius: 50%;
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 14px;
    line-height: 1;
}

    .qa-clear:hover {
        background: var(--neutral-bg);
        color: var(--text-primary);
    }

.qa-caret {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 11px;
    pointer-events: none;
}

.qa-dropdown {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    /* Sits above the topbar (160), modals would still win at 1500. */ body z-index: 500;
    overflow: hidden;
    z-index: 500 !important;
}

.qa-table-row, .qa-table-cell /* or whatever wraps this field */ {
    overflow: visible;
}
/* AutoSelect dropdown: same priority as QuickAddSelect */
.auto-select-list {
    z-index: 500 !important;
}

/* Block ancestor scroll containers from clipping a typeahead popup. The
   wrapping `.qa-select` / `.auto-select` are `position: relative` already, so
   the popup is rooted at the input — but if a card/section ancestor has its
   own `overflow: hidden|auto`, the popup gets clipped. Pages with sheet
   tables (`.items-sheet`) and form sections shouldn't introduce scroll bars
   while a dropdown is open. */
/*.form-section,
.card,
.card-body,
.table-responsive {
    overflow: visible;
}*/

.form-section,
.card,
.card-body {
    overflow: visible;
}

.table-responsive {
    overflow-x: visible;
    overflow-y: visible;
}
/* Tables wrapped in .table-responsive used to scroll horizontally; keep that
   capability ONLY on small screens where it's actually needed. A non-visible
   overflow-x here (even alongside overflow-y: visible) makes the browser
   compute overflow-y as auto too, clipping typeahead popups like
   QuickAddSelect's dropdown — so overflow-x must stay visible outside this
   media query. */
@media (max-width: 900px) {
    .table-responsive {
        overflow-x: auto;
    }
}

.qa-dropdown-list {
    max-height: 280px;
    overflow-y: auto;
    padding: 4px;
}

.qa-item {
    padding: 9px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 100ms ease;
}

    .qa-item:hover, .qa-item.highlighted {
        background: var(--brand-tint);
    }

.qa-item-primary {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.3;
}

.qa-item-secondary {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
    line-height: 1.3;
}

.qa-empty {
    padding: 16px 14px;
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
}

.qa-quickadd {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-top: 1px solid var(--border);
    background: var(--bg-tint);
    color: var(--accent);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: background 100ms ease;
}

    .qa-quickadd:hover {
        background: var(--brand-tint);
    }

.qa-quickadd-plus {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--text-inverse);
    display: grid;
    place-items: center;
    font-size: 14px;
    font-weight: 700;
}

/* ========== FilterBar refresh ========== */
.filter-bar--card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
    box-shadow: var(--shadow-xs);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

    .filter-bar--card .search-input-wrap {
        flex: 1 1 280px;
        min-width: 220px;
        max-width: 380px;
    }

.filter-bar-fields {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    flex: 1 1 auto;
}

    .filter-bar-fields .form-select,
    .filter-bar-fields .form-control {
        min-width: 140px;
        background: var(--bg-tint);
        border-color: var(--border);
    }

.filter-bar-reset {
    margin-left: auto;
    color: var(--text-secondary);
}

/* ========== Form-page chrome (PO/Req/Issue full pages) ========== */
.form-page {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-page-header {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 18px;
    box-shadow: var(--shadow-xs);
}

    .form-page-header .back-btn {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        border: 1px solid var(--border);
        background: var(--bg-tint);
        color: var(--text-secondary);
        cursor: pointer;
        display: grid;
        place-items: center;
        font-size: 18px;
        transition: background 120ms ease, color 120ms ease;
        text-decoration: none;
    }

        .form-page-header .back-btn:hover {
            background: var(--brand-tint);
            color: var(--brand);
        }

    .form-page-header h2 {
        margin: 0;
        font-size: 20px;
    }

    .form-page-header p {
        margin: 2px 0 0;
        font-size: 13px;
        color: var(--text-muted);
    }

.form-page-header-actions {
    margin-left: auto;
    display: flex;
    gap: 10px;
}

.form-section {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 20px;
    box-shadow: var(--shadow-xs);
}

.form-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

    .form-section-title::before {
        content: "";
        width: 4px;
        height: 16px;
        border-radius: 2px;
        background: var(--accent);
    }

    .form-section-title .ms-auto {
        margin-left: auto;
        text-transform: none;
        letter-spacing: 0;
        font-size: 13px;
    }

.line-items-table th {
    background: var(--bg-tint);
    color: var(--text-secondary);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    padding: 10px 12px;
}

.line-items-table td {
    padding: 8px 12px;
    vertical-align: middle;
}

.line-items-table .form-control {
    min-width: 0;
}

.line-items-table tfoot td {
    background: var(--bg-tint);
    font-weight: 600;
    border-top: 1px solid var(--border);
}

.line-items-empty {
    text-align: center;
    padding: 28px 16px;
    color: var(--text-muted);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    background: var(--bg-tint);
}

/* ========== Mode toggle (BOQ vs General requisition) ========== */
.mode-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.mode-toggle-btn {
    text-align: left;
    padding: 14px 16px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg-tint);
    color: var(--text-primary);
    cursor: pointer;
    transition: border 120ms, background 120ms, box-shadow 120ms;
}

    .mode-toggle-btn:hover {
        border-color: var(--accent);
    }

    .mode-toggle-btn.active {
        background: var(--brand-tint);
        border-color: var(--accent);
        box-shadow: 0 0 0 3px rgba(91,106,199,0.15);
    }

.mode-toggle-title {
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 2px;
}

.mode-toggle-sub {
    font-size: 12px;
    color: var(--text-muted);
}

@media (max-width: 720px) {
    .mode-toggle {
        grid-template-columns: 1fr;
    }
}

/* 3-column variant of mode toggle (PO source picker) */
.mode-toggle.mode-toggle-3 {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 900px) {
    .mode-toggle.mode-toggle-3 {
        grid-template-columns: 1fr;
    }
}

/* ========== Report modal (popup wrapper around the print page) ========== */
.prov-report-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 1500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: prov-modal-fade 120ms ease-out;
}

@keyframes prov-modal-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.prov-report-modal-box {
    width: min(960px, 100%);
    height: min(86vh, 1100px);
    background: var(--bg-surface);
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.prov-report-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--brand);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
}

.prov-report-modal-actions {
    display: flex;
    gap: 6px;
}

    .prov-report-modal-actions button {
        background: rgba(255,255,255,0.18);
        color: #fff;
        border: 0;
        border-radius: 4px;
        width: 28px;
        height: 28px;
        cursor: pointer;
        font-size: 14px;
        display: grid;
        place-items: center;
        transition: background 100ms;
    }

        .prov-report-modal-actions button:hover {
            background: rgba(255,255,255,0.32);
        }

.prov-report-modal-frame {
    flex: 1 1 auto;
    border: 0;
    width: 100%;
    background: #F5F6FB;
}

/* ========== Print / Report page ========== */
.empty-layout {
    background: #F5F6FB;
    min-height: 100vh;
}

.print-toolbar {
    position: sticky;
    top: 0;
    background: #fff;
    border-bottom: 1px solid var(--border);
    z-index: 10;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.print-toolbar-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.print-page {
    max-width: 900px;
    margin: 24px auto;
    background: #fff;
    padding: 36px 44px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    border-radius: 6px;
    color: #1F2937;
    font-size: 13px;
    line-height: 1.5;
}

.print-doc-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.print-logo {
    max-height: 64px;
    max-width: 200px;
    object-fit: contain;
    margin-bottom: 8px;
    display: block;
}

.print-brand {
    margin: 0;
    font-size: 24px;
    color: var(--brand);
    letter-spacing: 0.04em;
    font-weight: 800;
}

.print-brand-sub {
    color: var(--text-muted);
    font-size: 11px;
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.print-doc-meta {
    text-align: right;
}

.print-doc-title {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #111827;
}

.print-doc-no {
    color: var(--brand);
    font-weight: 600;
    margin-top: 2px;
}

.print-doc-status {
    color: var(--text-muted);
    font-size: 11px;
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.print-divider {
    border: 0;
    border-top: 2px solid var(--brand);
    margin: 14px 0 18px 0;
}

.print-parties {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.print-party {
    background: #FAFBFC;
    border: 1px solid var(--border-soft);
    border-radius: 4px;
    padding: 12px 14px;
}

.print-party-title {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    font-weight: 700;
    margin-bottom: 6px;
}

.print-party-name {
    font-weight: 600;
    font-size: 14px;
}

.print-table {
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0 12px 0;
    font-size: 12px;
}

    .print-table th, .print-table td {
        padding: 7px 10px;
        border-bottom: 1px solid var(--border-soft);
        text-align: left;
        vertical-align: top;
    }

    .print-table th {
        background: var(--brand-tint);
        color: var(--brand);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        font-size: 10px;
        border-bottom: 2px solid var(--brand);
    }

    .print-table tr:nth-child(even) td {
        background: #F9FAFB;
    }

    .print-table .r, .print-table .text-right {
        text-align: right;
    }

.print-totals {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

    .print-totals table {
        border-collapse: collapse;
        width: 280px;
        font-size: 12px;
    }

    .print-totals td {
        padding: 5px 10px;
        border-bottom: 1px solid var(--border-soft);
    }

        .print-totals td.r {
            text-align: right;
        }

    .print-totals tr.grand td {
        font-size: 14px;
        font-weight: 700;
        color: var(--brand);
        border-top: 2px solid var(--brand);
        border-bottom: none;
        padding-top: 8px;
    }

.print-notes {
    background: #FAFBFC;
    border: 1px solid var(--border-soft);
    border-radius: 4px;
    padding: 10px 12px;
    margin: 10px 0;
    font-size: 12px;
}

.print-warn {
    background: #FEF3C7;
    border-left: 4px solid var(--warning-text);
    padding: 10px 12px;
    margin: 10px 0;
    font-size: 12px;
}

.print-signatures {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 36px;
    text-align: center;
}

    .print-signatures .line {
        border-top: 1px solid #6B7280;
        height: 0;
        margin-bottom: 4px;
        margin-top: 30px;
    }

    .print-signatures > div {
        font-size: 11px;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

.print-footer {
    margin-top: 30px;
    text-align: center;
    color: var(--text-muted);
    font-size: 10px;
}

/* ========== Uniform report band / table (used by every generated
   report under Pages/CRM/Print/*) — one shared look instead of each
   report hand-rolling its own header-bar and table styling. ========== */
.rpt-band {
    background: var(--brand);
    color: #fff;
    font-weight: 700;
    padding: 10px 14px;
    border: 1px solid var(--brand);
    font-size: 13px;
    margin: 18px 0 0;
}

    .rpt-band.center {
        text-align: center;
    }

.rpt-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin: 0 0 18px;
    border: 1px solid var(--border-soft);
}

    .rpt-table th {
        background: var(--brand);
        color: #fff;
        font-weight: 700;
        padding: 9px 12px;
        text-align: left;
        border: 1px solid var(--brand);
    }

    .rpt-table td {
        padding: 8px 12px;
        border: 1px solid var(--border-soft);
    }

    .rpt-table th.r, .rpt-table td.r {
        text-align: right;
    }

    .rpt-table tfoot td {
        background: var(--brand);
        color: #fff;
        font-weight: 700;
        border: 1px solid var(--brand);
    }

    /* In-table group separator row (e.g. "» Project Name" between blocks of
       rows within a single continuous table), same navy/white treatment as
       the header/footer so it reads as one consistent system. */
    .rpt-table tr.group-row td {
        background: var(--brand);
        color: #fff;
        font-weight: 700;
        border: 1px solid var(--brand);
    }

.rpt-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 14px 0;
    font-size: 13px;
    border: 1px solid var(--border-soft);
    border-top: none;
}

/* ========== Payroll — Salary Statement (Excel-style report) ========== */
/* Scrolls horizontally within its own box rather than widening the whole
   page — the table has ~34 columns, wider than any viewport. */
.sal-stmt-scroll {
    overflow-x: auto;
}

.sal-stmt {
    border-collapse: collapse;
    width: max-content;
    min-width: 100%;
    font-size: 11px;
}

    .sal-stmt th, .sal-stmt td {
        border: 1px solid #8a9a5b;
        padding: 4px 6px;
        text-align: center;
        white-space: nowrap;
    }

    .sal-stmt td.sal-stmt-name {
        text-align: left;
        white-space: normal;
        min-width: 120px;
    }

    .sal-stmt thead th {
        background: var(--bg-soft);
        font-weight: 700;
    }

    /* Company name / period band across the full width, olive-green to
       match the standard salary-statement template. */
    .sal-stmt .sal-stmt-band th {
        background: #C3D69B;
        border-color: #8a9a5b;
        font-weight: 800;
        text-align: center;
        padding: 8px;
        color: #1f2b0e;
    }

    .sal-stmt .sal-stmt-total td {
        font-weight: 800;
        background: var(--bg-soft);
    }

    .sal-stmt .sal-stmt-payable td {
        background: #C3D69B;
        border-color: #8a9a5b;
        font-weight: 800;
        color: #1f2b0e;
    }

@media print {
    body {
        background: white !important;
    }

    .empty-layout {
        background: white !important;
    }

    .no-print, .no-print-footer,
    .sidebar, .topbar, .app-footer, .cb-root {
        display: none !important;
    }

    /* .app-layout is a CSS Grid with a fixed two-column template (sidebar
       width + 1fr). Simply display:none-ing the sidebar removes it from grid
       placement but the explicit column tracks stay put, so the browser's
       auto-placement algorithm shifts .main-area into the now-vacant first
       (narrow, sidebar-width) column instead of the wide 1fr one — the report
       ends up squeezed into a sidebar-width strip with the rest of the page
       blank. Collapse to a single column so .main-area gets the full width. */
    .app-layout {
        display: block !important;
    }

    .main-area {
        overflow: visible !important;
        min-width: 0 !important;
    }

    .page-content {
        overflow: visible !important;
        padding: 12mm !important;
    }

    /* Same clipping trap as .main-area above — an overflow-x:auto box only
       ever prints whatever's currently scrolled into view. Let the ~34-column
       Salary Statement flow past the page edge instead of losing columns. */
    .sal-stmt-scroll {
        overflow: visible !important;
        width: auto !important;
    }

    .sal-stmt, .sal-stmt th, .sal-stmt td {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }

    /* Browsers strip background colors on print by default (the "Background
       graphics" checkbox defaults off), which is what washes the navy
       headers/bands out to near-invisible grey — force exact color output
       so the report actually looks like its on-screen preview when printed
       or saved to PDF via the browser's own print dialog. */
    .print-page, .print-page * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }

    .print-page {
        margin: 0 !important;
        padding: 12mm !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        max-width: none !important;
    }

    .print-table, .rpt-table {
        font-size: 10px !important;
    }

        .print-table th, .print-table td,
        .rpt-table th, .rpt-table td {
            padding: 5px 7px !important;
        }

    .rpt-band {
        font-size: 11px !important;
    }

    @page {
        size: A4;
        margin: 0;
    }
}

/* ========== Notifications (bell dropdown) ========== */
.notif-menu {
    position: relative;
}

.notif-bell {
    position: relative;
}

.notif-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #DC2626;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    padding: 2px 5px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
    border: 2px solid var(--bg-surface);
}

.notif-popover {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    width: 380px;
    max-width: calc(100vw - 24px);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 12px 32px rgba(0,0,0,0.12);
    z-index: 200;
    overflow: hidden;
}

.notif-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-soft);
    font-size: 14px;
}

    .notif-header .btn-link {
        padding: 0;
        font-size: 12px;
    }

.notif-body {
    max-height: 420px;
    overflow-y: auto;
}

.notif-empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--border-soft);
    cursor: pointer;
    position: relative;
    transition: background 100ms;
}

    .notif-item:hover {
        background: var(--bg-tint);
    }

    .notif-item.unread {
        background: #F0F4FF;
    }

        .notif-item.unread:hover {
            background: #E0E7FF;
        }

    .notif-item.success {
        border-left: 3px solid #10B981;
    }

    .notif-item.warning {
        border-left: 3px solid #F59E0B;
    }

    .notif-item.danger {
        border-left: 3px solid #DC2626;
    }

    .notif-item.info {
        border-left: 3px solid #3B82F6;
    }

.notif-icon {
    font-size: 18px;
    width: 28px;
    text-align: center;
    flex: 0 0 auto;
}

.notif-content {
    flex: 1 1 auto;
    min-width: 0;
}

.notif-title {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.3;
}

.notif-message {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 2px;
    line-height: 1.3;
}

.notif-time {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}

.notif-dot {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand);
    flex: 0 0 auto;
}

.notif-item.unread.success .notif-dot {
    background: #10B981;
}

.notif-item.unread.warning .notif-dot {
    background: #F59E0B;
}

.notif-item.unread.danger .notif-dot {
    background: #DC2626;
}

.notif-footer {
    padding: 10px 14px;
    text-align: center;
    border-top: 1px solid var(--border-soft);
    font-size: 13px;
    background: var(--bg-tint);
}

    .notif-footer a {
        color: var(--brand);
        text-decoration: none;
        font-weight: 500;
    }

        .notif-footer a:hover {
            text-decoration: underline;
        }

/* /notifications full-page list */
.notif-list-page {
    display: flex;
    flex-direction: column;
}

.notif-item-page {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-soft);
    transition: background 100ms;
    border-left: 3px solid transparent;
}

    .notif-item-page:last-child {
        border-bottom: 0;
    }

    .notif-item-page:hover {
        background: var(--bg-tint);
    }

    .notif-item-page.unread {
        background: #F0F4FF;
    }

    .notif-item-page.success {
        border-left-color: #10B981;
    }

    .notif-item-page.warning {
        border-left-color: #F59E0B;
    }

    .notif-item-page.danger {
        border-left-color: #DC2626;
    }

    .notif-item-page.info {
        border-left-color: #3B82F6;
    }

.notif-icon-lg {
    font-size: 22px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--brand-tint);
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

.notif-row-actions {
    display: flex;
    gap: 6px;
    flex: 0 0 auto;
}

/* ========== Top-right user menu (dropdown) ========== */
.user-menu {
    position: relative;
}

.user-menu-trigger {
    display: flex;
    align-items: center;
    gap: 12px;
    background: transparent;
    border: 0;
    padding: 4px 6px 4px 4px;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 120ms;
    color: inherit;
}

    .user-menu-trigger:hover {
        background: var(--bg-soft);
    }

.user-menu-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.25;
    text-align: left;
}

.user-menu-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
}

.user-menu-sub {
    font-size: 12px;
    color: var(--text-muted);
}

.user-menu-caret {
    color: var(--text-muted);
    font-size: 11px;
}

/* Larger avatar for the topbar trigger, to match the screenshots */
.user-menu-trigger .topbar-avatar {
    width: 40px;
    height: 40px;
    font-size: 14px;
}

.user-menu-popover {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 280px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06);
    z-index: 200;
    padding: 8px 0;
    overflow: hidden;
}

.user-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 150;
    background: transparent;
}

.user-menu-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px 12px 14px;
    border-bottom: 1px solid var(--border-soft);
    margin-bottom: 6px;
}

.topbar-avatar-lg {
    width: 40px;
    height: 40px;
    font-size: 14px;
}

.user-menu-section-title {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    padding: 6px 14px 4px 14px;
    font-weight: 700;
}

.user-menu-branches {
    max-height: 200px;
    overflow-y: auto;
    padding: 0 6px 4px 6px;
}

.user-menu-branch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-radius: 4px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 13px;
}

    .user-menu-branch:hover {
        background: var(--bg-tint);
        text-decoration: none;
    }

    .user-menu-branch.is-active {
        background: var(--brand-tint);
        color: var(--brand);
        font-weight: 600;
    }

.user-menu-divider {
    border-top: 1px solid var(--border-soft);
    margin: 6px 0;
}

.user-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 13px;
    transition: background 100ms;
}

    .user-menu-item:hover {
        background: var(--bg-tint);
        text-decoration: none;
    }

.user-menu-icon {
    width: 18px;
    text-align: center;
    color: var(--text-muted);
}

.user-menu-danger {
    color: var(--danger-text);
}

    .user-menu-danger:hover {
        background: var(--danger-bg);
    }

    .user-menu-danger .user-menu-icon {
        color: var(--danger-text);
    }

/* ========== Settings landing grid ========== */
.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}

.settings-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 16px;
    text-decoration: none;
    color: var(--text-primary);
    transition: border-color 120ms, transform 80ms, box-shadow 120ms;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .settings-card:hover {
        border-color: var(--brand);
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(91,106,199,0.12);
        text-decoration: none;
    }

.settings-icon {
    font-size: 26px;
    line-height: 1;
    margin-bottom: 6px;
}

.settings-title {
    font-weight: 600;
    font-size: 15px;
}

.settings-sub {
    font-size: 12px;
    color: var(--text-muted);
}

/* ========== Blazor error UI ==========
   The Blazor runtime toggles inline `display: block` on this element when an
   unhandled exception fires. Without an explicit `display: none` rule it stays
   visible all the time — that's what the "reload" footer was. */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #FEF3C7;
    color: #B45309;
    border-top: 1px solid #F59E0B;
    padding: 10px 16px;
    z-index: 1000;
    font-size: 13px;
    box-shadow: 0 -2px 6px rgba(0,0,0,0.08);
}

    #blazor-error-ui .reload {
        color: var(--brand);
        margin-left: 12px;
        text-decoration: underline;
        cursor: pointer;
    }

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 12px;
        top: 8px;
        color: #B45309;
    }

/* ========== Dropdowns: 300px cap globally, except inside table cells ==========
   Caps every native select + the typeahead wrappers (QuickAddSelect = .qa-select,
   AutoSelect = .auto-select) at 300 px across the app — page filters, form
   fields, modals, settings. Table cells (line-item rows) opt out so their
   pickers still fill the cell width. */
.form-select,
select.form-select,
.qa-select,
.auto-select {
    max-width: 300px;
}

table .form-select,
table select.form-select,
table .qa-select,
table .auto-select,
.items-sheet .form-select,
.items-sheet select.form-select,
.items-sheet .qa-select,
.items-sheet .auto-select {
    max-width: none;
}
/* Filter-bar children (any direct child of the slotted area) — keep them in
   line for the new global cap too. */
.filter-bar .filter-bar-fields > * {
    max-width: 300px;
}

/* ========== Excel-like line-item sheet (flat tables) ==========
   Apply to a <table class="prov-table line-items-table items-sheet"> to give
   it the same compact spreadsheet look as the cost-estimation tree:
   tight rows, borderless inputs, gridlines, brand-tinted header, striping. */
.items-sheet {
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    /* No `overflow: hidden` here — it would clip absolutely-positioned dropdowns
       (e.g. QuickAddSelect popups) that pop below an input inside a cell. The
       rounded corners look fine without it because the table border itself
       defines the visible edge. */
    font-variant-numeric: tabular-nums;
}

    .items-sheet thead th {
        background: var(--bg-tint);
        color: var(--text-muted);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-weight: 600;
        padding: 8px 10px;
        border-bottom: 1px solid var(--border);
        border-right: 1px solid var(--border-soft);
        white-space: nowrap;
    }

        .items-sheet thead th:last-child {
            border-right: 0;
        }

    .items-sheet tbody td {
        padding: 0;
        border-right: 1px solid var(--border-soft);
        border-bottom: 1px solid var(--border-soft);
        font-size: 13px;
        vertical-align: middle;
    }

        .items-sheet tbody td:last-child {
            border-right: 0;
        }

    .items-sheet tbody tr:last-child td {
        border-bottom: 0;
    }

    .items-sheet tbody tr:hover td {
        background: var(--bg-tint);
    }

    .items-sheet tbody tr:nth-child(even) td {
        background: #FCFCFD;
    }

    .items-sheet tbody tr:nth-child(even):hover td {
        background: var(--bg-tint);
    }

    /* Cells that hold raw text (badges, labels) keep some breathing room */
    .items-sheet td.cell-text,
    .items-sheet td:not(:has(input)):not(:has(select)):not(:has(.qa-root)) {
        padding: 6px 10px;
    }

    /* Inputs/selects inside cells: white bg + soft grey outline so the user can
   immediately see which cells are editable. Borderless when disabled. */
    .items-sheet input.form-control,
    .items-sheet input.form-control-sm,
    .items-sheet select.form-select,
    .items-sheet select.form-control-sm,
    .items-sheet textarea.form-control {
        border: 1px solid #E5E7EB;
        background: #FFFFFF;
        border-radius: 4px;
        padding: 5px 9px;
        min-height: 30px;
        margin: 3px;
        font-size: 13px;
        box-shadow: none;
        outline: none;
        width: calc(100% - 6px);
    }

        .items-sheet input.form-control:hover,
        .items-sheet input.form-control-sm:hover,
        .items-sheet select.form-select:hover,
        .items-sheet select.form-control-sm:hover,
        .items-sheet textarea.form-control:hover {
            border-color: #CBD5E1;
        }

        .items-sheet input.form-control:focus,
        .items-sheet input.form-control-sm:focus,
        .items-sheet select.form-select:focus,
        .items-sheet select.form-control-sm:focus,
        .items-sheet textarea.form-control:focus {
            background: #FFFFFF;
            border-color: var(--accent);
            box-shadow: 0 0 0 2px rgba(91,106,199,0.15);
        }

    .items-sheet input[disabled],
    .items-sheet input:disabled,
    .items-sheet select:disabled,
    .items-sheet textarea:disabled {
        background: transparent;
        border-color: transparent;
        color: var(--text-muted);
        box-shadow: none;
    }
    /* The QuickAddSelect typeahead inside an items-sheet cell — give its inner
   input the same white-bg / grey-border treatment. */
    .items-sheet .qa-select .form-control,
    .items-sheet .auto-select .form-control {
        border: 1px solid #E5E7EB;
        background: #FFFFFF;
        border-radius: 4px;
        margin: 3px;
        width: calc(100% - 6px);
        box-shadow: none;
    }

        .items-sheet .qa-select .form-control:focus,
        .items-sheet .auto-select .form-control:focus {
            border-color: var(--accent);
            box-shadow: 0 0 0 2px rgba(91,106,199,0.15);
        }

    /* Right-align numerics; the `.text-right` class still wins */
    .items-sheet td.text-right input,
    .items-sheet td.text-right {
        text-align: right;
    }

    /* Compact inline action button column at the row end */
    .items-sheet .row-action-cell {
        width: 40px;
        text-align: center;
        padding: 0 6px;
    }

        .items-sheet .row-action-cell .btn {
            padding: 3px 8px;
            line-height: 1;
        }

/* Sheet-header band above a sheet table — used where forms title the section */
.items-sheet-band {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--brand-tint);
    border: 1px solid var(--border);
    border-bottom: 0;
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
    font-weight: 600;
    color: var(--brand);
    font-size: 13px;
}

    .items-sheet-band + .items-sheet {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-top: 0;
    }

/* ========== Progress bars (BOQ items, PO receipt, etc.) ========== */
.progress-row {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.progress {
    height: 8px;
    background: var(--bg-tint);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border-soft);
}

.progress-fill {
    height: 100%;
    background: linear-gradient(to right, #10B981, #059669);
    transition: width 200ms ease;
}

.progress.low .progress-fill {
    background: linear-gradient(to right, #F59E0B, #D97706);
}

.progress.mid .progress-fill {
    background: linear-gradient(to right, #3B82F6, #2563EB);
}

.progress.ok .progress-fill {
    background: linear-gradient(to right, #10B981, #059669);
}

.progress-label {
    font-size: 11px;
    color: var(--text-secondary);
}

/* ========== BOQ Quantity Progress table (Procurement Dashboard) ==========
   Compact table, not the earlier card-grid redesign — this widget sits
   above other dashboard content and a grid of large cards pushed that
   content too far down. Tier meaning is the opposite of .progress above
   (BOQViewer's low/mid/ok, where "full" = done = good): here "full" =
   at/over the approved limit = a risk to flag, hence the separate "over"
   tier and its own darker token rather than reusing --danger for both
   critical and over-consumption. */
:root {
    --boq-over: #7F1D1D;
    --boq-over-bg: #FBE3E3;
}

.boq-table th.sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

    .boq-table th.sortable:hover {
        color: var(--text-primary);
    }

    .boq-table th.sortable .sort-arrow {
        display: inline-block;
        margin-left: 3px;
        font-size: 10px;
        color: var(--text-muted);
    }

.boq-table td, .boq-table th {
    padding: 9px 12px;
}

.boq-table .boq-row-name {
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
}

    .boq-table .boq-row-name:hover {
        text-decoration: underline;
    }

.boq-table .boq-row-project {
    font-size: 11px;
    color: var(--text-muted);
}

/* Subtle row tint by tier — a left accent stripe plus a faint background
   wash, not a solid fill, so the row stays easy to read. */
.boq-table tbody tr.warning {
    background: var(--warning-bg);
    box-shadow: inset 3px 0 0 var(--warning);
}

.boq-table tbody tr.critical {
    background: var(--danger-bg);
    box-shadow: inset 3px 0 0 var(--danger);
}

.boq-table tbody tr.over {
    background: var(--boq-over-bg);
    box-shadow: inset 3px 0 0 var(--boq-over);
}

.boq-table td.boq-remaining-neg {
    color: var(--danger-text);
    font-weight: 600;
}

/* Consumption cell: thin bar + "75.5% · 1510 / 2000" caption, in place of a
   separate Status column — the bar's own color already carries the status,
   the same way the row tint above does. */
.boq-gauge-row {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 150px;
}

.boq-gauge {
    height: 8px;
    background: var(--bg-tint);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border-soft);
}

.boq-gauge-fill {
    height: 100%;
    transition: width 200ms ease;
}

.boq-gauge.normal .boq-gauge-fill {
    background: linear-gradient(to right, #34D399, var(--success));
}

.boq-gauge.warning .boq-gauge-fill {
    background: linear-gradient(to right, #FBBF24, var(--warning));
}

.boq-gauge.critical .boq-gauge-fill {
    background: linear-gradient(to right, #F87171, var(--danger));
}

.boq-gauge.over .boq-gauge-fill {
    background: linear-gradient(to right, var(--danger), var(--boq-over));
}

.boq-gauge-label {
    font-size: 11px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
}

.boq-gauge-over-flag {
    color: var(--boq-over);
    font-weight: 700;
}

/* ========== BOQ upload + edit table ========== */
.upload-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

    .upload-row input[type="file"] {
        max-width: 360px;
    }

.boq-edit-table tbody tr.has-issue {
    background: #FFF8EC;
}

.boq-edit-table tbody tr.row-issue-detail td {
    border-top: 0;
    padding: 0 8px 8px 8px;
}

.cell-unresolved {
    background: #FEF3C7;
    box-shadow: inset 2px 0 0 var(--warning-text);
}

.cell-raw-hint {
    font-size: 11px;
    color: var(--warning-text);
    margin-top: 2px;
}

.cell-issue-pill {
    display: inline-block;
    padding: 2px 8px;
    margin: 2px 4px 2px 0;
    background: #FEF3C7;
    color: var(--warning-text);
    border-radius: 10px;
    font-size: 11px;
}

/* ========== Number-format token list ========== */
.number-tokens {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin-top: 10px;
    font-size: 13px;
}

    .number-tokens code {
        background: var(--brand-tint);
        color: var(--brand);
        border-radius: 3px;
        padding: 2px 7px;
        margin-right: 5px;
        font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
        font-size: 12px;
    }

/* ========== Estimate revision diff + per-activity reject ========== */
.tree-row.is-rejected {
    background: #FEF2F2;
}

    .tree-row.is-rejected:hover {
        background: #FEE2E2;
    }

.tree-row.has-diff {
    background: #FFFBEB;
}

    .tree-row.has-diff:hover {
        background: #FEF3C7;
    }

.tree-cell.diff-changed {
    background: #FEE2E2;
    box-shadow: inset 3px 0 0 #DC2626;
    position: relative;
}

    .tree-cell.diff-changed input {
        color: #B91C1C;
        font-weight: 600;
    }

.diff-prev {
    display: block;
    font-size: 9px;
    color: #6B7280;
    line-height: 1.1;
    text-decoration: line-through;
    padding: 0 8px 1px 8px;
}

.tree-reject-row {
    display: flex;
    gap: 12px;
    align-items: center;
    background: #FEF3C7;
    border-bottom: 1px solid #F59E0B;
    padding: 8px 12px 8px calc(56px + var(--depth, 0) * 16px);
}

.tree-reject-check {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #92400E;
    flex: 0 0 auto;
}

.tree-reject-remarks {
    flex: 1 1 auto;
    max-width: 600px;
}

.tree-reject-feedback {
    background: #FEF2F2;
    border-bottom: 1px solid #FCA5A5;
    color: #991B1B;
    font-size: 12px;
    padding: 6px 12px 6px calc(56px + var(--depth, 0) * 16px);
}

/* ========== Reports + Vendor Performance ========== */
.report-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}

@media (max-width: 1100px) {
    .report-kpis {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .report-kpis {
        grid-template-columns: 1fr;
    }
}

.report-kpi {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
    border-left: 4px solid #6366F1;
}

    .report-kpi.blue {
        border-left-color: #3B82F6;
    }

    .report-kpi.green {
        border-left-color: #10B981;
    }

    .report-kpi.orange {
        border-left-color: #F59E0B;
    }

    .report-kpi.red {
        border-left-color: #EF4444;
    }

    .report-kpi.purple {
        border-left-color: #8B5CF6;
    }

.report-kpi-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--brand-tint);
    display: grid;
    place-items: center;
    font-size: 22px;
    flex: 0 0 auto;
}

.report-kpi-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    font-weight: 600;
}

.report-kpi-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    margin-top: 2px;
}

.report-kpi-sub {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.report-tabs {
    margin-bottom: 14px;
}

.project-budget-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 14px;
}

.project-budget-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}

.project-budget-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.project-budget-figures {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    font-size: 12px;
}

    .project-budget-figures > div {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .project-budget-figures strong {
        font-size: 14px;
        font-weight: 700;
    }

.vendor-perf-picker {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 16px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.vendor-perf-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 18px;
}

@media (max-width: 1024px) {
    .vendor-perf-layout {
        grid-template-columns: 1fr;
    }
}

.vendor-summary-card {
    padding: 18px;
}

.vendor-summary-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.vendor-summary-avatar {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--brand), #7C3AED);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 22px;
    font-weight: 700;
}

.vendor-summary-name {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 4px;
}

.vendor-summary-info {
    font-size: 13px;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .vendor-summary-info > div {
        display: flex;
        align-items: center;
        gap: 4px;
    }

.vendor-summary-actions {
    margin-top: 14px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.verdict-pill {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

    .verdict-pill.good {
        background: #ECFDF5;
        color: #065F46;
    }

    .verdict-pill.ok {
        background: #FFFBEB;
        color: #92400E;
    }

    .verdict-pill.bad {
        background: #FEF2F2;
        color: #991B1B;
    }

    .verdict-pill.neutral {
        background: #F3F4F6;
        color: var(--text-muted);
    }

.vendor-kpis {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

@media (max-width: 1100px) {
    .vendor-kpis {
        grid-template-columns: repeat(2, 1fr);
    }
}

.vendor-scorecard {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.vendor-metric {
}

.vendor-metric-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 13px;
}

    .vendor-metric-head strong {
        font-size: 16px;
    }

/* ========== Quotation comparison ========== */
.comparison-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 18px;
    margin-bottom: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
    flex-wrap: wrap;
    gap: 14px;
}

.comparison-summary-rfq {
    font-size: 18px;
    font-weight: 700;
    color: var(--brand);
}

.comparison-summary-stats {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
}

    .comparison-summary-stats > div {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        line-height: 1.2;
    }

    .comparison-summary-stats span {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-muted);
    }

    .comparison-summary-stats strong {
        font-size: 16px;
        font-weight: 700;
    }

.compare-item {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 14px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}

.compare-item-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 14px 18px;
    background: var(--brand-tint);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 12px;
}

.compare-item-title {
    font-weight: 700;
    font-size: 15px;
    color: var(--text-primary);
}

.compare-item-stats {
    display: flex;
    gap: 24px;
    font-size: 13px;
    flex-wrap: wrap;
}

    .compare-item-stats > div {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        line-height: 1.2;
    }

    .compare-item-stats span {
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-muted);
    }

    .compare-item-stats strong {
        font-size: 15px;
        font-weight: 700;
    }

.compare-vendor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    padding: 14px 18px;
}

.compare-vendor-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
    background: var(--bg-surface);
    transition: border-color 120ms, box-shadow 120ms;
}

    .compare-vendor-card.is-l1 {
        border-color: var(--success-text);
        background: linear-gradient(180deg, #F0FDF4 0%, var(--bg-surface) 80%);
    }

    .compare-vendor-card.is-picked {
        border-color: var(--brand);
        box-shadow: 0 0 0 2px rgba(91,106,199,0.18);
    }

.compare-vendor-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.compare-rate-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 8px 0;
    border-top: 1px dashed var(--border-soft);
    border-bottom: 1px dashed var(--border-soft);
    margin-bottom: 8px;
}

.compare-pick-row {
    padding-top: 4px;
}

/* Vendor past-performance strip inside the quotation card */
.vendor-perf-strip {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 8px 10px;
    margin: 8px -2px;
    border-radius: 6px;
    font-size: 11px;
    background: #F0F4FF;
    color: #3730A3;
    flex-wrap: wrap;
}

    .vendor-perf-strip.good {
        background: #ECFDF5;
        color: #065F46;
    }

    .vendor-perf-strip.ok {
        background: #FFFBEB;
        color: #92400E;
    }

    .vendor-perf-strip.bad {
        background: #FEF2F2;
        color: #991B1B;
    }

    .vendor-perf-strip.neutral {
        background: #F3F4F6;
        color: var(--text-muted);
    }

.vendor-perf-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.1;
    flex: 1 1 auto;
    min-width: 50px;
}

    .vendor-perf-cell span {
        font-size: 9px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        opacity: 0.75;
    }

    .vendor-perf-cell strong {
        font-size: 13px;
        font-weight: 700;
    }

.vendor-perf-empty {
    font-style: italic;
    opacity: 0.85;
}

.compare-pick-controls {
    display: flex;
    gap: 4px;
}

    .compare-pick-controls input {
        flex: 1 1 auto;
    }

    .compare-pick-controls .btn {
        flex: 0 0 auto;
        padding: 6px 10px;
    }

/* ========== Multi-select chip row (RFQ vendors, etc.) ========== */
.multi-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 10px 12px;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    background: var(--bg-tint);
    min-height: 46px;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--brand-tint);
    color: var(--brand);
    border: 1px solid rgba(91,106,199,0.3);
    border-radius: 18px;
    padding: 4px 4px 4px 12px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
}

.chip-remove {
    border: 0;
    background: rgba(91,106,199,0.15);
    color: var(--brand);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    display: grid;
    place-items: center;
    padding: 0;
    transition: background 100ms;
}

    .chip-remove:hover {
        background: var(--brand);
        color: #fff;
    }

/* ========== Vendor picker grid (RFQ form) ========== */
.vendor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}

.vendor-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
    background: var(--bg-surface);
    cursor: pointer;
    transition: border-color 120ms, background 120ms, box-shadow 120ms;
}

    .vendor-card:hover {
        border-color: var(--accent);
        background: var(--bg-tint);
    }

    .vendor-card.is-picked {
        border-color: var(--brand);
        background: var(--brand-tint);
        box-shadow: 0 0 0 2px rgba(91,106,199,0.15);
    }

    .vendor-card input[type="checkbox"] {
        margin-top: 2px;
        flex: 0 0 auto;
    }

.vendor-card-body {
    flex: 1 1 auto;
    min-width: 0;
}

/* ========== Estimate Tree — Excel-like sheet ========== */
.tree-sheet {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-surface);
    /* Was overflow: hidden — clipped the QuickAddSelect activity-picker
       popup (rendered inside .tree-add-picker-row, a descendant of this
       sheet) right at the sheet's border, hiding most of the matched
       activities. Same fix already applied to .form-section/.card/
       .card-body/.table-responsive above for the same typeahead-clipping
       reason. */
    overflow: visible;
    box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}

.tree-sheet-head {
    display: grid;
    grid-template-columns: 56px minmax(220px, 1fr) 70px 88px 88px 88px 140px 110px;
    background: var(--bg-tint);
    border-bottom: 1px solid var(--border);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    font-weight: 600;
}

    .tree-sheet-head > div {
        padding: 8px 10px;
        border-right: 1px solid var(--border-soft);
    }

        .tree-sheet-head > div:last-child {
            border-right: 0;
        }

.tree-row {
    display: grid;
    grid-template-columns: 56px minmax(220px, 1fr) 70px 88px 88px 88px 140px 110px;
    align-items: stretch;
    border-bottom: 1px solid var(--border-soft);
    background: var(--bg-surface);
    min-height: 32px;
    transition: background 100ms;
}

    .tree-row:hover {
        background: var(--bg-tint);
    }

    .tree-row.is-group {
        background: linear-gradient(to right, var(--brand-tint), transparent 70%);
        font-weight: 600;
        border-bottom: 1px solid var(--border);
    }

        .tree-row.is-group:hover {
            background: linear-gradient(to right, var(--brand-tint), var(--bg-tint) 70%);
        }

    .tree-row.dragging {
        opacity: 0.4;
    }

    .tree-row.drop-target {
        box-shadow: inset 0 0 0 2px var(--brand);
    }

.tree-cell {
    display: flex;
    align-items: center;
    padding: 0 8px;
    border-right: 1px solid var(--border-soft);
    font-size: 13px;
    overflow: hidden;
    min-width: 0;
}

    .tree-cell:last-child {
        border-right: 0;
    }

.tree-cell-handle {
    padding-left: calc(6px + var(--depth, 0) * 16px);
    gap: 4px;
}

.tree-cell-group-name {
    grid-column: 2 / span 6;
    gap: 8px;
    border-right: 1px solid var(--border-soft);
}

.tree-cell-name {
    gap: 6px;
    min-width: 0;
}

    .tree-cell-name .tree-leaf-title {
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .tree-cell-name .tree-leaf-code {
        color: var(--text-muted);
        font-size: 11px;
        white-space: nowrap;
    }

.tree-cell-num {
    padding: 0;
}

.tree-cell-unit {
    justify-content: center;
    padding: 0 8px;
    font-size: 12px;
}

.tree-cell-cost {
    justify-content: flex-end;
    padding: 0 10px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--brand);
}

.tree-cell-actions {
    justify-content: flex-end;
    gap: 4px;
    padding: 0 6px;
}

.tree-input {
    width: 100%;
    border: 0;
    background: transparent;
    padding: 4px 8px;
    font-size: 13px;
    color: inherit;
    outline: none;
    min-height: 30px;
}

    .tree-input:focus {
        background: var(--bg-surface);
        box-shadow: inset 0 0 0 2px var(--accent);
    }

    .tree-input:disabled {
        background: transparent;
        color: var(--text-muted);
    }

.tree-input-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.tree-group-input {
    font-weight: 600;
    font-size: 14px;
    flex: 0 1 320px;
}

.tree-icon {
    font-size: 13px;
    opacity: 0.85;
    flex: 0 0 auto;
}

.tree-handle {
    cursor: grab;
    color: var(--text-muted);
    font-size: 11px;
    user-select: none;
    flex: 0 0 auto;
}

    .tree-handle:active {
        cursor: grabbing;
    }

.tree-toggle {
    width: 18px;
    height: 18px;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 9px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    padding: 0;
    border-radius: 3px;
}

    .tree-toggle:hover {
        color: var(--brand);
        background: var(--bg-tint);
    }

.tree-icon-btn {
    border: 1px solid transparent;
    background: var(--bg-tint);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 100ms, color 100ms, border-color 100ms;
    line-height: 1;
}

    .tree-icon-btn:hover {
        background: var(--bg-surface);
        border-color: var(--border);
        color: var(--text-primary);
    }

    .tree-icon-btn.primary {
        background: var(--brand-tint);
        color: var(--brand);
    }

        .tree-icon-btn.primary:hover {
            background: var(--brand);
            color: #fff;
            border-color: var(--brand);
        }

    .tree-icon-btn.danger {
        color: var(--danger-text);
    }

        .tree-icon-btn.danger:hover {
            background: var(--danger-bg);
            border-color: var(--danger-text);
            color: var(--danger-text);
        }

.tree-group-summary {
    margin-left: auto;
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 400;
    white-space: nowrap;
}

.tree-subrow {
    border-bottom: 1px solid var(--border-soft);
    background: var(--bg-tint);
    padding: 8px 12px 8px calc(56px + var(--depth, 0) * 16px);
    font-size: 13px;
}

.tree-empty-row {
    color: var(--text-muted);
    font-style: italic;
}

.tree-add-picker-row {
    padding-top: 6px;
    padding-bottom: 6px;
}

.tree-detail-row {
    background: var(--bg-tint);
    border-bottom: 1px solid var(--border);
    padding: 10px 12px 12px calc(56px + var(--depth, 0) * 16px);
}

.tree-detail-meta {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.tree-detail-meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
}

    .tree-detail-meta-item > .td-muted {
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

.tree-detail-table th {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    padding: 6px 8px;
}

.tree-detail-table td {
    padding: 4px 8px;
    font-size: 12px;
}

.tree-detail-table .form-control-sm {
    padding: 3px 8px;
    font-size: 12px;
    min-height: 28px;
}

.tree-sheet-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 10px 12px;
    background: var(--bg-tint);
    border-top: 1px solid var(--border);
}

.tree-sheet-foot-picker {
    flex: 1 1 100%;
    margin-top: 6px;
}

/* Tighter form section variant for the sheet */
.form-section-tight {
    padding: 12px 14px;
}

    .form-section-tight .form-section-title {
        margin-bottom: 8px;
    }

/* Collapsible BOQ preview */
.form-section-collapsible > summary {
    cursor: pointer;
    list-style: none;
    user-select: none;
}

    .form-section-collapsible > summary::-webkit-details-marker {
        display: none;
    }

    .form-section-collapsible > summary::before {
        content: "▸";
        color: var(--text-muted);
        margin-right: 8px;
        transition: transform 120ms;
        display: inline-block;
    }

.form-section-collapsible[open] > summary::before {
    transform: rotate(90deg);
}

@media (max-width: 1024px) {
    .tree-sheet-head, .tree-row {
        grid-template-columns: 48px minmax(160px, 1fr) 60px 72px 72px 72px 110px 90px;
    }

    .tree-cell-handle {
        padding-left: calc(4px + var(--depth, 0) * 12px);
    }
}

/* ========== Estimate activity rows + BOQ preview ========== */
.estimate-activity-row {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 12px;
    background: var(--bg-tint);
}

.estimate-activity-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .estimate-activity-head .ms-2 {
        margin-left: auto;
    }

.boq-preview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

@media (max-width: 1200px) {
    .boq-preview-grid {
        grid-template-columns: 1fr;
    }
}

.boq-preview-block {
    background: var(--bg-tint);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
}

.boq-preview-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.boq-preview-block table.prov-table th {
    background: transparent;
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.boq-preview-block table.prov-table td {
    padding: 6px 10px;
    font-size: 13px;
}

.dim-summary {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.dim-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--brand-tint);
    border-radius: var(--radius-pill);
    font-size: 13px;
}

.dim-chip-label {
    color: var(--text-secondary);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dim-chip-value {
    font-weight: 700;
    color: var(--brand);
}

.form-page-footer {
    position: sticky;
    bottom: 0;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 18px;
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    gap: 12px;
}

    .form-page-footer .totals {
        display: flex;
        align-items: baseline;
        gap: 8px;
    }

        .form-page-footer .totals .label {
            color: var(--text-muted);
            font-size: 13px;
        }

        .form-page-footer .totals .amount {
            font-size: 20px;
            font-weight: 700;
            color: var(--brand);
        }

.form-page-footer-actions {
    margin-left: auto;
    display: flex;
    gap: 10px;
}

/* ========== Responsive ========== */
@media (max-width: 1024px) {
    :root {
        --sidebar-w: 220px;
    }

    .kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 720px) {
    .app-layout {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: fixed;
        left: -100%;
        z-index: 100;
        width: 260px;
        transition: left 200ms;
    }

        .sidebar.open {
            left: 0;
        }

    .page-content {
        padding: 18px;
    }

    .kpi-grid {
        grid-template-columns: 1fr;
    }

    .form-grid-2, .form-grid-3, .form-grid-4 {
        grid-template-columns: 1fr;
    }

    .filter-bar--card {
        flex-direction: column;
        align-items: stretch;
    }

        .filter-bar--card .search-input-wrap {
            max-width: none;
        }

    .filter-bar-reset {
        margin-left: 0;
    }
}

/* ========================================================================
   Midwest-style additions — patterns that appear across the new screenshots
   (booking stepper, tinted page title block, table action icons, pagination)
   ======================================================================== */

/* Stepper: horizontal numbered/labelled steps inside a card-like band */
.step-bar {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 16px;
    padding: 8px 0;
    margin-bottom: 18px;
}

    .step-bar .step {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 14px 18px;
        border-radius: 10px;
        background: var(--bg-surface);
        border: 1px solid var(--border);
        color: var(--text-muted);
        font-weight: 500;
        font-size: 14px;
        text-align: center;
    }

        .step-bar .step.is-active {
            background: var(--brand-tint);
            border-color: var(--brand-tint-2);
            color: var(--accent);
            font-weight: 700;
        }

        .step-bar .step.is-done {
            background: var(--bg-surface);
            color: var(--text-primary);
            border-color: var(--border);
        }

/* Page-title block: big bold title with optional breadcrumb beneath it */
.page-title {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.page-breadcrumb {
    color: var(--text-muted);
    font-size: 13px;
    margin-top: 2px;
}

    .page-breadcrumb a {
        color: var(--text-muted);
    }

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

/* Small icon-only action buttons used inside table rows (edit / delete) */
.icon-action {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-grid;
    place-items: center;
    transition: background 120ms, color 120ms;
}

    .icon-action:hover {
        background: var(--bg-soft);
        color: var(--text-primary);
    }

    .icon-action.is-danger:hover {
        background: var(--danger-bg);
        color: var(--danger-text);
    }

/* Pagination bar (Show N + numbered pages) */
.pagination-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 4px 4px;
    color: var(--text-secondary);
    font-size: 13px;
}

    .pagination-bar .pages {
        display: inline-flex;
        gap: 6px;
        align-items: center;
    }

    .pagination-bar .page-btn {
        min-width: 32px;
        height: 32px;
        border-radius: 8px;
        border: 1px solid var(--border);
        background: var(--bg-surface);
        color: var(--text-primary);
        cursor: pointer;
        padding: 0 8px;
        font-weight: 500;
    }

        .pagination-bar .page-btn:hover {
            background: var(--bg-soft);
        }

        .pagination-bar .page-btn.is-active {
            background: var(--accent);
            border-color: var(--accent);
            color: var(--text-inverse);
        }

        .pagination-bar .page-btn.is-ghost {
            background: transparent;
            border: 0;
        }

/* Avatar chip used inline beside a name in tables/lists */
.avatar-chip {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--brand-tint);
    color: var(--accent);
    display: inline-grid;
    place-items: center;
    font-size: 12px;
    font-weight: 700;
    margin-right: 10px;
    vertical-align: middle;
    flex-shrink: 0;
}

/* Address-tab style used on detail forms (Residential | Office) */
.section-tabs {
    display: inline-flex;
    gap: 18px;
    margin-left: auto;
    font-size: 14px;
}

    .section-tabs .stab {
        padding: 6px 2px;
        color: var(--text-secondary);
        cursor: pointer;
        border-bottom: 2px solid transparent;
        font-weight: 500;
    }

        .section-tabs .stab.is-active {
            color: var(--accent);
            border-bottom-color: var(--accent);
            font-weight: 700;
        }

/* Sidebar workspace switch link (Procurement ↔ Sales CRM) */
.sidebar-nav-item.workspace-switch {
    border: 1px dashed var(--border);
    color: var(--accent);
    font-weight: 600;
    margin-bottom: 6px;
}

    .sidebar-nav-item.workspace-switch:hover {
        background: var(--brand-tint);
        border-style: solid;
        border-color: var(--brand-tint-2);
    }

    .sidebar-nav-item.workspace-switch .nav-icon {
        color: var(--accent);
    }

/* Visual divider used between sidebar groups in the CRM menu */
.sidebar-divider {
    height: 1px;
    background: var(--border);
    margin: 14px 4px;
}

/* CRM page header block (matches "Add Customer", "Booking", "Customer" titles
   that appear at the top of each CRM page in the screenshots) */
.crm-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

    .crm-page-header .ph-title {
        font-size: 24px;
        font-weight: 800;
        letter-spacing: -0.01em;
    }

    .crm-page-header .ph-crumbs {
        color: var(--text-muted);
        font-size: 13px;
        margin-top: 2px;
    }

        .crm-page-header .ph-crumbs .current {
            color: var(--text-primary);
            font-weight: 500;
            margin-left: 4px;
        }

    .crm-page-header > div:first-child {
        flex: 0 0 auto;
    }

    .crm-page-header .ph-actions {
        display: flex;
        gap: 10px;
        align-items: center;
    }

        .crm-page-header .ph-actions .search-input-wrap {
            width: 280px;
        }

            .crm-page-header .ph-actions .search-input-wrap .form-control {
                background: var(--bg-surface);
                border: 1px solid var(--border);
            }

/* Filter icon button (used next to search on list pages) */
.filter-btn {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: var(--bg-surface);
    border: 1.5px solid var(--accent);
    color: var(--accent);
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 16px;
}

    .filter-btn:hover {
        background: var(--brand-tint);
    }

/* Small "Booked" / status chip used on booking screens */
.status-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 6px;
    border: 1px solid var(--success);
    background: var(--success-bg);
    color: var(--success-text);
    font-size: 12px;
    font-weight: 600;
}

    .status-chip.is-pending {
        border-color: var(--warning);
        background: var(--warning-bg);
        color: var(--warning-text);
    }

    .status-chip.is-cancelled {
        border-color: var(--danger);
        background: var(--danger-bg);
        color: var(--danger-text);
    }

/* Radio-card row used on the customer form ("Investor / Consumer",
   "Single / Married", "Resident / NRI / PIO") */
.radio-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    background: var(--bg-tint);
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-primary);
    margin-right: 12px;
    margin-bottom: 8px;
}

    .radio-pill input[type="radio"] {
        accent-color: var(--accent);
    }

    .radio-pill.is-active {
        background: var(--brand-tint);
        color: var(--accent);
        font-weight: 600;
    }

/* Google Material Icons / Material Symbols — preset sizes that play nicely
   with the existing button + nav styles. Use <span class="mi">name</span>
   or <span class="msi">name</span> (the latter is the variable-font Symbols). */
.mi, .msi {
    vertical-align: middle;
    line-height: 1;
    user-select: none;
    -webkit-font-smoothing: antialiased;
}

.mi {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    display: inline-block;
}

.msi {
    font-family: 'Material Symbols Outlined';
    font-size: 22px;
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
    display: inline-block;
}

.mi-sm {
    font-size: 16px;
}

.mi-md {
    font-size: 20px;
}

.mi-lg {
    font-size: 24px;
}

.mi-xl {
    font-size: 32px;
}

/* Tighten spacing when icons sit inside buttons */
.btn .mi, .btn .msi {
    margin-right: 6px;
}

    .btn .mi:last-child, .btn .msi:last-child {
        margin-right: 0;
        margin-left: 6px;
    }

    .btn .mi:only-child, .btn .msi:only-child {
        margin: 0;
    }

/* Square icon-only action button used in list-page row actions.
   Pairs with .btn-group inside table cells so multiple icon buttons sit
   flush. Color tints (edit/delete/view/approve) come from the standard
   .btn-outline / .btn-success / .btn-danger / .btn-outline-primary
   modifiers, but the icon glyph itself is the visual hook. */
.btn-icon {
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    line-height: 1;
}

    .btn-icon .mi, .btn-icon .msi {
        font-size: 22px;
        margin: 0;
    }

    .btn-icon.btn-sm {
        width: 30px;
        height: 30px;
    }

        .btn-icon.btn-sm .mi, .btn-icon.btn-sm .msi {
            font-size: 20px;
        }

.btn-group .btn-icon + .btn-icon {
    margin-left: 4px;
}

/* Sidebar nav rows: replace emoji glyphs with Material icons when present */
.sidebar-nav-item .msi, .sidebar-nav-item .mi {
    font-size: 18px;
    color: var(--text-secondary);
}

.sidebar-nav-item.active .msi, .sidebar-nav-item.active .mi {
    color: var(--accent);
}

/* Leaflet map container — used by the inventory layout/map view */
.leaflet-container {
    background: #EAEDF2;
    font-family: inherit;
}

.inv-marker {
    background: transparent !important;
    border: 0 !important;
}

    .inv-marker > div {
        transform: translate(-50%, -100%);
    }

/* Upload tile (the +Upload square at the top of the customer form) */
.upload-tile {
    width: 100px;
    height: 100px;
    border-radius: 8px;
    background: var(--bg-tint);
    display: grid;
    place-items: center;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 13px;
    text-align: center;
    line-height: 1.3;
    transition: background 120ms;
}

    .upload-tile:hover {
        background: var(--bg-soft);
    }

    .upload-tile .plus {
        font-size: 22px;
        display: block;
    }

/* =========================================================
   Booking wizard — 6-step tab card used on /crm/bookings/{id}.
   Each "tab" swaps the body of the card; the stepper at the
   top doubles as a clickable nav for stages already reached.
   ========================================================= */
.booking-wizard {
    padding: 22px;
}

    /* Booking screen uses white inputs in every state (idle / hover /
   focus / read-only) so fields stay legible against the tinted
   .bk-section bands. Scoped so other CRM pages keep their tinted
   field background. */
    .booking-wizard .form-control,
    .booking-wizard .form-select,
    .booking-wizard textarea.form-control {
        background: var(--bg-surface);
        border: 1px solid var(--border);
    }

        .booking-wizard .form-control:hover,
        .booking-wizard .form-select:hover,
        .booking-wizard textarea.form-control:hover {
            background: var(--bg-surface);
            border-color: var(--border);
        }

        .booking-wizard .form-control:focus,
        .booking-wizard .form-select:focus,
        .booking-wizard textarea.form-control:focus {
            background: var(--bg-surface);
            border-color: var(--accent);
        }

        .booking-wizard .form-control:disabled,
        .booking-wizard .form-select:disabled,
        .booking-wizard .form-control[readonly] {
            background: var(--bg-surface);
            color: var(--text-primary);
            border-color: var(--border);
        }

.bk-slab-total td {
    background: var(--bg-soft);
}

/* Sale Agreement / Sale Deed template preview + download toolbar in the
   booking wizard. The preview renders the merged template HTML; it's
   intentionally constrained to a fixed max-height with overflow so a
   long contract doesn't push the action bar off-screen. */
.bk-doc-toolbar {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
}

.bk-doc-preview {
    margin-top: 12px;
    padding: 18px 22px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.55;
    max-height: 480px;
    overflow-y: auto;
}

    .bk-doc-preview h1, .bk-doc-preview h2, .bk-doc-preview h3 {
        margin: 12px 0 6px;
    }

    .bk-doc-preview table {
        border-collapse: collapse;
        margin: 8px 0;
    }

    .bk-doc-preview td, .bk-doc-preview th {
        border: 1px solid var(--border);
        padding: 4px 8px;
    }

/* =========================================================
   Project card — used on /crm/projects. Aligns the badge +
   icon-button action row in the card footer so the buttons
   line up on the right at a consistent height.
   ========================================================= */
.project-card {
    display: flex;
    flex-direction: column;
    gap: 0;
}

    .project-card .pc-head {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 10px;
    }

    .project-card .pc-meta {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-top: 14px;
        font-size: 13px;
    }

    .project-card .pc-progress {
        margin-top: 14px;
    }

    .project-card .pc-progress-row {
        display: flex;
        justify-content: space-between;
        font-size: 12px;
    }

    .project-card .pc-bar {
        background: var(--bg-tint);
        border-radius: 999px;
        height: 6px;
        margin-top: 4px;
        overflow: hidden;
    }

    .project-card .pc-bar-fill {
        background: var(--accent);
        height: 100%;
    }

    .project-card .pc-foot {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        margin-top: 16px;
        padding-top: 14px;
        border-top: 1px solid var(--border-soft);
    }

    .project-card .pc-foot-left {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }

    .project-card .pc-foot .btn-group {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
    }

    .project-card .pc-foot .btn-icon {
        width: 34px;
        height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

.bk-stepper {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    margin-bottom: 22px;
}

.bk-step {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: center;
    cursor: pointer;
    user-select: none;
    transition: background 120ms, border-color 120ms, color 120ms;
}

    .bk-step:hover {
        background: var(--bg-soft);
    }

    .bk-step.is-active {
        background: var(--brand-tint);
        border-color: var(--accent);
        color: var(--accent);
    }

    .bk-step.is-done {
        border-color: var(--accent);
        color: var(--accent);
    }

    .bk-step.is-locked {
        cursor: not-allowed;
        color: var(--text-muted);
        background: var(--bg-surface);
    }

        .bk-step.is-locked:hover {
            background: var(--bg-surface);
        }

.bk-section {
    background: var(--bg-tint);
    border-radius: 10px;
    padding: 18px 20px;
    margin-bottom: 18px;
}

.bk-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    gap: 12px;
    flex-wrap: wrap;
}

.bk-section-title {
    font-weight: 700;
    font-size: 15px;
    color: var(--text-primary);
}

.bk-section-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: var(--text-secondary);
}

.bk-ref {
    color: var(--text-secondary);
}

    .bk-ref strong {
        color: var(--text-primary);
        font-weight: 600;
    }

.bk-add-link {
    color: var(--accent);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
}

    .bk-add-link:hover {
        text-decoration: underline;
    }

.bk-info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px 24px;
}

.bk-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bk-info-label {
    font-size: 12px;
    color: var(--text-muted);
}

.bk-info-value {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 500;
}

.bk-info-block {
    margin-top: 14px;
}

.bk-info-remark {
    font-weight: 400;
    line-height: 1.55;
}

.bk-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    color: var(--accent);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

    .bk-toggle:hover {
        text-decoration: underline;
    }

.bk-chevron {
    font-size: 10px;
}

.bk-split-input {
    display: flex;
    gap: 8px;
}

    .bk-split-input .form-select.bk-salutation {
        width: 78px;
        flex: 0 0 78px;
    }

    .bk-split-input .form-select.bk-ccode {
        width: 86px;
        flex: 0 0 86px;
    }

    .bk-split-input .form-control {
        flex: 1 1 auto;
    }

.bk-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 14px;
    color: var(--text-primary);
    cursor: pointer;
}

    .bk-checkbox input[type="checkbox"] {
        width: 16px;
        height: 16px;
        accent-color: var(--accent);
    }

.bk-check-row {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.bk-empty-row {
    padding: 10px 0;
    color: var(--text-muted);
    font-size: 13px;
}

.bk-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 6px;
}

.bk-confirm-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.bk-confirm-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .bk-confirm-card.highlight {
        background: var(--brand-tint);
        border-color: var(--accent);
    }

.bk-confirm-label {
    font-size: 12px;
    color: var(--text-muted);
}

.bk-confirm-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.bk-confirm-card.highlight .bk-confirm-value {
    color: var(--accent);
}

@media (max-width: 1100px) {
    .bk-stepper {
        grid-template-columns: repeat(3, 1fr);
    }

    .bk-info-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .bk-confirm-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 720px) {
    .bk-stepper {
        grid-template-columns: repeat(2, 1fr);
    }

    .bk-info-grid {
        grid-template-columns: 1fr;
    }

    .bk-confirm-grid {
        grid-template-columns: 1fr;
    }
}

/* ===================== Chatbot widget ===================== */
.cb-root {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 1500;
}

.cb-fab {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 55%, #6366f1 100%);
    color: #fff;
    font-size: 26px;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(14,165,233,.40);
    transition: transform .15s ease, box-shadow .2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

    .cb-fab:hover {
        transform: scale(1.08);
        box-shadow: 0 12px 28px rgba(99,102,241,.55);
    }

    .cb-fab svg {
        display: block;
    }

/* Idle genie on the floating button — gentle float + drop-shadow glow.
   The aura ring pulses outward so the closed bot still feels alive. */
.cb-fab-idle .cb-fab-genie {
    display: inline-block;
    animation: cbGenieFloat 3.2s ease-in-out infinite;
    filter: drop-shadow(0 0 6px rgba(255,255,255,.5));
}

.cb-fab-aura {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(167,139,250,.6);
    pointer-events: none;
    animation: cbAura 2.4s ease-out infinite;
}

@keyframes cbGenieFloat {
    0%,100% {
        transform: translateY(0) rotate(-3deg);
    }

    50% {
        transform: translateY(-4px) rotate( 3deg);
    }
}

@keyframes cbAura {
    0% {
        transform: scale(.85);
        opacity: .8;
    }

    100% {
        transform: scale(1.35);
        opacity: 0;
    }
}

.cb-panel {
    position: absolute;
    bottom: 72px;
    right: 0;
    width: 380px;
    max-width: calc(100vw - 32px);
    height: 540px;
    max-height: calc(100vh - 120px);
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(15,23,42,.25), 0 4px 12px rgba(15,23,42,.08);
    display: flex;
    flex-direction: column;
    animation: cbPop .15s ease-out;
}

@keyframes cbPop {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.cb-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 55%, #6366f1 100%);
    color: #fff;
}

    .cb-header svg {
        display: block;
    }

.cb-title {
    display: flex;
    gap: 12px;
    align-items: center;
}

.cb-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.cb-name {
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: .2px;
}

.cb-sub {
    font-size: 11px;
    opacity: .85;
}

/* Animated genie in the header.
   • The emoji bobs vertically and tilts slightly — gives the "summoned"
     feel without overdoing it.
   • Three sparkles orbit at different phases / radii so the animation
     never lines up identically twice. */
.cb-genie {
    position: relative;
    overflow: visible;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,.1));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), 0 0 12px rgba(167,139,250,.45);
}

.cb-genie-emoji {
    display: inline-block;
    animation: cbGenieBob 2.6s ease-in-out infinite;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.25));
}

.cb-genie-sparkle {
    position: absolute;
    font-size: 9px;
    pointer-events: none;
    opacity: 0;
    will-change: transform, opacity;
}

    .cb-genie-sparkle.s1 {
        top: -2px;
        right: -2px;
        animation: cbSparkleA 2.4s ease-in-out infinite;
    }

    .cb-genie-sparkle.s2 {
        bottom: 0;
        left: -4px;
        animation: cbSparkleB 2.4s ease-in-out infinite .6s;
    }

    .cb-genie-sparkle.s3 {
        top: 50%;
        right: -6px;
        animation: cbSparkleC 3.2s ease-in-out infinite 1.1s;
    }

@keyframes cbGenieBob {
    0%,100% {
        transform: translateY(0) rotate(-4deg);
    }

    50% {
        transform: translateY(-3px) rotate( 4deg);
    }
}

@keyframes cbSparkleA {
    0%,100% {
        transform: translate(0,0) scale(.4);
        opacity: 0;
    }

    40% {
        transform: translate(4px,-6px) scale(1);
        opacity: 1;
    }

    70% {
        transform: translate(8px,-12px) scale(.6);
        opacity: 0;
    }
}

@keyframes cbSparkleB {
    0%,100% {
        transform: translate(0,0) scale(.4);
        opacity: 0;
    }

    40% {
        transform: translate(-5px,4px) scale(1);
        opacity: 1;
    }

    70% {
        transform: translate(-10px,8px) scale(.6);
        opacity: 0;
    }
}

@keyframes cbSparkleC {
    0%,100% {
        transform: translate(0,0) scale(.3);
        opacity: 0;
    }

    50% {
        transform: translate(6px,2px) scale(.9);
        opacity: 1;
    }

    80% {
        transform: translate(12px,4px) scale(.4);
        opacity: 0;
    }
}

/* Respect reduced-motion preferences — drop all the float/sparkle
   animations and just show the emoji statically. */
@media (prefers-reduced-motion: reduce) {
    .cb-genie-emoji,
    .cb-genie-sparkle,
    .cb-fab-idle .cb-fab-genie,
    .cb-fab-aura {
        animation: none !important;
    }

    .cb-genie-sparkle {
        opacity: .85;
    }
}

.cb-close {
    background: rgba(255,255,255,.15);
    border: none;
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
}

    .cb-close:hover {
        background: rgba(255,255,255,.3);
    }

.cb-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cb-msg {
    max-width: 85%;
    padding: 10px 12px;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.4;
}

    .cb-msg.user {
        align-self: flex-end;
        background: #4f46e5;
        color: #fff;
        border-bottom-right-radius: 4px;
    }

    .cb-msg.bot {
        align-self: flex-start;
        background: #fff;
        color: #1e293b;
        border: 1px solid #e2e8f0;
        border-bottom-left-radius: 4px;
    }

    .cb-msg .cb-text strong {
        color: inherit;
    }

.cb-sugg {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.cb-pill {
    border: 1px solid #c7d2fe;
    background: #eef2ff;
    color: #4f46e5;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    cursor: pointer;
}

    .cb-pill:hover {
        background: #e0e7ff;
    }

.cb-footer {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid #e2e8f0;
    background: #fff;
}

.cb-input {
    flex: 1;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 13px;
    outline: none;
}

    .cb-input:focus {
        border-color: #4f46e5;
        box-shadow: 0 0 0 3px rgba(79,70,229,.12);
    }

.cb-send {
    border: none;
    background: #4f46e5;
    color: #fff;
    padding: 0 16px;
    border-radius: 10px;
    font-size: 13px;
    cursor: pointer;
    font-weight: 600;
}

    .cb-send:disabled {
        opacity: .5;
        cursor: not-allowed;
    }

.cb-typing {
    letter-spacing: 4px;
    animation: cbBlink 1s infinite;
}

@keyframes cbBlink {
    0%,100% {
        opacity: .3;
    }

    50% {
        opacity: 1;
    }
}

@media (max-width: 480px) {
    .cb-panel {
        width: calc(100vw - 32px);
        height: calc(100vh - 120px);
    }
}
/* ===================== validation ===================== */


.invalid-feedback {
    display: block;
    color: #dc3545 !important;
    font-size: 0.875rem;
}

.form-control.is-invalid,
.form-select.is-invalid {
    border-color: #dc3545 !important;
}
/* ===================== Horizontal-ScrollBar ===================== */

/* allow horizontal scrolling of the main area when sidebar reduces viewport width */
.main-area {
    overflow-x: auto; /* show horizontal scrollbar if inner content is wider than available space */
}

/* page content minimum width (forces scrollbar when sidebar is open) */
.page-inner {
    min-width: 1200px; /* adjust: 1100-1400 depending on your design */
    width: 100%;
    box-sizing: border-box;
    padding: 20px 24px;
}

    /* keep cards/tables stable inside the page-inner */
    .page-inner .card,
    .page-inner .prov-table {
        width: 100%;
        box-sizing: border-box;
    }