/* ==========================================================
   Адаптив под планшеты и телефоны.
   Подключается ПОСЛЕДНИМ, после style.css и после page-css,
   поэтому перекрывает правила вкладок без правки их файлов.
   ========================================================== */

/* ---------- поля ввода не должны вызывать зум на iOS ---------- */
@media (max-width: 900px) {
    input, select, textarea { font-size: 16px !important; }
}

/* ==========================================================
   ПЛАНШЕТ И МЕНЬШЕ (≤ 900px)
   ========================================================== */
@media (max-width: 900px) {

    /* каркас: сайдбар уезжает наверх горизонтальной лентой */
    .app {
        flex-direction: column;
        min-height: 100dvh;
    }

    .sidebar {
        width: 100%;
        min-height: auto;
        padding: 12px;
        border-right: none;
        border-bottom: 1px solid #e2ca7d;
        position: sticky;
        top: 0;
        z-index: 50;
    }

    .sidebar-title { display: none; }

    .points-list {
        flex-direction: row;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .points-list::-webkit-scrollbar { display: none; }

    .point {
        width: auto;
        flex: 0 0 auto;
        padding: 10px 16px;
        min-height: 44px;
        white-space: nowrap;
        font-size: 14px;
    }

    .sidebar-user {
        margin-top: 10px;
        display: flex;
        align-items: baseline;
        gap: 8px;
    }
    .sidebar-user-label { font-size: 12px; }
    .sidebar-user-role { font-size: 14px; font-weight: 700; }

    /* верхняя панель компактнее */
    .main { padding: 10px; }

    .top-panel {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        padding: 12px;
    }

    .company-info { grid-column: span 2; order: -1; }
    .company-name { font-size: 18px; }
    .company-subtitle { font-size: 12px; }

    .user-info, .date-info {
        border-left: none;
        padding-left: 0;
    }

    .month-selector { min-height: 44px; }

    /* вкладки — лента с прокруткой */
    .tabs {
        display: flex;
        gap: 8px;
        margin-top: 12px;
        overflow-x: auto;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .tabs::-webkit-scrollbar { display: none; }

    .tab {
        flex: 0 0 auto;
        padding: 11px 16px;
        min-height: 44px;
        font-size: 14px;
        white-space: nowrap;
    }

    .content {
        margin-top: 10px;
        min-height: auto;
        padding: 0;
    }

    /* внутренние страницы вкладок */
    .schedule-page, .work-calendar-page, .reports-page,
    .analytics-page, .settings-page, .deliveries-page, .staff-page {
        padding: 14px;
        height: auto;
    }

    .schedule-header h1, .work-calendar-header h1, .reports-header h1,
    .analytics-header h1, .settings-header h1,
    .deliveries-header h1, .staff-header h1 {
        font-size: 22px;
    }

    /* формы: поля в одну колонку */
    .settings-form {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 14px;
    }
    .settings-form .field-group,
    .settings-form .field-group.grow { width: 100%; min-width: 0; }
    .settings-form input,
    .settings-form select { max-width: none !important; }
    .settings-form button { width: 100%; min-height: 44px; }

    /* строки списков: блоками */
    .settings-row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .settings-row .field-group { width: 100%; }
    .settings-row select, .settings-row input { width: 100%; max-width: none; }
    .settings-row button { width: 100%; min-height: 44px; }

    /* вкладки настроек — лента */
    .settings-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .settings-tabs::-webkit-scrollbar { display: none; }
    .settings-tab { flex: 0 0 auto; padding: 10px 16px; font-size: 14px; }
}

/* ==========================================================
   ТЕЛЕФОН (≤ 600px)
   ========================================================== */
@media (max-width: 600px) {

    .top-panel { grid-template-columns: 1fr; }
    .company-info { grid-column: span 1; }

    .date-info { display: none; }   /* дату видно в системной строке */

    .user-info {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }
    .user-phone { display: none; }
    .logout-btn { margin-top: 0; min-height: 40px; padding: 6px 14px; }

    /* ---------- календарь работы: главный экран продавца ---------- */

    .work-calendar-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .work-day {
        min-height: 78px;
        padding: 10px;
    }
    .work-day-date { font-size: 18px; }
    .work-day-employee { font-size: 12px; }
    .work-day-status { font-size: 11px; }

    .work-calendar-legend { gap: 10px; font-size: 12px; }

    /* ---------- панель смены: на весь экран ---------- */

    .shift-modal-overlay { padding: 0; align-items: stretch; }

    .shift-modal {
        max-width: none;
        width: 100%;
        max-height: 100dvh;
        height: 100dvh;
        border-radius: 0;
    }

    .shift-modal-header { padding: 14px 16px 10px; }
    .shift-modal-header h2 { font-size: 17px; }
    .shift-modal-body { padding: 14px 16px; }

    .shift-modal-footer {
        padding: 12px 16px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
        gap: 8px;
    }
    .shift-modal-footer button { flex: 1; min-height: 46px; }
    .footer-spacer { display: none; }

    .modal-close { min-width: 44px; min-height: 44px; }

    /* ---------- таблицы накладной: строка становится карточкой ---------- */

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

    .invoice-table thead { display: none; }

    .invoice-table tbody tr {
        margin-bottom: 10px;
        border: 1px solid #cfe3ed;
        border-radius: 10px;
        overflow: hidden;
        background: #fff;
    }

    .invoice-table tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        border: none;
        border-bottom: 1px solid #eef5f8;
        padding: 9px 12px;
        text-align: right;
    }
    .invoice-table tbody td:last-child { border-bottom: none; }

    /* подпись колонки слева — берётся из data-label */
    .invoice-table tbody td::before {
        content: attr(data-label);
        font-size: 12px;
        font-weight: 600;
        color: #5d7b8c;
        text-align: left;
        flex: 0 0 auto;
    }

    /* название товара — шапкой карточки */
    .invoice-table tbody td.col-name {
        background: #eaf6fb;
        font-weight: 700;
        color: #24495c;
        justify-content: flex-start;
        text-align: left;
        font-size: 14px;
    }
    .invoice-table tbody td.col-name::before { content: none; }

    .invoice-table .qty-input,
    .invoice-table .money-input {
        max-width: 110px;
        height: 40px;
        font-size: 16px;
    }

    /* итоговые строки */
    .invoice-table tfoot tr {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 8px 12px;
        border-bottom: 1px solid #eef5f8;
    }
    .invoice-table tfoot .foot-label {
        text-align: left;
        border: none;
        padding: 0;
        flex: 1;
    }
    .invoice-table tfoot .col-num {
        border: none;
        padding: 0;
        width: auto;
        flex: 0 0 auto;
    }
    .invoice-table tfoot .row-total { background: #f4fafd; border-radius: 8px; }
    .invoice-table tfoot .foot-hint { text-align: left; font-size: 12px; }

    .writeoff-add { flex-direction: column; }
    .writeoff-add select,
    .writeoff-add input,
    .writeoff-add button { width: 100%; min-height: 44px; }

    /* ---------- расписание ---------- */

    .schedule-table { font-size: 13px; }
    .schedule-table th, .schedule-table td { padding: 8px 6px; }
    .schedule-table .status-column,
    .schedule-table td.day-status { display: none; }
    .employee-select { min-height: 40px; }

    .schedule-actions { flex-direction: column; gap: 8px; }
    .schedule-action-button { width: 100%; min-height: 46px; }

    /* ---------- отчёты и аналитика ---------- */

    .report-table-wrapper { -webkit-overflow-scrolling: touch; }
    .report-table { font-size: 13px; min-width: 520px; }
    .report-table th, .report-table td { padding: 9px 10px; }

    .report-totals, .analytics-cards { gap: 8px; }
    .total-card, .analytics-card { flex: 1 1 calc(50% - 4px); padding: 10px 12px; }
    .total-value, .analytics-value { font-size: 17px; }

    .bar-chart { height: 140px; }
    .bar-label { font-size: 9px; }

    /* ---------- выбор периода ---------- */

    .month-modal { width: calc(100% - 24px); max-width: none; }
    .month-controls { flex-direction: column; gap: 12px; }
    .month-controls select { width: 100%; min-height: 44px; }
    .month-apply { min-height: 46px; }

    /* ---------- уведомления ---------- */

    .toast-box {
        top: auto;
        bottom: 12px;
        left: 12px;
        right: 12px;
    }
    .toast { font-size: 13px; }
}

/* ==========================================================
   УЗКИЙ ТЕЛЕФОН (≤ 380px)
   ========================================================== */
@media (max-width: 380px) {
    .work-calendar-grid { grid-template-columns: 1fr; }
    .total-card, .analytics-card { flex: 1 1 100%; }
    .settings-tab { padding: 9px 12px; font-size: 13px; }
}

/* ==========================================================
   ЭКРАН ВХОДА
   ========================================================== */
@media (max-width: 600px) {
    .auth-card, .auth-box, .auth-form {
        width: calc(100% - 24px);
        max-width: none;
    }
    .auth-page input, .auth-page button { min-height: 46px; }
}