/* =============================================================================
   Kendo Grid Global Overrides — vManager Design System
   Source: Figma "vCom Network Mobile Purchases" — node 1850:12208
   Tokens: Shadow/xs · border/disabled (#dee2e6) · admin/spacing/md (16px) /xs (10px)
   Apply to: ALL .k-grid instances across the application
   ============================================================================= */

/* ---------------------------------------------------------------------------
   Grid container
   border: 1px solid #ced4da (admin/button/color/border/default)
   border-radius: 4px
   shadow: Shadow/xs — 1px 2px rgba(0,0,0,.10) + 1px 3px rgba(0,0,0,.05)
   --------------------------------------------------------------------------- */
.k-grid {
    /*border: 2px solid #ced4da;
    border-radius: 4px;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.10), 0px 1px 3px rgba(0, 0, 0, 0.05);*/
    background-color: #ffffff;
    font-family: 'Inter', sans-serif;
}
    /* Data-cell icons only (file / status glyphs on master rows).
       Do NOT use a descendant selector on td.k-table-td — nested-grid header
       filter icons live inside the parent .k-detail-cell and would inherit
       this 22px size, overlapping and clipping inner header titles. */
    .k-grid .k-grid-content > table > tbody > tr:not(.k-detail-row) > td .k-svg-icon,
    .k-grid .k-grid-table > tbody > tr:not(.k-detail-row) > td:not(.k-hierarchy-cell):not(.k-detail-cell) .k-svg-icon {
        width: 1.375rem;
        height: 1.375rem;
        flex-shrink: 0;
    }
    .k-table-group-row.k-grouping-row.k-table-row, .k-grid .k-grouping-row td {
        background-color: #FFFFFF !important;
    }
/* ---------------------------------------------------------------------------
   Grid header
   Components/Table-Alert/Header: Inter Bold 14px / lineHeight 21.7px
   --------------------------------------------------------------------------- */
.k-grid .k-grid-header {
    background-color: #ffffff;
    border-bottom: 1px solid #dee2e6;
}

    .k-grid .k-grid-header .k-header,
    .k-grid .k-grid-header th.k-header {
        font-family: 'Inter', sans-serif;
        font-size: 14px;
        font-weight: 700;
        line-height: 21.7px;
        color: #212529;
        background-color: #ffffff;
        background-image: none;
        border-color: #dee2e6;
        padding: 10px 16px;
        white-space: nowrap;
        border-inline-start-width: 0px !important;
        border-inline-end-width: 0px !important;
    }

/* Override Kendo default: show full header title, never ellipsis.
   Horizontal scroll on .k-grid-content handles overflow. */
.k-grid .k-grid-header th.k-header .k-column-title,
.k-grid .k-grid-header .k-cell-inner .k-column-title {
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: max-content;
}

/* Allow body to scroll horizontally when column totals exceed container */
.k-grid .k-grid-content {
    overflow-x: auto !important;
}

/* Kendo checkbox labels contain a non-breaking space that overflows narrow
   checkbox columns and causes "☐..." in both data and header cells.
   Collapse the label to zero width — it is a layout/click-target artefact
   and carries no visible text, so clipping it is always safe. */
.k-grid td .k-checkbox-label,
.k-grid th.k-header .k-checkbox-label {
    max-width: 0;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
}

/* Kendo base sets text-overflow:ellipsis on .k-table-td and .k-table-th, and
   table-layout:fixed triggers it even without explicit overflow:hidden.
   Centered cells hold checkboxes, icons, or short status values — never long
   prose that needs the "..." indicator.  Switch to clip (silent) for data
   cells.  NOTE: do NOT add overflow:hidden to th.k-header; that would clip
   the .k-column-title flex content and undo the full-header-title override. */
.k-grid .k-grid-content td.text-center,
.k-grid .k-grid-table td.text-center,
.k-grid td.k-table-td.text-center,
.k-grid .k-grid-content td.k-text-center,
.k-grid .k-grid-table td.k-text-center,
.k-grid td.k-table-td.k-text-center,
.k-grid .k-grid-content td[style*="text-align: center"],
.k-grid .k-grid-table td[style*="text-align: center"],
.k-grid td.k-table-td[style*="text-align: center"] {
    text-overflow: clip;
}

/* Headers: same rationale — only change text-overflow, never overflow, so the
   .k-column-title overflow:visible remains intact for full-title display. */
.k-grid .k-grid-header th.k-header.text-center,
.k-grid .k-grid-header th.k-header.justify-content-center,
.k-grid .k-grid-header th.k-header.k-text-center,
.k-grid .k-grid-header th.k-header[style*="text-align: center"] {
    text-overflow: clip;
}

.k-grid .k-grid-header .k-header .k-cell-inner,
.k-grid .k-grid-header .k-header .k-link {
    background: transparent;
    color: inherit;
    overflow: visible;
    white-space: nowrap;
}

/* Remove Kendo default header gradient / texture */
.k-grid .k-grid-header-wrap,
.k-grid .k-grid-header table {
    background-color: #ffffff;
    background-image: none;
}

/* ---------------------------------------------------------------------------
   Grid content rows and cells
   Row separator: border/disabled = #dee2e6
   Cell padding: admin/spacing/md (16px) horizontal, admin/spacing/xs (10px) vertical
   Body text: Inter Regular 14px / weight 400 / black
   --------------------------------------------------------------------------- */
    .k-grid .k-grid-content td,
    .k-grid .k-grid-table td,
    .k-grid td.k-table-td {
        font-family: 'Inter', sans-serif;
        font-size: 14px;
        font-weight: 400;
        line-height: 21.7px;
        color: #212529;
        background-color: #ffffff;
        border-color: #dee2e6;
        border-bottom: 1px solid #dee2e6;
        padding: 10px 16px;
        vertical-align: middle;
        border-inline-start-width: 0px !important;
        border-inline-end-width: 0px !important;
    }

/* Flat rows — remove alternating row colors (TR and TD, including nested grids).
   Kendo paints .k-table-alt-row on the <tr>; TDs must match so the stripe
   cannot show through, including inside .k-detail-cell inner grids. */
.k-grid .k-table-alt-row,
.k-grid tr.k-alt,
.k-grid .k-grid-content tr.k-alt,
.k-grid .k-grid-content tr.k-table-alt-row,
.k-grid .k-alt td,
.k-grid .k-table-alt-row td,
.k-grid .k-table-alt-row > .k-table-td,
.k-grid .k-grid-content tr.k-alt td,
.k-grid .k-grid-content tr.k-table-alt-row td,
.k-grid .k-detail-cell .k-grid .k-table-alt-row,
.k-grid .k-detail-cell .k-grid .k-table-alt-row td,
.k-grid .k-detail-cell .k-grid .k-table-alt-row > .k-table-td {
    background-color: #ffffff;
}

/* Row hover */
.k-grid .k-grid-content tr:hover td,
.k-grid .k-grid-content tr.k-master-row:hover td,
.k-grid .k-grid-content .k-master-row:hover td {
    background-color: #f8f9fa;
}

/* Selected row */
.k-grid .k-grid-content tr.k-selected td,
.k-grid .k-grid-content tr.k-state-selected td,
.k-grid .k-selected td {
    background-color: #e7f5ff;
    color: #212529;
}
.k-grid-header, .k-grouping-header {
    background-color: #fff;
    border-bottom:1px solid #dee2e6!important;
    border-top:none!important;
    color: #212529;
}
/* ---------------------------------------------------------------------------
   Pager / footer
   --------------------------------------------------------------------------- */
.k-grid .k-pager-wrap,
.k-grid .k-pager,
.k-grid .k-grid-pager {
    background-color: #F1F3F5;
    border-top: 1px solid #dee2e6;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #495057;
    padding: 6px 16px;
}

/* ---------------------------------------------------------------------------
   Filter row
   --------------------------------------------------------------------------- */
.k-grid .k-filter-row td,
.k-grid tr.k-filter-row td {
    background-color: #f8f9fa;
    border-color: #dee2e6;
    padding: 6px 16px;
}

/* ---------------------------------------------------------------------------
   Sort icons
   --------------------------------------------------------------------------- */
.k-grid .k-header .k-sort-icon,
.k-grid .k-header .k-i-sort-asc-sm,
.k-grid .k-header .k-i-sort-desc-sm,
.k-grid .k-header .k-svg-i-sort-asc-sm,
.k-grid .k-header .k-svg-i-sort-desc-sm {
    color: var(--kendo-color-primary, #1274AC);
}

/* ---------------------------------------------------------------------------
   Column resize handle
   --------------------------------------------------------------------------- */
.k-grid .k-column-resizer {
    border-right-color: #dee2e6;
}

/* ---------------------------------------------------------------------------
   Group header rows
   --------------------------------------------------------------------------- */
.k-grid .k-grouping-row td {
    background-color: #f1f3f5;
    border-color: #dee2e6;
    font-weight: 600;
    color: #343a40;
    padding: 8px 16px;
}

/* ---------------------------------------------------------------------------
   Detail rows (master-detail expand) and nested inner grids
   --------------------------------------------------------------------------- */
/* Detail-cell only — do not paint nested-grid <td>s gray (that created
   zebra striping against white alt rows). */
.k-grid .k-detail-row > td.k-detail-cell,
.k-grid .k-detail-row > .k-table-td.k-detail-cell {
    padding: 12px 16px 16px;
    background-color: #f8f9fa;
    border-color: #dee2e6;
}

.k-grid .k-detail-cell > .k-grid {
    border: 1px solid #dee2e6;
    border-radius: 4px;
    overflow: hidden;
}

/* Nested inner-grid cells stay flat white — the parent detail-cell gray
   must not leak onto inner rows (that was the zebra stripe). */
.k-grid .k-detail-cell .k-grid .k-grid-content td,
.k-grid .k-detail-cell .k-grid td.k-table-td,
.k-grid .k-detail-cell .k-grid .k-table-row,
.k-grid .k-detail-cell .k-grid .k-table-alt-row {
    background-color: #ffffff;
}

/* Header / hierarchy / nested-grid icons stay at Kendo's 14px default so
   filter funnels do not overflow the title in cramped inner columns. */
.k-grid .k-grid-header .k-svg-icon,
.k-grid .k-hierarchy-cell .k-svg-icon,
.k-grid .k-detail-cell .k-svg-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.k-grid .k-grid-header .k-header .k-cell-inner {
    gap: 4px;
}

/* k-grid-sm (ComponentSize.Small) uses 4px/8px padding at higher specificity
   than the generic cell rule, which is why nested tables look cramped. */
.k-grid.k-grid-sm .k-grid-content td:not(.k-hierarchy-cell):not(.k-detail-cell),
.k-grid.k-grid-sm .k-grid-table td:not(.k-hierarchy-cell):not(.k-detail-cell),
.k-grid.k-grid-sm td.k-table-td:not(.k-hierarchy-cell):not(.k-detail-cell),
.k-grid .k-grid-sm .k-grid-content td:not(.k-hierarchy-cell):not(.k-detail-cell),
.k-grid .k-grid-sm .k-grid-table td:not(.k-hierarchy-cell):not(.k-detail-cell),
.k-grid .k-grid-sm td.k-table-td:not(.k-hierarchy-cell):not(.k-detail-cell) {
    padding: 10px 16px;
}

.k-grid.k-grid-sm .k-grid-header .k-header,
.k-grid.k-grid-sm .k-grid-header th.k-header,
.k-grid .k-grid-sm .k-grid-header .k-header,
.k-grid .k-grid-sm .k-grid-header th.k-header {
    padding: 10px 16px;
}

/* Undo k-grid-sm negative header margins that pull title text into the
   padding box and clip the first letter of nested-grid column names. */
.k-grid.k-grid-sm .k-table-th > .k-cell-inner,
.k-grid .k-grid-sm .k-table-th > .k-cell-inner,
.k-grid .k-detail-cell .k-grid .k-table-th > .k-cell-inner {
    margin: 0;
}

.k-grid.k-grid-sm .k-grid-header .k-table-th > .k-link,
.k-grid.k-grid-sm .k-table-th > .k-cell-inner > .k-link,
.k-grid .k-grid-sm .k-grid-header .k-table-th > .k-link,
.k-grid .k-grid-sm .k-table-th > .k-cell-inner > .k-link,
.k-grid .k-detail-cell .k-grid .k-table-th > .k-cell-inner > .k-link {
    margin: 0;
    padding: 0;
}

.k-grid.k-grid-sm .k-hierarchy-cell,
.k-grid .k-grid-sm .k-hierarchy-cell {
    padding: 0;
}

/* ---------------------------------------------------------------------------
   Last cell — suppress redundant right border
   --------------------------------------------------------------------------- */
.k-grid .k-grid-content td:last-child,
.k-grid .k-grid-header .k-header:last-child {
    border-right: none;
}

/* ---------------------------------------------------------------------------
   Column menu / filter icons — keep them using primary color
   --------------------------------------------------------------------------- */
.k-grid .k-grid-header .k-header .k-grid-filter,
.k-grid .k-grid-header .k-header .k-grid-column-menu {
    color: #868e96;
}
.k-grid .k-grid-header .k-header .k-grid-filter.k-active,
.k-grid .k-grid-header .k-header .k-grid-column-menu.k-active {
    color: var(--kendo-color-primary, #1274AC);
}

/* =============================================================================
   Network Intelligence plain-HTML tables (Telco / Cableco / Broadband)
   Class: .vm-ni-table  — same visual design as the Kendo grid overrides above
   Source: Figma node 1850:12208 — same design tokens as .k-grid
   ============================================================================= */

/* ---------------------------------------------------------------------------
   Table container
   Mirror: border 1px #ced4da · radius 4px · Shadow/xs
   --------------------------------------------------------------------------- */
table.vm-ni-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #ced4da;
    border-radius: 4px;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.10), 0px 1px 3px rgba(0, 0, 0, 0.05);
    background-color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    overflow: hidden;
}

/* Radius on corner cells so the border-radius is visible with collapsed cells */
table.vm-ni-table thead tr:first-child th:first-child,
table.vm-ni-table tbody tr:first-child td:first-child {
    border-top-left-radius: 4px;
}
table.vm-ni-table thead tr:first-child th:last-child,
table.vm-ni-table tbody tr:first-child td:last-child {
    border-top-right-radius: 4px;
}
/* Cancel body top-corners when a thead is present (e.g. Broadband).
   The thead cells already carry the correct radius; the first tbody row must be flat. */
table.vm-ni-table thead ~ tbody tr:first-child td:first-child {
    border-top-left-radius: 0;
}
table.vm-ni-table thead ~ tbody tr:first-child td:last-child {
    border-top-right-radius: 0;
}
table.vm-ni-table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 4px;
}
table.vm-ni-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 4px;
}

/* ---------------------------------------------------------------------------
   Header row
   Components/Table-Alert/Header: Inter Bold 14px / weight 700 / lineHeight 21.7px
   --------------------------------------------------------------------------- */
table.vm-ni-table thead tr th {
    font-family:  'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.55rem;
    color: #212529;
    background-color: #ffffff;
    border-bottom: 1px solid #dee2e6;
    border-right: 0px solid #dee2e6;
    padding: 10px 16px;
    white-space: nowrap;
    text-align: left;
}

table.vm-ni-table thead tr th:last-child {
    border-right: none;
}

/* ---------------------------------------------------------------------------
   Body cells
   Inter Regular 14px / weight 400 / lineHeight 21.7px
   Separator: border/disabled = #dee2e6
   Padding: spacing/xs (10px) × spacing/md (16px)
   --------------------------------------------------------------------------- */
table.vm-ni-table tbody tr td {
    font-family:  'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.55rem;
    color: #212529;
    background-color: #ffffff;
    border-bottom: 1px solid #dee2e6;
    border-right-width: 0px!important;
    border-left-width:0px!important;
    padding: 10px 16px;
    vertical-align: middle;
}

table.vm-ni-table tbody tr td:last-child {
    border-right: none;
}

/* No border on last row — the table container border handles the bottom edge */
table.vm-ni-table tbody tr:last-child td {
    border-bottom: none;
}
table.vm-ni-table .k-table-td, table.vm-ni-table .k-table-th, table.vm-ni-table td {
    border-inline-start-width: 0px !important;
}
.k-grid .k-table-td:first-child, .k-grid .k-table-th:first-child, .k-grid td:first-child {
    border-inline-start-width: 0px !important;
}
    /* ---------------------------------------------------------------------------
Row states — flat white rows (no striping), hover tint
--------------------------------------------------------------------------- */
table.vm-ni-table tbody tr {
    background-color: #ffffff;
}

table.vm-ni-table tbody tr:hover td {
    background-color: #f8f9fa;
}

/* Label column — slightly bolder weight for key/value rows (Telco, Cableco) */
table.vm-ni-table tbody tr td .k-font-medium,
table.vm-ni-table tbody tr td span.k-font-medium {
    font-weight: 500;
    color: #343a40;
}

/* =============================================================================
   Standalone k-table — Charts, Invoice detail, and other non-grid data tables
   These use Kendo's k-table CSS class but live OUTSIDE a .k-grid wrapper.
   :not(.k-grid-table):not(.k-grid-header-table) guards exclude the internal
   tables Kendo renders inside every .k-grid; those keep their own rules above.
   Design tokens: identical to .k-grid / .vm-ni-table above.
   ============================================================================= */

/* ---- Container / base ---- */
table.k-table:not(.k-grid-table):not(.k-grid-header-table) {
    width: 100%;
    background-color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    border-collapse: collapse;
}

/* ---- Header cells ---- */
table.k-table:not(.k-grid-table):not(.k-grid-header-table) .k-table-header th,
table.k-table:not(.k-grid-table):not(.k-grid-header-table) thead th {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.55rem;
    color: #212529;
    background-color: #ffffff;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 2px solid #dee2e6;
    padding: 10px 16px;
    white-space: nowrap;
    text-align: left;
    vertical-align: bottom;
}

/* ---- Body cells ---- */
table.k-table:not(.k-grid-table):not(.k-grid-header-table) .k-table-body td,
table.k-table:not(.k-grid-table):not(.k-grid-header-table) tbody td {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.55rem;
    color: #212529;
    background-color: #ffffff;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid #dee2e6;
    padding: 10px 16px;
    vertical-align: middle;
}

/* ---- Footer total row ---- */
table.k-table:not(.k-grid-table):not(.k-grid-header-table) .k-table-footer td,
table.k-table:not(.k-grid-table):not(.k-grid-header-table) tfoot td {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.55rem;
    color: #212529;
    background-color: #f1f3f5;
    border-top: 1px solid #dee2e6;
    border-bottom: none;
    border-left: none;
    border-right: none;
    padding: 10px 16px;
    vertical-align: middle;
}

/* ---- Flat rows — remove Kendo k-alt alternating background ---- */
table.k-table:not(.k-grid-table):not(.k-grid-header-table) .k-alt,
table.k-table:not(.k-grid-table):not(.k-grid-header-table) .k-alt td {
    background-color: #ffffff;
}

/* ---- Row hover ---- */
table.k-table:not(.k-grid-table):not(.k-grid-header-table) tbody tr:hover td {
    background-color: #f8f9fa;
}

/* ---- Remove cell borders added by Bootstrap table-bordered ---- */
table.k-table:not(.k-grid-table):not(.k-grid-header-table).table-bordered td,
table.k-table:not(.k-grid-table):not(.k-grid-header-table).table-bordered th {
    border-left: none;
    border-right: none;
    border-top: none;
}

/* ---- Nested Bootstrap sub-tables inside tree-row cells
        (Invoice "Charges By Type" expandable rows use table.table.table-sm) ---- */
table.k-table:not(.k-grid-table):not(.k-grid-header-table) td > table td {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.55rem;
    color: #212529;
    background-color: #ffffff;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid #dee2e6;
    padding: 8px 16px;
    vertical-align: middle;
}

table.k-table:not(.k-grid-table):not(.k-grid-header-table) td > table tr:hover td {
    background-color: #f8f9fa;
}

table.k-table:not(.k-grid-table):not(.k-grid-header-table) td > table tr:last-child td {
    border-bottom: none;
}

/* Footer Bootstrap table that follows the main k-table (Invoice detail total row) */
table.k-table:not(.k-grid-table):not(.k-grid-header-table) + table .k-table-footer td,
table.k-table:not(.k-grid-table):not(.k-grid-header-table) + table tfoot td {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.55rem;
    color: #212529;
    background-color: #f1f3f5;
    border-top: 2px solid #dee2e6;
    border-bottom: none;
    border-left: none;
    border-right: none;
    padding: 10px 16px;
    vertical-align: middle;
}

/* =============================================================================
   Price Request Status Badges
   Source: Figma "vCom Network Mobile Purchases" — node 1908:12436
   Tokens: Components/Badges/md — Inter Bold 11px, weight 700, letter-spacing 1.56px
   Colors: pending=#f97316 (orange), success=#198754 (green), info=#0d6efd (blue)
   ============================================================================= */
.pr-status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: 1.56px;
    text-transform: uppercase;
    color: #ffffff;
    white-space: nowrap;
}

.pr-status-badge--pending    { background-color: #FAB005; }
.pr-status-badge--ready      { background-color: #40C057; }
.pr-status-badge--partial    { background-color: #326FDE; }
.pr-status-badge--approved   { background-color: #868e96; }
.pr-status-badge--submitted  { background-color: #6c757d; }
.pr-status-badge--cancelled  { background-color: #6c757d; }
.pr-status-badge--default    { background-color: #6c757d; }

/* Price Request account detail service chips (pricing-details-filter-chip parity) */
.pr-account-service-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.pr-account-service-chip {
    display: inline-flex;
    align-items: center;
    background: #e9ecef;
    border-radius: 16px;
    padding: 4px 10px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    line-height: 1.2;
    color: #212529;
    white-space: nowrap;
}

/* =============================================================================
   InsightFilter Cards
   Source: Figma "vCom Network Mobile Purchases" — node 120:6170 (InsightFilter_group)
   Tokens: Shadow/xs, border/disabled (#dee2e6), border-radius 10px
   Layout: 5 cards (1 total + 4 status), 24px gap, height ~144px
   Colors: Pending #FAB005, Partial #326FDE, Ready #40C057, Approved #868e96
   ============================================================================= */
.pr-insight-filters {
    padding: 12px 8px 6px;
}

.pr-insight-row {
    display: flex;
    gap: 24px;
}

.pr-insight-card {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 10px;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.10), 0px 1px 1.5px rgba(0, 0, 0, 0.05);
    padding: 16px 20px 10px;
    min-height: 144px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
    user-select: none;
}

.pr-insight-card:hover:not(.pr-insight-card--loading) {
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.12), 0px 1px 2px rgba(0, 0, 0, 0.06);
    border-color: #ced4da;
}

.pr-insight-top {
    display: flex;
    flex-direction: column;
}

.pr-insight-count {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.3;
    color: #000000;
    white-space: nowrap;
}

.pr-insight-subtitle {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.16;
    color: #000000;
}

.pr-insight-status-row {
    display: flex;
    align-items: center;
    gap: 5px;
    padding-top: 6px;
    padding-bottom: 8px;
}

.pr-insight-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Status dot colors — aligned with Figma Indicator component palette */
.pr-insight-dot--pending  { background-color: #FAB005; }
.pr-insight-dot--partial  { background-color: #326FDE; }
.pr-insight-dot--ready    { background-color: #40C057; }
.pr-insight-dot--approved { background-color: #868e96; }

.pr-insight-status-label {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.16;
    color: #000000;
}

.pr-insight-view-all {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 30px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    color: #228be6;
    text-decoration: none;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
}

.pr-insight-view-all:hover {
    color: #1971c2;
    text-decoration: underline;
}

.pr-insight-view-all .k-icon {
    font-size: 12px;
    vertical-align: middle;
}

/* Skeleton loading animation */
@keyframes pr-shimmer {
    0%   { background-position: -600px 0; }
    100% { background-position: 600px 0; }
}

.pr-insight-card--loading {
    pointer-events: none;
}

.pr-insight-card--loading .pr-insight-count,
.pr-insight-card--loading .pr-insight-subtitle,
.pr-insight-card--loading .pr-insight-status-label,
.pr-insight-card--loading .pr-insight-view-all {
    color: transparent !important;
    border-radius: 4px;
    background: linear-gradient(90deg, #efefef 25%, #dedede 50%, #efefef 75%);
    background-size: 600px 100%;
    animation: pr-shimmer 1.4s ease-in-out infinite;
    user-select: none;
}

.pr-insight-card--loading .pr-insight-dot {
    background: linear-gradient(90deg, #efefef 25%, #dedede 50%, #efefef 75%) !important;
    background-size: 600px 100% !important;
    animation: pr-shimmer 1.4s ease-in-out infinite;
}

.pr-insight-card--loading .pr-insight-view-all .k-icon {
    visibility: hidden;
}

/* Stagger shimmer wave across all 5 cards */
.pr-insight-row .pr-insight-card--loading:nth-child(2) .pr-insight-count,
.pr-insight-row .pr-insight-card--loading:nth-child(2) .pr-insight-subtitle,
.pr-insight-row .pr-insight-card--loading:nth-child(2) .pr-insight-status-label,
.pr-insight-row .pr-insight-card--loading:nth-child(2) .pr-insight-view-all,
.pr-insight-row .pr-insight-card--loading:nth-child(2) .pr-insight-dot { animation-delay: 0.15s; }

.pr-insight-row .pr-insight-card--loading:nth-child(3) .pr-insight-count,
.pr-insight-row .pr-insight-card--loading:nth-child(3) .pr-insight-subtitle,
.pr-insight-row .pr-insight-card--loading:nth-child(3) .pr-insight-status-label,
.pr-insight-row .pr-insight-card--loading:nth-child(3) .pr-insight-view-all,
.pr-insight-row .pr-insight-card--loading:nth-child(3) .pr-insight-dot { animation-delay: 0.3s; }

.pr-insight-row .pr-insight-card--loading:nth-child(4) .pr-insight-count,
.pr-insight-row .pr-insight-card--loading:nth-child(4) .pr-insight-subtitle,
.pr-insight-row .pr-insight-card--loading:nth-child(4) .pr-insight-status-label,
.pr-insight-row .pr-insight-card--loading:nth-child(4) .pr-insight-view-all,
.pr-insight-row .pr-insight-card--loading:nth-child(4) .pr-insight-dot { animation-delay: 0.45s; }

.pr-insight-row .pr-insight-card--loading:nth-child(5) .pr-insight-count,
.pr-insight-row .pr-insight-card--loading:nth-child(5) .pr-insight-subtitle,
.pr-insight-row .pr-insight-card--loading:nth-child(5) .pr-insight-status-label,
.pr-insight-row .pr-insight-card--loading:nth-child(5) .pr-insight-view-all,
.pr-insight-row .pr-insight-card--loading:nth-child(5) .pr-insight-dot { animation-delay: 0.6s; }

/* Active state — accent border matching status color */
.pr-insight-card[data-status-key="total"].active {
    border-color: #228be6;
}
.pr-insight-card[data-status-key="pending"].active {
    border-color: #FAB005;
}
.pr-insight-card[data-status-key="partial"].active {
    border-color: #326FDE;
}
.pr-insight-card[data-status-key="ready"].active {
    border-color: #40C057;
}
.pr-insight-card[data-status-key="approved"].active {
    border-color: #868e96;
}

/* =============================================================================
   Table controls toolbar
   Source: Figma "vCom Network Mobile Purchases" — node 1908:12431
   Tokens: admin/button/height/xs 30px, admin/radius/sm 4px,
           admin/button/color/background/default #fff, border/default #ced4da,
           admin/spacing/xs 10px, admin/button/icon/size/xs 14px,
           Components/Button/xs 12px/600
   ============================================================================= */
.pr-table-controls {
    display: inline-flex;
    align-items: flex-end;
    gap: 10px;
}

.pr-table-controls .k-button {
    height: 30px;
    min-height: 30px;
    padding: 0 14px;
    border-radius: 4px;
    border-color: #ced4da;
    background-color: #ffffff;
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    color: #212529;
}

.pr-table-controls .k-button.k-icon-button {
    width: 30px;
    min-width: 30px;
    padding: 0;
}

.pr-table-controls .k-button .k-icon {
    font-size: 14px;
}

.pr-table-controls #FavoritesSpan .k-i-star.text-warning {
    color: #fab005 !important;
}

/* =============================================================================
   Customize Grid drawer
   Pattern: QuoteDetailReview pricing-details-filter-drawer (Filter Quotes)
   ============================================================================= */
.pr-customize-grid-drawer {
    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: none;
}

.pr-customize-grid-drawer.is-open {
    pointer-events: auto;
}

.pr-customize-grid-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(33, 37, 41, 0.35);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.pr-customize-grid-drawer.is-open .pr-customize-grid-drawer-backdrop {
    opacity: 1;
}

.pr-customize-grid-drawer-panel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    max-height: 85%;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    transform: translateY(-100%);
    transition: transform 0.25s ease;
    display: flex;
    flex-direction: column;
    border: solid 1px #dee2e6;
}

.pr-customize-grid-drawer.is-open .pr-customize-grid-drawer-panel {
    transform: translateY(0);
}

/* ----- Header ----- */
.pr-customize-grid-drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    border-bottom: 1px solid #dee2e6;
    background: #fff;
    flex-shrink: 0;
}

.pr-customize-grid-drawer-header h5 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #212529;
    line-height: 1.4;
}

.pr-customize-grid-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: none;
    border-radius: 4px;
    cursor: pointer;
    color: #6c757d;
    line-height: 1;
}

.pr-customize-grid-close-btn:hover {
    background-color: #f1f3f5;
    color: #212529;
}

/* ----- Body ----- */
.pr-customize-grid-drawer-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 20px;
}

/* ----- Footer ----- */
.pr-customize-grid-drawer-footer {
    flex-shrink: 0;
    border-top: 1px solid #dee2e6;
    padding: 12px 20px;
    background: #F1F3F5;
}

/* ----- Category header ----- */
.pr-customize-grid-category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.pr-customize-grid-category-title {
    font-size: 13px;
    font-weight: 700;
    color: #212529;
    letter-spacing: 0.01em;
}

/* ----- "Select all" link ----- */
.pr-customize-grid-select-all {
    border: none;
    background: none;
    padding: 0;
    font-size: 12px;
    font-weight: 500;
    color: #326fde;
    cursor: pointer;
    line-height: 1.4;
}

.pr-customize-grid-select-all:hover {
    text-decoration: underline;
    color: #1a57c8;
}

/* ----- Checkbox options grid ----- */
.pr-customize-grid-options {
    display: grid;
    grid-template-columns: repeat(4, minmax(200px, 1fr));
    gap: 4px 24px;
}

.pr-customize-grid-option {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 5px 6px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    color: #495057;
    user-select: none;
    line-height: 1.4;
}

.pr-customize-grid-option:hover {
    background-color: #f1f3f5;
}

.pr-customize-grid-option input[type="checkbox"] {
    width: 14px;
    height: 14px;
    margin: 0;
    flex-shrink: 0;
    accent-color: #326fde;
    cursor: pointer;
}

/* ----- Footer — Clear Selection button ----- */
.pr-customize-grid-clear-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: none;
    padding: 5px 0;
    font-size: 13px;
    font-weight: 500;
    color: #326fde;
    cursor: pointer;
    line-height: 1.4;
}

.pr-customize-grid-clear-btn:hover {
    color: #1a57c8;
    text-decoration: underline;
}

/* ----- Footer — selection summary text ----- */
.pr-customize-grid-summary {
    font-size: 13px;
    color: #6c757d;
}

/* ----- Loading state ----- */
.pr-customize-grid-drawer--loading .pr-customize-grid-options,
.pr-customize-grid-drawer--loading .pr-customize-grid-select-all {
    pointer-events: none;
    opacity: 0.6;
}

/* Anchor customize drawer overlay to the filters card */
.k-card.grid-filters {
    position: relative;
}

.k-card.grid-filters.pr-customize-grid-drawer-open {
    overflow: hidden;
}