/**
 * Student portal — mobile / touch responsiveness
 * Loaded after univ-style.css + app-compat.css for student pages.
 */

/* —— Base: safe areas, no horizontal bleed —— */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.app-body:not(.admin-body) {
    overflow-x: clip;
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
}

.app-body.nav-open {
    overflow: hidden;
}

/* Keep sticky chrome (and open menu) ABOVE the dim backdrop so links stay tappable */
.app-body.nav-open .portal-sticky-chrome {
    z-index: 220;
}

.app-body.nav-open .main-content {
    pointer-events: none;
}

.app-body.nav-open .main-nav,
.app-body.nav-open .nav-toggle,
.app-body.nav-open .site-header {
    pointer-events: auto;
    touch-action: manipulation;
}

/* —— Sticky chrome height for mobile nav max-height —— */
@media (max-width: 899px) {
    :root {
        --header-height: 96px;
        --student-chrome-offset: 96px;
    }

    .main-nav {
        max-height: calc(100dvh - var(--student-chrome-offset, 96px));
        max-height: calc(100vh - var(--student-chrome-offset, 96px));
        padding-bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
        z-index: 230;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .site-header {
        position: relative;
        z-index: 230;
    }

    .nav-toggle {
        position: relative;
        z-index: 231;
        min-width: 44px;
        min-height: 44px;
        height: 44px;
        padding: 0 0.75rem;
        gap: 0.4rem;
        border-radius: 8px;
    }

    .nav-toggle-text {
        font-size: 0.8125rem;
    }

    .nav-toggle-bars,
    .nav-toggle-bars::before,
    .nav-toggle-bars::after {
        width: 16px;
    }

    .nav-toggle-bars::before { top: -5px; }
    .nav-toggle-bars::after { top: 5px; }

    .header-inner {
        min-height: 48px;
        padding: 0.35rem 0.65rem 0.35rem 0.75rem;
    }

    .header-menu-title {
        font-size: 0.95rem;
        line-height: 1.25;
    }

    .nav-item,
    .nav-dropdown-menu a,
    .main-nav .header-help,
    .main-nav .header-logout {
        min-height: 48px;
        padding: 0.75rem 0.85rem;
        font-size: 0.95rem;
    }

    .main-nav .header-help {
        border-radius: 12px;
        justify-content: center;
    }

    .nav-dropdown-menu a {
        min-height: 44px;
        padding: 0.7rem 0.85rem;
    }

    .nav-item-static {
        word-break: break-all;
    }
}

/* Nav backdrop when drawer is open — below sticky chrome/menu (z-index 220+) */
.nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 210;
    background: rgba(20, 32, 30, 0.45);
    -webkit-tap-highlight-color: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    pointer-events: auto;
}

.nav-backdrop.is-open,
.nav-backdrop.is-open[hidden] {
    display: block;
}

.nav-backdrop[hidden]:not(.is-open) {
    display: none !important;
}

/* —— Main content & titles —— */
@media (max-width: 640px) {
    .main-content {
        padding: 0.85rem 0.75rem 1.75rem;
        padding-bottom: max(1.75rem, env(safe-area-inset-bottom, 0px));
    }

    .container-wide,
    .container {
        padding-left: 0;
        padding-right: 0;
        max-width: 100%;
    }

    .page-title {
        font-size: 1.25rem;
        margin-bottom: 1rem;
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;
        line-height: 1.3;
    }

    .page-title .title-icon {
        flex-shrink: 0;
        margin-top: 0.1rem;
    }

    .card {
        padding: 1rem 0.95rem;
        border-radius: var(--radius);
    }

    .card-header {
        flex-direction: column;
        align-items: stretch;
        gap: 0.65rem;
    }

    .card-header h2,
    .card h2 {
        font-size: 1.05rem;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

    .flex-between {
        flex-direction: column;
        align-items: stretch;
    }
}

/* —— Touch targets: buttons & small controls —— */
@media (max-width: 768px) {
    .btn-sm,
    .btn-xs {
        min-height: 44px;
        padding: 0.55rem 0.9rem;
        font-size: 0.875rem;
    }

    .form-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .form-actions .btn {
        width: 100%;
        min-height: 48px;
        justify-content: center;
    }

    .admin-cert-page .admin-cert-success-actions,
    .fee-clear-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-cert-success-actions .btn,
    .fee-clear-actions .btn {
        width: 100%;
        min-height: 48px;
        justify-content: center;
    }

    /* Prevent iOS zoom on focus */
    .form-group input,
    .form-group select,
    .form-group textarea,
    .form-control,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="date"],
    input[type="password"],
    select,
    textarea {
        font-size: 16px !important;
        max-width: 100%;
    }

    .form-group input[type="checkbox"],
    .form-group input[type="radio"],
    input[type="checkbox"],
    input[type="radio"] {
        width: 1.25rem;
        height: 1.25rem;
        min-height: 0;
        min-width: 1.25rem;
        accent-color: var(--primary);
    }

    .payment-options {
        grid-template-columns: 1fr;
    }

    .payment-box {
        padding: 1.15rem;
    }

    .profile-grid {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }

    .action-grid {
        grid-template-columns: 1fr;
    }
}

/* —— Offline proof: fee table → stacked cards —— */
@media (max-width: 768px) {
    .offline-pay-card .card-header {
        margin-bottom: 0.75rem;
    }

    .offline-modes {
        font-size: 0.85rem;
        line-height: 1.45;
        overflow-wrap: anywhere;
    }

    .offline-scope-toggle {
        grid-template-columns: 1fr;
        gap: 0.65rem;
    }

    .scope-option {
        min-height: 56px;
        padding: 0.85rem 1rem;
    }

    .offline-fee-table-wrap {
        margin-left: 0;
        margin-right: 0;
        border: none;
        background: transparent;
        overflow: visible;
    }

    .offline-fee-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0 0.75rem;
    }

    .offline-fee-table thead {
        display: none;
    }

    .offline-fee-table tbody tr {
        display: block;
        background: var(--bg-surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 0.85rem 0.95rem;
        box-shadow: var(--shadow-sm);
    }

    .offline-fee-table tbody tr.is-selected {
        border-color: var(--primary-border);
        background: var(--primary-subtle);
        box-shadow: 0 0 0 1px var(--primary-border);
    }

    .offline-fee-table tbody td {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.75rem;
        width: 100%;
        padding: 0.4rem 0;
        border: none;
        text-align: right;
        white-space: normal;
        word-break: break-word;
    }

    .offline-fee-table tbody td::before {
        content: attr(data-label);
        font-size: 0.7rem;
        font-weight: 650;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--text-muted);
        text-align: left;
        flex: 0 0 38%;
        max-width: 8rem;
        padding-top: 0.15rem;
    }

    .offline-fee-table tbody td:first-child {
        padding-top: 0;
        padding-bottom: 0.65rem;
        margin-bottom: 0.35rem;
        border-bottom: 1px solid var(--border);
        align-items: center;
    }

    .offline-fee-table tbody td:first-child::before {
        content: "Select fee";
        flex: 1;
        max-width: none;
        font-size: 0.9rem;
        text-transform: none;
        letter-spacing: 0;
        color: var(--text);
        font-weight: 600;
        padding-top: 0;
    }

    .offline-fee-table tbody td:first-child input {
        width: 1.35rem;
        height: 1.35rem;
        min-width: 1.35rem;
        flex-shrink: 0;
    }

    .offline-fee-table .fine-cell {
        min-width: 0;
    }

    .offline-fee-table .fine-include-label {
        justify-content: flex-end;
        text-align: right;
    }

    .offline-fee-table .amount,
    .offline-fee-table td.num {
        text-align: right;
        white-space: normal;
    }

    .offline-fee-table tfoot tr {
        display: block;
        background: var(--primary-subtle);
        border: 1px solid var(--primary-border);
        border-radius: var(--radius);
        padding: 0.85rem 1rem;
        margin-top: 0.25rem;
    }

    .offline-fee-table tfoot td {
        display: block;
        width: 100%;
        border: none;
        padding: 0.15rem 0;
        text-align: left;
    }

    .offline-fee-table tfoot td.amount {
        margin-top: 0.35rem;
        font-size: 1.15rem;
        font-weight: 700;
        color: var(--primary);
    }

    .offline-fieldset {
        padding: 0.85rem 0.75rem 1rem;
    }

    .offline-fieldset legend {
        font-size: 0.95rem;
        line-height: 1.35;
    }

    .proof-preview-wrap {
        max-width: 100%;
        overflow: hidden;
    }

    .proof-preview-frame img,
    .proof-preview-frame iframe {
        max-width: 100%;
        height: auto;
    }

    .btn-offline-submit {
        width: 100%;
        min-height: 48px;
    }
}

/* —— My Fee Registrations: table → cards —— */
@media (max-width: 768px) {
    .my-reg-page .card-desc {
        font-size: 0.9rem;
        line-height: 1.5;
    }

    .my-reg-page .table-responsive {
        border: none;
        overflow: visible;
        background: transparent;
    }

    .my-reg-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0 0.75rem;
    }

    .my-reg-table thead {
        display: none;
    }

    .my-reg-table tbody tr {
        display: block;
        background: var(--bg-surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 0.85rem 0.95rem;
        box-shadow: var(--shadow-sm);
    }

    .my-reg-table tbody tr.my-reg-row--inactive {
        opacity: 0.92;
        background: var(--bg-muted);
    }

    .my-reg-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 0.75rem;
        width: 100%;
        padding: 0.35rem 0;
        border: none;
        text-align: right;
        white-space: normal;
        word-break: break-word;
    }

    .my-reg-table tbody td::before {
        content: attr(data-label);
        font-size: 0.7rem;
        font-weight: 650;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--text-muted);
        text-align: left;
        flex: 0 0 36%;
        max-width: 7.5rem;
    }

    .my-reg-table tbody td[colspan] {
        display: block;
        text-align: left;
    }

    .my-reg-table tbody td[colspan]::before {
        display: none;
    }

    .my-reg-table tbody td:last-child {
        margin-top: 0.55rem;
        padding-top: 0.65rem;
        border-top: 1px solid var(--border);
        justify-content: stretch;
    }

    .my-reg-table tbody td:last-child::before {
        display: none;
    }

    .my-reg-table .my-reg-reset-form,
    .my-reg-table .my-reg-reset-form .btn {
        width: 100%;
    }

    .my-reg-table .text-end {
        text-align: right;
    }

    .my-reg-brief {
        overflow-wrap: anywhere;
    }
}

/* —— Admin certificate: checkbox list —— */
.cert-check-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    max-height: min(50vh, 22rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.35rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fff;
}

.cert-check-item {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin: 0;
    padding: 0.7rem 0.75rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 500;
    line-height: 1.35;
    border: 1px solid transparent;
    transition: background var(--transition), border-color var(--transition);
}

.cert-check-item:hover {
    background: var(--bg-muted);
}

.cert-check-item:has(input:checked) {
    background: var(--primary-subtle);
    border-color: var(--primary-border);
}

.cert-check-item input {
    flex-shrink: 0;
    margin-top: 0.15rem;
    width: 1.25rem;
    height: 1.25rem;
    min-height: 0;
}

.cert-check-item .cert-check-label {
    flex: 1;
    min-width: 0;
}

.cert-check-item .cert-check-amount {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--primary);
    white-space: nowrap;
}

@media (max-width: 560px) {
    .admin-cert-page .admin-cert-profile {
        grid-template-columns: 1fr;
    }

    .admin-cert-page .btn-primary {
        width: 100%;
        min-height: 48px;
    }

    .cert-check-item {
        flex-wrap: wrap;
    }

    .cert-check-item .cert-check-amount {
        width: 100%;
        padding-left: 1.9rem;
        text-align: left;
    }
}

/* —— Installment selection —— */
@media (max-width: 640px) {
    .inst-deadline {
        white-space: normal;
    }

    .inst-meta {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .inst-meta-item {
        width: 100%;
    }

    .inst-steps {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.25rem;
        scrollbar-width: thin;
    }

    .inst-step-text {
        font-size: 0.65rem;
        line-height: 1.25;
    }

    .inst-plan-card {
        padding: 0.9rem;
    }

    .inst-status,
    .inst-lock-panel {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* —— Receipts —— */
@media (max-width: 640px) {
    /* Scoped with .rcpt-page: receipts/index.php declares these later in its
     * own <style> block, so an unscoped selector would lose on source order. */
    .rcpt-page .rcpt-channel-filters {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
    }

    .rcpt-page .rcpt-chip {
        justify-content: center;
        min-height: 44px;
        border-radius: var(--radius-sm);
        padding: 0.55rem 0.65rem;
        font-size: 0.8rem;
        text-align: center;
    }

    .rcpt-page .rcpt-card-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        margin-top: 0.75rem;
    }

    .rcpt-page .rcpt-card-actions .btn {
        width: 100%;
        min-height: 44px;
        justify-content: center;
    }

    .rcpt-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rcpt-tab {
        min-height: 52px;
        padding: 0.55rem 0.4rem;
    }

    .rcpt-card-top {
        flex-wrap: wrap;
        gap: 0.35rem;
    }

    .rcpt-amount {
        overflow-wrap: anywhere;
    }

    .rcpt-list--download .rcpt-dl-item {
        align-items: flex-start;
        gap: 0.65rem;
        padding: 0.85rem;
    }

    .rcpt-dl-action {
        align-self: center;
    }
}

@media (max-width: 380px) {
    .rcpt-page .rcpt-channel-filters {
        grid-template-columns: 1fr;
    }
}

/* —— Payment help / status —— */
@media (max-width: 560px) {
    .pay-help-quick {
        grid-template-columns: 1fr 1fr;
        gap: 0.55rem;
    }

    .pay-help-reg {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .payment-status-page .card,
    .pay-attempt-grid-card {
        overflow-x: clip;
        overflow-y: visible;
    }

    .pay-attempt-card__amount {
        margin-left: 0;
        width: 100%;
    }

    .pay-attempt-card__fee,
    .pay-ref-value {
        min-width: 0;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}

@media (max-width: 400px) {
    .pay-help-quick {
        grid-template-columns: 1fr;
    }
}

/* —— Fee dashboard dues —— */
@media (max-width: 719px) {
    .fee-dues-panel {
        padding: 0;
        overflow: visible;
        max-height: none;
    }

    .fee-dues-hero {
        padding: 1rem 0.95rem;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }

    .fee-due-list,
    .fee-due-item,
    .fee-due-main,
    .fee-due-pay,
    .fee-due-actions,
    .fee-due-channel-list {
        overflow: visible;
        max-height: none;
        height: auto;
        min-width: 0;
    }

    .fee-due-item {
        display: grid;
        grid-template-columns: 1fr;
        padding: 1rem 0.95rem 1.15rem;
        gap: 0.85rem;
    }

    .fee-due-pay {
        width: 100%;
        align-items: stretch;
        text-align: left;
        gap: 0.85rem;
    }

    .fee-due-amount-block {
        display: flex;
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        gap: 0.75rem;
        width: 100%;
        padding: 0.65rem 0.8rem;
        background: var(--bg-muted, #f4f7f6);
        border: 1px solid var(--border);
        border-radius: var(--radius, 8px);
    }

    .fee-due-amount-label {
        margin: 0;
    }

    .fee-due-amount {
        font-size: 1.35rem;
    }

    .fee-due-actions {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: none;
        margin: 0;
    }

    .fee-due-channel-list {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 0.55rem;
        width: 100%;
    }

    .fee-due-channel {
        display: flex;
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        min-height: 56px;
        padding: 0.8rem 0.85rem;
        -webkit-tap-highlight-color: transparent;
    }

    .fee-due-channel-icon {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1.1rem;
    }

    .fee-due-channel-label {
        font-size: 1rem;
    }

    .fee-due-channel-hint {
        font-size: 0.78rem;
    }

    .fee-due-brief {
        font-size: 1rem;
        overflow-wrap: anywhere;
    }

    .fee-due-migrate-notice {
        padding: 0.7rem 0.8rem;
        gap: 0.55rem;
    }

    .fee-due-migrate-notice p {
        font-size: 0.8125rem;
    }

    .student-profile-card .profile-grid > div {
        min-width: 0;
    }
}

/* —— Footer —— */
@media (max-width: 640px) {
    .site-footer {
        padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
    }

    .footer-inner {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .footer-links {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem 0.75rem;
        justify-items: start;
    }

    .footer-links a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        font-size: 0.8125rem;
    }

    .footer-copy {
        font-size: 0.75rem;
        line-height: 1.45;
        text-align: center;
    }
}

/* —— Login page refinements —— */
@media (max-width: 480px) {
    .sl-submit {
        min-height: 52px;
        font-size: 1rem;
    }
}

/* —— Verify receipt / misc —— */
@media (max-width: 640px) {
    .verify-receipt-page {
        margin: 0.75rem auto;
        padding: 0 0.75rem;
    }

    .result-card {
        padding: 1rem 0.9rem;
    }

    .help-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .help-footer .btn {
        width: 100%;
    }

    .table-wrap,
    .table-responsive {
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
}

/* Fee register forms (bus / COE / other / cert / reval) */
@media (max-width: 768px) {
    .card.narrow {
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding: 1rem 0.95rem;
    }

    /* Each page re-declares these later in its own <style> block with
     * align-items: center / a wider gap, so scope by page wrapper to win. */
    .bus-fee-page .bus-fee-success-actions,
    .other-fee-page .other-fee-success-actions,
    .coe-fee-page .coe-fee-success-actions,
    .reval-fee-page .reval-fee-success-actions,
    .admin-cert-page .admin-cert-success-actions,
    .mattress-fee-page .mattress-fee-success-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 0.6rem;
    }

    .bus-fee-success-actions .btn,
    .other-fee-success-actions .btn,
    .coe-fee-success-actions .btn,
    .reval-fee-success-actions .btn,
    .admin-cert-success-actions .btn,
    .mattress-fee-success-actions .btn,
    .bus-fee-page .btn-primary,
    .other-fee-page .btn-primary,
    .coe-fee-page .btn-primary,
    .reval-fee-page .btn-primary,
    .admin-cert-page .btn-primary,
    .mattress-fee-page .btn-primary {
        width: 100%;
        min-height: 48px;
        justify-content: center;
    }

    .bus-fee-page .bus-fee-summary-row,
    .other-fee-page .other-fee-summary-row,
    .coe-fee-page .coe-fee-summary-row,
    .mattress-fee-page .mattress-fee-summary-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.65rem;
    }

    .bus-fee-page .bus-fee-profile,
    .other-fee-page .other-fee-profile,
    .coe-fee-page .coe-fee-profile,
    .reval-fee-page .reval-fee-profile,
    .mattress-fee-page .mattress-fee-profile,
    .admin-cert-page .admin-cert-profile {
        grid-template-columns: 1fr;
    }

    /* Mattress paid history → stacked cards */
    .mattress-fee-history .table-responsive {
        border: none;
        background: transparent;
        overflow: visible;
    }

    .mattress-fee-history .mattress-history-grid {
        min-width: 0;
        width: 100%;
        border-collapse: separate;
        border-spacing: 0 0.75rem;
    }

    .mattress-history-grid thead {
        display: none;
    }

    .mattress-history-grid tbody tr {
        display: block;
        background: var(--bg-surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 0.85rem 0.95rem;
        box-shadow: var(--shadow-sm);
    }

    .mattress-history-grid tbody td {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.75rem;
        width: 100%;
        padding: 0.4rem 0;
        border: none;
        text-align: right;
        white-space: normal;
        word-break: break-word;
    }

    .mattress-history-grid tbody td::before {
        content: attr(data-label);
        font-size: 0.7rem;
        font-weight: 650;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--text-muted);
        text-align: left;
        flex: 0 0 38%;
        max-width: 8rem;
        padding-top: 0.15rem;
    }
}

/* BBPS / Indian Bank pay launch pages */
@media (max-width: 899px) {
    .bbps-pay-card .bbps-details-grid,
    .bbps-details-grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem;
    }

    .bbps-detail {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .bbps-copy-value {
        display: block;
        word-break: break-all;
        margin: 0.25rem 0;
    }

    .bbps-copy-btn,
    .bbps-app-buttons .btn,
    .bbps-instructions-grid .btn {
        width: 100%;
        min-height: 48px;
        justify-content: center;
    }

    .bbps-app-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .bbps-instructions-grid {
        grid-template-columns: 1fr !important;
        gap: 0.85rem;
    }

    .bbps-store-links {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.45rem;
    }

    .bbps-store-links a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    .pay-launch-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .pay-launch-actions .btn {
        width: 100%;
        min-height: 48px;
    }
}

/* =============================================================================
 * Overflow safety — long identifiers (regno, receipt no., UTR, order id, VAN)
 * Applies at every width; these strings have no natural break opportunity.
 * ========================================================================== */

.rcpt-mono,
.rcpt-dl-ref,
.rcpt-brief,
.rcpt-fee,
.rcpt-wait,
.pay-attempt-card__check-hint,
.bbps-steps li,
.bbps-institution,
.ib-cms-guide-lead,
.inst-circular,
.circular-notice,
.bus-fee-profile dd,
.coe-fee-profile dd,
.other-fee-profile dd,
.admin-cert-profile dd,
.reval-fee-profile dd,
.mattress-fee-profile dd {
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 0;
}

/* Bare <code> and alert text (ICICI order IDs, receipt numbers) */
.main-content code,
.alert code,
.alert strong {
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
}

/* Tables must never force the page wider than the viewport */
.table-responsive,
.table-wrap {
    max-width: 100%;
}

/* =============================================================================
 * Revaluation — Step 1 confirmation grid → stacked cards on mobile
 * ========================================================================== */

.reval-step1-grid tbody tr.is-selected {
    background: var(--primary-subtle);
}

@media (max-width: 768px) {
    /* Neutralise the desktop min-width so the page stops scrolling sideways */
    .reval-step1-section .table-responsive {
        border: none;
        background: transparent;
        overflow: visible;
    }

    /* Extra specificity: the page's own <style> loads after this file */
    .reval-step1-section .reval-step1-grid {
        min-width: 0;
        width: 100%;
        border-collapse: separate;
        border-spacing: 0 0.75rem;
    }

    .reval-step1-grid thead {
        display: none;
    }

    .reval-step1-grid tbody tr {
        display: block;
        background: var(--bg-surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 0.85rem 0.95rem;
        box-shadow: var(--shadow-sm);
    }

    .reval-step1-grid tbody tr.is-selected {
        border-color: var(--primary-border);
        background: var(--primary-subtle);
        box-shadow: 0 0 0 1px var(--primary-border);
    }

    .reval-step1-grid tbody td {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.75rem;
        width: 100%;
        padding: 0.4rem 0;
        border: none;
        text-align: right;
        white-space: normal;
        word-break: break-word;
    }

    .reval-step1-grid tbody td::before {
        content: attr(data-label);
        font-size: 0.7rem;
        font-weight: 650;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--text-muted);
        text-align: left;
        flex: 0 0 38%;
        max-width: 8rem;
        padding-top: 0.15rem;
    }

    /* First cell becomes the card's select header ONLY when a radio is present */
    .reval-step1-grid tbody td:first-child:has(input[type="radio"]) {
        padding-top: 0;
        padding-bottom: 0.65rem;
        margin-bottom: 0.35rem;
        border-bottom: 1px solid var(--border);
        align-items: center;
    }

    .reval-step1-grid tbody td:first-child:has(input[type="radio"])::before {
        content: "Select this Step 1 payment";
        flex: 1;
        max-width: none;
        font-size: 0.9rem;
        text-transform: none;
        letter-spacing: 0;
        color: var(--text);
        font-weight: 600;
        padding-top: 0;
    }

    .reval-step1-grid tbody td:first-child input {
        width: 1.35rem;
        height: 1.35rem;
        min-width: 1.35rem;
        flex-shrink: 0;
    }

    /* Paid history tables (Step 2 / read-only) — card stack without select chrome */
    .reval-step1-section .reval-history-grid {
        min-width: 0;
        width: 100%;
        border-collapse: separate;
        border-spacing: 0 0.75rem;
    }

    .reval-history-grid thead {
        display: none;
    }

    .reval-history-grid tbody tr {
        display: block;
        background: var(--bg-surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 0.85rem 0.95rem;
        box-shadow: var(--shadow-sm);
        cursor: default;
    }

    .reval-history-grid tbody td {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.75rem;
        width: 100%;
        padding: 0.4rem 0;
        border: none;
        text-align: right;
        white-space: normal;
        word-break: break-word;
    }

    .reval-history-grid tbody td::before {
        content: attr(data-label);
        font-size: 0.7rem;
        font-weight: 650;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--text-muted);
        text-align: left;
        flex: 0 0 38%;
        max-width: 8rem;
        padding-top: 0.15rem;
    }
}

/* Revaluation form: stack summary + actions like the other fee pages.
 * Scoped with .reval-fee-page so these beat the page's own <style> block. */
@media (max-width: 768px) {
    .reval-fee-page .reval-fee-summary__row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.65rem;
    }

    .reval-fee-page .reval-fee-summary__amount {
        text-align: left;
        width: 100%;
    }

    .reval-fee-page .reval-fee-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 0.6rem;
    }

    .reval-fee-page .reval-fee-actions .btn {
        width: 100%;
        min-height: 48px;
        justify-content: center;
    }

    .reval-fee-page .reval-step1-confirm label {
        font-size: 0.9rem;
        line-height: 1.45;
    }

    .reval-fee-page .reval-step1-section h3 {
        font-size: 1rem;
    }
}

/* =============================================================================
 * Offline proof upload — remaining alignment gaps
 * ========================================================================== */

@media (max-width: 768px) {
    /* Empty tfoot spacer cells rendered as blocks leave dead space */
    .offline-fee-table tfoot td:empty {
        display: none;
    }

    .offline-fee-table tfoot td.amount {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0.5rem;
    }

    .total-breakdown {
        font-size: 0.8rem;
        overflow-wrap: anywhere;
    }

    /* Legend can collide with the fieldset border on narrow screens */
    .offline-fieldset legend {
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;
        max-width: 100%;
    }

    .offline-fieldset .step-num {
        flex-shrink: 0;
        margin-top: 0.1rem;
    }

    .offline-fieldset .field-hint {
        font-size: 0.85rem;
        line-height: 1.5;
    }

    /* File input overflows its container on iOS/Android without this */
    .offline-proof-form input[type="file"] {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Scoped with .offline-pay-card to beat the page's own <style> block */
    .offline-pay-card .proof-preview-frame {
        max-height: 260px;
    }

    .offline-pay-card .proof-preview-pdf {
        min-height: 240px;
    }

    .offline-pay-card .proof-preview-meta {
        font-size: 0.8rem;
    }

    /* font-size lives in this element's style attribute, so only set the rest */
    #amountMismatchHint {
        line-height: 1.45;
    }

    .fine-include-label {
        flex-wrap: wrap;
        gap: 0.35rem;
    }

    .fine-meta {
        font-size: 0.75rem;
    }
}

/* =============================================================================
 * Fee dashboard — welcome strip & due meta
 * ========================================================================== */

@media (max-width: 640px) {
    .student-welcome {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.85rem;
    }

    .student-welcome-body {
        min-width: 0;
        width: 100%;
    }

    .student-welcome-name {
        overflow-wrap: anywhere;
    }

    .student-welcome-meta {
        flex-wrap: wrap;
        gap: 0.35rem;
    }

    .student-welcome-links {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.5rem;
        width: 100%;
    }

    .student-welcome-links .btn {
        width: 100%;
        min-height: 44px;
        justify-content: center;
    }

    .fee-dues-summary,
    .fee-dues-hero {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .fee-dues-total {
        min-width: 0;
        width: 100%;
    }

    .fee-dues-title,
    .fee-dues-total-value {
        overflow-wrap: anywhere;
    }

    .fee-due-type-row {
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .fee-due-meta {
        flex-wrap: wrap;
        gap: 0.35rem 0.75rem;
        font-size: 0.82rem;
    }

    .fee-due-amount-block {
        width: 100%;
    }

    .fee-due-amount {
        overflow-wrap: anywhere;
    }

    .fee-due-channel {
        display: flex;
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
    }

    .fee-clear-state {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.6rem;
    }
}

/* =============================================================================
 * Payment status — attempt cards
 * ========================================================================== */

@media (max-width: 640px) {
    .pay-attempt-card__head {
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .pay-attempt-card__fee {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .pay-attempt-card__amount {
        white-space: normal;
    }

    .pay-attempt-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .pay-attempt-actions .btn,
    .pay-check-now-form,
    .pay-check-now-form .btn {
        width: 100%;
        min-height: 44px;
        justify-content: center;
    }

    .pay-ref-cell {
        min-width: 0;
    }
}

/* =============================================================================
 * Payment help — IFSC and Indian Bank panels
 * ========================================================================== */

@media (max-width: 640px) {
    /* Extra specificity: the page's own <style> loads after this file */
    .pay-help .pay-help-ifsc {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .pay-help .pay-help-ib-panel h4,
    .ib-cms-pay-card .ib-cms-guide h3 {
        flex-wrap: wrap;
        gap: 0.35rem;
    }

    .pay-help-channel-top {
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .pay-help-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .pay-help-actions .btn,
    .pay-help-cta {
        width: 100%;
        min-height: 44px;
        justify-content: center;
    }

    .pay-help-guides {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* =============================================================================
 * Installment selection — step rail
 * ========================================================================== */

@media (max-width: 640px) {
    /* Three equal columns are unreadable at 360px; let them size to content */
    .inst-steps {
        grid-template-columns: repeat(3, minmax(6.5rem, 1fr));
        gap: 0.5rem;
    }

    .inst-step {
        min-width: 0;
    }

    .inst-status-facts {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
    }

    .inst-form-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .inst-form-actions .btn,
    .inst-cta,
    .inst-cta-secondary {
        width: 100%;
        min-height: 48px;
        justify-content: center;
    }

    .inst-plan-grid {
        grid-template-columns: 1fr;
    }

    .inst-plan-body {
        min-width: 0;
    }
}

@media (max-width: 400px) {
    .inst-steps {
        grid-template-columns: 1fr;
    }
}

/* =============================================================================
 * Receipts list
 * ========================================================================== */

@media (max-width: 640px) {
    .rcpt-card-main,
    .rcpt-dl-body {
        min-width: 0;
    }

    .rcpt-summary-row {
        flex-wrap: wrap;
        gap: 0.6rem;
    }

    .rcpt-meta {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }

    .rcpt-card-badges {
        flex-wrap: wrap;
        gap: 0.35rem;
    }

    .rcpt-footer-cta,
    .rcpt-cta {
        width: 100%;
        justify-content: center;
    }
}

/* Three-tab rows (My Fee Registrations) — don't stretch to 4-col receipt layout */
@media (min-width: 560px) {
    .my-reg-tabs.rcpt-tabs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 380px) {
    .my-reg-tabs.rcpt-tabs {
        grid-template-columns: 1fr;
    }
}

/* =============================================================================
 * Admin certificate — totals and breakdown rows
 * ========================================================================== */

@media (max-width: 640px) {
    .admin-cert-page .admin-cert-total,
    .admin-cert-page .admin-cert-breakdown li {
        flex-wrap: wrap;
        gap: 0.35rem 0.75rem;
    }

    .admin-cert-page .admin-cert-total > span,
    .admin-cert-page .admin-cert-breakdown li > span {
        min-width: 0;
        overflow-wrap: anywhere;
    }
}

/* =============================================================================
 * BBPS / Indian Bank — step lists containing long virtual account numbers
 * ========================================================================== */

@media (max-width: 640px) {
    .bbps-steps {
        padding-left: 1.15rem;
    }

    .bbps-steps li {
        margin-bottom: 0.5rem;
        line-height: 1.5;
    }

    .ib-cms-guide,
    .pay-help-ib-panel {
        min-width: 0;
    }

    .ib-cms-ifsc-inline,
    .ib-cms-ifsc-hint {
        overflow-wrap: anywhere;
    }
}

/* =============================================================================
 * Login page card (the masthead itself is handled by univ-style.css)
 * ========================================================================== */

@media (max-width: 480px) {
    .sl-card {
        padding: 1.15rem 1rem;
    }

    .sl-card-title {
        font-size: 1.15rem;
        line-height: 1.3;
    }

    .sl-card-desc,
    .sl-footer-note {
        font-size: 0.875rem;
        line-height: 1.5;
    }

    .sl-perks {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
    }

    .sl-stage {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

/* =============================================================================
 * Limited portal + shared alert CTAs + tiny phones
 * ========================================================================== */

@media (max-width: 640px) {
    .student-profile-card .receipt-list a {
        display: flex;
        width: 100%;
        min-height: 48px;
        align-items: center;
        padding: 0.35rem 0;
        overflow-wrap: anywhere;
    }

    .alert .btn {
        margin-top: 0.35rem;
    }

    .alert .btn + .btn {
        margin-left: 0;
    }
}

@media (max-width: 380px) {
    .inst-steps {
        grid-template-columns: 1fr;
    }

    .fee-due-channel-hint {
        font-size: 0.74rem;
    }

    .fee-due-actions-label {
        flex-wrap: wrap;
    }
}

/* =============================================================================
 * Student portal — full mobile / tablet UX pass
 * Loaded last in this file so shared + page patterns stay usable ≤899px.
 * ========================================================================== */

@media (max-width: 899px) {
    :root {
        /* Safer default until JS measures sticky chrome */
        --student-chrome-offset: max(96px, 22vw);
    }

    .main-content {
        padding-left: max(0.75rem, env(safe-area-inset-left, 0px));
        padding-right: max(0.75rem, env(safe-area-inset-right, 0px));
    }

    .form-actions,
    .inst-form-actions,
    .pay-form-actions,
    .fee-clear-actions,
    .result-card .result-actions,
    .pay-launch-actions,
    .rcpt-empty-actions,
    .rcpt-footer-cta,
    .rcpt-card-actions,
    .help-footer {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.55rem;
    }

    .form-actions .btn,
    .inst-form-actions .btn,
    .pay-form-actions .btn,
    .fee-clear-actions .btn,
    .result-card .result-actions .btn,
    .pay-launch-actions .btn,
    .rcpt-empty-actions .btn,
    .rcpt-empty-actions .rcpt-cta,
    .rcpt-footer-cta .btn,
    .rcpt-footer-cta .rcpt-cta,
    .rcpt-card-actions .btn,
    .help-footer .btn {
        width: 100%;
        min-height: 48px;
        justify-content: center;
        box-sizing: border-box;
    }

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

    .student-welcome {
        flex-direction: column;
        align-items: flex-start;
    }

    .student-welcome-links {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        gap: 0.5rem;
    }

    .student-welcome-links .btn {
        width: 100%;
        min-height: 44px;
        justify-content: center;
    }

    .rcpt-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .pay-help-quick {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .pay-help-actions,
    .pay-help-actions--apps {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .pay-help-actions .pay-help-cta,
    .pay-help-actions .pay-help-cta-secondary,
    .pay-help-actions--apps .pay-help-cta {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 48px;
        justify-content: center;
    }

    .pay-help-cta--block {
        width: 100% !important;
        max-width: none !important;
    }

    .inst-steps {
        grid-template-columns: 1fr;
        gap: 0.4rem;
        overflow: visible;
    }

    .inst-step {
        flex-direction: row;
        justify-content: flex-start;
        text-align: left;
        gap: 0.65rem;
        padding: 0.55rem 0.65rem;
    }

    .bbps-app-buttons,
    .bbps-store-links,
    .bbps-instructions-grid {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.55rem;
    }

    .bbps-details-grid,
    .bbps-instructions-grid {
        grid-template-columns: 1fr !important;
    }

    .bbps-app-buttons .btn,
    .bbps-copy-btn,
    .bbps-instructions-grid .btn {
        width: 100%;
        min-height: 48px;
        justify-content: center;
    }

    /* Fee dues — never hide stacked channels on tablet hamburger widths */
    .fee-dues-panel,
    .fee-due-list,
    .fee-due-item,
    .fee-due-pay,
    .fee-due-actions,
    .fee-due-channel-list {
        overflow: visible !important;
        max-height: none !important;
        height: auto;
    }

    .fee-due-item {
        grid-template-columns: 1fr !important;
    }

    .fee-due-pay,
    .fee-due-actions,
    .fee-due-channel-list {
        width: 100%;
        max-width: none;
        margin-left: 0;
        align-items: stretch;
        text-align: left;
    }

    .fee-due-channel-list {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
    }

    .fee-due-channel {
        display: flex !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 52px;
    }

    .fee-dues-total {
        min-width: 0;
        width: 100%;
    }
}

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

    .rcpt-tabs {
        grid-template-columns: 1fr 1fr !important;
    }

    .rcpt-tab {
        min-height: 3.5rem;
        font-size: 0.75rem;
        padding: 0.5rem 0.35rem;
    }

    .page-title {
        font-size: 1.15rem;
    }

    .card.narrow {
        padding: 0.9rem 0.85rem;
    }
}

/* Touch-friendly inputs across student forms */
@media (max-width: 899px) {
    .app-body:not(.admin-body) input[type="text"],
    .app-body:not(.admin-body) input[type="password"],
    .app-body:not(.admin-body) input[type="email"],
    .app-body:not(.admin-body) input[type="tel"],
    .app-body:not(.admin-body) input[type="number"],
    .app-body:not(.admin-body) input[type="date"],
    .app-body:not(.admin-body) input[type="search"],
    .app-body:not(.admin-body) select,
    .app-body:not(.admin-body) textarea {
        font-size: 16px; /* prevent iOS zoom */
        max-width: 100%;
    }

    .app-body:not(.admin-body) .alert {
        overflow-wrap: anywhere;
    }

    .app-body:not(.admin-body) .alert a {
        display: inline-flex;
        min-height: 44px;
        align-items: center;
    }
}