/* ── MOBILE NAVIGATION ── */
.mob-menu-btn {
  display: none;
  width: 38px; height: 38px;
  background: none;
  border: 1px solid #22282f;
  border-radius: 8px;
  color: #c1c6cc;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  transition: background .15s;
}
.mob-menu-btn:hover { background: rgba(255,255,255,.05); }

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 199;
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
}
.sidebar-overlay.mob-open {
  display: block;
  opacity: 1;
  pointer-events: all;
}

@media (max-width: 768px) {
  /* ── BASE ── */
  html, body {
    height: auto !important;
    min-height: 100%;
    overflow: auto !important;
  }

  /* App: stack vertically, sidebar is overlay */
  .app {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
  }

  /* Sidebar as fixed slide-in drawer */
  .sidebar {
    position: fixed !important;
    left: -240px !important;
    top: 0 !important;
    width: 220px !important;
    height: 100% !important;
    z-index: 200 !important;
    transition: left .25s ease !important;
    overflow-y: auto !important;
    padding-bottom: 24px !important;
  }
  .sidebar.mob-open {
    left: 0 !important;
    box-shadow: 4px 0 24px rgba(0,0,0,.5) !important;
  }

  .mob-menu-btn { display: flex !important; }

  /* Main area full width */
  .main {
    width: 100% !important;
    overflow: visible !important;
    flex: 1 !important;
    height: auto !important;
  }

  /* ──────────────────────────────
     DASHBOARD (index.html)
  ────────────────────────────── */
  .right { display: none !important; }

  .topbar {
    padding: 10px 14px !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    align-items: center !important;
  }
  .topbar-left {
    flex: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  .topbar-left .topbar-title {
    font-size: 15px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .topbar-left .topbar-meta { font-size: 10px !important; }
  /* Скрыть часы — занимают место */
  .topbar-clock { display: none !important; }
  .topbar-right {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
  }

  .kpi-row {
    padding: 10px 12px !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    overflow: visible !important;
    height: auto !important;
    flex-shrink: 0 !important;
  }
  .kpi-ring-card {
    grid-column: 1 / -1 !important;
    min-width: unset !important;
    padding: 10px 14px !important;
  }
  .kpi-ring-wrap { width: 78px !important; height: 78px !important; }
  .kpi-ring-value { font-size: 20px !important; }
  .kpi-tile { padding: 10px 12px !important; }
  .kpi-tile-num { font-size: 22px !important; }

  .list-wrap {
    overflow-y: visible !important;
    height: auto !important;
    flex: none !important;
    padding-bottom: 20px !important;
  }
  .list-header { display: none !important; }

  .group-label { padding: 8px 14px 3px !important; }

  /* Line rows: одна строка без переноса */
  .line-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    padding: 10px 14px !important;
    gap: 8px !important;
  }
  .lr-id {
    width: 32px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
  }
  .lr-id-num { font-size: 17px !important; }
  .lr-product {
    flex: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  .lr-product-name {
    font-size: 12px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .lr-product-sub { font-size: 10px !important; }
  .lr-target { display: none !important; }
  .lr-speed {
    flex-shrink: 0 !important;
    width: auto !important;
    justify-content: flex-end !important;
  }
  .lr-speed-val { font-size: 14px !important; min-width: 38px !important; }
  /* Скрыть прогресс-бар (маленький, неудобен) */
  .lr-pct { display: none !important; }
  .lr-ago { display: none !important; }
  .lr-status { flex-shrink: 0 !important; width: auto !important; }
  .status-badge { font-size: 9.5px !important; padding: 3px 7px !important; }

  /* ──────────────────────────────
     OPERATOR PAGE
  ────────────────────────────── */
  .toolbar {
    padding: 10px 14px !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }
  .toolbar-left {
    flex-wrap: wrap !important;
    gap: 8px !important;
    flex: 1 !important;
  }
  .toolbar-right { gap: 8px !important; flex-shrink: 0 !important; }
  .shift-date-display { font-size: 14px !important; min-width: 90px !important; }
  .shift-badge { padding: 5px 10px !important; font-size: 12px !important; }
  .fill-status { font-size: 11px !important; }

  .export-bar {
    padding: 8px 14px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    height: auto !important;
    flex-shrink: 0 !important;
  }

  /* Table → cards */
  .table-wrap {
    flex: none !important;
    height: auto !important;
    overflow: visible !important;
  }
  .op-table {
    display: block !important;
    min-width: unset !important;
    width: 100% !important;
  }
  .op-table thead { display: none !important; }
  .op-table tbody { display: block !important; padding: 8px 12px 16px !important; }

  .op-table tbody tr {
    display: block !important;
    background: #13181f !important;
    border: 1px solid #1a1f26 !important;
    border-radius: 12px !important;
    margin-bottom: 10px !important;
    padding: 14px !important;
    width: auto !important;
  }
  .op-table tbody tr.extra-row {
    background: #0e1218 !important;
    margin-left: 20px !important;
    border-left: 3px solid rgba(60,226,138,.25) !important;
  }
  .op-table tbody td {
    display: block !important;
    padding: 0 !important;
    border: none !important;
    text-align: left !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Line name — card header */
  .op-table tbody td:nth-child(1) {
    padding-bottom: 10px !important;
    border-bottom: 1px solid #1a1f26 !important;
    margin-bottom: 8px !important;
  }
  /* Product — full row */
  .op-table tbody td:nth-child(2) {
    margin-bottom: 4px !important;
  }
  .prod-name { max-width: none !important; }

  /* Labels via pseudo-elements */
  .op-table tbody td:nth-child(3)::before { content: "Метры"; }
  .op-table tbody td:nth-child(4)::before { content: "Кол-во (шт)"; }
  .op-table tbody td:nth-child(5)::before { content: "Брак (кг)"; }
  .op-table tbody td:nth-child(6)::before { content: "Сырьё"; }
  .op-table tbody td:nth-child(7)::before { content: "Примечание"; }

  .op-table tbody td:nth-child(3)::before,
  .op-table tbody td:nth-child(4)::before,
  .op-table tbody td:nth-child(5)::before,
  .op-table tbody td:nth-child(6)::before,
  .op-table tbody td:nth-child(7)::before {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: #6b7681;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-top: 10px;
    margin-bottom: 5px;
  }

  /* Qty + Waste side-by-side */
  .op-table tbody td:nth-child(4),
  .op-table tbody td:nth-child(5) {
    display: inline-block !important;
    width: 47% !important;
    vertical-align: top !important;
    box-sizing: border-box !important;
  }
  .op-table tbody td:nth-child(4) { margin-right: 6% !important; }

  /* Full-width inputs — prevent iOS auto-zoom with font-size 16px */
  .op-table .op-input,
  .op-table .op-input.narrow,
  .op-table .op-input.medium,
  .op-table .mat-select {
    width: 100% !important;
    font-size: 16px !important;
    min-height: 46px !important;
    padding: 10px 14px !important;
    border-radius: 9px !important;
    box-sizing: border-box !important;
  }

  /* Action button cell */
  .op-table tbody td:nth-child(8) {
    display: flex !important;
    justify-content: flex-end !important;
    padding-top: 12px !important;
    margin-top: 6px !important;
    border-top: 1px solid #1a1f26 !important;
  }
  .add-btn, .del-btn {
    width: 40px !important;
    height: 40px !important;
    font-size: 18px !important;
    border-radius: 9px !important;
  }

  .save-bar {
    padding: 10px 14px !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
  }
  .save-bar .btn {
    flex: 1 !important;
    justify-content: center !important;
    min-height: 44px !important;
  }

  /* ──────────────────────────────
     PAGE-HEADER PAGES
     (downtime, analytics, reports, lines)
  ────────────────────────────── */
  .page-header {
    padding: 12px 16px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
  }
  .header-right { gap: 8px !important; }
  .page-title { font-size: 18px !important; }
  .page-clock { padding: 7px 10px !important; font-size: 11px !important; }

  .content {
    padding: 14px !important;
    overflow: visible !important;
    flex: none !important;
    height: auto !important;
  }

  /* Downtime cards */
  .stop-card {
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 12px 14px !important;
  }
  .stop-line { min-width: unset !important; }
  .stop-times { flex: none !important; width: 100% !important; }
  .stop-dur { min-width: unset !important; }

  /* Tabs */
  .tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 0 !important;
    gap: 0 !important;
  }
  .tab {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    padding: 10px 14px !important;
    font-size: 12px !important;
  }

  /* Lines grid */
  .lines-grid {
    grid-template-columns: 1fr !important;
  }

  /* Analytics toolbar */
  .toolbar.analytics-toolbar, .content .toolbar {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }

  /* ──────────────────────────────
     SETTINGS PAGE
  ────────────────────────────── */
  .save-bar {
    padding: 10px 14px !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  .tab-bar {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .tab-btn {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    font-size: 12px !important;
    padding: 8px 12px !important;
  }
  .field-row { gap: 10px !important; }

  /* ──────────────────────────────
     MODALS
  ────────────────────────────── */
  .modal {
    width: calc(100vw - 24px) !important;
    max-width: unset !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    padding: 20px 16px !important;
    border-radius: 14px !important;
  }
  .form-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .form-field.full { grid-column: auto !important; }
  .form-input, .form-select {
    font-size: 16px !important;
    min-height: 46px !important;
    padding: 10px 12px !important;
  }
  .modal-actions { flex-wrap: wrap !important; gap: 8px !important; }
  .modal-actions .btn { flex: 1 !important; justify-content: center !important; min-height: 44px !important; }

  /* ──────────────────────────────
     GENERAL TOUCH IMPROVEMENTS
  ────────────────────────────── */
  .btn, .btn-green, .btn-outline, .btn-fill, .logout-btn {
    min-height: 40px !important;
  }
  .nav-item {
    padding: 11px 10px !important;
    min-height: 46px !important;
  }
  .notif-btn { width: 38px !important; height: 38px !important; }
}

/* ── LIGHT THEME for mobile elements ── */
[data-theme="light"] .mob-menu-btn {
  border-color: #dde1e7;
  color: #5a6372;
}
[data-theme="light"] .mob-menu-btn:hover { background: rgba(0,0,0,.04); }
[data-theme="light"] .sidebar-overlay { background: rgba(0,0,0,.4); }

@media (max-width: 768px) {
  [data-theme="light"] .op-table tbody tr { background: #ffffff !important; border-color: #dde1e7 !important; }
  [data-theme="light"] .op-table tbody tr.extra-row { background: #f4f5f7 !important; }
  [data-theme="light"] .op-table tbody td:nth-child(1) { border-bottom-color: #dde1e7 !important; }
  [data-theme="light"] .op-table tbody td:nth-child(9) { border-top-color: #dde1e7 !important; }
  [data-theme="light"] .op-table tbody td:nth-child(3)::before,
  [data-theme="light"] .op-table tbody td:nth-child(4)::before,
  [data-theme="light"] .op-table tbody td:nth-child(5)::before,
  [data-theme="light"] .op-table tbody td:nth-child(6)::before,
  [data-theme="light"] .op-table tbody td:nth-child(7)::before { color: #8a94a2; }
}