/* ============================================================
   FORTIS — SITE-WIDE RESPONSIVE LAYER
   Loaded last from every base.html so it can override.
   Breakpoints follow Bootstrap 5:
     sm <576   md <768   lg <992   xl <1200
   ============================================================ */

/* ── Universal: never let content cause horizontal scroll ── */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

@media (max-width: 991.98px) {
    /* Body padding override — the auth subscription.css sets overflow:hidden
       on html/body which breaks scrolling on phones. Un-do it below md. */
    html, body {
        overflow-y: auto !important;
        height: auto !important;
    }
    #kt_body,
    #kt_body > .d-flex.flex-column.flex-root,
    #kt_body .d-flex.flex-column.flex-lg-row.flex-column-fluid {
        height: auto !important;
        overflow: visible !important;
    }
}

/* ── Touch target sizing for buttons and form controls on phones ── */
@media (max-width: 575.98px) {
    .btn:not(.btn-icon):not(.btn-sm):not(.btn-flush) {
        min-height: 40px;
        padding-left: 0.9rem;
        padding-right: 0.9rem;
    }
    .btn-lg {
        min-height: 44px;
        font-size: 0.9rem;
    }
    .form-control,
    .form-select {
        min-height: 38px;
        font-size: 0.875rem;
    }
    textarea.form-control {
        min-height: 0;
    }
}

/* =====================================================
   SHARED HEADER / NAVBAR
   ===================================================== */
@media (max-width: 991.98px) {
    /* Tighter container padding on mobile */
    .container-xxl,
    .container-xl,
    .container-lg,
    .app-container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Spacing between toolbar icons */
    #kt_header .ms-3, #kt_header .ms-lg-4 {
        margin-left: 0.5rem !important;
    }

    /* The header menu drawer that slides in from the left */
    .header-menu[data-kt-drawer="true"] {
        background-color: var(--bs-body-bg, #fff);
    }
}

/* =====================================================
   SHARED FOOTER
   ===================================================== */
@media (max-width: 767.98px) {
    .footer .container-xxl {
        gap: 0.5rem;
        text-align: center;
    }
    .footer ul.menu {
        justify-content: center;
        flex-wrap: wrap;
    }
    .footer .menu-link {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
}

/* =====================================================
   SHARED CARDS
   ===================================================== */
@media (max-width: 575.98px) {
    .card {
        border-radius: 10px !important;
    }
    .card-header {
        padding: 0.85rem 0.9rem !important;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .card-body {
        padding: 0.9rem !important;
    }
    .card-footer {
        padding: 0.75rem 0.9rem !important;
    }
    .card-toolbar {
        margin-left: 0 !important;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
}

/* =====================================================
   MODALS — universal responsive treatment
   - Tablet (≤991): generous side margins, cap width
   - Phone (≤767): nearly full-width, comfortable padding
   - Small phone (≤575): full-screen with sticky header/footer
   ===================================================== */

/* Tablet: cap fixed-width modals at 90% viewport */
@media (max-width: 991.98px) {
    .modal-dialog {
        max-width: min(720px, calc(100vw - 1.5rem)) !important;
        margin: 0.85rem auto;
    }
    .modal-dialog.mw-600px,
    .modal-dialog.mw-500px,
    .modal-dialog.mw-400px {
        max-width: min(540px, calc(100vw - 1.5rem)) !important;
    }
    /* Long form rows: stack columns inside modal-body */
    .modal-body .row > [class*="col-md-"],
    .modal-body .row > [class*="col-lg-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Phone: wide modal with small side margin */
@media (max-width: 767.98px) {
    .modal-dialog {
        margin: 0.75rem 0.5rem !important;
        max-width: calc(100vw - 1rem) !important;
        min-height: calc(100vh - 1.5rem);
    }
    .modal-dialog.modal-dialog-centered {
        margin: 0.75rem 0.5rem !important;
        min-height: calc(100vh - 1.5rem);
    }
    .modal-content {
        border-radius: 12px !important;
    }
    .modal-header {
        padding: 0.85rem 1rem !important;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .modal-header .modal-title,
    .modal-header h2,
    .modal-header h3,
    .modal-header h4 {
        font-size: 1.05rem !important;
        line-height: 1.25 !important;
        margin: 0;
    }
    .modal-body {
        padding: 1rem !important;
    }
    .modal-footer {
        padding: 0.75rem 1rem !important;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .modal-footer .btn {
        flex: 1 1 auto;
        min-height: 38px;
    }
    /* Form labels & inputs sized for phone */
    .modal-body .form-label {
        font-size: 0.8rem;
        margin-bottom: 0.3rem;
    }
    .modal-body .form-control,
    .modal-body .form-select {
        font-size: 0.85rem;
        min-height: 38px;
    }
    /* Tables inside modals: horizontal scroll */
    .modal-body .table-responsive {
        overflow-x: auto;
    }
}

/* Small phone: go full-screen for max usable area */
@media (max-width: 575.98px) {
    .modal {
        padding: 0 !important;
    }
    .modal-dialog:not(.modal-fullscreen):not(.modal-sm) {
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        min-height: 100vh;
        height: 100vh;
        display: flex;
        align-items: stretch;
    }
    .modal-content {
        border-radius: 0 !important;
        border: 0 !important;
        min-height: 100vh;
        max-height: 100vh;
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    /* Sticky header & footer with scrolling body */
    .modal-header {
        position: sticky;
        top: 0;
        background: var(--bs-modal-bg, var(--bs-body-bg, #fff));
        z-index: 5;
        flex-shrink: 0;
        border-bottom: 1px solid var(--bs-border-color, #e4e6ef);
    }
    .modal-body {
        flex: 1 1 auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .modal-footer {
        position: sticky;
        bottom: 0;
        background: var(--bs-modal-bg, var(--bs-body-bg, #fff));
        z-index: 5;
        flex-shrink: 0;
        border-top: 1px solid var(--bs-border-color, #e4e6ef);
    }
    .modal-footer .btn {
        flex: 1 1 calc(50% - 0.5rem);
        min-width: 0;
    }
    /* Modal-sm stays compact */
    .modal-sm .modal-content {
        min-height: auto;
    }
    /* Long row-stacked form fields inside modals (g-* gutters) */
    .modal-body .row.g-4 > [class*="col-"],
    .modal-body .row.g-3 > [class*="col-"],
    .modal-body .row.g-2 > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* User-view modal (admin) — keep its custom layout, but soften on phones */
@media (max-width: 575.98px) {
    .uvm-content {
        border-radius: 0 !important;
        max-height: 100vh;
    }
    .uvm-header {
        padding: 0.75rem 0.9rem !important;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .uvm-header-title {
        font-size: 0.95rem !important;
    }
    .uvm-banner {
        padding: 0.85rem !important;
    }
}

/* =====================================================
   TABLE → CARD PATTERN
   Tables marked .table-mobile-cards transform into a
   stack of boxed cards below 768px. Each <td> shows its
   header label via data-label, value below.
   Full-width cells span the row; status/badge-style cells
   sit inline at the top.
   ===================================================== */
@media (max-width: 767.98px) {
    .table-mobile-cards,
    .table-mobile-cards thead,
    .table-mobile-cards tbody,
    .table-mobile-cards tr,
    .table-mobile-cards td {
        display: block;
        width: 100%;
    }
    .table-mobile-cards thead {
        display: none;
    }
    .table-mobile-cards {
        margin-bottom: 0 !important;
    }
    .table-mobile-cards tbody {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .table-mobile-cards tr {
        background: #eaf1fb;
        border: 1px solid #c5d6ef;
        border-radius: 12px;
        padding: 1rem;
        padding-left: 1rem !important;
        margin: 0;
        box-shadow: 0 1px 2px rgba(20, 53, 100, 0.05);
        display: flex !important;
        flex-direction: column;
        gap: 0.55rem;
    }
    html[data-bs-theme="dark"] .table-mobile-cards tr {
        background: #1a2842;
        border-color: #2c3f63;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    }

    /* Each cell: label above value */
    .table-mobile-cards td {
        display: flex !important;
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.15rem;
        padding: 0 !important;
        border: 0 !important;
        text-align: left !important;
        min-height: 0 !important;
        line-height: 1.35;
    }
    .table-mobile-cards td::before {
        content: attr(data-label);
        font-size: 0.62rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: #94a3b8;
    }
    /* If no label attr, skip the caption */
    .table-mobile-cards td:not([data-label])::before,
    .table-mobile-cards td[data-label=""]::before {
        content: none;
        display: none;
    }

    /* The first td: typically a status badge — show standalone with no caption */
    .table-mobile-cards td:first-child {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center !important;
        gap: 0.5rem;
    }
    .table-mobile-cards td:first-child::before {
        order: 2;
        margin: 0;
    }
    /* Hide the label for status cells — badge speaks for itself */
    .table-mobile-cards td:first-child .badge {
        margin: 0;
    }

    /* Action cells (only icon button content) — keep compact */
    .table-mobile-cards td[data-kt-filemanager-table="action_dropdown"],
    .table-mobile-cards td[data-kt-user-table-toolbar] {
        flex-direction: row !important;
        justify-content: flex-end !important;
    }
    .table-mobile-cards td[data-kt-filemanager-table="action_dropdown"]::before {
        display: none;
    }

    /* "No entries" colspan rows: simple centered text */
    .table-mobile-cards td[colspan] {
        text-align: center !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .table-mobile-cards td[colspan]::before {
        display: none;
    }

    /* Remove Bootstrap d-flex/flex-column-cls collision on full-width cells.
       Existing markup wraps debtor and contact in d-flex/d-flex flex-column
       which fights our column layout — flatten it. */
    .table-mobile-cards td.full-width-mobile {
        display: flex !important;
        flex-direction: column;
    }
    .table-mobile-cards td.full-width-mobile > div,
    .table-mobile-cards td.full-width-mobile > a {
        display: block;
        width: 100%;
    }

    /* Debtor cell (2nd td when full-width-mobile) becomes the headline */
    .table-mobile-cards tr > td.full-width-mobile:nth-child(2) {
        order: -1;
        padding-bottom: 0.15rem !important;
        border-bottom: 1px dashed #f1f5f9;
    }
    .table-mobile-cards tr > td.full-width-mobile:nth-child(2)::before {
        display: none;
    }
    .table-mobile-cards tr > td.full-width-mobile:nth-child(2) p {
        font-size: 1rem;
        font-weight: 700;
        color: #0f172a;
        margin: 0;
        line-height: 1.25;
    }
    .table-mobile-cards tr > td.full-width-mobile:nth-child(2) span {
        font-size: 0.78rem;
        color: #64748b;
    }

    /* Status (1st td) — sits next to debtor at top */
    .table-mobile-cards tr > td:first-child {
        order: -2;
        padding-bottom: 0.1rem !important;
    }
}

/* Generic table responsiveness fallback — horizontal scroll */
@media (max-width: 991.98px) {
    .table-responsive,
    .claims-table-container,
    .claim-info-table-holder {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* =====================================================
   UP-SECTION (profile header card) — used by panel & admin
   ===================================================== */
@media (max-width: 767.98px) {
    .upsection-card .card-body {
        padding: 1.1rem 1rem !important;
    }
    .upsection-card .ppic-cont-container {
        flex-direction: column;
        align-items: center !important;
        text-align: center;
        gap: 0.5rem;
    }
    .upsection-card .profile-pic-container {
        margin: 0 auto 0.4rem !important;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    /* Force avatar symbol to a fixed mobile size */
    .upsection-card .profile-pic-container .symbol {
        width: 88px !important;
        height: 88px !important;
        min-width: 88px !important;
        line-height: 1 !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
    .upsection-card .profile-pic-container .symbol > img,
    .upsection-card .profile-pic-container img.profile_avatar {
        width: 88px !important;
        height: 88px !important;
        object-fit: cover;
        border-radius: 50%;
    }
    .upsection-card .profile-pic-container .symbol-label {
        width: 88px !important;
        height: 88px !important;
        font-size: 1.5rem !important;
        border-radius: 50%;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
    .upsection-card .profile-name-container {
        justify-content: center;
    }
    .upsection-card .profile-info-container {
        justify-content: center;
        gap: 0.4rem;
    }
    .upsection-card .profile-info-container > a {
        margin-right: 0 !important;
        font-size: 0.85rem;
    }
    .upsection-card .profile-stats-info-cont .d-flex.flex-wrap {
        justify-content: center;
        gap: 0.5rem;
    }
    .upsection-card .profile-stats-info {
        min-width: 0 !important;
        flex: 1 1 calc(50% - 0.5rem);
        margin-right: 0 !important;
        padding: 0.55rem 0.65rem !important;
    }
    .upsection-card .profile-stats-info .fs-2 {
        font-size: 1.25rem !important;
    }
    .upsection-card .profile-stats-info .fs-6 {
        font-size: 0.8rem !important;
    }
    /* Chart: needs visible legend overflow + more height on phones */
    .upsection-card .chart-container {
        height: 260px !important;
        margin-top: 1rem;
        width: 100%;
        max-width: 100%;
        overflow: visible;
    }
    .upsection-card .flex-grow-1.text-center {
        width: 100%;
        min-width: 0;
    }
    .upsection-card canvas {
        max-width: 100% !important;
        height: 100% !important;
    }

    /* Nav tabs (Claims / Settings / etc) — wrapping pill buttons */
    .upsection-card .nav.nav-line-tabs,
    .upsection-card .nav.nav-line-tabs-2x {
        display: flex !important;
        flex-wrap: wrap;
        gap: 0.4rem;
        margin-top: 0.6rem;
        padding: 0;
        border-bottom: 0 !important;
    }
    .upsection-card .nav.nav-line-tabs .nav-item {
        flex: 0 0 auto;
        margin: 0 !important;
    }
    .upsection-card .nav.nav-line-tabs .nav-link {
        margin: 0 !important;
        padding: 0.4rem 0.85rem !important;
        font-size: 0.78rem !important;
        line-height: 1.2;
        border: 1px solid rgba(255, 255, 255, 0.18) !important;
        border-radius: 999px !important;
        background: rgba(255, 255, 255, 0.06);
        white-space: nowrap;
        color: rgba(236, 245, 255, 0.86) !important;
    }
    .upsection-card .nav.nav-line-tabs .nav-link.active {
        background: rgba(255, 255, 255, 0.18) !important;
        border-color: rgba(255, 255, 255, 0.32) !important;
        color: #fff !important;
    }
}

/* =====================================================
   PANEL-PREMIUM (user panel)
   ===================================================== */
@media (max-width: 767.98px) {
    .panel-premium-page-header {
        margin-bottom: 12px;
    }
    .panel-premium-title {
        font-size: 22px !important;
    }
    .panel-premium-subtitle {
        font-size: 13px;
    }
    .panel-premium-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .panel-premium-toolbar > * {
        width: 100%;
    }
    .panel-premium-kpis {
        gap: 6px;
    }
    .panel-premium-kpi {
        font-size: 11px;
        padding: 4px 8px;
    }

    /* Claims-list card header — search + Create Claim stacked, compact */
    .panel-premium-table-card .card-header {
        display: flex !important;
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.5rem;
        padding: 0.7rem 0.85rem 0.5rem !important;
        min-height: 0 !important;
        border-bottom: 0;
    }
    .panel-premium-table-card .card-header.pt-6,
    .panel-premium-table-card .card-header.pt-7,
    .panel-premium-table-card .card-header.pt-8 {
        padding-top: 0.7rem !important;
    }
    .panel-premium-table-card .card-title,
    .panel-premium-table-card .card-toolbar {
        width: 100% !important;
        margin: 0 !important;
        max-width: 100% !important;
        padding: 0 !important;
    }
    .panel-premium-table-card .card-title {
        display: block !important;
        min-height: 0 !important;
    }
    .panel-premium-table-card .card-title > .d-flex {
        width: 100% !important;
        margin: 0 !important;
    }
    /* Search input: full width, slim, small font */
    .panel-premium-table-card .card-title input.form-control,
    .panel-premium-table-card .card-title #table-search,
    .panel-premium-table-card .card-title #searchInput {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 36px !important;
        font-size: 0.82rem !important;
        padding-top: 0.35rem !important;
        padding-bottom: 0.35rem !important;
    }
    /* Shift the search SVG icon since input is full-width */
    .panel-premium-table-card .card-title .svg-icon.position-absolute {
        margin-left: 0.85rem !important;
    }
    .panel-premium-table-card .card-title input.ps-14,
    .panel-premium-table-card .card-title input.ps-15 {
        padding-left: 2.4rem !important;
    }
    .panel-premium-table-card .card-toolbar {
        display: flex !important;
        flex-wrap: wrap;
        gap: 0.4rem;
        min-height: 0 !important;
    }
    .panel-premium-table-card .card-toolbar > .d-flex {
        width: 100%;
        gap: 0.4rem;
        flex-wrap: wrap;
        margin: 0 !important;
    }
    .panel-premium-table-card .card-toolbar .btn {
        width: 100%;
        justify-content: center;
        margin: 0 !important;
        min-height: 38px !important;
        font-size: 0.85rem !important;
        padding-top: 0.45rem !important;
        padding-bottom: 0.45rem !important;
    }
    /* Tight card-body so no dead space below the button */
    .panel-premium-table-card .card-body {
        padding: 0.4rem 0.6rem 0.75rem !important;
    }
    .panel-premium-table-card .card-body.py-4 {
        padding-top: 0.4rem !important;
        padding-bottom: 0.75rem !important;
    }
}

/* =====================================================
   CLAIM-EDIT / CLAIM-DETAILS
   ===================================================== */
@media (max-width: 991.98px) {
    .panel-claim-edit-page .claim-edit-shell {
        flex-direction: column;
    }
    .panel-claim-edit-page .claim-edit-sidecard {
        width: 100% !important;
        position: static !important;
        margin-top: 1rem;
    }
    .panel-claim-edit-page .claim-edit-sidecard iframe,
    .panel-claim-edit-page .claim-doc-frame iframe {
        height: 260px;
    }
    .panel-claim-edit-page #content_task_detail_layout > .flex-lg-row-fluid {
        margin-right: 0 !important;
    }
}

@media (max-width: 767.98px) {
    .panel-claim-edit-page .claim-edit-body .card-body {
        padding: 0.85rem 0.9rem !important;
    }
    .panel-claim-edit-page .claim-notes-card .card-title h2,
    .panel-claim-edit-page .claim-edit-body .card-title h3,
    .panel-claim-edit-page .claim-edit-body .card-title h4 {
        font-size: 0.95rem !important;
    }

    /* All claim-edit form inputs: shrink to mobile-friendly size */
    .panel-claim-edit-page .edit-claim-inputs,
    .panel-claim-edit-page .form-select-editor,
    .panel-claim-edit-page .ce-input,
    .panel-claim-edit-page .claim-select-field,
    .panel-claim-edit-page .form-control,
    .panel-claim-edit-page .form-select {
        font-size: 0.82rem !important;
        min-height: 36px !important;
        padding: 0.35rem 0.65rem !important;
        line-height: 1.4 !important;
    }
    .panel-claim-edit-page .ce-input.ce-select,
    .panel-claim-edit-page .form-select-editor {
        padding-right: 2rem !important;
    }
    .panel-claim-edit-page .ce-label,
    .panel-claim-edit-page .ce-meta-label {
        font-size: 0.62rem !important;
        margin-bottom: 0.3rem !important;
    }
    .panel-claim-edit-page .ce-meta-value {
        font-size: 0.8rem !important;
    }
    .panel-claim-edit-page .ce-field-grid {
        grid-template-columns: 1fr !important;
        gap: 0.85rem !important;
    }
    .panel-claim-edit-page .ce-meta-row {
        gap: 0.55rem 1.25rem !important;
        padding: 0.65rem 0.85rem !important;
    }
    /* Inline labels and "text-gray-600" tags inside claim-edit-body tables */
    .panel-claim-edit-page .claim-edit-body .table td {
        padding: 0.45rem 0 !important;
        font-size: 0.85rem !important;
    }
    .panel-claim-edit-page .claim-edit-body .text-gray-600 {
        font-size: 0.78rem !important;
    }

    /* Status / Notes section — readable card stack */
    .panel-claim-edit-page .claim-notes-card .card-header {
        padding: 0.6rem 0.85rem !important;
    }
    .panel-claim-edit-page .claim-notes-card .card-body {
        padding: 0.5rem 0.75rem 0.85rem !important;
    }
    .panel-claim-edit-page .claim-notes-table {
        font-size: 0.82rem !important;
    }
    .panel-claim-edit-page .claim-notes-table tbody tr {
        display: block;
        padding: 0.6rem 0.7rem !important;
        margin-bottom: 0.5rem;
        background: #f7fafd;
        border: 1px solid #e2eaf3 !important;
        border-radius: 10px;
    }
    html[data-bs-theme="dark"] .panel-claim-edit-page .claim-notes-table tbody tr {
        background: #18222f;
        border-color: #2a394e !important;
    }
    .panel-claim-edit-page .claim-notes-table tbody tr:last-child {
        margin-bottom: 0;
    }
    .panel-claim-edit-page .claim-notes-table td {
        display: block;
        text-align: left !important;
        padding: 0.2rem 0 !important;
        min-width: 0 !important;
        width: 100% !important;
        border: 0 !important;
        font-size: 0.82rem !important;
        line-height: 1.45;
    }
    .panel-claim-edit-page .claim-notes-table td.text-end,
    .panel-claim-edit-page .claim-notes-table td.pe-0.text-end {
        text-align: left !important;
        margin-top: 0.35rem;
        font-size: 0.72rem !important;
        color: #64748b;
    }
    .panel-claim-edit-page .claim-notes-table p {
        margin-bottom: 0.35rem !important;
    }
    /* Action buttons in notes wrap nicely */
    .panel-claim-edit-page .claim-notes-table .d-flex {
        flex-wrap: wrap;
        gap: 0.35rem !important;
    }
    .panel-claim-edit-page .claim-notes-table .btn {
        flex: 1 1 auto;
        font-size: 0.78rem !important;
        padding: 0.35rem 0.7rem !important;
        min-height: 32px !important;
    }
    .panel-claim-edit-page .claim-notes-table .form-label {
        font-size: 0.75rem !important;
        font-weight: 600;
    }

    .panel-claim-edit-page .claim-edit-sidecard iframe {
        height: 240px;
    }
}

@media (max-width: 575.98px) {
    .panel-claim-edit-page .claim-edit-sidecard iframe {
        height: 200px;
    }
}

/* =====================================================
   CLAIM TIMELINE — switch to vertical layout on mobile
   Original is horizontal with a line via ::before/::after.
   On mobile we stack items vertically with a left-rail line.
   ===================================================== */
@media (max-width: 767.98px) {
    .tline-card-container .card-body {
        padding: 1rem 1.1rem !important;
    }

    .tline-label {
        flex-direction: column;
        align-items: stretch;
        gap: 0.55rem;
        padding-left: 1.25rem;
        position: relative;
    }

    /* Kill the horizontal ::before/::after rails */
    .tline-label::before,
    .tline-label::after {
        all: unset;
    }

    /* Vertical rail on the left */
    .tline-label::before {
        content: '';
        position: absolute;
        left: 18px;
        top: 14px;
        bottom: 14px;
        width: 2px;
        background: #e2e8f0;
        z-index: 1;
    }

    .tline-label .tline-item {
        flex-direction: row;
        align-items: center;
        gap: 0.75rem;
        z-index: 2;
        text-align: left;
        padding: 0.1rem 0;
    }

    .tline-label .tline-item .tline-badge {
        flex: 0 0 auto;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--bs-card-bg, #fff);
        border: 2px solid #e2e8f0;
        margin-left: -1rem;
    }

    .tline-label .tline-item.completed .tline-badge {
        border-color: var(--bs-primary);
        background: var(--bs-primary);
    }

    .tline-label .tline-item.completed .tline-badge i {
        color: #fff !important;
        background: transparent !important;
    }

    .tline-label .tline-item i {
        background: transparent;
        font-size: 1rem !important;
    }

    .tline-label .tline-item > div:not(.tline-badge) {
        font-size: 0.88rem;
        line-height: 1.3;
        flex: 1 1 auto;
        min-width: 0;
        white-space: normal;
    }

    .tline-label .tline-item strong {
        font-weight: 600;
        color: var(--bs-body-color);
    }

    .tline-label .tline-item:not(.completed) > div:not(.tline-badge) {
        color: #94a3b8;
    }
}

/* =====================================================
   CLAIM CREATION WIZARD (stepper) — /claims/create
   body has .claims-stepper-page + .auth-bg
   ===================================================== */
@media (max-width: 991.98px) {
    /* Whole page can scroll (auth-bg sometimes locks it) */
    .claims-stepper-page,
    .claims-stepper-page #kt_body {
        height: auto !important;
        overflow-y: auto !important;
    }

    /* Stack aside (step rail) above the form body */
    .claims-stepper-page .stepper.stepper-multistep {
        flex-direction: column !important;
    }

    /* ── Aside: compact top bar with logo + horizontal step strip ── */
    .claims-stepper-page .stepper.stepper-multistep > .d-flex.flex-column.flex-lg-row-auto {
        width: 100% !important;
    }
    .claims-stepper-page .stepper.stepper-multistep .position-lg-fixed {
        position: static !important;
        width: 100% !important;
        height: auto !important;
    }
    /* Logo block — slim it down */
    .claims-stepper-page .stepper.stepper-multistep .d-flex.flex-center.py-10,
    .claims-stepper-page .stepper.stepper-multistep .py-10.py-lg-20 {
        padding: 0.85rem 1rem !important;
    }
    .claims-stepper-page .stepper.stepper-multistep .d-flex.flex-center.py-10 img {
        height: 34px !important;
    }

    /* Step nav: horizontal scroll strip of numbered pills */
    .claims-stepper-page .stepper-nav {
        flex-direction: row !important;
        flex-wrap: nowrap;
        align-items: flex-start;
        justify-content: flex-start !important;
        overflow-x: auto;
        gap: 0;
        padding: 0 1rem 0.85rem !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .claims-stepper-page .stepper-nav::-webkit-scrollbar {
        display: none;
    }
    /* The stepper-index wrapper div */
    .claims-stepper-page .stepper-nav,
    .claims-stepper-page .d-flex.flex-row-fluid.justify-content-center.p-10 {
        padding: 0 !important;
    }
    .claims-stepper-page .stepper-item {
        flex: 0 0 auto;
        margin: 0 !important;
        padding: 0 0.35rem !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 64px;
    }
    .claims-stepper-page .stepper-wrapper {
        flex-direction: column;
        align-items: center;
        gap: 0.25rem;
    }
    .claims-stepper-page .stepper-line {
        display: none !important;
    }
    .claims-stepper-page .stepper-icon {
        width: 38px !important;
        height: 38px !important;
        flex-shrink: 0;
    }
    .claims-stepper-page .stepper-number {
        font-size: 0.95rem !important;
    }
    /* Label: tiny caption under each icon, only for current step keep visible */
    .claims-stepper-page .stepper-label {
        display: none;
    }
    .claims-stepper-page .stepper-item.current .stepper-label {
        display: block;
        text-align: center;
        margin: 0;
    }
    .claims-stepper-page .stepper-item.current .stepper-title {
        font-size: 0.7rem !important;
        line-height: 1.2;
        font-weight: 600;
    }
    .claims-stepper-page .stepper-item .stepper-desc {
        display: none !important;
    }

    /* ── Form body ── */
    .claims-stepper-page .stepper.stepper-multistep > .d-flex.flex-column.flex-lg-row-fluid {
        display: flex !important;
        width: 100% !important;
        padding-top: 1rem !important;
        padding-bottom: 1.5rem !important;
    }
    .claims-stepper-page .w-lg-650px.w-xl-700px.p-10.p-lg-15 {
        padding: 1rem !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Action buttons bar */
    .claims-stepper-page .d-flex.flex-stack.pt-15 {
        flex-wrap: wrap;
        gap: 0.5rem;
        padding-top: 1.25rem !important;
    }
    .claims-stepper-page .d-flex.flex-stack.pt-15 > * {
        flex: 1 1 100%;
        width: 100%;
        margin: 0 !important;
    }
    .claims-stepper-page .d-flex.flex-stack.pt-15 .btn {
        width: 100%;
        margin: 0 !important;
        justify-content: center;
    }
    .claims-stepper-page .d-flex.flex-stack.pt-15 > div {
        width: 100%;
    }

    /* Step content headings & fields */
    .claims-stepper-page [data-kt-stepper-element="content"] h2.fw-bold {
        font-size: 1.15rem !important;
    }
    .claims-stepper-page [data-kt-stepper-element="content"] .pb-10,
    .claims-stepper-page [data-kt-stepper-element="content"] .pb-lg-15,
    .claims-stepper-page [data-kt-stepper-element="content"] .pb-lg-12 {
        padding-bottom: 1rem !important;
    }
    .claims-stepper-page [data-kt-stepper-element="content"] .row {
        --bs-gutter-x: 0.75rem;
    }
    .claims-stepper-page [data-kt-stepper-element="content"] .row > [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .claims-stepper-page [data-kt-stepper-element="content"] .mb-8 {
        margin-bottom: 1rem !important;
    }

    /* Dropzone */
    .claims-stepper-page .dropzone {
        padding: 1.25rem 0.9rem !important;
    }
    .claims-stepper-page .dz-message {
        flex-direction: column;
        text-align: center;
    }
    .claims-stepper-page .dz-message .ms-4 {
        margin-left: 0 !important;
        margin-top: 0.6rem;
    }
}

/* =====================================================
   CREDENTIALS (auth) pages
   Scoped with :not(.claims-stepper-page) so these rules
   never bleed into the /claims/create wizard, which also
   uses body.auth-bg.
   ===================================================== */
@media (max-width: 991.98px) {
    body.auth-bg:not(.claims-stepper-page) {
        background-size: cover !important;
        background-position: center !important;
    }
    /* Center the form, don't squeeze it */
    body.auth-bg:not(.claims-stepper-page) .d-flex.flex-column-fluid.flex-lg-row-auto {
        padding: 1.5rem 1rem !important;
    }
    body.auth-bg:not(.claims-stepper-page) .bg-body.rounded-4.w-md-600px {
        width: 100% !important;
        max-width: 100% !important;
        padding: 1.5rem 1.25rem !important;
        border-radius: 14px !important;
    }
    body.auth-bg:not(.claims-stepper-page) .w-md-400px {
        width: 100% !important;
        max-width: 100% !important;
    }
    /* The right-side "aside" illustration — hide on phones, show smaller on tablet */
    body.auth-bg:not(.claims-stepper-page) .d-flex.flex-lg-row-fluid {
        display: none !important;
    }
    /* Footer language + legal links on small screens — stack neatly */
    body.auth-bg:not(.claims-stepper-page) .d-flex.flex-stack {
        flex-wrap: wrap;
        gap: 0.75rem;
        justify-content: center !important;
    }
    body.auth-bg:not(.claims-stepper-page) .d-flex.flex-stack > .me-10 {
        margin-right: 0 !important;
    }
    body.auth-bg:not(.claims-stepper-page) .d-flex.flex-stack .d-flex.gap-5 {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.75rem !important;
    }
}

@media (min-width: 992px) {
    body.auth-bg:not(.claims-stepper-page) .d-flex.flex-lg-row-fluid {
        display: flex;
    }
}

/* =====================================================
   SUBSCRIPTION (plan-picker) — override no-scroll lock
   The base file pins html/body to 100% no-scroll, breaks
   phones. Re-enable scrolling and make plans stack.
   ===================================================== */
@media (max-width: 991.98px) {
    .sub-page,
    body.auth-bg .sub-page {
        height: auto !important;
        overflow: visible !important;
        padding: 1rem 0 2rem !important;
    }
    .sub-plans {
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    .sub-plan {
        width: 100% !important;
        max-width: 100% !important;
    }
    .sub-title {
        font-size: 1.5rem !important;
    }
    .sub-desc {
        font-size: 0.9rem !important;
    }
    .sub-hero {
        padding: 0 0.5rem;
    }
}

/* =====================================================
   ADMIN PANEL
   ===================================================== */
@media (max-width: 1199.98px) {
    .admin-users-page .col-xl-4 {
        margin-bottom: 1rem;
    }
    .admin-users-page .users-scroll-panel {
        max-height: 380px;
        min-height: 0;
    }
}

@media (max-width: 767.98px) {
    .admin-page-title {
        font-size: 22px !important;
    }
    .admin-page-subtitle {
        font-size: 13px;
    }
    .admin-page-header {
        flex-direction: column;
        align-items: stretch;
        margin-bottom: 1rem;
    }

    /* Users page: search row stacks */
    .admin-users-page .users-directory-header .d-flex.flex-stack.w-100 {
        flex-direction: column;
        align-items: stretch;
        gap: 0.6rem;
    }
    .admin-users-page .users-search-wrap {
        width: 100%;
    }
    .admin-users-page .users-directory-header .d-flex.align-items-center.gap-2 {
        width: 100%;
        justify-content: space-between;
    }
    .admin-users-page .users-directory-header .btn.btn-sm.btn-primary {
        flex: 1;
    }
    .admin-users-page .users-type-tabs {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .admin-users-page .users-type-tabs .btn-user-tab {
        margin-right: 0 !important;
        padding-left: 1.1rem !important;
        padding-right: 1.1rem !important;
    }
    .admin-users-page .role-options {
        grid-template-columns: 1fr !important;
    }

    /* Logs filter bar: stack everything */
    #log-filter-form {
        flex-direction: column;
        align-items: stretch !important;
    }
    #log-filter-form .log-filter-field {
        width: 100% !important;
        flex: 1 1 100% !important;
    }
    .log-filter-field input,
    .log-filter-field select,
    .log-search-input,
    .log-date-input {
        width: 100% !important;
    }
}

/* =====================================================
   USER-VIEW MODAL (admin) — stack grids on mobile
   ===================================================== */
@media (max-width: 767.98px) {
    .uvm-grid {
        grid-template-columns: 1fr !important;
    }
    .uvm-sub-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .uvm-card {
        padding: 0.95rem !important;
    }
    .uvm-header {
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.85rem 1rem !important;
    }
    .uvm-header > .d-flex.align-items-center.gap-2 {
        flex-wrap: wrap;
        width: 100%;
        justify-content: flex-start !important;
    }
    .uvm-btn-xml,
    .uvm-btn-footprint {
        flex: 1 1 auto;
        font-size: 0.72rem !important;
        padding: 0.35rem 0.55rem !important;
    }
    .uvm-info-label {
        width: auto !important;
        flex: 1 1 auto;
    }
    .uvm-info-value {
        text-align: left !important;
        max-width: 100% !important;
        font-size: 0.85rem !important;
    }
    .uvm-banner {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.75rem !important;
        text-align: left;
    }
    .uvm-avatar-img,
    .uvm-avatar-initials {
        width: 56px !important;
        height: 56px !important;
        font-size: 1.2rem !important;
    }
    .uvm-actions {
        flex-direction: column;
    }
    .uvm-action-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .uvm-sub-grid {
        grid-template-columns: 1fr !important;
    }
}

/* =====================================================
   TIMELINE / LOGS
   ===================================================== */
@media (max-width: 575.98px) {
    .timeline .timeline-item {
        padding: 0.5rem !important;
    }
    .timeline-content .fs-5 {
        font-size: 14px !important;
    }
    .timeline-icon i {
        font-size: 1.2rem !important;
    }
    .log-area {
        margin: 0 0.5rem 0.75rem !important;
    }
}

/* =====================================================
   TOASTS — position-friendly on phones
   ===================================================== */
@media (max-width: 575.98px) {
    #toast-message.toast-container {
        top: auto !important;
        bottom: 12px !important;
        right: 12px !important;
        left: 12px !important;
        padding: 0 !important;
    }
    #toast-message .toast {
        width: 100%;
        max-width: 100%;
    }
}

/* =====================================================
   SCROLLTOP button: smaller, out of the way
   ===================================================== */
@media (max-width: 575.98px) {
    #kt_scrolltop {
        right: 12px !important;
        bottom: 12px !important;
        width: 36px;
        height: 36px;
    }
}

/* =====================================================
   FORMS — common helpers
   ===================================================== */
@media (max-width: 767.98px) {
    /* Bootstrap rows with .g-* keep horizontal scroll off */
    .row.g-xl-10,
    .row.gy-5 {
        --bs-gutter-x: 1rem;
    }
    /* "Save / Cancel" action rows */
    .ce-update-actions,
    .add-user-actions {
        flex-direction: column-reverse;
        align-items: stretch !important;
    }
    .ce-update-actions .btn,
    .add-user-actions .btn {
        width: 100%;
    }
    /* Inputs in modals */
    .modal-body .row > [class*="col-"] {
        margin-bottom: 0.5rem;
    }
}

/* =====================================================
   STAGGER PANEL HEADER PADDING — global mobile fix
   ===================================================== */
@media (max-width: 575.98px) {
    .pt-7, .pt-6 {
        padding-top: 1rem !important;
    }
    .pb-10, .pb-lg-20 {
        padding-bottom: 1.25rem !important;
    }
    .py-10 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
    .mt-10, .my-10 {
        margin-top: 1rem !important;
    }
}

/* =====================================================
   SELECT2 dropdown — keep selection above keyboard
   ===================================================== */
@media (max-width: 575.98px) {
    .select2-container--bootstrap5 .select2-selection {
        min-height: 42px !important;
    }
}

/* =====================================================
   FIXED-WIDTH BREAKERS — common w-NNNpx classes blow out
   small viewports. Cap them to viewport width.
   ===================================================== */
@media (max-width: 767.98px) {
    .w-600px, .w-500px, .w-450px, .w-400px, .w-350px, .w-300px, .w-275px,
    .mw-600px, .mw-500px, .mw-400px, .mw-300px {
        max-width: 100% !important;
    }
    .w-250px, .w-200px {
        max-width: 100% !important;
    }
    /* Claim-stock upload zone */
    .claim-stock-form-holder {
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;
    }
    /* Settings form: stack the right-side columns full width */
    form.form .row.mb-6 > .col-lg-4,
    form.form .row.mb-6 > .col-lg-8 {
        padding-bottom: 0.25rem;
    }
    form.form .col-form-label {
        padding-bottom: 0.25rem;
    }
}

/* =====================================================
   USERVIEW header (in admin user-claims & panel/userview)
   ===================================================== */
@media (max-width: 767.98px) {
    /* user-claims top row: title + search + action menu */
    .users-claims-col .card-header .d-flex.flex-stack.w-100,
    #kt_app_content .card-header .d-flex.flex-stack.w-100 {
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.6rem;
    }
    .users-claims-col .card-header .d-flex.flex-row.align-items-center.gap-3,
    .card-header .d-flex.flex-row.align-items-center.gap-3 {
        flex-wrap: wrap;
        width: 100%;
    }
    .users-claims-col .card-header .position-relative,
    .card-header .d-flex.align-items-center.position-relative.my-1 {
        flex: 1 1 100%;
    }
    .users-claims-col .card-header input.form-control,
    .card-header input.form-control {
        width: 100% !important;
    }
}

/* =====================================================
   USER PANEL EXTRA: claim-stock & userview & two-col rows
   ===================================================== */
@media (max-width: 991.98px) {
    .panel-premium-data-pages .col-xxl-8,
    .panel-premium-data-pages .col-xxl-4 {
        width: 100%;
    }
    .panel-premium-data-pages .card-xxl-stretch {
        height: auto !important;
    }
}

/* =====================================================
   TERMS & CONDITIONS modal — long content
   ===================================================== */
@media (max-width: 767.98px) {
    #accept_terms_conditions .modal-dialog,
    #terms_conditions .modal-dialog {
        margin: 0;
        max-width: 100%;
        min-height: 100vh;
    }
    #accept_terms_conditions .modal-body,
    #terms_conditions .modal-body {
        max-height: calc(100vh - 130px);
        overflow-y: auto;
        font-size: 13px;
    }
}

/* =====================================================
   ADMIN: log-activities — make compact rows readable
   ===================================================== */
@media (max-width: 767.98px) {
    .log-row__summary {
        flex-wrap: wrap;
        gap: 0.45rem 0.6rem !important;
        padding: 0.6rem 0.7rem !important;
    }
    .log-row__message {
        white-space: normal !important;
        flex: 1 1 100%;
        order: 3;
        font-size: 0.85rem !important;
    }
    .log-icon {
        order: 1;
    }
    .log-badge {
        order: 2;
        font-size: 0.62rem !important;
    }
    .log-row__time {
        order: 4;
        margin-left: auto;
    }
    .log-row__chevron {
        order: 5;
    }

    .log-detail {
        padding: 0.6rem 0.75rem !important;
    }
    .log-detail__row {
        flex-direction: column;
        gap: 0.25rem !important;
    }
    .log-detail__key {
        width: auto !important;
        font-size: 0.62rem !important;
    }
    .log-detail__change {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.25rem !important;
    }
    .log-detail__change-before,
    .log-detail__change-after {
        max-width: 100% !important;
        white-space: normal !important;
    }
    .log-detail__change-field {
        min-width: 0;
    }
    /* Date separator stays compact */
    .log-date-sep__label {
        font-size: 0.65rem;
    }
}

@media (max-width: 575.98px) {
    /* Tighten log row left padding to align with icon size */
    .log-detail {
        padding-left: 0.75rem !important;
    }
}

/* =====================================================
   STAFF / claim-edit notes table — already handled above
   but kt_table_customers_logs needs the same treatment
   ===================================================== */
@media (max-width: 575.98px) {
    #kt_table_customers_logs tbody tr {
        display: block;
        padding: 0.5rem 0;
        border-bottom: 1px dashed var(--bs-border-color, #e5ebf1);
    }
    #kt_table_customers_logs td {
        display: block;
        text-align: left !important;
        padding: 0.25rem 0 !important;
        min-width: 0 !important;
        width: 100% !important;
    }
}

.btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =====================================================
   LONG-LANGUAGE (German/Spanish) DESKTOP ACCOMMODATIONS
   Labels in DE are often ~50% longer than EN. Make
   timeline and toolbar elements gracefully handle it.
   ===================================================== */
@media (min-width: 768px) {
    /* Claim timeline — equal-width items with wrapping labels */
    .tline-card-container .card-body {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .tline-label {
        gap: 4px;
        align-items: flex-start;
    }
    .tline-label .tline-item {
        flex: 1 1 0;
        min-width: 0;
        max-width: 140px;
        padding: 0 2px;
        text-align: center;
        align-self: stretch;
    }
    .tline-label .tline-item .tline-badge {
        flex: 0 0 auto;
    }
    .tline-label .tline-item > div:not(.tline-badge) {
        width: 100%;
        font-size: 0.78rem;
        line-height: 1.2;
        margin-top: 0.35rem;
    }
    .tline-label .tline-item strong,
    .tline-label .tline-item > div span,
    .tline-label .tline-item > div:not(.tline-badge) {
        display: inline-block;
        max-width: 100%;
        white-space: normal !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }
    /* Header / toolbar buttons — allow wrap when text is long */
    .panel-premium-table-card .card-toolbar .btn,
    .admin-users-page .users-directory-header .btn:not(.btn-icon),
    .admin-users-page .users-claims-col .card-header .btn:not(.btn-icon),
    .card-header .card-toolbar .btn:not(.btn-icon),
    .panel-premium-toolbar .btn:not(.btn-icon),
    .admin-page-header .btn:not(.btn-icon) {
        white-space: normal;
        text-align: center;
        line-height: 1.2;
        min-width: 0;
        word-break: break-word;
        hyphens: auto;
    }

    /* Admin users header: let buttons shrink + wrap instead of overflowing */
    .admin-users-page .users-directory-header .d-flex.flex-stack.w-100 {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .admin-users-page .users-directory-header .users-search-wrap {
        flex: 1 1 220px;
        min-width: 0;
    }
    .admin-users-page .users-directory-header .d-flex.align-items-center.gap-2 {
        flex-shrink: 0;
    }

    /* Up-section nav tabs: prevent overflow when labels long */
    .upsection-card .nav.nav-line-tabs {
        flex-wrap: wrap;
        row-gap: 0.4rem;
    }
    .upsection-card .nav.nav-line-tabs .nav-link {
        white-space: normal;
        text-align: center;
        line-height: 1.2;
    }
}

/* Tighter still on narrow desktop / tablet widths (768-1199) */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .tline-label .tline-item {
        max-width: 110px;
    }
    .tline-label .tline-item > div:not(.tline-badge) {
        font-size: 0.72rem;
    }
}