/* ==========================================================================
   EIS Personal Injury Forms — tidy + deduped
   Notes:
   - Consolidated repeated .pi-table + .pi-btn-icon-danger styles
   - Scoped “Accident Details” table look so it won’t fight the Witness table
   - Fixed typo: @@media -> @media
   ========================================================================== */


/* ==========================================================================
   1) Brand tokens
   ========================================================================== */
:root {
    --eis-purple: #4e1d76;
    --eis-purple-600: #431768;
    --eis-purple-700: #3a145a;
    --eis-purple-200: #cdb3e3;
    --eis-ink: #0f0f13;
    --eis-muted: #6c757d;
    --eis-border: #e7eaee;
    --eis-surface: #ffffff;
    --eis-surface-2: #f8f9fa;
    --eis-focus: rgba(78, 29, 118, 0.18);
}


/* ==========================================================================
   2) Global / page polish
   ========================================================================== */
body {
    color: var(--eis-ink);
}
.cr-wrapper {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(15, 39, 70, .05);
    padding:15px;
    margin-bottom: 30px;
}
.cr-wrapper .form-group{
    padding-left: 20px;
    padding-right: 20px;
}
.cr-wrapper thead tr td{
    background-color: rgba(78, 29, 118, 0.85);
    color:#ffffff;
}
/* ==========================================================================
   3) Header (if used)
   ========================================================================== */
.pi-header {
    background: radial-gradient(1200px 400px at -10% -50%, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 50%), linear-gradient(135deg, var(--eis-purple) 0%, #6a32a4 60%, #7f49b6 100%);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05), 0 6px 18px rgba(78, 29, 118, 0.15);
}

    .pi-header .pi-header-icon {
        font-size: 2.2rem;
        opacity: 0.9;
    }

.pi-hero-title {
    letter-spacing: 0.2px;
}

.pi-hero-subtitle {
    opacity: 0.9;
}


/* ==========================================================================
   4) Headings / text helpers
   ========================================================================== */
.container h1 {
    letter-spacing: 0.2px;
    font-weight: 800;
}

.container p.text-muted {
    color: var(--eis-muted) !important;
}


/* ==========================================================================
   5) Multi-step layout (.step) — IMPORTANT for your forms
   ========================================================================== */
.step {
    display: none;
    padding: 1.25rem;
}

    .step.active {
        display: block;
    }

/* Block spacing inside steps */
.bf-block {
    margin-bottom: 1.25rem;
}

/* Inline per-step error */
.step .step-error-message {
    border-radius: 12px;
    border: 1px solid rgba(220, 53, 69, 0.25);
}


/* ==========================================================================
   6) Progress pills
   ========================================================================== */
.bf-progress {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.6rem;
    background: var(--eis-surface-2);
    border: 1px solid #e9ecef;
    border-radius: 0.75rem;
}

.bf-step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.7rem;
    border: 1px solid #e2e3e5;
    background: #fff;
    border-radius: 0.6rem;
    font-weight: 700;
    font-size: 0.9rem;
    color: #6c757d;
    line-height: 1;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
}

    .bf-step i {
        font-size: 1rem;
        color: #adb5bd;
    }

    .bf-step:hover {
        background: #f1f3f5;
        color: #495057;
    }

    .bf-step:focus {
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(78, 29, 118, 0.12);
    }

    /* Active / completed / error states (your JS toggles these) */
    .bf-step.is-active {
        border-color: rgba(78, 29, 118, 0.35);
        background: rgba(78, 29, 118, 0.06);
        color: var(--eis-purple);
    }

    .bf-step.is-completed {
        border-color: #d1e7dd;
        background: #f6fffb;
        color: #198754;
    }

        .bf-step.is-completed i {
            color: #198754;
        }

    .bf-step.is-error {
        border-color: #f8d7da;
        background: #fff5f5;
        color: #dc3545;
    }

        .bf-step.is-error i {
            color: #dc3545;
        }

    .bf-step.is-skipped {
        opacity: 0.65;
        background: #f8f9fa;
        border-color: #e9ecef;
        color: #6c757d;
    }

@media (max-width: 576px) {
    .bf-step span {
        display: none;
    }
}


/* ==========================================================================
   7) Forms (Bootstrap-ish controls)
   ========================================================================== */
.form-label {
    font-weight: 700;
    color: #495057;
    margin-bottom: 0.4rem;
}

.form-control,
.form-select,
textarea.form-control {
    border: 1px solid #dee2e6;
    border-radius: 12px;
    padding: 0.65rem 0.9rem;
    font-size: 0.985rem;
    background-color: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.2s;
}

    .form-control:focus,
    .form-select:focus,
    textarea.form-control:focus {
        border-color: rgba(78, 29, 118, 0.45);
        outline: 0;
        box-shadow: 0 0 0 0.2rem var(--eis-focus);
    }

    .form-control::placeholder {
        color: #a8b0b6;
    }

    /* Disabled/readonly */
    .form-control[readonly],
    .form-control:disabled,
    .form-select:disabled {
        background-color: #f8f9fa;
        color: #6c757d;
    }

/* Checkboxes – your markup uses .form-check-input */
.form-check-input {
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 0.35rem;
    border: 1px solid #cfd6dc;
    box-shadow: none;
}

    .form-check-input:focus {
        border-color: rgba(78, 29, 118, 0.45);
        box-shadow: 0 0 0 0.2rem var(--eis-focus);
    }

    .form-check-input:checked {
        background-color: var(--eis-purple);
        border-color: var(--eis-purple);
    }

.form-check-label {
    color: #495057;
    font-weight: 600;
}

/* Validation (Bootstrap + MVC helpers) */
.input-validation-error,
.is-invalid {
    border-color: #dc3545 !important;
}

    .input-validation-error:focus,
    .is-invalid:focus {
        box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.12) !important;
    }

.field-validation-error,
.validation-summary-errors {
    color: #dc3545;
}


/* ==========================================================================
   8) Buttons (EIS)
   ========================================================================== */
/* Base */
.pi-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    font-weight: 700;
    letter-spacing: 0.1px;
    border-radius: 0.75rem;
    padding: 0.6rem 1rem;
    border: 1px solid transparent;
    transition: transform 0.06s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
    text-decoration: none !important;
}

    .pi-btn:active {
        transform: translateY(1px);
    }

    .pi-btn:focus {
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(78, 29, 118, 0.18);
    }

/* Variants */
.pi-btn-primary {
    background: var(--eis-purple);
    color: #fff;
    border-color: var(--eis-purple);
}

    .pi-btn-primary:hover {
        background: var(--eis-purple-600);
        border-color: var(--eis-purple-600);
        color: #fff;
    }

.pi-btn-soft {
    background: #f4f5f7;
    color: #343a40;
    border-color: #e2e3e5;
}

    .pi-btn-soft:hover {
        background: #eef0f3;
        border-color: #dfe3e7;
        color: #212529;
    }

.pi-btn-outline {
    background: transparent;
    color: var(--eis-purple);
    border-color: rgba(78, 29, 118, 0.55);
}

    .pi-btn-outline:hover {
        background: rgba(78, 29, 118, 0.08);
        border-color: var(--eis-purple);
        color: var(--eis-purple);
    }

.pi-btn-success {
    background: #198754;
    color: #fff;
    border-color: #198754;
}

    .pi-btn-success:hover {
        background: #157347;
        border-color: #157347;
        color: #fff;
    }

/* Icon danger button (remove witness row) — consolidated */
.pi-btn-icon-danger,
.pi-btn.pi-btn-icon-danger {
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 12px;
    border: 1px solid rgba(220, 53, 69, 0.22);
    background: rgba(220, 53, 69, 0.06);
    color: #dc3545;
    display: inline-grid;
    place-items: center;
    transition: background-color 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}

    .pi-btn-icon-danger:hover,
    .pi-btn.pi-btn-icon-danger:hover {
        background: rgba(220, 53, 69, 0.12);
        border-color: rgba(220, 53, 69, 0.32);
        transform: translateY(-1px);
    }

/* Optional: larger CTA */
.pi-btn-lg {
    padding: 0.75rem 1.15rem;
    border-radius: 0.85rem;
    font-size: 1.02rem;
}

/* Optional: full width on mobile */
@media (max-width: 576px) {
    .pi-btn-mobile-block {
        width: 100%;
    }
}


/* ==========================================================================
   9) Witness Table (pi-table) — base look
   ========================================================================== */
.pi-table-wrap {
    margin-top: 0.25rem;
}

/* Outer table card look */
.pi-table {
    border: 1px solid rgba(78, 29, 118, 0.18);
    border-radius: 16px;
    overflow: hidden; /* keep rounded corners on header */
    background: #fff;
    box-shadow: 0 10px 28px rgba(15, 15, 19, 0.04);
}

/* Light header (witness table default) */
.pi-table-head th {
    background: var(--eis-purple-200);
    color: #495057;
    font-weight: 800;
    letter-spacing: 0.2px;
    border: 0;
    padding: 1rem;
}

/* Header divider line (under the header) */
.pi-table thead {
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

/* Strong divider between header and body */
.pi-table tbody {
    border-top: 3px solid rgba(78, 29, 118, 0.22);
}

/* Column sizing for actions */
.pi-col-actions {
    width: 72px;
}

/* Body cells */
.pi-table tbody td {
    padding: 1rem;
    border-top: 1px solid rgba(15, 15, 19, 0.06);
    vertical-align: middle;
    background: #fff;
}

/* Slight hover for witness rows only (not the add row) */
.pi-table tbody tr.pi-witness-row:hover td {
    background: #faf8fd;
}

/* Inputs inside table look a touch softer */
.pi-table .form-control {
    border-radius: 12px;
    padding: 0.65rem 0.85rem;
    border: 1px solid #dde2e7;
}

/* Add row styling (ALWAYS last) */
.pi-table-add-row td {
    background: #fbfafc;
    padding: 1.35rem 1rem;
    border-top: 1px dashed rgba(78, 29, 118, 0.28);
}

/* Add witness button (centered, icon + label) */
.pi-add-row-btn {
    appearance: none;
    border: 0;
    background: transparent;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    color: var(--eis-purple);
    font-weight: 800;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
}

.pi-add-row-icon {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    border: 2px solid rgba(78, 29, 118, 0.35);
    background: #fff;
    box-shadow: 0 10px 22px rgba(78, 29, 118, 0.12);
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

    .pi-add-row-icon i {
        font-size: 1.4rem;
        line-height: 1;
    }

.pi-add-row-text {
    opacity: 0.9;
}

/* Hover / focus */
.pi-add-row-btn:hover .pi-add-row-icon {
    transform: translateY(-1px);
    border-color: rgba(78, 29, 118, 0.55);
    box-shadow: 0 14px 30px rgba(78, 29, 118, 0.18);
}

.pi-add-row-btn:focus-visible {
    outline: none;
}

    .pi-add-row-btn:focus-visible .pi-add-row-icon {
        box-shadow: 0 0 0 0.25rem rgba(78, 29, 118, 0.18), 0 14px 30px rgba(78, 29, 118, 0.18);
    }


/* ==========================================================================
   10) Review container
   ========================================================================== */
#reviewContainer table {
    border: 1px solid var(--eis-border);
    border-radius: 12px;
    overflow: hidden;
}

#reviewContainer th {
    font-weight: 800;
    color: #384152;
    background: #f7f9fc;
}


/* ==========================================================================
   11) Minor helpers
   ========================================================================== */
.text-eis {
    color: var(--eis-purple) !important;
}

.bg-eis {
    background: var(--eis-purple) !important;
    color: #fff !important;
}

.border-eis {
    border-color: var(--eis-purple) !important;
}


/* ==========================================================================
   12) PI Toggle Chips
   ========================================================================== */
.pi-toggle {
    /* hide the native checkbox but keep it accessible */
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.pi-toggle-label {
    position: relative; /* make ::after positioning reliable */
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem 1rem;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
}

    /* the little switch */
    .pi-toggle-label::before {
        content: "";
        width: 44px;
        height: 26px;
        border-radius: 999px;
        background: #e9ecef;
        border: 1px solid #d7dbe0;
        flex: 0 0 auto;
        transition: background-color 0.15s ease, border-color 0.15s ease;
    }

    /* knob */
    .pi-toggle-label::after {
        content: "";
        width: 20px;
        height: 20px;
        border-radius: 999px;
        background: #fff;
        position: absolute;
        transform: translate(6px, 0);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
        transition: transform 0.15s ease;
    }

/* text */
.pi-toggle-text {
    font-weight: 700;
    color: #374151;
}

/* hover/focus */
.pi-toggle-label:hover {
    background: #f8f9fa;
    border-color: #d5dbe1;
}

.pi-toggle:focus + .pi-toggle-label {
    box-shadow: 0 0 0 0.2rem rgba(78, 29, 118, 0.18);
    border-color: rgba(78, 29, 118, 0.45);
}

/* checked state */
.pi-toggle:checked + .pi-toggle-label {
    border-color: rgba(78, 29, 118, 0.35);
    background: rgba(78, 29, 118, 0.06);
}

    .pi-toggle:checked + .pi-toggle-label::before {
        background: var(--eis-purple);
        border-color: var(--eis-purple);
    }

    .pi-toggle:checked + .pi-toggle-label::after {
        transform: translate(24px, 0); /* slide knob right */
    }


/* ==========================================================================
   13) Custom file input
   ========================================================================== */
.pi-file {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid #dee2e6;
    border-radius: 14px;
    background: #fff;
}

.pi-file-input {
    /* hide real input but keep it accessible */
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.pi-file-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.9rem;
    border-radius: 12px;
    border: 1px solid rgba(78, 29, 118, 0.25);
    background: rgba(78, 29, 118, 0.08);
    color: var(--eis-purple);
    font-weight: 700;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}

    .pi-file-btn:hover {
        background: rgba(78, 29, 118, 0.12);
        border-color: rgba(78, 29, 118, 0.35);
    }

    .pi-file-btn:active {
        transform: translateY(1px);
    }

    /* focus ring when tabbing */
    .pi-file-btn:focus-visible {
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(78, 29, 118, 0.18);
    }

.pi-file-name {
    color: #6c757d;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0; /* required for ellipsis in flex */
}


/* ==========================================================================
   14) Optional wrapper card for tables
   ========================================================================== */
.pi-table-card {
    background: #fff;
    border: 1px solid rgba(78, 29, 118, 0.14);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(78, 29, 118, 0.07);
    overflow: hidden;
}

.pi-table-card-head {
    padding: 1rem 1.25rem;
    background: linear-gradient(180deg, rgba(78, 29, 118, 0.06), rgba(78, 29, 118, 0));
    border-bottom: 1px solid rgba(78, 29, 118, 0.12);
}


/* ==========================================================================
   15) Accident Details (clean typography + contrast)
   Scoped to avoid clobbering the Witness table.
   ========================================================================== */
.pi-details {
    --pi-ink: #0f0f13;
    --pi-muted: rgba(15, 15, 19, 0.72);
    --pi-border: rgba(78, 29, 118, 0.16);
    --pi-shadow: 0 14px 40px rgba(15, 15, 19, 0.1);
    --pi-head: #2f0f48;
    --pi-head2: rgba(78, 29, 118, 0.08);
    --pi-warn: #ffc107;
    --pi-warn-ink: #2b2200;
    --pi-danger: #dc3545;
    --pi-danger-ink: #fff;
    --pi-yes: #198754;
    --pi-no: #dc3545;
}

.pi-hero .pi-eyebrow {
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 0.78rem;
    color: rgba(78, 29, 118, 0.88);
}

.pi-hero .pi-title {
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--pi-ink);
}

.pi-hero .pi-subtitle {
    color: var(--pi-muted);
    font-size: 1rem;
}

/* custom buttons (drop-in, no need to touch pi-btn base) */
.pi-btn.pi-btn-warn {
    background: var(--pi-warn);
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: var(--pi-warn-ink);
    font-weight: 800;
}

    .pi-btn.pi-btn-warn:hover {
        filter: brightness(0.97);
        color: var(--pi-warn-ink);
    }

.pi-btn.pi-btn-danger2 {
    background: var(--pi-danger);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: var(--pi-danger-ink);
    font-weight: 800;
}

    .pi-btn.pi-btn-danger2:hover {
        filter: brightness(0.95);
        color: var(--pi-danger-ink);
    }

.pi-card {
    background: #fff;
    border: 1px solid var(--pi-border);
    border-radius: 18px;
    box-shadow: var(--pi-shadow);
    overflow: hidden;
}

.pi-card-head {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem 1.15rem;
    background: linear-gradient(180deg, var(--pi-head2), rgba(78, 29, 118, 0));
    border-bottom: 1px solid var(--pi-border);
}

.pi-card-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pi-head);
    color: #fff;
    box-shadow: 0 8px 18px rgba(47, 15, 72, 0.18);
}

    .pi-card-icon i {
        font-size: 1.1rem;
    }

.pi-card-title {
    font-weight: 900;
    letter-spacing: -0.01em;
    color: var(--pi-ink);
    line-height: 1.1;
}

.pi-card-meta {
    color: var(--pi-muted);
    font-size: 0.92rem;
    margin-top: 0.1rem;
}

.pi-card-body {
    padding: 1rem 1.15rem;
}

.pi-kv {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 0.6rem 1rem;
    margin: 0;
}

    .pi-kv dt {
        margin: 0;
        font-size: 0.95rem;
        font-weight: 600;
        color: rgba(15, 15, 19, 0.72);
    }

    .pi-kv dd {
        margin: 0;
        font-size: 1rem;
        font-weight: 700;
        color: var(--pi-ink);
        white-space: pre-wrap;
    }

.pi-strong {
    font-weight: 900;
}

.pi-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(15, 15, 19, 0.72);
    margin-bottom: 0.2rem;
}

.pi-value {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--pi-ink);
}

.pi-muted {
    color: var(--pi-muted);
}

/* block */
.pi-block {
    background: #fff;
    border: 1px solid rgba(15, 15, 19, 0.14);
    border-radius: 14px;
    padding: 1rem;
    color: var(--pi-ink);
    font-weight: 600;
    white-space: pre-wrap;
}

.pi-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.7rem;
    border-radius: 999px;
    border: 1px solid rgba(15, 15, 19, 0.14);
    background: rgba(15, 15, 19, 0.04);
    font-weight: 700;
}

.pi-pill-k {
    color: rgba(15, 15, 19, 0.7);
    font-size: 0.85rem;
}

/* bool value + icon coloring */
.pi-pill-v {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 900;
}

.pi-yes {
    color: var(--pi-yes);
}

.pi-no {
    color: var(--pi-no);
}

/* Accident-details table skin — scoped */
.pi-details .pi-table thead th {
    background: var(--pi-head);
    color: #fff;
    font-weight: 900;
    border-bottom: 0 !important;
    padding: 0.85rem 1rem;
    white-space: nowrap;
}

.pi-details .pi-table tbody td {
    padding: 0.85rem 1rem;
    border-top: 1px solid rgba(15, 15, 19, 0.1);
    vertical-align: middle;
}

.pi-details .pi-table tbody tr:nth-child(even) > * {
    background: rgba(78, 29, 118, 0.045);
}

.pi-details .pi-table tbody tr:hover > * {
    background: rgba(78, 29, 118, 0.09);
}

.pi-empty {
    display: flex;
    align-items: center;
    padding: 0.9rem 1rem;
    border-radius: 14px;
    border: 1px dashed rgba(15, 15, 19, 0.22);
    background: rgba(15, 15, 19, 0.03);
    color: rgba(15, 15, 19, 0.78);
    font-weight: 700;
}

.pi-signature {
    border: 1px solid rgba(15, 15, 19, 0.18);
    background: #fff;
    border-radius: 16px;
    padding: 0.75rem;
    max-width: 640px;
}

    .pi-signature img {
        display: block;
        max-width: 100%;
        max-height: 170px;
    }

@media (max-width: 576px) {
    .pi-kv {
        grid-template-columns: 1fr;
    }
}

/* Card wrapper */
.pi-table-card {
    background: #fff;
    border: 1px solid rgba(78,29,118,.14);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(78,29,118,.07);
    overflow: hidden;
}

.pi-table-card-head {
    padding: 1rem 1.25rem;
    background: linear-gradient(180deg, rgba(78,29,118,.06), rgba(78,29,118,0));
    border-bottom: 1px solid rgba(78,29,118,.14);
}

/* Dark header */
.pi-claims-table {
    margin: 0;
}

    .pi-claims-table thead th {
        background: #2f0f48;
        color: #fff;
        font-weight: 800;
        letter-spacing: .2px;
        border-bottom: 0 !important;
        padding: .9rem 1rem;
        white-space: nowrap;
    }

    /* Higher contrast rows */
    .pi-claims-table tbody td {
        padding: .9rem 1rem;
        border-top: 1px solid rgba(15,15,19,.10);
        vertical-align: middle;
        background: #fff;
    }

    /* zebra + clear separators */
    .pi-claims-table tbody tr:nth-child(even) > * {
        background: rgba(78,29,118,.045);
    }

    .pi-claims-table tbody tr > * {
        border-bottom: 1px solid rgba(15,15,19,.08);
    }

    /* strong hover */
    .pi-claims-table tbody tr:hover > * {
        background: rgba(78,29,118,.09);
    }

/* Claim type badge */
.pi-badge {
    display: inline-flex;
    align-items: center;
    padding: .35rem .6rem;
    border-radius: 999px;
    border: 1px solid rgba(78,29,118,.28);
    background: rgba(78,29,118,.08);
    color: #4e1d76;
    font-weight: 800;
    font-size: .85rem;
    white-space: nowrap;
}

/* Search box (optional) */
.pi-search {
    position: relative;
    min-width: 260px;
    max-width: 360px;
    flex: 1 1 260px;
}

    .pi-search i {
        position: absolute;
        left: .75rem;
        top: 50%;
        transform: translateY(-50%);
        color: rgba(15,15,19,.55);
        pointer-events: none;
    }

    .pi-search .form-control {
        padding-left: 2.25rem;
        border-radius: 999px;
        border: 1px solid rgba(78,29,118,.18);
    }

/* Small icon buttons */
.pi-btn.pi-btn-sm {
    padding: .45rem .6rem;
    border-radius: .7rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
}

    .pi-btn.pi-btn-sm i {
        font-size: 1rem;
    }

/* Uses your existing theme tokens/classes (text-eis, pi-btn, pi-badge) */

.pi-claim-card {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(78,29,118,.10);
    transition: transform .15s ease, box-shadow .15s ease;
    background: #fff;
}

    .pi-claim-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 34px rgba(78,29,118,.16);
    }

.pi-claim-img {
    position: relative;
    height: 160px;
    overflow: hidden;
    background: #f5f3f8;
}

    .pi-claim-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transform: scale(1.02);
    }

    /* subtle purple sheen */
    .pi-claim-img::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(78,29,118,.18) 110%);
        pointer-events: none;
    }

.required-label::after {
    content: " *";
    color: red;
    font-weight: 700;
}

.bf-table-shell {
    min-height: 160px;
    border: 1px solid #dfe3e8;
    border-radius: 1rem;
    background: #fff;
    overflow: hidden;
}

.bf-table {
    margin-bottom: 0;
}

    .bf-table thead th {
        background: #f3f5f7;
        color: #343a40;
        font-size: .9rem;
        font-weight: 600;
        border-bottom: 2px solid #dee2e6;
        padding: .9rem .85rem;
        vertical-align: middle;
        white-space: nowrap;
    }

    .bf-table tbody td,
    .bf-table tfoot td {
        padding: .85rem;
        vertical-align: middle;
        border-color: #e9ecef;
    }

    .bf-table tbody tr:nth-child(even) {
        background: #fafbfc;
    }

    .bf-table tbody tr:hover {
        background: #eef3f8;
    }

    .bf-table .form-control,
    .bf-table .input-group-text {
        min-height: 2.4rem;
    }

    .bf-table .form-control {
        border-radius: .65rem;
    }

    .bf-table .input-group-text {
        border-radius: .65rem 0 0 .65rem;
        background: #f1f3f5;
        border-color: #ced4da;
        font-weight: 600;
        color: #495057;
    }

    .bf-table .input-group .form-control {
        border-radius: 0 .65rem .65rem 0;
    }

    .bf-table .btn-outline-danger {
        border-radius: .65rem;
        width: 2.4rem;
        height: 2.4rem;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

.bf-empty td {
    background: #fff;
}

.bf-add-link {
    border: 0 !important;
    background: transparent !important;
    padding: .35rem .75rem;
    box-shadow: none !important;
    text-decoration: none;
}

    .bf-add-link:hover {
        opacity: .9;
    }

    .bf-add-link .pill {
        width: 2.2rem;
        height: 2.2rem;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-right: .5rem;
    }

tfoot.bf-tfoot td {
    border-top: 1px solid #dee2e6;
    padding-top: .85rem;
    padding-bottom: .85rem;
    background: #f7f9fb;
}

.bf-table-total {
    margin-top: .85rem;
    padding: 0 10px 10px 15px;
    font-size: .95rem;
    font-weight: 600;
    color: #212529;
}

    .bf-table-total span {
        font-variant-numeric: tabular-nums;
    }

@media (max-width: 767.98px) {
    .bf-table thead th,
    .bf-table tbody td,
    .bf-table tfoot td {
        padding: .7rem;
    }

    .bf-table-shell {
        border-radius: .85rem;
    }
}

.bf-subtitle {
    color: #5f6b7a;
    font-size: .95rem;
    font-weight: 400;
    line-height: 1.55;
}

/* Summary section wrapper */
.bf-summary-block {
    margin-bottom: 2rem;
}

/* Review table */
.bf-summary-table {
    border: 1px solid #dfe3e8;
    border-radius: .75rem;
    overflow: hidden;
    background: #fff;
}

    /* table base */
    .bf-summary-table table {
        margin-bottom: 0;
    }

    /* header / label column */
    .bf-summary-table th {
        font-weight: 600;
        color: #495057;
        background: #f4f6f8;
        padding: .75rem 1rem;
        border-bottom: 1px solid #e4e7eb;
        border-right: 1px solid #e4e7eb;
    }

    /* value column */
    .bf-summary-table td {
        font-weight: 500;
        color: #212529;
        padding: .75rem 1rem;
        border-bottom: 1px solid #e4e7eb;
        background: #fff;
    }

    /* remove final border */
    .bf-summary-table tr:last-child td,
    .bf-summary-table tr:last-child th {
        border-bottom: none;
    }

/* numeric alignment */
.bf-summary-number {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* section headings */
.bf-summary-title {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: .75rem;
}

/* helper text */
.bf-summary-note {
    color: #6c757d;
    font-size: .9rem;
    margin-top: .5rem;
}

.council-cv-actions {
    display: inline-flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.council-cv-name {
    font-weight: 800;
    color: #2f0f48;
}

.council-cv-status {
    font-weight: 700;
}

    .council-cv-status.is-included {
        color: #198754;
    }

    .council-cv-status.is-excluded {
        color: #dc3545;
    }