/* 
  body {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--pg-bg);
    color: var(--pg-text);
    font-size: 14px;
    min-height: 100vh;
    padding: 20px;
  }
 */
/* ── Page title ── */
.pgr-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--pg-text);
    margin-bottom: 16px;
}

/* ── Top header row ── */
.hdr-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
    align-items: stretch;
}

/* Welcome tile */
.wlc-tile {
    background: linear-gradient(135deg, #FFFFFF 0%, #FCF5FF 100%);
    border: 1.5px solid #FBCFE8; /* Soft pink border matching Figma */
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}

.wlc-avatar-img {
    width: 68px;
    height: 68px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.wlc-text-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.wlc-name {
    font-size: 19px;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 6px;
}

.wlc-greeting {
    color: #4C1D95; /* Deep Purple */
}

.wlc-user-name {
    color: #16A34A; /* Solid Green */
}

.wlc-sub {
    font-size: 12px;
    font-weight: 500;
    color: #475569;
}

/* Dealer info tile */
.dlr-tile {
    background: linear-gradient(135deg, #FFFFFF 0%, #FCF5FF 100%);
    border: 1.5px solid #FBCFE8;
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    min-width: 160px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}

.dlr-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dlr-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

    .dlr-icon svg {
        width: 38px;
        height: 38px;
    }

.dlr-caption {
    font-size: 11px;
    font-weight: 500;
    color: #64748B;
    margin-bottom: 2px;
}

.dlr-val {
    font-size: 14px;
    font-weight: 600;
    color: #1E293B;
}

/* Profile completion tile */
.prf-tile {
    background: linear-gradient(135deg, #FFFFFF 0%, #FCF5FF 100%);
    border: 1.5px solid #FBCFE8;
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    min-width: 175px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}

.prf-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}

.prf-label {
    font-size: 12px;
    font-weight: 600;
    color: #7C3AED;
}

.prf-pct {
    font-size: 14px;
    font-weight: 700;
    color: #475569;
}

.prf-bar-track {
    width: 100%;
    height: 8px;
    background: #E2E8F0;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 4px;
}

.prf-bar-fill {
    height: 100%;
    width: 80%;
    background: #7C3AED;
    border-radius: 999px;
}

.prf-cta-btn {
    width: 100%;
    padding: 10px 0;
    background-color: #2D72D9;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

    .prf-cta-btn:hover {
        background-color: #235BB3;
    }

/* ── Quick Actions ── */
.wht-panel-qa {
    background-color: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}

.qa-panel-ttl {
    font-size: 16px;
    font-weight: 700;
    color: #334155;
    margin-bottom: 20px;
}

.qact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.qact-cell {
    background-color: #FFFFFF;
    border-radius: 8px;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border: 1px solid #E2E8F0; /* Default border */
    transition: box-shadow 0.2s, transform 0.2s;
}

    .qact-cell:hover {
        box-shadow: 0 4px 12px rgba(0,0,0,0.04);
        transform: translateY(-2px);
    }

    /* Specific Colored Borders matching Figma */
    .qact-cell.theme-yellow {
        border-color: #FEF08A;
    }

    .qact-cell.theme-cyan {
        border-color: #A5F3FC;
    }

    .qact-cell.theme-pink {
        border-color: #FBCFE8;
    }

    .qact-cell.theme-purple {
        border-color: #E9D5FF;
    }

    .qact-cell.theme-red {
        border-color: #FECACA;
    }

    .qact-cell.theme-green {
        border-color: #BBF7D0;
    }

        /* ProprietorDetails.css declares an unscoped `.theme-green` for the
           Proprietor cards which adds two decorative watermark pseudo-elements
           (a pale radial blob and a briefcase glyph). Both stylesheets are
           loaded globally, so that watermark painted itself over this card and
           washed out the right-hand half of its "View Now" button. */
        .qact-cell.theme-green::before,
        .qact-cell.theme-green::after {
            content: none;
        }

.qact-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

    .qact-icon-wrap svg {
        /* The SVGs already have width="56" height="56" and their own backgrounds */
        display: block;
    }

.qact-lbl {
    font-size: 14px;
    font-weight: 700;
    color: #1E293B;
    margin-bottom: 6px;
}

.qact-hint {
    font-size: 12px;
    color: #64748B;
    line-height: 1.4;
    margin-bottom: 20px;
    flex-grow: 1; /* Pushes the button perfectly to the bottom */
}

.qact-go-btn {
    width: 100%;
    padding: 10px 0;
    background-color: #2D72D9;
    color: #FFFFFF;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s;
}

    .qact-go-btn:hover {
        background-color: #235BB3;
    }
/* ── Application Status Overview ── */
.wht-panel-sts {
    background-color: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}

.sts-panel-ttl {
    font-size: 16px;
    font-weight: 700;
    color: #334155;
    margin-bottom: 20px;
}

.sts-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.sts-chip {
    border-radius: 8px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid transparent;
}

    /* Specific Card Themes matching Figma */
    .sts-chip.yell {
        background: linear-gradient(90deg, #FFFEF2 0%, #FEF9C3 100%);
        border-color: #FEF08A;
    }

    .sts-chip.grn {
        background: linear-gradient(90deg, #F4FDF6 0%, #DCFCE7 100%);
        border-color: #BBF7D0;
    }

    .sts-chip.scarl {
        background: linear-gradient(90deg, #FFF5F5 0%, #FEE2E2 100%);
        border-color: #FECACA;
    }

    .sts-chip.indg { /* Processing (Orange Theme) */
        background: linear-gradient(90deg, #FFF7ED 0%, #FFEDD5 100%);
        border-color: #FED7AA;
    }

.sts-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sts-lbl {
    font-size: 13px;
    font-weight: 600;
    color: #64748B;
}

.sts-num {
    font-size: 26px;
    font-weight: 700;
    color: #1E293B;
    line-height: 1;
}

.sts-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    /* This adds the soft shadow to the white box inside your SVGs */
    filter: drop-shadow(0px 2px 6px rgba(0,0,0,0.06));
}

    .sts-ico svg {
        width: 48px;
        height: 48px;
        display: block;
    }

@media (max-width: 1024px) {
    .sts-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── Two Column Layout ── */
.split-row {
    display: grid;
    grid-template-columns: 1.2fr 1fr; /* Left column slightly wider */
    gap: 24px;
    margin-bottom: 24px;
}

.rht-stack {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ── Panel Shared Styles ── */
.wht-panel-split {
    background-color: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}

.panel-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.wht-panel-ttl {
    font-size: 16px;
    font-weight: 700;
    color: #334155;
    margin: 0;
}

.dark-view-btn {
    background-color: #1E293B;
    color: #FFFFFF;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}

    .dark-view-btn:hover {
        background-color: #0F172A;
    }

/* ── Recent Applications Cards ── */
.appl-card {
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 16px;
}

    .appl-card:last-of-type {
        margin-bottom: 0;
    }

.appl-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.appl-name {
    font-size: 14px;
    font-weight: 700;
    color: #1E293B;
    margin-bottom: 8px;
}

.appl-ref {
    font-size: 12px;
    color: #64748B;
    line-height: 1.6;
}

.appl-tag {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    white-space: nowrap;
}

    .appl-tag.orange {
        background-color: #FFF7ED;
        color: #EA580C;
    }

    .appl-tag.green {
        background-color: #DCFCE7;
        color: #16A34A;
    }

    .appl-tag.red {
        background-color: #FEE2E2;
        color: #DC2626;
    }

    .appl-tag.gray {
        background-color: #F3F4F6;
        color: #6B7280;
    }

.appl-empty {
    padding: 24px 10px;
    text-align: center;
    font-size: 13px;
    color: #8E8E8E;
}

/* Trail / Stepper */
.appl-trail-wrapper {
    position: relative;
    margin: 0 10px 24px 10px;
}

.trail-bg-line {
    position: absolute;
    top: 16px;
    left: 16px;
    right: 16px;
    height: 2px;
    background-color: #E2E8F0;
    z-index: 1;
}

.appl-trail {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 2;
}

.trail-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: #FFFFFF; /* Masks the line behind it */
    padding: 0 4px;
}

.trail-node {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .trail-node.done {
        background-color: #16A34A;
        color: #FFFFFF;
    }

    .trail-node.active {
        background-color: #F97316;
        color: #FFFFFF;
    }

    .trail-node.idle {
        background-color: #CBD5E1;
    }

    .trail-node svg {
        width: 16px;
        height: 16px;
        stroke-width: 2.5;
    }

.trail-step-lbl {
    font-size: 11px;
    font-weight: 500;
    color: #64748B;
    white-space: nowrap;
}

.appl-detail-btn {
    width: 100%;
    padding: 10px 0;
    background-color: #2D72D9;
    color: #FFFFFF;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s;
}

    .appl-detail-btn:hover {
        background-color: #235BB3;
    }

/* ── Guest House Booking ── */
.ghb-card {
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: 20px;
}

.ghb-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 6px;
}

.ghb-title {
    font-size: 13px;
    font-weight: 700;
    color: #1E293B;
}

.ghb-tag {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    background-color: #DCFCE7;
    color: #16A34A;
    border-radius: 6px;
}

.ghb-ref {
    font-size: 12px;
    color: #64748B;
    margin-bottom: 20px;
}

.ghb-grid {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 12px 16px;
    margin-bottom: 24px;
    font-size: 12px;
}

.ghb-lbl {
    color: #64748B;
}

.ghb-val {
    color: #1E293B;
    font-weight: 500;
}

.ghb-btn-row {
    display: flex;
    gap: 12px;
}

.ghb-outline-btn {
    flex: 1;
    /* Horizontal padding matters when the button is used on its own
       (e.g. inside an EmptyState) instead of stretched by .ghb-btn-row -
       without it the label sat flush against both button edges. */
    padding: 10px 18px;
    border: 1px solid #CBD5E1;
    background-color: #FFFFFF;
    color: #475569;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color 0.15s;
}

    .ghb-outline-btn:hover {
        background-color: #F8FAFC;
        color: #1E293B;
    }

    .ghb-outline-btn svg {
        width: 16px;
        height: 16px;
    }

.ghb-fill-btn {
    flex: 1;
    /* See .ghb-outline-btn - needed for the standalone EmptyState usage. */
    padding: 10px 18px;
    background-color: #2D72D9;
    color: #FFFFFF;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s;
}

    .ghb-fill-btn:hover {
        background-color: #235BB3;
    }

/* ── Notifications ── */
.ntf-list {
    display: flex;
    flex-direction: column;
}

.ntf-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 0;
    border-bottom: 1px solid #F1F5F9;
}

    .ntf-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

.ntf-icon {
    color: #4F46E5; /* Indigo */
    margin-top: 2px;
}

    .ntf-icon svg {
        width: 18px;
        height: 18px;
        stroke-width: 2;
    }

.ntf-content {
    flex: 1;
}

.ntf-txt {
    font-size: 13px;
    font-weight: 700;
    color: #1E293B;
    margin-bottom: 4px;
    line-height: 1.4;
}

.ntf-time {
    font-size: 12px;
    color: #64748B;
}

.ntf-dot {
    width: 8px;
    height: 8px;
    background-color: #4F46E5;
    border-radius: 50%;
    margin-top: 8px;
    flex-shrink: 0;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .split-row {
        grid-template-columns: 1fr;
    }
}

/* ── Recent Activity Timeline ── */
.actvt-list {
    display: flex;
    flex-direction: column;
    margin-top: 16px;
}

.actvt-item {
    position: relative;
    padding-left: 20px; /* Space for the dot */
    padding-bottom: 20px;
}

    /* The vertical line */
    .actvt-item::before {
        content: '';
        position: absolute;
        left: 3px;
        top: 6px;
        bottom: -6px;
        width: 2px;
        background-color: #E2E8F0;
    }

    /* Remove line from the very last item */
    .actvt-item:last-child::before {
        display: none;
    }

/* The dot */
.actvt-dot {
    position: absolute;
    left: 0;
    top: 5px;
    width: 8px;
    height: 8px;
    background-color: #2D72D9;
    border-radius: 50%;
    z-index: 1;
}

.actvt-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.actvt-txt {
    font-size: 13px;
    font-weight: 700;
    color: #1E293B;
    line-height: 1.2;
}

.actvt-when {
    font-size: 12px;
    color: #64748B;
}

/* ── Eligibility Modal ── */
.elig-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(2px);
}

.elig-modal {
    background: #FFFFFF;
    border-radius: 16px;
    width: 90%;
    max-width: 520px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.elig-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px 16px;
    border-bottom: 1px solid #F1F5F9;
}

.elig-header-icon {
    flex-shrink: 0;
}

.elig-title {
    flex: 1;
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #1E293B;
}

.elig-close-btn {
    background: none;
    border: none;
    color: #94A3B8;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}

    .elig-close-btn:hover {
        background: #F1F5F9;
        color: #475569;
    }

.elig-body {
    padding: 20px 24px;
    overflow-y: auto;
    flex: 1;
}

.elig-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
}

.elig-info-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.elig-info-label {
    font-size: 11px;
    font-weight: 600;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.elig-info-value {
    font-size: 14px;
    font-weight: 600;
    color: #1E293B;
}

.elig-success-msg {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #F0FDF4;
    border: 1px solid #BBF7D0;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 13px;
    font-weight: 600;
    color: #166534;
}

.elig-fail-msg {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 13px;
    font-weight: 600;
    color: #991B1B;
}

.elig-error-box {
    padding: 20px 24px;
    font-size: 14px;
    color: #991B1B;
    background: #FEF2F2;
    margin: 16px 24px;
    border-radius: 8px;
    border: 1px solid #FECACA;
}

.elig-criteria-section {
    margin-bottom: 0;
}

.elig-criteria-header {
    font-size: 13px;
    font-weight: 700;
    color: #475569;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.elig-criterion {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 8px;
    margin-bottom: 8px;
    border: 1px solid #E2E8F0;
}

    .elig-criterion.satisfied {
        background: #F0FDF4;
        border-color: #BBF7D0;
    }

    .elig-criterion.failed {
        background: #FEF2F2;
        border-color: #FECACA;
    }

.elig-criterion-icon {
    flex-shrink: 0;
    margin-top: 2px;
}

.elig-criterion-body {
    flex: 1;
    min-width: 0;
}

.elig-criterion-name {
    font-size: 13px;
    font-weight: 700;
    color: #1E293B;
    margin-bottom: 4px;
}

.elig-criterion-detail {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.elig-criterion-req {
    font-size: 12px;
    color: #64748B;
}

.elig-criterion-actual {
    font-size: 12px;
    font-weight: 600;
    color: #94A3B8;
}

.elig-footer {
    display: flex;
    gap: 12px;
    padding: 16px 24px 20px;
    border-top: 1px solid #F1F5F9;
}

.elig-btn {
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
    border: none;
}

.elig-btn-close {
    background: #F1F5F9;
    color: #475569;
}

    .elig-btn-close:hover {
        background: #E2E8F0;
    }

    .elig-btn-close.full {
        flex: 1;
    }

.elig-btn-proceed {
    flex: 1;
    background: #16A34A;
    color: #FFFFFF;
}

    .elig-btn-proceed:hover {
        background: #15803D;
    }

.qact-go-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* ── SDWA Dashboard tablet/mobile additions ── */
@media (max-width: 900px) {
    .hdr-row {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .qact-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* native: phone */
@media (max-width: 1199.98px) {
    .hdr-row {
        grid-template-columns: 1fr 1fr;
    }

    .wlc-tile {
        grid-column: 1 / -1;
    }

    .qact-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .sts-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .split-row {
        grid-template-columns: 1fr;
    }
}

/* ── Phone (≤767.98px) ──
   This block is the single source of truth for phone widths. The smaller
   600/640px queries that used to sit above it were removed because every
   property they set is re-declared here, so they could only fight the
   phone layout. Column counts are chosen by whether the content actually
   fits: header 1 + 2-up, quick actions 2-up, status 2-up, card lists 1-up. */
@media (max-width: 767.98px) {

    /* ── Header: full-width welcome banner + 2-up dealer/profile tiles ── */
    .hdr-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-bottom: 14px;
    }

    .wlc-tile {
        grid-column: 1 / -1;
        padding: 14px;
        gap: 12px;
    }

    .wlc-avatar-img {
        width: 48px;
        height: 48px;
        border-radius: 10px;
    }

    .wlc-text-content {
        min-width: 0;
    }

    /* Dealer names are free text and can be long; break rather than push
       the tile wider than the screen. */
    .wlc-name {
        font-size: 15px;
        line-height: 1.3;
        margin-bottom: 4px;
        overflow-wrap: anywhere;
    }

    .wlc-sub {
        font-size: 11.5px;
        line-height: 1.45;
    }

    /* min-width:0 is required here. These tiles carry 160px/175px
       min-widths, which in a 2-up row at 360px would total 347px of
       content and push the whole page into horizontal scroll. */
    .dlr-tile,
    .prf-tile {
        min-width: 0;
        padding: 12px;
        gap: 10px;
    }

    .dlr-tile {
        flex-direction: column;
        justify-content: space-between;
    }

    .dlr-row {
        gap: 8px;
        min-width: 0;
    }

    .dlr-icon svg {
        width: 28px;
        height: 28px;
    }

    .dlr-caption {
        font-size: 10px;
        margin-bottom: 1px;
    }

    .dlr-val {
        font-size: 12px;
        line-height: 1.3;
        overflow-wrap: anywhere;
    }

    .prf-top-row {
        gap: 6px;
        margin-bottom: 0;
    }

    .prf-label {
        font-size: 10.5px;
    }

    .prf-pct {
        font-size: 13px;
    }

    .prf-bar-track {
        height: 6px;
        margin-bottom: 0;
    }

    .prf-cta-btn {
        padding: 8px 4px;
        font-size: 12px;
        border-radius: 8px;
    }

    /* ── Section shells: one consistent mobile padding ── */
    .wht-panel-qa,
    .wht-panel-sts,
    .wht-panel-split {
        padding: 14px;
        margin-bottom: 14px;
    }

    .qa-panel-ttl,
    .sts-panel-ttl {
        font-size: 14px;
        margin-bottom: 12px;
    }

    /* Font size only: this heading sits inside .panel-header-row (a centred
       flex row) and carries its own margin in the markup. */
    .wht-panel-ttl {
        font-size: 14px;
    }

    .panel-header-row {
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 12px;
    }

    /* ── Quick actions: compact 2-up tiles ── */
    .qact-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .qact-cell {
        min-width: 0;
        padding: 12px 10px 10px;
        border-radius: 10px;
    }

    /* The hover lift is a pointer affordance and reads as jitter on touch. */
    .qact-cell:hover {
        transform: none;
    }

    .qact-icon-wrap {
        margin-bottom: 8px;
    }

    .qact-icon-wrap svg {
        width: 38px;
        height: 38px;
    }

    .qact-lbl {
        font-size: 13px;
        line-height: 1.25;
        margin-bottom: 10px;
    }

    /* The desktop helper sentence needs 3-4 lines inside a ~120px column,
       which stretched every tile to ~220px tall. The label already carries
       the meaning on a phone, so the hint is dropped at this breakpoint
       only; it is untouched on tablet and desktop. */
    .qact-hint {
        display: none;
    }

    .qact-go-btn {
        margin-top: auto; /* pins buttons to a common baseline in equal-height tiles */
        padding: 8px 4px;
        font-size: 12.5px;
        border-radius: 8px;
    }

    /* ── Status: 2-up, number-led, fixed compact height ── */
    .sts-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .sts-chip {
        min-width: 0;
        min-height: 72px;
        padding: 12px 10px;
        gap: 8px;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        border-radius: 10px;
    }

    .sts-content {
        gap: 2px;
        min-width: 0;
    }

    .sts-lbl {
        font-size: 10.5px;
        line-height: 1.25;
    }

    .sts-num {
        font-size: 24px;
    }

    .sts-ico svg {
        width: 32px;
        height: 32px;
    }

    /* ── Single-column body ── */
    .split-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
        margin-bottom: 14px;
    }

    .rht-stack {
        gap: 14px;
    }

    /* ── Recent application cards ── */
    .appl-card {
        padding: 14px;
        margin-bottom: 12px;
        border-radius: 10px;
    }

    /* Let the status tag drop below a long scheme name instead of
       squeezing the name into a narrow column. */
    .appl-top {
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 14px;
    }

    .appl-name {
        font-size: 13.5px;
        margin-bottom: 4px;
        overflow-wrap: anywhere;
    }

    .appl-ref {
        font-size: 11.5px;
    }

    .appl-detail-btn {
        border-radius: 8px;
    }

    /* ── Stepper: 5 steps with labels like "SDWA Approved" cannot fit any
       phone width, so the horizontal scroll is kept. Nodes and labels are
       trimmed and snap points added so it scrolls the least amount
       possible and lands cleanly on each step. The scroll is contained by
       the wrapper, so the page itself never scrolls sideways. ── */
    .appl-trail-wrapper {
        margin: 0 0 14px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }

    .appl-trail {
        min-width: 330px;
    }

    .trail-step {
        gap: 6px;
        padding: 0 2px;
        scroll-snap-align: center;
    }

    .trail-node {
        width: 26px;
        height: 26px;
    }

    .trail-bg-line {
        top: 13px;
        left: 13px;
        right: 13px;
    }

    .trail-step-lbl {
        font-size: 10px;
    }

    /* ── Guest house ──
       Scoped deliberately: `.ghb-card` is also declared in
       GuestHouseBooking.css, which is linked after this file, so a bare
       override here would leak into the Book Room page. */
    .wht-panel-split .ghb-card {
        padding: 14px;
        border-radius: 10px;
    }

    .ghb-head {
        margin-bottom: 4px;
    }

    .ghb-title {
        overflow-wrap: anywhere;
    }

    .ghb-ref {
        margin-bottom: 14px;
    }

    .ghb-grid {
        grid-template-columns: 84px minmax(0, 1fr);
        gap: 10px 12px;
        margin-bottom: 16px;
    }

    .ghb-val {
        overflow-wrap: anywhere;
    }

    .ghb-btn-row {
        flex-direction: column;
        gap: 10px;
    }

    .ghb-outline-btn,
    .ghb-fill-btn {
        width: 100%;
        min-height: 44px;
    }

    /* ── Notifications and activity lists ── */
    .ntf-item {
        gap: 10px;
        padding: 12px 0;
    }

    .ntf-content {
        min-width: 0;
    }

    .ntf-txt {
        font-size: 12.5px;
        margin-bottom: 2px;
        overflow-wrap: anywhere;
    }

    .ntf-time {
        font-size: 11.5px;
    }

    .actvt-list {
        margin-top: 12px;
    }

    .actvt-item {
        padding-bottom: 16px;
    }

    .actvt-txt {
        font-size: 12.5px;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

    .actvt-when {
        font-size: 11.5px;
    }

    /* 44px touch targets */
    .qact-go-btn,
    .prf-cta-btn,
    .appl-detail-btn,
    .ghb-outline-btn,
    .ghb-fill-btn,
    .dark-view-btn,
    .elig-btn {
        min-height: 44px;
    }

    .dark-view-btn {
        padding: 8px 14px;
        flex-shrink: 0;
    }

    /* ── Eligibility: native bottom sheet ── */
    .elig-overlay {
        align-items: flex-end;
    }

    .elig-modal {
        width: 100%;
        max-width: none;
        /* 92dvh tracks the dynamic viewport, so the sheet keeps its
           proportions when Android collapses/resizes the browser bars. */
        max-height: 92vh;
        max-height: 92dvh;
        padding-top: env(safe-area-inset-top, 0px);
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -8px 40px rgba(15, 23, 42, 0.28);
    }

    /* Grab handle, drawn here so the markup stays untouched. */
    .elig-modal::before {
        content: '';
        flex-shrink: 0;
        width: 36px;
        height: 4px;
        margin: 8px auto 0;
        border-radius: 999px;
        background-color: #CBD5E1;
    }

    .elig-header {
        padding: 12px 16px;
        gap: 10px;
    }

    .elig-title {
        font-size: 16px;
    }

    /* Negative margin grows the tap area without inflating the header. */
    .elig-close-btn {
        width: 44px;
        height: 44px;
        margin: -8px -8px -8px 0;
        flex-shrink: 0;
    }

    .elig-body {
        padding: 16px;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .elig-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px 12px;
        margin-bottom: 16px;
    }

    .elig-info-value {
        font-size: 13px;
        overflow-wrap: anywhere;
    }

    .elig-success-msg,
    .elig-fail-msg {
        padding: 10px 12px;
        font-size: 12.5px;
        line-height: 1.4;
        margin-bottom: 16px;
    }

    .elig-error-box {
        margin: 12px 16px;
        padding: 14px 16px;
        font-size: 13px;
    }

    .elig-criterion {
        gap: 10px;
        padding: 10px 12px;
    }

    .elig-criterion-name {
        font-size: 12.5px;
    }

    .elig-criterion-req,
    .elig-criterion-actual {
        font-size: 11.5px;
    }

    .elig-footer {
        flex-direction: column-reverse;
        gap: 10px;
        padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    }

    .elig-btn {
        width: 100%;
        min-height: 46px;
    }
}

/* Very small phones (≈320-360px). Tighten spacing and type a little, but
   keep the 2-up grids: at 360px each cell is still ~140px wide, which fits
   the icon, label and button without truncation. */
@media (max-width: 380px) {
    .hdr-row,
    .qact-grid,
    .sts-row {
        gap: 8px;
    }

    .wlc-avatar-img {
        width: 44px;
        height: 44px;
    }

    .wlc-name {
        font-size: 14px;
    }

    .dlr-icon svg {
        width: 24px;
        height: 24px;
    }

    .dlr-val {
        font-size: 11.5px;
    }

    .qact-cell {
        padding: 10px 8px 8px;
    }

    .qact-icon-wrap svg {
        width: 34px;
        height: 34px;
    }

    .qact-lbl {
        font-size: 12px;
        margin-bottom: 8px;
    }

    .sts-chip {
        min-height: 66px;
        padding: 10px 8px;
    }

    .sts-num {
        font-size: 22px;
    }

    .sts-ico svg {
        width: 28px;
        height: 28px;
    }

    .appl-trail {
        min-width: 300px;
    }
}