*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    min-width: 320px;
}

img,
video,
canvas,
svg {
    max-width: 100%;
}

input,
select,
textarea,
button {
    max-width: 100%;
}

.report-details-body,
.detail-table,
.table-responsive {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 1024px) {
    .main-content,
    .wrap {
        width: 100% !important;
    }

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

    .sell-main {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .right-column {
        position: static !important;
    }
}

@media (max-width: 768px) {
    .page-header,
    .topbar,
    .sell-header {
        min-height: 56px !important;
        height: auto !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        padding: 10px 16px !important;
    }

    .page-header h1,
    .topbar h1,
    .sell-header h1 {
        font-size: clamp(18px, 4vw, 22px);
        line-height: 1.25;
        overflow-wrap: anywhere;
    }

    .header-left,
    .header-right,
    .top-actions {
        min-width: 0;
        flex-wrap: wrap;
    }

    .header-right {
        margin-left: auto;
    }

    .main-content,
    .wrap,
    .sell-main,
    main {
        width: 100% !important;
        max-width: 100% !important;
        padding: 16px !important;
    }

    .period-tabs {
        flex-wrap: wrap;
    }

    .period-btn {
        flex: 1 1 130px;
        padding: 9px 12px;
    }

    .stat-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 145px), 1fr));
        gap: 10px;
    }

    .method-toggle,
    .type-toggle {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .method-btn,
    .type-btn {
        min-width: 0;
        min-height: 44px;
    }

    .customer-card-main {
        min-width: 0;
        flex-wrap: wrap;
    }

    .customer-balance {
        font-size: clamp(18px, 4vw, 22px);
    }

    .report-details > summary {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .card,
    .panel-body,
    .panel-head {
        min-width: 0;
    }
}

@media (max-width: 480px) {
    body {
        overflow-wrap: break-word;
    }

    .page-header,
    .topbar,
    .sell-header {
        padding: 10px 12px !important;
    }

    .main-content,
    .wrap,
    .sell-main,
    main {
        padding: 12px !important;
    }

    .card,
    .panel-body,
    .customer-header,
    .timeline {
        padding: 14px !important;
    }

    body.statement-page {
        padding: 12px !important;
    }

    .form-control,
    .form-select,
    input,
    select,
    textarea {
        min-width: 0;
        font-size: 16px !important;
    }

    .summary-card,
    .balance-card {
        padding: 18px;
    }

    .summary-card .value,
    .balance-card .value {
        font-size: clamp(26px, 9vw, 36px);
        overflow-wrap: anywhere;
    }

    .customer-card {
        gap: 10px;
        padding: 12px;
    }

    .customer-expand {
        flex-basis: 44px;
        width: 44px;
        height: 44px;
    }

    .customer-history {
        padding: 0 12px 12px;
    }

    .customer-history-row {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 4px !important;
    }

    .customer-history-amount {
        text-align: right;
    }

    .customer-dialog,
    dialog {
        max-width: calc(100vw - 24px);
        padding: 16px;
    }

    .customer-dialog-actions,
    .dialog-foot,
    .customer-history-title {
        flex-wrap: wrap;
    }

    .alert-toast,
    .toastbox {
        left: 12px;
        right: 12px;
        top: 12px;
    }

    .report-details-body table,
    .detail-table table,
    .table-responsive table {
        min-width: 620px;
    }
}