@media screen and (min-width: 901px) and (max-width: 1280px) {
    .main,
    .page,
    .container,
    .content {
        min-width: 0 !important;
    }

    .layout {
        grid-template-columns: minmax(220px, 250px) minmax(0, 1fr) !important;
    }

    .table-wrap,
    .table-wrapper,
    .ledger-table-wrap,
    .statement-wrap,
    .responsive-scroll {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

@media screen and (max-width: 900px) {
    html {
        -webkit-text-size-adjust: 100%;
    }

    body {
        width: 100% !important;
        overflow-x: hidden !important;
    }

    body,
    input,
    select,
    textarea,
    button {
        font-size: 16px !important;
    }

    input,
    select,
    textarea,
    button,
    .btn,
    .btn-back,
    .btn-primary,
    .btn-soft,
    .btn-danger,
    .btn-dark,
    .btn-confirm {
        min-height: 44px !important;
        touch-action: manipulation;
    }

    .layout {
        display: block !important;
        min-height: auto !important;
    }

    .sidebar {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        padding: 14px !important;
        overflow: visible !important;
    }

    .sidebar .brand {
        padding: 8px 6px 14px !important;
    }

    .sidebar nav,
    .sidebar .nav-menu {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .sidebar .nav-group {
        margin-top: 10px !important;
    }

    .sidebar .nav-title {
        grid-column: 1 / -1;
        margin: 6px 4px 2px !important;
    }

    .nav-link {
        padding: 10px !important;
        min-width: 0 !important;
    }

    .main,
    .page,
    .container,
    .content,
    .wrapper,
    .wrap {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
        min-width: 0 !important;
    }

    .page {
        margin-top: 16px !important;
        margin-bottom: 24px !important;
    }

    h1 {
        font-size: clamp(28px, 8vw, 42px) !important;
        line-height: 1.08 !important;
        overflow-wrap: anywhere;
    }

    h2 {
        font-size: clamp(22px, 6vw, 32px) !important;
        line-height: 1.14 !important;
        overflow-wrap: anywhere;
    }

    h3 {
        font-size: clamp(18px, 5vw, 24px) !important;
        line-height: 1.2 !important;
    }

    .topbar,
    .header,
    .page-header,
    .panel-header,
    .table-head,
    .toolbar,
    .actions,
    .report-actions,
    .form-actions,
    .date-actions,
    .nav-actions,
    .permission-pills {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .topbar > *,
    .header > *,
    .page-header > *,
    .panel-header > *,
    .toolbar > * {
        min-width: 0 !important;
    }

    .actions .btn,
    .report-actions .btn,
    .date-actions .btn,
    .form-actions .btn,
    .header .btn-back,
    .topbar .btn,
    .toolbar .btn {
        flex: 1 1 auto;
        justify-content: center !important;
        white-space: normal !important;
    }

    .stats,
    .stats-grid,
    .dashboard-grid,
    .cards-grid,
    .cashier-grid,
    .form-grid,
    .filter-grid,
    .entry-grid,
    .sheet-meta,
    .top-grid,
    .money-grid,
    .payment-grid,
    .principal-panel,
    .grid-2,
    .grid-3,
    .permission-grid,
    .role-guide,
    .bulk-filter-form,
    .bulk-send-head,
    .tools-grid,
    .agent-tools-grid,
    .receiver-layout,
    .content-grid,
    .two-col,
    .three-col {
        grid-template-columns: 1fr !important;
    }

    .panel,
    .card,
    .stat,
    .stat-card,
    .form-panel,
    .table-panel,
    .sheet-panel,
    .cashier-card,
    .login-card {
        border-radius: 10px !important;
    }

    .panel,
    .card,
    .form-panel,
    .toolbar,
    .table-head {
        padding: 14px !important;
    }

    .form-grid > *,
    .filter-grid > *,
    .entry-grid > *,
    .top-grid > *,
    .money-grid > *,
    .payment-grid > *,
    .principal-panel > *,
    .grid-2 > *,
    .grid-3 > * {
        min-width: 0 !important;
    }

    label {
        font-size: 12px !important;
        line-height: 1.25 !important;
    }

    textarea {
        min-height: 78px !important;
    }

    .currency-input span {
        width: auto !important;
        min-width: 46px !important;
        white-space: nowrap !important;
    }

    .currency-input input {
        padding-left: 76px !important;
    }

    .summary-box,
    .summary-strip,
    .total-strip,
    .totals,
    .receipt-summary,
    .summary-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .summary-item {
        border-right: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.22) !important;
        padding-bottom: 12px !important;
    }

    .summary-item:last-child {
        border-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    .table-wrap,
    .table-wrapper,
    .ledger-table-wrap,
    .statement-wrap,
    .responsive-scroll,
    .count-form {
        width: 100% !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch;
        border-radius: 10px;
    }

    .table-wrap table,
    .table-wrapper table,
    .ledger-table-wrap table,
    .statement-wrap table,
    .responsive-scroll table,
    .count-form table {
        width: max-content !important;
        max-width: none !important;
        min-width: 760px !important;
        font-size: 14px !important;
    }

    .table-wrap th,
    .table-wrap td,
    .table-wrapper th,
    .table-wrapper td,
    .ledger-table-wrap th,
    .ledger-table-wrap td,
    .statement-wrap th,
    .statement-wrap td,
    .responsive-scroll th,
    .responsive-scroll td {
        padding: 10px 8px !important;
        line-height: 1.3 !important;
    }

    .amount,
    .cash-in,
    .cash-out {
        white-space: nowrap !important;
    }

    .detail-pop,
    .ledger-send-box {
        width: min(86vw, 320px) !important;
        max-width: 86vw !important;
    }
}

@media screen and (max-width: 520px) {
    body {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .main,
    .page,
    .container,
    .content,
    .wrapper,
    .wrap {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .sidebar nav,
    .sidebar .nav-menu {
        grid-template-columns: 1fr !important;
    }

    .actions .btn,
    .report-actions .btn,
    .date-actions .btn,
    .form-actions .btn,
    .header .btn-back,
    .topbar .btn,
    .toolbar .btn,
    .btn-confirm {
        width: 100% !important;
    }

    .table-wrap table,
    .table-wrapper table,
    .ledger-table-wrap table,
    .statement-wrap table,
    .responsive-scroll table,
    .count-form table {
        min-width: 680px !important;
    }
}