/* ── Mobile Menu Button (hidden on desktop) ───────────────────────────── */
.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    color: var(--text);
    cursor: pointer;
    padding: 4px;
    flex-shrink: 0;
}

/* ── Sidebar Backdrop (hidden on desktop) ──────────────────────────────── */
.sidebar-backdrop {
    display: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   TABLET (≤ 1024px)
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

    /* ── Dashboard Charts ── */
    .dashboard-charts-grid {
        grid-template-columns: 1fr;
    }

    /* ── KPI Cards ── */
    .dashboard-kpi-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 12px;
    }

    /* ── Tasks Split View — sidebar narrower ── */
    .tasks-list-panel {
        width: 320px;
    }

    .td-sidebar {
        width: 260px;
    }

    .td-sidebar.expanded {
        width: 360px;
    }

    /* ── Contracts Stats ── */
    .contracts-stats {
        flex-wrap: wrap;
    }

    .cstat-card {
        min-width: calc(50% - 6px);
    }

    /* ── Placement table — horizontal scroll ── */
    .placement-table {
        min-width: 700px;
    }

    /* ── Rates Dropdown ── */
    .rates-dropdown {
        width: min(340px, calc(100vw - 32px));
    }

    /* ── Panel Body ── */
    .panel-body {
        width: min(var(--panel-width), 90vw);
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE (≤ 768px)
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* ── App Container ── */
    .app-container {
        flex-direction: column;
    }

    /* ── Login Screen ── */
    .login-container {
        padding: 16px;
    }

    .login-card {
        padding: 28px 20px;
        margin: 0;
        width: 100%;
        max-width: 100%;
        border-radius: var(--radius-lg);
    }

    .login-container::before {
        width: 300px;
        height: 300px;
    }

    .logo-tsk, .logo-group {
        font-size: 24px;
    }

    /* ── Mobile Menu Button ── */
    .mobile-menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* ── Sidebar Overlay ── */
    .sidebar {
        position: fixed;
        left: -280px;
        top: 0;
        bottom: 0;
        width: 260px;
        z-index: 1001;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: none;
    }

    .sidebar.open {
        left: 0;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5);
    }

    /* ── Backdrop ── */
    .sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1000;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }

    .sidebar-backdrop.active {
        display: block;
    }

    /* ── Main Content ── */
    .main-content {
        margin-left: 0;
        width: 100%;
    }

    /* ── Top Bar ── */
    .top-bar {
        padding: 10px 16px;
        gap: 8px;
    }

    .mobile-menu-btn { flex-shrink: 0; }

    /* Заголовок секции в топбаре дублирует H1 ниже — на мобиле прячем ради места */
    .topbar-section-title { display: none; }

    /* Поиск занимает свободное место и сжимается, а не толкает соседей */
    .search-box {
        width: auto;
        flex: 1 1 auto;
        min-width: 120px;
        max-width: none;
        padding: 6px 10px;
        margin-left: 0;
    }

    .search-box input {
        font-size: var(--text-base);
    }

    /* Плашка курса — в одну строку, не переносится и не сжимается */
    .rates-trigger {
        white-space: nowrap;
        flex-shrink: 0;
    }

    .top-actions {
        flex-shrink: 0;
    }

    .top-actions .btn {
        padding: 6px 12px;
        font-size: var(--text-xs);
        white-space: nowrap;
    }

    /* ── Content Header ── */
    .content-header {
        padding: 16px;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    #pageTitle {
        font-size: var(--text-xl);
    }

    #pageSubtitle {
        font-size: var(--text-xs);
    }

    /* ── Stats Cards ── */
    .stats-cards {
        display: flex;
        gap: 8px;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
        margin-left: 0;
    }

    .stat-card {
        min-width: 100px;
        padding: 10px 12px;
        flex-shrink: 0;
    }

    .stat-value {
        font-size: var(--text-2xl);
    }

    /* ── Document Section (content padding) ── */
    .document-section {
        padding: 16px;
    }

    /* ── Kanban Toggle Bar ── */
    .filter-bar {
        padding: 0;
        margin-bottom: 12px !important;
    }

    /* ── Kanban Container ── */
    .kanban-container {
        flex-direction: column;
        height: auto;
        overflow: visible;
        gap: 12px;
        min-height: auto;
    }

    .kanban-column {
        min-width: 100%;
        max-width: 100%;
        max-height: none;
        height: auto;
    }

    /* Мобильный канбан: колонки свёрнуты, карточки скрыты до клика */
    .kanban-column .column-content,
    .kanban-column .kanban-cards {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

    .kanban-column.mobile-expanded .column-content,
    .kanban-column.mobile-expanded .kanban-cards {
        max-height: 2000px;
    }

    .column-header {
        cursor: pointer;
    }

    .column-header::after {
        content: '▸';
        font-size: var(--text-xs);
        color: var(--text-muted);
        position: absolute;
        right: 14px;
        top: 14px;
        transition: transform 0.2s;
    }

    .kanban-column.mobile-expanded .column-header::after {
        transform: rotate(90deg);
    }

    .funnel-scroll-wrapper {
        overflow: visible;
        padding: 0 16px 16px;
    }

    .kanban-header {
        padding: 14px 16px 10px;
        flex-wrap: wrap;
        gap: 8px;
    }

    .kanban-filter-wrap {
        width: 100%;
    }

    .kanban-filter-select {
        width: 100%;
    }

    /* ── Tables → карточки на мобиле ──
       Каждая строка превращается в карточку, у значений — подпись из data-label
       (проставляется mobile-tables.js). Заголовок и строка фильтров скрыты. */
    .table-container {
        border-radius: 0;
        border-left: none;
        border-right: none;
        overflow-x: visible;
        padding: 0 8px 16px;
    }

    .doc-table {
        min-width: 0;
        display: block;
        width: 100%;
    }

    .doc-table thead { display: none; }       /* прячем заголовки + строку фильтров */
    .doc-table tbody { display: block; width: 100%; }

    .doc-table tbody tr {
        display: block;
        background: var(--surface2);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        padding: 6px 12px;
        margin-bottom: 10px;
    }

    .doc-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        width: auto !important;
        max-width: none !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        padding: 6px 0;
        border: none;
        font-size: var(--text-sm);
        text-align: right;
        overflow-wrap: anywhere;
    }

    /* Значение (всё, что после подписи) — занимает остаток и переносится */
    .doc-table tbody td > * { min-width: 0; }

    .doc-table tbody td + td { border-top: 1px solid var(--border); }

    /* Подпись поля (левая колонка карточки) */
    .doc-table tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--text-muted);
        font-size: var(--text-2xs);
        text-transform: uppercase;
        letter-spacing: .02em;
        text-align: left;
        flex: 0 0 auto;
        white-space: nowrap;
    }

    /* Ячейки без подписи (действия, чекбоксы, заглушки) — по центру, без подписи */
    .doc-table tbody td:not([data-label])::before,
    .doc-table tbody td[data-label=""]::before { content: none; }
    .doc-table tbody td:not([data-label]),
    .doc-table tbody td[data-label=""] {
        justify-content: center;
        border-top: none;
    }

    /* ── Right Detail Panel — Fullscreen on mobile ── */
    .panel-overlay {
        position: fixed;
        inset: 0;
        z-index: 999;
        width: 100%;
        max-width: 100%;
    }

    .panel-body {
        width: 100%;
        max-width: 100%;
    }

    .panel-overlay .panel-header {
        padding: 12px 16px;
    }

    .panel-section {
        padding: 0 16px 14px;
    }

    .progress-bar-wrap {
        padding: 12px 16px 10px;
    }

    .progress-steps {
        gap: 0;
    }

    .progress-dot {
        width: 14px;
        height: 14px;
    }

    /* ── Modals ── */
    .modal-content {
        width: 95%;
        margin: 10px auto;
        max-height: 90vh;
        overflow-y: auto;
        border-radius: var(--radius);
    }

    .modal-content.modal-lg {
        overflow-y: hidden;
        max-height: calc(100vh - 24px);
    }

    .modal-sm {
        min-width: auto;
        width: 95%;
    }

    .modal-md,
    .modal-lg {
        max-width: 95%;
    }

    .modal-fullscreen {
        max-width: 100vw;
        width: 100vw;
        max-height: 100vh;
        height: 100vh;
        border-radius: 0;
        padding: 0;
    }

    .modal-two-col {
        grid-template-columns: 1fr;
    }

    /* ── Order Modal ── */
    .order-modal-body {
        grid-template-columns: 1fr;
        overflow-y: auto;
    }

    .order-modal-left {
        padding-right: 0;
        border-right: none;
        border-bottom: 1px solid var(--border);
        padding-bottom: 14px;
        overflow-y: visible;
    }

    .order-modal-right {
        padding-left: 0;
        padding-top: 14px;
        overflow-y: visible;
    }

    .order-modal-row-2,
    .order-modal-row-3 {
        grid-template-columns: 1fr;
    }

    /* ── Input Group Currency ── */
    .input-group-currency {
        flex-direction: column;
    }

    .input-group-currency .form-control {
        border-radius: var(--radius-sm);
        border-right: 1px solid var(--border);
    }

    .input-group-currency-select {
        border-radius: var(--radius-sm);
        width: 100%;
    }

    /* ── Select with Add ── */
    .select-with-add {
        flex-wrap: wrap;
    }

    /* ── Invoice Preview Cards ── */
    .ipc-columns {
        flex-direction: column;
        gap: 8px;
    }

    .ipc-col-arrow {
        display: none;
    }

    .ipc-numbers {
        flex-wrap: wrap;
    }

    /* ── File Action Buttons ── */
    .file-actions-row {
        gap: 4px;
    }

    .file-action-btn {
        padding: 4px 6px;
        font-size: var(--text-4xs);
    }

    /* ── Placement Table ── */
    .placement-table {
        font-size: var(--text-xs);
        min-width: 600px;
    }

    .placement-input {
        min-width: 70px;
        padding: 4px 6px;
        font-size: var(--text-xs);
    }

    .placement-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ── Comments ── */
    .comment-input-wrap {
        flex-direction: column;
    }

    .comment-textarea {
        min-height: 50px;
    }

    .comment-meta {
        gap: 4px;
    }

    /* ── Tasks ── */
    .tasks-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .tasks-toolbar-left {
        flex-wrap: wrap;
    }

    .tasks-badges {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
    }

    .tasks-split {
        flex-direction: column;
        min-height: auto;
        border-radius: var(--radius);
    }

    .tasks-list-panel {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border);
        max-height: 50vh;
    }

    .tasks-detail-panel {
        min-height: 40vh;
    }

    /* Task detail body — stack sidebar below */
    .td-body {
        flex-direction: column;
    }

    .td-sidebar {
        width: 100%;
        border-left: none;
        border-top: 1px solid var(--border);
    }

    .td-sidebar.expanded {
        width: 100%;
    }

    .td-header {
        padding: 14px 16px;
        flex-wrap: wrap;
    }

    .td-title-input {
        font-size: var(--text-lg);
    }

    .td-fields {
        padding: 14px 16px;
    }

    .td-field-row {
        flex-direction: column;
        gap: 8px;
    }

    /* Task Status Pipeline — horizontal scroll */
    .td-status-pipeline {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }

    .td-status-step {
        padding: 4px 6px;
    }

    .td-step-label {
        font-size: var(--text-4xs);
    }

    /* Task Detail Modal */
    .task-detail-modal {
        width: 95vw !important;
    }

    .task-detail-body {
        flex-direction: column;
        padding: 14px;
    }

    .task-detail-right {
        width: 100%;
    }

    /* Task row — touch-friendly */
    .task-row {
        padding: 12px 14px;
        gap: 8px;
    }

    /* Show actions on mobile (no hover) */
    .task-row .task-row-actions {
        display: flex;
    }

    .task-row .task-row-avatars {
        display: none;
    }

    /* ── Transition Warning Modal ── */
    .tw-warning-item {
        padding: 10px 12px;
        font-size: var(--text-sm);
    }

    /* ── Dashboard ── */
    .dashboard-kpi-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 8px;
    }

    .kpi-card {
        padding: 14px;
        gap: 10px;
    }

    .kpi-icon {
        width: 40px;
        height: 40px;
    }

    .kpi-icon i {
        width: 20px;
        height: 20px;
    }

    .kpi-value {
        font-size: var(--text-xl);
    }

    .chart-wrapper {
        min-height: 220px;
    }

    /* ── Contracts ── */
    .contracts-stats {
        flex-wrap: wrap;
        gap: 6px;
    }

    .cstat-card {
        min-width: calc(50% - 4px);
        padding: 10px 12px;
    }

    .contract-detail-card .detail-row {
        grid-template-columns: 1fr;
    }

    .contracts-col-filters {
        flex-wrap: wrap;
        gap: 6px;
    }

    /* ── Rates Dropdown ── */
    .rates-dropdown {
        width: calc(100vw - 32px);
        max-width: 340px;
    }

    .rate-row-right {
        gap: 6px;
        font-size: var(--text-2xs);
    }

    /* ── Tom Select Dropdown ── */
    .ts-dropdown {
        max-width: calc(100vw - 32px) !important;
    }

    /* ── User Block in Sidebar ── */
    .user-block {
        padding: 12px 16px;
    }

    /* ── Toolbar 1C ── */
    .toolbar-1c {
        flex-direction: column;
        padding: 10px 12px;
    }

    .toolbar-1c .search-input {
        min-width: auto;
        width: 100%;
    }

    /* ── History Tooltip ── */
    .history-tooltip {
        max-width: calc(100vw - 32px);
        min-width: 200px;
    }

    /* ── Product Search ── */
    .product-search-wrap {
        min-width: auto;
        width: 100%;
    }

    .order-add-product-row {
        flex-wrap: wrap;
    }

    .order-add-product-bar {
        flex-wrap: wrap;
    }

    /* ── Calc Params ── */
    .calc-params-toggle {
        font-size: var(--text-xs);
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   EXTRA SMALL (≤ 420px)
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 420px) {
    .top-bar {
        padding: 8px 12px;
        gap: 6px;
    }

    /* Кнопка действия — компактная, только иконка (+) ради места в топбаре */
    .top-actions .btn {
        padding: 8px;
    }

    #topActionLabel {
        display: none;
    }

    .top-actions .btn i {
        margin: 0;
    }

    .stat-card {
        min-width: 85px;
        padding: 8px 10px;
    }

    .stat-value {
        font-size: 18px;
    }

    /* ── Login ── */
    .login-card {
        padding: 24px 16px;
    }

    .logo-tsk, .logo-group {
        font-size: var(--text-xl);
    }

    /* ── KPI ── */
    .dashboard-kpi-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .kpi-card {
        padding: 10px;
        gap: 8px;
        flex-direction: column;
        align-items: flex-start;
    }

    .kpi-icon {
        width: 32px;
        height: 32px;
    }

    .kpi-value {
        font-size: 18px;
    }

    .kpi-label {
        font-size: var(--text-2xs);
    }

    /* ── Contracts Stats ── */
    .cstat-card {
        min-width: 100%;
    }

    .cstat-value {
        font-size: var(--text-lg);
    }

    /* ── Tasks — stack badges vertically ── */
    .tasks-tabs {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .tasks-tab {
        padding: 6px 12px;
        font-size: var(--text-xs);
    }

    .tasks-search-wrap {
        min-width: auto;
        width: 100%;
    }

    /* ── Content Header ── */
    .content-header {
        padding: 12px;
    }

    #pageTitle {
        font-size: 18px;
    }

    /* ── Kanban Cards ── */
    .kanban-card {
        padding: 10px 12px;
    }

    .card-title {
        font-size: var(--text-xs);
    }

    .card-company {
        font-size: var(--text-2xs);
    }

    .card-amount {
        font-size: var(--text-2xs);
    }

    /* ── Modal on tiny screens ── */
    .modal-content {
        width: 100%;
        margin: 0;
        max-height: 100vh;
        border-radius: 0;
    }

    .modal-sm {
        min-width: auto;
        width: 100%;
    }

    /* ── Panel sections compact ── */
    .panel-section {
        padding: 0 12px 12px;
    }

    .panel-header {
        padding: 12px 14px;
    }

    .section-label {
        font-size: var(--text-3xs);
    }

    /* ── File action buttons — icons only ── */
    .file-action-btn span {
        display: none;
    }

    .file-action-btn {
        padding: 5px;
    }

    /* ── Comment — more compact ── */
    .comment-avatar {
        width: 24px;
        height: 24px;
        font-size: var(--text-3xs);
    }

    .comment-body {
        padding: 8px 10px;
    }

    .comment-text {
        font-size: var(--text-xs);
    }

    /* ── Invoice Preview — compact ── */
    .ipc {
        padding: 10px;
        gap: 8px;
    }

    .ipc-num-val {
        font-size: var(--text-xs);
    }

    /* ── Rates Dropdown fullwidth ── */
    .rates-dropdown {
        width: calc(100vw - 16px);
        left: 8px !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   TOUCH DEVICE HELPERS
   ══════════════════════════════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
    /* Disable hover effects that are useless on touch */
    .kanban-card:hover {
        transform: none;
    }

    .doc-table tbody tr:hover {
        transform: none;
    }

    .btn:hover {
        transform: none;
    }

    /* Larger tap targets */
    .btn {
        min-height: 40px;
    }

    .btn-sm {
        min-height: 34px;
    }

    .nav-item {
        padding: 12px 20px;
        min-height: 44px;
    }

    .task-row {
        min-height: 48px;
    }

    .kanban-card {
        min-height: 48px;
    }

    /* Show task actions always (no hover on mobile) */
    .task-row .task-row-actions {
        display: flex;
    }

    .task-row .task-row-avatars {
        display: none;
    }

    /* Show file delete buttons */
    .task-check-delete,
    .task-file-delete {
        opacity: 1;
    }

    /* Kanban drag handle always visible */
    .card-drag-handle {
        opacity: 0.3;
    }

    /* Disable backdrop-filter on low-end mobile for performance */
    .sidebar,
    .top-bar,
    .panel-body,
    .modal-content {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   SAFE AREA (notch / home indicator on iOS)
   ══════════════════════════════════════════════════════════════════════════ */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .sidebar {
        padding-bottom: env(safe-area-inset-bottom);
    }

    .panel-body {
        padding-bottom: env(safe-area-inset-bottom);
    }

    .modal-fullscreen {
        padding-bottom: env(safe-area-inset-bottom);
    }
}