html {
    -webkit-text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
}

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

table {
    max-width: 100%;
}

button,
input,
select,
textarea {
    font: inherit;
}

@media (pointer: coarse) {
    input,
    select,
    textarea {
        font-size: 16px;
    }

    .btn-add,
    .btn-save,
    .btn-cancel,
    .btn-back,
    .btn-submit,
    .btn-login,
    .auth-btn,
    .btn-secondary,
    .action-btn,
    .permissions-btn,
    .toggle-password,
    .icon-btn,
    button,
    .btn-link {
        min-height: 48px;
    }
}

@media (max-width: 1024px) {
    body {
        padding: 20px;
    }

    .container,
    .selection-card,
    .login-card,
    .auth-card,
    .card {
        padding: 24px !important;
    }

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

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

@media (max-width: 820px) {
    body {
        padding: 16px;
    }

    .container,
    .selection-card,
    .login-card,
    .auth-card,
    .card {
        padding: 20px !important;
        border-radius: 18px !important;
    }

    .page-header,
    .permissions-header,
    .toolbar,
    .form-actions,
    .actions-cell,
    .selection-form {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .page-header > *,
    .permissions-header > *,
    .toolbar > *,
    .form-actions > *,
    .actions-cell > * {
        width: 100%;
    }

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

    .visible-counter,
    .base-count {
        white-space: normal;
        text-align: left;
    }

    .stats-grid,
    .stats-bar,
    .permissions-grid {
        grid-template-columns: 1fr;
    }

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

    .user-info,
    .profile-card {
        gap: 10px;
    }

    .btn-add,
    .btn-save,
    .btn-cancel,
    .btn-back,
    .btn-submit,
    .btn-login,
    .auth-btn,
    .btn-secondary,
    .btn-link {
        width: 100%;
        justify-content: center;
    }

    .table-wrap {
        overflow: visible;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .users-table,
    .users-table thead,
    .users-table tbody,
    .users-table tr,
    .users-table th,
    .users-table td {
        display: block;
        width: 100%;
    }

    .users-table thead {
        display: none;
    }

    .users-table tbody {
        display: grid;
        gap: 14px;
    }

    .users-table tr {
        border: 1px solid #dbe3ef;
        border-radius: 14px;
        padding: 14px;
        background: #ffffff;
        box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
    }

    .users-table td {
        border: 0;
        padding: 8px 0;
    }

    .users-table td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 6px;
        font-size: 0.74rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #64748b;
    }

    .actions-cell {
        display: grid;
        gap: 10px;
    }

    .action-btn {
        width: 100%;
        justify-content: center;
    }

    .empty-row,
    #filteredEmptyRow td::before {
        display: none;
    }
}

@media (max-width: 560px) {
    body {
        padding: 12px;
    }

    .container,
    .selection-card,
    .login-card,
    .auth-card,
    .card {
        padding: 18px !important;
    }

    .page-title,
    .auth-title,
    .content-title,
    .logo h1,
    .header h1 {
        font-size: 1.2rem !important;
    }

    .page-subtitle,
    .content-subtitle,
    .permissions-subtitle,
    .user-identifier,
    .welcome-text,
    .logo p {
        font-size: 0.92rem !important;
    }

    .stat-value,
    .stat-card .stat-value {
        font-size: 1.6rem !important;
    }

    .submenu a,
    .menu-item,
    .filter-input,
    .filter-select,
    .form-control,
    .form-select,
    .auth-input,
    .base-select,
    .form-input {
        font-size: 0.95rem;
    }
}