/* C16 Patient Flow — Settings polish on top of the shared Task-system shell.

   Loaded after settings-shell.css, so these rules win where the two overlap.
   Everything here is scoped to #view-settings except the glossary launcher, which
   is fixed to the viewport and overlapped the sidebar footer on every view. */

/* The shared shell reads its palette from --vs-* tokens that it declares on
   .vs-settings — a wrapper only the fully-rendered shell creates. C16 is tabified
   in place, so those tokens were never defined and every var(--vs-…) resolved to
   nothing: the tab bar lost its pills entirely and the active tab was marked by
   weight alone. Bind them to this dashboard's own tokens, which :root[data-theme=dark]
   already redefines, so the shell follows C16 in both themes. */
#view-settings{
  --vs-line:var(--line);
  --vs-surface:var(--card);
  --vs-brand:var(--teal);
  --vs-brand-soft:var(--teal2);
  --vs-muted:var(--muted);
  --vs-ink:var(--ink);
}

/* The shell shows one card at a time. The host's two-column grid would leave that
   card at half the 1096px column, so collapse the grid while the view is tabified. */
#view-settings.vs-tabified .settings-grid{display:block}
#view-settings.vs-tabified .settings-card{width:100%;margin:0}

/* "Roles & audit" and "Clinic operations" wrap cards that now live on their own
   tabs. Their section headings described a stack that is no longer on screen, so
   they were left stranded under the active card — drop the wrapper from the flow. */
#view-settings.vs-tabified .settings-extra{display:contents}
#view-settings.vs-tabified .settings-extra>.heading{display:none}

/* Eleven tab labels do not fit one row at 1096px: wrap them instead of clipping
   the last ones off the right edge with no scroll affordance. */
#view-settings .vs-tabs{flex-wrap:wrap;overflow:visible;row-gap:8px}
@media(max-width:760px){
  /* Too narrow to wrap without eating the viewport — keep the shell's scroller. */
  #view-settings .vs-tabs{flex-wrap:nowrap;overflow-x:auto}
}

/* User Accounts & RBAC is injected into the roles card, so drop its nested panel
   chrome: it should read as a section of that card, not a card inside a card. */
#view-settings .settings-card #uxAccountCard{margin:18px 0 0;padding:0;border:0;background:transparent;box-shadow:none}
#view-settings .settings-card #uxAccountCard>h2{margin:0 0 4px;font-size:17px}
#view-settings #uxAccountCard .field{display:block;margin-top:14px}
#view-settings #uxAccountCard .field select{width:100%;margin-top:6px}
#view-settings #uxAccountCard .ux-account-row select:disabled,
#view-settings #uxAccountCard .ux-account-row button:disabled{opacity:.55;cursor:not-allowed}

/* Create staff moves into the accounts card; keep it on its own line. */
#view-settings #staffList+.settings-card-actions{display:flex;justify-content:flex-end;margin-top:14px}

/* The sidebar editor rows the shell paints keep the host's own inputs, so give
   them the same focus ring as the rest of the form controls. */
#view-settings .vs-table input:focus-visible{outline:3px solid color-mix(in srgb,var(--teal) 45%,transparent);outline-offset:2px}

/* The glossary launcher is fixed at the viewport corner, on top of the sidebar
   footer. Clear the 232px rail on desktop and mirror it under RTL. */
/* beginner-help.css is linked further down the document, so match its
   specificity from the body element to win the cascade. */
[dir=rtl] body .beginner-glossary-launch{left:auto;right:18px}
@media(min-width:761px){
  body .beginner-glossary-launch{left:250px}
  [dir=rtl] body .beginner-glossary-launch{left:auto;right:250px}
}

/* The permission matrix uses native checkboxes, which stay bright white on the
   dark surface. Tint them with the brand accent so the grid reads in both themes. */
#view-settings #permissionMatrix input[type=checkbox],
#view-settings #managerToggle{accent-color:var(--teal)}