/* Phone and small tablet layout. Loaded last so it wins over the desktop rules. */
.mobile-menu { display: none; }
.mobile-menu svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.nav-backdrop { position: fixed; inset: 0; z-index: 55; background: rgba(15, 23, 42, .45); }
.profile-mini .profile-layer { display: block; margin-top: 2px; font-style: normal; font-size: 11px; font-weight: 600; color: #4f46e5; }
.dark .profile-mini .profile-layer { color: #a5b4fc; }
/* The layer is shown under the name now, so the old view switcher and its gear are gone. */
.admin-mode-controls { display: none !important; }

@media (max-width: 860px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  .mobile-menu { display: inline-grid; place-items: center; flex: none; }
  #collapse, .desktop-only { display: none !important; }

  /* Sidebar slides in over the page */
  .sidebar { width: min(86vw, 304px) !important; z-index: 60; transform: translateX(-104%); transition: transform .2s ease; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  body.nav-open .sidebar { transform: none; box-shadow: 0 0 44px rgba(15, 23, 42, .35); }
  body.nav-open { overflow: hidden; }
  .main-content { margin-left: 0 !important; }
  .sidebar .nav-link { min-height: 46px; font-size: 15px; }

  /* Top bar */
  .topbar { gap: 8px; height: 60px; padding: 0 12px; }
  .topbar .search { min-width: 0; height: 40px; }
  .topbar .search input { min-width: 0; width: 100%; font-size: 16px; }
  .topbar .search kbd { display: none; }
  .top-actions { gap: 6px; flex: none; }
  .topbar .icon-button { width: 40px; height: 40px; flex: none; }

  /* Page */
  .page { padding: 20px 14px 96px !important; }
  .page-heading { flex-wrap: wrap; align-items: flex-start; gap: 12px; }
  .page-heading > div { min-width: 0; flex: 1 1 220px; }
  .page-heading h1 { font-size: 24px; overflow-wrap: anywhere; }
  .heading-actions { display: flex !important; flex-wrap: wrap; gap: 8px; width: 100%; }
  .heading-actions > * { flex: 1 1 auto; }
  .panel-heading { flex-wrap: wrap; gap: 10px; }
  .panel-heading > div { min-width: 0; flex: 1 1 200px; }
  .panel, .metric-card, section, article { min-width: 0; }

  /* Anything laid out in columns stacks */
  .attendance-layout, .company-layout, .attendance-time-pair, .policy-grid, .dialog-fields, .task-member-picker, .company-access, .wiki-link-form, .task-filter-layout, .task-project-filters-box, .forecast-grid, .general-task-graphs, .task-summary-donuts, .overview-scoreboard-metrics, .project-directory-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .analytics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .attendance-layout > *, .company-layout > *, .company-list > *, .company-detail > * { min-width: 0; }
  .company-brand-row { flex-wrap: wrap; }
  .attendance-today { flex-direction: column; align-items: stretch; }
  .attendance-week-nav { width: 100%; }
  .attendance-week-nav button { flex: 1; }

  /* Wide tables scroll inside their own box, never the page */
  .attendance-table-wrap, .review-table-scroll, .task-table-scroll, .org-canvas, .org-chart-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .attendance-table { min-width: 560px; }
  .panel > .data-table, .panel .data-table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .attendance-tabs, .wiki-kind-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; scrollbar-width: none; }
  .attendance-tabs::-webkit-scrollbar, .wiki-kind-tabs::-webkit-scrollbar { display: none; }
  .attendance-tab, .wiki-kind-tabs button { flex: none; white-space: nowrap; }

  /* Controls are finger sized, and 16px text stops iOS zooming into fields */
  .page input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .page select, .page textarea, .auth-card input, dialog input, dialog select, dialog textarea, .s47-chat input, .s47-chat textarea { font-size: 16px !important; min-height: 42px; }
  .page .primary-button, .page .secondary-button, dialog .primary-button, dialog .secondary-button { min-height: 44px; }
  .page .text-button { min-height: 36px; padding-top: 6px; padding-bottom: 6px; }
  .org-search-label, #org-search, .project-search-filter, .project-search-filter input { width: 100%; max-width: 100%; min-width: 0; }

  /* Wiki */
  .wiki-toolbar { flex-direction: column; align-items: stretch; }
  .wiki-toolbar > *, .wiki-toolbar label, .wiki-toolbar select, .wiki-toolbar input { width: 100%; min-width: 0; max-width: 100%; }
  #wiki-folder-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .wiki-folder-gallery { grid-template-columns: minmax(0, 1fr) !important; }
  .wiki-access { flex-direction: column; align-items: stretch; }
  .wiki-file { flex-wrap: wrap; }

  /* Tasks: each task is a card with its fields stacked, not a wide table row */
  .task-table-scroll { overflow: visible; }
  .task-table-head { display: none !important; }
  .task-record, .task-project-add-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; grid-auto-flow: row; min-width: 0 !important; gap: 10px 12px !important; padding: 14px 12px !important; align-items: center; }
  .task-record > .task-work-name, .task-project-add-row > .task-inline-title { grid-column: 1 / -1; }
  .task-record > .task-work-name button { font-size: 15px; text-align: left; white-space: normal; }
  .task-record > .task-assignee-cell { grid-column: 1 / -1; justify-content: flex-start; }
  .task-record > .task-chat-cell { justify-self: end; }
  .task-record > .task-status-select { width: 100%; min-height: 40px; font-size: 14px !important; }
  .task-record .task-cell-edit { min-height: 36px; text-align: left; }
  .task-record > .task-work-type::before { content: "Type"; }
  .task-record > .task-reviewer-cell::before { content: "Reviewer"; }
  .task-record > .task-work-type::before, .task-record > .task-reviewer-cell::before { display: block; margin-bottom: 2px; font: 600 10px/1.2 Inter, system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
  .task-record > .task-work-type, .task-record > .task-reviewer-cell { display: block; }
  .task-due-week i { width: 18px; height: 18px; font-size: 10px; }
  .task-due-cell > small { font-size: 11px; }
  .task-half-icon { width: 28px; height: 28px; }
  .task-project-add-row > * { min-width: 0; }
  .task-project-add-row > span:empty { display: none; }
  .task-project-add-row .task-add-field { min-height: 42px; }
  .task-add-due { grid-column: 1 / -1; }
  .task-project-group > header { flex-wrap: wrap; gap: 10px; }
  .task-project-group > header strong { font-size: 20px !important; overflow-wrap: anywhere; }
  .task-filter-row, .task-filter-row-compact, .task-results-toolbar { flex-wrap: wrap; }
  .task-filter-row > label, .task-filter-row-compact > label { flex: 1 1 140px; min-width: 0; }
  .task-filter-row select, .task-filter-row-compact select, .task-project-filters-box select { width: 100%; min-width: 0; }

  /* Reviews keep their table but it scrolls inside the card */
  .review-table-head, .review-task-row { min-width: 900px; }

  /* Dialogs and the chat drawer fit the screen */
  dialog { width: calc(100vw - 20px); max-width: calc(100vw - 20px); max-height: calc(100dvh - 20px); overflow: auto; }
  #chat-drawer { left: 0 !important; right: 0 !important; width: 100vw !important; max-width: 100vw !important; }
  .s47-chat { width: 100% !important; max-width: 100% !important; }
  .task-half-menu { max-width: calc(100vw - 24px); }
  .doptor-toast, .doptor-sync { max-width: calc(100vw - 24px); }
  .auth-card { padding: 22px; }
}

@media (max-width: 420px) {
  .analytics-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .topbar .search span { display: none; }
}

@media (max-width: 860px) {
  /* Task filters: one control per row so labels never collide */
  .task-filter-layout label, .task-filter-row label, .task-filter-row-compact label, .task-project-filters-box label { flex: 1 1 100% !important; width: 100%; min-width: 0; }
  .task-filter-layout select, .task-filter-layout input { width: 100% !important; min-width: 0; }
  .task-filter-row, .task-filter-row-compact { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .task-filter-row > label:first-child, .task-filter-row-compact > label:first-child { grid-column: 1 / -1; }
  .task-results-toolbar > * { min-width: 0; }
  .task-results-toolbar input { flex: 1 1 160px; min-width: 0; }
  .attendance-table { min-width: 480px; }
  /* Company and profile forms */
  .company-brand-row > div { flex: 1 1 200px; min-width: 0; }
  .page input[type="file"] { max-width: 100%; min-width: 0; width: 100%; }
  .company-card small { white-space: normal; }
  .company-access-edit form { min-width: 0; }
}

@media (max-width: 860px) {
  /* Task card order: name, assignees, then type beside reviewer, then due date beside status */
  .task-record { position: relative; }
  .task-record > .task-work-name { order: 0; padding-right: 36px; }
  .task-record > .task-assignee-cell { order: 1; flex-wrap: wrap; row-gap: 6px; height: auto; white-space: normal; }
  .task-record > .task-work-type { order: 2; }
  .task-record > .task-reviewer-cell { order: 3; }
  .task-record > .task-due-merged { order: 4; }
  .task-record > .task-status-select { order: 5; }
  .task-record > .task-chat-cell { order: 6; position: absolute; top: 12px; right: 10px; }
  .task-record > .task-work-type strong { margin-right: 6px; }
}