/* public/css/style.css */
:root {
  --ink: #1a1715;
  --ink-soft: #2b2622;
  --paper: #f4efe8;
  --paper-pure: #fbf8f3;
  --accent: #c8553d;       /* terracotta */
  --accent-deep: #a8412d;
  --muted: #8a8178;
  --line: #d9d0c4;
  --ok: #3f7d5c;
  --danger: #b23a2f;
  --shadow: 0 18px 50px -20px rgba(26, 23, 21, 0.45);
  --radius: 14px;
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }
html { scrollbar-gutter: stable; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

/* ---------- Split auth layout ---------- */
.auth {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  min-height: 100vh;
}

.auth__brand {
  position: relative;
  background:
    radial-gradient(120% 120% at 0% 0%, #2b2622 0%, var(--ink) 55%, #100e0c 100%);
  color: var(--paper-pure);
  padding: 4rem 4.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

/* subtle grain + glow */
.auth__brand::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(40% 50% at 80% 110%, rgba(200, 85, 61, 0.35), transparent 70%);
  pointer-events: none;
}

.brand__mark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  position: relative;
  z-index: 1;
}
.brand__mark span { color: var(--accent); }

.brand__pitch { position: relative; z-index: 1; max-width: 30ch; }
.brand__pitch h1 {
  font-family: var(--font-display);
  font-weight: 340;
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-optical-sizing: auto;
}
.brand__pitch h1 em { font-style: italic; color: var(--accent); }
.brand__pitch p {
  margin-top: 1.25rem;
  color: rgba(244, 239, 232, 0.7);
  font-size: 1.02rem;
  max-width: 34ch;
}

.brand__foot {
  position: relative;
  z-index: 1;
  font-size: 0.82rem;
  color: rgba(244, 239, 232, 0.45);
  letter-spacing: 0.02em;
}

/* ---------- Form side ---------- */
.auth__panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  background: var(--paper);
}

.card {
  width: 100%;
  max-width: 380px;
  animation: rise 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.card__eyebrow {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent-deep);
  font-weight: 600;
}
.card h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2rem;
  letter-spacing: -0.02em;
  margin: 0.4rem 0 0.4rem;
}
.card__sub { color: var(--muted); font-size: 0.95rem; margin-bottom: 1.8rem; }

.field { margin-bottom: 1.1rem; }
.field label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 0.4rem;
  color: var(--ink-soft);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.8rem 0.95rem;
  font-family: var(--font-body);
  font-size: 0.98rem;
  color: var(--ink);
  background: var(--paper-pure);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field textarea { min-height: 84px; resize: vertical; line-height: 1.5; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(200, 85, 61, 0.15);
}

.btn {
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.85rem 1rem;
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--paper-pure);
  background: var(--ink);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s, transform 0.05s;
}
.btn:hover { background: var(--accent-deep); }
.btn:active { transform: translateY(1px); }

.alt { margin-top: 1.5rem; font-size: 0.9rem; color: var(--muted); }
.alt a { color: var(--accent-deep); font-weight: 600; text-decoration: none; }
.alt a:hover { text-decoration: underline; }

.flash {
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  font-size: 0.88rem;
  margin-bottom: 1.2rem;
  border: 1px solid;
}
.flash--error {
  color: var(--danger);
  background: rgba(178, 58, 47, 0.07);
  border-color: rgba(178, 58, 47, 0.25);
}
.flash--ok {
  color: var(--ok);
  background: rgba(63, 125, 92, 0.08);
  border-color: rgba(63, 125, 92, 0.28);
}
.flash-link {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  word-break: break-all;
}
.flash-link a { color: var(--accent-deep); }

/* ---------- Dashboard ---------- */
.shell { min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 2.5rem;
  border-bottom: 1px solid var(--line);
  background: var(--paper-pure);
}
.topbar .brand__mark { color: var(--ink); font-size: 1.15rem; }
.logout {
  background: none;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.logout:hover { border-color: var(--accent); color: var(--accent-deep); }

.hub {
  flex: 1;
  max-width: 1080px;
  width: 100%;
  margin: 0 auto;
  padding: 3.5rem 2.5rem;
}
.hub__hello {
  font-family: var(--font-display);
  font-weight: 340;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.hub__hello span { color: var(--accent); font-style: italic; }
.hub__meta { color: var(--muted); margin-top: 0.6rem; font-size: 0.95rem; }

.grid {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1.2rem;
}
.tile {
  background: var(--paper-pure);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.tile__icon {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: rgba(200, 85, 61, 0.12);
  color: var(--accent-deep);
  font-family: var(--font-display);
  font-weight: 600;
  margin-bottom: 1rem;
}
.tile h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: 0.3rem; }
.tile p { color: var(--muted); font-size: 0.9rem; }

/* ---------- Error page ---------- */
.errpage {
  min-height: 100vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 2rem;
}
.errpage .code {
  font-family: var(--font-display);
  font-size: 5rem;
  color: var(--accent);
  line-height: 1;
}
.errpage a { color: var(--accent-deep); font-weight: 600; }

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
  .auth { grid-template-columns: 1fr; }
  .auth__brand { padding: 2.5rem; min-height: 38vh; }
  .brand__pitch { display: none; }
}

/* ---------- App shell / nav (logged-in) ---------- */
.impersonation-banner {
  background: var(--accent);
  color: var(--paper-pure);
  padding: 0.6rem 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.9rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.impersonation-banner strong { font-weight: 600; }
.impersonation-banner form { margin: 0; }
.banner-btn {
  background: var(--paper-pure);
  color: var(--accent-deep);
  border: none;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.82rem;
  padding: 0.4rem 0.9rem;
  border-radius: 8px;
  cursor: pointer;
}
.banner-btn:hover { background: #fff; }

/* Trial-ended banner — dark bar so it reads distinctly from the terracotta
   impersonation banner. Shown only once a trial tenant's 7 days are up. */
.trial-banner {
  background: var(--ink);
  color: var(--paper-pure);
  padding: 0.6rem 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.9rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.trial-banner strong { font-weight: 600; }
.trial-banner .banner-btn { text-decoration: none; display: inline-block; }
.trial-banner__note { font-size: 0.82rem; opacity: 0.85; }

/* Onboarding checklist on the tenant detail page. */
.adm-steps { list-style: none; padding: 0; margin: 0; }
.adm-steps li { padding: 0.35rem 0; color: var(--muted); font-size: 0.9rem; }
.adm-steps li.is-done { color: var(--ink); }
.adm-step__mark { display: inline-block; width: 1.4rem; color: var(--muted); }
.adm-steps li.is-done .adm-step__mark { color: var(--ok); }

/* Operator CRM notes/tags on the tenant page. */
.crm-label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 0.9rem; }
.crm-input { display: block; width: 100%; margin-top: 0.35rem; padding: 0.6rem 0.75rem; font-family: var(--font-body); font-size: 0.92rem; background: var(--paper); border: 1px solid var(--line); border-radius: 9px; color: var(--ink); }
.crm-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(200,85,61,0.15); }
.crm-tags { margin-top: 0.8rem; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.tnt-tags { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; margin-left: 0.4rem; }
.tnt-tags .pill { font-size: 0.66rem; padding: 0.1rem 0.4rem; }
.ann-check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 0.9rem; }
.ann-check input { width: auto; margin: 0; }

/* Platform-wide announcement banner (superadmin sets it on the Tools page). */
.announce-banner { padding: 0.6rem 2.5rem; font-size: 0.9rem; text-align: center; }
.announce-banner--info { background: #e9f0ee; color: var(--ink-soft); border-bottom: 1px solid var(--line); }
.announce-banner--maint { background: #f3e2c8; color: #6b4e16; }
@media (max-width: 760px) { .announce-banner { padding: 0.6rem 1.25rem; } }

.nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.4rem;
  padding: 0 2.5rem;
  border-bottom: 1px solid var(--line);
  background: var(--paper-pure);
  position: sticky;
  top: 0;
  z-index: 50;
}
.nav .brand__mark { color: var(--ink); font-size: 1.15rem; padding: 1.05rem 0; margin-right: 0.6rem; display: inline-flex; align-items: center; }
.nav .brand__logo { margin-right: 0.5rem; }
.nav__links { display: flex; align-items: center; gap: 1.4rem; flex: 1; }
.nav__links a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 1.1rem 0;
  border-bottom: 2px solid transparent;
}
.nav__links a:hover { color: var(--accent-deep); }
.nav__links a.active { color: var(--ink); border-bottom-color: var(--accent); }
.nav .spacer { margin-left: auto; }
.nav .who { font-size: 0.85rem; color: var(--muted); }
.nav__logout { margin: 0; }
/* burger: hidden on desktop, shown on mobile via media query */
.nav__toggle { display: none; }
.nav__burger { display: none; margin-left: auto; cursor: pointer; padding: 0.6rem 0; }
.nav__burger span {
  display: block; width: 24px; height: 2px; margin: 5px 0;
  background: var(--ink); border-radius: 2px; transition: 0.2s;
}

/* ---------- Content area ---------- */
.page { max-width: 1080px; margin: 0 auto; padding: 2.5rem; }
.page h1 {
  font-family: var(--font-display);
  font-weight: 360;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  letter-spacing: -0.02em;
}
.page h1 span { color: var(--accent); font-style: italic; }
.page .lede { color: var(--muted); margin-top: 0.4rem; }
.section { margin-top: 2.5rem; }
.section h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.3rem;
  margin-bottom: 1rem;
}

/* ---------- Tables ---------- */
.tbl { width: 100%; border-collapse: collapse; background: var(--paper-pure); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.tbl th, .tbl td { text-align: left; padding: 0.75rem 1rem; font-size: 0.9rem; border-bottom: 1px solid var(--line); }
.tbl th { background: #efe9e0; font-weight: 600; color: var(--ink-soft); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; }
.tbl tr:last-child td { border-bottom: none; }
.tbl td.actions { text-align: right; }

.badge { display: inline-block; font-size: 0.72rem; font-weight: 600; padding: 0.2rem 0.55rem; border-radius: 999px; letter-spacing: 0.02em; }
.badge--superadmin { background: rgba(178,58,47,0.12); color: var(--danger); }
.badge--admin { background: rgba(200,85,61,0.14); color: var(--accent-deep); }
.badge--superuser { background: rgba(63,125,92,0.14); color: var(--ok); }
.badge--user { background: #e4ddd2; color: var(--ink-soft); }

/* ---------- Buttons / forms ---------- */
.btn-sm { display: inline-block; padding: 0.45rem 0.8rem; font-size: 0.82rem; font-weight: 600; font-family: var(--font-body); border-radius: 8px; cursor: pointer; text-decoration: none; border: 1px solid var(--line); background: var(--paper-pure); color: var(--ink-soft); }
.btn-sm:hover { border-color: var(--accent); color: var(--accent-deep); }
.btn-sm--danger { color: var(--danger); border-color: rgba(178,58,47,0.4); }
.btn-sm--danger:hover { border-color: var(--danger); color: var(--danger); background: rgba(178,58,47,0.06); }
.inline-form { display: inline-block; margin: 0 0 0 0.35rem; }
.rota-actions { display: flex; flex-wrap: nowrap; gap: 0.4rem; justify-content: flex-end; align-items: center; }
.rota-actions .inline-form { margin: 0; }
.rota-actions .btn-sm { white-space: nowrap; }
.btn-sm--solid { background: var(--ink); color: var(--paper-pure); border-color: var(--ink); }
.btn-sm--solid:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--paper-pure); }

.card-form { background: var(--paper-pure); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; max-width: 460px; }
.card-form .field { margin-bottom: 0.9rem; }
.field__hint { font-size: 0.75rem; color: var(--muted); margin: 0.3rem 0 0; line-height: 1.35; }
.card-form label { display: block; font-size: 0.8rem; font-weight: 600; margin-bottom: 0.35rem; color: var(--ink-soft); }
.card-form input, .card-form select, .card-form textarea {
  width: 100%; padding: 0.7rem 0.85rem; font-family: var(--font-body); font-size: 0.92rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: 9px; color: var(--ink);
}
.card-form input:focus, .card-form select:focus, .card-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(200,85,61,0.15); }
/* Inline checkbox row (e.g. "Trial tenant" on Add-new-tenant). The generic
   .card-form input rule forces width:100%, which would stretch a checkbox — so
   keep it natural width and sit it beside its label text. */
.card-form .check-line { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; font-size: 0.92rem; font-weight: 600; color: var(--ink); }
.card-form .check-line input { width: auto; margin: 0; }
.grid-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem; align-items: start; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }

/* ---------- Global left side menu (app-to-app navigation) ---------- */
:root { --side-w: 212px; }
.appside {
  position: fixed; top: var(--nav-h, 57px); left: 0; bottom: 0; width: var(--side-w);
  overflow-y: auto; background: var(--paper); border-right: 1px solid var(--line);
  padding: 1.1rem 0.7rem; display: flex; flex-direction: column; z-index: 30;
}
.appside__nav { display: flex; flex-direction: column; gap: 2px; }
.appside a, .appside__soon { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.7rem; border-radius: 8px; font-size: 0.92rem; font-weight: 500; text-decoration: none; color: var(--ink-soft); }
.appside__icon { flex: none; display: inline-flex; width: 18px; height: 18px; color: var(--muted); }
.appside__icon svg { width: 18px; height: 18px; }
.appside__label { min-width: 0; }
.appside a:hover { background: var(--paper-pure); color: var(--accent-deep); }
.appside a:hover .appside__icon { color: var(--accent-deep); }
.appside a.active { background: var(--paper-pure); color: var(--ink); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }
.appside a.active .appside__icon { color: var(--accent-deep); }
.appside__soon { color: var(--muted); opacity: 0.68; }
.appside__help { margin-top: auto; padding-top: 1rem; color: var(--muted); font-weight: 500; }

/* Offset page content to clear the fixed menu, and give it more room. */
body.has-appside .page { margin-left: var(--side-w); max-width: 1500px; }
body.has-appside .page--settings { max-width: 940px; }
@media (max-width: 860px) {
  .appside { display: none; }
  body.has-appside .page { margin-left: 0; max-width: 100%; }
}

/* ---------- Hub app cards (KPI dashboard) ---------- */
.appcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.1rem; }
.appcard { background: var(--paper-pure); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.25rem 1.25rem; }
.appcard.is-soon { opacity: 0.72; }
.appcard__head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.9rem; }
.appcard__icon { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 9px; background: rgba(200,85,61,0.12); color: var(--accent-deep); }
.appcard__icon svg { width: 19px; height: 19px; }
.appcard__title { font-size: 1.02rem; font-weight: 600; margin: 0; line-height: 1.2; }
.appcard__title a { color: inherit; text-decoration: none; }
.appcard__title a:hover { color: var(--accent-deep); }
.appcard__desc { color: var(--muted); font-size: 0.88rem; margin: 0 0 0.6rem; }
.appcard__open { font-size: 0.85rem; font-weight: 600; color: var(--accent-deep); text-decoration: none; }
.appcard__open:hover { text-decoration: underline; }
.appcard__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.appcard__stats .stat { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; text-decoration: none; padding: 0.5rem 0.3rem; border-radius: 10px; background: var(--paper); border: 1px solid transparent; transition: border-color 0.15s, background 0.15s; }
.appcard__stats .stat:hover { border-color: var(--line); background: var(--paper-pure); }
.appcard__stats .stat:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.stat__value { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; line-height: 1; color: var(--ink); }
.stat__label { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.stat.tone-warn .stat__value { color: #b47a28; }
.stat.tone-alert .stat__value { color: var(--danger); }
.stat.is-zero .stat__value { color: var(--muted); opacity: 0.65; }
.stat { background: var(--paper-pure); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.4rem; }
.stat .n { font-family: var(--font-display); font-size: 2rem; color: var(--accent-deep); }
.stat .l { color: var(--muted); font-size: 0.85rem; }
.muted { color: var(--muted); font-size: 0.85rem; }
@media (max-width: 760px) {
  /* spacing */
  .page { padding: 1.5rem 1.25rem; }
  .nav { padding: 0 1.25rem; gap: 0.5rem; }
  .impersonation-banner { padding: 0.6rem 1.25rem; }
  .trial-banner { padding: 0.6rem 1.25rem; }
  .grid-2 { grid-template-columns: 1fr; }

  /* burger menu */
  .nav__burger { display: block; }
  .nav__links {
    display: none; flex: 0 0 100%; width: 100%;
    flex-direction: column; align-items: stretch; gap: 0; padding-bottom: 0.5rem;
  }
  .nav__toggle:checked ~ .nav__links { display: flex; }
  .nav__links a { padding: 0.85rem 0; border-bottom: 1px solid var(--line); }
  .nav__links a.active { border-bottom-color: var(--line); color: var(--accent-deep); }
  .nav .spacer { display: none; }
  .nav .who { padding: 0.85rem 0; border-bottom: 1px solid var(--line); }
  .nav__logout { padding: 0.7rem 0 0; }
  .nav__logout .btn-sm { width: 100%; text-align: center; }
  .nav__toggle:checked ~ .nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav__toggle:checked ~ .nav__burger span:nth-child(2) { opacity: 0; }
  .nav__toggle:checked ~ .nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* tables reflow into stacked cards */
  .tbl { border: none; background: transparent; }
  .tbl thead { display: none; }
  .tbl tr {
    display: block; background: var(--paper-pure); border: 1px solid var(--line);
    border-radius: var(--radius); margin-bottom: 0.85rem; padding: 0.3rem 0.9rem;
  }
  .tbl td {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    padding: 0.6rem 0; border-bottom: 1px solid var(--line); text-align: right;
    overflow-wrap: anywhere;
  }
  .tbl tr td:last-child { border-bottom: none; }
  .tbl td::before {
    content: attr(data-label); font-weight: 600; color: var(--ink-soft);
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
    text-align: left; flex: 0 0 auto;
  }
  .tbl td.actions { justify-content: flex-end; }
}

/* ---------- MFA + settings ---------- */
.nav__gear { display: inline-flex; align-items: center; color: var(--ink-soft); padding: 1.1rem 0; }
.nav__gear:hover { color: var(--accent-deep); }
.nav__gear.active { color: var(--ink); }
.btnrow { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.8rem; align-items: center; }
.qr { display: flex; justify-content: center; margin: 1.1rem 0; }
.qr img { border: 1px solid var(--line); border-radius: 12px; padding: 8px; background: #fff; }
.secret { display: inline-block; margin-top: 0.3rem; font-size: 0.9rem; letter-spacing: 0.05em; background: var(--paper); border: 1px solid var(--line); padding: 0.3rem 0.5rem; border-radius: 8px; word-break: break-all; }
.codes { list-style: none; padding: 0; margin: 1.1rem 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.codes li code { display: block; text-align: center; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 0.5rem; font-size: 0.95rem; letter-spacing: 0.06em; }
@media (max-width: 760px) { .codes { grid-template-columns: 1fr; } .nav__gear { padding: 0.85rem 0; } }

/* ---------- Safeguarding Log ---------- */
.sg-back { margin-bottom: 0.4rem; }
.sg-back a { color: var(--muted); text-decoration: none; font-size: 0.9rem; }
.sg-back a:hover { color: var(--accent-deep); }
.req { color: var(--danger); }

.sg-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; flex-wrap: wrap; position: sticky; top: 61px; z-index: 30; background: var(--paper); padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
.sg-toolbar__right { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.sg-head__actions { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
@media (max-width: 760px) { .sg-toolbar { position: static; } }
.sg-tabs { display: inline-flex; gap: 0.25rem; background: var(--paper-pure); border: 1px solid var(--line); border-radius: 999px; padding: 0.2rem; }
.sg-tabs a { padding: 0.35rem 0.9rem; border-radius: 999px; text-decoration: none; font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); }
.sg-tabs a:not(.active):hover { background: var(--paper); color: var(--accent-deep); }
.sg-tabs a.active { background: var(--accent-deep); color: var(--paper-pure); }

/* wider form for multi-field records */
.card-form--wide { max-width: 860px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; }
.card-form textarea { min-height: 84px; resize: vertical; font-family: var(--font-body); line-height: 1.5; }

/* status badges */
.badge--open { background: rgba(200,133,0,0.16); color: #8a5a00; }
.badge--closed { background: rgba(63,125,92,0.14); color: var(--ok); }
.badge--archived { background: #e4ddd2; color: var(--ink-soft); }
.badge--draft { background: #e4ddd2; color: var(--ink-soft); }
.badge--published { background: rgba(63,125,92,0.14); color: var(--ok); }
.badge--suspended { background: rgba(200,133,0,0.16); color: #8a5a00; }
.badge--pending { background: rgba(47,102,144,0.12); color: #2f6690; }

/* detail page */
.sg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.dl { background: var(--paper-pure); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.dl > div { display: flex; gap: 1rem; padding: 0.7rem 1rem; border-bottom: 1px solid var(--line); }
.dl > div:last-child { border-bottom: none; }
.dl dt { width: 38%; min-width: 150px; color: var(--muted); font-weight: 600; font-size: 0.82rem; }
.dl dd { flex: 1; font-size: 0.9rem; color: var(--ink-soft); }
.dl dd.dl-long { white-space: pre-wrap; }

.sg-comments { display: flex; flex-direction: column; gap: 0.75rem; }
.sg-comment { background: var(--paper-pure); border: 1px solid var(--line); border-radius: 12px; padding: 0.75rem 0.9rem; }
.sg-comment__meta { font-size: 0.78rem; color: var(--muted); margin-bottom: 0.3rem; }
.sg-comment__meta strong { color: var(--ink-soft); }
.sg-comment__body { font-size: 0.9rem; white-space: pre-wrap; }
.sg-comment-form { margin-top: 1rem; }
.sg-comment-form textarea {
  width: 100%; padding: 0.7rem 0.85rem; font-family: var(--font-body); font-size: 0.92rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: 9px; color: var(--ink);
  min-height: 84px; resize: vertical; line-height: 1.5;
}
.sg-comment-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(200,85,61,0.15); }

/* hub tile states */
.tile--link { text-decoration: none; color: inherit; display: block; }
.tile.is-soon { position: relative; opacity: 0.72; }
.tile__soon { position: absolute; top: 0.7rem; right: 0.7rem; font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; background: #e4ddd2; color: var(--ink-soft); padding: 0.15rem 0.45rem; border-radius: 999px; }

@media (max-width: 680px) {
  .field-row { grid-template-columns: 1fr; }
  .dl > div { flex-direction: column; gap: 0.2rem; }
  .dl dt { width: auto; }
}

/* ===================== Audits & Checks ===================== */
/* Category badges */
.badge--cat-audit { background: rgba(200,85,61,0.14); color: var(--accent-deep); }
.badge--cat-check { background: rgba(63,125,92,0.14); color: var(--ok); }
.badge--cat-misc  { background: #e4ddd2; color: var(--ink-soft); }

/* Templates list: JSON import */
.audit-import { margin-top: 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-pure); padding: 0.4rem 0.9rem; }
.audit-import > summary { cursor: pointer; font-weight: 600; font-size: 0.9rem; color: var(--ink-soft); padding: 0.5rem 0; }
.audit-import[open] > summary { color: var(--accent-deep); }
.audit-import .card-form { max-width: none; }

/* ---- Builder: action bar + meta ---- */
.ab-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; position: sticky; top: 0; z-index: 20; margin-top: 0.4rem; padding: 0.85rem 0; background: var(--paper); border-bottom: 1px solid var(--line); }
.ab-meta { display: grid; grid-template-columns: minmax(220px, 1.6fr) minmax(150px, 1fr); gap: 0.9rem; flex: 1; }
.ab-meta .field { margin-bottom: 0; }
.ab-meta label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 0.35rem; }
.ab-meta input, .ab-meta select { width: 100%; padding: 0.65rem 0.8rem; font-family: var(--font-body); font-size: 0.95rem; color: var(--ink); background: var(--paper-pure); border: 1px solid var(--line); border-radius: 9px; }
.ab-meta input:focus, .ab-meta select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(200,85,61,0.15); }
.ab-actions { display: flex; gap: 0.5rem; align-items: center; }

/* ---- Builder: palette + canvas ---- */
.ab-layout { display: grid; grid-template-columns: 220px 1fr; gap: 1.1rem; margin-top: 1.2rem; }
.ab-palette { align-self: start; position: sticky; top: 6.25rem; max-height: calc(100vh - 7.25rem); overflow-y: auto; }
.ab-palette__h { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.5rem; }
.ab-palette__hint { font-size: 0.78rem; color: var(--muted); margin: 0 0 0.7rem; }
.ab-pal-list { display: flex; flex-direction: column; gap: 0.4rem; }
.ab-pal-item { display: flex; align-items: center; gap: 0.55rem; width: 100%; text-align: left; padding: 0.5rem 0.6rem; border: 1px solid var(--line); border-radius: 10px; background: var(--paper-pure); font-family: var(--font-body); font-size: 0.84rem; font-weight: 500; color: var(--ink-soft); cursor: grab; }
.ab-pal-item:hover { border-color: var(--accent); color: var(--accent-deep); }
.ab-gl { display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; flex: 0 0 auto; border-radius: 7px; background: var(--paper); border: 1px solid var(--line); font-size: 0.78rem; color: var(--accent-deep); }

.ab-canvas { min-width: 0; }
.ab-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0.8rem; align-content: start; min-height: 140px; }
.ab-grid.is-empty { border: 1.5px dashed var(--line); border-radius: 12px; background: var(--paper-pure); }
.ab-grid.ab-over { border-color: var(--accent); background: rgba(200,85,61,0.05); }
.ab-drop-hint { grid-column: 1 / -1; text-align: center; color: var(--muted); font-size: 0.9rem; padding: 2.6rem 1rem; }

.ab-card { grid-column: span var(--span, 12); background: var(--paper); border: 1px solid var(--line); border-radius: 11px; padding: 0.7rem 0.8rem 0.85rem; }
.ab-card.ab-dragging { opacity: 0.4; }
.ab-card__top { display: flex; align-items: center; gap: 0.35rem; margin-bottom: 0.5rem; }
.ab-card__handle { cursor: grab; color: var(--muted); }
.ab-card__type { font-size: 0.66rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.ab-card__sp { flex: 1; }
.ab-mini { display: inline-flex; align-items: center; justify-content: center; min-width: 1.6rem; height: 1.6rem; padding: 0 0.4rem; font-size: 0.8rem; border-radius: 7px; border: 1px solid var(--line); background: var(--paper-pure); color: var(--ink-soft); cursor: pointer; }
.ab-mini:hover { border-color: var(--accent); color: var(--accent-deep); }
.ab-mini--danger:hover { border-color: var(--danger); color: var(--danger); }
.ab-lbl { width: 100%; padding: 0.5rem 0.6rem; font-family: var(--font-body); font-size: 0.9rem; border: 1px solid var(--line); border-radius: 8px; background: var(--paper-pure); }
.ab-opts { width: 100%; margin-top: 0.5rem; padding: 0.5rem 0.6rem; font-family: var(--font-body); font-size: 0.85rem; border: 1px solid var(--line); border-radius: 8px; background: var(--paper-pure); min-height: 62px; resize: vertical; }
.ab-lbl:focus, .ab-opts:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(200,85,61,0.15); }
.ab-card__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.6rem; }
.ab-foot-lbl { font-size: 0.72rem; color: var(--muted); }
.ab-widths { display: inline-flex; gap: 0.2rem; background: var(--paper-pure); border: 1px solid var(--line); border-radius: 999px; padding: 0.15rem; }
.ab-widths button { border: none; background: none; font-family: var(--font-body); font-size: 0.8rem; font-weight: 600; color: var(--ink-soft); padding: 0.2rem 0.6rem; border-radius: 999px; cursor: pointer; }
.ab-widths button.on { background: var(--ink); color: var(--paper-pure); }
.ab-req { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; font-weight: 600; color: var(--ink-soft); cursor: pointer; }
.ab-req input { width: auto; }

.builder-extra { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.builder-extra form { margin: 0; }

/* ---- Preview page (new tab) ---- */
.page--preview { padding-top: 1.6rem; }
.pv-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; }
.pv-top .pv-banner { margin-bottom: 0; flex: 1; }
.pv-card { background: var(--paper-pure); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem 1.6rem 1.9rem; max-width: 880px; }
.task-card { margin: 0.4rem auto 0; }
.pv-banner { background: rgba(63,125,92,0.1); border: 1px solid rgba(63,125,92,0.28); color: var(--ok); border-radius: 10px; padding: 0.6rem 0.9rem; font-size: 0.85rem; font-weight: 600; margin-bottom: 1.2rem; }
.pv-formtitle { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; margin: 0 0 1rem; }
.pv-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0.9rem; }
.pv-f { grid-column: span 12; min-width: 0; }
.pv-w-quarter { grid-column: span 3; }
.pv-w-third { grid-column: span 4; }
.pv-w-half { grid-column: span 6; }
.pv-w-full { grid-column: span 12; }
.pv-desc { color: var(--muted); font-size: 0.92rem; margin: -0.3rem 0 1.4rem; }
.pv-f > label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 0.35rem; }
.pv-f .star { color: var(--danger); }
.pv-f .ctrl, .pv-f select, .pv-f textarea { width: 100%; padding: 0.6rem 0.7rem; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); font-family: var(--font-body); font-size: 0.92rem; }
.pv-section { grid-column: 1 / -1; font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; margin: 0.6rem 0 0; padding-top: 0.9rem; border-top: 1px solid var(--line); }
.pv-info { grid-column: 1 / -1; background: rgba(200,85,61,0.06); border: 1px solid rgba(200,85,61,0.18); border-radius: 10px; padding: 0.7rem 0.9rem; font-size: 0.9rem; color: var(--ink-soft); }
.pv-sign { height: 90px; border: 1px dashed var(--line); border-radius: 10px; background: var(--paper); display: flex; align-items: flex-end; padding: 0.5rem 0.7rem; color: var(--muted); font-style: italic; font-size: 0.85rem; }
.pv-choices { display: flex; flex-direction: column; gap: 0.45rem; }
.pv-choices label { font-weight: 400; font-size: 0.95rem; display: flex; gap: 0.5rem; align-items: center; }
.pv-choices input { width: auto; flex: 0 0 auto; margin: 0; }
/* Inline (segmented) answer options — Yes/No/N/A and short choice lists */
.pv-choices--inline { flex-direction: row; flex-wrap: wrap; gap: 0.4rem; }
.pv-choices--inline label { border: 1px solid var(--line); border-radius: 999px; padding: 0.34rem 0.85rem; background: var(--paper-pure); cursor: pointer; }
.pv-choices--inline label:hover { border-color: var(--accent); }
.pv-choices--inline label:has(input:checked) { border-color: var(--ink); background: var(--paper); }

@media (max-width: 760px) {
  .ab-layout { grid-template-columns: 1fr; }
  .ab-pal-list { display: grid; grid-template-columns: repeat(2, 1fr); }
  .ab-meta { grid-template-columns: 1fr; }
  .ab-card { grid-column: span 12 !important; }
  .ab-bar { position: static; }
  .rpt-filters { position: static; }
  .ab-palette { position: static; top: auto; max-height: none; overflow: visible; }
}
@media (max-width: 560px) {
  .pv-f { grid-column: 1 / -1 !important; }
}

/* ============================================================
   Audits & Checks — app shell (left sidebar + main)
   ============================================================ */
.app-shell { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; background: var(--paper); }

.app-side {
  position: sticky; top: 0; align-self: start; height: 100vh;
  display: flex; flex-direction: column;
  background: var(--paper-pure); border-right: 1px solid var(--line);
  padding: 1.4rem 1.15rem; overflow-y: auto;
}
.app-side__toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.app-side__head { display: block; }
.app-side__burger { display: none; }
.app-side__back { font-size: 0.82rem; color: var(--muted); text-decoration: none; }
.app-side__back:hover { color: var(--accent-deep); }
.app-side__brand { font-family: var(--font-display); font-size: 1.3rem; color: var(--ink); margin: 0.9rem 0 1.4rem; line-height: 1.1; }
.app-side__brand em { color: var(--accent); font-style: italic; }
.app-side__nav { display: flex; flex-direction: column; gap: 0.12rem; }
.app-side__group { display: flex; flex-direction: column; gap: 0.12rem; margin: 0.25rem 0; padding-left: 0.55rem; border-left: 2px solid var(--line); }
.app-side__divider { height: 1px; background: var(--line); margin: 0.5rem 0.4rem; }
.app-side__link {
  display: block; padding: 0.5rem 0.7rem; border-radius: 9px;
  text-decoration: none; color: var(--ink-soft); font-size: 0.9rem; font-weight: 500;
}
.app-side__link:hover { background: var(--paper); color: var(--accent-deep); }
.app-side__link.is-active { background: var(--ink); color: var(--paper-pure); }
.app-side__foot { margin-top: auto; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.app-side__user { font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); }
.app-side__foot-links { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.55rem; }
.app-side__foot-links a { font-size: 0.82rem; color: var(--muted); text-decoration: none; }
.app-side__foot-links a:hover { color: var(--accent-deep); }
.app-side__imp { font-size: 0.8rem; color: var(--muted); margin-bottom: 0.55rem; }
.app-side__imp strong { color: var(--ink-soft); }

.app-main { padding: 2rem 2.5rem 3rem; min-width: 0; }
.app-main__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.4rem; }
.app-h1 { font-family: var(--font-display); font-weight: 400; font-size: 1.9rem; color: var(--ink); margin: 0; }
.app-main .lede { color: var(--muted); margin: 0 0 0.4rem; max-width: 60ch; }

/* spacing utilities (CSP blocks inline style attrs, so use classes) */
.app-block { margin-top: 1.25rem; }
.app-block-sm { margin-top: 0.7rem; }
.app-hint { margin-top: 0.3rem; }

/* dashboard cards */
.dash-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.dash-card { background: var(--paper-pure); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.15rem 1.25rem; }
.dash-card__label { font-size: 0.82rem; color: var(--muted); }
.dash-card__num { font-family: var(--font-display); font-size: 2rem; line-height: 1.1; margin-top: 0.4rem; color: var(--accent-deep); }
.dash-card__num--ok { color: var(--ok); }
.dash-card__num--danger { color: var(--danger); }

/* recent assignments panel */
.dash-panel { background: var(--paper-pure); border: 1px solid var(--line); border-radius: var(--radius); margin-top: 1.5rem; overflow: hidden; }
.dash-panel__head { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.3rem; border-bottom: 1px solid var(--line); }
.dash-panel__head h2 { font-size: 1.05rem; margin: 0; color: var(--ink); }
.dash-empty { padding: 1.4rem 1.3rem; }
.dash-empty p { margin: 0 0 0.3rem; }
.dash-table { width: 100%; border-collapse: collapse; }
.dash-table th, .dash-table td { text-align: left; padding: 0.8rem 1.3rem; font-size: 0.9rem; border-bottom: 1px solid var(--line); }
.dash-table th { background: #efe9e0; font-weight: 600; color: var(--ink-soft); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.05em; }
.dash-table tr:last-child td { border-bottom: 0; }

/* status pills (used by the recent-assignments table) */
.pill { display: inline-block; font-size: 0.74rem; font-weight: 600; padding: 0.2rem 0.6rem; border-radius: 999px; }
.pill--submitted { background: rgba(63,125,92,0.14); color: var(--ok); }
.pill--pending { background: #e4ddd2; color: var(--ink-soft); }
.pill--overdue { background: rgba(178,58,47,0.12); color: var(--danger); }
.pill--muted { background: #e4ddd2; color: var(--muted); }
.pill--danger { background: rgba(178,58,47,0.14); color: var(--danger); text-transform: capitalize; }

/* ---------- Platform console: attention list, panels, tenant health ---------- */
.stat--link { text-decoration: none; }
.stat--link:hover { border-color: var(--accent); }
.stat--alert .n { color: var(--danger); }
.att-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.att { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; padding: 0.55rem 0.8rem; border: 1px solid var(--line); border-radius: 9px; background: var(--paper-pure); font-size: 0.9rem; }
.att__dot { width: 8px; height: 8px; border-radius: 999px; flex: none; background: var(--muted); }
.att--alert { border-left: 3px solid var(--danger); }
.att--alert .att__dot { background: var(--danger); }
.att--warn { border-left: 3px solid #b47a28; }
.att--warn .att__dot { background: #b47a28; }
.att--neutral { border-left: 3px solid var(--line); }
.att__tenant { font-weight: 600; color: var(--ink); text-decoration: none; }
.att__tenant:hover { color: var(--accent-deep); }
.att__label { color: var(--ink-soft); }
.att__kind { margin-left: auto; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.att-foot { margin-top: 0.7rem; font-size: 0.85rem; }
.tbl-scroll { overflow-x: auto; }
.is-stale { color: var(--danger); }

/* Sub-tabs (platform console pages) */
.subtabs { display: flex; gap: 0.4rem; border-bottom: 1px solid var(--line); margin: 0.4rem 0 1.4rem; }
.subtab {
  display: inline-block; padding: 0.55rem 1rem; font-size: 0.9rem; font-weight: 600;
  color: var(--ink-soft); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.subtab:hover { color: var(--ink); }
.subtab.is-on { color: var(--accent-deep); border-bottom-color: var(--accent); }

/* Tenants table — compact, fixed columns */
.tnt-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.7rem; }
.tnt-lede { margin: 0; }
.tnt-srlabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tnt-search { flex: 0 1 22rem; }
.tnt-search input { width: 100%; padding: 0.45rem 0.7rem; font-size: 0.88rem; }
.tnt-count { font-size: 0.82rem; color: var(--muted); }
.tbl--tenants { table-layout: fixed; min-width: 950px; }
.tbl--tenants th, .tbl--tenants td { padding: 0.4rem 0.6rem; font-size: 0.85rem; vertical-align: middle; }
.tbl--tenants th { font-size: 0.7rem; letter-spacing: 0.04em; }
.tbl--tenants .c-name { width: 22%; }
.tbl--tenants .c-bill { width: 10%; }
.tbl--tenants .c-plan { width: 8%; }
.tbl--tenants .c-date { width: 10%; }
.tbl--tenants .c-num { width: 8%; text-align: center; }
.tbl--tenants .c-life { width: 10%; text-align: center; }
.tbl--tenants .c-act { width: 16%; }
.tnt-hideform { display: inline; margin: 0; }
.tnt-parked { opacity: 0.55; }
.tnt-parked td.c-name a { font-style: italic; }
.tnt-count a { color: var(--ink-soft); }
.tbl--tenants td.c-num, .tbl--tenants td.c-life { text-align: center; }
.tbl--tenants .c-name a { font-weight: 600; }
.tbl--tenants .pill { padding: 0.12rem 0.5rem; font-size: 0.7rem; white-space: nowrap; }
.tbl--tenants td.actions { white-space: nowrap; }
.tbl--tenants td.actions .btn-sm { padding: 0.2rem 0.5rem; font-size: 0.75rem; }
.tnt-sub { color: var(--muted); font-size: 0.78rem; }
.tnt-none { padding: 1rem; color: var(--muted); font-size: 0.9rem; }

/* Operator tools */
.tool-state { display: inline-block; font-weight: 700; font-size: 0.95rem; margin: 0 0 0.3rem; }
.tool-state--ok { color: var(--ok); }
.tool-state--stale { color: #b47a28; }
.tool-state--failed { color: var(--danger); }
.tool-state--unknown { color: var(--muted); }
.tool-note { font-size: 0.82rem; line-height: 1.5; margin-top: 0.7rem; }
.tool-form { margin-top: 0.6rem; }
.tool-form .field { max-width: 26rem; }
.bk-banner { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.bk-banner .tool-state { margin: 0; }
.bk-banner .btn-sm { margin-left: auto; }
@media (max-width: 760px) {
  .tbl--tenants { table-layout: auto; min-width: 0; }
  .tbl--tenants td.c-num, .tbl--tenants td.c-life { text-align: right; }
  .tnt-search { flex-basis: 100%; }
}
.adm-panel { background: var(--paper-pure); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.3rem; }
.adm-panel--warn { border-left: 3px solid #b47a28; }
.adm-panel h2 { font-size: 1.02rem; margin: 0 0 0.6rem; }
.adm-dl { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1rem; margin: 0; font-size: 0.9rem; }
.adm-dl dt { color: var(--muted); }
.adm-dl dd { margin: 0; }
.adm-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem; word-break: break-all; }
.adm-counts { list-style: none; margin: 0.4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: 0.88rem; color: var(--ink-soft); }
.adm-counts span { display: inline-block; min-width: 2.2rem; font-weight: 700; color: var(--ink); }
.tbl tr.row--overdue td { background: rgba(178,58,47,0.05); }
.due-hint { font-size: 0.78rem; }

/* coming-soon stub */
.stub-card { background: var(--paper-pure); border: 1px dashed var(--line); border-radius: var(--radius); padding: 2rem 1.8rem; max-width: 56ch; }
.stub-tag { display: inline-block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent-deep); background: rgba(200,85,61,0.12); padding: 0.25rem 0.6rem; border-radius: 999px; }
.stub-blurb { margin-top: 0.9rem; color: var(--ink-soft); line-height: 1.55; }

/* responsive: collapse the shell on tablets/phones */
@media (max-width: 860px) {
  .app-shell { grid-template-columns: 1fr; }
  .app-side { position: static; height: auto; min-height: 0; flex-direction: column; border-right: 0; border-bottom: 1px solid var(--line); padding: 0.9rem 1.1rem; }
  .app-side__head { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; }
  .app-side__brand { margin: 0.15rem 0 0; font-size: 1.15rem; }
  .app-side__burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; width: 44px; height: 40px; padding: 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper-pure); cursor: pointer; flex: none; }
  .app-side__burger span { display: block; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; }
  .app-side__nav { display: none; flex-direction: column; gap: 0.15rem; margin-top: 0.85rem; }
  .app-side__toggle:checked ~ .app-side__nav { display: flex; }
  .app-side__group { flex-direction: column; border-left: 2px solid var(--line); padding-left: 0.55rem; margin: 0.15rem 0; gap: 0.15rem; }
  .app-side__toggle:checked ~ .app-side__head .app-side__burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .app-side__toggle:checked ~ .app-side__head .app-side__burger span:nth-child(2) { opacity: 0; }
  .app-side__toggle:checked ~ .app-side__head .app-side__burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .app-side__foot { margin-top: 0.9rem; }
  .app-main { padding: 1.5rem 1.25rem 2.5rem; }
  .dash-cards { grid-template-columns: repeat(2, 1fr); }
  .dash-table thead { display: none; }
  .dash-table tr { display: block; border-bottom: 1px solid var(--line); padding: 0.4rem 0; }
  .dash-table td { display: block; border: 0; padding: 0.3rem 1.3rem; }
}
@media (max-width: 460px) {
  .dash-cards { grid-template-columns: 1fr; }
}

/* Global Templates — inline row actions + state chip */
.row-actions { display: flex; gap: 0.4rem; justify-content: flex-end; align-items: center; flex-wrap: nowrap; }
.row-actions form { margin: 0; }
.row-actions .btn-sm { white-space: nowrap; }
.sg-search { padding: 0.4rem 0.75rem; border: 1px solid var(--line); border-radius: 999px; background: var(--paper-pure); font: inherit; font-size: 0.85rem; min-width: 220px; max-width: 100%; }
.rota-import { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-top: 1rem; padding: 0.7rem 0.9rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-pure); }
.rota-import__label { font-weight: 600; font-size: 0.85rem; color: var(--ink-soft); }
.rota-import__form { display: flex; align-items: center; gap: 0.5rem; margin: 0; flex-wrap: wrap; }
.rota-import__form input[type=file] { font-size: 0.82rem; max-width: 100%; color: var(--muted); }
.rota-import__form input[type=file]::file-selector-button { font: inherit; font-size: 0.82rem; font-weight: 600; margin-right: 0.6rem; padding: 0.45rem 0.8rem; border: 1px solid var(--line); border-radius: 8px; background: var(--paper-pure); color: var(--ink-soft); cursor: pointer; }
.rota-import__form input[type=file]::file-selector-button:hover { border-color: var(--accent); color: var(--accent-deep); }
.rota-import--center { max-width: 680px; margin-left: auto; margin-right: auto; }
.gt-state { margin-right: auto; }

.brand__dot { color: var(--accent); }

/* Global library: tenant-facing note + publish-all */
.library-note { background: var(--paper-pure); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius); padding: 0.9rem 1.1rem; margin: 1rem 0 1.4rem; }
.library-note__label { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 0.35rem; }
.library-note p { margin: 0; color: var(--ink-soft); }
.gt-publish-all { margin: 0; }

/* Assignment — assignee checklist */
.assignee-list { display: flex; flex-direction: column; gap: 0.45rem; border: 1px solid var(--line); border-radius: var(--radius); padding: 0.7rem 0.9rem; max-height: 260px; overflow: auto; background: var(--paper-pure); }
.assignee-opt { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.assignee-opt input { width: auto; }

/* Tasks, completion & RAG */
.pill--progress { background: rgba(47,102,144,.14); color: #2f6690; }
.pill--ok { background: rgba(63,125,92,.16); color: var(--ok); }
.pill--overdue { background: rgba(178,58,47,.14); color: var(--danger); }
.pill--rag-red { background: rgba(178,58,47,.16); color: var(--danger); }
.pill--rag-amber { background: rgba(176,122,46,.18); color: #9a6a1f; }
.pill--rag-green { background: rgba(63,125,92,.16); color: var(--ok); }
.task-banner { padding: 0.7rem 1rem; border-radius: var(--radius); margin: 0.4rem 0 1.2rem; border: 1px solid var(--line); }
.task-banner--done { background: rgba(63,125,92,.1); border-color: rgba(63,125,92,.3); }
.evidence-ph { padding: 0.6rem 0.8rem; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); font-size: 0.85rem; background: var(--paper-pure); }
.rating-block { margin: 1.4rem 0; padding: 1rem 1.1rem; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius); background: var(--paper-pure); }
.rating-block__label { display: block; font-weight: 600; margin-bottom: 0.5rem; }
.dash-compliance { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; padding: 0.8rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-pure); }
.dash-compliance__label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.dash-compliance__pct { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; color: var(--ink); }

/* Evidence files */
.evidence { display: flex; flex-direction: column; gap: 0.5rem; }
.evidence__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.evidence__item { display: flex; align-items: center; gap: 0.4rem; border: 1px solid var(--line); border-radius: 10px; padding: 0.3rem 0.5rem; background: var(--paper-pure); }
.evidence__thumb { width: 54px; height: 54px; object-fit: cover; border-radius: 8px; display: block; }
.evidence__file { font-size: 0.85rem; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evidence__remove { border: none; background: none; color: var(--danger); font-size: 0.8rem; cursor: pointer; padding: 0 0.2rem; }
.evidence__add { align-self: flex-start; cursor: pointer; position: relative; overflow: hidden; }
.evidence__add input { position: absolute; left: -9999px; width: 1px; height: 1px; }
.evidence__msg { font-size: 0.8rem; }

/* Record attachments (documents & photos) — reuses the .evidence visual language;
   distinct .rfile* hooks keep its JS separate from the Audits evidence uploader. */
.rfile__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }
.rfile__remove { border: none; background: none; color: var(--danger); font-size: 0.8rem; cursor: pointer; padding: 0 0.2rem; }
.rfile__msg { font-size: 0.8rem; }
.rfile-hint { margin: 0 0 0.6rem; font-size: 0.85rem; }

/* Announcements: a notice on the hub that clears once acknowledged. */
.notice { border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius); background: var(--paper-pure); padding: 1rem 1.1rem; margin-bottom: 0.85rem; }
.notice__title { margin: 0 0 0.4rem; font-size: 1.05rem; font-weight: 600; }
.notice__body { margin: 0 0 0.9rem; white-space: pre-wrap; line-height: 1.5; }
.notice__form { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.notice__meta { font-size: 0.82rem; }
/* Already-posted notices in the list: same card, without the "act on me" accent. */
.notice--past { border-left-color: var(--line); }
.notice--past .notice__body { margin-bottom: 0.5rem; }
.ann-body { white-space: pre-wrap; line-height: 1.55; margin: 0; }

/* Messages: inbox + a 1:1 thread. */
.msg-bar { margin: 0 0 1rem; }
.badge--unread { background: var(--accent); color: #fff; }
.thread { display: flex; flex-direction: column; }
.thread__list { display: flex; flex-direction: column; gap: 0.6rem; max-height: 60vh; overflow-y: auto; padding: 0.9rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-pure); }
.thread__empty { margin: 0; }
.msg { max-width: 78%; align-self: flex-start; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 0.55rem 0.75rem; }
.msg--mine { align-self: flex-end; background: var(--accent-soft, var(--paper)); }
.msg__body { white-space: pre-wrap; line-height: 1.45; font-size: 0.93rem; }
.msg__meta { margin-top: 0.25rem; font-size: 0.74rem; color: var(--muted); }
.thread__form { display: flex; gap: 0.6rem; align-items: flex-end; margin-top: 0.85rem; }
.thread__form textarea { flex: 1; padding: 0.7rem 0.85rem; font-family: var(--font-body); font-size: 0.92rem; background: var(--paper); border: 1px solid var(--line); border-radius: 9px; color: var(--ink); resize: vertical; }
.thread__msg { margin: 0.5rem 0 0; font-size: 0.82rem; min-height: 1.1em; }
.thread__msg--err { color: var(--danger); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Geo-tagged clock in / out on a staff member's own shift page. */
.clock { margin-top: 1.25rem; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.clock__h { margin: 0 0 0.5rem; font-size: 1rem; font-weight: 600; }
.clock__state { margin: 0 0 0.4rem; }
.clock__note { margin: 0 0 0.8rem; font-size: 0.85rem; }
.clock__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.clock__btn { min-width: 9rem; }
.clock__privacy { margin: 0.45rem 0 0.8rem; font-size: 0.78rem; }

/* The person a staff member is visiting: name first, then address, then the
   two things they actually need in the moment (directions / phone). */
.shiftcard__name { margin: 0; font-size: 1.15rem; font-weight: 600; }
.shiftcard__sub { margin: 0.15rem 0 0.9rem; color: var(--muted); font-size: 0.85rem; }
.shiftcard__addr { margin: 0; font-style: normal; white-space: pre-wrap; line-height: 1.45; }
.shiftcard__pc { margin: 0.1rem 0 0; font-weight: 600; }
.shiftcard__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.9rem 0 1.1rem; }
.clock__msg { margin: 0.7rem 0 0; font-size: 0.9rem; min-height: 1.2em; }
.clock__msg--ok { color: var(--accent-deep, var(--accent)); }
.clock__msg--err { color: var(--danger); }
.badge--geo { background: var(--paper-pure); border: 1px solid var(--line); color: var(--muted); }
.rota-check--block { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; }
.badge--flag { background: var(--amber-bg, #f6ead0); color: #6b4a08; border: 1px solid rgba(176,125,35,0.35); margin: 0 0.2rem 0.2rem 0; display: inline-block; cursor: help; }
.clock-flagged-count { color: var(--danger); }
.clock-warn { border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 10px; background: var(--paper); padding: 0.85rem 1rem; margin: 0.5rem 0 1.1rem; }
.clock-warn p { margin: 0; font-size: 0.88rem; }
.payroll-hint { margin: 0.1rem 0 0.7rem 1.6rem; }
.rota-radius { display: flex; align-items: center; gap: 0.5rem; }
.rota-radius input { max-width: 8rem; }

/* Two-column form layout (rota service-user Add/Edit). Left column unchanged;
   the right column carries optional contact & visit details. Stacks on mobile. */
.rota-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.25rem; align-items: start; }
.rota-2col__col { min-width: 0; }
.rota-2col__h { margin: 0.2rem 0 0.9rem; font-weight: 600; }
@media (max-width: 720px) { .rota-2col { grid-template-columns: 1fr; gap: 0; } }

/* Reports filter bar */
.rpt-filters { position: sticky; top: 0; z-index: 20; padding: 0.85rem 0; background: var(--paper); border-bottom: 1px solid var(--line); }
.rpt-filters__row { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: flex-end; }
.rpt-export--bar { margin-left: auto; }
.rpt-field { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.82rem; font-weight: 600; }
.rpt-field input, .rpt-field select { font-weight: 400; min-width: 150px; padding: 0.55rem 0.7rem; font-family: var(--font-body); font-size: 0.92rem; color: var(--ink); background: var(--paper-pure); border: 1px solid var(--line); border-radius: 10px; transition: border-color 0.15s, box-shadow 0.15s; }
.rpt-field input:focus, .rpt-field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(200, 85, 61, 0.15); }
.rpt-check-cell { width: 1%; white-space: nowrap; text-align: center; }
.rpt-check, .rpt-check-all { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; vertical-align: middle; }
.rpt-field--actions { flex-direction: row; gap: 0.5rem; align-items: center; }
.rpt-count { margin-top: 0.8rem; }

/* ---------- Settings page ---------- */
.set-card { background: var(--paper-pure); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; max-width: 680px; }
.set-card--center { margin-left: auto; margin-right: auto; }
.set-sub { font-size: 0.95rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 0.6rem; }
.set-hint { font-size: 0.82rem; margin-top: 0.3rem; }
/* A field the user can see but not change (e.g. their job title). */
.set-readonly { margin: 0; padding: 0.55rem 0.7rem; background: var(--paper); border: 1px dashed var(--line); border-radius: var(--radius-sm, 6px); color: var(--ink-soft); }
.set-note { margin-top: 1.1rem; font-size: 0.85rem; }
.status-on { color: var(--ok); }
.mfa-form { margin: 0; }
.kv { display: grid; gap: 0; }
.kv > div { display: flex; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--line); }
.kv > div:last-child { border-bottom: none; }
.kv dt { width: 96px; flex: none; color: var(--muted); font-size: 0.85rem; }
.kv dd { color: var(--ink); font-size: 0.95rem; }
.theme-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 0.7rem; margin-top: 0.6rem; }
.swatch { position: relative; display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.7rem; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; background: var(--paper); transition: border-color 0.12s, box-shadow 0.12s; }
.swatch input { position: absolute; opacity: 0; pointer-events: none; }
.swatch__chip { display: inline-block; width: 22px; height: 22px; border-radius: 6px; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08); }
.swatch__name { font-size: 0.85rem; color: var(--ink-soft); }
.swatch:hover { border-color: var(--accent); }
.swatch:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.swatch__chip--terracotta { background: #c8553d; }
.swatch__chip--slate { background: #3f6184; }
.swatch__chip--teal { background: #2c6e6a; }
.swatch__chip--aubergine { background: #6b4a7a; }
.swatch__chip--navy { background: #2b3a67; }
.swatch__chip--graphite { background: #4a4742; }

/* ---------- Organisation logo ---------- */
.brand__logo { display: block; height: 26px; width: auto; max-width: 150px; object-fit: contain; }
.logo-block { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 0.1rem; }
.logo-preview { height: 48px; max-width: 200px; object-fit: contain; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; }
.logo-none { color: var(--muted); font-size: 0.9rem; }
.logo-pick { cursor: pointer; }
.logo-msg { display: block; font-size: 0.82rem; margin-top: 0.45rem; color: var(--muted); }
.logo-msg--err { color: var(--danger); }

/* ---------- Safeguarding spacing (replaces former inline styles) ---------- */
.sg-list { margin-top: 1.25rem; }
.sg-detail { margin-top: 1.5rem; }
.sg-updates-title { margin-top: 2rem; }
.card-form .sg-card-title { font-family: var(--font-display); font-weight: 400; font-size: 1.2rem; margin-bottom: 1rem; }

/* ---------- Hub tiles: icon polish ---------- */
.tile__icon svg { width: 20px; height: 20px; }
.tile--link:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.tile.is-soon { opacity: 0.72; }
.tile__soon { float: right; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); background: rgba(138,129,120,0.14); padding: 0.2rem 0.5rem; border-radius: 999px; }

/* ---------- Rota ---------- */
.rota-checks { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.rota-check { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.85rem; color: var(--ink-soft); }
.rota-check input { width: auto; }
.rota-archive { margin-top: 1rem; }

.rota-board-wrap { overflow-x: auto; }
.rota-board { min-width: 760px; }
.rota-board th, .rota-board td { vertical-align: top; }
.rota-board__shift { white-space: nowrap; text-align: left; }
.rota-cell { min-width: 120px; }
.rota-slot { display: inline-flex; align-items: center; gap: 0.3rem; background: rgba(63,125,92,.12); color: var(--ink); border-radius: 999px; padding: 0.15rem 0.5rem; margin: 0 0.2rem 0.3rem 0; font-size: 0.82rem; }
.rota-slot--open { background: rgba(178,58,47,.12); color: var(--danger); }
.rota-slot__x { display: inline; margin: 0; }
.rota-slot__x button { border: none; background: none; cursor: pointer; color: inherit; font-size: 0.75rem; padding: 0; line-height: 1; }
.rota-add { display: flex; gap: 0.3rem; margin-top: 0.2rem; }
.rota-add select { min-width: 0; flex: 1 1 auto; font-size: 0.82rem; padding: 0.3rem 0.4rem; }
.rota-pill { display: inline-block; background: rgba(47,102,144,.12); color: var(--ink); border-radius: 8px; padding: 0.12rem 0.45rem; margin: 0 0.25rem 0.25rem 0; font-size: 0.8rem; }
.rota-pill--open { background: rgba(178,58,47,.14); color: var(--danger); }
.rota-gen { margin: 0; }

/* Rota — populate canvas */
.is-hidden { display: none !important; }
.page--wide { max-width: 1200px; }
.page--xwide { max-width: 1440px; }
.rota-mylink { margin-left: auto; }
.rota-topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 0.5rem 0 1rem; }
.rota-topbar__left { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.rota-topbar__right { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.rota-setup-note { background: rgba(63,125,92,0.08); border: 1px solid var(--line); border-left: 3px solid var(--ok); border-radius: 8px; padding: 10px 14px; margin: 0 0 1rem; font-size: 0.9rem; }
.demand-wrap { overflow-x: auto; margin: 0.6rem 0 1rem; }
.demand-tbl th, .demand-tbl td { text-align: center; }
.demand-tbl th:first-child, .demand-tbl td:first-child { text-align: left; white-space: nowrap; }
.demand-tbl input { width: 3.2rem; text-align: center; padding: 4px 6px; }

/* ---- Service staff grid (drag-and-drop populate) ---- */
.sg-hint { font-size: 0.85rem; color: var(--muted); margin: 0.2rem 0 0.6rem; }
.sg-sticky { position: sticky; top: var(--nav-h, 56px); z-index: 40; background: var(--paper); padding: 8px 0 6px; box-shadow: 0 8px 8px -8px rgba(0,0,0,0.22); }
.sg-sticky--static { position: static; box-shadow: none; }
.sg-sticky .sg-summary { margin-bottom: 0; }
.sg-palette { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 1rem; padding: 10px; border: 1px dashed var(--line); border-radius: 10px; background: var(--paper); }
.sg-shift { cursor: grab; border: 1px solid var(--line); }
.sg-shift:active { cursor: grabbing; }
.sg-chip, .sg-shift, .sg-pop__item {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px;
  border-radius: 8px; padding: 4px 8px; font-size: 0.78rem; line-height: 1.2;
  background: rgba(63,125,92,0.12); color: var(--ink-soft); position: relative;
}
.sg-chip__name { font-weight: 600; }
.sg-chip__time { font-size: 0.68rem; opacity: 0.85; }
.sg-chip__name, .sg-chip__time { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sg-chip { width: 100%; box-sizing: border-box; padding-right: 18px; margin: 0 0 3px; }
/* Placed chips can be dragged cell-to-cell (the × still removes). */
.sg-cell .sg-chip { cursor: grab; }
.sg-cell .sg-chip:active { cursor: grabbing; }
.sg-cell .sg-chip.is-moving { opacity: 0.45; }
.sg-chip__x { position: absolute; top: 1px; right: 2px; border: none; background: none; color: inherit; cursor: pointer; font-size: 14px; line-height: 1; opacity: 0.5; padding: 0 2px; }
.sg-chip__x:hover { opacity: 1; }
/* shift-kind tints */
.sg-chip--early, .sg-shift.sg-chip--early { background: rgba(63,125,92,0.14); }
.sg-chip--late, .sg-shift.sg-chip--late { background: rgba(180,120,40,0.16); }
.sg-chip--long_day, .sg-shift.sg-chip--long_day { background: rgba(90,120,180,0.16); }
.sg-chip--waking_night, .sg-shift.sg-chip--waking_night { background: rgba(90,80,160,0.18); }
.sg-chip--sleep_in, .sg-shift.sg-chip--sleep_in { background: rgba(120,90,160,0.16); }
.sg-chip--on_call, .sg-shift.sg-chip--on_call { background: rgba(150,110,110,0.16); }

.sg-summary { display: flex; flex-wrap: wrap; gap: 1.2rem; margin: 0 0 0.8rem; font-size: 0.9rem; color: var(--muted); }
.sg-summary strong { color: var(--ink); }
.sg-summary .is-short { color: #8a5a00; }
.sg-summary .is-ok { color: var(--ok); }

.sg-grid-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.sg-grid { border-collapse: collapse; width: 100%; min-width: 900px; table-layout: fixed; }
.sg-grid th, .sg-grid td { border: 1px solid var(--line); padding: 6px 8px; vertical-align: top; text-align: left; }
.sg-grid thead th { background: var(--paper); font-size: 0.78rem; text-align: center; white-space: nowrap; }
.sg-grid thead th.sg-col-staff, .sg-grid thead th.sg-col-contract, .sg-grid thead th.sg-col-alloc { text-align: left; }
.sg-col-contract { width: 56px; }
.sg-col-alloc { width: 84px; }
.sg-col-staff { width: 130px; }
.sg-staff { font-weight: 600; font-size: 0.85rem; white-space: nowrap; }
.sg-contract { font-size: 0.8rem; color: var(--muted); white-space: nowrap; padding-left: 6px; padding-right: 6px; }
.sg-alloc { font-size: 0.82rem; white-space: nowrap; padding-left: 6px; padding-right: 6px; }
.sg-alloc__wk { font-weight: 600; display: block; }
.sg-alloc__avg { font-size: 0.64rem; display: block; white-space: nowrap; }
.sg-alloc__avg.is-under { color: #8a5a00; }
.sg-alloc__avg.is-over { color: #a23b3b; }
.sg-alloc__avg.is-ok { color: var(--ok); }
.sg-alloc__avg.is-neutral { color: var(--muted); }
.sg-alloc__sleep { font-size: 0.62rem; display: block; color: #6a5aa0; white-space: nowrap; }
.sg-summary__sleep { color: #6a5aa0; }
.sg-summary__sleep .muted { font-size: 0.78rem; }
.sg-cell { min-width: 104px; cursor: pointer; }
.sg-cell--over { background: rgba(63,125,92,0.1); outline: 2px dashed rgba(63,125,92,0.5); outline-offset: -2px; }
.sg-empty { text-align: center; padding: 1.2rem; }

.sg-pop { position: absolute; z-index: 60; margin-top: 4px; display: flex; flex-direction: column; gap: 3px; min-width: 150px; background: var(--paper-pure); border: 1px solid var(--line); border-radius: 10px; padding: 6px; box-shadow: 0 8px 24px rgba(0,0,0,0.14); }
.sg-pop__item { cursor: pointer; border: 1px solid transparent; text-align: left; }
.sg-pop__item:hover { border-color: var(--line); }
.sg-pop__sel { width: 100%; margin-bottom: 4px; font: inherit; font-size: 0.85rem; padding: 5px 6px; border: 1px solid var(--line); border-radius: 7px; background: var(--paper-pure); color: var(--ink); }
.sg-pop__add { width: 100%; margin-top: 2px; }
.sg-pop__hint { color: var(--muted); font-size: 0.8rem; padding: 6px 4px; }
.sg-pop__lbl { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); padding: 4px 4px 2px; }
.sg-palette__lbl { font-size: 0.72rem; font-weight: 600; color: var(--muted); align-self: center; margin-right: 2px; }
.sg-summary__paid { color: var(--ok); }
.sg-chip__cust { display: block; font-size: 0.66rem; font-weight: 600; opacity: 0.92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* Service-user (customer) mode: care chips + in-table service-user palette row */
.sg-chip--care { background: rgba(90,120,180,0.14); }
.sg-cust-row td { background: rgba(90,120,180,0.06); vertical-align: top; border-color: var(--line); }
.sg-cust-lbl { font-size: 0.72rem; color: var(--muted); font-weight: 600; line-height: 1.25; }
.sg-cust-cell { min-width: 104px; }
.sg-cust { display: block; width: 100%; box-sizing: border-box; cursor: grab; border: 1px solid var(--line); border-radius: 7px; padding: 4px 7px; margin: 0 0 3px; background: rgba(90,120,180,0.12); color: var(--ink-soft); font: inherit; text-align: left; }
.sg-cust:last-child { margin-bottom: 0; }
.sg-cust:active { cursor: grabbing; }
.sg-cust__name { font-weight: 600; font-size: 0.76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Care cards/chips read "Name  1:1" on ONE line — the requirement, not hours.
   Share hours stay in data-hours + the tooltip and still drive the totals. */
.sg-cust, .sg-chip--care, .sg-pop__item--care {
  display: flex; flex-direction: row; align-items: center; gap: 6px;
}
.sg-cust .sg-cust__name, .sg-chip--care .sg-chip__name, .sg-pop__item--care .sg-chip__name {
  flex: 1 1 auto; min-width: 0;
}
.sg-cust .sg-ratio, .sg-chip--care .sg-ratio, .sg-pop__item--care .sg-ratio { flex: none; }
.sg-chip--care { padding-right: 16px; }
.sg-ratio { display: inline-block; font-size: 0.6rem; font-weight: 700; padding: 0 4px; border-radius: 4px; background: rgba(63,125,92,0.16); color: var(--ok); vertical-align: middle; letter-spacing: 0.02em; }
.sg-chip--care .sg-ratio { background: rgba(90,120,180,0.22); color: #3a557d; }
/* Cross-rota clash banner */
.rota-crossclash { border: 1px solid rgba(178,58,47,0.4); border-left: 3px solid var(--danger); background: rgba(178,58,47,0.06); border-radius: 8px; padding: 10px 14px; margin: 0 0 1rem; }
.rota-crossclash__title { font-weight: 700; color: var(--danger); font-size: 0.9rem; cursor: pointer; }
.rota-crossclash ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.rota-crossclash li { font-size: 0.85rem; margin: 2px 0; }
.rota-crossclash--open > .rota-crossclash__title { cursor: default; }
/* Payroll range picker */
.payroll-range { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin: 0.5rem 0 1rem; }
.payroll-range label { display: flex; flex-direction: column; gap: 3px; font-size: 0.8rem; color: var(--ink-soft); font-weight: 600; }
.payroll-range input[type=date] { padding: 0.5rem 0.6rem; border: 1px solid var(--line); border-radius: 8px; font: inherit; background: var(--paper-pure); color: var(--ink); }
.payroll-actions { margin: 0 0 0.8rem; }

.sg-copy { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; margin: 1rem 0; font-size: 0.85rem; }
.sg-copy__lbl { color: var(--muted); }
.sg-copy select { font: inherit; font-size: 0.85rem; padding: 0.4rem 1.7rem 0.4rem 0.7rem; border: 1px solid var(--line); border-radius: 8px; background-color: var(--paper-pure); color: var(--ink); cursor: pointer; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23806a56' d='M0 0h10L5 6z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.6rem center; }
.sg-copy select:hover { border-color: var(--accent); }
.sg-copy select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(63,125,92,0.15); }

.sg-more { margin: 1rem 0; }
.sg-more > summary { cursor: pointer; font-size: 0.9rem; color: var(--accent-deep); }
.sg-more__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-top: 0.8rem; }
.sg-more__form { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: var(--paper-pure); }
.sg-more__form h3 { margin: 0 0 0.3rem; font-size: 0.95rem; }

/* ---- Published week view + absences ---- */
.sg-week .sg-wcell { min-width: 110px; position: relative; }
.sg-wcell--absent { background: rgba(162,59,59,0.06); }
.sg-dots { position: absolute; bottom: 2px; right: 3px; border: none; background: none; cursor: pointer; font-size: 16px; line-height: 1; color: var(--muted); padding: 0 3px; }
.sg-dots:hover { color: var(--ink); }
.sg-dots-inline { font-weight: 700; }
.sg-abs { display: inline-block; margin: 3px 2px 0; padding: 1px 6px; border-radius: 6px; font-size: 0.68rem; font-weight: 600; }
.sg-abs--annual_leave { background: rgba(90,120,180,0.18); color: #3a557d; }
.sg-abs--sickness { background: rgba(162,59,59,0.16); color: #a23b3b; }
.sg-abs--unpaid_leave { background: rgba(150,110,60,0.18); color: #7a5a10; }
.sg-abs--other { background: rgba(120,120,120,0.18); color: #555; }
.sg-abs-key { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0.8rem 0 0; }
.sg-abs-pop { position: absolute; z-index: 60; bottom: 100%; right: 0; margin-bottom: 4px; display: flex; flex-direction: column; gap: 5px; min-width: 210px; background: var(--paper-pure); border: 1px solid var(--line); border-radius: 10px; padding: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.16); }
.sg-abs-pop--down { bottom: auto; top: 100%; margin-bottom: 0; margin-top: 4px; }
/* Cover-needed row, aligned to the day columns */
.sg-cover-row td { background: rgba(178,58,47,0.06); border-color: rgba(178,58,47,0.28); vertical-align: top; }
.sg-cover-lbl { color: var(--danger); font-weight: 700; font-size: 0.72rem; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.03em; }
.sg-cover-cell { padding: 3px 6px; }
.sg-cover-chip { display: block; background: rgba(178,58,47,0.14); color: var(--danger); border: 1px solid rgba(178,58,47,0.4); border-radius: 5px; font-size: 0.72rem; font-weight: 600; padding: 1px 6px; margin: 1px 0; white-space: nowrap; }
/* Published-week cells: slim, time-only chips (kind shown only for sleep/waking) */
.sg-week td { padding: 4px 6px; }
.sg-week .sg-chip { padding: 3px 7px; margin: 0 0 2px; }
.sg-chip__kind { display: block; font-size: 0.62rem; opacity: 0.85; }
.sg-week .sg-chip--extra { padding-right: 18px; border: 1px dashed rgba(63,125,92,0.65); }
.sg-tag { display: inline-block; font-size: 0.56rem; font-weight: 700; padding: 0 3px; border-radius: 3px; vertical-align: middle; letter-spacing: 0.02em; }
.sg-tag--ot { background: rgba(180,120,40,0.28); color: #7a5a10; }
.sg-tag--toil { background: rgba(90,120,180,0.28); color: #3a557d; }
/* Bigger three-dots popover (add shift + absence) */
.sg-abs-pop { min-width: 232px; }
.sg-abs-pop__shift { width: 100%; margin-bottom: 4px; font: inherit; font-size: 0.85rem; padding: 5px 6px; border: 1px solid var(--line); border-radius: 7px; background: var(--paper-pure); color: var(--ink); }
.sg-abs-pop__hr { border-top: 1px solid var(--line); margin: 6px 0 2px; }

/* My Rota: open shift-cover notice */
.cover-alert { border: 1px solid rgba(200,133,0,0.4); border-left: 3px solid rgba(200,133,0,0.85); background: rgba(200,133,0,0.08); border-radius: 10px; padding: 12px 16px; margin: 0 0 1.2rem; }
.cover-alert__title { font-weight: 700; color: #8a5a00; font-size: 0.95rem; }
.cover-alert__lede { font-size: 0.85rem; color: var(--muted); margin: 0.2rem 0 0.6rem; }
.cover-alert__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cover-alert__item { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; background: var(--paper-pure); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; }
.cover-alert__info { font-size: 0.9rem; }
.cover-alert__info .muted { display: block; font-size: 0.78rem; }
.cover-alert__done { color: var(--ok); font-weight: 600; font-size: 0.85rem; }
.req-assign { display: inline-flex; align-items: center; gap: 8px; }
.req-flag { display: inline-flex; align-items: center; gap: 3px; font-size: 0.78rem; color: var(--muted); }
.sg-abs-pop__title { font-weight: 600; font-size: 0.85rem; }
.sg-abs-pop__opt { display: flex; align-items: center; gap: 4px; font-size: 0.82rem; }
.sg-abs-pop__comment { width: 100%; min-height: 44px; font: inherit; font-size: 0.82rem; }

/* "Start a rota" is its own page now — a popover here was clipped by the
   overflow:hidden that .tbl needs for its rounded corners. */
.tpl-summary { margin-bottom: 1rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--line); }

/* Enhanced pay + archived lists. The add form expands inline (static flow) —
   an absolutely-positioned panel would be clipped the way .tbl clips popovers. */
.enh-add { margin-top: 0.9rem; }
.enh-add > summary { display: inline-block; list-style: none; cursor: pointer; }
.enh-add > summary::-webkit-details-marker { display: none; }
.enh-form { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--line); }
.enh-tbl { margin-top: 0.6rem; }
.enh-tbl th, .enh-tbl td { padding: 0.4rem 0.6rem; font-size: 0.85rem; }
.enh-tag { display: inline-block; font-size: 0.68rem; font-weight: 600; padding: 0.1rem 0.4rem; border-radius: 999px; background: rgba(200,85,61,0.14); color: var(--accent-deep); }
.field-row { display: flex; gap: 0.7rem; }
.field-row .field { flex: 1 1 0; min-width: 0; }
/* Add service-user tab: the two-column form and the import bar above it share
   one comfortable column width so they line up instead of clashing. Matches
   .card-form--wide, which the Edit service-user page uses, so both screens agree. */
.su-add .card-form { max-width: 860px; }
.su-import { max-width: 860px; }
.su-manage .tbl { width: 100%; }
.arch-list { margin-top: 1.1rem; }
.arch-list__title { cursor: pointer; font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); }
.rota-export { margin-left: auto; font-size: 0.85rem; }
.rota-uncovered { border: 1px solid rgba(178,58,47,.3); background: rgba(178,58,47,.08); border-radius: var(--radius); padding: 0.8rem 1rem; margin-bottom: 1.1rem; }
.rota-uncovered__title { color: var(--danger); font-weight: 600; }
.rota-uncovered ul { margin: 0.4rem 0 0; padding-left: 1.1rem; color: var(--danger); }
.rota-uncovered summary { cursor: pointer; }
.rota-uncovered--sum summary { list-style-position: outside; }
.rota-uncovered__sub { font-weight: 400; font-size: 0.8rem; color: var(--muted); margin-left: 0.35rem; }
.cov-summary { display: flex; align-items: center; gap: 10px; margin: 0.4rem 0 0.8rem; }
progress.cov-progress { flex: 1; height: 8px; -webkit-appearance: none; appearance: none; border: none; border-radius: 999px; background: var(--paper); }
progress.cov-progress::-webkit-progress-bar { background: var(--paper); border-radius: 999px; }
progress.cov-progress::-webkit-progress-value { background: var(--ok); border-radius: 999px; }
progress.cov-progress::-moz-progress-bar { background: var(--ok); border-radius: 999px; }
.cov-legend { display: flex; gap: 1.1rem; font-size: 0.8rem; color: var(--muted); margin: 0 0 1rem; }
.cov-dot { display: inline-block; width: 10px; height: 10px; border-radius: 999px; vertical-align: middle; margin-right: 4px; }
.cov-dot--ok { background: var(--ok); }
.cov-dot--need { background: rgba(200,133,0,0.75); }
.cov-board { display: flex; flex-direction: column; gap: 7px; }
.cov-row { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; background: var(--paper-pure); }
.cov-row__head { font-weight: 600; font-size: 0.92rem; margin-bottom: 5px; }
.cov-cells { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px; }
.cov-cell { position: relative; }
.cov-cell__day { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 3px; }
.cov-slot { box-sizing: border-box; display: block; width: 100%; border-radius: 8px; padding: 5px 8px; font-size: 0.82rem; margin-bottom: 4px; }
.cov-slot--filled { background: rgba(63,125,92,0.12); color: var(--ok); position: relative; padding-right: 20px; text-align: left; border: none; font: inherit; font-size: 0.82rem; cursor: default; -webkit-appearance: none; appearance: none; }
.cov-slot--empty { display: block; width: 100%; font: inherit; font-size: 0.82rem; background: rgba(200,133,0,0.13); color: #8a5a00; border: 1px dashed rgba(200,133,0,0.5); text-align: center; cursor: pointer; }
.cov-slot--empty:hover { background: rgba(200,133,0,0.22); }
.cov-slot__carer { font-weight: 600; }
.cov-slot__meta { font-size: 0.72rem; opacity: 0.9; }
.cov-slot__x { position: absolute; top: 2px; right: 3px; border: none; background: none; color: inherit; cursor: pointer; font-size: 15px; line-height: 1; opacity: 0.45; padding: 1px 3px; }
.cov-slot__x:hover { opacity: 1; }
.cov-pop { position: absolute; top: calc(100% + 4px); left: 0; z-index: 60; min-width: 180px; max-width: 250px; background: var(--paper-pure); border: 1px solid var(--line); border-radius: 10px; padding: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.14); }
.cov-pop__shift { width: 100%; margin-bottom: 6px; }
.cov-pop__list { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto; }
.cov-pop__carer { display: flex; justify-content: space-between; align-items: center; width: 100%; text-align: left; background: none; border: none; border-radius: 6px; padding: 6px 8px; cursor: pointer; font: inherit; font-size: 0.85rem; color: var(--ink-soft); }
.cov-pop__carer:hover { background: var(--paper); }
.cov-pop__h { color: var(--muted); font-size: 0.75rem; }
.cov-pop__hint { color: var(--muted); font-size: 0.8rem; padding: 6px 8px; }
.cov-note { margin-top: 1rem; font-size: 0.82rem; }
.rota-covered { border: 1px solid rgba(63,125,92,.3); background: rgba(63,125,92,.08); color: var(--ok); border-radius: var(--radius); padding: 0.7rem 1rem; margin-bottom: 1.1rem; font-size: 0.9rem; }
.rota-canvas-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.rota-canvas { width: 100%; border-collapse: collapse; min-width: 920px; }
.rota-canvas th, .rota-canvas td { border: 1px solid var(--line); padding: 0.35rem; vertical-align: top; text-align: left; }
.rota-canvas thead th { background: var(--paper-pure); font-size: 0.8rem; font-weight: 600; }
.rota-c-staff { min-width: 160px; }
.rota-c-day { min-width: 122px; }
.rota-canvas select { width: 100%; font-size: 0.8rem; padding: 0.28rem 0.3rem; margin-bottom: 0.2rem; background: var(--paper-pure); border: 1px solid var(--line); border-radius: 7px; color: var(--ink); }
.rota-canvas select:last-child { margin-bottom: 0; }
.rota-agency { width: 100%; font-size: 0.8rem; padding: 0.28rem 0.3rem; margin-top: 0.2rem; background: var(--paper-pure); border: 1px solid var(--line); border-radius: 7px; color: var(--ink); }
.rota-row-tpl { display: none; }
.rota-canvas-actions { display: flex; gap: 0.6rem; margin-top: 1rem; }
.rota-lines { display: flex; flex-direction: column; gap: 0.25rem; }
.rota-line { display: flex; flex-direction: column; gap: 0.15rem; }
.rota-line select { margin-bottom: 0; }
.rota-addshift { margin-top: 0.3rem; background: none; border: none; color: var(--accent); font-size: 0.74rem; cursor: pointer; padding: 0.1rem 0; }
.rota-line__shift { display: flex; align-items: center; gap: 0.2rem; }
.rota-line__shift .rota-shift { flex: 1 1 auto; }
.rota-delshift { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 0.15rem; flex: none; }
.rota-delshift:hover { color: var(--danger); }
.rota-canvas tfoot th, .rota-canvas tfoot td { background: var(--paper-pure); font-size: 0.8rem; }
.rota-need__val { font-weight: 600; }
.rota-need__val.is-short { color: var(--danger); }
.rota-need__val.is-ok { color: var(--ok); }

/* Rota — stepped sidebar wizard */
.rota-tick { color: var(--ok); margin-left: 0.3rem; font-weight: 600; }
.rota-stepnav { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.rota-avail { display: flex; flex-direction: column; gap: 0.45rem; }
.rota-avail__row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.rota-avail__day { display: inline-flex; align-items: center; gap: 0.35rem; min-width: 95px; }
.rota-avail__day input { width: auto; }
.rota-avail__row input[type="time"] { width: auto; }
.rota-avail__dash { color: var(--muted); }
.rota-ratio { display: flex; align-items: center; gap: 0.5rem; }
.rota-ratio input { width: 84px; }
.avail-time { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.avail-time input[type=time] { width: 150px; max-width: 100%; }

/* Settings — profile photo, sign-in details, job roles */
.settings-tabs { margin: 0.25rem 0 1.6rem; flex-wrap: wrap; }
/* Keep the whole Settings area in one centred column so the tabs, the flash
   notification and the cards all line up to the same width. */
.page--settings { max-width: 860px; }
.page--settings .set-card { max-width: none; }
.avatar-preview { width: 72px; height: 72px; object-fit: cover; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); }
.set-sub--gap { margin-top: 1.6rem; }
.set-card--gap { margin-top: 1rem; }
.jobrole-list { list-style: none; margin: 0 0 0.9rem; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.jobrole-item { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; border: 1px solid var(--line); border-radius: 10px; padding: 0.45rem 0.8rem; background: var(--paper); }
.jobrole-add { display: flex; gap: 0.5rem; align-items: center; }
.jobrole-add input[type="text"] {
  flex: 1 1 auto;
  padding: 0.8rem 0.95rem;
  font-family: var(--font-body);
  font-size: 0.98rem;
  color: var(--ink);
  background: var(--paper-pure);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.jobrole-add input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(200, 85, 61, 0.15);
}

/* ── Emergency procedures (/admin/emergency) ──────────────────────────────
   Read under stress, and often printed. Priorities: commands that can be
   copied without ambiguity, deadlines that cannot be missed, and a layout
   that survives being put on paper. */
.emg-first { margin-bottom: 20px; }
.emg-steps { margin: 10px 0 0; padding-left: 22px; }
.emg-steps > li { margin-bottom: 12px; line-height: 1.55; }

/* Commands sit on their own line, wrap rather than scroll (a half-visible
   command is a mistyped command), and are visually obviously copy-paste. */
.emg-cmd {
  display: block;
  margin: 8px 0 2px;
  padding: 10px 12px;
  background: #1f1b17;
  color: #f4f0e9;
  border-radius: 7px;
  font-family: ui-monospace, "IBM Plex Mono", Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-all;
}

/* Jump bar — the "what has happened?" router. */
.emg-jump {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 22px; padding: 12px 16px;
  background: var(--card, #fbf9f5);
  border: 1px solid var(--line, #e6ddcf);
  border-radius: 10px;
}
.emg-jump__label { font-weight: 600; margin-right: 4px; }
.emg-jump a {
  padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--line, #e6ddcf);
  background: #fff; font-size: 13.5px; text-decoration: none;
}
.emg-jump a:hover { border-color: var(--accent, #c8553d); color: var(--accent, #c8553d); }

/* The processor/controller fork — the single most consequential decision on
   the page, so it gets side-by-side treatment rather than two paragraphs. */
.emg-fork { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 12px 0 4px; }
.emg-fork > div {
  padding: 14px 16px;
  border: 1px solid var(--line, #e6ddcf);
  border-radius: 10px;
  background: #fff;
}
.emg-fork h4 { margin: 0 0 8px; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.emg-fork p { margin: 0 0 8px; font-size: 14px; line-height: 1.5; }
.emg-deadline {
  margin-top: 10px !important; padding-top: 10px;
  border-top: 1px dashed var(--line, #e6ddcf);
}
@media (max-width: 820px) { .emg-fork { grid-template-columns: 1fr; } }

/* Printing matters here: the advice is to keep a paper copy, because if the
   server is down this page is too. */
@media print {
  .emg-jump, nav, header, footer { display: none !important; }
  .emg .adm-panel { break-inside: avoid; border: 1px solid #999; }
  .emg-cmd { background: #f2f2f2; color: #000; border: 1px solid #ccc; }
  .emg-fork { grid-template-columns: 1fr 1fr; }
}

/* ── Safe Recruitment ─────────────────────────────────────────────────────── */
.page--narrow { max-width: 620px; }
.back-link { color: var(--soft, #6b635a); text-decoration: none; font-size: 14px; }
.back-link:hover { color: var(--accent, #c8553d); }
.toolbar { display: flex; align-items: center; gap: 8px; margin: 18px 0 6px; flex-wrap: wrap; }
.toolbar .spacer { flex: 1 1 auto; }
.form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
.adm-panel--ok { border-left: 4px solid var(--green, #3f7d5c); background: var(--green-bg, #e7f0dc); }
.tag { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 999px; vertical-align: middle; }
.tag--muted { background: var(--card, #fbf9f5); border: 1px solid var(--line, #e6ddcf); color: var(--soft, #6b635a); }

.recruit-section { margin: 26px 0; padding-top: 18px; border-top: 1px solid var(--line, #e6ddcf); }
.recruit-section h3 { font-size: 17px; margin: 0 0 6px; }
.recruit-section--gate { background: #f6ead0; border: 1px solid #e3c98a; border-radius: 12px; padding: 16px 18px; }
.recruit-note { font-size: 13px; margin: 0 0 12px; }
.recruit-items { list-style: none; margin: 0; padding: 0; }
.recruit-item { padding: 10px 0; border-bottom: 1px solid var(--line, #e6ddcf); }
.recruit-item:last-child { border-bottom: 0; }
.recruit-item__label { font-size: 14.5px; margin-bottom: 6px; }
.recruit-hint { display: block; font-size: 12px; color: var(--soft, #6b635a); }
.recruit-item__controls { display: flex; gap: 8px; flex-wrap: wrap; }
.recruit-item__controls select,
.recruit-item__controls input { border: 1.5px solid var(--line, #e6ddcf); border-radius: 8px; padding: 7px 9px; font: inherit; font-size: 13.5px; background: #fff; }
.recruit-item__controls select { flex: 0 0 auto; min-width: 96px; }
.recruit-item__controls input[type="date"] { flex: 0 0 auto; }
.recruit-item__controls input[type="text"] { flex: 1 1 160px; min-width: 140px; }
.recruit-item__controls select:focus,
.recruit-item__controls input:focus { outline: none; border-color: var(--accent, #c8553d); box-shadow: 0 0 0 3px rgba(200, 85, 61, 0.12); }
.recruit-save { position: sticky; bottom: 0; background: linear-gradient(transparent, var(--paper, #f4f0e9) 40%); padding: 16px 0; margin-top: 8px; text-align: right; }
.recruit-activate { }
.recruit-withdraw { margin-top: 26px; }
.recruit-withdraw summary { cursor: pointer; color: var(--soft, #6b635a); font-size: 14px; }
.recruit-withdraw__form { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.recruit-withdraw__form input { flex: 1 1 220px; border: 1.5px solid var(--line, #e6ddcf); border-radius: 8px; padding: 8px 10px; font: inherit; }

/* Read-only view (activated/withdrawn) */
.recruit-items--ro .recruit-item--ro { display: flex; align-items: baseline; gap: 10px; }
.recruit-ro-state { flex: 0 0 auto; width: 34px; font-weight: 700; font-size: 13px; }
.recruit-ro-state--done { color: var(--green, #3f7d5c); }
.recruit-ro-state--na { color: var(--soft, #6b635a); font-weight: 500; }
.recruit-ro-state--pending { color: #b23a2f; }
.recruit-ro-meta { color: var(--soft, #6b635a); font-size: 13px; }

.badge--hr { background: #e7f0dc; color: #2f6b47; }

.inline-link { color: var(--accent, #c8553d); font-weight: 600; text-decoration: none; }
.inline-link:hover { text-decoration: underline; }

/* ── Surveys & Forms ──────────────────────────────────────────────────────── */
/* Honeypot: off-screen, not display:none (some bots skip hidden fields). It must
   still submit, so it stays in the layout but far out of view. SECURITY: do not
   change to display:none or remove — it's the spam trap. */
.survey-hp { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Public fill-in page (self-contained, no app chrome). */
.pubform { background: var(--paper, #f4f0e9); margin: 0; }
.pubform__wrap { max-width: 640px; margin: 0 auto; padding: 40px 22px 70px; }
.pubform__wrap--center { text-align: center; padding-top: 80px; }
.pubform__title { font-size: clamp(24px, 4vw, 34px); margin: 0 0 10px; }
.pubform__intro { color: var(--soft, #6b635a); font-size: 16px; line-height: 1.6; margin: 0 0 22px; }
.pubform__form { display: flex; flex-direction: column; gap: 18px; }
.pubq { border: 0; margin: 0; padding: 14px 0; border-top: 1px solid var(--line, #e6ddcf); }
.pubq:first-of-type { border-top: 0; }
.pubq__label { font-weight: 600; font-size: 15.5px; padding: 0; margin-bottom: 8px; }
.pubq__req { color: var(--accent, #c8553d); }
.pubq input[type="text"], .pubq input[type="number"], .pubq input[type="date"], .pubq textarea, .pubq select {
  width: 100%; border: 1.5px solid var(--line, #e6ddcf); border-radius: 9px; padding: 10px 12px; font: inherit; font-size: 15px; background: #fff;
}
.pubq input:focus, .pubq textarea:focus, .pubq select:focus { outline: none; border-color: var(--accent, #c8553d); box-shadow: 0 0 0 3px rgba(200,85,61,.14); }
.pubq__opt { display: block; padding: 6px 0; font-size: 15px; }
.pubq__opt input { margin-right: 8px; }
.pubq__scale { display: flex; gap: 10px; }
.pubq__scaleitem { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; }
.pubform__privacy { background: var(--card, #fbf9f5); border: 1px solid var(--line, #e6ddcf); border-radius: 10px; padding: 12px 16px; font-size: 13.5px; line-height: 1.55; }
.pubform__privacy strong { display: block; margin-bottom: 4px; }
.pubform__privacy p { margin: 0; color: var(--soft, #6b635a); }
.pubform__submit { align-self: flex-start; font-size: 16px; padding: 12px 26px; }
.pubform__foot { text-align: center; color: var(--soft, #6b635a); font-size: 12px; margin-top: 40px; }
.pubform__tick { width: 56px; height: 56px; border-radius: 50%; background: var(--green-bg, #e7f0dc); color: var(--green, #3f7d5c); font-size: 30px; line-height: 56px; margin: 0 auto 16px; }

/* Builder */
/* Builder top bar: Back · title · Save, aligned across the full width. */
.sb-top { display: flex; align-items: center; gap: 16px; margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.sb-top .back-link { flex: 0 0 auto; }
.sb-top__h { font-size: 20px; margin: 0; }
.sb-top__spacer { flex: 1 1 auto; }

/* Form settings sit INSIDE the canvas column (above the questions), so they line
   up with the question cards as one clean column, with the palette beside them. */
.sb-props { background: var(--paper-pure, #fff); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; margin-bottom: 22px; }
.sb-props .field { margin-bottom: 14px; }
.sb-props .field:last-child { margin-bottom: 0; }
.sb-props__row { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.sb-check { font-size: 14px; display: inline-flex; align-items: center; gap: 8px; }
.field--inline { display: inline-flex; align-items: center; gap: 14px; font-size: 14px; white-space: nowrap; }
.field--inline input {
  width: auto; min-width: 150px; margin: 0; flex: 0 0 auto;
  padding: 0.55rem 0.75rem;
  font-family: var(--font-body); font-size: 0.95rem; color: var(--ink);
  background: var(--paper-pure); border: 1px solid var(--line); border-radius: 10px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field--inline input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(200, 85, 61, 0.15); }
.sb-h { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 12px; }
.sb-questions { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.sb-q { border: 1px solid var(--line, #e6ddcf); border-radius: 12px; padding: 14px; background: #fff; }
.sb-q__head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.sb-q__type { border: 1.5px solid var(--line, #e6ddcf); border-radius: 8px; padding: 7px 9px; font: inherit; font-size: 14px; background: #fff; }
.sb-q__spacer { flex: 1 1 auto; }
.sb-q__btn { border: 1px solid var(--line, #e6ddcf); background: #fff; border-radius: 7px; padding: 5px 9px; cursor: pointer; font: inherit; font-size: 13px; }
.sb-q__btn:hover { border-color: var(--accent, #c8553d); }
.sb-q__label { width: 100%; border: 1.5px solid var(--line, #e6ddcf); border-radius: 8px; padding: 9px 11px; font: inherit; font-size: 15px; margin-bottom: 8px; }
.sb-q__reqlabel { font-size: 13.5px; color: var(--soft, #6b635a); display: inline-block; margin-bottom: 8px; }
.sb-q__options { width: 100%; border: 1.5px solid var(--line, #e6ddcf); border-radius: 8px; padding: 9px 11px; font: inherit; font-size: 14px; }

/* Public link box */
.survey-link { display: flex; gap: 8px; align-items: center; }
.survey-link__input { flex: 1 1 auto; border: 1.5px solid var(--line, #e6ddcf); border-radius: 9px; padding: 9px 12px; font: inherit; font-size: 14px; background: #fff; color: var(--ink, #1f1b17); }

/* Sponsorship Compliance */
.spon-section { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.spon-section > h2 { font-size: 1.1rem; margin: 0 0 0.7rem; }
.spon-form { margin-top: 0.6rem; }
.spon-form--tight { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px dashed var(--line); }
.spon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.7rem 1rem; margin-bottom: 0.8rem; }
.spon-grid label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; color: var(--ink-soft); }
.spon-grid input, .spon-grid select { border: 1.5px solid var(--line); border-radius: 8px; padding: 0.5rem 0.6rem; font: inherit; font-size: 0.9rem; background: var(--paper-pure); color: var(--ink); }
.spon-days { display: inline-block; font-size: 0.72rem; font-weight: 600; padding: 0.1rem 0.45rem; border-radius: 999px; background: rgba(138,129,120,0.14); color: var(--ink-soft); }
.spon-days--soon { background: rgba(200,133,45,0.16); color: #8a5a12; }
.spon-days--over { background: rgba(180,60,50,0.15); color: #a3352b; }
.spon-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.5rem 1.2rem; margin: 0; }
.spon-dl dt { font-size: 0.78rem; color: var(--muted); }
.spon-dl dd { margin: 0 0 0.4rem; font-weight: 500; }
.spon-report { display: flex; gap: 0.4rem; align-items: center; }
.spon-report input { border: 1.5px solid var(--line); border-radius: 8px; padding: 0.35rem 0.5rem; font: inherit; font-size: 0.82rem; }
.spon-inline-form { display: inline; margin-left: 0.5rem; }
.spon-end { margin-top: 1.6rem; }
.spon-end > summary { cursor: pointer; color: var(--muted); font-size: 0.9rem; }

/* ---- Quality statements panel (inspection readiness) -------------------- */
/* Shared by every taggable record page via views/partials/_statements.ejs.
   The editor is a native <details>, so it collapses with no JavaScript, which
   the strict CSP requires. */
.qs-panel { margin-top: 1.6rem; border-top: 1px solid var(--line); padding-top: 1.1rem; }
.qs-h { font-size: 0.95rem; margin: 0 0 0.6rem; }
.qs-empty { color: var(--muted); font-size: 0.9rem; margin: 0 0 0.6rem; }
.qs-list { list-style: none; margin: 0 0 0.8rem; padding: 0; display: grid; gap: 0.35rem; }
.qs-item { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; font-size: 0.9rem; }
.qs-code { font-weight: 700; font-size: 0.78rem; padding: 0.1rem 0.4rem; border-radius: 6px;
           background: rgba(138,129,120,0.14); color: var(--ink-soft); }
.qs-title { flex: 1 1 14rem; }
.qs-src { font-size: 0.7rem; font-weight: 600; padding: 0.1rem 0.45rem; border-radius: 999px; }
/* Confirmed by a person carries more weight at inspection than a rule's guess,
   so the two are visually distinct rather than both reading as settled. */
.qs-src--confirmed { background: rgba(60,120,80,0.15); color: #2f6b45; }
.qs-src--auto { background: rgba(200,133,45,0.16); color: #8a5a12; }
.qs-edit > summary { cursor: pointer; color: var(--muted); font-size: 0.9rem; }
.qs-help { font-size: 0.85rem; color: var(--muted); margin: 0.7rem 0; max-width: 46em; }
.qs-group { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em;
            color: var(--muted); margin: 1rem 0 0.4rem; }
.qs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.3rem 1rem; }
.qs-check { display: flex; align-items: baseline; gap: 0.4rem; font-size: 0.86rem; cursor: pointer; }
.qs-check-code { font-weight: 700; font-size: 0.74rem; color: var(--ink-soft); min-width: 1.8rem; }
.qs-check-title { flex: 1; }
.qs-actions { margin-top: 1.1rem; }

/* ---- Inspection readiness dashboard and evidence pack ------------------- */
.qr-summary { display: flex; flex-wrap: wrap; gap: 1.4rem; margin: 1.2rem 0 1.4rem;
              padding: 1rem 1.2rem; border: 1px solid var(--line); border-radius: 12px; }
.qr-stat { display: flex; flex-direction: column; }
.qr-stat__n { font-size: 1.25rem; font-weight: 700; }
.qr-stat__l { font-size: 0.78rem; color: var(--muted); }
.qr-note { font-size: 0.85rem; color: var(--muted); margin: 0.3rem 0 0.8rem; max-width: 46em; }
.qr-kq { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 0 0 0.6rem; }
/* CQC's own wording, visually separated so it is never mistaken for ours. */
.qr-we { border-left: 3px solid var(--line); margin: 0 0 0.8rem; padding: 0.3rem 0 0.3rem 0.9rem;
         font-style: italic; color: var(--ink-soft); max-width: 50em; }
.qr-gaps { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: 0.35rem; }
.qr-gap { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; font-size: 0.9rem; }
.qr-gap__t { margin-left: 0.3rem; }
.qr-band { font-size: 0.7rem; font-weight: 600; padding: 0.1rem 0.45rem; border-radius: 999px; }
/* Deliberately neutral words and colours. These are evidence counts, never CQC
   ratings, and must not read as Good / Requires improvement / Inadequate. */
.qr-band--none { background: rgba(180,60,50,0.15); color: #a3352b; }
.qr-band--thin { background: rgba(200,133,45,0.16); color: #8a5a12; }
.qr-band--ok   { background: rgba(60,120,80,0.15); color: #2f6b45; }
.qr-table { width: 100%; border-collapse: collapse; margin: 0 0 1.6rem; font-size: 0.88rem; }
.qr-table th { text-align: left; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em;
               color: var(--muted); border-bottom: 1px solid var(--line); padding: 0.4rem 0.6rem 0.4rem 0; }
.qr-table td { border-bottom: 1px solid var(--line); padding: 0.45rem 0.6rem 0.45rem 0; vertical-align: top; }

.qp-head { margin-bottom: 1.2rem; }
.qp-sub { font-size: 1rem; color: var(--ink-soft); margin: 0.2rem 0; }
.qp-meta { font-size: 0.82rem; color: var(--muted); margin: 0; }
.qp-note { font-size: 0.85rem; color: var(--ink-soft); border: 1px solid var(--line);
           border-radius: 10px; padding: 0.7rem 0.9rem; max-width: 52em; margin: 0 0 1.6rem; }
.qp-stmt { margin-bottom: 1.8rem; }

@media print {
  /* The pack is meant to be handed over, so strip the app furniture and let each
     statement start cleanly rather than splitting across a page break. */
  .qp-screen-only { display: none !important; }
  .qp { padding: 0; max-width: none; }
  .qp-stmt { break-inside: avoid; page-break-inside: avoid; }
  .qr-table { font-size: 10pt; }
  a { text-decoration: none; color: #000; }
}
.qr-firstrun { border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.2rem;
               margin: 0 0 1.6rem; max-width: 52em; }
.qr-firstrun h2 { margin-top: 0; font-size: 1rem; }
.qr-firstrun p { font-size: 0.9rem; margin: 0.4rem 0; }

/* The readiness dashboard renders one table per key question, so each would
   otherwise size its columns to its own longest statement title and the numeric
   columns would step in and out down the page. Pinning the widths makes all five
   line up. Scoped to --cov because .qr-table is reused on the statement and pack
   pages, which have entirely different columns. */
.qr-table--cov { table-layout: fixed; }
.qr-table--cov th:nth-child(1), .qr-table--cov td:nth-child(1) { width: 4.5rem; }
.qr-table--cov th:nth-child(3), .qr-table--cov td:nth-child(3) { width: 5.5rem; }
.qr-table--cov th:nth-child(4), .qr-table--cov td:nth-child(4) { width: 6.5rem; }
.qr-table--cov th:nth-child(5), .qr-table--cov td:nth-child(5) { width: 8.5rem; }
/* Column 2 takes the remainder and wraps, which is correct: a long title should
   wrap rather than push the numbers out of alignment. */
.qr-table--cov td:nth-child(2) { word-wrap: break-word; }

@media (max-width: 640px) {
  /* Narrow screens cannot hold five fixed columns, so let it size naturally
     again rather than crushing the title column to nothing. */
  .qr-table--cov { table-layout: auto; }
  .qr-table--cov th, .qr-table--cov td { width: auto !important; }
}