/* DSP Sentinel dashboard shell: the parts of the frame the shared stylesheet does not cover (ux-shell, 2026-10-01).
   Dashboard only: sentinel/public/index.html loads it after /assets/school.css. The design files (themes/*.css) load
   before school.css and use html[data-theme] selectors, so a design's own rule still wins where it sets the same
   property. Tokens and layout only: no literal colours. */

/* ---- Sidebar groups (Pedro's grouping, design-plugin F4): a labelled group's entries sit in their own element ---- */
.side-nav .sn-nav-group{display:grid;gap:inherit;min-width:0}

/* ---- Phone and tablet (the drawer and the top bar, up to 850px): every control the shell draws is at least 44px
   tall (lead brief 2026-10-01; Apple's 44pt). Measured before: menu 40, bell 38, Close 40, menu entries 36, Sign out
   31, Design and Language options 34-36. Desktop density is unchanged. ---- */
@media (max-width:850px){
  .sn-shell .mobile-toggle,.sn-shell .sidebar-close{min-width:44px;min-height:44px}
  .sn-shell .sn-bell{width:44px;height:44px}
  .sn-shell .sn-back{min-height:44px}
  .sn-shell .side-nav a,.sn-shell .sidebar-guide,.sn-shell .sidebar-brand,.sn-shell .sn-client{min-height:44px}
  .sn-shell .sn-switch{display:flex;align-items:center;min-height:44px;min-width:44px;margin-block:0}
  /* The same specificity as the shared stylesheet's sidebar switch rule (html:not([data-theme="lcars"]) …), which sets 34px. */
  html:not([data-theme="lcars"]) .sn-shell .sn-sidebar .sidebar-theme .theme-switch-option{min-height:44px}
  .sn-shell .school-links a{display:inline-flex;align-items:center;min-height:44px}
}

/* ---- The top bar's back link on a phone (design-plugin F16): "← Incidents" instead of "← Back to incidents", so the
   page name is not cut to "Repor…". The link's aria-label keeps the full words. ---- */
.sn-back-short{display:none}
@media (max-width:480px){
  .sn-back .sn-back-long{display:none}
  .sn-back .sn-back-short{display:inline}
  /* With a back link the shield steps out too, so "Report incident" fits beside the bell (the drawer has the brand). */
  html:not([data-theme="lcars"]) .sn-topbar:has(.sn-back) .sn-trail .sn-mark{display:none}
}
/* The smallest phones (360px wide): the back link is its arrow alone (its aria-label still says where it goes). */
@media (max-width:370px){
  .sn-back .sn-back-short{display:none}
  .sn-back{min-width:44px;justify-content:center}
}

/* ---- The user block: "Suggest a change" sits with Sign out and Change password (every width, every design) ---- */
.sn-shell .sn-user-actions{display:grid;justify-items:start;gap:0;margin:4px 0 12px}
.sn-shell .sn-user-actions .sn-switch{margin:0 6px}

/* ---- Installed app on a notched phone (Add to Home Screen; viewport-fit=cover in index.html): the page, the drawer,
   the floating button and the toast stay clear of the notch and the home indicator. env() is 0 everywhere else. ---- */
body{padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
/* Transparent borders, not padding, so each design keeps its own drawer padding (the drawer is fixed, so the body's
   padding does not reach it). */
@media (max-width:850px){
  .sn-shell .sidebar{border-left:env(safe-area-inset-left,0px) solid transparent;border-bottom:env(safe-area-inset-bottom,0px) solid transparent}
}
.fb-fab{margin-bottom:env(safe-area-inset-bottom,0px);margin-right:env(safe-area-inset-right,0px)}
.toast{margin-bottom:env(safe-area-inset-bottom,0px);margin-right:env(safe-area-inset-right,0px);margin-left:env(safe-area-inset-left,0px)}
body.fb-fab-on .workspace::after{height:calc(64px + env(safe-area-inset-bottom,0px))}

/* ---- One brand block at the top of the sidebar (design-plugin F24, 2026-10-01): the company's logo sits beside
   "DSP Sentinel / EHS Intelligence" in place of the orange shield, instead of a logo row of its own above it (about
   70px back on every page). The same artwork is already in the brand link (.sn-brand-logo); LCARS keeps it in the
   frame's elbow (lcars.css), so LCARS is left as it is. ---- */
@media (min-width:851px){
  html:not([data-theme="lcars"]) .sn-sidebar > .sn-company-logo--full{display:none}
  html:not([data-theme="lcars"]) .sn-sidebar .sidebar-brand:has(.sn-brand-logo){gap:10px}
  html:not([data-theme="lcars"]) .sn-sidebar .sidebar-brand img.sn-brand-logo{display:block;flex:none;width:66px;height:auto;padding:6px 7px;border-radius:var(--radius-sm);background:var(--logo-bg)}
}
/* Every width: the shield goes wherever the company logo is shown (the phone drawer keeps the logo on its own row,
   beside the Close button, with the product name under it). */
html:not([data-theme="lcars"]) .sn-sidebar .sidebar-brand:has(.sn-brand-logo) .sn-mark{display:none}

/* ---- A page that could not be opened (errorPage in sentinel.js): the reason, then Try again and Go back ---- */
.sn-error-page .error-box{max-width:720px}
.sn-error-actions{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0}
/* The top bar likewise shows one mark: between 521 and 850px it carries the company logo, so the shield beside it goes
   (wider screens hide that small logo, phones hide it, and the shield returns there). */
@media (min-width:521px) and (max-width:850px){
  html:not([data-theme="lcars"]) .sn-trail:has(.sn-company-logo--small) .sn-mark{display:none}
}

/* ---- Sign-in hero: balanced lines up to tablet width, so "OSHA-ready" is not split at its hyphen there (S14; wider,
   the unbalanced three lines already keep it whole, and balancing them would split it) ---- */
@media (max-width:900px){.login-headline{text-wrap:balance}}

/* ---- Assign a course to many (sentinel.js openAssign): people, a site or a department, then one Assign ---- */
.sn-assign-who{border:0;padding:0;margin:0;min-width:0}
.sn-assign-who legend{padding:0;margin:0 0 8px;font-size:12px;font-weight:600}
.sn-assign-modes{display:flex;flex-wrap:wrap;gap:8px}
.sn-assign-modes .sn-assign-mode{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:0;padding:8px 14px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);font-size:13px;font-weight:500;cursor:pointer}
.sn-assign-modes .sn-assign-mode:has(input:checked){border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.sn-assign-modes .sn-assign-mode input{width:16px;height:16px;min-height:0;margin:0;padding:0;flex:none;accent-color:var(--control-accent, var(--accent))}
.sn-assign-list{max-height:min(320px,42vh);overflow:auto;margin-top:8px;border:1px solid var(--line);border-radius:var(--radius-sm)}
.sn-assign-list .sn-assign-person{display:flex;align-items:flex-start;gap:10px;min-height:44px;margin:0;padding:9px 12px;border-bottom:1px solid var(--line);font-size:13px;font-weight:500;cursor:pointer}
.sn-assign-list .sn-assign-person:last-child{border-bottom:0}
.sn-assign-list .sn-assign-person[hidden]{display:none}
.sn-assign-list .sn-assign-person input{width:16px;height:16px;min-height:0;margin:3px 0 0;padding:0;flex:none;accent-color:var(--control-accent, var(--accent))}
.sn-assign-list .sn-assign-person small{display:block;margin-top:2px;color:var(--text-muted);font-size:12px;font-weight:400}
.sn-assign-count{margin:4px 0 0}

/* ---- "Open training" under the menu (every role): the guide link's look, spaced from the last menu entry ---- */
.sn-sidebar .sn-open-training{margin:14px 0 0}

/* ---- unassign 2026-10-14: Remove beside Review on a class nobody has started (Training courses tables) ---- */
.school-page td.table-action .ua-remove{margin-left:8px}