/* doc 174: Manrope and Azeret Mono are linked from sfHead - res/fonts/manrope-azeret.css - not imported from Google */

/* ===========================================================================
   hcm.css - Humly Console component layer
   Direction B, per the "HCP Account Redesign" mock.
   Loads AFTER adminlte.min.css and hcm-tokens.css.
   Tokens live in hcm-tokens.css; this file is components only.
   =========================================================================== */

:root{
  --hy-ground:#F2EEE5; --hy-surface:#FFFCF4; --hy-surface-2:#FFFFFF; --hy-sunk:#EFECE4;
  --hy-ink:#1C1B1F; --hy-ink-2:#57544E; --hy-ink-3:#8D8B89;
  --hy-line:#E4DFD3; --hy-line-2:#D3CDBE;
  --hy-teal:#2E9598; --hy-teal-bright:#56B3B5; --hy-teal-wash:#E3F2F2;
  --hy-olive:#5C6151; --hy-earth:#B28160; --hy-gold:#D7A24F;
  --hy-ok:#3C7D68; --hy-ok-wash:#E2EFE9;
  --hy-warn:#9A6A15; --hy-warn-wash:#F6EBD5;
  --hy-crit:#AE4530; --hy-crit-wash:#F6E3DE;
  --hy-info:#2E9598; --hy-info-wash:#E3F2F2;
  --hy-shell:#23241F; --hy-shell-2:#2C2E27; --hy-shell-ink:#E5E1D6;
  --hy-shell-ink-2:#9A968B; --hy-shell-line:#3A3C33;
  --hy-r:4px; --hy-r-lg:8px;
  --hy-mono:"Azeret Mono",ui-monospace,SFMono-Regular,Consolas,monospace;
  --hy-sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
}

body{ font-family:var(--hy-sans); background:var(--hy-ground); color:var(--hy-ink); }

/* --- shell ------------------------------------------------------------- */
.app-sidebar{ background-color:var(--hy-shell) !important; color:var(--hy-shell-ink-2); }
.app-sidebar .nav-link{ color:var(--hy-shell-ink-2); font-size:12.5px; font-weight:500;
  border-inline-start:2px solid transparent; border-radius:0; }
.app-sidebar .nav-link.active,.app-sidebar .nav-link:hover{
  color:var(--hy-shell-ink); background:var(--hy-shell-2);
  border-inline-start-color:var(--hy-teal-bright); box-shadow:none; }
.app-sidebar .nav-link.active .nav-icon{ color:var(--hy-teal-bright); }
.app-sidebar .nav-treeview{ background:var(--hy-shell-2); }
.app-sidebar .sidebar-brand,.app-sidebar .brand-link{
  background:var(--hy-shell); border-bottom:1px solid var(--hy-shell-line); }

.app-header{ background:var(--hy-surface) !important; border-bottom:1px solid var(--hy-line); box-shadow:none; }
.app-main{ background:var(--hy-ground); }
.app-footer{ background:var(--hy-surface); border-top:1px solid var(--hy-line);
  color:var(--hy-ink-3); font-size:11.5px; }

/* --- cards: AdminLTE's coloured headers are the single biggest off-brand
       element on a data screen. Flatten every variant to paper + hairline. --- */
.card{ background:var(--hy-surface); border:1px solid var(--hy-line);
  border-radius:var(--hy-r-lg); box-shadow:none; margin-bottom:14px; }
.card > .card-header,
.card-primary:not(.card-outline) > .card-header,
.card-secondary:not(.card-outline) > .card-header,
.card-info:not(.card-outline) > .card-header,
.card-success:not(.card-outline) > .card-header,
.card-warning:not(.card-outline) > .card-header,
.card-danger:not(.card-outline) > .card-header,
.card-dark:not(.card-outline) > .card-header{
  background:var(--hy-surface) !important; color:var(--hy-ink) !important;
  border-bottom:1px solid var(--hy-line); border-radius:var(--hy-r-lg) var(--hy-r-lg) 0 0;
  padding:11px 16px; }
.card > .card-header .card-title{ font-size:13.5px; font-weight:700; color:var(--hy-ink); }
.card > .card-header .btn-box-tool,.card > .card-header .btn-tool{ color:var(--hy-ink-3); }
.card-body{ padding:16px; }
.card-footer{ background:var(--hy-surface); border-top:1px solid var(--hy-line); padding:12px 16px; }

/* --- buttons ----------------------------------------------------------- */
.btn{ font-weight:600; font-size:12.5px; border-radius:var(--hy-r); }
.btn-primary{ background:var(--hy-teal); border-color:var(--hy-teal); color:#fff; }
.btn-primary:hover,.btn-primary:focus{ background:#1F7B7E; border-color:#1F7B7E; }
.btn-secondary{ background:var(--hy-surface-2); border-color:var(--hy-line-2); color:var(--hy-ink); }
.btn-danger{ background:transparent; border-color:var(--hy-line-2); color:var(--hy-crit); }
.btn-danger:hover{ background:var(--hy-crit-wash); border-color:var(--hy-line-2); color:var(--hy-crit); }

/* --- form controls ------------------------------------------------------ */
.form-control,.form-select{ border-color:var(--hy-line-2); border-radius:var(--hy-r);
  font-size:12.5px; background:var(--hy-surface-2); color:var(--hy-ink); }
.form-control:focus,.form-select:focus{ border-color:var(--hy-teal);
  box-shadow:0 0 0 3px rgba(46,149,152,.16); }

/* --- tables ------------------------------------------------------------- */
.table{ font-size:12.5px; color:var(--hy-ink); }
.table > thead > tr > th{ font-family:var(--hy-mono); font-size:10px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--hy-ink-3);
  border-bottom:1px solid var(--hy-line-2); white-space:nowrap; padding:8px 12px; }
.table > tbody > tr > td{ padding:9px 12px; border-bottom:1px solid var(--hy-line);
  vertical-align:top; }
.table > tbody > tr:last-child > td{ border-bottom:0; }
.table td.t,.table td.num{ font-family:var(--hy-mono); font-size:11.5px;
  color:var(--hy-ink-3); white-space:nowrap; font-variant-numeric:tabular-nums; }

/* ===========================================================================
   Direction B components
   =========================================================================== */

.hy-mono{ font-family:var(--hy-mono); font-variant-numeric:tabular-nums; }
.hy-lbl{ font-family:var(--hy-mono); font-size:10px; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:var(--hy-ink-3); }

/* chips - state, in mono, never a pill */
.hy-chip{ display:inline-flex; align-items:center; gap:5px; font-family:var(--hy-mono);
  font-size:10.5px; font-weight:500; letter-spacing:.05em; text-transform:uppercase;
  padding:4px 8px; border-radius:3px; background:var(--hy-sunk); color:var(--hy-ink-2);
  border:1px solid transparent; white-space:nowrap; }
.hy-chip.ok{ background:var(--hy-ok-wash); color:var(--hy-ok); }
.hy-chip.warn{ background:var(--hy-warn-wash); color:var(--hy-warn); }
.hy-chip.crit{ background:var(--hy-crit-wash); color:var(--hy-crit); }
.hy-chip.info{ background:var(--hy-info-wash); color:var(--hy-info); }
.hy-dot{ width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }

/* identity band */
.hy-hero{ padding:20px 24px 0; background:var(--hy-surface); }
.hy-idrow{ display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap; }
.hy-mark{ width:44px; height:44px; border-radius:var(--hy-r-lg); background:var(--hy-teal-wash);
  color:var(--hy-teal); display:grid; place-items:center; font:700 15px/1 var(--hy-sans);
  flex:none; border:1px solid rgba(46,149,152,.25); }
.hy-title{ min-width:0; flex:1; }
.hy-title h1{ font-size:22px; font-weight:700; margin:0; letter-spacing:-.015em; color:var(--hy-ink); }
.hy-meta{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-top:5px;
  font-size:12px; color:var(--hy-ink-3); }
.hy-meta .hy-mono{ color:var(--hy-ink-2); }
.hy-acts{ display:flex; gap:7px; align-items:flex-start; flex-wrap:wrap; }
.hy-tools{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-top:16px;
  padding-bottom:12px; border-bottom:1px solid var(--hy-line); }
.hy-tools .hy-spacer{ flex:1; }

/* telemetry tiles */
.hy-tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(112px,1fr));
  border:1px solid var(--hy-line); border-radius:var(--hy-r-lg); overflow:hidden;
  background:var(--hy-line); gap:1px; margin-bottom:20px; }
.hy-tile{ background:var(--hy-surface); padding:12px 14px; }
.hy-tile .v{ font-family:var(--hy-mono); font-size:21px; font-weight:500; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; display:flex; align-items:baseline; gap:5px; color:var(--hy-ink); }
.hy-tile .v small{ font-size:10.5px; color:var(--hy-ink-3); font-weight:400; letter-spacing:0; }
.hy-tile .k{ font-size:11px; color:var(--hy-ink-3); margin-top:2px; }

/* contract strip */
.hy-term{ display:flex; align-items:center; gap:12px; padding:12px 14px;
  border:1px solid var(--hy-line); border-radius:var(--hy-r-lg); background:var(--hy-sunk);
  margin-bottom:18px; flex-wrap:wrap; }
.hy-term .bar{ flex:1; min-width:160px; height:6px; border-radius:3px;
  background:var(--hy-line-2); overflow:hidden; position:relative; }
.hy-term .bar i{ position:absolute; inset:0 auto 0 0;
  background:linear-gradient(90deg,var(--hy-teal-bright),var(--hy-teal)); border-radius:3px; }
.hy-term .ends{ font-family:var(--hy-mono); font-size:11px; color:var(--hy-ink-3);
  font-variant-numeric:tabular-nums; }

/* panels - a rule-and-label heading instead of a boxed card */
.hy-panel{ margin-bottom:22px; }
.hy-panel > h3{ display:flex; align-items:center; gap:9px; font-size:11px;
  font-family:var(--hy-mono); font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--hy-ink-3); margin:0 0 10px; }
.hy-panel > h3::after{ content:""; flex:1; height:1px; background:var(--hy-line); }
.hy-panel > h3 .act{ font-family:var(--hy-sans); font-size:11.5px; letter-spacing:0;
  text-transform:none; color:var(--hy-teal); font-weight:600; cursor:pointer; }

/* spec sheet - replaces the boxed label/value form */
.hy-spec{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:0 30px; }
.hy-spec .row{ display:grid; grid-template-columns:118px 1fr; gap:10px; padding:7px 0;
  border-bottom:1px solid var(--hy-line); align-items:baseline; margin:0; }
.hy-spec .row .k{ font-size:12px; color:var(--hy-ink-3); }
.hy-spec .row .v{ font-size:12.5px; font-weight:600; min-width:0; overflow-wrap:anywhere;
  color:var(--hy-ink); }
.hy-spec .row .v.empty{ font-weight:400; color:var(--hy-ink-3); }
.hy-spec .row .v .sub{ display:block; font-weight:400; font-size:11px;
  color:var(--hy-ink-3); margin-top:1px; }
.hy-spec .row .v .form-control,.hy-spec .row .v .form-select{ font-weight:400; }

/* flag strip - booleans and non-default settings, promoted to the header */
.hy-flags{ display:inline-flex; align-items:center; gap:4px; flex-wrap:wrap; margin-inline-start:6px; }
.hy-flag{ display:inline-flex; align-items:center; gap:4px; white-space:nowrap;
  font-family:var(--hy-mono); font-size:10px; font-weight:500; letter-spacing:.07em;
  text-transform:uppercase; padding:4px 7px; border-radius:3px;
  border:1px solid var(--hy-line-2); background:transparent; color:var(--hy-ink-3); }
.hy-flag.on{ border-color:transparent; background:var(--hy-ok-wash); color:var(--hy-ok); }
.hy-flag.attn{ border-color:transparent; background:var(--hy-warn-wash); color:var(--hy-warn); }
.hy-flag.off{ color:var(--hy-ink-3); text-decoration:line-through;
  text-decoration-thickness:1px; opacity:.75; }

/* rich-text well - full width, capped height, own scroll */
.hy-notes{ margin-top:16px; padding-top:14px; border-top:1px solid var(--hy-line); }
.hy-notes > .hy-lbl{ display:flex; align-items:center; gap:8px; margin-bottom:7px; }
.hy-notes > .hy-lbl .act{ margin-inline-start:auto; font-family:var(--hy-sans); font-size:11.5px;
  letter-spacing:0; text-transform:none; color:var(--hy-teal); font-weight:600; cursor:pointer; }
.hy-rt{ background:var(--hy-sunk); border:1px solid var(--hy-line); border-radius:var(--hy-r);
  padding:11px 13px; font-size:12.5px; line-height:1.65; color:var(--hy-ink-2);
  max-height:132px; overflow-y:auto; overscroll-behavior:contain; overflow-wrap:anywhere; }
.hy-rt p{ margin:0 0 8px; } .hy-rt p:last-child{ margin-bottom:0; }
.hy-rt a{ color:var(--hy-teal); font-weight:600; text-decoration:none; }
.hy-rt.empty,.hy-rt:empty{ background:transparent; border-style:dashed; color:var(--hy-ink-3); }
.hy-rt:empty::before{ content:"No notes"; }
.hy-rt textarea{ width:100%; border:0; background:transparent; resize:vertical;
  font:inherit; color:inherit; outline:0; }

/* record metadata line - what is left of the audit log on the page */
.hy-metaline{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:9px 2px 0;
  border-top:1px solid var(--hy-line); font-size:11.5px; color:var(--hy-ink-3); margin-top:4px; }
.hy-metaline .hy-spacer{ flex:1; }
.hy-metaline .sep{ width:1px; height:11px; background:var(--hy-line-2); }
.hy-metaline b{ font-weight:600; color:var(--hy-ink-2); }
.hy-metaline a{ color:var(--hy-teal); font-weight:600; text-decoration:none; }

/* state rail - the six collapsed accordions, unfolded */
.hy-rail{ display:flex; flex-direction:column; gap:18px; position:sticky; top:82px; }
.hy-rblock{ border:1px solid var(--hy-line); border-radius:var(--hy-r-lg);
  background:var(--hy-surface); overflow:hidden; }
.hy-rblock > h4{ margin:0; padding:10px 14px; font-size:11px; font-family:var(--hy-mono);
  font-weight:500; letter-spacing:.13em; text-transform:uppercase; color:var(--hy-ink-3);
  border-bottom:1px solid var(--hy-line); display:flex; align-items:center; gap:8px; }
.hy-rblock > h4 .r{ margin-inline-start:auto; }
.hy-rlist{ display:flex; flex-direction:column; }
.hy-rlist .r{ display:flex; align-items:center; gap:10px; padding:8px 14px;
  border-bottom:1px solid var(--hy-line); font-size:12.5px; }
.hy-rlist .r:last-child{ border-bottom:0; }
.hy-rlist .r .k{ color:var(--hy-ink-3); font-size:12px; }
.hy-rlist .r .v{ margin-inline-start:auto; font-family:var(--hy-mono); font-weight:500;
  font-variant-numeric:tabular-nums; text-align:end; color:var(--hy-ink); }
.hy-meter{ height:4px; border-radius:2px; background:var(--hy-line); overflow:hidden; margin-top:5px; }
.hy-meter i{ display:block; height:100%; background:var(--hy-teal); }
.hy-meter i.warn{ background:var(--hy-gold); }
.hy-rblock .foot{ padding:8px 14px 10px; font-size:11.5px; color:var(--hy-ink-3);
  display:flex; align-items:center; gap:8px; }
.hy-rblock .foot a{ color:var(--hy-teal); font-weight:600; text-decoration:none; margin-inline-start:auto; }

/* two-column content: detail left, live state right */
.hy-content{ padding:20px 24px 26px; display:grid; grid-template-columns:minmax(0,1fr) 300px;
  gap:22px; align-items:start; background:var(--hy-surface); }
@media (max-width:1100px){
  .hy-content{ grid-template-columns:1fr; }
  .hy-rail{ position:static; }
}

/* existing helper, kept */
.updates-scroll{ max-height:520px; min-height:100px; overflow-y:auto;
  overscroll-behavior:contain; scrollbar-gutter:stable;
  scrollbar-width:thin; scrollbar-color:#c5ccd6 transparent; }
.updates-scroll::-webkit-scrollbar{ width:8px; }
.updates-scroll::-webkit-scrollbar-track{ background:transparent; }
.updates-scroll::-webkit-scrollbar-thumb{ background-color:#c5ccd6; border-radius:4px; }
.updates-scroll::-webkit-scrollbar-thumb:hover{ background-color:#9aa4b2; }

/* ===========================================================================
   Account page - Direction B applied to the ported hcm12 markup.
   The identity band now carries the record, so the old card header and its
   language-lookup title are redundant; the field grid becomes a spec sheet.
   =========================================================================== */

/* The hero replaces the "Humly Cloud Account" card header.
   NB: id="boxHeaderTitle" is used TWICE on this form - identity card and audit
   card - so it cannot be the hook. #dominoForm is unique to the identity card. */
.card:has(#dominoForm) > .card-header{ display:none; }

/* the identity card loses its box - the hero above it is the container now */
.card:has(#dominoForm){ border:0; background:transparent; margin-bottom:6px; }
.card:has(#dominoForm) > .card-body{ padding:0 0 4px; }
.card:has(#dominoForm) > .card-footer{ background:transparent; border-top:1px solid var(--hy-line);
  padding:14px 0 0; }

/* --- spec sheet: label/value rows, hairline separated, no boxes ---------- */
#dominoForm .row{ display:grid; grid-template-columns:132px minmax(0,1fr); gap:10px;
  padding:7px 0; margin:0; border-bottom:1px solid var(--hy-line); align-items:baseline; }
#dominoForm .row > *{ padding:0; max-width:none; flex:none; width:auto; }
#dominoForm .row > label{ font-size:12px; color:var(--hy-ink-3); font-weight:400;
  line-height:1.45; }
#dominoForm .row > div{ font-size:12.5px; font-weight:600; color:var(--hy-ink);
  min-width:0; overflow-wrap:anywhere; }
#dominoForm .row > div .form-control,
#dominoForm .row > div .form-select,
#dominoForm .row > div input,
#dominoForm .row > div select,
#dominoForm .row > div textarea{ font-weight:400; }
/* the two outer layout columns must NOT become spec rows */
#dominoForm > .row{ display:flex; grid-template-columns:none; border-bottom:0;
  padding:0; gap:0 34px; flex-wrap:wrap; }
/* 320px basis + 34px gap no longer fits once the rail takes 300px, so the two
   field groups wrapped into a single column. A 260px basis keeps them side by
   side, and the form's original 7/5 weighting gives the identity group - which
   holds the long values like email - the wider share. */
#dominoForm > .row > .col-sm-7{ flex:7 1 260px; min-width:0; }
#dominoForm > .row > .col-sm-5{ flex:5 1 200px; min-width:0; }

/* the standalone combo blocks follow the same rhythm */
#comboDistributor .row,#comboReseller .row{ display:grid;
  grid-template-columns:132px minmax(0,1fr); gap:10px; padding:7px 0; margin:0;
  border-bottom:1px solid var(--hy-line); align-items:center; }
#comboDistributor .row > label,#comboReseller .row > label{ font-size:12px;
  color:var(--hy-ink-3); font-weight:400; padding-top:0 !important; }
#comboDistributor .form-group,#comboReseller .form-group{ margin:0; }

/* --- rail: the accordions read as state blocks, not as clickable cards --- */
.col-md-3.connectedSortable .card{ margin-bottom:18px; }
.col-md-3.connectedSortable .card > .card-header{ padding:10px 14px; }
.col-md-3.connectedSortable .card > .card-header .card-title{ font-family:var(--hy-mono);
  font-size:11px; font-weight:500; letter-spacing:.13em; text-transform:uppercase;
  color:var(--hy-ink-3); }
.col-md-3.connectedSortable .card .table > tbody > tr > td{ padding:6px 14px; }

/* audit log reads as trace, not as headline content */
.card:has(#auditlog) > .card-header .card-title,
.card:has(.audit) > .card-header .card-title{ font-family:var(--hy-mono); font-size:11px;
  font-weight:500; letter-spacing:.13em; text-transform:uppercase; color:var(--hy-ink-3); }

/* --- rail rows: label left, value hard right, never wrap mid-word -------- */
.hy-tools{ display:none; }
.hy-idrow{ padding-bottom:14px; border-bottom:1px solid var(--hy-line); }

.col-md-3.connectedSortable .card-body .row{ display:flex; align-items:baseline; gap:10px;
  margin:0; padding:6px 0; border-bottom:1px solid var(--hy-line); }
.col-md-3.connectedSortable .card-body .row:last-child{ border-bottom:0; }
.col-md-3.connectedSortable .card-body .row > label,
.col-md-3.connectedSortable .card-body .row > .control-label{
  flex:0 1 auto; width:auto; max-width:none; padding:0;
  font-size:12px; font-weight:400; color:var(--hy-ink-3); white-space:nowrap; }
.col-md-3.connectedSortable .card-body .row > div{
  flex:0 0 auto; margin-inline-start:auto; width:auto; max-width:none; padding:0;
  font-family:var(--hy-mono); font-weight:500; font-variant-numeric:tabular-nums;
  text-align:end; color:var(--hy-ink); font-size:12.5px; }

/* the state badges the summary formulas emit as bg-* columns become chips */
.col-md-3.connectedSortable .card-body .row > div[class*="bg-"]{
  font-family:var(--hy-mono); font-size:10.5px; font-weight:500; letter-spacing:.05em;
  text-transform:uppercase; padding:3px 8px !important; border-radius:3px; }
.col-md-3.connectedSortable .card-body .row > div.bg-success{ background:var(--hy-ok-wash) !important;
  color:var(--hy-ok) !important; }
.col-md-3.connectedSortable .card-body .row > div.bg-warning{ background:var(--hy-warn-wash) !important;
  color:var(--hy-warn) !important; }
.col-md-3.connectedSortable .card-body .row > div.bg-danger{ background:var(--hy-crit-wash) !important;
  color:var(--hy-crit) !important; }

/* --- D4: rich-text / free-text breaks the grid --------------------------
   The Notes / Teams Link row is the only one on the form using col-sm-9,
   which makes it a stable hook. Label above, content in a sunken well
   below the label/value columns, capped height with its own scroll, and a
   dashed empty state so a blank row never reads as a missing field.      */
#dominoForm .row:has(> .col-sm-9){
  display:block; grid-template-columns:none; border-bottom:0;
  border-top:1px solid var(--hy-line); margin-top:12px; padding-top:14px; }
#dominoForm .row:has(> .col-sm-9) > label{
  display:block; width:auto; max-width:none; margin-bottom:7px;
  font-family:var(--hy-mono); font-size:10px; font-weight:500; letter-spacing:.13em;
  text-transform:uppercase; color:var(--hy-ink-3); }
#dominoForm .row:has(> .col-sm-9) > .col-sm-9{
  display:block; width:auto; max-width:none; font-weight:400; font-size:12.5px;
  line-height:1.65; color:var(--hy-ink-2);
  background:var(--hy-sunk); border:1px solid var(--hy-line);
  border-radius:var(--hy-r); padding:11px 13px;
  max-height:132px; overflow-y:auto; overscroll-behavior:contain;
  overflow-wrap:anywhere; }
#dominoForm .row:has(> .col-sm-9) > .col-sm-9:has(textarea){
  padding:0; background:transparent; border-color:var(--hy-line-2); max-height:none; }
#dominoForm .row:has(> .col-sm-9) > .col-sm-9 textarea{
  width:100%; border:0; background:transparent; resize:vertical;
  font:inherit; color:inherit; outline:0; padding:11px 13px; }
#dominoForm .row:has(> .col-sm-9) > .col-sm-9 a{ color:var(--hy-teal); font-weight:600;
  text-decoration:none; }
/* empty state - dashed outline reading "No notes", never a blank row */
#dominoForm .row:has(> .col-sm-9) > .col-sm-9:not(:has(*)):empty::before,
#dominoForm .row:has(> .col-sm-9) > .col-sm-9:has(> span:empty):not(:has(textarea))::after{
  content:"No notes"; color:var(--hy-ink-3); }

/* --- D3: the audit log is document trace, so it lives in a drawer -------- */
.hy-drawer{ width:440px; max-width:92vw; background:var(--hy-surface);
  border-inline-start:1px solid var(--hy-line-2); }
.hy-drawer .offcanvas-header{ border-bottom:1px solid var(--hy-line); padding:13px 16px; }
.hy-drawer .offcanvas-title{ font-size:14px; font-weight:700; color:var(--hy-ink); }
.hy-drawer .offcanvas-body{ padding:0; }
/* inside the drawer the audit card is the drawer, so it loses its own box */
.hy-drawer .card{ border:0; background:transparent; margin:0; }
.hy-drawer .card > .card-header{ display:none; }
.hy-drawer .card > .card-body{ padding:0; }
.hy-drawer .table > thead > tr > th{ position:sticky; top:0; background:var(--hy-surface); z-index:1; }

/* the metaline is what is left of the audit log on the page itself */
.hy-metaline .hy-drawer-open{ color:var(--hy-teal); font-weight:600; text-decoration:none;
  cursor:pointer; }
.hy-metaline .hy-drawer-open:hover{ text-decoration:underline; }

/* version on the identity line; gold when the server is behind the latest public build */
.hy-meta .hy-behind .hy-mono{ color:var(--hy-warn); }
.hy-meta .hy-behind::after{ content:"behind"; margin-inline-start:5px; font-family:var(--hy-mono);
  font-size:9.5px; letter-spacing:.07em; text-transform:uppercase;
  background:var(--hy-warn-wash); color:var(--hy-warn); padding:2px 5px; border-radius:3px; }

/* D5 completion: GA and Activated have left the field list for the flag strip.
   Loglevel keeps its row - it carries a real value, not a yes/no. */
/* NB: :has() is NOT scoped to direct children. ".row:has(#supportadmin)" also
   matches the OUTER layout row that wraps every field, which hid the whole form.
   Match only the row that directly owns the value cell. */
#dominoForm .row:has(> div > #supportadmin),
#dominoForm .row:has(> #isactivated){ display:none; }

/* Hero sits outside .app-content, so match the grid's inset by hand:
   .app-content 8px + .container-fluid 12px - .row -12px + .col 12px = 20px.
   Without this the identity band and tiles sit 4px proud of the field columns. */
.hy-hero{ padding-left:20px; padding-right:20px; }

/* no HCP server version on record - omit rather than print a bare "N/A" */
.hy-meta .hy-noversion{ display:none; }

/* ---- rail polish -------------------------------------------------------
   The rail card headers render display:block, so the collapse/remove tools
   wrap onto a second line and the header stands 61px tall. Make it one row. */
.col-md-3.connectedSortable .card > .card-header{
  display:flex; align-items:center; gap:8px; min-height:0; }
.col-md-3.connectedSortable .card > .card-header .card-title{ margin:0; flex:1 1 auto; }
.col-md-3.connectedSortable .card > .card-header .card-tools{
  margin-inline-start:auto; float:none !important; display:flex; align-items:center; gap:2px; }
.col-md-3.connectedSortable .card > .card-header .btn{
  padding:2px 6px; border:0; background:transparent; color:var(--hy-ink-3); }

/* Licence/server tables are wider than the 237px rail, so they were clipped.
   Give them their own horizontal scroll and a tighter rhythm. */
.col-md-3.connectedSortable .card-body{ padding:0; overflow-x:auto; }
.col-md-3.connectedSortable .card-body > .row{ padding-left:14px; padding-right:14px; }
.col-md-3.connectedSortable .table{ font-size:11.5px; margin-bottom:0; }
.col-md-3.connectedSortable .table th,
.col-md-3.connectedSortable .table td{ padding:6px 8px; white-space:nowrap; }
.col-md-3.connectedSortable .card-body > *:not(table){ padding-left:14px; padding-right:14px; }

/* ---- record actions: the inline rgba(0,0,0,.05) band is off-palette ----- */
.card:has(#dominoForm) > .card-footer{ background:transparent !important; }
.card-footer{ background:var(--hy-surface) !important; }

/* ---- content/rail split: the mock is minmax(0,1fr) + a 300px rail --------
   col-md-3 gives only ~237px here, which clips the licence table and wraps
   the rail titles. Override the two content columns to the mock's ratio and
   leave the full-width toolbar row alone. Desktop only; mobile still stacks. */
@media (min-width: 992px){
  .app-content > .container-fluid > .row{ display:flex; flex-wrap:wrap; align-items:flex-start; }
  .app-content > .container-fluid > .row > .col-md-12{ flex:0 0 100%; max-width:100%; }
  .app-content > .container-fluid > .row > .col-md-9{ flex:1 1 0; width:auto; max-width:none; }
  .app-content > .container-fluid > .row > .col-md-3{ flex:0 0 300px; width:300px; max-width:300px; }
}
/* rail titles now fit on one line; keep them from wrapping if a name is long */
.col-md-3.connectedSortable .card > .card-header .card-title{
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Several value formulas wrap their output in <nobr> (email + hubspot link,
   admin user, CID). In a 2-column spec sheet that overflows into the next
   column instead of wrapping. Let them break; keep the icon glued to the text. */
#dominoForm nobr{ white-space:normal; overflow-wrap:break-word; word-break:normal; }
#dominoForm .row > div img{ vertical-align:-2px; }
/* a little more room for values now that the rail takes 300px */
#dominoForm .row{ grid-template-columns:120px minmax(0,1fr); }

/* ---- Bootstrap 3 dropdown markup shim -----------------------------------
   The ported toolbar menus are BS3: <ul class="dropdown-menu"> containing
   <li><a>...</a></li>, <li class="dropdown-header"> and <li class="divider">.
   Bootstrap 5 styles a.dropdown-item / .dropdown-divider instead, so the items
   fell through as bare blue underlined links. Style the BS3 shape directly -
   cheaper and safer than rewriting the markup of every menu on every page.
   The two AJAX combo menus build their own items, so leave them alone. */
.dropdown-menu:not(#comboDistributorMenu):not(#comboResellerMenu){
  background:var(--hy-surface); border:1px solid var(--hy-line);
  border-radius:var(--hy-r-lg); box-shadow:0 10px 28px -14px rgba(28,27,31,.35);
  padding:6px 0; min-width:230px; }
.dropdown-menu:not(#comboDistributorMenu):not(#comboResellerMenu) li > a{
  display:block; width:100%; padding:6px 16px; clear:both;
  font-size:12.5px; font-weight:500; line-height:1.5;
  color:var(--hy-ink); text-decoration:none; white-space:nowrap;
  background:transparent; border:0; }
.dropdown-menu:not(#comboDistributorMenu):not(#comboResellerMenu) li > a:hover,
.dropdown-menu:not(#comboDistributorMenu):not(#comboResellerMenu) li > a:focus{
  background:var(--hy-teal-wash); color:var(--hy-teal); }
.dropdown-menu:not(#comboDistributorMenu):not(#comboResellerMenu) li.divider,
.dropdown-menu:not(#comboDistributorMenu):not(#comboResellerMenu) li.dropdown-divider{
  height:0; margin:6px 0; border-top:1px solid var(--hy-line); overflow:hidden; }
.dropdown-menu:not(#comboDistributorMenu):not(#comboResellerMenu) li.dropdown-header,
.dropdown-menu:not(#comboDistributorMenu):not(#comboResellerMenu) .dropdown-header{
  display:block; padding:9px 16px 4px; font-family:var(--hy-mono);
  font-size:10px; font-weight:500; letter-spacing:.13em; text-transform:uppercase;
  color:var(--hy-ink-3); white-space:nowrap; }
/* the toolbar buttons themselves */
.hy-toolbar-btn,.col-md-12 .btn-group > .btn{ font-size:12.5px; }

/* --- polish pass 2026-09-04 -------------------------------------------- */

/* 3. the hero is emitted as TWO stacked .hy-hero blocks (identity, then
   tiles+contract). Both carry padding:20px 20px 0, so the contract band sits
   flush against the bottom edge of its own card while everything else is
   inset 20px. Give the second block a real bottom padding. */
.hy-hero + .hy-hero{ padding-bottom:20px; }
.hy-hero + .hy-hero > .hy-term{ margin-bottom:0; }

/* 1. slim scrollbars for anything that scrolls inside a card or the drawer */
.card-body, .box-body, .bk-list, .offcanvas-body,
.devbox, .hy-scroll, .tabulator-tableholder{
  scrollbar-width:thin; scrollbar-color:var(--hy-line-2) transparent; }
.card-body::-webkit-scrollbar, .box-body::-webkit-scrollbar,
.bk-list::-webkit-scrollbar, .offcanvas-body::-webkit-scrollbar,
.devbox::-webkit-scrollbar, .hy-scroll::-webkit-scrollbar,
.tabulator-tableholder::-webkit-scrollbar{ width:7px; height:7px; }
.card-body::-webkit-scrollbar-track, .box-body::-webkit-scrollbar-track,
.bk-list::-webkit-scrollbar-track, .offcanvas-body::-webkit-scrollbar-track,
.devbox::-webkit-scrollbar-track, .hy-scroll::-webkit-scrollbar-track,
.tabulator-tableholder::-webkit-scrollbar-track{ background:transparent; }
.card-body::-webkit-scrollbar-thumb, .box-body::-webkit-scrollbar-thumb,
.bk-list::-webkit-scrollbar-thumb, .offcanvas-body::-webkit-scrollbar-thumb,
.devbox::-webkit-scrollbar-thumb, .hy-scroll::-webkit-scrollbar-thumb,
.tabulator-tableholder::-webkit-scrollbar-thumb{
  background:var(--hy-line-2); border-radius:4px;
  border:2px solid transparent; background-clip:padding-box; }
.card-body::-webkit-scrollbar-thumb:hover, .box-body::-webkit-scrollbar-thumb:hover,
.bk-list::-webkit-scrollbar-thumb:hover, .offcanvas-body::-webkit-scrollbar-thumb:hover,
.devbox::-webkit-scrollbar-thumb:hover, .hy-scroll::-webkit-scrollbar-thumb:hover,
.tabulator-tableholder::-webkit-scrollbar-thumb:hover{ background:var(--hy-ink-3); }
.card-body::-webkit-scrollbar-corner, .bk-list::-webkit-scrollbar-corner,
.offcanvas-body::-webkit-scrollbar-corner{ background:transparent; }

/* 2. the legacy AdminLTE 3 card tool - give it a real affordance */
.btn-box-tool{
  background:transparent; border:0; padding:2px 6px; line-height:1;
  color:var(--hy-ink-3); border-radius:var(--hy-r); cursor:pointer; }
.btn-box-tool:hover{ background:var(--hy-sunk); color:var(--hy-ink); }
.btn-box-tool:focus-visible{ outline:2px solid var(--hy-teal); outline-offset:1px; }
.card.collapsed-card > .card-body,
.card.collapsed-card > .card-footer{ display:none !important; }

/* 4 + 5. summary footer under the tiles */
.hy-foot{
  display:flex; flex-wrap:wrap; align-items:center; gap:20px;
  margin:-12px 0 18px; padding:10px 14px 0;
  border-top:1px solid var(--hy-line); font-size:12px; }
.hy-foot a{ color:var(--hy-ink-2); text-decoration:none;
  display:inline-flex; align-items:center; gap:6px; }
.hy-foot a:hover{ color:var(--hy-teal); text-decoration:underline; }
.hy-foot a i{ font-size:11px; opacity:.65; }
.hy-foot a:hover i{ opacity:1; }

/* licence list, narrowed to one account via ?cid= */
.hy-cidfilter{
  margin:0 0 10px; padding:7px 12px; border-radius:var(--hy-r);
  background:var(--hy-teal-wash); color:var(--hy-ink-2);
  font-size:12px; border:1px solid var(--hy-line); }
.hy-cidfilter b{ font-family:var(--hy-mono); font-weight:500; color:var(--hy-ink); }
.hy-cidfilter a{ color:var(--hy-teal); text-decoration:none; }
.hy-cidfilter a:hover{ text-decoration:underline; }

/* --- capacity tables: state as text colour, not a row fill -------------- */
/* sfBoxInfoLicenses computes tr class server-side:
     used > licensed          -> danger
     licensed > used          -> success
     licensed = used, > 0     -> info
     nothing licensed or used -> (none)
   Bootstrap 3 painted whole rows; BS5 ignores the bare classes entirely,
   which is why the signal vanished. Restore it as ink on the numbers plus a
   2px rule on the label cell. */
:root{ --hy-info-ink:#237679; }

.table-condensed tbody tr.success > td:first-child{ box-shadow:inset 2px 0 0 var(--hy-ok); }
.table-condensed tbody tr.danger  > td:first-child{ box-shadow:inset 2px 0 0 var(--hy-crit); }
.table-condensed tbody tr.info    > td:first-child{ box-shadow:inset 2px 0 0 var(--hy-info-ink); }
.table-condensed tbody tr.warning > td:first-child{ box-shadow:inset 2px 0 0 var(--hy-warn); }

/* the numeric cells are .text-end in BS5 (.text-right in the BS3 source),
   so match on position instead of the utility class */
.table-condensed tbody tr.success > td:not(:first-child){ color:var(--hy-ok); }
.table-condensed tbody tr.danger  > td:not(:first-child){ color:var(--hy-crit); }
.table-condensed tbody tr.info    > td:not(:first-child){ color:var(--hy-info-ink); }
.table-condensed tbody tr.warning > td:not(:first-child){ color:var(--hy-warn); }

/* the Used column is the one that carries the meaning */
.table-condensed tbody tr.success > td:last-child,
.table-condensed tbody tr.danger  > td:last-child,
.table-condensed tbody tr.info    > td:last-child,
.table-condensed tbody tr.warning > td:last-child{ font-weight:600; }

/* over-consumption is the one state worth a louder label */
.table-condensed tbody tr.danger > td:first-child{ color:var(--hy-crit); font-weight:600; }

/* rows with nothing licensed and nothing in use recede */
.table-condensed tbody tr:not(.success):not(.danger):not(.info):not(.warning) > td{
  color:var(--hy-ink-3); }

/* ===========================================================================
   Downloads page (pageAppDownload / sfContentDownloads) - Direction B
   Replaces eight 250px Tabulator boxes with one release list per platform.
   =========================================================================== */

/* the hero is inside container-fluid here, not full-bleed as on the account
   page, so it needs its own edge */
.hy-hero.hy-block{ border:1px solid var(--hy-line); border-radius:var(--hy-r-lg);
  padding:20px 20px 20px; margin-bottom:22px; }
.hy-hero.hy-block .hy-idrow{ padding-bottom:14px; }
.hy-hero.hy-block .hy-tiles{ margin:16px 0 0; }
.hy-hero .hy-mark i{ font-size:17px; }
.hy-meta .sep{ width:1px; height:11px; background:var(--hy-line-2); }

.hy-panel > h3 .n{ font-family:var(--hy-mono); font-size:10px; font-weight:500;
  letter-spacing:.08em; color:var(--hy-ink-3); border:1px solid var(--hy-line-2);
  border-radius:3px; padding:1px 6px; }

/* --- the release list --------------------------------------------------- */
.hy-dl{ border:1px solid var(--hy-line); border-radius:var(--hy-r-lg);
  background:var(--hy-surface); overflow:hidden; }
.hy-dlrow{ display:grid; grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"nm act" "facts act" "prev prev";
  align-items:start; gap:5px 18px; padding:14px 16px;
  border-bottom:1px solid var(--hy-line); }
.hy-dlrow:last-child{ border-bottom:0; }
.hy-dlrow:hover{ background:var(--hy-surface-2); }

.hy-dlrow .nm{ grid-area:nm; min-width:0; margin:0; font-size:13.5px; font-weight:700;
  line-height:1.35; color:var(--hy-ink); letter-spacing:-.005em; }
.hy-dlrow .nm .sub{ display:block; font-weight:400; font-size:11.5px;
  color:var(--hy-ink-3); margin-top:1px; }

.hy-dlrow .facts{ grid-area:facts; display:flex; align-items:center;
  gap:8px 12px; flex-wrap:wrap; min-width:0; }
.hy-dlrow .facts .f{ display:inline-flex; align-items:baseline; gap:6px;
  font-size:12px; color:var(--hy-ink-3); }
.hy-dlrow .facts .f b{ font-family:var(--hy-mono); font-weight:500; font-size:12px;
  font-variant-numeric:tabular-nums; color:var(--hy-ink-2); }

.hy-dlrow .act{ grid-area:act; align-self:center; display:flex; gap:8px; }
.hy-dlrow .act .btn{ white-space:nowrap; }

.hy-dlrow .prev{ grid-area:prev; display:flex; align-items:center; gap:8px 10px;
  flex-wrap:wrap; margin-top:8px; padding-top:9px;
  border-top:1px dashed var(--hy-line); font-size:11.5px; color:var(--hy-ink-3); }
.hy-dlrow .prev .k{ font-family:var(--hy-mono); font-size:10px; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; }
.hy-dlrow .prev b{ font-family:var(--hy-mono); font-weight:500;
  font-variant-numeric:tabular-nums; color:var(--hy-ink-2); }
.hy-dlrow .prev a.dl{ color:var(--hy-teal); font-weight:600; text-decoration:none;
  margin-inline-start:auto; white-space:nowrap; }
.hy-dlrow .prev a.dl:hover{ text-decoration:underline; }

/* md5 - a copy control, not a wall of hex */
.hy-md5{ display:inline-flex; align-items:center; gap:6px; max-width:100%;
  font-family:var(--hy-mono); font-size:10.5px; letter-spacing:.02em;
  border:1px solid var(--hy-line-2); background:var(--hy-sunk);
  color:var(--hy-ink-3); border-radius:3px; padding:2px 7px; cursor:pointer;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hy-md5:hover{ color:var(--hy-ink-2); border-color:var(--hy-teal); }
.hy-md5 .t{ opacity:.7; }
.hy-md5.ok{ background:var(--hy-ok-wash); color:var(--hy-ok); border-color:transparent; }
.hy-md5.bad{ background:var(--hy-crit-wash); color:var(--hy-crit); border-color:transparent; }

.hy-dlempty{ padding:14px 16px; font-size:12.5px; color:var(--hy-ink-3);
  border:1px dashed var(--hy-line-2); border-radius:var(--hy-r-lg); }

@media (max-width:640px){
  .hy-dlrow{ grid-template-columns:1fr; grid-template-areas:"nm" "facts" "act" "prev"; }
  .hy-dlrow .act{ justify-content:flex-start; margin-top:4px; }
}

/* the hero carries the page title, so the AdminLTE content-header above it is a
   second copy of it. Hidden in CSS for no flash; the renderer hides it too, for
   browsers without :has(). */
.content-wrapper:has(.hy-dlpage) > .content-header{ display:none; }

/* four tiles in a ~490px content column: keep the release date on one line */
@media (max-width:860px){
  .hy-hero.hy-block .hy-tile{ padding:11px 12px; }
  .hy-hero.hy-block .hy-tile .v{ font-size:17px; }
}

/* ===========================================================================
   Anonymous home (pageAppHome, signed out) - Direction B, status-led.
   Scoped to .hy-anonpage so nothing else in the portal is touched.
   Restyles three existing subforms in place: sfBoxUptime, sfBoxNews,
   sfBoxContact. sfBoxWelcome is no longer referenced.
   =========================================================================== */

.hy-anonpage{ padding-top:6px; }
.content-wrapper:has(.hy-anonpage) > .content-header{ display:none; }
.hy-anonpage > .container-fluid > .hy-hero.hy-block{ margin-bottom:14px; }
.hy-anonhero .hy-title h1{ font-size:22px; }
.hy-anonhero .hy-acts .btn{ white-space:nowrap; }
.hy-anonpage .hy-tiles.hy-five{ grid-template-columns:repeat(5,1fr); }
.hy-anonpage .hy-note{ margin:9px 0 0; font-size:11.5px; color:var(--hy-ink-3); }
.hy-anonpage .hy-panel > h3 a.act{ text-decoration:none; }
.hy-anonpage .hy-panel > h3 a.act:hover{ text-decoration:underline; }

/* --- sfBoxUptime: the widget keeps its markup and its script; only the
       treatment changes, so the three KPIs read as the same tiles as the
       fleet band below them. -------------------------------------------- */
.hy-anonpage .hu-wrap.card{ border:1px solid var(--hy-line); border-radius:var(--hy-r-lg);
  background:var(--hy-surface); margin-bottom:14px; }
.hy-anonpage .hu-wrap .card-body{ padding:14px 16px; }
.hy-anonpage .hu-cardhead{ display:flex; align-items:center; gap:10px; margin:0 0 11px;
  font-family:var(--hy-mono); font-size:11px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--hy-ink-3); }
.hy-anonpage .hu-cardhead > span{ display:inline-flex; align-items:center; gap:6px; }
.hy-anonpage .hu-cardhead a{ color:var(--hy-teal); text-decoration:none; }
.hy-anonpage .hu-cardhead .btn{ margin-inline-start:auto; }
.hy-anonpage .hu-wrap .card-text{ margin:0; }
.hy-anonpage .hu-strip{ display:block; width:100%; padding:0; border:0; background:none;
  text-align:start; cursor:pointer; }
.hy-anonpage .hu-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  border:1px solid var(--hy-line); border-radius:var(--hy-r-lg); overflow:hidden;
  background:var(--hy-line); gap:1px; }
.hy-anonpage .hu-kpi{ background:var(--hy-surface); padding:12px 14px; }
.hy-anonpage .hu-big{ font-family:var(--hy-mono); font-size:21px; font-weight:500;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.15; }
.hy-anonpage .hu-un{ font-size:10.5px; color:var(--hy-ink-3); font-weight:400;
  letter-spacing:0; margin-inline-start:3px; }
.hy-anonpage .hu-cap{ font-size:11px; color:var(--hy-ink-3); margin-top:2px; }
.hy-anonpage .hu-load,.hy-anonpage .hu-err{ font-size:11.5px; color:var(--hy-ink-3);
  padding:12px 14px; border:1px solid var(--hy-line); border-radius:var(--hy-r-lg); }
.hy-anonpage .hu-err{ color:var(--hy-crit); background:var(--hy-crit-wash); border-color:transparent; }

/* --- sfBoxNews: typed chips instead of struck-through badges. The item
       markup is untouched; a resolved incident is <s> inside the badge, so
       that is the hook for the muted treatment. ------------------------- */
.hy-anonpage .updates-scroll{ max-height:none; overflow:visible; padding:0 16px 4px; }
.hy-anonpage .updates-scroll .item{ padding:11px 0; border-bottom:1px solid var(--hy-line); }
.hy-anonpage .updates-scroll .item:last-child{ border-bottom:0; }
.hy-anonpage .updates-scroll .item p.updated{ margin:0 0 2px; font-size:12px;
  color:var(--hy-ink-2); }
.hy-anonpage .updates-scroll .item p.updated b{ display:block; font-size:12.5px;
  font-weight:700; color:var(--hy-ink); margin-top:2px; }
.hy-anonpage .updates-scroll .item .badge{ font-family:var(--hy-mono); font-size:9.5px;
  font-weight:500; letter-spacing:.08em; text-transform:uppercase; border-radius:2px;
  padding:3px 6px; vertical-align:1px; }
.hy-anonpage .updates-scroll .item .badge-success{ background:var(--hy-teal-wash); color:var(--hy-teal); }
.hy-anonpage .updates-scroll .item .badge-warning{ background:var(--hy-warn-wash); color:var(--hy-warn); }
.hy-anonpage .updates-scroll .item .badge-danger{ background:var(--hy-crit-wash); color:var(--hy-crit); }
.hy-anonpage .updates-scroll .item .badge-secondary{ background:var(--hy-sunk); color:var(--hy-ink-3); }
.hy-anonpage .updates-scroll .item .badge s{ text-decoration:none; }
.hy-anonpage .updates-scroll .item:has(.badge s){ color:var(--hy-ink-3); }
.hy-anonpage .updates-scroll .item:has(.badge s) .badge{ background:var(--hy-ok-wash); color:var(--hy-ok); }
.hy-anonpage .updates-scroll .item > s,.hy-anonpage .updates-scroll .item s{ color:var(--hy-ink-3); }
.hy-anonpage .updates-scroll .item hr{ margin:7px 0; border-color:var(--hy-line); opacity:1; }
.hy-anonpage .updates-scroll .item a{ color:var(--hy-teal); }

/* --- sfBoxContact ---------------------------------------------------- */
.hy-anonpage .card .card-header h5{ font-family:var(--hy-mono); font-size:11px;
  font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--hy-ink-3); }
.hy-anonpage .card .card-body{ font-size:12.5px; }
.hy-anonpage .card .card-body a{ color:var(--hy-teal); }

@media (max-width:1200px){
  .hy-anonpage .hy-tiles.hy-five{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:640px){
  .hy-anonpage .hy-tiles.hy-five{ grid-template-columns:repeat(2,1fr); }
  .hy-anonhero .hy-acts{ width:100%; }
}

/* --- anonymous home, pass 2 ------------------------------------------------
   1. The news column is 35 entries. Unbounded it runs to ~5000px and leaves
      the content column empty beside it, so it keeps a capped scroll region
      sized to sit alongside the left column rather than dwarf it.
   2. The <aside> carries an inline background-color:#5c6151 + hback-1.png,
      which beats hcm.css's token shell. Overridden here for THIS page only,
      via :has(), so the rest of the portal is untouched until that inline
      style is removed at the source.
   -------------------------------------------------------------------------- */

.hy-anonpage .updates-scroll{ max-height:620px; overflow-y:auto; overscroll-behavior:contain; }
.hy-anonpage .updates-scroll .item p.updated{ line-height:1.5; }
.hy-anonpage .updates-scroll .item p.updated b:first-of-type{ margin-top:1px; }


/* --- anonymous home, pass 3 ------------------------------------------------
   Only the FIRST <b> in a news item is the headline. The body text uses <b>
   inline for emphasis ("Introducing <b>Services</b> in ..."), so promoting
   every <b> to a block broke those sentences across three lines.
   Also: the shorthand is what actually clears the inline hback-1.png, since
   background-image:none alone left the declared url in the computed style.
   -------------------------------------------------------------------------- */

.hy-anonpage .updates-scroll .item p.updated b{
  display:inline; font-size:inherit; font-weight:700; color:inherit; margin-top:0;
}
.hy-anonpage .updates-scroll .item p.updated > b:first-of-type{
  display:block; font-size:12.5px; font-weight:700; color:var(--hy-ink); margin-top:2px;
}



/* ===========================================================================
   The left menu - portal-wide, and the only place it is styled.

   sfMainSidebar used to carry an inline <style> block skinning the whole menu.
   Being in the body it sat after the linked stylesheets and beat hcm.css at
   equal specificity, so the menu was the one component the token layer could
   not reach - the same trap the <aside>'s inline background set. Both are gone
   from the subform; PART 1 below is that block, moved here unchanged in
   substance, and PART 2 is the restyle layered on top.
   Same items, same order, same role gating - treatment only.
   =========================================================================== */

/* --- PART 1: moved verbatim in spirit from sfMainSidebar --------------- */

.app-sidebar{
  --lte-sidebar-color:#D9D5CA;
  --lte-sidebar-hover-color:#fff;
  --lte-sidebar-hover-bg:rgba(255,255,255,.07);
  --lte-sidebar-active-color:#fff;
  --lte-sidebar-menu-active-color:#fff;
  --lte-sidebar-menu-active-bg:rgba(86,179,181,.22);
  --lte-sidebar-submenu-color:#B3AFA4;
  --lte-sidebar-submenu-hover-color:#fff;
  --lte-sidebar-submenu-hover-bg:rgba(255,255,255,.06);
  --lte-sidebar-submenu-active-color:#fff;
  --lte-sidebar-submenu-active-bg:rgba(86,179,181,.18);
  --lte-sidebar-header-color:#8E9382;
}
.app-sidebar .nav-sidebar .nav-link{ color:#D9D5CA; }
.app-sidebar .nav-sidebar .nav-link:hover,
.app-sidebar .nav-sidebar .nav-link:focus{ color:#fff; background-color:rgba(255,255,255,.07); }
.app-sidebar .nav-sidebar .nav-link p,
.app-sidebar .nav-sidebar .nav-link .nav-icon,
.app-sidebar .nav-sidebar .nav-link i{ color:inherit; }
.app-sidebar .nav-pills{
  --bs-nav-pills-link-active-bg:rgba(86,179,181,.28);
  --bs-nav-pills-link-active-color:#ffffff;
}
.app-sidebar .nav-sidebar .nav-link.active{
  color:#fff; background-color:rgba(86,179,181,.28); box-shadow:inset 3px 0 0 #56B3B5;
}
.app-sidebar .nav-treeview .nav-link{ color:#B3AFA4; }
.app-sidebar .nav-treeview .nav-link:hover{ color:#fff; background-color:rgba(255,255,255,.06); }
.app-sidebar .nav-treeview .nav-link.active{ color:#fff; background-color:rgba(86,179,181,.20); }
.app-sidebar .user-panel{ padding:.6rem 1rem; }
.app-sidebar .user-panel img{ height:38px; width:38px; object-fit:cover; }
.app-sidebar .user-panel .info a{ color:#E7E3D8; font-size:.8125rem; }
.nav-treeview > .nav-item > .nav-link{ padding-inline-start:1.25rem; }
.nav-treeview .nav-treeview > .nav-item > .nav-link{ padding-inline-start:2rem; }

/* The .sidebar-brand rules in that block never matched - the markup uses
   .brand-link - so they are not carried over. */

/* --- PART 2: the restyle ---------------------------------------------- */

/* The active marker is the inset shadow above, so drop the border-left the
   D1 block adds; two markers on one row read as a rendering fault. */
.app-sidebar .nav-sidebar .nav-link,
.app-sidebar .nav-sidebar .nav-link.active,
.app-sidebar .nav-sidebar .nav-link:hover{ border-inline-start:0; }

.app-sidebar{ border-inline-end:1px solid #15160F; }
.app-sidebar .sidebar-wrapper{ scrollbar-width:thin; scrollbar-color:#3A3C33 transparent; }
.app-sidebar .sidebar-wrapper::-webkit-scrollbar{ width:7px; }
.app-sidebar .sidebar-wrapper::-webkit-scrollbar-track{ background:transparent; }
.app-sidebar .sidebar-wrapper::-webkit-scrollbar-thumb{ background:#3A3C33; border-radius:4px; }
.app-sidebar .sidebar-wrapper::-webkit-scrollbar-thumb:hover{ background:#4C4F43; }

/* brand row - the wordmark carries the identity, so "cloud 2.0" steps back
   to a mono micro-label rather than competing with it at 17px */
.app-sidebar .brand-link{
  display:flex; align-items:center; gap:9px; padding:13px 16px;
  overflow:hidden; text-decoration:none;
  background:var(--hy-shell); border-bottom:1px solid var(--hy-shell-line);
}
.app-sidebar .brand-link img{ height:30px !important; width:auto !important; opacity:1 !important; }
.app-sidebar .brand-link .brand-text,.app-sidebar .brand-text{
  font-family:var(--hy-mono); font-size:9.5px; font-weight:500; letter-spacing:.15em;
  text-transform:uppercase; color:var(--hy-shell-ink-2); white-space:nowrap;
}

/* section labels, if the menu ever grows them */
.app-sidebar .nav-header{
  font-family:var(--hy-mono); font-size:9px; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:#6E6B62; padding:16px 16px 6px; background:transparent;
}

/* rows */
.app-sidebar .nav-sidebar .nav-link{
  display:flex; align-items:center; gap:10px; padding:8px 16px;
  font-size:12.5px; font-weight:500; border-radius:0; margin:0;
}
.app-sidebar .nav-sidebar .nav-link p{ margin:0; flex:1; min-width:0; }
.app-sidebar .nav-sidebar .nav-icon{
  width:16px; text-align:center; font-size:13px; opacity:.8; margin:0; flex:none;
}
.app-sidebar .nav-sidebar .nav-link.active{ font-weight:600; }
.app-sidebar .nav-sidebar .nav-link.active .nav-icon{ color:#6FC7C9; opacity:1; }

/* badges - HERE, LIVE and friends, as mono micro-labels rather than pills */
.app-sidebar .nav-badge.badge,.app-sidebar .nav-sidebar .badge{
  font-family:var(--hy-mono); font-size:8.5px; font-weight:500; letter-spacing:.09em;
  text-transform:uppercase; padding:2px 5px; border-radius:2px;
  background:rgba(255,255,255,.09) !important; color:#C9C5B9 !important;
  order:9; margin-inline-start:auto;
}
.app-sidebar .nav-sidebar .badge.text-bg-danger,
.app-sidebar .nav-badge.text-bg-danger{
  background:rgba(174,69,48,.28) !important; color:#E09480 !important;
}

/* treeview children sit on their own ground, so nesting reads without guides */
.app-sidebar .nav-treeview{ background:#1B1C18; padding:2px 0; }
.app-sidebar .nav-treeview .nav-link{ padding:6px 16px; font-size:12px; font-weight:400; }
.app-sidebar .nav-treeview > .nav-item > .nav-link{ padding-inline-start:40px; }
.app-sidebar .nav-treeview .nav-treeview > .nav-item > .nav-link{ padding-inline-start:56px; }
.app-sidebar .nav-treeview .nav-link.active{ font-weight:500; box-shadow:inset 3px 0 0 #56B3B5; }
.app-sidebar .nav-treeview .nav-icon{ font-size:10px; opacity:.6; }
.app-sidebar .nav-link .right,.app-sidebar .nav-link .nav-arrow{
  font-size:10px; opacity:.55; margin-inline-start:6px; transition:transform .15s ease;
}
.app-sidebar .nav-item.menu-open > .nav-link .right,
.app-sidebar .nav-item.menu-open > .nav-link .nav-arrow{ transform:rotate(90deg); opacity:.85; }

.app-sidebar .user-panel{
  border-bottom:1px solid var(--hy-shell-line); gap:10px; margin:0 !important;
}
.app-sidebar .user-panel img{ height:28px !important; width:28px !important; border-radius:50%; }
.app-sidebar .user-panel .info a{
  font-size:12.5px; font-weight:600; color:var(--hy-shell-ink); text-decoration:none; padding:0;
}

@media (prefers-reduced-motion:reduce){
  .app-sidebar .nav-link .right,.app-sidebar .nav-link .nav-arrow{ transition:none; }
}


/* ---------------------------------------------------------------
   Menu refresh, 2026-09-09 - doc 41.
   Dividers instead of section headers (the item labels are language
   lookups; hardcoded English headers would be the only untranslated
   text in the menu). Brand symbol for the collapsed rail.
   --------------------------------------------------------------- */

/* group separator - 2 of these live in sfMainSidebar */
.app-sidebar .nav-sidebar > .nav-divider{
  height:0; margin:9px 14px; padding:0; list-style:none;
  border-top:1px solid var(--hy-shell-line, rgba(255,255,255,.09));
}

/* the rail symbol. Humly_Icon_WHITE, accent recoloured to the portal
   teal so it survives the dark shell. Inline so it needs no new
   design note - put_fileres.ps1 cannot create an image resource. */
.app-sidebar .brand-link .brand-mark{
  display:none; flex:0 0 auto; width:26px; height:26px;
  background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARcAAAEXCAYAAACH0wDUAAAHkElEQVR42u3dPW5c1wGG4e8E6smsgNwBmRVw1CYIyJRRCk1WIKYKUolagZgmrcdtGlF9AI9W4FGbxqQ2kFECpApwUswhTNmyZFJzyfvzPMAFbZiQ5p65fnnO/RmWfEatdZnkKHzOi1LKmWGAjV8YAkBcAHEBxAVAXABxAcQFQFwAcQHEBUBcAHEBxAVAXABxAcQFQFwAcQHEBUBcAHEBxAVAXABxAcQFQFwAcQHEBUBcAHEBxAVAXABxAcQF4A4efe4bSimzh3hhtdZlkiNvEZi5AIgLIC6AuACICyAugLgAiAsgLoC4AIgLIC6AuADiAiAugLgA4gIgLoC4AOICIC6AuADiAiAugLgA4gIgLoC4AOICIC6AuADiAiAugLgA4gIgLoC4AOICIC6AuADiAiAugLgA4gJwF48MAZ9Taz1MsvtzvreUsjRiiAupte4mOWzbbpJZ+0+HSXbu8Ofd/NerJJftn5c3vq5LKSujLy6MLySztt0pILew17YkOWpfn9+I0NsWn1WSpVmPuDCsoMySnLSYHPTs5R207TjJ8xvBWV5vpZS1d1Fc6M/s5ORGUHYGtgvXwXnW9udNkoskF6WUS++wuHD/UTlJMm+zgDE5atvLWuvbJAuhGQaXoocdlP1a63mtdZ3k1QjD8rFZzcsk39VaL1pQERe2GJVZrXWZ5Lu2fNiZ4DAcJ3lVa72stZ615SDiwh2jMq+1Xib5Jt9ffZm6vWyuQF1HZt+QiAu3j8pX+f7SLh/aaZFZmcmIC6LSZWQua61nhkNc+DAqs1rrSlS+PDLtnMzMcIjL1KOyX2u9yOacyoER2Yq9JN+0q0uWSuIyybCcZXMb/LHR6MRxWyqdGApxmdoS6HmmeUn5vpdKr2qt54ZCXMYelnNLoAfxrNa6ctlaXMYYlcM2W3lmNB7MQTaXrQ8NhbiMJSynSb41W+nNMunbWuvcUGyfBxfvLyq72Tx054Rt/3xVa00pZWEozFwGtwyKK0FDCMypYRCXIYVlns0HH7kZrv9euqtXXIYSlrNs7rJ1iXk4njsHsx3OuXQXlkWSp0ZisEsk52DMXHoXld12mVlYhh+YmWEQl96EJZvzKy4zj8OFG+3EpQ+EZXx2WmB2DYW4PKRnwjJKB0nODYO4QBeeeppaXKArC8sjcYEu7GTz+AbiAlt3bHkkLtCVc8sjcYEu7CU5NQziAl04NXsRF+jCTtz7Ii7QkaceDRAX6MqZIfhpPnKBa2+TrNu2+sT37bctSY4mPmYntdbdUsra4SMuJFfZPGC5ut6+5H+OdmLzMMnsxtepfDjWTjZXjsxgPqL09YXVWpd+Mm41JhdJlvfxU7bdaHa9jT00V6WUfYeZuEwpKBdJFqWU1QO/j/Mk85G/l78rpVw47D7khO64vG4H+n4p5fShw5IkpZRFKWWW5HE253XG6MShZ+YyRu+zuediUUq57PuLbb++42yEy6VfOrFr5jKmqLxIsl9KORtCWNpM5jybE79vzF7EhX5HZXA/LUspl22p9LW4iAv98HWSw6FG5SORmSf540jem2PPG4nLEF0leVxKmQ9l+XOLwCxGFJiZQ1VchuRFu/qzHOsOtsC8sDQSF+5vtvKrUsrZFHa27edrMxdxoVvX51ZWE9vveYvqUO15Ulpc+uxP7dzKemo73vZ5PvDdOHQIi0vfvG/LoPMpD0I7tzTkS9SWRuLSK2+TzCa4DPoppy22Zi7igrBsfXk01BmcR1bEpVdhWRuKHxns8rDWavYiLsLS89nLUM+97HsHxUVYzF66YOYiLsLS89nLKsO878XMRVzu3ZWw3NpCXMSFT3uf5ERYbu1CXMSFT5u73HznpdHQ7nnZ886Jy3154QOcv8hyaC/YZ7uIy314M5Unm8XlA4fiQpfeZ/gP4vWB5aS48AOnY/vkuIcw5g/KEhfuuhxaGIatGdr9LpZFjtnOWA5t19BmgLviQhf+ajm0dStDIC5T9z6b3yjIdq0NgbhM3cJduCAuXTg3BJ1YGgJxmbLXzrWAuHThwhCAuIgLiMsgvHEiF8SlCytDAOLSBbMWEBdAXABxARAXQFwAcQEQF0BcAHEBEBdAXABxAcTFEADiAogLIC4A4gKICyAuAOICiAsgLgDiAogLIC4A4gKICyAuAOICiAsgLgDiAogLIC4A4gKICyAuAOICiAsgLgDiAogLIC4A4gKICyAuAOICiAsgLgDiAogLIC4A4gKICyAuAOICiAsgLgDiAogLIC4A4gKICyAuAOICiAsgLgDiAogLIC4A4gKICyAuAOICiAsgLgDiAogLIC4A4gKICyAuAOICiAsgLgDiAnSu9PWF1VqXSY4GNJZXSS47/jsWpZTFFA/UJ0+e/Hr257/8bSiv991//r3+57/W65G+HYu///Y3nz0OH+nr1uy1rUvLqQ7u/37/h//+4927vYEdD2P1s45DyyKgE+ICiAsgLoC4AIgLIC6AuACICyAugLgAiAsgLoC4AIgLIC6AuACICyAugLgAiAsgLoC4AIgLIC6AuACICyAugLgAiAsgLoC4AIgL0CePevzaTpPseos+cDnhfV8leewQGM5x+H9W4Aq+Hmt1lwAAAABJRU5ErkJggg==") center/contain no-repeat;
}

/* collapsed rail: symbol replaces the wordmark. .sidebar-collapse is
   matched on any ancestor, so it works whether AdminLTE puts it on
   body or on .app-wrapper. */
.sidebar-collapse .app-sidebar .brand-link{ justify-content:center; padding-left:0; padding-right:0; }
.sidebar-collapse .app-sidebar .brand-link .brand-mark{ display:block; }
.sidebar-collapse .app-sidebar .brand-link img,
.sidebar-collapse .app-sidebar .brand-text{ display:none; }
.sidebar-collapse .app-sidebar .nav-sidebar .nav-link p,
.sidebar-collapse .app-sidebar .nav-sidebar .nav-link .nav-arrow,
.sidebar-collapse .app-sidebar .nav-sidebar .badge{ display:none; }
.sidebar-collapse .app-sidebar .nav-sidebar > .nav-divider{ margin-left:8px; margin-right:8px; }

/* level 3 reads as nesting, not as level 2 that drifted right */
.app-sidebar .nav-treeview .nav-treeview{ position:relative; }
.app-sidebar .nav-treeview .nav-treeview::before{
  content:""; position:absolute; inset-inline-start:46px; top:2px; bottom:2px; width:1px;
  background:var(--hy-shell-line, rgba(255,255,255,.09));
}

/* A divider is only a separator if something follows it. For Anonymous every
   item below Downloads is gated away and both dividers render back-to-back at
   the end; partial gating can also leave two adjacent. Doc 41. */
.app-sidebar .nav-sidebar > .nav-divider:not(:has(~ .nav-item)){ display:none; }
.app-sidebar .nav-sidebar > .nav-divider + .nav-divider{ display:none; }

/* ===========================================================================
   Profile page (pageAppProfile / sfContentProfile) - Direction B
   Portal preferences + the merged userinfo detail. Adds the three shell-wide
   switches the page writes: data-bs-theme, data-hy-density.
   =========================================================================== */

.hy-profpage .hy-idrow{ align-items:center; }
.hy-profpage .hy-spec .row .v select{ max-width:300px; }
.hy-profpage .hy-spec .row{ grid-template-columns:130px 1fr; padding:9px 0; }
.hy-note{ margin:10px 0 0; font-size:11.5px; color:var(--hy-ink-3); }
.hy-panel > h3 .act.bad{ color:var(--hy-crit); }
.hy-chips{ display:flex; flex-wrap:wrap; gap:5px; }

/* avatar - the monogram sits underneath, the photo covers it when there is one */
.hy-avatar{ position:relative; width:64px; height:64px; flex:none; overflow:hidden;
  border-radius:var(--hy-r-lg); background:var(--hy-teal-wash); color:var(--hy-teal);
  display:grid; place-items:center; border:1px solid rgba(86,179,181,.28);
  font:700 21px/1 var(--hy-sans); letter-spacing:.02em; }
.hy-avatar img{ position:absolute; top:0; inset-inline-start:0; width:100%; height:100%; object-fit:cover; }

/* diagnostics drawer body */
.hy-diag{ padding:14px 16px 24px; }
.hy-diag h4.hy-lbl{ margin:18px 0 6px; }
.hy-diag h4.hy-lbl:first-child{ margin-top:0; }
.hy-diag .row{ display:grid; grid-template-columns:126px 1fr; gap:10px; margin:0;
  padding:5px 0; border-bottom:1px solid var(--hy-line); align-items:baseline; }
.hy-diag .row .k{ font-size:11.5px; color:var(--hy-ink-3); }
.hy-diag .row .v{ font-size:12px; color:var(--hy-ink); min-width:0; overflow-wrap:anywhere; }
.hy-rlist div{ font-size:11.5px; padding:3px 0; border-bottom:1px solid var(--hy-line);
  overflow-wrap:anywhere; color:var(--hy-ink-2); }
.hy-rlist div:last-child{ border-bottom:0; }

/* --- density ------------------------------------------------------------
   One attribute on <html>, set by the shell from the stored preference. */
html[data-hy-density="compact"] .hy-spec .row{ padding:4px 0; }
html[data-hy-density="compact"] .hy-panel{ margin-bottom:14px; }
html[data-hy-density="compact"] .hy-tile{ padding:8px 10px; }
html[data-hy-density="compact"] .hy-tile .v{ font-size:18px; }
html[data-hy-density="compact"] .hy-hero.hy-block{ padding:14px 14px 14px; }
html[data-hy-density="compact"] .card-body{ padding:10px 12px; }
html[data-hy-density="compact"] .card > .card-header{ padding:8px 12px; }
html[data-hy-density="compact"] .table > :not(caption) > * > *{ padding:.28rem .5rem; }
html[data-hy-density="compact"] .tabulator .tabulator-row .tabulator-cell{ padding:3px 6px 3px 7px !important; }
html[data-hy-density="compact"] .hy-diag .row{ padding:3px 0; }

/* --- dark theme ---------------------------------------------------------
   Bootstrap 5.3 and AdminLTE 4.3 both key off [data-bs-theme], so their own
   components re-map themselves. All this block has to do is restate the
   Humly tokens for a dark ground - the components already read them. */
[data-bs-theme="dark"]{
  --hy-ground:#15160F; --hy-surface:#1D1F18; --hy-surface-2:#24261F; --hy-sunk:#2A2C24;
  --hy-ink:#E7E3D8; --hy-ink-2:#BDB9AD; --hy-ink-3:#8E8B81;
  --hy-line:#33352C; --hy-line-2:#454839;
  --hy-teal:#6FC7C9; --hy-teal-bright:#56B3B5; --hy-teal-wash:rgba(86,179,181,.16);
  --hy-olive:#8E9382; --hy-earth:#C69A7B; --hy-gold:#D7A24F;
  --hy-ok:#79C4A2; --hy-ok-wash:rgba(121,196,162,.16);
  --hy-warn:#D9AC63; --hy-warn-wash:rgba(217,172,99,.16);
  --hy-crit:#E09480; --hy-crit-wash:rgba(224,148,128,.16);
  --hy-info:#6FC7C9; --hy-info-wash:rgba(111,199,201,.16);
  --hy-shell:#101109; --hy-shell-2:#1B1D16; --hy-shell-ink:#E5E1D6;
  --hy-shell-ink-2:#9A968B; --hy-shell-line:#2C2E25;
}

/* the few literal colours in this stylesheet that assume paper */
[data-bs-theme="dark"] .hy-avatar{ border-color:rgba(111,199,201,.30); }
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .card > .card-header,
[data-bs-theme="dark"] .card-footer{ background:var(--hy-surface); color:var(--hy-ink); }
[data-bs-theme="dark"] .btn-secondary{ background:var(--hy-surface-2); border-color:var(--hy-line-2); color:var(--hy-ink); }
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select{ background:var(--hy-surface-2); border-color:var(--hy-line-2); color:var(--hy-ink); }
[data-bs-theme="dark"] .app-header{ background:var(--hy-surface) !important; border-bottom-color:var(--hy-line); }
[data-bs-theme="dark"] .app-footer{ background:var(--hy-surface); border-top-color:var(--hy-line); }
[data-bs-theme="dark"] .hy-drawer{ background:var(--hy-surface); border-inline-start-color:var(--hy-line-2); }
[data-bs-theme="dark"] .tabulator,
[data-bs-theme="dark"] .tabulator .tabulator-header,
[data-bs-theme="dark"] .tabulator .tabulator-row{ background:var(--hy-surface); color:var(--hy-ink); }
[data-bs-theme="dark"] .tabulator .tabulator-row.tabulator-row-even{ background:var(--hy-surface-2); }
[data-bs-theme="dark"] .tabulator .tabulator-col{ background:var(--hy-sunk); color:var(--hy-ink-2); border-color:var(--hy-line); }

/* --- header user menu (sfAppHeader_variant2) ----------------------------
   Sign out lives here, where people look for it, as well as in the menu. */
.hy-um .hy-um-toggle{ display:flex; align-items:center; gap:9px; padding:5px 10px;
  border-radius:var(--hy-r); }
.hy-um .hy-um-toggle:hover{ background:var(--hy-sunk); }
.hy-um .hy-um-toggle::after{ display:none; }
.hy-um-av{ width:26px; height:26px; border-radius:5px; object-fit:cover; flex:none;
  border:1px solid var(--hy-line-2); background:var(--hy-sunk); }
.hy-um-name{ font-size:12.5px; font-weight:600; color:var(--hy-ink); }
.hy-um-caret{ font-size:10px; color:var(--hy-ink-3); }
.hy-um-in{ font-size:12.5px; font-weight:600; }
.hy-um-in i{ margin-inline-end:6px; }

.hy-um-menu{ min-width:232px; padding:6px; border:1px solid var(--hy-line);
  border-radius:var(--hy-r-lg); background:var(--hy-surface); box-shadow:0 8px 24px rgba(0,0,0,.13); }
.hy-um-menu .hy-um-head{ padding:8px 10px 9px; }
.hy-um-menu .hy-um-head b{ display:block; font-size:13px; color:var(--hy-ink); }
.hy-um-menu .hy-um-head span{ display:block; font-family:var(--hy-mono); font-size:10.5px;
  color:var(--hy-ink-3); margin-top:2px; overflow-wrap:anywhere; }
.hy-um-menu .dropdown-divider{ margin:4px 0; border-top-color:var(--hy-line); }
.hy-um-menu .dropdown-item{ display:flex; align-items:center; gap:9px; font-size:12.5px;
  font-weight:500; padding:7px 10px; border-radius:var(--hy-r); color:var(--hy-ink); }
.hy-um-menu .dropdown-item i{ width:14px; color:var(--hy-ink-3); font-size:12px; }
.hy-um-menu .dropdown-item:hover{ background:var(--hy-sunk); color:var(--hy-ink); }
.hy-um-menu .hy-um-out:hover{ background:var(--hy-crit-wash); color:var(--hy-crit); }
.hy-um-menu .hy-um-out:hover i{ color:var(--hy-crit); }

@media (max-width: 575.98px){ .hy-um-name{ display:none; } }

/* breadcrumb: float-sm-right is a Bootstrap 4 class and does nothing under
   Bootstrap 5, which left every content-header breadcrumb stranded mid-row.
   The markup fix is float-sm-end; this is the belt-and-braces for any page
   still carrying the old class. */
.content-header .breadcrumb.float-sm-right{ justify-content:flex-end; }

/* --- anonymous home, pass 4 -------------------------------------------------
   The news view now wraps the date, the separator and the Subject in spans
   (hy-newsdate / hy-newssep / hy-newshead), so the headline is a flex row:
   title left, chip hard right - what the old AdminLTE "right" class meant
   before it was dropped. Pass 3's b:first-of-type block rule is what pushed
   the chip onto a line of its own; the <b> is no longer a direct child of
   p.updated, so it no longer applies.
   Chip classes on the news documents are Bootstrap 5 now (text-bg-*), and
   BS5 declares those utilities !important, so the washed token treatment
   has to answer in kind.
   -------------------------------------------------------------------------- */

.hy-anonpage .updates-scroll .item .hy-newsdate{
  display:block; font-family:var(--hy-mono); font-size:10.5px; letter-spacing:.06em;
  color:var(--hy-ink-3);
}
.hy-anonpage .updates-scroll .item .hy-newssep{ display:none; }
.hy-anonpage .updates-scroll .item .hy-newshead{
  display:flex; align-items:center; gap:8px; margin:1px 0 3px;
}
.hy-anonpage .updates-scroll .item .hy-newshead b{
  font-size:12.5px; font-weight:700; color:var(--hy-ink);
}
.hy-anonpage .updates-scroll .item .hy-newshead .badge{ margin-inline-start:auto; flex:none; }
.hy-anonpage .updates-scroll .item p.updated > br:first-of-type{ display:none; }

.hy-anonpage .updates-scroll .item .badge.text-bg-success{
  background:var(--hy-teal-wash)!important; color:var(--hy-teal)!important; }
.hy-anonpage .updates-scroll .item .badge.text-bg-warning{
  background:var(--hy-warn-wash)!important; color:var(--hy-warn)!important; }
.hy-anonpage .updates-scroll .item .badge.text-bg-danger{
  background:var(--hy-crit-wash)!important; color:var(--hy-crit)!important; }
.hy-anonpage .updates-scroll .item .badge.text-bg-secondary{
  background:var(--hy-sunk)!important; color:var(--hy-ink-3)!important; }
/* resolved incident: <s> inside the chip - stays the muted "done" colour */
.hy-anonpage .updates-scroll .item:has(.badge s) .badge{
  background:var(--hy-ok-wash)!important; color:var(--hy-ok)!important; }



/* ===========================================================================
   Signed-in home (pageAppHome, sfHomeLoggedIn). Scoped to .hy-homepage.
   Deliberately does NOT touch the sidebar: the anon page overrides the inline
   olive, the rest of the portal does not, and Home should match the rest.
   The shared blocks below are duplicated from the .hy-anonpage rules on
   purpose - merging both into one .hy-page class is a separate sweep.
   =========================================================================== */

.hy-homepage{ padding-top:6px; }
.content-wrapper:has(.hy-homepage) > .content-header,
.app-main:has(.hy-homepage) > .app-content-header{ display:none; }
.hy-homepage > .container-fluid > .hy-hero.hy-block{ margin-bottom:14px;
  border:1px solid var(--hy-line); border-radius:var(--hy-r-lg); padding:18px 20px; }
.hy-homehero .hy-title h1{ font-size:22px; }
.hy-homehero .hy-meta .sep{ color:var(--hy-line-2); }
.hy-homehero .hy-acts .btn{ white-space:nowrap; }
.hy-homepage .hy-note{ margin:9px 0 0; font-size:11.5px; color:var(--hy-ink-3); }
.hy-homepage .hy-panel > h3 a.act{ text-decoration:none; margin-inline-start:auto; }
.hy-homepage .hy-panel > h3 a.act:hover{ text-decoration:underline; }
.hy-homepage .hy-panel > h3 .n{ font-family:var(--hy-sans); font-size:10px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; padding:2px 6px; border-radius:3px;
  background:var(--hy-sunk); color:var(--hy-ink-3); }
.hy-homepage .hy-tiles{ margin-bottom:0; }
.hy-homepage .hy-tiles.hy-three{ grid-template-columns:repeat(3,1fr); }
.hy-homepage .hy-tiles.hy-four{ grid-template-columns:repeat(4,1fr); }

/* --- tiles that are links ------------------------------------------------- */
.hy-homepage a.hy-tile{ position:relative; text-decoration:none; color:inherit; display:block; }
.hy-homepage a.hy-tile:hover{ background:var(--hy-sunk); }
.hy-homepage a.hy-tile:focus-visible{ outline:2px solid var(--hy-teal); outline-offset:-2px; }
.hy-homepage .hy-tile .arw{ position:absolute; top:11px; inset-inline-end:12px; font-size:10px;
  color:var(--hy-line-2); }
.hy-homepage a.hy-tile:hover .arw{ color:var(--hy-teal); }
.hy-homepage .hy-tile .k{ display:flex; align-items:center; gap:5px; }
.hy-homepage .hy-tile .k .dot{ width:6px; height:6px; border-radius:50%; flex:none;
  background:var(--hy-ink-3); }
.hy-homepage .hy-tile.crit .v{ color:var(--hy-crit); }
.hy-homepage .hy-tile.crit .k .dot{ background:var(--hy-crit); }
.hy-homepage .hy-tile.warn .v{ color:var(--hy-warn); }
.hy-homepage .hy-tile.warn .k .dot{ background:var(--hy-warn); }
.hy-homepage .hy-tile.ok .k .dot{ background:var(--hy-ok); }
.hy-homepage .hy-wait{ color:var(--hy-line-2); letter-spacing:.12em; }
.hy-homepage .hy-na{ color:var(--hy-ink-3); font-size:14px; }

/* --- registrations chart -------------------------------------------------- */
.hy-homepage .hy-chartbox{ border:1px solid var(--hy-line); border-radius:var(--hy-r-lg);
  background:var(--hy-surface); padding:14px 16px 11px; }
.hy-homepage .hy-chartwrap{ position:relative; height:270px; }
.hy-homepage .hy-legend{ display:flex; gap:16px; flex-wrap:wrap; margin-top:9px;
  font-size:11px; color:var(--hy-ink-3); }
.hy-homepage .hy-legend span{ display:inline-flex; align-items:center; gap:6px; }
.hy-homepage .hy-legend i.sw{ width:10px; height:10px; border-radius:2px; display:inline-block;
  flex:none; }
.hy-homepage .hy-legend i.sw-proj{ background:rgba(86,179,181,.35); }

/* --- sfBoxUptime, same treatment as the anonymous page -------------------- */
.hy-homepage .hu-wrap.card{ border:1px solid var(--hy-line); border-radius:var(--hy-r-lg);
  background:var(--hy-surface); margin-bottom:14px; }
.hy-homepage .hu-wrap .card-body{ padding:14px 16px; }
.hy-homepage .hu-cardhead{ display:flex; align-items:center; gap:10px; margin:0 0 11px;
  font-family:var(--hy-mono); font-size:11px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--hy-ink-3); }
.hy-homepage .hu-cardhead > span{ display:inline-flex; align-items:center; gap:6px; }
.hy-homepage .hu-cardhead a{ color:var(--hy-teal); text-decoration:none; }
.hy-homepage .hu-cardhead .btn{ margin-inline-start:auto; }
.hy-homepage .hu-wrap .card-text{ margin:0; }
.hy-homepage .hu-strip{ display:block; width:100%; padding:0; border:0; background:none;
  text-align:start; cursor:pointer; }
.hy-homepage .hu-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  border:1px solid var(--hy-line); border-radius:var(--hy-r-lg); overflow:hidden;
  background:var(--hy-line); gap:1px; }
.hy-homepage .hu-kpi{ background:var(--hy-surface); padding:12px 14px; }
.hy-homepage .hu-big{ font-family:var(--hy-mono); font-size:21px; font-weight:500;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.15; }
.hy-homepage .hu-un{ font-size:10.5px; color:var(--hy-ink-3); font-weight:400;
  letter-spacing:0; margin-inline-start:3px; }
.hy-homepage .hu-cap{ font-size:11px; color:var(--hy-ink-3); margin-top:2px; }
.hy-homepage .hu-load,.hy-homepage .hu-err{ font-size:11.5px; color:var(--hy-ink-3);
  padding:12px 14px; border:1px solid var(--hy-line); border-radius:var(--hy-r-lg); }
.hy-homepage .hu-err{ color:var(--hy-crit); background:var(--hy-crit-wash); border-color:transparent; }

/* --- sfBoxNews / sfBoxContact, same treatment as the anonymous page ------- */
.hy-homepage .updates-scroll{ max-height:none; overflow:visible; padding:0 16px 4px; }
.hy-homepage .updates-scroll .item{ padding:11px 0; border-bottom:1px solid var(--hy-line); }
.hy-homepage .updates-scroll .item:last-child{ border-bottom:0; }
.hy-homepage .updates-scroll .item p.updated{ margin:0 0 2px; font-size:12px; color:var(--hy-ink-2); }
.hy-homepage .updates-scroll .item .hy-newsdate{ display:block; font-family:var(--hy-mono);
  font-size:10.5px; color:var(--hy-ink-3); }
.hy-homepage .updates-scroll .item .hy-newssep{ display:none; }
.hy-homepage .updates-scroll .item .hy-newshead{ display:flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:700; color:var(--hy-ink); margin-top:2px; }
.hy-homepage .updates-scroll .item .hy-newshead .badge{ margin-inline-start:auto; }
.hy-homepage .updates-scroll .item p.updated br:first-of-type{ display:none; }
.hy-homepage .updates-scroll .item .badge{ font-family:var(--hy-mono); font-size:9.5px;
  font-weight:500; letter-spacing:.08em; text-transform:uppercase; border-radius:2px;
  padding:3px 6px; vertical-align:1px; flex:none; }
.hy-homepage .updates-scroll .item .badge.text-bg-success{ background:var(--hy-teal-wash) !important;
  color:var(--hy-teal) !important; }
.hy-homepage .updates-scroll .item .badge.text-bg-warning{ background:var(--hy-warn-wash) !important;
  color:var(--hy-warn) !important; }
.hy-homepage .updates-scroll .item .badge.text-bg-danger{ background:var(--hy-crit-wash) !important;
  color:var(--hy-crit) !important; }
.hy-homepage .updates-scroll .item .badge.text-bg-secondary{ background:var(--hy-sunk) !important;
  color:var(--hy-ink-3) !important; }
.hy-homepage .updates-scroll .item .badge s{ text-decoration:none; }
.hy-homepage .updates-scroll .item:has(.badge s){ color:var(--hy-ink-3); }
.hy-homepage .updates-scroll .item:has(.badge s) .badge{ background:var(--hy-ok-wash) !important;
  color:var(--hy-ok) !important; }
.hy-homepage .updates-scroll .item s{ color:var(--hy-ink-3); }
.hy-homepage .updates-scroll .item hr{ margin:7px 0; border-color:var(--hy-line); opacity:1; }
.hy-homepage .updates-scroll .item a{ color:var(--hy-teal); }
.hy-homepage .card .card-header h5{ font-family:var(--hy-mono); font-size:11px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--hy-ink-3); }
.hy-homepage .card .card-body{ font-size:12.5px; }
.hy-homepage .card .card-body a{ color:var(--hy-teal); }

@media (max-width:1400px){
  .hy-homepage .hy-tiles.hy-four{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .hy-homepage .hy-tiles.hy-three{ grid-template-columns:repeat(2,1fr); }
  .hy-homehero .hy-acts{ width:100%; }
}

/* --- adjustments after the first live look -------------------------------
   1. 34 news items ran the right column to 4,765px against 1,071px of content
      on the left - two and a half screens of empty gutter. Capped, with its
      own scroll, so the two columns end together.
   2. sfBoxContact is card-primary card-outline, whose 3px top border is still
      Bootstrap's default blue (#0D6EFD) - the one saturated line left on the
      page. Flattened to the same hairline as every other card here. The same
      blue is on the anonymous page and wants the wider card-outline sweep.
   3. The 1400px tile breakpoint was too eager: four tiles still read fine at
      1150, so 2-up is pushed down to that.
   ------------------------------------------------------------------------ */
.hy-homepage .updates-scroll{ max-height:520px; overflow-y:auto; overscroll-behavior:contain; }
.hy-homepage .col-lg-4 .card.card-outline{ border-top-width:1px; border-top-color:var(--hy-line); }
@media (min-width:1151px){
  .hy-homepage .hy-tiles.hy-four{ grid-template-columns:repeat(4,1fr); }
}

/* Breathing room at the foot of the Updates well - the last item was sitting
   4px off the card edge, both mid-scroll and at the end. */
.hy-homepage .updates-scroll{ padding-top:4px; padding-bottom:14px; }


/* ===========================================================================
   PORTAL-WIDE, not signed-in-home specific: the dead clickable strip under
   the footer.

   .app-wrapper is display:grid. Two elements inside it have no grid-area and
   no positioning, so the grid gives each its own row *below* the footer:

     aside.control-sidebar   AdminLTE 3 leftover. AdminLTE 4 dropped the
                             control sidebar entirely - the class has zero
                             rules in adminlte.min.css - so it renders as a
                             plain static block holding sfControlSideBar's
                             stub markup, <h5>Title</h5><p>Sidebar content</p>.
                             Nothing in the portal toggles it.
     div.sidebar-overlay     Only gets position:absolute from
                             `.sidebar-expand-lg.sidebar-open .sidebar-overlay`,
                             i.e. while the mobile sidebar is open. The rest of
                             the time it is in flow, full width, invisible, and
                             cursor:pointer - the "nothing" you can click.

   Hiding the overlay is scoped to :not(.sidebar-open) so the mobile off-canvas
   backdrop still works. sfControlSideBar itself should be deleted from the
   shell (doc 28) - this only stops it rendering.
   =========================================================================== */
.app-wrapper > .control-sidebar{ display:none; }
body:not(.sidebar-open) .app-wrapper > .sidebar-overlay{ display:none; }



/* ===========================================================================
   Accounts dashboard (pageAppAccountsDash, sfContentAccDash).
   Scoped to .hy-accdash. Shares the panel/tile vocabulary with the signed-in
   home; the blocks duplicated from .hy-homepage are duplicated on purpose -
   folding .hy-homepage / .hy-anonpage / .hy-accdash into one .hy-page class
   is a separate sweep, and doing it here would touch two live pages.
   =========================================================================== */

.hy-accdash{ padding-top:6px; }
.content-wrapper:has(.hy-accdash) > .content-header,
.app-main:has(.hy-accdash) > .app-content-header{ display:none; }

/* --- header band ---------------------------------------------------------- */
.hy-accdash .hy-acchead{ margin-bottom:16px; border:1px solid var(--hy-line);
  border-radius:var(--hy-r-lg); background:var(--hy-surface); padding:16px 20px; }
.hy-accdash .hy-acchead .hy-idrow{ padding-bottom:0; }
.hy-accdash .hy-acchead .hy-title h1{ font-size:22px; }
.hy-accdash .hy-acchead .hy-meta{ font-size:12px; color:var(--hy-ink-3); }
.hy-accdash .hy-acchead .hy-meta .sep{ width:1px; height:11px;
  background:var(--hy-line-2); display:inline-block; }
.hy-accdash .hy-acchead .btn{ white-space:nowrap; }

/* --- panels --------------------------------------------------------------- */
.hy-accdash .hy-panel > h3 a.act{ text-decoration:none; margin-inline-start:auto; }
.hy-accdash .hy-panel > h3 a.act:hover{ text-decoration:underline; }
.hy-accdash .hy-tiles{ margin-bottom:0; }
.hy-accdash .hy-tiles.hy-four{ grid-template-columns:repeat(4,1fr); }
.hy-accdash .hy-tiles.hy-five{ grid-template-columns:repeat(5,1fr); }

/* --- tiles that are links ------------------------------------------------- */
.hy-accdash a.hy-tile{ position:relative; text-decoration:none; color:inherit; display:block; }
.hy-accdash a.hy-tile:hover{ background:var(--hy-sunk); }
.hy-accdash a.hy-tile:focus-visible{ outline:2px solid var(--hy-teal); outline-offset:-2px; }
.hy-accdash .hy-tile{ position:relative; }
.hy-accdash .hy-tile .arw{ position:absolute; top:11px; inset-inline-end:12px; font-size:10px;
  color:var(--hy-line-2); }
.hy-accdash a.hy-tile:hover .arw{ color:var(--hy-teal); }
.hy-accdash .hy-tile .k{ display:flex; align-items:center; gap:5px; }
.hy-accdash .hy-tile .k .dot{ width:6px; height:6px; border-radius:50%; flex:none;
  background:var(--hy-ink-3); }
.hy-accdash .hy-tile .sub{ margin-top:5px; font-family:var(--hy-mono); font-size:10px;
  color:var(--hy-ink-3); letter-spacing:.01em; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; }
.hy-accdash .hy-tile .sub.up{ color:var(--hy-ok); }
.hy-accdash .hy-tile .sub.down{ color:var(--hy-crit); }
.hy-accdash .hy-tile.crit .v{ color:var(--hy-crit); }
.hy-accdash .hy-tile.crit .k .dot{ background:var(--hy-crit); }
.hy-accdash .hy-tile.warn .v{ color:var(--hy-warn); }
.hy-accdash .hy-tile.warn .k .dot{ background:var(--hy-warn); }
.hy-accdash .hy-tile.ok .k .dot{ background:var(--hy-ok); }
.hy-accdash .hy-wait{ color:var(--hy-line-2); letter-spacing:.12em; }
.hy-accdash .hy-na{ color:var(--hy-ink-3); font-size:14px; }

/* --- chart boxes ---------------------------------------------------------- */
.hy-accdash .hy-chartbox{ border:1px solid var(--hy-line); border-radius:var(--hy-r-lg);
  background:var(--hy-surface); padding:14px 16px 11px; }
.hy-accdash .hy-chartwrap{ position:relative; height:280px; }
.hy-accdash .hy-legend{ display:flex; gap:16px; flex-wrap:wrap; margin-top:9px;
  font-size:11px; color:var(--hy-ink-3); }
.hy-accdash .hy-legend span{ display:inline-flex; align-items:center; gap:6px; }
.hy-accdash .hy-legend i.sw{ width:10px; height:10px; border-radius:2px; display:inline-block;
  flex:none; }
.hy-accdash .hy-legend i.sw-proj{ background:rgba(86,179,181,.35); }
.hy-accdash .hy-note{ margin:9px 0 0; font-size:11.5px; color:var(--hy-ink-3); }

/* --- two-up donuts -------------------------------------------------------- */
.hy-accdash .hy-duo{ display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--hy-line); border:1px solid var(--hy-line);
  border-radius:var(--hy-r-lg); overflow:hidden; }
.hy-accdash .hy-duo > div{ background:var(--hy-surface); padding:13px 15px 11px;
  min-width:0; }
.hy-accdash .hy-duo h4{ margin:0 0 8px; font-size:12.5px; font-weight:600;
  color:var(--hy-ink-2); }
.hy-accdash .hy-donutwrap{ position:relative; height:236px; }
.hy-accdash .hy-duo .hy-note{ margin-top:8px; min-height:30px; }

/* --- share bars ----------------------------------------------------------- */
.hy-accdash .hy-share{ border:1px solid var(--hy-line); border-radius:var(--hy-r-lg);
  background:var(--hy-surface); overflow:hidden; }
.hy-accdash .hy-shareitem{ padding:14px 16px; border-bottom:1px solid var(--hy-line); }
.hy-accdash .hy-shareitem:last-child{ border-bottom:0; }
.hy-accdash .hy-shareitem h4{ margin:0 0 10px; font-size:12.5px; font-weight:600;
  color:var(--hy-ink-2); display:flex; align-items:baseline; gap:8px; }
.hy-accdash .hy-shareitem h4 .n{ margin-inline-start:auto; font-family:var(--hy-mono);
  font-size:10.5px; font-weight:400; color:var(--hy-ink-3);
  font-variant-numeric:tabular-nums; }
.hy-accdash .hy-sharebar{ display:flex; height:24px; border-radius:var(--hy-r);
  overflow:hidden; background:var(--hy-line); }
.hy-accdash .hy-sharebar > i{ display:block; height:100%; min-width:1px; }
.hy-accdash .hy-sharekeys{ display:flex; gap:8px 18px; flex-wrap:wrap; margin-top:11px;
  font-size:11.5px; color:var(--hy-ink-2); }
.hy-accdash .hy-sharekeys > span{ display:inline-flex; align-items:center; gap:6px;
  max-width:100%; }
.hy-accdash .hy-sharekeys > span > i{ width:9px; height:9px; border-radius:2px; flex:none; }
.hy-accdash .hy-sharekeys b{ font-family:var(--hy-mono); font-weight:500;
  font-variant-numeric:tabular-nums; color:var(--hy-ink); }

/* --- page footnote -------------------------------------------------------- */
.hy-accdash .hy-accfoot{ margin:2px 0 0; padding-top:12px;
  border-top:1px solid var(--hy-line); }

@media (max-width:1250px){
  .hy-accdash .hy-tiles.hy-five{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:1150px){
  .hy-accdash .hy-tiles.hy-four{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:880px){
  .hy-accdash .hy-duo{ grid-template-columns:1fr; }
  .hy-accdash .hy-tiles.hy-five{ grid-template-columns:repeat(2,1fr); }
  .hy-accdash .hy-acchead .hy-acts{ width:100%; }
}


/* ===========================================================================
   PAGE HEAD - the identity band on record forms
   webLicence, webLicenceType, webProduct, webCluster, webHost, webServer.
   Same component vocabulary as the Account hero (.hy-idrow / .hy-mark /
   .hy-title / .hy-meta / .hy-chip / .hy-acts); it only adds the wrapper, the
   record-type kicker and the action rail. Replaces the bare AdminLTE <h1>,
   which was still unstyled Bootstrap: calc(1.375rem + 1.5vw) at weight 500.
   =========================================================================== */

/* the band supersedes the h1 row wherever it is present */
.app-main:has(.hy-pagehead) > .app-content-header{ display:none; }

.hy-pagehead{ padding:28px 24px 0; background:var(--hy-surface); }
.hy-pagehead > .hy-idrow{ padding-bottom:14px; border-bottom:1px solid var(--hy-line); }
.hy-pagehead .hy-lbl{ margin-bottom:3px; }
.hy-pagehead .hy-meta{ margin-top:6px; }
.hy-pagehead .hy-acts{ margin-inline-start:auto; align-items:center; }

/* the mark carries record initials, not a glyph - <i> must not italicise */
.hy-mark i{ font-style:normal; }

/* a chip or meta pair whose formula resolved to "" collapses instead of
   rendering an empty pill or a dangling label */
.hy-chip:empty{ display:none; }
.hy-meta > span:has(> .hy-mono:empty){ display:none; }

/* actions relocated out of .card-footer by the mover in sfJsEnd */
.hy-pagehead .hy-acts .btn{ margin:0; }
.card-footer.hy-moved{ display:none; }

@media (max-width:640px){
  .hy-pagehead{ padding:20px 16px 0; }
  .hy-pagehead .hy-acts{ margin-inline-start:0; width:100%; }
}


/* ===========================================================================
   PRIMARY ACTION = GOLD
   The primary button moves from teal to the brand gold. Teal stays the accent
   for links, active nav, focus rings and meters, so the identity is unchanged;
   only the "this is the action" colour moves.
   Contrast: #D7A24F on #241B08 ink is ~7.7:1. The teal it replaces was
   #2E9598 on white, ~3.6:1 - below AA for normal text.
   Warning is unaffected: it is --hy-warn text on --hy-warn-wash, never a
   solid fill, so nothing now shares an appearance with it.
   =========================================================================== */

.btn-primary{
  background:var(--hy-gold);
  border-color:var(--hy-gold);
  color:#241B08;
}
.btn-primary:hover,
.btn-primary:focus{
  background:#C4913F;
  border-color:#C4913F;
  color:#241B08;
}
.btn-primary:active,
.btn-primary.active,
.btn-check:checked + .btn-primary{
  background:#B5843A !important;
  border-color:#B5843A !important;
  color:#241B08 !important;
}
.btn-primary:focus-visible{
  outline:2px solid var(--hy-ink);
  outline-offset:2px;
  box-shadow:none;
}
.btn-primary:disabled,
.btn-primary.disabled{
  background:var(--hy-gold);
  border-color:var(--hy-gold);
  color:#241B08;
  opacity:.45;
}

/* outline variant, used by the licence term picker */
.btn-outline-primary{
  color:#8A6320;
  border-color:var(--hy-gold);
  background:transparent;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus{
  background:var(--hy-gold);
  border-color:var(--hy-gold);
  color:#241B08;
}


/* Delete is destructive and must not wear the primary colour.
   Every web* form marks it up as .btn.btn-primary, so this is keyed on the id
   rather than editing seven forms. Matches the existing .btn-danger treatment:
   quiet until hovered, never a filled block competing with Save. */
#deleteButton,
#deleteButton.btn-primary{
  background:transparent !important;
  border-color:var(--hy-line-2) !important;
  color:var(--hy-crit) !important;
}
#deleteButton:hover,
#deleteButton:focus,
#deleteButton.btn-primary:hover,
#deleteButton.btn-primary:focus{
  background:var(--hy-crit-wash) !important;
  border-color:var(--hy-crit) !important;
  color:var(--hy-crit) !important;
}
#deleteButton:focus-visible{
  outline:2px solid var(--hy-crit);
  outline-offset:2px;
}


/* ===========================================================================
   TABULATOR — THE DENSE LEDGER          (direction C, 2026-09-09)
   Until now hcm.css carried nine Tabulator rules, none of them cosmetic, so
   every list page rendered stock tabulator_bootstrap5 inside a Humly page:
   Bootstrap-blue links, cool-grey zebra on warm paper, sentence-case headers.
   This block claims the grid for the token layer. It loads after the Tabulator
   theme, so equal specificity wins.

   Portal-wide and CSS-only. Chips, grouping and code->name resolution are
   per-view column config and are NOT in here.
   =========================================================================== */

/* --- the frame ----------------------------------------------------------- */
.tabulator{
  background:var(--hy-surface);
  border:1px solid var(--hy-line);
  border-radius:var(--hy-r-lg);
  font-family:var(--hy-sans);
  font-size:12px;
  color:var(--hy-ink);
  /* deliberately NOT overflow:hidden - it would clip header-filter dropdowns */
}
.card .tabulator,
.card-body > .tabulator{ border:0; border-radius:0; }

/* --- header: mono micro-caps, the portal's label voice -------------------- */
.tabulator .tabulator-header{
  background:var(--hy-surface);
  border-bottom:1px solid var(--hy-line-2);
  color:var(--hy-ink-3);
  font-weight:600;
}
.tabulator .tabulator-header .tabulator-col{
  background:transparent;
  border-inline-end:0;
}
.tabulator .tabulator-header .tabulator-col .tabulator-col-title{
  font-family:var(--hy-mono);
  font-size:10px;
  font-weight:600;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--hy-ink-3);
  padding:9px 10px 4px 0;
  white-space:nowrap;
}
.tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover{
  background:var(--hy-sunk);
}
.tabulator .tabulator-header .tabulator-col[aria-sort="ascending"] .tabulator-col-title,
.tabulator .tabulator-header .tabulator-col[aria-sort="descending"] .tabulator-col-title{
  color:var(--hy-ink);
}
/* sort arrows take the accent instead of Bootstrap's grey */
.tabulator .tabulator-col .tabulator-arrow{ border-bottom-color:var(--hy-line-2); }
.tabulator .tabulator-col[aria-sort="ascending"] .tabulator-arrow,
.tabulator .tabulator-col[aria-sort="descending"] .tabulator-arrow{
  border-bottom-color:var(--hy-teal); border-top-color:var(--hy-teal);
}

/* --- the per-column filter row ------------------------------------------- */
.tabulator .tabulator-header .tabulator-col .tabulator-header-filter input,
.tabulator .tabulator-header .tabulator-col .tabulator-header-filter select{
  height:24px;
  border:1px solid var(--hy-line-2);
  border-radius:var(--hy-r);
  background:var(--hy-surface);
  color:var(--hy-ink);
  font:400 11.5px var(--hy-sans);
  padding:0 7px;
}
.tabulator .tabulator-header .tabulator-col .tabulator-header-filter input:focus{
  outline:none; border-color:var(--hy-teal);
  box-shadow:0 0 0 2px var(--hy-teal-wash);
}

/* --- rows: hairlines, no zebra ------------------------------------------- */
.tabulator .tabulator-tableholder .tabulator-table{ background:transparent; }
.tabulator .tabulator-row,
.tabulator .tabulator-row.tabulator-row-even,
.tabulator .tabulator-row.tabulator-row-odd{
  background:transparent;
  border-bottom:1px solid var(--hy-line);
  min-height:0;
}
.tabulator .tabulator-row:hover,
.tabulator .tabulator-row.tabulator-row-even:hover{
  background:var(--hy-teal-wash);
}
.tabulator .tabulator-row.tabulator-selected,
.tabulator .tabulator-row.tabulator-selected:hover{
  background:var(--hy-teal-wash);
  box-shadow:inset 2px 0 0 var(--hy-teal);
}
.tabulator .tabulator-row .tabulator-cell{
  padding:5px 10px;
  border-inline-end:0;
  color:var(--hy-ink);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* record links: teal mono, not Bootstrap blue */
.tabulator .tabulator-row .tabulator-cell a{
  color:var(--hy-teal);
  font-family:var(--hy-mono);
  font-weight:500;
  text-decoration:none;
}
.tabulator .tabulator-row .tabulator-cell a:hover{ text-decoration:underline; }

/* opt-in helpers - set via a column's cssClass in the view config */
.tabulator .tabulator-cell.hy-num{ text-align:end; font-family:var(--hy-mono); }
.tabulator .tabulator-cell.hy-mono{ font-family:var(--hy-mono); }
.tabulator .tabulator-cell.hy-dim{ color:var(--hy-ink-3); }

/* --- group headers, where a view groups ---------------------------------- */
.tabulator .tabulator-row.tabulator-group{
  background:var(--hy-sunk);
  border-bottom:1px solid var(--hy-line);
  border-top:1px solid var(--hy-line);
  font-family:var(--hy-mono);
  font-size:9.5px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--hy-ink-3);
  padding:5px 10px;
  min-height:0;
}
.tabulator .tabulator-row.tabulator-group .tabulator-arrow{ border-inline-start-color:var(--hy-ink-3); }

/* --- footer -------------------------------------------------------------- */
.tabulator .tabulator-footer{
  background:var(--hy-surface);
  border-top:1px solid var(--hy-line-2);
  color:var(--hy-ink-3);
  font-family:var(--hy-mono);
  font-size:10.5px;
  padding:7px 10px;
}
.tabulator .tabulator-footer .tabulator-page{
  background:var(--hy-surface); border:1px solid var(--hy-line-2);
  border-radius:var(--hy-r); color:var(--hy-ink-2);
  font-family:var(--hy-mono); font-size:10.5px; padding:2px 7px;
}
.tabulator .tabulator-footer .tabulator-page.active{
  background:var(--hy-teal-wash); border-color:var(--hy-teal); color:var(--hy-teal);
}
.tabulator .tabulator-footer .tabulator-page:disabled{ opacity:.4; }

/* --- placeholder --------------------------------------------------------- */
.tabulator .tabulator-placeholder{ background:transparent; }
.tabulator .tabulator-placeholder .tabulator-placeholder-contents{
  color:var(--hy-ink-3); font-size:12.5px; font-weight:500;
}

/* --- density ------------------------------------------------------------- */
html[data-hy-density="compact"] .tabulator .tabulator-row .tabulator-cell{ padding:3px 8px; }
html[data-hy-density="compact"] .tabulator .tabulator-header .tabulator-col .tabulator-col-title{ padding:7px 8px; }

/* ===========================================================================
   DARK
   Tabulator's own theme hardcodes light greys, so each surface is restated.
   =========================================================================== */
[data-bs-theme="dark"] .tabulator{
  background:var(--hy-surface); border-color:var(--hy-line); color:var(--hy-ink);
}
[data-bs-theme="dark"] .tabulator .tabulator-header{
  background:var(--hy-surface); border-bottom-color:var(--hy-line-2); color:var(--hy-ink-3);
}
[data-bs-theme="dark"] .tabulator .tabulator-header .tabulator-col{ background:transparent; }
[data-bs-theme="dark"] .tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover{ background:var(--hy-sunk); }
html[data-bs-theme="dark"] .tabulator .tabulator-header .tabulator-col .tabulator-header-filter input,
html[data-bs-theme="dark"] .tabulator .tabulator-header .tabulator-col .tabulator-header-filter select{
  background:var(--hy-surface-2); border-color:var(--hy-line-2); color:var(--hy-ink);
}
[data-bs-theme="dark"] .tabulator .tabulator-tableholder{ background:transparent; }
[data-bs-theme="dark"] .tabulator .tabulator-row,
[data-bs-theme="dark"] .tabulator .tabulator-row.tabulator-row-even,
[data-bs-theme="dark"] .tabulator .tabulator-row.tabulator-row-odd{
  background:transparent; border-bottom-color:var(--hy-line); color:var(--hy-ink);
}
[data-bs-theme="dark"] .tabulator .tabulator-row:hover,
[data-bs-theme="dark"] .tabulator .tabulator-row.tabulator-row-even:hover{ background:var(--hy-teal-wash); }
[data-bs-theme="dark"] .tabulator .tabulator-row .tabulator-cell{ color:var(--hy-ink); }
[data-bs-theme="dark"] .tabulator .tabulator-row .tabulator-cell a{ color:var(--hy-teal); }
[data-bs-theme="dark"] .tabulator .tabulator-row.tabulator-group{
  background:var(--hy-sunk); color:var(--hy-ink-3);
  border-top-color:var(--hy-line); border-bottom-color:var(--hy-line);
}
[data-bs-theme="dark"] .tabulator .tabulator-footer{
  background:var(--hy-surface); border-top-color:var(--hy-line-2); color:var(--hy-ink-3);
}
[data-bs-theme="dark"] .tabulator .tabulator-footer .tabulator-page{
  background:var(--hy-surface-2); border-color:var(--hy-line-2); color:var(--hy-ink-2);
}
[data-bs-theme="dark"] .tabulator .tabulator-footer .tabulator-page.active{
  background:var(--hy-teal-wash); border-color:var(--hy-teal); color:var(--hy-teal);
}
[data-bs-theme="dark"] .tabulator .tabulator-placeholder-contents{ color:var(--hy-ink-3); }


/* ===========================================================================
   THE TWO PHANTOM HORIZONTAL SCROLLBARS        (2026-09-09)
   Measured on pageAppProductsAll: .app-main carried a 15px bar and
   .tabulator-tableholder a 10px bar, on a grid with nothing to scroll to.
   Two unrelated causes.
   =========================================================================== */

/* 1. The outer bar. Some list pages put a Bootstrap .row directly inside
      .app-content instead of wrapping it in .container-fluid. .row carries
      margin:0 -12px and .app-content only pads 8px, so the row hangs 4px
      past its parent on each side and .app-main scrolls.
      Only rows that are a DIRECT child of .app-content are missing their
      container, so this cannot touch correctly-nested rows.
      Measured: .app-main horizontal bar 15px -> 0.                          */
.app-content > .row{ margin-left:0; margin-right:0; }

/* 2. The inner bar. Every portal grid uses layout:"fitColumns", so the
      columns are sized to the available width and there is nothing to reach
      horizontally. Measured on the products view: the four columns sum to
      exactly 1021px, the holder's client width, while .tabulator-table
      reports 1029px - eight pixels of table element and zero pixels of
      content.
      Note the selector: Tabulator's own theme uses
      `.tabulator .tabulator-tableholder` (0,2,0). A bare
      `.tabulator-tableholder` (0,1,0) loses and silently does nothing.
      Measured: holder horizontal bar 10px -> 0, columns and row count
      unchanged.
      If a view ever genuinely needs horizontal scrolling, exempt it on that
      page rather than removing this:
        .hy-wide .tabulator .tabulator-tableholder{ overflow-x:auto; }       */
.tabulator .tabulator-tableholder{ overflow-x:hidden; }


/* ===========================================================================
   OUTLINE BUTTONS IN DARK                      (2026-09-09)
   The Search button on the list pages is .btn-outline-dark, which Bootstrap
   paints #212529 on transparent. On the dark surface that measured
   1.36:1 - effectively invisible. Pre-existing, but the ledger restyle made
   it obvious. .btn-primary next to it measures 7.42:1.
   =========================================================================== */
[data-bs-theme="dark"] .btn-outline-dark,
[data-bs-theme="dark"] .btn-outline-secondary,
[data-bs-theme="dark"] .btn-outline-light{
  color:var(--hy-ink-2);
  border-color:var(--hy-line-2);
  background-color:transparent;
}
[data-bs-theme="dark"] .btn-outline-dark:hover,
[data-bs-theme="dark"] .btn-outline-secondary:hover,
[data-bs-theme="dark"] .btn-outline-light:hover{
  background-color:var(--hy-surface-2);
  border-color:var(--hy-line-2);
  color:var(--hy-ink);
}
[data-bs-theme="dark"] .btn-outline-dark:focus-visible,
[data-bs-theme="dark"] .btn-outline-secondary:focus-visible{
  outline:2px solid var(--hy-teal); outline-offset:2px; box-shadow:none;
}


/* ===========================================================================
   LEDGER CELL FURNITURE                        (direction C, per-view)
   Emitted by column formatters in the content subforms, so the classes live
   here and the views only produce the markup.
   =========================================================================== */

/* a coded value rendered as a chip inside a grid cell */
.tabulator .tabulator-cell .hy-chip-cell{
  display:inline-flex; align-items:center;
  font-family:var(--hy-mono);
  font-size:9.5px; font-weight:500; letter-spacing:.07em; text-transform:uppercase;
  padding:2px 6px; border-radius:3px;
  background:var(--hy-teal-wash); color:var(--hy-teal);
  white-space:nowrap; line-height:1.5;
}
.tabulator .tabulator-cell .hy-chip-cell.olive{ background:rgba(92,97,81,.13); color:#4A4F41; }
.tabulator .tabulator-cell .hy-chip-cell.grey{ background:rgba(28,27,31,.06); color:var(--hy-ink-2); }

/* the count that trails a group header */
.tabulator .tabulator-row.tabulator-group .hy-grp-count{
  margin-inline-start:8px; padding:1px 6px; border-radius:3px;
  background:var(--hy-line); color:var(--hy-ink-3);
  font-family:var(--hy-mono); font-size:9px; letter-spacing:.06em;
}

/* the formatter's own fallback when a code has no name behind it */
.tabulator .tabulator-cell.text-danger{ color:var(--hy-crit) !important; }

[data-bs-theme="dark"] .tabulator .tabulator-cell .hy-chip-cell.olive{
  background:rgba(142,147,130,.18); color:#B9BEA9;
}
[data-bs-theme="dark"] .tabulator .tabulator-cell .hy-chip-cell.grey{
  background:rgba(231,227,216,.10); color:var(--hy-ink-2);
}
[data-bs-theme="dark"] .tabulator .tabulator-row.tabulator-group .hy-grp-count{
  background:var(--hy-line-2); color:var(--hy-ink-3);
}

/* ===========================================================================
   D6 - RAIL GRADIENT ("deep fall")
   The humly.com footer's olive, run top-to-bottom instead of left-to-right:
   brand olive at the wordmark easing to today's --hy-shell at the floor, so
   the bottom of the ramp is exactly the colour the rail already was.
   The ramp sits on .app-sidebar - fixed and viewport-tall - while
   .sidebar-wrapper is the scroller and stays transparent, so a long menu
   scrolls THROUGH the gradient instead of dragging it along.
   background-color on .app-sidebar (top of this file) stays as the fallback:
   if the image is ever dropped the rail is exactly as it was.
   =========================================================================== */

.app-sidebar{
  --hy-rail-top:#5C6151;
  background-image:linear-gradient(180deg,var(--hy-rail-top) 0%,var(--hy-shell) 100%);
  background-repeat:no-repeat;
  background-size:100% 100%;
}
[data-bs-theme="dark"] .app-sidebar{ --hy-rail-top:#494D40; }

/* the scroller must not paint over the ramp */
.app-sidebar .sidebar-wrapper{ background:transparent; }

/* the brand row sat on an opaque --hy-shell, which laid a flat block across
   the brightest end of the ramp. Keep the rule, drop the fill. */
.app-sidebar .sidebar-brand,
.app-sidebar .brand-link{ background:transparent; }

/* treeview children still read as their own ground, but as a darkener over
   the ramp rather than a solid band cut across it */
.app-sidebar .nav-treeview{ background:rgba(0,0,0,.22); }
[data-bs-theme="dark"] .app-sidebar .nav-treeview{ background:rgba(0,0,0,.30); }

/* ===========================================================================
   TABULATOR - ONE LEFT EDGE                (2026-09-09)
   Rickard: "the left side is a bit messy ... to many things not vertically
   aligned". Measured on pageAppEmailTemplatesAll - four things that should
   share one vertical were on three:
       toolbar controls   270   (.col-* Bootstrap gutter = content edge + 12)
       header label text  278   (col-content 5 + our col-title padding-left 10)
       filter input box   268   (col-content 5)
       cell text          268   (cell 5)
   The Tabulator bootstrap5 theme pins both insets with !important:
       .tabulator.table-sm ... .tabulator-col-content{ padding:5px !important }
       .tabulator.table-sm ... .tabulator-cell       { padding:5px !important }
   so they move only with !important back. The un-suffixed selectors are
   restated alongside them, because a grid WITHOUT .table-sm gets the theme's
   12px instead and would otherwise sit on a fourth edge of its own.
   7px here + the tabulator's own 5px = the page's 12px gutter, so the grid
   now hangs off the same line as the toolbar above it.
   =========================================================================== */

.tabulator .tabulator-header .tabulator-col .tabulator-col-content,
.tabulator.table-sm .tabulator-header .tabulator-col .tabulator-col-content{
  padding:5px 5px 5px 7px !important;
}
.tabulator .tabulator-row .tabulator-cell,
.tabulator.table-sm .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell{
  font-size:12px; /* HY GRID CELL FONT */
  padding:5px 5px 5px 7px !important;
}

/* The filter belongs to the label above it, not to the first row below it, so
   the air moves from over the field to under it. Measured 11 / 2.5 -> 6.5 / 9.5
   with the header row the same 72px height as before. */
.tabulator .tabulator-header .tabulator-col .tabulator-header-filter{
  margin-top:0;
  padding:0 0 7px;
}



/* ===========================================================================
   SMS LICENCES  (pageAppLicenceSMS / sfContentLicenceSMS)      2026-09-10
   A list page that carries the record-form identity band plus a telemetry
   strip, then the ledger grid.

   Inset: the band and the tile strip are direct children of .app-content, so
   they have to be moved onto the grid's own gutter by hand. .app-content pads
   8px; a .row's .col adds 12; a tabulator cell adds 12 (our 7 + its own 5).
   So everything that is NOT in a .col needs 12px of its own to line up.
   =========================================================================== */

.app-content > .hy-pagehead{ padding-left:12px; padding-right:12px; }
.app-content > .hy-tiles{ margin-left:12px; margin-right:12px; }

/* The toolbar row is not a direct child of .app-content here, so doc 49's
   phantom-scrollbar rule (.app-content > .row) does not reach it. */
.row.hy-smsbar{ margin-left:0; margin-right:0; }

/* --- tiles that carry a state ------------------------------------------- */
/* .hy-homepage and .hy-accdash already do this; generalise it so any page
   with a tile strip can colour a number without its own copy of the rule. */
.hy-tile.crit .v{ color:var(--hy-crit); }
.hy-tile.warn .v{ color:var(--hy-warn); }
.hy-meter i.crit{ background:var(--hy-crit); }

/* --- state chips in a grid cell ------------------------------------------ */
/* the ledger shipped teal / olive / grey; states need the semantic three */
.tabulator .tabulator-cell .hy-chip-cell.ok  { background:var(--hy-ok-wash);   color:var(--hy-ok); }
.tabulator .tabulator-cell .hy-chip-cell.warn{ background:var(--hy-warn-wash); color:var(--hy-warn); }
.tabulator .tabulator-cell .hy-chip-cell.crit{ background:var(--hy-crit-wash); color:var(--hy-crit); }

/* --- the consumption meter, one line inside a 5px-padded cell ------------ */
.hy-usecell{ display:flex; align-items:center; gap:8px; }
.hy-usecell .bar{ flex:1; min-width:30px; height:4px; border-radius:2px;
                  background:var(--hy-line); overflow:hidden; }
.hy-usecell .bar i{ display:block; height:100%; background:var(--hy-teal); }
.hy-usecell .bar i.warn{ background:var(--hy-gold); }
.hy-usecell .bar i.crit{ background:var(--hy-crit); }
.hy-usecell .pct{ font-family:var(--hy-mono); font-size:11.5px; font-weight:500;
                  font-variant-numeric:tabular-nums; color:var(--hy-ink-2);
                  min-width:30px; text-align:end; }

/* --- per-customer totals on the group header ----------------------------- */
/* sits beside the existing .hy-grp-count, same mono micro-caps voice */
.tabulator .tabulator-row.tabulator-group .hy-grp-sum{
  margin-inline-start:10px; font-family:var(--hy-mono); font-size:9.5px; font-weight:500;
  letter-spacing:.06em; color:var(--hy-ink-3); font-variant-numeric:tabular-nums; }
.tabulator .tabulator-row.tabulator-group .hy-grp-sum b{
  color:var(--hy-ink-2); font-weight:500; }

/* --- a date that has passed, or a number that has run out ---------------- */
.tabulator .tabulator-cell .hy-date-warn{ color:var(--hy-warn); }
.tabulator .tabulator-cell .hy-date-crit{ color:var(--hy-crit); font-weight:500; }
.tabulator .tabulator-cell .hy-na{ color:var(--hy-ink-3); }

/* ===========================================================================
   Signed-in home, fleet band pass (2026-09-10).
   The band is now the same five numbers as the public page ("Fleet at a
   glance") plus a "Meetings in <year>" band; the registrations chart is gone.
   Base .hy-tiles is repeat(auto-fit,minmax(112px,1fr)). At wide widths that is
   already correct - auto-fit collapses the spare tracks, so five items give
   five equal columns - but once the column drops below ~570px only four tracks
   fit and the fifth tile wraps onto a row of its own. Pin the track count and
   step it down the way the anonymous page already does.
   =========================================================================== */
.hy-homepage .hy-tiles.hy-five{ grid-template-columns:repeat(5,1fr); }
@media (max-width:1200px){
  .hy-homepage .hy-tiles.hy-five{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:640px){
  .hy-homepage .hy-tiles.hy-five{ grid-template-columns:repeat(2,1fr); }
}
/* ===========================================================================
   "View full report" in the uptime card head (2026-09-10).
   sfBoxUptime marks it up as .btn.btn-outline-primary.btn-xs - and btn-xs is a
   BOOTSTRAP 3 class. It has no rules under BS5, so the button falls back to the
   full .btn box: 6px/12px padding, 33px tall, in Azeret Mono at 600 - taller
   than the portal's own btn-sm (4px/8px, 29px) and 156px wide. Same family as
   the .open / .in / data-toggle / .pull-right leftovers in 00-working-rules.
   Sized here for the two home pages only, in the card head's own idiom, rather
   than by defining .btn-xs portal-wide - which would resize every other stale
   BS3 usage at the same time, sight unseen.
   =========================================================================== */
.hy-anonpage .hu-cardhead .btn.btn-xs,
.hy-homepage .hu-cardhead .btn.btn-xs{
  padding:3px 9px; font-size:10.5px; line-height:15px; font-weight:500;
  letter-spacing:.04em; border-radius:3px;
}

/* ===========================================================================
   hy-rings - utilization donuts, folded into the Meetings panel on the
   signed-in home. Scoped to .hy-homepage; the anonymous page has no meeting
   data and must not pick these up.

   The arcs carry pathLength="100", so a percentage IS the dash length and no
   arithmetic happens on the page or in this file. Segment start offsets come
   pre-negated from hcpFleetAggregate (fleet-public cols 25-28).
   =========================================================================== */

/* the tiles above now hand off to the rings, so only their top corners round */
.hy-homepage .hy-tiles.hy-four{ border-radius:var(--hy-r-lg) var(--hy-r-lg) 0 0; }

.hy-homepage .hy-rings{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--hy-line); border:1px solid var(--hy-line); border-top:0;
  border-radius:0 0 var(--hy-r-lg) var(--hy-r-lg); overflow:hidden; }
.hy-homepage .hy-ring{ background:var(--hy-surface); padding:14px;
  display:flex; flex-direction:column; align-items:center; gap:10px; }
.hy-homepage .hy-ring > h4{ font-family:var(--hy-mono); font-size:10px; font-weight:500;
  letter-spacing:.11em; text-transform:uppercase; color:var(--hy-ink-3); margin:0;
  text-align:center; }

.hy-homepage .hy-dn{ display:block; width:118px; height:118px; max-width:100%; }
.hy-homepage .hy-dn .trk{ fill:none; stroke:var(--hy-line-2); stroke-width:14; }
.hy-homepage .hy-dn .seg{ fill:none; stroke-width:14; }
.hy-homepage .hy-dn text{ text-anchor:middle; font-family:var(--hy-mono);
  font-variant-numeric:tabular-nums; }
.hy-homepage .hy-dn .dv{ font-size:26px; font-weight:500; fill:var(--hy-ink);
  letter-spacing:-.03em; }
.hy-homepage .hy-dn .du{ font-size:13px; fill:var(--hy-ink-3); }
.hy-homepage .hy-dn .dk{ font-size:9.5px; fill:var(--hy-ink-3); letter-spacing:.08em;
  text-transform:uppercase; }

.hy-homepage .hy-lg{ list-style:none; margin:0; padding:0; display:flex;
  flex-direction:column; gap:5px; width:100%; }
.hy-homepage .hy-lg li{ display:flex; align-items:center; gap:7px; font-size:11.5px;
  color:var(--hy-ink-2); }
.hy-homepage .hy-lg i{ width:9px; height:9px; border-radius:2px; flex:none;
  display:inline-block; }
.hy-homepage .hy-lg b{ margin-inline-start:auto; font-family:var(--hy-mono); font-size:11.5px;
  font-weight:500; font-variant-numeric:tabular-nums; color:var(--hy-ink); }

/* Segment colours are Humly steps, checked rather than eyeballed: worst
   adjacent pair dE 14.1 under deuteranopia, 23.9 under normal vision. Every
   segment is also named and valued in its own legend row, so identity never
   rests on hue alone - which is also the relief the gold needs, sitting at
   2.23:1 against the paper. */
.hy-homepage .s-tl{ stroke:var(--hy-teal);  background:var(--hy-teal); }
.hy-homepage .s-cr{ stroke:var(--hy-crit);  background:var(--hy-crit); }
.hy-homepage .s-gd{ stroke:var(--hy-gold);  background:var(--hy-gold); }
.hy-homepage .s-ol{ stroke:var(--hy-olive); background:var(--hy-olive); }
.hy-homepage .s-tk{ background:var(--hy-line-2); }

/* One column below the two-column breakpoint - three 118px rings plus their
   legends do not survive a 380px well. */
@media (max-width:900px){
  .hy-homepage .hy-rings{ grid-template-columns:1fr; }
}

/* --- optional-emails widget ("Email optional" on webAccount) --------------
   Third-party component, CSS-modules hashed class names, light-mode only:
   it paints its box #fff / #C3C2CF and its input #050038 and sets NO
   background on the input - so under color-scheme:dark Chrome's UA fills the
   input #3B3B3B and you type dark navy on dark grey. Its selectors are all
   single-class, so these win on specificity without !important. Values are
   .form-control's, so the widget follows the theme like every other field. */
.emails-input > div{
  background:var(--hy-surface-2);
  border:1px solid var(--hy-line-2);
  border-radius:var(--hy-r);
}
.emails-input > div:focus-within{
  border-color:var(--hy-teal);
  box-shadow:0 0 0 3px var(--hy-teal-wash);
}
.emails-input input{
  background:transparent;
  color:var(--hy-ink);
  caret-color:var(--hy-ink);
  font-family:var(--hy-sans);
  font-size:12.5px;
}
.emails-input input::placeholder{ color:var(--hy-ink-3); opacity:1; }
.emails-input > div > *:not(input){
  background:var(--hy-sunk);
  color:var(--hy-ink);
  border-color:var(--hy-line-2);
}

/* --- portal-wide table colour (project docs 76, 83) ------------------------
   Bootstrap 5.3 resolves a .table cell colour through --bs-table-color, whose
   default is var(--bs-emphasis-color). This portal themes itself with its own
   tokens and never sets [data-bs-theme="dark"], so that stayed at the LIGHT
   #1C1B1F and every hand-built .table rendered near-black on the dark ground.
   Only cells that fall through to the variable change: anything setting its own
   colour (state cells, .text-body-secondary, the Tabulator theme) is untouched.
   Proved page-scoped on webLicence first (doc 83), then lifted here 2026-09-14.
   ------------------------------------------------------------------------- */
.table { --bs-table-color: inherit; }


/* ==== doc 165: right-to-left pages (Arabic, Hebrew) ===========================================
   sfHead writes <html dir="rtl"> and loads AdminLTE's mirrored build (dist4/css/adminlte.rtl.min.css)
   when the page language is Arabic or Hebrew. This file's own left/right rules became logical
   properties (margin-inline-start ...) in doc 165, so they mirror by themselves. What follows applies
   to right-to-left pages only: fonts, direction icons, values that keep left-to-right order, Tabulator
   borders, and the left/right styles that live inside forms and subforms (their own <style> blocks and
   inline style attributes) - mirrored here, so those design elements did not have to change.
   ============================================================================================ */
html[lang="ar"]{ --hy-sans:"Manrope","Noto Sans Arabic",system-ui,-apple-system,"Segoe UI",sans-serif;
  --hy-mono:"Azeret Mono","Noto Sans Arabic",ui-monospace,SFMono-Regular,Consolas,monospace;
  --bs-font-sans-serif:var(--hy-sans); --bs-font-monospace:var(--hy-mono); --bs-body-font-family:var(--hy-sans); }
html[lang="he"]{ --hy-sans:"Manrope","Noto Sans Hebrew",system-ui,-apple-system,"Segoe UI",sans-serif;
  --hy-mono:"Azeret Mono","Noto Sans Hebrew",ui-monospace,SFMono-Regular,Consolas,monospace;
  --bs-font-sans-serif:var(--hy-sans); --bs-font-monospace:var(--hy-mono); --bs-body-font-family:var(--hy-sans); }
/* Arabic letters join up: tracked-out labels would pull them apart */
html[lang="ar"] body *{ letter-spacing:normal !important; }

/* icons that point a way */
[dir="rtl"] :is(.fa-arrow-right,.fa-arrow-left,.fa-chevron-right,.fa-chevron-left,.fa-angle-right,.fa-angle-left,
  .fa-angle-double-right,.fa-angle-double-left,.fa-caret-right,.fa-caret-left,.fa-long-arrow-alt-right,
  .fa-long-arrow-alt-left,.fa-arrow-circle-right,.fa-arrow-circle-left,.fa-chevron-circle-right,
  .fa-chevron-circle-left,.fa-sign-out-alt,.fa-sign-in-alt){ transform:scaleX(-1); }

/* values that keep left-to-right order inside right-to-left text: addresses, data cells, value rows */
[dir="rtl"] a[href^="mailto:"]{ unicode-bidi:isolate; direction:ltr; }
[dir="rtl"] :is(input[type="email"],input[type="url"]){ direction:ltr; text-align:right; }
[dir="rtl"] .tabulator .tabulator-row .tabulator-cell,
[dir="rtl"] .row > label + div{ unicode-bidi:plaintext; text-align:right; }
[dir="rtl"] .tabulator .tabulator-row .tabulator-cell.hy-num,
[dir="rtl"] .hy-usecell .pct{ text-align:left; }

/* Tabulator's own right-to-left rules draw column lines this theme removes */
.tabulator.tabulator-rtl .tabulator-header .tabulator-col,
.tabulator.tabulator-rtl .tabulator-row .tabulator-cell{ border-left:0; }

/* inline style attributes in forms and in page scripts */
[dir="rtl"] [style*="text-align:left"],[dir="rtl"] [style*="text-align: left"]{ text-align:right !important; }
[dir="rtl"] [style*="text-align:right"],[dir="rtl"] [style*="text-align: right"]{ text-align:left !important; }
[dir="rtl"] [style*="margin-left:6px"]{ margin-left:0 !important; margin-right:6px !important; }
[dir="rtl"] [style*="margin-left:1.2rem"]{ margin-left:0 !important; margin-right:1.2rem !important; }
[dir="rtl"] [style*="margin-left: auto"]{ margin-left:0 !important; margin-right:auto !important; }
[dir="rtl"] #srvInfoTag{ margin-right:0 !important; margin-left:6px !important; }

/* <style> blocks inside forms and subforms */
[dir="rtl"] .bkbox .bk-s,[dir="rtl"] .bkbox .bk-i{ text-align:left; }                       /* sfBoxInfoBackup */
[dir="rtl"] .devbox .dev-a .num,[dir="rtl"] .devbox .dev-b .num{ margin-left:0; margin-right:6px; } /* sfBoxInfoDevices */
[dir="rtl"] .hy-licm-fill{ left:auto; right:0; border-radius:4px 0 0 4px; }                /* sfBoxInfoLicenses */
[dir="rtl"] .hy-licm-more,[dir="rtl"] .hy-licr-hd b{ margin-left:0; margin-right:auto; }
[dir="rtl"] .hy-licr-rem{ right:auto; left:0; }
[dir="rtl"] .srvinfo .srvinfo-dot{ margin-right:0; margin-left:5px; }                     /* sfBoxInfoServer */
[dir="rtl"] .perfpane-x{ right:auto; left:10px; }
[dir="rtl"] .perfpane-ranges button{ margin-right:0; margin-left:6px; }
[dir="rtl"] .supinfo-tag{ margin-left:0; margin-right:8px; }                              /* sfBoxInfoSupport */
[dir="rtl"] .small-box .icon{ right:auto; left:8px; }                                     /* sfBoxQuickSummary */
[dir="rtl"] .copy-bubble{ right:auto; left:4px; }                                         /* sfBoxDownload1 */
[dir="rtl"] .ml-tab .n{ margin-left:0; margin-right:4px; }                                /* webMailLayout */
[dir="rtl"] .ml-warn ul{ padding-left:0; padding-right:18px; }
[dir="rtl"] .ml-rules th{ text-align:right; }
[dir="rtl"] .et-v{ text-align:right; }                                                    /* webEmailTemplate */
[dir="rtl"] .hy-tr-act,[dir="rtl"] .hy-tr-count{ margin-left:0; margin-right:auto; }     /* sfContentAdminI18n */
[dir="rtl"] .hy-tr-seg b{ margin-left:0; margin-right:4px; }
[dir="rtl"] .hy-tr-msg{ margin-right:0; margin-left:auto; }
[dir="rtl"] .hy-tr-log li span{ margin-right:0; margin-left:6px; }

/* toastr notifications open in the mirrored corner */
[dir="rtl"] .toast-top-right,[dir="rtl"] .toast-bottom-right{ right:auto; left:12px; }
[dir="rtl"] .toast-top-left,[dir="rtl"] .toast-bottom-left{ left:auto; right:12px; }

/* monospace values - ids, dates, versions, names - stay one left-to-right unit inside right-to-left text
   (in an Arabic sentence 2026-10-07 would otherwise read 07-10-2026) */
[dir="rtl"] :is(span,b,strong,em,small,a,code,kbd).hy-mono,[dir="rtl"] :is(code,kbd){ unicode-bidi:isolate; direction:ltr; }
[dir="rtl"] :is(div,p,td,li).hy-mono{ unicode-bidi:plaintext; text-align:right; }

/* news is written in English: each item reads left to right as a whole */
[dir="rtl"] .updates-scroll .item{ direction:ltr; text-align:left; }

/* dashboard tiles: a change such as "-19% vs 464" keeps its sign in front of the number */
[dir="rtl"] .hy-tile .sub{ unicode-bidi:plaintext; text-align:right; }

/* the <style> blocks of pages and subforms are mirrored at run time by res/js/hcm-rtl.js (sfHead loads it here) */

/* ==== doc 176: air under the page head; the account's counts beside its contract ================
   --hy-head-gap is the space between a record page's head and its body. Without it the first card sat
   on the band's hairline (webLicence and every other page with .hy-pagehead) and the account's fields
   on its hero (webAccount). One token for all of them; compact density takes 16px.
   ============================================================================================== */
:root{ --hy-head-gap:24px; }
html[data-hy-density="compact"]{ --hy-head-gap:16px; }
.hy-pagehead + .app-content,
.hy-hero.hy-sum + .app-content{ padding-top:var(--hy-head-gap); }

/* webAccount: Devices, Resources, Users and Meetings as one line of cells on the contract's row. They
   were four 66px tiles, a link row and the contract strip, stacked over ~200px. Devices opens the
   device inventory and Resources the licences for the account (the old link row); 0 or N/A is dimmed.
   The cells are filled like the contract strip, so the row reads as one. */
.hy-hero.hy-sum{ padding-top:16px; padding-bottom:20px; }
.hy-sumrow{ display:flex; flex-wrap:wrap; align-items:stretch; gap:12px; }
.hy-cnts{ display:flex; flex:0 0 auto; gap:1px; background:var(--hy-line);
  border:1px solid var(--hy-line); border-radius:var(--hy-r-lg); overflow:hidden; }
.hy-cnt{ display:flex; align-items:center; gap:6px; min-height:36px; padding:0 14px;
  background:var(--hy-sunk); color:var(--hy-ink-3); font-size:12px; line-height:1.2;
  white-space:nowrap; text-decoration:none; }
.hy-cnt b{ font-family:var(--hy-mono); font-size:14px; font-weight:600; color:var(--hy-ink);
  font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.hy-cnt.zero b{ color:var(--hy-ink-3); font-weight:500; }
a.hy-cnt:hover{ background:var(--hy-teal-wash); color:var(--hy-teal); }
a.hy-cnt:hover b{ color:var(--hy-teal); }
a.hy-cnt:focus-visible{ outline:2px solid var(--hy-teal); outline-offset:-2px; }
.hy-sumrow > .hy-term{ flex:1 1 420px; min-height:36px; padding:0 14px; margin:0; }
html[data-hy-density="compact"] .hy-cnt,
html[data-hy-density="compact"] .hy-sumrow > .hy-term{ min-height:30px; }
@media (max-width:640px){
  .hy-cnts{ flex:1 1 100%; }
  .hy-cnt{ flex:1 1 0; flex-direction:column; align-items:flex-start; justify-content:center;
    gap:0; padding:6px 10px; min-width:0; }
}