/* mobile.css — owned by its module; see layouts/app.blade.php
   B14: small-screen pass 2 + accessibility. Loaded AFTER app.css on every page (app layout, auth
   pages, portal, setup wizard), so an equal-specificity rule here wins. Sections:
     1. colour tokens re-tuned for WCAG AA text contrast (both themes)
     2. global a11y: focus rings, skip link, sr-only, reduced motion
     3. phones (<= 760px): stacked tables, full-screen drawers, one-column forms, tap targets
     4. client portal + auth pages on phones
   ======================================================================================== */

/* ---------- 1. contrast ----------
   Measured against app.css :root / html[data-theme="dark"] (ratios = before -> after):
   light --muted  #8a8378 on #fff 3.75 / on ground 3.59 / on well 3.32  ->  #6f685e 5.50 / 5.27 / 4.87
   light --red    #e5484d as text on #fff 3.91, white-on-red pill 3.91  ->  #c8302e 5.36 / 5.36
   light --green  #16a34a white-on-green pill 3.30, text on green-bg 2.95 -> #166534 7.13 / 6.38
   light --orange #ea6a17 white-on-orange pill 3.20                     ->  #c2410c 5.18 (on orange-bg 4.55)
   light --slate  #64748b text on slate-bg 4.20                          ->  #556274 5.48 (white pill 6.20)
   light --blue   #4361ee text on blue-bg 4.27                           ->  #3451d1 5.51 (white pill 6.47)
   dark  --muted  #7c8390 on card 4.42 / on card-soft 4.17               ->  #98a0ad 6.40 / 7.11 on ground
   dark  accent-as-text #ca3832 on card 3.31                             ->  --accent-text #ef7a74 6.19
   dark  white text on pastel pills (green 2.34, orange 2.30, pink 2.80, violet 2.81, slate 3.09,
         red 3.17, blue 3.23)                                            ->  ink text #0f1218: 8.02 / 8.17 / 6.69 / 6.67 / 6.06 / 5.91 / 5.81
   Unchanged (already >= 4.5): light pill-blue 5.02, pill-violet 5.70, pill-pink 4.60, pill-slate 4.76,
   pill-yellow 6.69; dark pill-yellow 7.53; --ink-soft 9.31 / 8.83. */
:root {
  --muted: #6f685e;
  --red: #c8302e;
  --green: #166534;
  --orange: #c2410c;
  --slate: #556274;
  --blue: #3451d1;
  --accent-text: var(--accent);
}
html[data-theme="dark"] {
  --muted: #98a0ad;
  --accent-text: #ef7a74;
}
/* accent used as TEXT in the dark theme (buttons keep --accent as a background with white text) */
html[data-theme="dark"] :is(.tab-active, .vtab-active, .sidebar nav a.active, .th-arrow, .f-link, .chip-accent, .expand-open,
  .kb-node-active .kb-node-title, .chat-chan-active, .tbar-on, .pop-active, .pop-dir, .window-date em, .chat-quote strong,
  .mention-item strong, .react-mine span, .chip-new, .drawer-proj:hover, .card-title:hover, .pname a:hover, .tf-name:hover) { color: var(--accent-text); }
html[data-theme="dark"] a:hover { color: var(--accent-text); }
/* dark theme pills / tag chips: the pastel fills need ink text, not white */
html[data-theme="dark"] :is(.pill-slate, .pill-green, .pill-orange, .pill-red, .pill-pink, .pill-blue, .pill-violet,
  .tag-red, .tag-orange, .tag-green, .tag-blue, .tag-violet, .tag-pink, .tag-slate) { color: #0f1218; }
/* portal "On hold" status: amber text on amber-bg was 1.92 */
.portal-status-on_hold { color: #b45309; }
html[data-theme="dark"] .portal-status-on_hold { color: #eab758; }

/* ---------- 2. global accessibility ---------- */
/* one visible keyboard focus ring everywhere (mouse clicks keep the quieter :focus styles) */
:where(a, button, input, select, textarea, summary, [tabindex], [role="button"], [role="menuitem"]):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px;
}
/* app.css sets pale #e9c2c0 / none outlines on :focus for these — restore the accent ring for keyboard users */
.login-card input:focus-visible, .search-input:focus-visible, .qa-title:focus-visible, .pf-input:focus-visible, .psearch-input:focus-visible,
.f-grid :is(input, select, textarea):focus-visible, .tx-title:focus-visible, .tag-new-name:focus-visible, .portal-compose textarea:focus-visible,
.ws-select:focus-visible, .status-select:focus-visible, .tx-input:focus-visible, .tl-edit:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); box-shadow: none;
}
.skip-link {
  position: absolute; left: 10px; top: -80px; z-index: 10001; padding: 10px 16px; border-radius: 10px;
  background: var(--card); color: var(--ink); border: 2px solid var(--accent); font-weight: 650; font-size: 14px;
  text-decoration: none; box-shadow: 0 8px 30px rgba(0, 0, 0, .25); transition: top .12s ease;
}
.skip-link:focus, .skip-link:focus-visible { top: 10px; outline: none; }
#main:focus { outline: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* the task drawer is a dialog: hide the page behind it from assistive tech while it is open */
.task-drawer { outline: none; }
/* motion: respect the OS setting — no topline sweep, no slide-ins, no intro choreography */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .nav-topline, .nav-topline.on { display: none; }
  .nav-topline.on i { animation: none; }
  .lg-ripple { display: none; }
  .task-drawer { animation: none; }
}

/* ---------- 3. phones ---------- */
@media (max-width: 760px) {
  html, body { overflow-x: hidden; max-width: 100%; }
  .content > * { min-width: 0; max-width: 100%; }
  img, svg, canvas, video { max-width: 100%; }
  pre { white-space: pre-wrap; word-break: break-word; }
  .topbar-side { gap: 8px; }
  .search-form { flex: 1 1 100%; }
  .content { padding: 12px 12px 48px; gap: 14px; }
  .panel { padding: 14px 12px; }
  .panel-head { flex-wrap: wrap; gap: 6px; }
  .modal { width: 100%; max-width: 100vw; padding: 16px 14px; border-radius: 12px; }
  .cols-modal { width: 100%; }

  /* --- tables -> stacked cards. Cells read their heading from data-label (set in the blades). --- */
  .table-scroll { overflow-x: visible; }
  .top-scroll { display: none !important; }
  :is(.ttable, .ptable, .people-table, .rep-table, .psum-table, .team-table, .notif-table, .aud-tbl, .wb-table, .ck-table) {
    display: block; min-width: 0; width: 100%; border-spacing: 0; overflow: visible;
  }
  :is(.ttable, .ptable, .people-table, .rep-table, .psum-table, .team-table, .notif-table, .aud-tbl, .wb-table, .ck-table) thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; /* still read by screen readers */
  }
  :is(.ttable, .ptable, .people-table, .rep-table, .psum-table, .team-table, .notif-table, .aud-tbl, .wb-table, .ck-table) :is(tbody, tr) { display: block; width: 100%; }
  :is(.ttable, .ptable, .people-table, .rep-table, .psum-table, .team-table, .notif-table, .aud-tbl, .wb-table, .ck-table) tr {
    border: 1px solid var(--line); border-radius: 12px; padding: 6px 12px; margin: 0 0 10px; background: var(--card);
  }
  :is(.ttable, .ptable, .people-table, .rep-table, .psum-table, .team-table, .notif-table, .aud-tbl, .wb-table, .ck-table) tr.group-row { border: none; background: none; padding: 10px 4px 4px; margin: 0; }
  :is(.ttable, .ptable, .people-table, .rep-table, .psum-table, .team-table, .notif-table, .aud-tbl, .wb-table, .ck-table) td {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border: none; border-bottom: 1px solid var(--line-soft);
    min-width: 0; width: auto !important; max-width: none; white-space: normal; text-align: left !important;
  }
  :is(.ttable, .ptable, .people-table, .rep-table, .psum-table, .team-table, .notif-table, .aud-tbl, .wb-table, .ck-table) td:last-child { border-bottom: none; }
  :is(.ttable, .ptable, .people-table, .rep-table, .psum-table, .team-table, .notif-table, .aud-tbl, .wb-table, .ck-table) td[data-label]::before {
    content: attr(data-label); flex: 0 0 36%; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin: 0;
  }
  :is(.ttable, .ptable, .people-table, .rep-table, .psum-table, .team-table, .notif-table, .aud-tbl, .wb-table, .ck-table) td[colspan] { display: block; }
  /* the row's "name" cell is the card title: full width, no label */
  :is(.ttable, .ptable, .people-table, .rep-table, .psum-table, .team-table, .notif-table, .aud-tbl, .wb-table, .ck-table) td[data-label="Task"],
  :is(.ttable, .ptable, .people-table, .rep-table, .psum-table, .team-table, .notif-table, .aud-tbl, .wb-table, .ck-table) td.is-title { display: block; padding-top: 8px; }
  :is(.ttable, .ptable, .people-table, .rep-table, .psum-table, .team-table, .notif-table, .aud-tbl, .wb-table, .ck-table) td[data-label="Task"]::before,
  :is(.ttable, .ptable, .people-table, .rep-table, .psum-table, .team-table, .notif-table, .aud-tbl, .wb-table, .ck-table) td.is-title::before { content: none; }
  .ttable .tl-name { font-size: 15px; white-space: normal; }
  .tcol-drag, .td-caret, .th-rz { display: none !important; }
  .tcol-check { display: flex; }
  .ck-table tr { display: block; }
  .ck-table td { display: flex; }
  .ck-table td[data-label]::before { display: inline; margin: 0; }
  .ptable .prow { cursor: default; }
  .people-table .pt-actions { flex-wrap: wrap; justify-content: flex-start; white-space: normal; }
  .people-table .pt-actions form { display: inline-flex; }
  .people-table .pt-user { max-width: none; }
  .psum-table .psum-c-tasks .mix-bar { width: 100%; }
  .team-table .mix-bar { width: 100%; }
  .notif-table td.notif-col { justify-content: space-between; }
  .rep-table td.num { padding-left: 0; }
  .wb-scroll { overflow: visible; }

  /* --- kanban: one lane, one column per swipe (app.css already snaps 82vw columns) --- */
  .board { scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 14px; margin: 0 -12px; padding-left: 12px; padding-right: 12px; }
  .board-col-wrap { min-width: 86vw; width: 86vw; }
  .board-full { min-height: 50vh; }
  .card { cursor: default; }
  .card-addppl, .card-date-empty { opacity: 1; }         /* hover-revealed controls are always visible on touch */
  .card-addppl { width: 24px; height: 24px; }
  .tboard-lane-head { position: sticky; left: 0; }

  /* --- task drawer (and the other slide-overs): full screen --- */
  .task-drawer { width: 100vw; max-width: 100vw; border-left: none; box-shadow: none; animation: none; }
  .drawer-head { padding: 12px 12px; gap: 8px; }
  .drawer-body { padding: 14px 12px 24px; }
  .tx-actions { position: sticky; bottom: -24px; margin: 8px -12px 0; padding: 10px 12px; background: var(--card); border-top: 1px solid var(--line); z-index: 2; justify-content: stretch; }
  .tx-actions .btn-primary, .tx-actions .btn-ghost { flex: 1 1 auto; }
  .brief-drawer, .bn-drawer { width: 100vw; max-width: 100vw; }
  .tx-grid, .tx-grid-3, .tx-extras { grid-template-columns: 1fr; }
  .tx-link-row { flex-wrap: wrap; }
  .asg-pop { width: 100%; }

  /* --- forms: one column, full-width controls --- */
  .f-grid, .pa-grid, .two-col, .two-col-rev { grid-template-columns: 1fr !important; }
  .quick-add, .tasks-bar .quick-add { align-items: stretch; flex-wrap: wrap; flex: 1 1 100%; min-width: 0; max-width: 100%; margin-left: 0; }
  .quick-add .qa-title, .quick-add .qa-title-sm { flex: 1 1 100%; min-width: 0; }
  .quick-add .qa-select, .quick-add .qa-date, .quick-add .qa-narrow { flex: 1 1 45%; width: auto; min-width: 0; }
  .quick-add .btn-primary { flex: 1 1 100%; }
  .tfilters { gap: 8px; }
  .tfilters .tf { flex: 1 1 45%; min-width: 0; }
  .tfilters select, .tf select { width: 100%; max-width: 100%; }
  .tv-row { flex-wrap: wrap; gap: 8px; }
  .tv-cols { margin-left: 0; }
  .tasks-bar { flex-wrap: wrap; gap: 8px; }
  .rp-bar { flex-direction: column; align-items: stretch; }
  .rp-export { flex-wrap: wrap; margin-left: 0; }
  .rp-ranges { flex-wrap: wrap; }
  .aud-filters > * { flex: 1 1 45%; min-width: 0; }
  .aud-filters .search-input { flex-basis: 100%; }
  .dh-filters { flex-wrap: wrap; margin-left: 0; }
  .dh-filters > * { flex: 1 1 45%; min-width: 0; }
  .sowidx-head, .cl-head { flex-direction: column; align-items: stretch; }
  .cl-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .chat-wrap { height: auto; }
  .invite-copy { flex-wrap: wrap; }
  .invite-copy input { flex: 1 1 100%; min-width: 0; }
  .te-actions, .tx-actions, .modal-actions { flex-wrap: wrap; }

  /* --- tap targets: 44px for primary actions --- */
  .btn-primary, .btn-ghost, .btn-inline, .btn-danger, .tbar-btn, .board-add-btn, .tl-addbtn, .tl-bulk-btn, .ws-join, .st-add, .lv-newtask, .kb-cover-btn, .btn-edit {
    min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  }
  .btn-primary:not(.btn-inline) { width: 100%; }
  .chip, .tab, .vt, .rp-range, .chan-item, .vtab { min-height: 44px; display: inline-flex; align-items: center; }
  .tab-row, .view-toggle { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .nav-burger, .back-btn, .help-btn, .flash-x, .bn-x, .rp-nav { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; }
  .bell { min-width: 44px; min-height: 44px; }
  .sidebar nav a, .nav-more-btn { min-height: 44px; }
  .sidebar-foot .linkish { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; }
  .ws-card, .ws-opt, .ws-new, .foot-user { min-height: 44px; }
  .cellbtn { min-height: 40px; }
  .status-select, .tx-input, select, input[type="date"], input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="url"], input[type="number"] { min-height: 44px; }
  .ttable .status-select { max-width: 100%; }
  .card-prio, .card-date, .js-link { min-width: 36px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; }
  .st-dotpick, .tag-dot { width: 28px; height: 28px; }
  .pf-swatch { min-width: 36px; min-height: 36px; }
  .tag-x, .dep-x, .he-del, .st-del, .chk-x, .chat-act { min-width: 32px; min-height: 32px; display: inline-flex; align-items: center; justify-content: center; }

  /* --- workspace switcher (sidebar foot) fits the 272px drawer --- */
  .ws-pop { left: 0; right: 0; max-height: 60vh; }
  .ws-opt { width: 100%; }
  .ws-opt-name, .ws-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .sidebar-foot { padding: 10px 12px; }

  /* --- timeline / gantt: scroll inside its own box, never the page --- */
  .g2-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tl-hrow, .tl-row { min-width: 0; }
}

/* ---------- 4. portal + auth pages ---------- */
.login-h1 { font-size: 18px; font-weight: 750; letter-spacing: -.2px; margin: 0 0 6px; color: var(--ink); line-height: 1.3; }
h1.login-sub { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0 0 14px; line-height: 1.35; }
h1.sw-title { margin: 10px 0 2px; }
.login-card label { cursor: pointer; }
.login-card select { width: 100%; min-height: 40px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 13.5px; background: var(--card-soft); color: var(--ink); }
.portal-skip { position: absolute; }
@media (max-width: 760px) {
  .login-card { width: 100%; max-width: 420px; padding: 24px 18px 22px; }
  .lgx { width: 100%; max-width: calc(100vw - 32px); }
  .login-card .btn-primary, .portal-btn { min-height: 46px; }
  .login-card input { min-height: 44px; font-size: 16px; }
  .portal-top { padding: 10px 14px; }
  .portal-main { padding: 16px 14px 40px; }
  .portal-head { flex-direction: column; align-items: stretch; }
  .portal-head h1 { font-size: 22px; }
  .portal-btn-ghost, .portal-signout, .portal-file-dl { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .portal-file-dl { min-width: 44px; }
  .portal-msg { max-width: 100%; }
  .portal-compose-foot { flex-wrap: wrap; }
  .portal-compose-foot .portal-btn { flex: 1 1 100%; }
  .portal-prose { padding: 16px 14px; font-size: 15px; }
  .portal-grid { grid-template-columns: 1fr; }
  .sw-card { padding: 16px 12px; }
  .sw-steps { flex-wrap: wrap; }
}

/* ---- My Work rows on phones: the title comes first (UI-4, 16 Oct fix) ----
   At 390px the ref, tags, project, stage pill and date kept their width and the title (the only flexible part)
   collapsed to "STP-6 C…" or nothing. Under 600px a row is two lines: stage dot + title (up to 2 lines), then
   ref · project · date, with at most one tag and the badges after it. The stage name stays in the DOM (visually
   hidden) so screen readers still hear it; the dot keeps the stage colour. Markup: mywork.blade.php .my-trow. */
@media (max-width: 600px) {
  .my-trow { flex-wrap: wrap; align-items: center; column-gap: 6px; row-gap: 3px; padding: 10px 4px; }
  .my-trow .my-stage { order: 1; flex: none; align-self: flex-start; width: 9px; height: 9px; margin-top: 6px; padding: 0; border-radius: 50%; }
  .my-trow .my-stage-txt { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .my-trow .fu-ico { order: 1; flex: none; align-self: flex-start; width: 18px; font-size: 13px; line-height: 20px; }
  .my-trow .trow-title { order: 2; flex: 1 1 calc(100% - 24px); min-width: 0; white-space: normal; overflow: hidden; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; font-size: 14px; line-height: 1.35; font-weight: 550; }
  .my-trow .my-ref { order: 3; margin-left: 15px; }                 /* under the title text: dot 9px + gap 6px */
  .my-fu .my-proj { margin-left: 24px; }                             /* follow-ups: under the title, past the 📞 */
  /* the project takes what is left of line 2 and truncates (a wrapping row would otherwise push the date down) */
  .my-trow .my-proj { order: 4; flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .my-trow .my-ref ~ .my-proj::before { content: "·"; margin-right: 6px; color: var(--muted); font-weight: 400; }
  .my-trow .trow-due { order: 5; flex: none; min-width: 0; margin-left: auto; text-align: right; }
  .my-trow .blk-badge { order: 6; }
  .my-trow .my-tags { order: 7; flex: none; max-width: 100%; }
  .my-trow .my-tags .tag-chip ~ .tag-chip { display: none; }         /* at most one tag on a phone */
  .my-trow .wait-badge { order: 8; margin-left: 0; }
}