/* ══════════════════════════════════════════════════════════════
   ALP PLATFORM — mobile.css
   Loaded via sidebar.css on every page.
   Rules here ONLY activate at mobile breakpoints — the desktop
   experience is completely unchanged.
   ══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   BREAKPOINTS
   ≤ 1024px  tablet — sidebar collapses to overlay
   ≤ 768px   large phone / small tablet
   ≤ 480px   phone portrait
   ═══════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────
   1. GLOBAL — applies everywhere at ≤ 768px
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px), (max-width: 1024px) and (max-height: 500px) and (pointer: coarse) {

  /* ── SCROLL FIX: ensure content scrolls on mobile ── */
  /* Sidebar is position:fixed on mobile so body flex layout isn't needed */
  #main:not(:has(#msg-layout)):not(:has(.msg-layout)) {
    height: auto !important; min-height: 100vh;
    overflow-y: auto !important; overflow-x: hidden;
  }
  #page-content, #hr-content, #hub-content, #content {
    overflow-y: auto !important; min-height: 0;
    -webkit-overflow-scrolling: touch;
  }
  /* Settings/admin sections — long forms need to scroll */
  .settings-section { overflow: visible !important; }

  /* Touch target floors */
  button, [role="button"], a, select,
  .sb-link, .nav-item, .client-tab, .updates-tab,
  .settings-tab-btn, .hr-tab-btn, .filter-archive-btn,
  .crm-type-pill, .sortable-th { min-height: 44px; }

  /* Inline small buttons get a bigger tap zone without changing look */
  .btn-sm, .btn-icon, .update-del, .da-del-btn,
  .upd-staged-remove { min-height: 36px; min-width: 36px; }

  /* ── Topbar — consistent 1 or 2-row layout ── */
  #topbar {
    height: auto !important;
    min-height: 48px;
    padding: 8px 12px !important;
    gap: 6px 8px !important;
    flex-wrap: wrap;
    z-index: 10;
  }
  .tb-left  { min-width: 0; flex: 1; overflow: visible; }
  .tb-right {
    display: flex; align-items: center;
    flex-wrap: nowrap; gap: 6px !important;
    flex-shrink: 0;
  }
  #page-title, #topbar h1 {
    font-size: 16px !important;
    overflow: hidden; text-overflow: ellipsis;
  }
  .tb-subtitle { display: none; }   /* too cramped on mobile */

  /* Hamburger — always accessible, always visible on mobile */
  .sb-toggle {
    display: flex !important;
    position: relative;
    z-index: 11; /* above topbar siblings */
  }

  /* Primary action buttons — compact on mobile */
  #topbar .btn-primary {
    font-size: 11px !important;
    padding: 6px 10px !important;
    white-space: nowrap;
  }

  /* Search — always drops to full-width second row */
  .tb-search {
    order: 10;
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100%;
  }

  /* Icon buttons — consistent size */
  #topbar .btn-icon { min-width: 36px; min-height: 36px; }

  /* Notification controls group */
  .notif-controls { display: flex; align-items: center; gap: 2px; flex-shrink: 0; margin-left: auto; }

  /* ── Modals — full-width bottom-sheet on mobile ── */
  /* Exclude alp-dialog-overlay (system alerts/confirms) — those stay centred */
  .modal-overlay:not(#alp-dialog-overlay),
  .modal-overlay.open:not(#alp-dialog-overlay) {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  /* The modal panel itself */
  .modal-overlay:not(#alp-dialog-overlay) .modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92dvh !important;
    border-radius: 18px 18px 0 0 !important;
    padding: 20px 16px max(24px, env(safe-area-inset-bottom)) !important;
    margin: 0 !important;
  }
  /* Drag handle visual */
  .modal-overlay:not(#alp-dialog-overlay) .modal::before {
    content: '';
    display: block;
    width: 40px; height: 4px;
    background: var(--border-primary, #e5e7eb);
    border-radius: 2px;
    margin: -8px auto 14px;
  }
  /* alp-dialog stays centred, just gets wider */
  #alp-dialog-overlay .alp-dlg {
    width: calc(100% - 24px) !important;
    max-width: 100% !important;
  }
  .modal-title { font-size: 16px !important; }

  /* Modal form rows — always stack on mobile */
  .modal-row {
    flex-direction: column !important;
    gap: 0 !important;
  }
  .modal-row .modal-field { flex: none !important; width: 100%; }

  /* Modal action buttons — full-width stacked */
  .modal-actions {
    flex-direction: column-reverse !important;
    gap: 10px !important;
  }
  .modal-actions .btn-primary,
  .modal-actions .btn-secondary,
  .modal-actions .btn-danger {
    width: 100% !important;
    text-align: center;
    padding: 12px 16px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
  }

  /* ── Data tables — horizontal scroll ── */
  .data-table-wrap, .ticket-list-wrap, .hr-table-wrap,
  [style*="overflow-x:auto"] { -webkit-overflow-scrolling: touch; }

  .data-table { font-size: 12px !important; }
  .data-table th, .data-table td { padding: 8px 10px !important; white-space: nowrap; }

  /* ── Stat rows ── */
  .stat-row {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 12px !important;
  }
  .stat-row .stat-card {
    flex: 1 1 calc(50% - 8px) !important;
    min-width: 120px;
    padding: 12px !important;
  }
  .stat-value { font-size: 20px !important; }
  .stat-label { font-size: 10px !important; }

  /* ── Generic card grids ── */
  .card-grid, .client-grid, .team-grid,
  .sop-grid, .contact-chips {
    grid-template-columns: 1fr !important;
  }

  /* ── Input / select sizing ── */
  input, select, textarea {
    font-size: 16px !important;   /* prevents iOS zoom on focus */
    border-radius: 8px;
  }
  input[type="checkbox"], input[type="radio"] {
    width: 20px !important; height: 20px !important;
    flex-shrink: 0;
  }
}

/* ──────────────────────────────────────────────────────────────
   2. TASK BOARD
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px), (max-width: 1024px) and (max-height: 500px) and (pointer: coarse) {

  /* ── Taskboard topbar: clean layout ── */
  body:has(#board-page) #topbar {
    flex-wrap: wrap;
  }
  body:has(#board-page) .tb-right {
    display: flex; align-items: center;
    gap: 6px; flex-wrap: nowrap;
  }

  /* Hide member pips on mobile — accessible via board ⋯ menu */
  #board-member-pips { display: none !important; }

  /* View toggle — compact */
  .vt-btn { font-size: 11px !important; padding: 4px 8px !important; }
  .tb-view-toggle { gap: 2px; }

  /* Add task button — compact */
  #add-task-btn { font-size: 12px !important; padding: 6px 12px !important; }

  /* Task table — freeze task name col, scroll rest */
  #page-content .table-wrap,
  #page-content > div[style*="overflow"] {
    -webkit-overflow-scrolling: touch;
  }

  /* Task detail drawer — full width stack on small screens */
  .detail-drawer {
    flex-direction: column !important;
    width: 100% !important;
    height: 92dvh !important;
    top: auto !important;
    bottom: 0 !important;
    right: 0 !important;
    border-radius: 18px 18px 0 0;
    overflow: hidden;
  }
  /* Only scope these inside .detail-drawer (taskboard) not tickets detail-panel */
  .detail-drawer .detail-panel {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 55% !important;
    border-left: none !important;
    border-bottom: 1px solid var(--border-primary) !important;
    padding: 16px !important;
    overflow-y: auto;
  }
  .updates-panel {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 45% !important;
    border-left: none !important;
    flex: 1;
    min-height: 0;
  }
  .detail-meta-grid {
    grid-template-columns: 80px 1fr !important;
    gap: 6px !important;
  }
  .detail-title-input { font-size: 15px !important; }

  /* Updates composer */
  .updates-composer { padding: 8px 12px !important; }
  .updates-composer-actions { padding: 4px 8px 6px !important; }
  .updates-send-btn { padding: 8px 14px !important; font-size: 13px !important; }
  .updates-attach-btn { width: 36px !important; height: 36px !important; }
  .upd-att-img { max-width: 200px !important; max-height: 150px !important; }

  /* Board content — enough bottom padding to clear the fixed search bar */
  #board-table-view,
  #board-kanban-view,
  #board-gantt-view {
    padding-bottom: 100px !important;
  }

  /* Kanban — horizontal scroll, narrower cards */
  .kanban-wrap { gap: 8px !important; padding: 12px !important; }
  .kanban-col  { flex: 0 0 220px !important; max-width: 260px !important; }

  /* Kanban — close button easy to tap */
  .detail-overlay .detail-close,
  [onclick*="closeDetail"], [onclick*="closeModal"],
  button[title*="Close"], button[title*="close"] {
    min-width: 44px; min-height: 44px;
  }

  /* ── Mobile Task Cards ── */
  .mc-client-section {
    margin: 0 8px 16px 8px;
    border-radius: 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    overflow: hidden;
  }
  .mc-client-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mc-client-name { font-size: 14px; font-weight: 700; }
  .mc-client-count { font-size: 11px; font-weight: 600; color: var(--text-muted); }

  /* ── Card ── */
  .mc-card {
    display: flex; flex-direction: column; gap: 6px;
    padding: 12px 14px;
    border-top: 1px solid var(--border-subtle);
    -webkit-tap-highlight-color: transparent;
  }
  .mc-card-done { opacity: .5; }

  /* Top row: status + priority + menu */
  .mc-card-top {
    display: flex; align-items: center; gap: 6px;
  }
  .mc-status {
    display: inline-flex; align-items: center;
    padding: 2px 8px; border-radius: 4px;
    font-size: 10px; font-weight: 700; color: #fff;
    white-space: nowrap; cursor: pointer;
  }
  .mc-priority-pill {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10px; font-weight: 600; cursor: pointer;
  }
  .mc-priority-dot {
    width: 7px; height: 7px; border-radius: 50%;
    flex-shrink: 0; display: inline-block;
  }
  .mc-card-menu {
    margin-left: auto; padding: 4px 8px;
    font-size: 16px; font-weight: 800; letter-spacing: 1px;
    color: var(--text-dim); cursor: pointer;
    border-radius: 4px; line-height: 1;
  }
  .mc-card-menu:active { background: var(--bg-hover); }

  /* Title */
  .mc-title {
    font-size: 14px; font-weight: 600; line-height: 1.35;
    color: var(--text-primary);
    word-break: break-word; cursor: pointer;
  }
  .mc-title:active { color: var(--blue); }

  /* Tags: project + team */
  .mc-tags {
    display: flex; flex-wrap: wrap; gap: 4px;
  }
  .mc-tag {
    display: inline-flex; padding: 2px 8px;
    border-radius: 4px; font-size: 10px; font-weight: 600;
    border: 1px solid var(--border-primary);
    background: var(--bg-tertiary); color: var(--text-secondary);
    white-space: nowrap;
  }
  .mc-tag-project { background: var(--blue-subtle, #eff6ff); color: var(--blue); border-color: rgba(37,99,235,.2); }

  /* Info rows: owner, dates, estimate */
  .mc-info {
    display: flex; flex-direction: column; gap: 4px;
    font-size: 12px; color: var(--text-secondary);
  }
  .mc-info-row {
    display: flex; align-items: center; gap: 8px;
  }
  .mc-info-label {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--text-dim);
    min-width: 40px; flex-shrink: 0;
  }
  .mc-owners { display: flex; flex-wrap: wrap; gap: 6px; }
  .mc-owner {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; font-weight: 500;
  }
  .mc-avatar {
    width: 20px; height: 20px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 7px; font-weight: 700; color: #fff; flex-shrink: 0;
  }
  .mc-dates { display: flex; align-items: center; gap: 4px; font-size: 12px; }
  .mc-date { white-space: nowrap; }
  .mc-date.overdue { color: var(--red, #dc2626); font-weight: 600; }
  .mc-date.today { color: var(--blue); font-weight: 600; }

  /* Bottom bar: chips for notes + subtasks */
  .mc-bottom {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding-top: 2px;
  }
  .mc-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: 6px;
    font-size: 11px; font-weight: 600;
    background: var(--bg-tertiary); color: var(--text-muted);
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .mc-chip:active { background: var(--bg-hover); }
  .mc-chip-subs { background: var(--blue-subtle, #eff6ff); color: var(--blue); }
  .mc-sub-arrow {
    display: inline-block; font-size: 8px;
    transition: transform .2s;
  }
  .mc-sub-arrow.open { transform: rotate(90deg); }

  /* ── Subtask expansion panel ── */
  .mc-subs-panel {
    border-top: 1px solid var(--border-subtle);
    margin-top: 4px; padding-top: 6px;
  }
  .mc-sub-item {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 0; font-size: 13px;
    border-bottom: 1px solid var(--border-subtle);
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .mc-sub-item:last-of-type { border-bottom: none; }
  .mc-sub-item:active { background: var(--bg-hover); margin: 0 -14px; padding-left: 14px; padding-right: 14px; }
  .mc-sub-done { opacity: .5; }
  .mc-sub-done .mc-sub-title { text-decoration: line-through; }
  .mc-sub-check {
    font-size: 16px; width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; cursor: pointer; border-radius: 4px;
  }
  .mc-sub-check:active { background: var(--bg-hover); }
  .mc-sub-title {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; color: var(--text-primary);
  }
  .mc-sub-due {
    font-size: 10px; color: var(--text-dim);
    white-space: nowrap; flex-shrink: 0;
  }
  .mc-sub-due.overdue { color: var(--red); font-weight: 600; }
  .mc-sub-due.today { color: var(--blue); font-weight: 600; }
  .mc-sub-add { padding: 6px 0; }
  .mc-sub-add-input {
    width: 100%; padding: 7px 10px;
    border: 1px dashed var(--border-primary);
    border-radius: 6px; font-size: 12px;
    background: transparent; color: var(--text-muted);
    font-family: inherit;
  }
  .mc-sub-add-input:focus {
    border-style: solid; border-color: var(--blue);
    color: var(--text-primary); outline: none;
  }

  /* ── Quick add + Done section ── */
  .mc-add-row {
    padding: 8px 14px;
    border-top: 1px solid var(--border-subtle);
  }
  .mc-add-input {
    width: 100%; padding: 8px 10px;
    border: 1px dashed var(--border-primary);
    border-radius: 6px; font-size: 13px;
    background: transparent; color: var(--text-muted);
    font-family: inherit;
  }
  .mc-add-input:focus {
    border-style: solid; border-color: var(--blue);
    color: var(--text-primary); outline: none;
  }
  .mc-done-header {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 14px;
    font-size: 12px; font-weight: 600; color: var(--text-dim);
    cursor: pointer;
    border-top: 1px solid var(--border-subtle);
    -webkit-tap-highlight-color: transparent;
  }
  .mc-done-label { color: var(--green, #059669); }
  .mc-done-count {
    background: var(--bg-tertiary); padding: 1px 8px;
    border-radius: 10px; font-size: 10px; font-weight: 700;
  }
  .mc-actions {
    display: flex; gap: 8px; padding-top: 4px;
  }
  .mc-action-btn {
    font-size: 11px; padding: 4px 10px;
    border: 1px solid var(--border-primary);
    border-radius: 6px; background: var(--bg-secondary);
    color: var(--text-secondary); font-family: inherit;
    cursor: pointer;
  }
  .mc-action-btn:active { background: var(--bg-hover); }
  .mc-action-danger { color: var(--red, #dc2626); border-color: var(--red, #dc2626); }
}

/* ──────────────────────────────────────────────────────────────
   3. CRM
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Stat cards — 2 cols */
  .crm-filter-bar {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 8px 12px !important;
    gap: 8px !important;
  }
  .crm-type-pills { flex-wrap: wrap; gap: 4px; }
  .crm-type-pill  { font-size: 11px !important; padding: 5px 12px !important; }
  .crm-filter-select { font-size: 12px !important; }

  /* CRM table — horizontal scroll container */
  #page-content [style*="padding:0 24px"],
  #page-content > div > div[style*="padding"] { padding: 0 8px !important; }

  /* Client detail header */
  .client-detail-header { padding: 14px 12px !important; }
  .cd-top { gap: 10px !important; flex-wrap: wrap; }
  .cd-name { font-size: 16px !important; }
  .cd-stats { flex-wrap: wrap !important; gap: 8px 16px !important; font-size: 10px !important; }
  .cd-avatar, .cd-logo { width: 40px !important; height: 40px !important; font-size: 15px !important; }

  /* Action buttons in detail header — scroll */
  .client-detail-header > div > div:last-child {
    display: flex;
    flex-wrap: wrap !important;
    gap: 6px !important;
    justify-content: flex-start !important;
  }
  .client-detail-header .btn-sm { font-size: 11px !important; padding: 6px 10px !important; }

  /* Client tabs — scroll horizontally */
  .client-tabs {
    padding: 0 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap !important;
  }
  .client-tabs::-webkit-scrollbar { display: none; }
  .client-tab { white-space: nowrap !important; padding: 12px 14px !important; font-size: 12px !important; }
  .client-tab-content { padding: 12px !important; }

  /* CRM pipeline — columns scroll */
  .pipeline-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

  /* RAGG tab */
  .ragg-history-table th, .ragg-history-table td { padding: 6px 8px !important; font-size: 12px !important; }

  /* Sortable table headers */
  .sortable-th { white-space: nowrap; font-size: 11px !important; }
}

/* ──────────────────────────────────────────────────────────────
   4. TICKETS
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Detail panel slides up full screen */
  .detail-panel {
    width: 100% !important;
    max-width: 100% !important;
    top: 6dvh !important;
    border-radius: 18px 18px 0 0;
    overflow-y: auto;
  }
  .detail-header { padding: 16px !important; }
  .detail-section { padding: 12px 16px !important; }
  .detail-meta-grid { grid-template-columns: 90px 1fr !important; }

  .ticket-list-wrap { padding: 0 8px !important; }
  .ticket-item { padding: 12px !important; }
}

/* ──────────────────────────────────────────────────────────────
   5. HR
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #hr-content  { padding: 14px !important; }
  #hub-content { padding: 14px !important; }

  .hr-page-header { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }
  .hr-page-header .btn-primary { width: 100%; text-align: center; }

  .hr-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .hub-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }

  /* HR tables — scroll */
  .hr-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .hr-table { font-size: 12px !important; }
  .hr-table th, .hr-table td { padding: 8px 10px !important; white-space: nowrap; }

  /* HR tabs */
  .hr-tabs, .hub-tabs, [id*="hr-tab-bar"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap !important;
  }
  .hr-tabs::-webkit-scrollbar { display: none; }
  .hr-tab-btn, .hub-tab-btn { white-space: nowrap !important; font-size: 12px !important; padding: 10px 14px !important; }

  /* Leave calendar */
  .hr-hol-calendar { gap: 1px !important; }
  .hr-hol-day { font-size: 9px !important; }

  /* Org chart — scroll */
  .org-root-row { gap: 20px !important; overflow-x: auto; }

  /* Review form */
  .hr-review-form { gap: 12px !important; }
}

/* ──────────────────────────────────────────────────────────────
   6. ADMIN
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #page-content { padding: 0 !important; }

  .settings-section { padding: 12px !important; }
  .settings-card    { padding: 14px !important; }
  .settings-row     { grid-template-columns: 1fr !important; gap: 10px !important; }

  /* Admin table scroll */
  .admin-table-wrap,
  .settings-card > table { overflow-x: auto; display: block; }
  .admin-table { font-size: 12px !important; }

  /* Settings tab bar — scroll */
  .settings-tab-bar {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap !important;
    padding-bottom: 2px;
  }
  .settings-tab-bar::-webkit-scrollbar { display: none; }
  .settings-tab-btn { white-space: nowrap !important; font-size: 12px !important; padding: 10px 14px !important; }

  /* Role grid */
  .role-grid { grid-template-columns: 1fr !important; padding: 12px !important; }

  /* Integrations tab — button rows wrap */
  .settings-card-title { flex-wrap: wrap !important; gap: 8px !important; }
  .settings-card-title > div { flex-wrap: wrap !important; gap: 4px !important; }
  .settings-card-title .btn-secondary { font-size: 10px !important; padding: 5px 8px !important; }

  /* Health dashboard — stat grids */
  .health-grid { grid-template-columns: 1fr !important; }
}

/* ──────────────────────────────────────────────────────────────
   7. ANALYTICS / REPORTS
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #content { padding: 12px !important; }

  .kpi-row   { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .chart-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .chart-panel { padding: 14px !important; min-height: 220px !important; }
  .kpi-value { font-size: 22px !important; }

  /* Analytics filter bar — scoped to analytics page */
  body:has(#analytics-content) #topbar .tb-right { width: 100%; }
  .analytics-filters { flex-wrap: wrap !important; gap: 6px !important; }
}

/* ──────────────────────────────────────────────────────────────
   8. CALENDAR
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #page-content { padding: 0 !important; }

  .cal-wb {
    max-height: calc(100dvh - 160px) !important;
  }
  /* Cal grid — compress day columns */
  .cal-grid-header span, .cal-day-label { font-size: 11px !important; }
  .cal-event { font-size: 10px !important; padding: 1px 4px !important; }

  .cal-modal-inner, .modal { border-radius: 18px 18px 0 0 !important; }
}

/* ──────────────────────────────────────────────────────────────
   9. TIME TRACKING
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .main-content { padding: 14px !important; }

  /* Timer bar */
  .tt-timer-bar, [class*="timer-bar"] {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }
  .tt-timer-display { font-size: 28px !important; }

  /* Time entry rows */
  .tt-row { grid-template-columns: 1fr !important; gap: 8px !important; }

  /* Report section */
  .tt-report-grid { grid-template-columns: 1fr !important; }

  /* Time tracking modal */
  .modal .tt-row { grid-template-columns: 1fr !important; }
}

/* ──────────────────────────────────────────────────────────────
   10. CC METRICS
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .metrics-tab-bar, [id*="metrics-tabs"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap !important;
  }
  .metrics-tab-bar::-webkit-scrollbar { display: none; }

  .metrics-kpi-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Heatmap — scroll */
  .heatmap-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .heatmap-cell { min-width: 28px !important; min-height: 28px !important; font-size: 9px !important; }

  .col-mapper-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .col-mapper-grid .col-header {
    grid-template-columns: 1fr !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   11. DIAL ANALYSIS
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .da-card { padding: 16px !important; border-radius: 12px !important; }
  .da-step-header { gap: 10px !important; }
  .da-step-num { width: 32px !important; height: 32px !important; font-size: 15px !important; }

  /* Upload zones */
  .da-upload-zone { padding: 20px 14px !important; }

  /* Parameters form */
  .da-form-grid { grid-template-columns: 1fr !important; }
  .da-rules-table { font-size: 12px !important; }
  .da-rules-table th, .da-rules-table td { padding: 6px 8px !important; }
  .da-input--sm  { width: 70px !important; }
  .da-input--time { width: 100px !important; }

  /* Equation row — stack on very small screens */
  .da-equation-row { flex-wrap: wrap !important; }
  .da-eq-cell { flex: 1 1 calc(50% - 2px) !important; padding: 12px 8px !important; }
  .da-eq-val  { font-size: 22px !important; }
  .da-eq-op   { padding: 0 6px !important; font-size: 18px !important; flex-basis: 100%; justify-content: center; }

  /* KPI row */
  .da-kpi-row { grid-template-columns: repeat(2, 1fr) !important; }

  /* Results tables */
  .da-results-table { font-size: 12px !important; }
  .da-results-header { flex-direction: column !important; gap: 10px !important; }
  .da-download-btn { width: 100% !important; }

  /* Wizard steps — compact */
  .da-wizard-steps { gap: 2px !important; }
  .da-wstep-lbl { display: none; }   /* show only number on narrow screens */
  .da-wizard-step { padding: 6px 10px !important; }
  .da-wizard-sep { padding: 0 !important; font-size: 12px; }

  /* Actions */
  .da-actions { flex-direction: column-reverse !important; }
  .da-actions .btn-primary,
  .da-actions .btn-secondary { width: 100% !important; text-align: center; padding: 12px !important; }
}

/* ──────────────────────────────────────────────────────────────
   12. SLIDES / DECKS
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .slides-layout { flex-direction: column !important; }
  .slides-sidebar { width: 100% !important; max-width: 100% !important; height: 180px !important; border-right: none !important; border-bottom: 1px solid var(--border-primary) !important; }
  .slides-module-list { flex-direction: row !important; overflow-x: auto !important; padding: 8px !important; }
}

/* ──────────────────────────────────────────────────────────────
   13. MESSAGES
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .msg-layout { flex-direction: column !important; height: calc(100dvh - 52px) !important; }
  .msg-sidebar { width: 100% !important; max-height: 160px !important; border-right: none !important; border-bottom: 1px solid var(--border-primary) !important; overflow-y: auto; }
  .msg-main { flex: 1; min-height: 0; }
  .msg-input-row { padding: 8px !important; }
}

/* ──────────────────────────────────────────────────────────────
   14. MAIL
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Email compose toolbar */
  .em-bar { flex-wrap: wrap; gap: 2px; }
  .em-editor { max-height: 160px !important; }
  .em-field-row { flex-direction: column !important; gap: 0 !important; }
}

/* ──────────────────────────────────────────────────────────────
   15. WORKFLOWS
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .wf-layout { flex-direction: column !important; }
  .wf-sidebar { width: 100% !important; max-height: 200px !important; border-right: none !important; border-bottom: 1px solid var(--border-primary) !important; }
  .wf-content { padding: 10px !important; }
  .wf-step-row { flex-direction: column !important; gap: 6px !important; }

  /* Builder modal — full-screen on mobile */
  .wf-builder { width: 100% !important; max-width: 100% !important; max-height: 100dvh !important; border-radius: 0 !important; }
  .wf-builder-body { padding: 14px !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; }
  .wf-section-grid { grid-template-columns: 1fr !important; }
  .wf-action-row { flex-direction: column !important; gap: 6px !important; }
}

/* ──────────────────────────────────────────────────────────────
   16. KB / SOPs / TRAINING
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .content-wrap { padding: 12px !important; }
  .sop-grid, .kb-grid, .training-grid { grid-template-columns: 1fr !important; }
  .sop-doc-view { padding: 12px !important; }
  .sop-doc-header { flex-direction: column !important; gap: 8px !important; }
  .sop-doc-header-acts { flex-wrap: wrap; }
}

/* ──────────────────────────────────────────────────────────────
   17. NOTIFICATIONS PANEL
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .notif-panel {
    width: 100vw !important;
    right: 0 !important;
    left: 0 !important;
    border-radius: 0 0 12px 12px !important;
  }
  .notif-full-list { max-height: 50dvh !important; }
}

/* ──────────────────────────────────────────────────────────────
   18. PHONE PORTRAIT — tightest breakpoint ≤ 480px
   ────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {

  /* Stat cards — single column */
  .stat-row .stat-card { flex: 1 1 100% !important; }
  .hr-stats, .hub-stats, .da-kpi-row { grid-template-columns: 1fr !important; }
  .kpi-row { grid-template-columns: 1fr 1fr !important; }

  /* Larger touch targets */
  .client-tab, .updates-tab { padding: 12px 12px !important; }

  /* Modal — less padding, full height if needed */
  .modal { max-height: 96dvh !important; padding: 16px 12px 20px !important; }

  /* Task detail — more vertical space for updates */
  .detail-panel { max-height: 45% !important; }
  .updates-panel { max-height: 55% !important; }

  /* CRM table — only show key columns (handled by overflow-x scroll) */
  #page-content { padding: 0 !important; }
  .client-detail-header { padding: 10px !important; }
  .cd-name { font-size: 15px !important; }

  /* Topbar — hide subtitle always */
  .tb-subtitle { display: none !important; }
  #page-title { font-size: 15px !important; }

  /* Equation row — all cells equal 50% */
  .da-eq-cell { flex: 1 1 calc(50% - 4px) !important; }

  /* Wizard — number only */
  .da-wstep-lbl { display: none !important; }
}

/* ──────────────────────────────────────────────────────────────
   19. SAFE AREAS — notch / home indicator
   ────────────────────────────────────────────────────────────── */
@supports (padding: max(0px)) {
  @media (max-width: 768px) {
    #topbar {
      padding-top: max(8px, env(safe-area-inset-top)) !important;
    }
    /* Sidebar */
    #sidebar {
      padding-bottom: max(0px, env(safe-area-inset-bottom));
    }
    /* Bottom composers/toolbars */
    .updates-composer,
    .msg-input-row,
    .da-actions,
    .modal-actions {
      padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
    }
  }
}

/* ──────────────────────────────────────────────────────────────
   20. TOUCH EXPERIENCE
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Remove hover underlines / colour shifts that don't work on touch */
  .sb-link:hover { background: none; color: inherit; }
  .sb-link.active { background: var(--bg-active, rgba(37,99,235,.07)); color: var(--blue, #2563eb); }

  /* Fast tap — remove 300ms delay on interactive elements only
     (applying to all elements breaks scroll on overflow containers) */
  button, a, [role="button"], label, select,
  .sb-link, .client-tab, .updates-tab, .kanban-card,
  .task-row, .ticket-item, .crm-type-pill, .sortable-th,
  .settings-tab-btn, .card, .sb-grp-hdr { touch-action: manipulation; }

  /* Prevent text selection on buttons */
  button, [role="button"] { user-select: none; -webkit-user-select: none; }

  /* Scrollable areas — momentum scrolling on iOS */
  #page-content, #content, #hr-content, #hub-content,
  .updates-feed, .sb-nav, .kanban-col-body,
  .detail-panel, .updates-panel,
  .ticket-list-wrap, .modal, .notif-full-list {
    -webkit-overflow-scrolling: touch;
  }


  /* Active state for tap feedback (replaces hover on touch) */
  .btn-primary:active  { opacity: .82 !important; }
  .btn-secondary:active { background: var(--bg-hover) !important; }
  .sb-link:active      { background: var(--bg-hover) !important; }
  .task-row:active td  { background: var(--bg-hover) !important; }
  .kanban-card:active  { transform: scale(.98) !important; box-shadow: none !important; }
  .client-tab:active   { background: var(--bg-hover) !important; }
}