/* Mobile layer: loaded after the desktop styles so phone-specific behavior stays isolated. */
.sidebar-close,
.sidebar-backdrop {
    display: none;
}

@media (max-width: 780px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    body.sidebar-open {
        overflow: hidden;
    }

    .sidebar {
        width: min(86vw, 320px);
        z-index: 1050;
        box-shadow: 18px 0 42px rgba(7, 23, 48, .24);
        padding-top: 18px;
    }

    .sidebar-close {
        display: grid;
        place-items: center;
        position: absolute;
        top: 15px;
        right: 14px;
        z-index: 2;
        width: 40px;
        height: 40px;
        padding: 0;
        border: 1px solid rgba(255, 255, 255, .16);
        border-radius: 10px;
        color: #fff;
        background: rgba(255, 255, 255, .08);
        font-size: 27px;
        line-height: 1;
    }

    .sidebar .brand {
        padding-right: 48px;
    }

    .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1040;
        border: 0;
        background: rgba(5, 18, 38, .52);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .2s ease, visibility .2s ease;
    }

    .sidebar.open + .sidebar-backdrop {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .side-nav a {
        min-height: 46px;
    }

    .topbar {
        height: 64px;
        min-height: 64px;
        padding: 0 12px;
        gap: 9px;
    }

    .menu-toggle,
    .icon-button,
    .notification-link {
        min-width: 42px;
        min-height: 42px;
    }

    .topbar-title {
        min-width: 0;
        flex: 1;
    }

    .topbar-title strong {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .topbar-actions {
        flex: 0 0 auto;
        gap: 4px;
    }

    .notification-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 6px;
    }

    .user-chip {
        padding-left: 5px;
    }

    .user-chip > span:last-child {
        display: none;
    }

    .page-content {
        padding: 18px 12px calc(24px + env(safe-area-inset-bottom));
    }

    .page-heading {
        align-items: stretch;
        gap: 12px;
        margin-bottom: 18px;
    }

    .page-heading > div:first-child {
        min-width: 0;
    }

    .page-heading > div:first-child > .d-flex {
        flex-wrap: wrap;
    }

    .page-heading h1 {
        font-size: 1.55rem;
        line-height: 1.2;
    }

    .page-heading > .btn,
    .page-heading > a.btn,
    .page-heading > div:last-child:not(:first-child) {
        width: 100%;
    }

    .page-heading > div:last-child:not(:first-child) .btn {
        flex: 1 1 150px;
    }

    .panel,
    .metric-card,
    .request-summary-card,
    .settings-card,
    .report-card {
        border-radius: 13px;
    }

    .panel-header {
        padding: 15px 16px;
        gap: 10px;
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .panel-header > div {
        min-width: 0;
        max-width: 100%;
    }

    .panel-header > .d-flex,
    .panel-header > div.d-flex {
        width: 100%;
    }

    .panel-header > .d-flex .btn,
    .panel-header > div.d-flex .btn {
        flex: 1 1 140px;
    }

    .panel-body {
        padding: 16px;
    }

    .alert {
        padding: 12px 42px 12px 13px;
        font-size: .92rem;
    }

    input.form-control,
    select.form-select,
    textarea.form-control,
    .search-combobox input {
        font-size: 16px;
    }

    .form-control,
    .form-select,
    .btn {
        min-height: 44px;
    }

    .btn-sm {
        min-height: 38px;
    }

    .detail-grid,
    .info-grid,
    .money-grid,
    .settings-grid,
    .report-metrics,
    .generation-summary {
        grid-template-columns: 1fr;
    }

    .quick-view-bar,
    .settings-tabs,
    .report-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: thin;
        padding-bottom: 5px;
    }

    .quick-view-bar > *,
    .settings-tabs > *,
    .report-tabs > * {
        flex: 0 0 auto;
    }

    .filter-grid,
    .audit-filter-grid,
    .supplier-filter-grid {
        grid-template-columns: 1fr;
    }

    .filter-actions,
    .form-actions,
    .backup-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .filter-actions .btn,
    .form-actions .btn,
    .backup-actions .btn {
        width: 100%;
    }

    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-inline: contain;
    }

    .table-responsive:not(:has(.mobile-card-table)) .data-table {
        min-width: 700px;
    }

    .pagination {
        flex-wrap: wrap;
        gap: 4px;
    }

    .pagination .page-link {
        min-width: 40px;
        min-height: 40px;
        display: grid;
        place-items: center;
    }

    .modal-dialog {
        margin: 8px;
        max-width: calc(100% - 16px);
    }

    .modal-content {
        max-height: calc(100dvh - 16px);
        border-radius: 14px;
    }

    .modal-body {
        overflow-y: auto;
        padding: 16px;
    }

    .modal-header,
    .modal-footer {
        padding: 13px 16px;
    }

    .modal-footer {
        display: grid;
        grid-template-columns: 1fr;
    }

    .modal-footer .btn {
        width: 100%;
        margin: 0;
    }

    .file-picker-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .file-picker-toolbar .btn,
    .file-picker-toolbar > * {
        width: 100%;
    }

    .selected-files > span {
        gap: 8px;
    }

    .selected-file-main {
        min-width: 0;
    }

    .selected-file-main b {
        overflow-wrap: anywhere;
    }

    .file-row {
        display: grid;
        grid-template-columns: 38px minmax(0, 1fr);
        align-items: start;
        gap: 10px;
    }

    .file-row .flex-grow-1 {
        min-width: 0;
    }

    .file-row .flex-grow-1 a,
    .file-row .flex-grow-1 small {
        overflow-wrap: anywhere;
    }

    .file-actions {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .file-actions .btn {
        width: 100%;
    }

    .comment-head {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 4px 10px;
    }

    .search-combobox-menu {
        max-height: min(280px, 42vh);
    }

    .request-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .request-summary-card {
        min-height: 100px;
        padding: 13px;
    }

    .request-summary-card strong {
        font-size: 1.65rem;
    }

    .request-summary-card small {
        min-height: 0;
        line-height: 1.25;
    }

    .mobile-card-table {
        min-width: 0 !important;
        margin: 0;
        border-collapse: separate;
        border-spacing: 0 10px;
    }

    .mobile-card-table thead {
        display: none;
    }

    .mobile-card-table tbody,
    .mobile-card-table tr,
    .mobile-card-table td {
        display: block;
        width: 100%;
    }

    .mobile-card-table tbody {
        padding: 0 10px 2px;
    }

    .mobile-card-table tr {
        overflow: hidden;
        border: 1px solid #dfe7f1;
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 3px 12px rgba(21, 48, 82, .05);
    }

    .mobile-card-table td {
        display: grid;
        grid-template-columns: minmax(94px, 34%) minmax(0, 1fr);
        align-items: start;
        gap: 10px;
        padding: 9px 12px;
        border: 0;
        border-bottom: 1px solid #edf1f6;
        text-align: left !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    .mobile-card-table td:last-child {
        border-bottom: 0;
    }

    .mobile-card-table td::before {
        content: attr(data-label);
        color: #6d7b91;
        font-size: .68rem;
        font-weight: 800;
        line-height: 1.35;
        letter-spacing: .035em;
        text-transform: uppercase;
    }

    .mobile-card-table td.mobile-card-actions {
        display: block;
    }

    .mobile-card-table td.mobile-card-actions::before {
        display: block;
        margin-bottom: 7px;
    }

    .mobile-card-table td.mobile-card-actions .btn,
    .mobile-card-table td.mobile-card-actions form {
        width: 100%;
    }

    .mobile-card-table td.mobile-card-actions .d-flex {
        flex-direction: column;
        align-items: stretch;
    }

    .mobile-card-table td.mobile-card-actions .btn {
        margin: 3px 0;
    }

    .mobile-card-table .mobile-card-empty {
        display: block;
        padding: 30px 15px;
    }

    .mobile-card-table .mobile-card-empty::before {
        display: none;
    }

    .compact-mobile-table td {
        grid-template-columns: 74px minmax(0, 1fr);
    }

    .report-scroll-table .data-table {
        min-width: 480px !important;
    }

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

    .chart-body,
    .status-distribution {
        min-height: 260px;
    }

    .notification-card,
    .audit-event-card {
        padding: 14px;
    }

    .report-card,
    .settings-card {
        padding: 16px;
    }
}

@media (max-width: 480px) {
    .topbar-title small {
        display: none;
    }

    .avatar {
        width: 36px;
        height: 36px;
    }

    .page-heading h1 {
        font-size: 1.4rem;
    }

    .input-group.mobile-stack {
        display: grid;
        grid-template-columns: 1fr;
    }

    .input-group.mobile-stack > * {
        width: 100%;
        max-width: none !important;
        border-radius: 8px !important;
        margin: 0 0 6px !important;
    }

    .mobile-card-table td {
        grid-template-columns: 88px minmax(0, 1fr);
        padding: 9px 10px;
    }
}

@media (max-width: 350px) {
    .request-summary-grid {
        grid-template-columns: 1fr;
    }

    .topbar {
        padding-inline: 7px;
    }
}