/* Claim-status presentation only. Shared site primitives remain in style.css. */
.claim-status-page { overflow: hidden; background: var(--perla-cream); }
.claim-status-hero { position: relative; min-height: 360px; overflow: hidden; background: var(--perla-burgundy); }
.claim-status-hero::before { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(40, 7, 11, .9), rgba(72, 8, 15, .56)), url('../images/claims.jfif') center / cover; content: ""; }
.claim-status-hero .container-xxl { position: relative; min-height: 360px; }
.claim-status-hero-copy { position: relative; z-index: 1; max-width: 700px; padding: 70px 0 58px; }
.claim-status-hero h1 { margin: 0; color: #fff; font-size: clamp(3rem, 5vw, 4.8rem); line-height: .98; }
.claim-status-hero h1 span { color: #f1a6ab; }
.claim-status-intro { padding: 62px 0 76px; }
.claim-status-shell { max-width: 1080px; margin: 0 auto; }
.claim-status-panel { padding: 28px; border: 1px solid #eee5e3; border-radius: 12px; background: #fff; box-shadow: 0 6px 18px rgba(68, 30, 31, .04); }
.claim-status-panel + .claim-status-panel { margin-top: 24px; }
.claim-search-group { display: flex; gap: 10px; }
.claim-search-group .form-control { min-height: 48px; }
.claim-search-group .btn { flex: 0 0 auto; }
.claim-status-help, .claim-status-helper, .claim-status-meta-item span, .claim-status-summary, .claim-status-privacy-note, .claim-status-timeline-copy, .claim-status-empty { color: var(--perla-muted); font-size: .78rem; line-height: 1.6; }
.claim-status-overview { border-top: 3px solid var(--perla-red); }
.claim-status-lockup { display: flex; gap: 16px; align-items: center; }
.claim-status-icon, .claim-status-section-icon { display: grid; flex: 0 0 48px; width: 48px; height: 48px; place-items: center; border-radius: 50%; background: var(--perla-red-soft); color: var(--perla-red); font-size: 1.1rem; }
.claim-status-current-label { color: var(--perla-muted); font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.claim-status-current-title { margin: 3px 0 0; color: var(--perla-black); font-size: clamp(1.55rem, 3vw, 2.2rem); }
.claim-status-summary { max-width: 760px; margin: 20px 0; }
.claim-status-meta-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.claim-status-meta-item { min-width: 0; padding: 14px; border: 1px solid var(--perla-line); border-radius: 8px; background: var(--perla-blush); }
.claim-status-meta-item span { display: block; margin-bottom: 4px; font-size: .65rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.claim-status-meta-item strong { display: block; overflow-wrap: anywhere; color: var(--perla-text); font-size: .88rem; }
.claim-status-sensitive { display: flex; gap: 7px; align-items: center; }
.claim-status-sensitive button { padding: 0; border: 0; background: transparent; color: var(--perla-red); }
.claim-status-progress { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 25px; }
.claim-status-progress-step { position: relative; display: grid; gap: 7px; color: var(--perla-muted); font-size: .68rem; text-align: center; }
.claim-status-progress-step::before { position: absolute; top: 16px; right: 50%; left: -50%; height: 2px; background: var(--perla-line); content: ""; }
.claim-status-progress-step:first-child::before { display: none; }
.claim-status-progress-dot { position: relative; z-index: 1; display: grid; width: 34px; height: 34px; margin: 0 auto; place-items: center; border: 2px solid var(--perla-line); border-radius: 50%; background: #fff; }
.claim-status-progress-step.is-done, .claim-status-progress-step.is-active { color: var(--perla-red); font-weight: 700; }
.claim-status-progress-step.is-done::before, .claim-status-progress-step.is-active::before { background: var(--perla-red); }
.claim-status-progress-step.is-done .claim-status-progress-dot, .claim-status-progress-step.is-active .claim-status-progress-dot { border-color: var(--perla-red); background: var(--perla-red); color: #fff; }
.claim-status-pill { display: inline-flex; padding: 4px 9px; border-radius: 999px; background: var(--perla-red-soft); color: var(--perla-red); font-size: .68rem; font-weight: 800; }
.claim-status-table-wrap { overflow-x: auto; }
.claim-status-table { min-width: 620px; margin: 0; font-size: .8rem; }
.claim-status-table th { color: var(--perla-text); background: #f2f5fa; font-weight: 800; }
.claim-status-table th, .claim-status-table td { padding: 12px 13px; border-color: var(--perla-line); vertical-align: middle; }
.claim-status-history { display: grid; gap: 13px; }
.claim-status-history-entry { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; }
.claim-status-history-marker { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; background: var(--perla-red-soft); color: var(--perla-red); }
.claim-status-history-card { padding: 15px; border: 1px solid var(--perla-line); border-radius: 8px; background: var(--perla-warm-white); }
.claim-status-history-topline { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.claim-status-history-date { color: var(--perla-muted); font-size: .7rem; }
.claim-status-documents .modal-content { border: 0; border-radius: 12px; }

/* Compatibility presentation for preserved legacy markup and JavaScript hooks. */
.claim-status-page .form-card, .claim-status-page .matching-cases-card, .claim-status-page .status-overview, .claim-status-page .result-section > .section-header + .public-history-table-wrap { padding: 24px; border: 1px solid var(--perla-line); border-radius: 10px; background: var(--perla-warm-white); box-shadow: 0 4px 12px rgba(68, 30, 31, .035); }
.claim-status-page .result-section { margin-top: 28px; } /* Updated from 24px */
.claim-status-page .claim-search-group { display: flex; gap: 10px; }
.claim-status-page .claim-search-group .form-control { min-height: 48px; }
.claim-status-page #claim_ref { background: var(--perla-warm-white); color: var(--perla-black); }
.claim-status-page #claim_ref::placeholder { color: #5f5753; opacity: 1; }
.claim-status-page #claim_ref:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--perla-warm-white) inset; -webkit-text-fill-color: var(--perla-black); }
.claim-status-page .btn-perla { border-color: var(--perla-red); background: var(--perla-red); color: #fff; }
.claim-status-page .btn-perla:hover, .claim-status-page .btn-perla:focus { border-color: var(--perla-red-dark); background: var(--perla-red-dark); color: #fff; }
.claim-status-page .hint, .claim-status-page .security-note, .claim-status-page .tiny-muted, .claim-status-page .matching-cases-helper, .claim-status-page .status-summary-copy, .claim-status-page .status-privacy-note { color: var(--perla-muted); font-size: .76rem; line-height: 1.55; }
.claim-status-page .result-title { margin: 0 0 8px; color: var(--perla-black); font-size: 1.25rem; font-weight: 700; }
.claim-status-page .status-lockup { display: flex; gap: 16px; align-items: center; }
.claim-status-page .status-icon, .claim-status-page .timeline-marker { display: grid; flex: 0 0 48px; width: 48px; height: 48px; place-items: center; border-radius: 50%; background: var(--perla-red-soft); color: var(--perla-red); }
.claim-status-page .status-current-label { color: var(--perla-muted); font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.claim-status-page .status-current-title { margin: 3px 0 0; color: var(--perla-black); font-size: clamp(1.55rem, 3vw, 2.2rem); font-weight: 700; }
.claim-status-page .status-meta-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 26px; }
.claim-status-page .status-meta-item { min-width: 0; padding: 14px; border: 1px solid var(--perla-line); border-radius: 8px; background: var(--perla-blush); }
.claim-status-page .status-meta-item span { display: block; margin-bottom: 4px; color: var(--perla-muted); font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.claim-status-page .status-meta-item strong { display: block; overflow-wrap: anywhere; color: var(--perla-text); font-size: .88rem; font-weight: 600; }
.claim-status-page .status-sensitive-value { display: flex; gap: 10px; align-items: center; }
.claim-status-page .status-visibility-toggle { padding: 0; border: 0; background: transparent; color: var(--perla-red); }
.claim-status-page .status-progress { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 30px; }
.claim-status-page .progress-step { position: relative; display: grid; gap: 7px; color: var(--perla-muted); font-size: .68rem; text-align: center; }
.claim-status-page .progress-dot { position: relative; z-index: 1; display: grid; width: 34px; height: 34px; margin: 0 auto; place-items: center; border: 2px solid var(--perla-line); border-radius: 50%; background: #fff; }
.claim-status-page .progress-step.is-done, .claim-status-page .progress-step.is-active { color: var(--perla-red); font-weight: 700; }
.claim-status-page .progress-step.is-done .progress-dot, .claim-status-page .progress-step.is-active .progress-dot { border-color: var(--perla-red); background: var(--perla-red); color: #fff; }

/* Status Pill Base */
.claim-status-page .status-pill { display: inline-flex; padding: 4px 9px; border-radius: 999px; background: var(--perla-red-soft); color: var(--perla-red); font-size: .68rem; font-weight: 800; }

/* Section Eyebrow Styling */
.claim-status-page .section-eyebrow {
    display: block;
    margin-bottom: 10px;
    color: var(--perla-red);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Status Pill Color Variants */
.claim-status-page .status-pill.status-approved { background: #e8f5e9; color: #2e7d32; }
.claim-status-page .status-pill.status-findings { background: #fff3e0; color: #e65100; }
.claim-status-page .status-pill.status-evaluation { background: #e3f2fd; color: #1565c0; }
.claim-status-page .status-pill.status-documents { background: #fce4ec; color: #c62828; }
.claim-status-page .status-pill.status-filed { background: var(--perla-red-soft); color: var(--perla-red); }
.claim-status-page .status-pill.status-notice { background: #f3e5f5; color: #7b1fa2; }

/* Progress Stepper Connector Lines */
.claim-status-page .progress-step { position: relative; }
.claim-status-page .progress-step::before {
    content: "";
    position: absolute;
    top: 17px;
    right: 50%;
    left: -50%;
    height: 2px;
    background: var(--perla-line);
}
.claim-status-page .progress-step:first-child::before { display: none; }
.claim-status-page .progress-step.is-done::before,
.claim-status-page .progress-step.is-active::before { background: var(--perla-red); }

.claim-status-page .matching-cases-table-wrap, .claim-status-page .public-history-table-wrap { overflow-x: auto; }
.claim-status-page .matching-cases-table, .claim-status-page .public-claim-history-table { min-width: 620px; margin: 0; font-size: .8rem; }
.claim-status-page .matching-cases-table th, .claim-status-page .public-claim-history-table th { color: var(--perla-text); background: #f2f5fa; font-weight: 800; }
.claim-status-page .matching-cases-table th, .claim-status-page .matching-cases-table td, .claim-status-page .public-claim-history-table th, .claim-status-page .public-claim-history-table td { padding: 12px 13px; border-color: var(--perla-line); vertical-align: middle; }

/* Matching cases: keep generic Bootstrap/AdminLTE table themes from painting
   the result row dark. The status badge remains the only colored state. */
.claim-status-page .matching-cases-table-wrap {
    border: 1px solid var(--perla-line);
    border-radius: 8px;
    background: #fff;
}

.claim-status-page .matching-cases-table {
    min-width: 760px;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    color: var(--perla-text);
}

.claim-status-page .matching-cases-table > :not(caption) > * > * {
    border-bottom: 1px solid var(--perla-line);
    color: var(--perla-text);
    background-color: #fff !important;
    box-shadow: none !important;
}

.claim-status-page .matching-cases-table thead th {
    border-bottom: 1px solid #d8dfe8;
    background-color: #f2f5fa !important;
    color: var(--perla-text) !important;
    font-weight: 800;
}

.claim-status-page .matching-cases-table tbody tr,
.claim-status-page .matching-cases-table tbody td {
    background-color: #fff !important;
}

.claim-status-page .matching-cases-table tbody tr:hover,
.claim-status-page .matching-cases-table tbody tr:hover > td {
    background-color: #fffaf9 !important;
}

.claim-status-page .matching-cases-table tbody tr:last-child td {
    border-bottom: 0;
}

.claim-status-page .matching-cases-table td:last-child {
    white-space: nowrap;
}

.claim-status-page .matching-cases-table .matching-case-action-form {
    margin: 0;
}
.claim-status-page .public-history-entry { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; }
.claim-status-page .timeline-card { padding: 18px 20px; border: 1px solid var(--perla-line); border-radius: 8px; background: var(--perla-warm-white); }
.claim-status-page .timeline-topline, .claim-status-page .section-header { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.claim-status-page .timeline-date { color: var(--perla-muted); font-size: .72rem; font-weight: 700; text-transform: uppercase; }

/* Final Claim Status refinement. Everything below is scoped to this page so
   shared tables, buttons, and footer components are not changed globally. */
.claim-status-page .status-overview,
.claim-status-page .result-section > .section-header + .public-history-table-wrap {
    padding: 32px;
}

.claim-status-page .status-hero {
    margin-bottom: 22px;
}

.claim-status-page .status-summary-copy {
    max-width: 850px;
    margin: 15px 0 0;
    color: var(--perla-muted);
    font-size: .84rem;
    line-height: 1.65;
}

.claim-status-page .status-privacy-note {
    margin: 10px 0 0;
    color: var(--perla-muted);
    font-size: .76rem;
    line-height: 1.55;
}

.claim-status-page .status-meta-grid {
    gap: 14px;
    margin-top: 26px;
}

.claim-status-page .status-meta-item {
    min-height: 72px;
    padding: 15px 16px;
}

.claim-status-page .status-sensitive-value {
    min-width: 0;
    justify-content: space-between;
}

.claim-status-page .status-sensitive-value strong {
    min-width: 0;
    flex: 1 1 auto;
    line-height: 1.4;
}

/* EYE/PRIVACY ICONS */
.claim-status-page .status-visibility-toggle {
    display: inline-grid;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    padding: 0;
    place-items: center;
    border: 2px solid var(--perla-line);
    border-radius: 50%;
    background: #fff;
    color: var(--perla-red);
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease, color .2s ease, transform .2s ease;
    align-self: center;
}

.claim-status-page .status-visibility-toggle:hover,
.claim-status-page .status-visibility-toggle:focus-visible {
    border-color: var(--perla-red);
    background: var(--perla-red-soft);
    color: var(--perla-red-dark);
}

.claim-status-page .status-visibility-toggle:focus-visible {
    outline: 3px solid rgba(151, 11, 23, .18);
    outline-offset: 2px;
}

.claim-status-page .status-visibility-toggle:active {
    transform: scale(.96);
}

.claim-status-page .status-visibility-toggle svg {
    display: block;
    width: 18px;
    height: 18px;
}

.claim-status-page .status-visibility-toggle .eye-off-icon {
    display: none;
}

.claim-status-page .status-visibility-toggle[aria-pressed="true"] .eye-icon {
    display: none;
}

.claim-status-page .status-visibility-toggle[aria-pressed="true"] .eye-off-icon {
    display: block;
}

.claim-status-page .status-progress {
    gap: 12px;
    margin-top: 30px;
    padding-top: 24px;
    border-top: 1px solid var(--perla-line);
}

.claim-status-page .progress-step {
    min-width: 0;
    line-height: 1.35;
}

.claim-status-page .progress-step-label {
    overflow-wrap: anywhere;
}

.claim-status-page .section-header {
    align-items: flex-end;
    margin-bottom: 18px;
}

.claim-status-page .section-header > div {
    min-width: 0;
}

.claim-status-page .section-header .result-title {
    margin-bottom: 5px;
}

.claim-status-page .public-history-table-wrap {
    overflow-x: auto;
    padding: 22px 24px 24px;
    border: 1px solid var(--perla-line);
    border-radius: 10px;
    background: var(--perla-warm-white);
}

/* Bootstrap/AdminLTE table variables can paint a dark inset layer. Reset
   every table cell inside the history wrapper before styling the cards. */
.claim-status-page #publicClaimHistoryTable_wrapper,
.claim-status-page #publicClaimHistoryTable_wrapper .dataTables_wrapper,
.claim-status-page #publicClaimHistoryTable_wrapper table,
.claim-status-page #publicClaimHistoryTable {
    color: var(--perla-text);
    background: transparent !important;
}

.claim-status-page #publicClaimHistoryTable_wrapper table.dataTable,
.claim-status-page #publicClaimHistoryTable_wrapper table.dataTable > :not(caption) > *,
.claim-status-page #publicClaimHistoryTable_wrapper table.dataTable > :not(caption) > * > *,
.claim-status-page #publicClaimHistoryTable > :not(caption) > * > * {
    background: transparent !important;
    box-shadow: none !important;
}

.claim-status-page #publicClaimHistoryTable_wrapper table.dataTable {
    width: 100% !important;
    min-width: 620px;
    margin: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 14px !important;
}

.claim-status-page #publicClaimHistoryTable_wrapper table.dataTable thead {
    display: none !important; /* Hide redundant head */
}

.claim-status-page #publicClaimHistoryTable_wrapper table.dataTable tbody tr,
.claim-status-page #publicClaimHistoryTable_wrapper table.dataTable tbody td {
    background: transparent !important;
    box-shadow: none !important;
}

.claim-status-page #publicClaimHistoryTable_wrapper table.dataTable tbody td {
    padding: 0 !important;
    border: 0 !important;
    color: var(--perla-text) !important;
}

.claim-status-page .public-history-entry {
    min-width: 0;
    align-items: start;
    gap: 14px;
}

.claim-status-page .timeline-marker {
    width: 40px;
    height: 40px;
    margin-top: 2px;
    border: 1px solid var(--perla-line);
}

.claim-status-page .timeline-card {
    min-width: 0;
    padding: 18px 20px;
    background: #fff !important;
    box-shadow: 0 3px 10px rgba(68, 30, 31, .035);
}

.claim-status-page .timeline-topline {
    align-items: flex-start;
    gap: 14px;
}

.claim-status-page .timeline-date {
    display: block;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.claim-status-page .timeline-remark {
    margin-top: 12px;
    color: var(--perla-text);
    font-size: .82rem;
    line-height: 1.7;
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.claim-status-page .timeline-card .status-pill {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* DATATABLES CONTROL BAR */
.claim-status-page #publicClaimHistoryTable_wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.claim-status-page #publicClaimHistoryTable_wrapper .dataTables_length,
.claim-status-page #publicClaimHistoryTable_wrapper .dataTables_filter {
    margin-bottom: 14px;
    display: flex;
    align-items: center;
}

.claim-status-page #publicClaimHistoryTable_wrapper .dataTables_length {
    margin-left: auto;
}

.claim-status-page #publicClaimHistoryTable_wrapper table.dataTable {
    width: 100% !important;
}

.claim-status-page #publicClaimHistoryTable_wrapper .dataTables_length label,
.claim-status-page #publicClaimHistoryTable_wrapper .dataTables_filter label,
.claim-status-page #publicClaimHistoryTable_wrapper .dataTables_info {
    color: var(--perla-muted);
    font-size: .78rem;
    line-height: 1.5;
    display: flex;
    align-items: center;
    gap: 10px;
}

.claim-status-page #publicClaimHistoryTable_wrapper .dataTables_length label {
    margin: 0;
    white-space: nowrap;
}

.claim-status-page #publicClaimHistoryTable_wrapper .dataTables_length select,
.claim-status-page #publicClaimHistoryTable_wrapper .dataTables_filter input {
    min-height: 34px;
    border: 1px solid var(--perla-line);
    border-radius: 6px;
    background: #fff;
    color: var(--perla-text);
}

.claim-status-page #publicClaimHistoryTable_wrapper .dataTables_length select {
    min-width: 58px;
    margin: 0;
    padding: 4px 24px 4px 8px;
}

.claim-status-page #publicClaimHistoryTable_wrapper .dataTables_filter input {
    margin: 0;
    padding: 5px 9px;
}

.claim-status-page #publicClaimHistoryTable_wrapper .dataTables_info {
    padding-top: 0;
    margin: 0;
    width: auto;
}

.claim-status-page #publicClaimHistoryTable_wrapper .dataTables_paginate {
    margin: 0 !important;
    padding-top: 0 !important;
    width: auto;
    text-align: right;
}

.claim-status-page #publicClaimHistoryTable_wrapper > .row:last-of-type {
    display: flex;
    align-items: center;
    width: 100%;
    margin-right: 0;
    margin-left: 0;
}

.claim-status-page #publicClaimHistoryTable_wrapper > .row:last-of-type > [class*="col-"] {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    padding-right: 0;
    padding-left: 0;
}

.claim-status-page #publicClaimHistoryTable_wrapper > .row:last-of-type > [class*="col-"]:last-child {
    flex: 0 0 auto;
}

@media (min-width: 768px) {
    .claim-status-page #publicClaimHistoryTable_wrapper .dataTables_info {
        width: auto;
        margin-top: 4px;
    }
    .claim-status-page #publicClaimHistoryTable_wrapper .dataTables_paginate {
        width: auto;
        margin-top: 4px !important;
        text-align: right;
    }
}

.claim-status-page #publicClaimHistoryTable_wrapper .pagination {
    gap: 4px;
    margin: 0;
    justify-content: flex-end;
}

.claim-status-page #publicClaimHistoryTable_wrapper .pagination .page-link {
    display: inline-grid;
    min-width: 34px;
    height: 34px;
    padding: 4px 8px;
    place-items: center;
    border: 1px solid var(--perla-line);
    border-radius: 6px !important;
    background: #fff;
    color: var(--perla-text);
    font-size: .76rem;
    line-height: 1;
}

.claim-status-page #publicClaimHistoryTable_wrapper .pagination .page-link:hover,
.claim-status-page #publicClaimHistoryTable_wrapper .pagination .page-link:focus {
    border-color: var(--perla-red);
    background: var(--perla-red-soft);
    color: var(--perla-red-dark);
}

.claim-status-page #publicClaimHistoryTable_wrapper .pagination .page-item.active .page-link {
    border-color: var(--perla-red);
    background: var(--perla-red);
    color: #fff;
}

.claim-status-page #publicClaimHistoryTable_wrapper .pagination .page-item.disabled .page-link {
    background: #f8f6f4;
    color: #aaa29d;
    opacity: 1;
}

/* SUBMITTED DOCUMENTS MODAL */
#submittedDocumentsModal .modal-content {
    border: 0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(40, 7, 11, .24);
    color: var(--perla-text);
}
#submittedDocumentsModal .modal-header {
    border-bottom: 1px solid var(--perla-line);
    padding: 20px 24px;
    background: #fff;
}
#submittedDocumentsModal .modal-title {
    color: var(--perla-black);
    font-size: 1.45rem;
    line-height: 1.2;
    font-weight: 700;
}
#submittedDocumentsModal .modal-header p {
    color: var(--perla-muted) !important;
    font-size: .78rem;
    line-height: 1.5;
    margin-bottom: 0;
}
#submittedDocumentsModal .btn-close {
    position: relative;
    display: inline-grid;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    margin: -4px -4px -4px 12px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background-color: transparent;
    background-image: none !important;
    color: #463b3d;
    appearance: none;
    box-shadow: none;
    --bs-btn-close-bg: none;
    opacity: 1;
    transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
#submittedDocumentsModal .btn-close::before {
    content: "×";
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 1;
}
#submittedDocumentsModal .btn-close:hover,
#submittedDocumentsModal .btn-close:focus-visible {
    background: var(--perla-red-soft);
    color: var(--perla-red-dark);
    opacity: 1;
}
#submittedDocumentsModal .btn-close:focus-visible {
    outline: 3px solid rgba(151, 11, 23, .18);
    outline-offset: 2px;
}
#submittedDocumentsModal .modal-body {
    padding: 24px;
    max-height: 60vh;
    overflow-y: auto;
    background: #fff;
    scrollbar-color: #b9aeb0 transparent;
    scrollbar-width: thin;
}
#submittedDocumentsModal .modal-body::-webkit-scrollbar {
    width: 6px;
}
#submittedDocumentsModal .modal-body::-webkit-scrollbar-thumb {
    background-color: #b9aeb0;
    border-radius: 10px;
}
#submittedDocumentsModal ol {
    display: grid;
    gap: 12px;
    margin: 0;
    padding-left: 0 !important;
    list-style: none;
    counter-reset: submitted-document;
}
#submittedDocumentsModal li.mb-3 {
    position: relative;
    margin: 0 !important;
    padding: 16px 16px 16px 52px;
    background: #fffaf9;
    border: 1px solid var(--perla-line);
    border-radius: 8px;
    overflow-wrap: anywhere;
}
#submittedDocumentsModal li.mb-3::before {
    position: absolute;
    top: 16px;
    left: 16px;
    display: inline-grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 50%;
    background: var(--perla-red-soft);
    color: var(--perla-red-dark);
    content: counter(submitted-document);
    counter-increment: submitted-document;
    font-size: .72rem;
    font-weight: 800;
}
#submittedDocumentsModal .fw-bold.text-dark {
    color: var(--perla-black) !important;
    font-size: .95rem;
    line-height: 1.4;
    margin-bottom: 4px;
    word-break: break-word;
}
#submittedDocumentsModal .small.text-muted {
    display: block;
    color: #4b4545 !important;
    font-size: .8rem;
    line-height: 1.4;
}
#submittedDocumentsModal .btn-outline-danger {
    margin-top: 12px !important;
    min-height: 36px;
    padding: 6px 14px;
    font-size: .8rem;
    font-weight: 700;
}
#submittedDocumentsModal .modal-footer {
    border-top: 1px solid var(--perla-line);
    padding: 16px 24px;
    background: #fff;
}
#submittedDocumentsModal .modal-footer .tiny-muted {
    color: #4b4545 !important;
    line-height: 1.5;
}

#submittedDocumentsModal .modal-footer .btn-secondary {
    border-color: var(--perla-red-dark);
    background: var(--perla-red-dark);
    color: #fff;
    font-weight: 700;
}

#submittedDocumentsModal .modal-footer .btn-secondary:hover,
#submittedDocumentsModal .modal-footer .btn-secondary:focus-visible {
    border-color: #7e0b1d;
    background: #7e0b1d;
    color: #fff;
}

#submittedDocumentsModal .modal-footer .btn-secondary:focus-visible {
    outline: 3px solid rgba(151, 11, 23, .2);
    outline-offset: 2px;
}

/* Bootstrap marks the page with modal-open while Submitted Documents is
   visible. Keep the fixed Tawk control out of the modal's close/footer area;
   the widget returns automatically when the modal closes. */
body.modal-open [id*="tawk" i],
body.modal-open [class*="tawk" i],
body.modal-open iframe[src*="tawk.to" i],
body.modal-open iframe[title*="chat" i] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

@media (max-width: 767.98px) {
    .claim-status-hero, .claim-status-hero .container-xxl { min-height: 390px; } 
    .claim-status-hero-copy { padding: 55px 0 48px; } 
    .claim-status-intro { padding-block: 42px 54px; } 
    .claim-status-panel { padding: 22px 17px; } 
    .claim-search-group { flex-direction: column; } 
    .claim-search-group .btn { width: 100%; } 
    .claim-status-meta-grid { grid-template-columns: 1fr; } 
    .claim-status-progress { grid-template-columns: 1fr; text-align: left; } 
    .claim-status-progress-step { grid-template-columns: 34px 1fr; align-items: center; text-align: left; } 
    .claim-status-progress-step::before { top: -13px; right: auto; bottom: 13px; left: 16px; width: 2px; height: auto; } 
    .claim-status-history-topline { align-items: flex-start; flex-direction: column; }
    .claim-status-page .claim-search-group { flex-direction: column; } 
    .claim-status-page .claim-search-group .btn { width: 100%; } 
    .claim-status-page .status-meta-grid { grid-template-columns: 1fr; } 
    .claim-status-page .section-header, .claim-status-page .timeline-topline { align-items: flex-start; flex-direction: column; }

    .claim-status-page .status-overview,
    .claim-status-page .result-section > .section-header + .public-history-table-wrap {
        padding: 22px 17px;
    }

    .claim-status-page .section-header {
        align-items: stretch;
        gap: 14px;
        margin-bottom: 14px;
    }

    .claim-status-page .section-header .btn {
        width: 100%;
    }

    .claim-status-page .public-history-table-wrap {
        padding: 16px 13px 18px;
    }

    .claim-status-page .public-history-entry {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 10px;
    }

    .claim-status-page .timeline-marker {
        width: 34px;
        height: 34px;
    }

    .claim-status-page .timeline-card {
        padding: 14px;
    }

    .claim-status-page .timeline-topline {
        gap: 8px;
    }

    .claim-status-page #publicClaimHistoryTable_wrapper .dataTables_length,
    .claim-status-page #publicClaimHistoryTable_wrapper .dataTables_filter,
    .claim-status-page #publicClaimHistoryTable_wrapper .dataTables_info,
    .claim-status-page #publicClaimHistoryTable_wrapper .dataTables_paginate {
        float: none;
        width: 100%;
        margin-right: 0;
        margin-left: 0;
        text-align: left;
    }

    .claim-status-page #publicClaimHistoryTable_wrapper .dataTables_length,
    .claim-status-page #publicClaimHistoryTable_wrapper .dataTables_filter {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-left: 0;
    }
    
    .claim-status-page #publicClaimHistoryTable_wrapper .dataTables_length label,
    .claim-status-page #publicClaimHistoryTable_wrapper .dataTables_filter label {
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }
    
    .claim-status-page #publicClaimHistoryTable_wrapper .dataTables_filter input {
        margin: 0;
    }

    .claim-status-page #publicClaimHistoryTable_wrapper .dataTables_paginate {
        margin-top: 10px !important;
        text-align: left;
        display: flex;
        justify-content: flex-start;
    }

    .claim-status-page #publicClaimHistoryTable_wrapper .pagination {
        justify-content: flex-start;
    }

    .claim-status-page #publicClaimHistoryTable_wrapper > .row:last-of-type {
        flex-direction: column;
        align-items: stretch;
    }

    .claim-status-page #publicClaimHistoryTable_wrapper > .row:last-of-type > [class*="col-"] {
        flex: 0 0 100%;
        width: 100%;
    }

    /* Modal Mobile Fixes */
    #submittedDocumentsModal .modal-dialog {
        margin: 10px;
    }
    #submittedDocumentsModal .modal-content {
        width: 100%;
    }
    #submittedDocumentsModal .modal-body {
        max-height: calc(100vh - 180px);
        padding: 18px 16px;
    }
    #submittedDocumentsModal .modal-header,
    #submittedDocumentsModal .modal-footer {
        padding: 16px;
    }
    #submittedDocumentsModal li.mb-3 {
        padding: 14px 14px 14px 48px;
    }
    #submittedDocumentsModal li.mb-3::before {
        top: 14px;
        left: 14px;
    }
}

@media (max-width: 575.98px) {
    /* Mobile keeps the same five-step structure, but removes the desktop
       connector so labels can wrap inside their own equal-width columns. */
    .claim-status-page .status-progress {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 6px;
        padding: 16px 8px 14px;
    }

    .claim-status-page .progress-step {
        display: flex;
        min-width: 0;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 5px;
        text-align: center;
    }

    .claim-status-page .progress-step::before {
        display: none;
    }

    .claim-status-page .progress-dot {
        width: 30px;
        height: 30px;
        margin: 0;
        flex-basis: 30px;
    }

    .claim-status-page .progress-step-label {
        width: 100%;
        min-height: 2.5em;
        font-size: .68rem;
        line-height: 1.25;
        text-wrap: balance;
        overflow-wrap: break-word;
        word-break: normal;
    }

    /* Leave scrollable breathing room for the fixed chat control so the
       final history card and pagination can be brought fully above it. */
    .claim-status-page {
        padding-bottom: 84px;
    }

    /* The history table has one card column. On narrow screens let that
       column become the viewport width instead of preserving the desktop
       table's 620px minimum and forcing a horizontal scroll. */
    .claim-status-page .public-history-table-wrap {
        overflow: visible;
        min-width: 0;
    }

    .claim-status-page #publicClaimHistoryTable_wrapper,
    .claim-status-page #publicClaimHistoryTable_wrapper .dataTables_wrapper,
    .claim-status-page #publicClaimHistoryTable_wrapper table.dataTable,
    .claim-status-page #publicClaimHistoryTable {
        width: 100% !important;
        max-width: 100%;
        min-width: 0 !important;
    }

    .claim-status-page #publicClaimHistoryTable_wrapper table.dataTable {
        table-layout: fixed;
    }

    .claim-status-page #publicClaimHistoryTable_wrapper table.dataTable tbody tr,
    .claim-status-page #publicClaimHistoryTable_wrapper table.dataTable tbody td {
        width: 100%;
        min-width: 0;
    }

    .claim-status-page .public-history-entry,
    .claim-status-page .timeline-card,
    .claim-status-page .timeline-topline,
    .claim-status-page .timeline-date,
    .claim-status-page .timeline-remark {
        min-width: 0;
        max-width: 100%;
    }

    .claim-status-page .timeline-topline {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .claim-status-page .timeline-card .status-pill {
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
        text-align: left;
    }

    .claim-status-page .timeline-remark {
        overflow-wrap: anywhere;
        white-space: pre-line;
    }
}

/* Five equal columns are clear on wider phones. Below 400px, the long
   status names need a compact 3 + 2 grid instead of being squeezed into
   three or four lines. The sequence stays left-to-right and line-less. */
@media (max-width: 399.98px) {
    .claim-status-page .status-progress {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        column-gap: 10px;
        row-gap: 16px;
        padding: 16px 2px 12px;
    }

    .claim-status-page .progress-step {
        grid-column: span 2;
        gap: 6px;
    }

    .claim-status-page .progress-step:nth-child(4) {
        grid-column: 2 / span 2;
    }

    .claim-status-page .progress-step:nth-child(5) {
        grid-column: 4 / span 2;
    }

    .claim-status-page .progress-step-label {
        min-height: 2.5em;
        font-size: .7rem;
        line-height: 1.25;
    }
}

@media (max-width: 374.98px) {
    .claim-status-page .status-overview,
    .claim-status-page .result-section > .section-header + .public-history-table-wrap {
        padding-inline: 13px;
    }

    .claim-status-page .status-meta-item {
        padding-inline: 13px;
    }

    .claim-status-page .timeline-card {
        padding: 12px;
    }
}