/* Global mobile fixes for TDSpro pages */
/* Подключается во всех HTML после основных стилей */

/* ===== iOS Safari fixes ===== */
html { -webkit-text-size-adjust: 100%; touch-action: manipulation; }
input, textarea, select, button { font-size: 16px !important; }
/* На iOS форма с font-size < 16px зумится автоматически — фиксим */

/* ===== Container/sections ===== */
@media (max-width: 768px) {
    .container { padding-left: 14px !important; padding-right: 14px !important; }
    section, main { padding-left: 0 !important; padding-right: 0 !important; }
    h1 { font-size: 24px !important; line-height: 1.15 !important; letter-spacing: -0.5px !important; }
    h2 { font-size: 20px !important; line-height: 1.2 !important; }
    h3 { font-size: 17px !important; }
    p { font-size: 14px !important; }
    .section-eyebrow { font-size: 11px !important; }

    /* Cards и blocks padding */
    .card { padding: 14px !important; margin-bottom: 12px !important; border-radius: 12px !important; }
    .card-head { flex-wrap: wrap !important; gap: 8px !important; align-items: flex-start !important; }
    .card-head h2 { font-size: 15px !important; }

    /* KPI grids - две колонки */
    .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
    .kpi { padding: 12px !important; border-radius: 10px !important; }
    .kpi-val { font-size: 22px !important; letter-spacing: -0.5px !important; }
    .kpi-label { font-size: 9px !important; }

    /* Stats grid row → одна колонка */
    .stats-grid-row, .chart-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 480px) {
    h1 { font-size: 22px !important; }
    h2 { font-size: 18px !important; }
    h3 { font-size: 16px !important; }
    .kpi-grid { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
    .kpi { padding: 10px !important; }
    .kpi-val { font-size: 18px !important; }
}

/* ===== Tables → cards на mobile ===== */
@media (max-width: 720px) {
    /* Стандартные таблицы внутри карточек делаем компактнее */
    .card table { font-size: 12px !important; }
    .card table th { padding: 6px 8px !important; font-size: 10px !important; }
    .card table td { padding: 7px 8px !important; font-size: 12px !important; }
    /* Таблицы которые могут быть широкими — scrollable */
    .table-scroll, .card > table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* ===== Modals ===== */
@media (max-width: 600px) {
    .modal-box, .modal {
        max-width: calc(100vw - 20px) !important;
        max-height: calc(100vh - 20px) !important;
        margin: 10px !important;
        padding: 16px !important;
        border-radius: 14px !important;
    }
    .modal h2 { font-size: 17px !important; }
    .modal-box > div { font-size: 13px !important; }
}

/* ===== Buttons на mobile ===== */
@media (max-width: 600px) {
    .btn { padding: 8px 12px !important; font-size: 13px !important; }
    .btn-primary { padding: 10px 16px !important; }
    .btn-sm { padding: 5px 8px !important; font-size: 11px !important; }
    .btn svg { width: 12px !important; height: 12px !important; }

    /* Группы кнопок — на новые строки */
    .card-head > div:not(.search) {
        flex-wrap: wrap !important;
        width: 100%;
        gap: 6px !important;
    }
}

/* ===== Forms ===== */
@media (max-width: 600px) {
    input[type="text"], input[type="email"], input[type="password"],
    input[type="number"], input[type="date"], textarea, select {
        width: 100% !important;
        box-sizing: border-box;
        padding: 10px 12px !important;
    }
    .form-row, .row-grid { grid-template-columns: 1fr !important; gap: 8px !important; }
}

/* ===== Header / Navigation ===== */
@media (max-width: 768px) {
    header .container, header > nav, .nav-right {
        gap: 6px !important;
    }
    .user-email { display: none !important; }
    .nav-right .lbl-home,
    .nav-right .lbl-docs,
    .nav-right .btn:not(.btn-icon):not(.wallet-btn) span:not(.badge):not(.cnt) {
        display: none !important;
    }
}

/* ===== Tabs ===== */
@media (max-width: 600px) {
    .tabs {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        flex-wrap: nowrap !important;
        scrollbar-width: none;
    }
    .tabs::-webkit-scrollbar { display: none; }
    .tab {
        padding: 9px 12px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    .tab svg { width: 14px !important; height: 14px !important; }
    .tab-count, .cnt { font-size: 10px !important; padding: 1px 6px !important; }
}

/* ===== Toast ===== */
@media (max-width: 600px) {
    .toast {
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
        max-width: none !important;
        font-size: 13px !important;
    }
}

/* ===== Footer ===== */
@media (max-width: 600px) {
    footer { padding: 30px 0 !important; }
    footer .container { flex-direction: column !important; gap: 14px !important; text-align: center !important; }
    .footer-links { flex-wrap: wrap !important; justify-content: center !important; gap: 12px !important; }
    .footer-links a { font-size: 12px !important; }
}

/* ===== Docs specific ===== */
@media (max-width: 600px) {
    pre, code {
        font-size: 11px !important;
        word-break: break-all !important;
        white-space: pre-wrap !important;
    }
    pre {
        padding: 10px !important;
        border-radius: 8px !important;
        overflow-x: auto !important;
    }
    .docs-toc, .toc { display: none !important; }
}

/* ===== Improved touch targets ===== */
@media (pointer: coarse) {
    button, a.btn, .tab, .btn { min-height: 38px; min-width: 38px; }
    input[type="checkbox"], input[type="radio"] { transform: scale(1.2); margin-right: 8px; }
}

/* ===== Prevent horizontal scroll on body ===== */
body { overflow-x: hidden !important; max-width: 100vw; }

/* ===== Allow tables/code to scroll within card ===== */
.card pre, .card table { max-width: 100%; }