/* ========================================
   E-INVOICES CONSOLIDATED STYLES
   All styles for Invoices, Transactions, Taxes, and Dashboard pages
   consolidated into a single file for global availability
   ======================================== */

/* ========================================
   CSS VARIABLES
   ======================================== */
:root {
    /* Invoice Edit - Green Theme */
    --ei-side-primary: var(--mud-palette-success);
    --ei-side-primary-light: var(--mud-palette-success);
    --ei-side-primary-bg: color-mix(in srgb, var(--mud-palette-success) 8%, var(--mud-palette-surface));
    --ei-side-primary-border: color-mix(in srgb, var(--mud-palette-success) 28%, transparent);

    /* Transaction Edit - Blue Theme */
    --ei-trans-blue: var(--mud-palette-info);
    --ei-trans-blue-light: var(--mud-palette-info);
    --ei-trans-blue-bg: color-mix(in srgb, var(--mud-palette-info) 8%, var(--mud-palette-surface));
    --ei-trans-blue-border: color-mix(in srgb, var(--mud-palette-info) 25%, transparent);

    /* Tax Edit - Orange Theme */
    --ei-tax-orange: var(--mud-palette-warning);
    --ei-tax-orange-light: var(--mud-palette-warning);
    --ei-tax-orange-bg: color-mix(in srgb, var(--mud-palette-warning) 8%, var(--mud-palette-surface));
    --ei-tax-orange-border: color-mix(in srgb, var(--mud-palette-warning) 28%, transparent);

    /* Shared Accent Colors */
    --ei-accent-teal: var(--mud-palette-tertiary, var(--mud-palette-info));
    --ei-accent-teal-light: color-mix(in srgb, var(--mud-palette-info) 8%, var(--mud-palette-surface));
    --ei-accent-green: var(--mud-palette-success);
    --ei-accent-green-light: color-mix(in srgb, var(--mud-palette-success) 8%, var(--mud-palette-surface));
    --ei-accent-blue: var(--mud-palette-info);
    --ei-accent-blue-light: color-mix(in srgb, var(--mud-palette-info) 10%, var(--mud-palette-surface));
    --ei-accent-red: var(--mud-palette-error);
    --ei-accent-red-light: color-mix(in srgb, var(--mud-palette-error) 10%, var(--mud-palette-surface));
    --ei-accent-orange-light: color-mix(in srgb, var(--mud-palette-warning) 10%, var(--mud-palette-surface));

    /* Common variables */
    --ei-radius: 14px;
    --ei-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
    --ei-muted: rgba(127, 127, 127, 0.24);

    /* Expanded row colors */
    --ei-expanded-bg: color-mix(in srgb, var(--mud-palette-success) 12%, transparent);
    --ei-expanded-bg-hover: color-mix(in srgb, var(--mud-palette-success) 16%, transparent);
    --ei-expanded-bg-strong: color-mix(in srgb, var(--mud-palette-success) 22%, var(--mud-palette-surface));
    --ei-expanded-bg-strong-hover: color-mix(in srgb, var(--mud-palette-success) 28%, var(--mud-palette-surface));
    --ei-expanded-rail: var(--mud-palette-success);
    --ei-expanded-border: color-mix(in srgb, var(--mud-palette-success) 28%, transparent);
}

.mud-theme-dark {
    --ei-side-primary-bg: color-mix(in srgb, var(--mud-palette-success) 10%, var(--mud-palette-surface));
    --ei-side-primary-border: color-mix(in srgb, var(--mud-palette-success) 28%, transparent);
    --ei-trans-blue-bg: color-mix(in srgb, var(--mud-palette-info) 10%, var(--mud-palette-surface));
    --ei-trans-blue-border: color-mix(in srgb, var(--mud-palette-info) 25%, transparent);
    --ei-tax-orange-bg: color-mix(in srgb, var(--mud-palette-warning) 10%, var(--mud-palette-surface));
    --ei-tax-orange-border: color-mix(in srgb, var(--mud-palette-warning) 28%, transparent);
    --ei-accent-teal-light: color-mix(in srgb, var(--mud-palette-tertiary, var(--mud-palette-info)) 10%, var(--mud-palette-surface));
    --ei-accent-green-light: color-mix(in srgb, var(--mud-palette-success) 10%, var(--mud-palette-surface));
    --ei-accent-blue-light: color-mix(in srgb, var(--mud-palette-info) 10%, var(--mud-palette-surface));
    --ei-accent-red-light: color-mix(in srgb, var(--mud-palette-error) 10%, var(--mud-palette-surface));
    --ei-accent-orange-light: color-mix(in srgb, var(--mud-palette-warning) 10%, var(--mud-palette-surface));
}

/* ========================================
   CRITICAL FIX: FORCE SHOW ACTIONS COLUMN
   For subdetails tables (taxes embedded)
   ======================================== */
.ei-subdetails table thead tr th:first-child,
.ei-subdetails table tbody tr td:first-child {
    display: table-cell !important;
    width: auto !important;
    min-width: 70px !important;
    max-width: none !important;
    padding: 6px 16px !important;
    margin: 0 !important;
    border: inherit !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    height: auto !important;
}

.ei-subdetails .eg-table-shell table thead tr th:first-child,
.ei-subdetails .eg-table-shell table tbody tr td:first-child {
    display: table-cell !important;
    width: auto !important;
    min-width: 70px !important;
    max-width: none !important;
    padding: 6px 16px !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.ei-subdetails .mud-table table thead tr th:first-child,
.ei-subdetails .mud-table table tbody tr td:first-child,
.ei-subdetails .mud-table-container table thead tr th:first-child,
.ei-subdetails .mud-table-container table tbody tr td:first-child {
    display: table-cell !important;
    width: auto !important;
    min-width: 70px !important;
    max-width: none !important;
    padding: 6px 16px !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.ei-details .ei-subdetails table thead tr th:first-child,
.ei-details .ei-subdetails table tbody tr td:first-child,
.ei-details .ei-subdetail-body .ei-subdetails table thead tr th:first-child,
.ei-details .ei-subdetail-body .ei-subdetails table tbody tr td:first-child {
    display: table-cell !important;
    width: auto !important;
    min-width: 70px !important;
    max-width: none !important;
    padding: 6px 16px !important;
    visibility: visible !important;
    opacity: 1 !important;
}

div.ei-subdetails table > thead > tr > th:first-of-type,
div.ei-subdetails table > tbody > tr > td:first-of-type {
    display: table-cell !important;
    width: auto !important;
    min-width: 70px !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 6px 16px !important;
}

/* ========================================
   INVOICES PAGE STYLES
   ======================================== */
.ei-invoices-page {
    --ei-border: 1px solid var(--mud-palette-lines-default);
}

.ei-title {
    font-weight: 800;
    letter-spacing: -0.25px;
}

.ei-header-actions .mud-button-root {
    border-radius: 10px;
}

.ei-surface {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--ei-radius);
}

/* KPI Grid */
.ei-kpi-grid {
    margin-top: 4px;
}

.ei-kpi {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)), var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--ei-radius);
    padding: 18px 16px;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    min-height: 100px;
    position: relative;
    overflow: hidden;
}

.ei-kpi::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.06), transparent 70%);
    pointer-events: none;
}

.ei-kpi:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
    border-color: rgba(127, 127, 127, 0.35);
}

.ei-kpi:focus,
.ei-kpi:focus-visible {
    outline: 2px solid rgba(25, 118, 210, 0.5);
    outline-offset: 2px;
}

.ei-kpi:active {
    transform: translateY(-1px);
}

.ei-kpi-label {
    opacity: 0.82;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ei-kpi-value {
    font-weight: 900;
    letter-spacing: -0.4px;
    line-height: 1.05;
}

.ei-kpi-foot {
    margin-top: 6px;
    opacity: 0.75;
}

.ei-kpi-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.ei-kpi-icon-primary {
    background: linear-gradient(135deg, var(--mud-palette-primary) 0%, var(--mud-palette-primary-darken) 100%);
}

.ei-kpi-icon-success {
    background: linear-gradient(135deg, var(--mud-palette-success) 0%, color-mix(in srgb, var(--mud-palette-success) 75%, black) 100%);
}

.ei-kpi-icon-warning {
    background: linear-gradient(135deg, var(--mud-palette-warning) 0%, color-mix(in srgb, var(--mud-palette-warning) 75%, black) 100%);
}

.ei-kpi-icon-error {
    background: linear-gradient(135deg, var(--mud-palette-error) 0%, color-mix(in srgb, var(--mud-palette-error) 75%, black) 100%);
}

.ei-kpi-icon-info {
    background: linear-gradient(135deg, var(--mud-palette-info) 0%, color-mix(in srgb, var(--mud-palette-info) 75%, black) 100%);
}

.ei-kpi-icon-default {
    background: linear-gradient(135deg, var(--mud-palette-text-secondary) 0%, color-mix(in srgb, var(--mud-palette-text-secondary) 75%, black) 100%);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--mud-palette-text-secondary) 25%, transparent);
}

/* Compact one-row KPI strip (Invoices list) */
.ei-kpi-strip {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 8px;
}

@media (max-width: 1400px) {
    .ei-kpi-strip {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .ei-kpi-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.ei-kpi-strip > .mud-tooltip-root {
    min-width: 0;
    display: block;
}

.ei-kpi-tile {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid rgba(127, 127, 127, 0.18);
    background: var(--mud-palette-surface);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.ei-kpi-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.10);
    border-color: rgba(127, 127, 127, 0.35);
}

.ei-kpi-tile:focus-visible {
    outline: 2px solid rgba(25, 118, 210, 0.5);
    outline-offset: 2px;
}

.ei-kpi-tile-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}

.ei-kpi-tile-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.15;
}

.ei-kpi-tile-value {
    font-weight: 900;
    font-size: 1.05rem;
    letter-spacing: -0.3px;
}

.ei-kpi-tile-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ei-kpi-tile-empty {
    opacity: 0.55;
}

.ei-kpi-tile-empty:hover {
    opacity: 1;
}

.ei-kpi-tile-active {
    border-color: var(--mud-palette-primary);
    box-shadow: inset 0 0 0 1px var(--mud-palette-primary);
}

/* Table Toolbar */
.ei-table-toolbar {
    padding: 10px 6px;
    gap: 12px;
    border-bottom: 1px solid var(--ei-muted);
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)), var(--mud-palette-surface);
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    position: sticky;
    top: 0;
    z-index: 4;
    backdrop-filter: blur(10px);
}

.ei-table-toolbar .mud-button-root,
.ei-table-toolbar .mud-chip-root {
    height: 32px;
}

.ei-filter-badge {
    border-radius: 999px;
    padding: 0 6px;
    height: 18px;
    font-weight: 800;
    min-width: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Expanded Invoice Row */
.ei-child-row {
    background: transparent;
}

.ei-expanded-invoice-row {
    background: var(--ei-expanded-bg-strong) !important;
    box-shadow: inset 5px 0 0 var(--ei-expanded-rail) !important;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.ei-expanded-invoice-row:hover {
    background: var(--ei-expanded-bg-strong-hover) !important;
}

.ei-expanded-invoice-row td {
    border-top: 1px solid var(--ei-expanded-border) !important;
    border-bottom: 1px solid var(--ei-expanded-border) !important;
}

.ei-expanded-invoice-row .mud-icon-button .mud-icon-root {
    color: var(--mud-palette-success);
}

.ei-child-surface {
    position: relative;
    margin: 8px 12px 16px 12px;
    padding: 12px;
    background: color-mix(in srgb, var(--mud-palette-success) 10%, var(--mud-palette-surface));
    border: 2px solid color-mix(in srgb, var(--mud-palette-success) 28%, var(--mud-palette-lines-default));
    border-radius: 14px;
    overflow: hidden;
}

.ei-child-rail {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: linear-gradient(180deg, var(--mud-palette-success), color-mix(in srgb, var(--mud-palette-success) 35%, transparent));
}

.ei-inline-summary {
    border-radius: 12px;
    border: 2px solid color-mix(in srgb, var(--mud-palette-success) 35%, transparent);
    background: color-mix(in srgb, var(--mud-palette-success) 10%, var(--mud-palette-surface));
}

/* ========================================
   INVOICE EDIT SIDEBAR (GREEN THEME)
   ======================================== */
.ei-sticky-side {
    position: sticky;
    top: 12px;
}

.ei-side-card {
    background: var(--mud-palette-surface);
    border: 1px solid rgba(25, 118, 210, 0.15);
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.ei-side-card:hover {
    box-shadow: 0 6px 24px rgba(25, 118, 210, 0.1);
    transform: translateY(-1px);
}

/* Hero Card - Invoice Header (Green) */
.ei-side-card-hero {
    border: 1px solid var(--ei-side-primary);
    background: linear-gradient(180deg, var(--ei-side-primary-bg), var(--mud-palette-surface));
}

.ei-side-hero-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: linear-gradient(135deg, var(--ei-side-primary) 0%, var(--ei-side-primary-light) 100%);
    gap: 8px;
    position: relative;
    overflow: hidden;
}

.ei-side-hero-header::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
}

.ei-side-hero-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
    position: relative;
    z-index: 1;
}

.ei-side-hero-label {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 600;
}

.ei-side-hero-title {
    color: white;
    font-weight: 800;
    letter-spacing: -0.3px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.ei-status-chip {
    flex-shrink: 0;
    font-weight: 700;
    font-size: 0.65rem;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    position: relative;
    z-index: 1;
    height: 22px;
    background: rgba(255, 255, 255, 0.95) !important;
    color: var(--ei-side-primary) !important;
}

.ei-side-info-grid {
    padding: 10px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ei-side-info-row {
    display: grid;
    grid-template-columns: 26px 1fr auto;
    align-items: center;
    gap: 8px;
}

.ei-side-info-icon {
    width: 26px;
    height: 26px;
    min-width: 26px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ei-accent-blue-light);
    color: var(--ei-accent-blue);
}

.ei-side-info-icon .mud-icon-root,
.ei-side-info-icon svg {
    font-size: 0.875rem !important;
    width: 14px !important;
    height: 14px !important;
}

.ei-side-info-icon-primary {
    background: color-mix(in srgb, var(--mud-palette-info) 14%, var(--mud-palette-surface));
    color: var(--mud-palette-info);
}

.ei-side-info-label {
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
}

.ei-side-info-value {
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--mud-palette-text-primary);
    text-align: end;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ei-line-items-badge {
    font-weight: 800;
    font-size: 0.7rem;
    min-width: 50px;
    height: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(25, 118, 210, 0.25);
}

/* Calculation Card (Teal Theme) */
.ei-side-card-totals {
    background: linear-gradient(180deg, var(--ei-accent-teal-light), var(--mud-palette-surface));
    border-color: rgba(0, 137, 123, 0.2);
}

.ei-side-card-totals:hover {
    box-shadow: 0 6px 24px rgba(0, 137, 123, 0.1);
}

.ei-side-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px 8px;
    border-bottom: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.05));
}

.ei-side-card-header-avatar {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    font-size: 0.875rem !important;
}

.ei-side-card-header-avatar .mud-icon-root {
    font-size: 1rem !important;
    color: white !important;
}

.ei-side-card-header-avatar-teal {
    background: linear-gradient(135deg, var(--mud-palette-info) 0%, color-mix(in srgb, var(--mud-palette-info) 75%, black) 100%) !important;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--mud-palette-info) 25%, transparent);
}

.ei-side-card-header-avatar-warning {
    background: linear-gradient(135deg, var(--mud-palette-warning) 0%, color-mix(in srgb, var(--mud-palette-warning) 75%, black) 100%) !important;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--mud-palette-warning) 25%, transparent);
}

.ei-side-card-header-avatar-blue {
    background: linear-gradient(135deg, var(--mud-palette-info) 0%, color-mix(in srgb, var(--mud-palette-info) 75%, black) 100%) !important;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--mud-palette-info) 25%, transparent);
}

.ei-side-card-title {
    font-weight: 700;
    letter-spacing: -0.2px;
    color: var(--mud-palette-text-primary);
    font-size: 0.8125rem;
}

.ei-totals-grid {
    padding: 8px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ei-totals-row {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 8px;
    transition: background 0.15s ease;
}

.ei-totals-row:hover {
    background: color-mix(in srgb, var(--mud-palette-surface) 94%, var(--mud-palette-text-primary) 6%);
}

.ei-totals-row-icon {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 137, 123, 0.08);
    color: #00897b;
}

.ei-totals-row-icon .mud-icon-root,
.ei-totals-row-icon svg {
    font-size: 0.8rem !important;
    width: 14px !important;
    height: 14px !important;
}

.ei-totals-row-icon-sales {
    background: var(--ei-accent-blue-light);
    color: var(--ei-accent-blue);
}

.ei-totals-row-icon-discount {
    background: var(--ei-accent-red-light);
    color: var(--ei-accent-red);
}

.ei-totals-row-icon-tax {
    background: var(--ei-accent-blue-light);
    color: var(--ei-accent-blue);
}

.ei-totals-row-icon-total {
    background: linear-gradient(135deg, var(--ei-accent-green) 0%, #2e7d32 100%);
    color: white;
}

.ei-totals-row-sales {
    background: color-mix(in srgb, var(--mud-palette-info) 8%, var(--mud-palette-surface));
}

.ei-totals-row-sales:hover {
    background: color-mix(in srgb, var(--mud-palette-info) 16%, var(--mud-palette-surface));
}

.ei-totals-row-discount {
    background: color-mix(in srgb, var(--mud-palette-error) 8%, var(--mud-palette-surface));
}

.ei-totals-row-discount:hover {
    background: color-mix(in srgb, var(--mud-palette-error) 16%, var(--mud-palette-surface));
}

.ei-totals-row-tax {
    background: color-mix(in srgb, var(--mud-palette-info) 8%, var(--mud-palette-surface));
}

.ei-totals-row-tax:hover {
    background: color-mix(in srgb, var(--mud-palette-info) 16%, var(--mud-palette-surface));
}

.ei-totals-label {
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
}

.ei-totals-value {
    font-weight: 700;
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
    text-align: end;
}

.ei-totals-sales {
    color: var(--mud-palette-info);
}

.ei-totals-discount {
    color: var(--mud-palette-error);
}

.ei-totals-tax {
    color: var(--mud-palette-info);
}

.ei-totals-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ei-accent-green), transparent);
    margin: 4px 0;
    border-radius: 1px;
}

.ei-totals-row-total {
    padding: 10px 12px;
    background: color-mix(in srgb, var(--mud-palette-success) 12%, var(--mud-palette-surface));
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-success) 28%, transparent);
    margin-top: 2px;
}

.ei-totals-row-total:hover {
    background: color-mix(in srgb, var(--mud-palette-success) 18%, var(--mud-palette-surface));
}

.ei-totals-total-label {
    font-weight: 800;
    color: var(--mud-palette-text-primary);
    font-size: 0.8125rem;
    letter-spacing: -0.2px;
}

.ei-totals-total-value {
    font-weight: 900;
    color: var(--mud-palette-success);
    letter-spacing: -0.3px;
    font-size: 1rem;
}

/* Actions Card (Orange Theme) */
.ei-side-card-actions {
    background: linear-gradient(180deg, var(--ei-accent-orange-light), var(--mud-palette-surface));
    border-color: rgba(245, 124, 0, 0.15);
}

.ei-actions-stack {
    padding: 10px 14px 14px;
}

.ei-action-btn {
    border-radius: 10px !important;
    font-weight: 600;
    letter-spacing: -0.1px;
    transition: all 0.15s ease;
}

.ei-action-btn:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.ei-action-btn-primary {
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.25);
}

.ei-action-btn-primary:not(:disabled):hover {
    box-shadow: 0 4px 16px rgba(76, 175, 80, 0.35);
}

.ei-action-btn-validate {
    border-width: 2px;
}

.ei-action-btn-text {
    opacity: 0.85;
}

.ei-action-btn-text:hover {
    opacity: 1;
    background: var(--mud-palette-action-default-hover);
}

/* Help Card (Blue Theme) */
.ei-side-card-help {
    background: linear-gradient(180deg, var(--ei-accent-blue-light), var(--mud-palette-surface));
    border-color: rgba(25, 118, 210, 0.15);
}

.ei-side-card-help:hover {
    box-shadow: 0 6px 24px rgba(25, 118, 210, 0.08);
}

/* Section Headers */
.ei-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 0;
    flex-wrap: wrap;
}

.ei-section-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--ei-side-primary) 0%, var(--ei-side-primary-light) 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.ei-section-icon .mud-icon-root,
.ei-section-icon svg {
    font-size: 1rem !important;
    color: white !important;
    fill: white !important;
}

.ei-section-icon-warning {
    background: linear-gradient(135deg, var(--mud-palette-warning) 0%, color-mix(in srgb, var(--mud-palette-warning) 75%, black) 100%) !important;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--mud-palette-warning) 25%, transparent);
}

.ei-section-icon-teal {
    background: linear-gradient(135deg, var(--mud-palette-info) 0%, color-mix(in srgb, var(--mud-palette-info) 75%, black) 100%) !important;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--mud-palette-info) 25%, transparent);
}

.ei-section-titles {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ei-section-title {
    font-weight: 700;
    letter-spacing: -0.2px;
    color: var(--mud-palette-text-primary);
}

/* ========================================
   TRANSACTIONS EMBEDDED STYLES
   ======================================== */
.ei-details {
    --ei-muted: rgba(127, 127, 127, 0.24);
}

.ei-details-header {
    padding: 6px 4px 2px 4px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--mud-palette-info) 6%, var(--mud-palette-surface)), transparent);
    border-radius: var(--ei-radius) var(--ei-radius) 0 0;
}

.ei-details-title {
    font-weight: 800;
    letter-spacing: -0.2px;
}

.ei-level-badge {
    box-shadow: 0 4px 12px rgba(25, 118, 210, 0.2);
    width: 32px !important;
    height: 32px !important;
}

.ei-level-badge .mud-icon-root {
    font-size: 1rem !important;
}

.ei-pill {
    border-radius: 999px;
    font-weight: 600;
}

.ei-pill-lines {
    box-shadow: 0 2px 6px rgba(76, 175, 80, 0.25);
}

.ei-pill-total strong {
    font-weight: 800;
    margin-inline-start: 4px;
}

.ei-pill-hint {
    opacity: 0.85;
}

.ei-btn {
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.15s ease;
}

.ei-btn:not(:disabled):hover {
    transform: translateY(-1px);
}

.ei-btn-collapse {
    border-color: var(--ei-muted);
}

.ei-btn-group {
    border-radius: 10px;
    overflow: hidden;
}

.ei-btn-group .mud-button-root {
    border-radius: 0;
    font-weight: 600;
}

/* KPI Tiles for Transactions */
.ei-kpis {
    margin-top: 4px;
}

.ei-kpi-tile {
    border: 1px solid var(--ei-muted);
    border-radius: 12px;
    background: var(--mud-palette-surface);
    padding: 12px 14px;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    position: relative;
    overflow: hidden;
}

.ei-kpi-tile::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 60px;
    background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.04), transparent 70%);
    pointer-events: none;
}

.ei-kpi-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    border-color: rgba(127, 127, 127, 0.35);
}

.ei-kpi-tile-discount {
    background: linear-gradient(180deg, color-mix(in srgb, var(--mud-palette-error) 8%, var(--mud-palette-surface)), transparent);
    border-color: color-mix(in srgb, var(--mud-palette-error) 25%, transparent);
}

.ei-kpi-tile-discount:hover {
    border-color: color-mix(in srgb, var(--mud-palette-error) 40%, transparent);
}

.ei-kpi-tile-tax {
    background: linear-gradient(180deg, color-mix(in srgb, var(--mud-palette-warning) 8%, var(--mud-palette-surface)), transparent);
    border-color: color-mix(in srgb, var(--mud-palette-warning) 28%, transparent);
}

.ei-kpi-tile-tax:hover {
    border-color: color-mix(in srgb, var(--mud-palette-warning) 40%, transparent);
}

.ei-kpi-tile-total {
    background: linear-gradient(180deg, color-mix(in srgb, var(--mud-palette-success) 8%, var(--mud-palette-surface)), transparent);
    border-color: color-mix(in srgb, var(--mud-palette-success) 28%, transparent);
}

.ei-kpi-tile-total:hover {
    border-color: color-mix(in srgb, var(--mud-palette-success) 40%, transparent);
}

.ei-kpi-strong {
    font-weight: 900;
    letter-spacing: -0.3px;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.ei-kpi-neg {
    color: var(--mud-palette-error);
}

.ei-kpi-pos {
    color: var(--mud-palette-success);
}

/* Transaction Details Surface */
.ei-details-surface {
    border: 1px solid var(--ei-muted);
    border-radius: var(--ei-radius);
    overflow: hidden;
    background: var(--mud-palette-surface);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.ei-details-toolbar {
    padding: 10px 12px;
    border-bottom: 1px solid var(--ei-muted);
    background: linear-gradient(180deg, color-mix(in srgb, var(--mud-palette-info) 5%, var(--mud-palette-surface)), transparent), var(--mud-palette-surface);
}

.ei-toolbar-left {
    gap: 8px;
}

/* Subdetail (Taxes) */
.ei-subdetail-row {
    background: transparent !important;
}

.ei-subdetail-surface {
    position: relative;
    margin: 8px 12px 12px;
    padding: 0;
    background: color-mix(in srgb, var(--mud-palette-warning) 8%, var(--mud-palette-surface));
    border: 2px solid color-mix(in srgb, var(--mud-palette-warning) 28%, var(--mud-palette-lines-default));
    border-radius: 12px;
    overflow: hidden;
}

.ei-subdetail-rail {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--mud-palette-warning), color-mix(in srgb, var(--mud-palette-warning) 35%, transparent));
}

.ei-subdetail-head {
    padding: 10px 16px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--mud-palette-warning) 10%, var(--mud-palette-surface)), transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--mud-palette-warning) 20%, transparent);
}

.ei-subdetail-body {
    padding: 8px 12px 12px;
}

/* Expanded Transaction Row */
.ei-expanded-row {
    background: color-mix(in srgb, var(--mud-palette-warning) 22%, var(--mud-palette-surface)) !important;
    box-shadow: inset 4px 0 0 var(--mud-palette-warning) !important;
}

.ei-expanded-row:hover {
    background: color-mix(in srgb, var(--mud-palette-warning) 28%, var(--mud-palette-surface)) !important;
}

.ei-expanded-row td {
    border-top: 1px solid color-mix(in srgb, var(--mud-palette-warning) 28%, transparent) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--mud-palette-warning) 28%, transparent) !important;
}

.ei-expand-btn {
    transition: transform 0.15s ease, color 0.15s ease;
}

.ei-expand-btn:hover {
    color: var(--mud-palette-warning);
}

/* ========================================
   TRANSACTION EDIT SIDEBAR (BLUE THEME)
   ======================================== */
.ei-trans-sticky-side {
    position: sticky;
    top: 12px;
}

.ei-trans-side-card {
    background: var(--mud-palette-surface);
    border: 1px solid var(--ei-trans-blue-border);
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.ei-trans-side-card:hover {
    box-shadow: 0 6px 24px rgba(25, 118, 210, 0.1);
    transform: translateY(-1px);
}

/* Hero Card - Blue Theme */
.ei-trans-side-card-hero {
    border: 1px solid var(--ei-trans-blue);
    background: linear-gradient(180deg, var(--ei-trans-blue-bg), var(--mud-palette-surface));
}

.ei-trans-side-hero-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: linear-gradient(135deg, var(--ei-trans-blue) 0%, var(--ei-trans-blue-light) 100%);
    gap: 8px;
    position: relative;
    overflow: hidden;
}

.ei-trans-side-hero-header::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
}

.ei-trans-side-hero-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
    position: relative;
    z-index: 1;
}

.ei-trans-side-hero-label {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 600;
}

.ei-trans-side-hero-title {
    color: white;
    font-weight: 800;
    letter-spacing: -0.3px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.ei-trans-type-chip {
    flex-shrink: 0;
    font-weight: 700;
    font-size: 0.65rem;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    position: relative;
    z-index: 1;
    height: 22px;
    background: rgba(255, 255, 255, 0.95) !important;
    color: var(--ei-trans-blue-light) !important;
}

.ei-trans-side-info-grid {
    padding: 10px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ei-trans-side-info-row {
    display: grid;
    grid-template-columns: 26px 1fr auto;
    align-items: center;
    gap: 8px;
}

.ei-trans-side-info-icon {
    width: 26px;
    height: 26px;
    min-width: 26px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ei-accent-blue-light);
    color: var(--ei-accent-blue);
}

.ei-trans-side-info-icon .mud-icon-root,
.ei-trans-side-info-icon svg {
    font-size: 0.875rem !important;
    width: 14px !important;
    height: 14px !important;
}

.ei-trans-side-info-icon-primary {
    background: color-mix(in srgb, var(--mud-palette-info) 14%, var(--mud-palette-surface));
    color: var(--mud-palette-info);
}

.ei-trans-side-info-label {
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
}

.ei-trans-side-info-value {
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--mud-palette-text-primary);
    text-align: end;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ei-trans-qty-badge {
    font-weight: 800;
    font-size: 0.7rem;
    min-width: 50px;
    height: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(25, 118, 210, 0.25);
}

/* Calculation Card - Teal Theme */
.ei-trans-side-card-calc {
    background: linear-gradient(180deg, var(--ei-accent-teal-light), var(--mud-palette-surface));
    border-color: rgba(0, 137, 123, 0.2);
}

.ei-trans-side-card-calc:hover {
    box-shadow: 0 6px 24px rgba(0, 137, 123, 0.1);
}

.ei-trans-side-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px 8px;
    border-bottom: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.05));
}

.ei-trans-side-card-header-avatar {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    font-size: 0.875rem !important;
}

.ei-trans-side-card-header-avatar .mud-icon-root {
    font-size: 1rem !important;
    color: white !important;
}

.ei-trans-side-card-header-avatar-teal {
    background: linear-gradient(135deg, var(--ei-accent-teal) 0%, #00695c 100%) !important;
    box-shadow: 0 2px 8px rgba(0, 137, 123, 0.25);
}

.ei-trans-side-card-title {
    font-weight: 700;
    letter-spacing: -0.2px;
    color: var(--mud-palette-text-primary);
    font-size: 0.8125rem;
}

.ei-trans-calc-grid {
    padding: 8px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ei-trans-calc-row {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 8px;
    transition: background 0.15s ease;
}

.ei-trans-calc-row:hover {
    background: color-mix(in srgb, var(--mud-palette-surface) 94%, var(--mud-palette-text-primary) 6%);
}

.ei-trans-calc-row-icon {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ei-accent-teal-light);
    color: var(--ei-accent-teal);
}

.ei-trans-calc-row-icon .mud-icon-root,
.ei-trans-calc-row-icon svg {
    font-size: 0.8rem !important;
    width: 14px !important;
    height: 14px !important;
}

.ei-trans-calc-row-icon-sales {
    background: var(--ei-accent-blue-light);
    color: var(--ei-accent-blue);
}

.ei-trans-calc-row-icon-discount {
    background: var(--ei-accent-red-light);
    color: var(--ei-accent-red);
}

.ei-trans-calc-row-icon-total {
    background: linear-gradient(135deg, var(--ei-accent-green) 0%, #2e7d32 100%);
    color: white;
}

.ei-trans-calc-row-sales {
    background: color-mix(in srgb, var(--mud-palette-info) 8%, var(--mud-palette-surface));
}

.ei-trans-calc-row-sales:hover {
    background: color-mix(in srgb, var(--mud-palette-info) 16%, var(--mud-palette-surface));
}

.ei-trans-calc-row-discount {
    background: color-mix(in srgb, var(--mud-palette-error) 8%, var(--mud-palette-surface));
}

.ei-trans-calc-row-discount:hover {
    background: color-mix(in srgb, var(--mud-palette-error) 16%, var(--mud-palette-surface));
}

.ei-trans-calc-label {
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
}

.ei-trans-calc-value {
    font-weight: 700;
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
    text-align: end;
}

.ei-trans-calc-sales {
    color: var(--mud-palette-info);
}

.ei-trans-calc-discount {
    color: var(--mud-palette-error);
}

.ei-trans-calc-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ei-accent-green), transparent);
    margin: 4px 0;
    border-radius: 1px;
}

.ei-trans-calc-row-total {
    padding: 10px 12px;
    background: color-mix(in srgb, var(--mud-palette-success) 12%, var(--mud-palette-surface));
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-success) 28%, transparent);
    margin-top: 2px;
}

.ei-trans-calc-row-total:hover {
    background: color-mix(in srgb, var(--mud-palette-success) 18%, var(--mud-palette-surface));
}

.ei-trans-calc-total-label {
    font-weight: 800;
    color: var(--mud-palette-text-primary);
    font-size: 0.8125rem;
    letter-spacing: -0.2px;
}

.ei-trans-calc-total-value {
    font-weight: 900;
    color: var(--mud-palette-success);
    letter-spacing: -0.3px;
    font-size: 1rem;
}

/* Currency Info Card */
.ei-trans-side-card-info {
    padding: 10px 14px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--mud-palette-success) 8%, var(--mud-palette-surface)), var(--mud-palette-surface));
    border-color: color-mix(in srgb, var(--mud-palette-success) 25%, transparent);
}

.ei-trans-info-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

/* ========================================
   TRANSACTION TAXES EMBEDDED STYLES
   ======================================== */
.ei-subdetails {
    --ei-muted: rgba(127, 127, 127, 0.24);
    --ei-radius: 14px;
}

.ei-taxdlg-title {
    padding: 6px 4px 2px 4px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--mud-palette-warning) 6%, var(--mud-palette-surface)), transparent);
    border-radius: var(--ei-radius) var(--ei-radius) 0 0;
}

.ei-taxdlg-h {
    font-weight: 800;
    letter-spacing: -0.2px;
}

.ei-pill-taxes {
    box-shadow: 0 2px 6px rgba(245, 124, 0, 0.25);
}

.ei-pill-linenet strong {
    font-weight: 800;
    margin-inline-start: 4px;
}

/* Tax KPI Tiles */
.ei-kpi-tile-base {
    background: linear-gradient(180deg, color-mix(in srgb, var(--mud-palette-info) 8%, var(--mud-palette-surface)), transparent);
    border-color: color-mix(in srgb, var(--mud-palette-info) 25%, transparent);
}

.ei-kpi-tile-base:hover {
    border-color: color-mix(in srgb, var(--mud-palette-info) 40%, transparent);
}

.ei-kpi-tile-tax {
    background: linear-gradient(180deg, color-mix(in srgb, var(--mud-palette-warning) 10%, var(--mud-palette-surface)), transparent);
    border-color: color-mix(in srgb, var(--mud-palette-warning) 28%, transparent);
}

.ei-kpi-tile-tax:hover {
    border-color: color-mix(in srgb, var(--mud-palette-warning) 40%, transparent);
}

.ei-kpi-base {
    color: var(--mud-palette-info);
}

.ei-kpi-tax {
    color: var(--mud-palette-warning);
}

/* Tax Table Surface */
.ei-subdetails-surface {
    border: 1px solid var(--ei-muted);
    border-radius: var(--ei-radius);
    overflow: hidden;
    background: var(--mud-palette-surface);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.ei-subdetails-toolbar {
    padding: 10px 12px;
    border-bottom: 1px solid var(--ei-muted);
    background: linear-gradient(180deg, color-mix(in srgb, var(--mud-palette-warning) 5%, var(--mud-palette-surface)), transparent), var(--mud-palette-surface);
}

/* Dialog-specific styles */
.ei-subdetails-dialog {
    --ei-radius: 12px;
}

.ei-subdetails-dialog .ei-taxdlg-title {
    padding: 4px 2px 0 2px;
}

.ei-subdetails-dialog .ei-kpis {
    margin-top: 2px;
}

.ei-subdetails-dialog .ei-kpi-tile {
    padding: 10px 12px;
}

.ei-subdetails-dialog .ei-kpi-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
}

.ei-subdetails-dialog .ei-kpi-icon .mud-icon-root {
    font-size: 1rem !important;
}

.ei-subdetails-dialog .ei-subdetails-surface {
    border-radius: 12px;
}

.ei-subdetails-dialog .ei-subdetails-toolbar {
    padding: 8px 10px;
}

/* ========================================
   TAX EDIT SIDEBAR (ORANGE THEME)
   ======================================== */
.ei-tax-sticky-side {
    position: sticky;
    top: 12px;
}

.ei-tax-side-card {
    background: var(--mud-palette-surface);
    border: 1px solid var(--ei-tax-orange-border);
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.ei-tax-side-card:hover {
    box-shadow: 0 6px 24px rgba(245, 124, 0, 0.1);
    transform: translateY(-1px);
}

.ei-tax-side-card-hero {
    border: 1px solid var(--ei-tax-orange);
    background: linear-gradient(180deg, var(--ei-tax-orange-bg), var(--mud-palette-surface));
}

.ei-tax-side-hero-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: linear-gradient(135deg, var(--ei-tax-orange) 0%, var(--ei-tax-orange-light) 100%);
    gap: 8px;
    position: relative;
    overflow: hidden;
}

.ei-tax-side-hero-header::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
}

.ei-tax-side-hero-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.ei-tax-side-hero-label {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 600;
}

.ei-tax-side-hero-title {
    color: white;
    font-weight: 800;
    letter-spacing: -0.3px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.ei-tax-mode-chip {
    flex-shrink: 0;
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: capitalize;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    position: relative;
    z-index: 1;
    height: 22px;
}

.ei-tax-side-info-grid {
    padding: 10px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ei-tax-side-info-row {
    display: grid;
    grid-template-columns: 26px 1fr auto;
    align-items: center;
    gap: 8px;
}

.ei-tax-side-info-icon {
    width: 26px;
    height: 26px;
    min-width: 26px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ei-tax-orange-bg);
    color: var(--ei-tax-orange);
}

.ei-tax-side-info-icon .mud-icon-root,
.ei-tax-side-info-icon svg {
    font-size: 0.875rem !important;
    width: 14px !important;
    height: 14px !important;
}

.ei-tax-side-info-icon-success {
    background: var(--ei-accent-green-light);
    color: var(--ei-accent-green);
}

.ei-tax-side-info-icon-primary {
    background: var(--ei-accent-blue-light);
    color: var(--ei-accent-blue);
}

.ei-tax-side-info-label {
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
}

.ei-tax-side-info-value {
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--mud-palette-text-primary);
    text-align: end;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ei-tax-rate-badge {
    font-weight: 800;
    font-size: 0.7rem;
    min-width: 50px;
    height: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(67, 160, 71, 0.25);
}

/* Tax Calculation Card */
.ei-tax-side-card-calc {
    background: linear-gradient(180deg, var(--ei-accent-teal-light), var(--mud-palette-surface));
    border-color: rgba(0, 137, 123, 0.2);
}

.ei-tax-side-card-calc:hover {
    box-shadow: 0 6px 24px rgba(0, 137, 123, 0.1);
}

.ei-tax-side-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px 8px;
    border-bottom: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.05));
}

.ei-tax-side-card-header-avatar {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    font-size: 0.875rem !important;
}

.ei-tax-side-card-header-avatar .mud-icon-root {
    font-size: 1rem !important;
    color: white !important;
}

.ei-tax-side-card-header-avatar-teal {
    background: linear-gradient(135deg, var(--ei-accent-teal) 0%, #00695c 100%) !important;
    box-shadow: 0 2px 8px rgba(0, 137, 123, 0.25);
}

.ei-tax-side-card-title {
    font-weight: 700;
    letter-spacing: -0.2px;
    color: var(--mud-palette-text-primary);
    font-size: 0.8125rem;
}

.ei-tax-calc-grid {
    padding: 8px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ei-tax-calc-row {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 8px;
    transition: background 0.15s ease;
}

.ei-tax-calc-row:hover {
    background: color-mix(in srgb, var(--mud-palette-surface) 94%, var(--mud-palette-text-primary) 6%);
}

.ei-tax-calc-row-icon {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ei-accent-teal-light);
    color: var(--ei-accent-teal);
}

.ei-tax-calc-row-icon .mud-icon-root,
.ei-tax-calc-row-icon svg {
    font-size: 0.8rem !important;
    width: 14px !important;
    height: 14px !important;
}

.ei-tax-calc-row-icon-rate {
    background: var(--ei-accent-green-light);
    color: var(--ei-accent-green);
}

.ei-tax-calc-row-icon-total {
    background: linear-gradient(135deg, var(--mud-palette-warning) 0%, color-mix(in srgb, var(--mud-palette-warning) 75%, black) 100%);
    color: var(--mud-palette-white);
}

.ei-tax-calc-row-rate {
    background: var(--ei-accent-green-light);
}

.ei-tax-calc-row-rate:hover {
    background: color-mix(in srgb, var(--mud-palette-success) 14%, var(--mud-palette-surface));
}

.ei-tax-calc-label {
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
}

.ei-tax-calc-value {
    font-weight: 700;
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
    text-align: end;
}

.ei-tax-calc-rate {
    color: var(--ei-accent-green);
}

.ei-tax-calc-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ei-tax-orange), transparent);
    margin: 4px 0;
    border-radius: 1px;
}

.ei-tax-calc-row-total {
    padding: 10px 12px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--mud-palette-warning) 14%, var(--mud-palette-surface)), color-mix(in srgb, var(--mud-palette-warning) 6%, var(--mud-palette-surface)));
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-warning) 25%, transparent);
    margin-top: 2px;
}

.ei-tax-calc-row-total:hover {
    background: linear-gradient(135deg, color-mix(in srgb, var(--mud-palette-warning) 18%, var(--mud-palette-surface)), color-mix(in srgb, var(--mud-palette-warning) 8%, var(--mud-palette-surface)));
}

.ei-tax-calc-total-label {
    font-weight: 800;
    color: var(--mud-palette-text-primary);
    font-size: 0.8125rem;
    letter-spacing: -0.2px;
}

.ei-tax-calc-total-value {
    font-weight: 900;
    color: var(--ei-tax-orange);
    letter-spacing: -0.3px;
    font-size: 1rem;
}

/* Tax Help Card */
.ei-tax-side-card-help {
    padding: 12px 14px;
    background: linear-gradient(180deg, var(--ei-accent-blue-light), var(--mud-palette-surface));
    border-color: rgba(25, 118, 210, 0.12);
}

.ei-tax-help-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

/* ========================================
   DASHBOARD PAGE STYLES
   ======================================== */
.ei-dashboard-page {
    --ei-radius: 12px;
    --ei-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.ei-dashboard-page .ei-title {
    font-weight: 700;
    letter-spacing: -0.2px;
}

.ei-dashboard-page .ei-strong {
    font-weight: 600;
}

.ei-dashboard-page .ei-amount {
    min-inline-size: 6.25rem;
    text-align: end;
    font-variant-numeric: tabular-nums;
}

.ei-compliance-banner {
    border-radius: var(--ei-radius);
    border: 1px solid transparent;
}

.ei-compliance-avatar {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.ei-time-ago {
    opacity: 0.7;
    font-style: italic;
}

/* Dashboard KPI Cards */
.ei-dashboard-page .ei-kpi {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)), var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--ei-radius);
    padding: 20px;
    cursor: pointer;
    transition: var(--ei-transition);
    min-height: 120px;
}

.ei-dashboard-page .ei-kpi:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    border-color: rgba(127, 127, 127, 0.3);
}

.ei-dashboard-page .ei-kpi:focus,
.ei-dashboard-page .ei-kpi:focus-within {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.ei-kpi-alert {
    border-color: var(--mud-palette-error);
    animation: pulse-error 2s infinite;
}

@keyframes pulse-error {
    0%, 100% { box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.2); }
    50% { box-shadow: 0 0 0 8px rgba(244, 67, 54, 0); }
}

.ei-dashboard-page .ei-kpi-label {
    opacity: 0.75;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.5px;
    font-size: 0.7rem;
}

.ei-dashboard-page .ei-kpi-value {
    font-weight: 800;
    letter-spacing: -0.5px;
    line-height: 1.2;
}

.ei-dashboard-page .ei-kpi-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.ei-dashboard-page .ei-kpi-icon-primary {
    background: linear-gradient(135deg, var(--mud-palette-primary) 0%, var(--mud-palette-primary-darken) 100%);
}

.ei-dashboard-page .ei-kpi-icon-success {
    background: linear-gradient(135deg, var(--mud-palette-success) 0%, color-mix(in srgb, var(--mud-palette-success) 75%, black) 100%);
}

.ei-dashboard-page .ei-kpi-icon-warning {
    background: linear-gradient(135deg, var(--mud-palette-warning) 0%, color-mix(in srgb, var(--mud-palette-warning) 75%, black) 100%);
}

.ei-dashboard-page .ei-kpi-icon-error {
    background: linear-gradient(135deg, var(--mud-palette-error) 0%, color-mix(in srgb, var(--mud-palette-error) 75%, black) 100%);
}

/* Progress bar */
.ei-progress-bar {
    height: 10px !important;
}

.ei-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ei-dot-success { background: var(--mud-palette-success); }
.ei-dot-warning { background: var(--mud-palette-warning); }
.ei-dot-error { background: var(--mud-palette-error); }

/* Pills & Mini cards */
.ei-dashboard-page .ei-pill {
    background: color-mix(in srgb, var(--mud-palette-text-primary) 4%, var(--mud-palette-surface));
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    padding: 14px;
    cursor: pointer;
    transition: var(--ei-transition);
}

.ei-dashboard-page .ei-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--mud-palette-text-primary) 10%, transparent);
    background: color-mix(in srgb, var(--mud-palette-text-primary) 8%, var(--mud-palette-surface));
}

.ei-dashboard-page .ei-pill:focus {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.ei-dashboard-page .ei-pill-success {
    background: color-mix(in srgb, var(--mud-palette-success) 10%, var(--mud-palette-surface));
    border-color: color-mix(in srgb, var(--mud-palette-success) 30%, transparent);
}

.ei-dashboard-page .ei-pill-alert {
    background: color-mix(in srgb, var(--mud-palette-error) 10%, var(--mud-palette-surface));
    border-color: color-mix(in srgb, var(--mud-palette-error) 35%, transparent);
}

/* One-row workflow status strip (dashboard) */
.ei-status-strip {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
}

@media (max-width: 1400px) {
    .ei-status-strip {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .ei-status-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.ei-status-strip .ei-pill {
    padding: 8px 10px;
    min-width: 0;
}

.ei-status-strip .ei-pill-head {
    min-width: 0;
}

.ei-status-strip .ei-pill-head .mud-typography {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ei-mini {
    background: color-mix(in srgb, var(--mud-palette-text-primary) 4%, var(--mud-palette-surface));
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 10px;
    padding: 14px;
    cursor: pointer;
    transition: var(--ei-transition);
}

.ei-mini:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.06);
}

.ei-mini:focus {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.ei-mini-alert {
    border-color: var(--mud-palette-error);
    background: color-mix(in srgb, var(--mud-palette-error) 8%, var(--mud-palette-surface));
}

.ei-mini-total {
    background: color-mix(in srgb, var(--mud-palette-info) 10%, var(--mud-palette-surface));
    border-style: solid;
    border-color: color-mix(in srgb, var(--mud-palette-info) 28%, transparent);
}

/* Action buttons */
.ei-action-btn {
    justify-content: flex-start;
    text-align: start;
}

/* Legend */
.ei-legend {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* Aging summary */
.ei-aging-row {
    padding: 8px 0;
}

.ei-aging-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ei-aging-total {
    background: color-mix(in srgb, var(--mud-palette-info) 10%, var(--mud-palette-surface));
    padding: 12px;
    border-radius: 8px;
    margin-top: 8px;
}

/* Customer rows */
.ei-customer-row {
    background: rgba(127, 127, 127, 0.03);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    transition: var(--ei-transition);
}

.ei-customer-row:hover {
    background: rgba(127, 127, 127, 0.06);
    transform: translateX(4px);
}

/* Timeline */
.ei-timeline .mud-timeline-item-content {
    padding-bottom: 16px;
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */
@media (max-width: 960px) {
    .ei-sticky-side,
    .ei-trans-sticky-side,
    .ei-tax-sticky-side {
        position: static;
    }

    .ei-dialog-side {
        order: -1;
    }

    .ei-taxdlg-title {
        padding: 4px 2px 0 2px;
    }

    .ei-kpi-tile {
        padding: 10px 12px;
    }

    .ei-kpi-icon {
        width: 32px;
        height: 32px;
    }

    .ei-subdetails-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
}

@media (max-width: 599px) {
    .ei-kpi-strong {
        font-size: 0.9rem;
    }

    .ei-kpi-icon {
        width: 28px;
        height: 28px;
        border-radius: 6px;
    }

    .ei-kpi-icon .mud-icon-root {
        font-size: 0.9rem !important;
    }
}

/* ==========================================================================
   Status cell — the Status column, including a cancellation in flight
   ========================================================================== */

/* Two chips and an arrow have to fit a column sized for one chip. Wrapping is
   allowed rather than clipped: on a narrow viewport the pending state stacks
   under the current one, which still reads correctly, whereas an overflow
   would hide the very thing this cell exists to show. */
/* Layout (two rows, gap) comes from .eta-status-stack in EGKitsComponents/css/eta-status.css; this
   file only styles the lifecycle chips inside it. */
.ei-status-cell {
    min-width: 0;
}

.ei-status-cell .mud-tooltip-root > div > div:first-child {
    flex-wrap: wrap;
    row-gap: 4px;
}

.ei-status-cell .mud-chip {
    font-weight: 600;
    font-size: 0.65rem;
    text-transform: uppercase;
    height: 22px;
}

/* The ghost chip is the destination, not the current state, so it is drawn back
   a step to keep the filled chip reading as the truth. */
.ei-status-cell .mud-chip.mud-chip-outlined {
    opacity: 0.85;
    border-style: dashed;
}

.ei-status-cell .mud-typography-caption {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

/* A cancellation that has run past its date is no longer a warning to plan
   around, so it pulses once to separate it from the steady pending state. */
@keyframes ei-cancellation-overdue {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

.ei-status-cell .mud-error-text {
    animation: ei-cancellation-overdue 2.4s ease-in-out infinite;
}

/* A tile the user has not seen before, for a state that is time-sensitive: given a soft accent so it
   reads as needing attention without competing with the error styling used for Invalid. */
.ei-kpi-tile-attention {
    border-color: var(--mud-palette-warning) !important;
    background: color-mix(in srgb, var(--mud-palette-warning) 8%, transparent);
}

.ei-kpi-tile-attention:hover {
    background: color-mix(in srgb, var(--mud-palette-warning) 16%, transparent);
}

/* The strip is sized for the eight lifecycle tiles. This one appears beside them only while a
   cancellation is in flight, so the track count grows to match rather than letting it wrap onto a
   row of its own — the summary reads as one line of figures, and a tile on its own second row looks
   like a rendering fault. Scoped to the widest breakpoint because the narrower ones deliberately
   wrap into a block, where a ninth track would only make every tile too small to read. */
@media (min-width: 1401px) {
    .ei-kpi-strip:has(.ei-kpi-tile-attention) {
        grid-template-columns: repeat(9, minmax(0, 1fr));
    }
}

/* Nine tracks leave room for a one-word label, which every lifecycle tile has and this one does not.
   Wrapping keeps both words: truncating loses "pending", which is the entire distinction from the
   Cancelled tile sitting next to it, and abbreviating would have to hold up in 13 languages. */
.ei-kpi-tile-attention .ei-kpi-tile-label {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.1;
}

/* The wrapped label makes one tile taller than the rest, and a grid row is as tall as its tallest
   member, so without this the others would float in a row deeper than they are. */
.ei-kpi-strip .ei-kpi-tile {
    height: 100%;
}

/* ==========================================================================
   Invoices list: status cards on one row, and the toolbar above the grid
   ========================================================================== */

/* Every card on one row, sharing the width evenly. Below the narrowest readable card the row scrolls
   sideways rather than wrapping, and each card sheds its footnote and shrinks its icon as it narrows
   (the full text stays in the card's tooltip). */
.ei-invoices-page .ei-kpi-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(84px, 1fr);
    gap: 8px;
    /* Room for the hover lift and focus ring, which overflow-x would otherwise clip. */
    padding: 4px 2px 6px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
}

.ei-invoices-page .ei-kpi-row > .ei-kpi {
    --ei-kpi-tone: var(--mud-palette-primary);
    container-type: inline-size;
    min-width: 0;
    min-height: 0;
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    scroll-snap-align: start;
}

/* Status colour as a hairline along the bottom edge: brighter on the filtered card. */
.ei-invoices-page .ei-kpi-row > .ei-kpi::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--ei-kpi-tone), transparent);
    opacity: 0.55;
    transition: opacity 0.18s ease, height 0.18s ease;
}

.ei-invoices-page .ei-kpi-row > .ei-kpi:hover::after,
.ei-invoices-page .ei-kpi-row > .ei-kpi.ei-kpi-active::after {
    opacity: 1;
    height: 3px;
}

.ei-invoices-page .ei-kpi-row > .ei-kpi.ei-kpi-active {
    border-color: var(--ei-kpi-tone);
    box-shadow: inset 0 0 0 1px var(--ei-kpi-tone);
}

/* A clicked card is already outlined as active; the ring is for keyboard focus only. */
.ei-invoices-page .ei-kpi-row > .ei-kpi:focus:not(:focus-visible) {
    outline: none;
}

.ei-invoices-page .ei-kpi-row > .ei-kpi:focus-visible {
    outline: 2px solid var(--ei-kpi-tone);
    outline-offset: 2px;
}

.ei-invoices-page .ei-kpi-row > .ei-kpi.ei-kpi-empty {
    opacity: 0.6;
}

.ei-invoices-page .ei-kpi-row > .ei-kpi.ei-kpi-empty:hover {
    opacity: 1;
}

.ei-invoices-page .ei-kpi-row > .ei-kpi.ei-kpi-empty::after {
    opacity: 0.2;
}

/* A cancellation in flight is time-sensitive and belongs to no lifecycle status, so its card is tinted. */
.ei-invoices-page .ei-kpi-row > .ei-kpi.ei-kpi-attention {
    background: color-mix(in srgb, var(--mud-palette-warning) 8%, var(--mud-palette-surface));
}

.ei-invoices-page .ei-kpi-tone-primary { --ei-kpi-tone: var(--mud-palette-primary); }
.ei-invoices-page .ei-kpi-tone-success { --ei-kpi-tone: var(--mud-palette-success); }
.ei-invoices-page .ei-kpi-tone-warning { --ei-kpi-tone: var(--mud-palette-warning); }
.ei-invoices-page .ei-kpi-tone-error { --ei-kpi-tone: var(--mud-palette-error); }
.ei-invoices-page .ei-kpi-tone-info { --ei-kpi-tone: var(--mud-palette-info); }
.ei-invoices-page .ei-kpi-tone-default { --ei-kpi-tone: var(--mud-palette-text-secondary); }

.ei-invoices-page .ei-kpi-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-width: 0;
}

.ei-invoices-page .ei-kpi-row .ei-kpi-label,
.ei-invoices-page .ei-kpi-row .ei-kpi-foot {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.68rem;
    line-height: 1.3;
}

.ei-invoices-page .ei-kpi-row .ei-kpi-label {
    font-weight: 700;
}

.ei-invoices-page .ei-kpi-row .ei-kpi-value {
    margin-top: 2px;
    font-size: 1.35rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.ei-invoices-page .ei-kpi-row .ei-kpi-foot {
    margin-top: 0;
}

.ei-invoices-page .ei-kpi-row .ei-kpi-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 8px;
}

.ei-invoices-page .ei-kpi-row .ei-kpi-icon .mud-icon-root {
    font-size: 1.05rem;
}

@container (max-width: 130px) {
    .ei-invoices-page .ei-kpi-row .ei-kpi-foot {
        display: none;
    }

    .ei-invoices-page .ei-kpi-row .ei-kpi-icon {
        width: 22px;
        height: 22px;
        border-radius: 6px;
    }

    .ei-invoices-page .ei-kpi-row .ei-kpi-icon .mud-icon-root {
        font-size: 0.9rem;
    }

    .ei-invoices-page .ei-kpi-row .ei-kpi-value {
        font-size: 1.1rem;
    }
}

.ei-invoices-page .ei-table-toolbar .mud-button-root,
.ei-invoices-page .ei-table-toolbar .mud-chip-root {
    height: 32px;
}

.ei-invoices-page .ei-toolbar-actions {
    gap: 8px;
    row-gap: 8px;
}

/* Ticked rows: their count and the actions that apply to them, grouped as one control. */
.ei-invoices-page .ei-selection-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 4px 3px 12px;
    border: 1px solid var(--ei-side-primary-border);
    border-radius: 999px;
    background: var(--ei-side-primary-bg);
    animation: ei-toolbar-in 160ms ease-out;
}

.ei-invoices-page .ei-selection-count {
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    padding-inline-end: 6px;
    margin-inline-end: 2px;
    border-inline-end: 1px solid var(--ei-side-primary-border);
}

.ei-invoices-page .ei-selection-group .mud-button-root {
    border-radius: 999px;
}

.ei-invoices-page .ei-selection-clear {
    width: 28px;
    height: 28px;
}

/* One-click actions: the number they act on rides in the button. */
.ei-invoices-page .ei-smart-btn {
    border-radius: 999px;
    padding-inline: 12px;
    animation: ei-toolbar-in 160ms ease-out;
}

.ei-invoices-page .ei-smart-btn:has(.ei-count-pill),
.ei-invoices-page .ei-selection-group .mud-button-root:has(.ei-count-pill) {
    padding-inline-end: 6px;
}

.ei-invoices-page .ei-count-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    margin-inline-start: 8px;
    padding: 0 7px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    background: color-mix(in srgb, currentColor 16%, transparent);
}

.ei-invoices-page .mud-button-filled .ei-count-pill {
    background: rgba(255, 255, 255, 0.24);
}

/* A running bulk action: what it is doing, how far it got, in one quiet pill. */
.ei-invoices-page .ei-busy-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 12px 0 8px;
    overflow: hidden;
    border-radius: 999px;
    border: 1px solid var(--ei-side-primary-border);
    background: var(--ei-side-primary-bg);
    font-size: 0.78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    animation: ei-toolbar-in 160ms ease-out;
}

.ei-invoices-page .ei-busy-spinner {
    width: 16px !important;
    height: 16px !important;
}

.ei-invoices-page .ei-busy-bar {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    height: 2px;
    background: color-mix(in srgb, var(--mud-palette-success) 15%, transparent);
}

.ei-invoices-page .ei-busy-bar > span {
    display: block;
    height: 100%;
    background: var(--mud-palette-success);
    transition: inline-size 300ms ease-out;
}

/* Status signals: what needs no button, said in a sentence. Clicking one filters the grid on it. */
.ei-invoices-page .ei-status-signal {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid transparent;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    background: transparent;
    animation: ei-toolbar-in 160ms ease-out;
}

.ei-invoices-page button.ei-status-signal {
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease;
}

.ei-invoices-page button.ei-status-signal:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.ei-invoices-page .ei-signal-error {
    color: var(--mud-palette-error);
    border-color: color-mix(in srgb, var(--mud-palette-error) 35%, transparent);
    background: color-mix(in srgb, var(--mud-palette-error) 8%, transparent);
}

.ei-invoices-page button.ei-signal-error:hover {
    background: color-mix(in srgb, var(--mud-palette-error) 16%, transparent);
}

.ei-invoices-page .ei-signal-success {
    color: var(--mud-palette-success);
    border-color: color-mix(in srgb, var(--mud-palette-success) 30%, transparent);
    background: color-mix(in srgb, var(--mud-palette-success) 8%, transparent);
}

.ei-invoices-page .ei-signal-count {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.ei-invoices-page .ei-signal-go {
    margin-inline-start: -2px;
    opacity: 0.6;
    transition: transform 0.18s ease, opacity 0.18s ease;
}

.ei-invoices-page button.ei-status-signal:hover .ei-signal-go {
    opacity: 1;
    transform: translateX(2px);
}

[dir="rtl"] .ei-invoices-page .ei-signal-go {
    transform: scaleX(-1);
}

[dir="rtl"] .ei-invoices-page button.ei-status-signal:hover .ei-signal-go {
    transform: scaleX(-1) translateX(2px);
}

/* Phones: the selection group wraps inside its own outline instead of pushing the toolbar sideways. */
@media (max-width: 600px) {
    .ei-invoices-page .ei-selection-group {
        flex-wrap: wrap;
        border-radius: 16px;
        padding: 6px 8px;
    }

    .ei-invoices-page .ei-selection-count {
        flex-basis: 100%;
        border-inline-end: none;
        padding-inline-end: 0;
    }

    .ei-invoices-page .ei-status-signal {
        white-space: normal;
        height: auto;
        min-height: 32px;
        padding-block: 4px;
    }
}

/* Toolbar buttons: a faint lift on hover, and filled ones carry the depth that marks them as primary. */
.ei-invoices-page .ei-table-toolbar .mud-button-root {
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.ei-invoices-page .ei-table-toolbar .mud-button-root:hover:not(:disabled) {
    transform: translateY(-1px);
}

.ei-invoices-page .ei-table-toolbar .mud-button-filled:not(:disabled) {
    box-shadow: 0 2px 6px color-mix(in srgb, currentColor 18%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.ei-invoices-page .ei-table-toolbar .mud-button-filled:hover:not(:disabled) {
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.ei-invoices-page .ei-table-toolbar .mud-button-outlined:not(:disabled) {
    background: color-mix(in srgb, currentColor 4%, var(--mud-palette-surface));
}

.ei-invoices-page .ei-table-toolbar .mud-button-outlined:hover:not(:disabled) {
    background: color-mix(in srgb, currentColor 10%, var(--mud-palette-surface));
}

.ei-invoices-page .ei-table-toolbar .mud-button-root:disabled {
    opacity: 0.55;
}

/* Row actions: two quiet square buttons that tint on hover; the expand button stays lit while open. */
.ei-invoices-page .ei-row-actions {
    gap: 2px;
}

.ei-invoices-page .ei-row-actions .mud-icon-button {
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ei-invoices-page .ei-row-actions .mud-icon-button .mud-icon-root {
    font-size: 1.1rem;
}

.ei-invoices-page .ei-row-actions .mud-icon-button:hover:not(:disabled) {
    background: color-mix(in srgb, currentColor 10%, transparent);
    border-color: color-mix(in srgb, currentColor 22%, transparent);
}

.ei-invoices-page .ei-row-actions .mud-icon-button:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}

.ei-invoices-page .ei-row-actions .ei-row-expanded {
    background: color-mix(in srgb, var(--mud-palette-success) 14%, transparent);
    border-color: color-mix(in srgb, var(--mud-palette-success) 32%, transparent);
}
@keyframes ei-toolbar-in {
    from { opacity: 0; transform: translateY(2px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .ei-invoices-page .ei-selection-group,
    .ei-invoices-page .ei-smart-btn,
    .ei-invoices-page .ei-status-signal,
    .ei-invoices-page .ei-busy-pill {
        animation: none;
    }

    .ei-invoices-page .ei-busy-bar > span,
    .ei-invoices-page .ei-table-toolbar .mud-button-root,
    .ei-invoices-page .ei-row-actions .mud-icon-button {
        transition: none;
    }

    .ei-invoices-page .ei-table-toolbar .mud-button-root:hover:not(:disabled) {
        transform: none;
    }
}

/* ========================================
   CREDIT NOTE WIZARD
   ======================================== */

/* The stepper carries its own vertical rhythm, so the dialog only needs to stop the item grid from
   pushing the footer off screen on a long invoice. */
.ei-cn-dialog .mud-dialog-content {
    max-height: 74vh;
    overflow-y: auto;
}

.ei-cn-stepper {
    padding-top: 4px;
}

/* The stepper's own button bar is replaced by this marker so the wizard's actions can live in the
   dialog footer, where they stay in view while the item list scrolls. */
.ei-cn-no-stepper-actions {
    display: none;
}

/* Mode cards: the two ways to start, presented as a choice rather than a dropdown because the
   difference is worth a sentence each. */
.ei-cn-mode-card {
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    cursor: pointer;
    height: 100%;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.ei-cn-mode-card:hover {
    border-color: var(--ei-accent-blue);
    background: var(--ei-accent-blue-light);
}

.ei-cn-mode-card:focus-visible {
    outline: 2px solid var(--ei-accent-blue);
    outline-offset: 2px;
}

.ei-cn-mode-card-selected {
    border-color: var(--ei-accent-green) !important;
    background: var(--ei-accent-green-light) !important;
    box-shadow: 0 4px 18px rgba(67, 160, 71, 0.16);
}

.ei-cn-mode-avatar {
    background: var(--mud-palette-background-gray) !important;
    color: var(--mud-palette-text-secondary) !important;
}

.ei-cn-mode-avatar-on {
    background: linear-gradient(135deg, var(--ei-accent-green) 0%, #2e7d32 100%) !important;
    color: #fff !important;
}

.ei-cn-mode-amount {
    font-weight: 700;
    color: var(--mud-palette-success);
    font-variant-numeric: tabular-nums;
}

.ei-cn-source-strip {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    padding: 6px 4px;
    background: var(--mud-palette-background-gray);
}

.ei-cn-items-toolbar {
    padding: 2px 4px;
}

.ei-cn-items-surface {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    overflow: hidden;
}

/* Figures are read down the column and compared, so they are right-aligned and tabular: proportional
   digits make a column of quantities impossible to scan for the one that looks wrong. */
.ei-cn-num {
    text-align: end;
    font-variant-numeric: tabular-nums;
}

.ei-cn-row-on {
    background: color-mix(in srgb, var(--mud-palette-success) 8%, var(--mud-palette-surface)) !important;
}

/* A line with nothing left to credit stays in the grid, dimmed. Removing it would leave the user
   comparing the wizard against an invoice and finding a line missing. */
.ei-cn-row-exhausted {
    opacity: 0.55;
}

.ei-cn-qty {
    max-width: 130px;
    margin-inline-start: auto;
}

.ei-cn-qty input {
    text-align: end;
    font-variant-numeric: tabular-nums;
}

.ei-cn-foot td {
    background: var(--mud-palette-background-gray);
    border-top: 2px solid var(--mud-palette-lines-default);
}

.ei-cn-notes {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    padding: 10px 12px;
    background: var(--mud-palette-background-gray);
}

/* The credited / credit-note-of markers under an invoice's status chip are the shared relation pills:
   EGKitsComponents/wwwroot/css/eta-status.css (.eta-rel). */