:root {
  font-family: "Trebuchet MS", "Avenir Next", sans-serif;
  color: #202d2b;
  background: #f2f7fa;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --ink: #171a1d;
  --muted: #6f767b;
  --line: #d4e0e7;
  --paper: #f2f7fa;
  --green: #64a637;
  --deep-green: #171a1d;
  --coral: #079dc2;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; }
button, input, textarea { font: inherit; }
button { color: inherit; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 96px minmax(0, 1fr); }
.app-shell.is-auth { grid-template-columns: minmax(0, 1fr); }
.app-shell.is-auth .rail { display: none; }
.auth-screen[hidden], .portal-app[hidden], .auth-form[hidden] { display: none !important; }
.auth-screen { min-height: 100vh; display: flex; flex-direction: column; }
.auth-topbar { min-height: 67px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.auth-brand { color: var(--deep-green); text-decoration: none; font-size: 27px; font-weight: 900; line-height: 1; }
.auth-brand span { color: var(--coral); }
.auth-caption { color: #69736e; font-size: 9px; font-weight: 800; letter-spacing: 1.2px; }
.auth-caption span { color: #bdc6bd; padding: 0 7px; }
.auth-main { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 410px); gap: 8vw; align-items: center; padding: 55px 5vw 68px; }
.auth-welcome h1 { font-size: clamp(48px, 6vw, 76px); }
.auth-welcome .intro-text { max-width: 340px; }
.auth-stamp { margin-top: 41px; display: flex; align-items: center; gap: 11px; color: #79847c; font-size: 8px; font-weight: 800; letter-spacing: 1.2px; }
.auth-stamp b { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; color: var(--deep-green); background: var(--green); font-size: 17px; }
.auth-box { background: #fbfcfa; border: 1px solid var(--line); padding: 28px; box-shadow: 12px 12px 0 #e1edf2; }
.auth-box-heading { margin-bottom: 18px; }
.auth-box-heading .eyebrow { margin-bottom: 8px; }
.auth-box-heading h2 { font-size: 25px; }
.auth-switch { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); margin-bottom: 19px; }
.auth-mode { border: 0; background: transparent; color: #78827a; cursor: pointer; padding: 10px 0; font-size: 11px; position: relative; }
.auth-mode.is-active { color: var(--deep-green); font-weight: 800; }
.auth-mode.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--coral); }
.auth-switch.has-admin-setup { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.auth-form { display: grid; gap: 8px; }
.auth-form label { margin-top: 3px; font-size: 10px; font-weight: 800; color: var(--deep-green); }
.auth-form input, .auth-form select { width: 100%; min-height: 39px; font-size: 11px; }
.auth-form select, .role-select-label select { border: 1px solid #d5ddd5; border-radius: 0; background: #fbfcfa; color: var(--ink); padding: 9px 11px; }
.auth-submit { margin-top: 6px; min-height: 42px; }
.auth-feedback { min-height: 14px; color: #b44e38; font-size: 10px; line-height: 1.5; margin: 0; }
.auth-notice { border-top: 1px solid var(--line); padding-top: 13px; margin: 9px 0 0; color: #77817b; font-size: 9px; line-height: 1.6; }
.reset-preview-button { display: block; margin: 9px 0 0 auto; padding: 4px 0; border: 0; background: transparent; color: #77817b; font-size: 9px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.reset-preview-button:hover { color: #a13e32; }
.auth-footer { border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; padding: 13px 0 19px; color: #8a938b; font-size: 8px; font-weight: 700; letter-spacing: .8px; }
.logout-button { border: 0; background: transparent; padding: 0; color: #69736e; font-size: 9px; font-weight: 800; letter-spacing: .6px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.admin-folder-tools { padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.admin-create-tools { padding: 18px 0; border-top: 1px solid var(--line); }
.admin-create-tools > div:first-child p { margin: 5px 0 0; color: var(--muted); font-size: 10px; }
.admin-create-form { max-width: 640px; margin-top: 13px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 10px; align-items: center; }
.admin-create-form label { color: var(--deep-green); font-size: 10px; font-weight: 800; }
.admin-create-form input, .admin-create-form select { width: 100%; min-height: 36px; }
.admin-create-form button { justify-self: start; }
.admin-form-feedback { grid-column: 1 / -1; min-height: 13px; color: var(--muted); font-size: 10px; margin: 0; }
.toast-popup { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 1000; background: var(--deep-green); color: #fff; padding: 12px 22px; font-size: 12px; font-weight: 800; border: 2px solid var(--green); box-shadow: 0 10px 30px rgba(18, 32, 36, .3); animation: toastIn .25s ease both; }
.toast-popup[hidden] { display: none; }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.admin-folder-tools > div:first-child p { margin: 5px 0 0; color: var(--muted); font-size: 10px; }
.folder-create-form { display: flex; gap: 8px; max-width: 470px; margin: 13px 0; }
.folder-create-form input { flex: 1; min-height: 37px; }
.admin-folder-list { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-folder-chip { background: #e4f0f5; color: #23566a; padding: 6px 9px; font-size: 9px; }
.admin-users-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 22px 0 10px; }
.admin-users-heading span { color: var(--muted); font-size: 9px; }
.admin-accounts-list { display: grid; gap: 10px; }
.account-finder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 10px; }
.account-finder label { display: grid; gap: 6px; font-size: 12px; }
.account-finder input, .account-finder select { width: 100%; min-width: 0; min-height: 42px; padding: 9px; border: 1px solid var(--line); background: #fff; color: var(--ink); font: inherit; }
@media (max-width: 600px) { .account-finder { grid-template-columns: 1fr; } }
.admin-user-card { border: 1px solid var(--line); background: #fbfcfa; padding: 15px; display: grid; gap: 13px; }
.admin-user-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.admin-user-heading h3 { font-size: 15px; }
.account-status { padding: 5px 7px; font-size: 8px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; }
.status-pending { background: #fff0cd; color: #765819; }
.status-approved { background: #e4f0df; color: #396c24; }
.status-blocked { background: #e9eaeb; color: #575c60; }
.role-select-label { display: grid; grid-template-columns: 100px minmax(150px, 230px); align-items: center; gap: 9px; color: var(--muted); font-size: 10px; font-weight: 700; }
.role-select-label select { min-height: 34px; }
.admin-account-field { display: grid; grid-template-columns: minmax(150px, 245px) minmax(170px, 1fr); align-items: center; gap: 10px; color: var(--muted); font-size: 10px; font-weight: 700; }
.admin-account-field input { width: 100%; min-height: 34px; }
.permission-group { min-width: 0; margin: 0; border: 0; border-top: 1px solid var(--line); padding: 12px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.permission-group legend { float: left; width: 100%; padding: 0; margin-bottom: 5px; color: var(--deep-green); font-size: 10px; font-weight: 800; }
.permission-group label { display: inline-flex; align-items: center; gap: 6px; color: #566168; font-size: 10px; cursor: pointer; }
.permission-group input { width: 14px; height: 14px; margin: 0; accent-color: var(--green); }
.permission-empty, .admin-empty { color: var(--muted); font-size: 10px; margin: 3px 0; }
.admin-user-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-save-button, .secondary-button { min-height: 35px; }
.secondary-button { border: 1px solid #b7c4ca; background: transparent; color: #485960; padding: 0 12px; font-size: 10px; font-weight: 800; cursor: pointer; }
.secondary-button:hover { background: #e8eff2; }
.folder-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.folder-card { min-height: 130px; padding: 15px; border: 1px solid var(--line); background: #fbfcfa; }
.folder-mark { color: var(--coral); font-size: 20px; }
.folder-card h3 { margin: 13px 0 6px; font-size: 13px; overflow-wrap: anywhere; }
.folder-card p, .folder-empty { color: var(--muted); font-size: 9px; line-height: 1.5; margin: 0; }
.folder-empty { padding: 18px 0; }
.rail { min-height: 100%; background: var(--deep-green); color: #f5f6ef; padding: 27px 17px 22px; display: flex; flex-direction: column; align-items: center; }
.brand { color: inherit; text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.brand-mark { font-size: 27px; font-weight: 900; letter-spacing: 0; line-height: 1; }
.brand-mark span { color: var(--green); }
.brand-caption { font-size: 7px; letter-spacing: 1.1px; font-weight: 700; }
.rail-rule { width: 30px; height: 1px; background: #679083; margin: 35px 0 21px; }
.rail-note { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 9px; letter-spacing: 1.5px; display: flex; align-items: center; gap: 10px; }
.status-dot, .live-dot { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: var(--green); }
.rail-bottom { margin-top: auto; align-self: stretch; font-size: 9px; font-weight: 800; line-height: 1.55; letter-spacing: 1.2px; color: #c4d8cd; }
.main-content { max-width: 1600px; width: 100%; margin: 0 auto; padding: 0 5.25vw; }
.topbar { height: 67px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; font-size: 9px; font-weight: 800; letter-spacing: 1.2px; }
.topbar-label { color: var(--deep-green); }
.topbar-right { color: #69736e; display: flex; gap: 10px; align-items: center; }
.secure-icon { color: var(--coral); font-size: 15px; }
.topbar-separator { color: #c0c8c0; }
.intro { min-height: 248px; padding: 42px 0 34px; display: flex; align-items: center; justify-content: space-between; position: relative; overflow: hidden; }
.eyebrow { color: #79847c; font-size: 9px; font-weight: 800; letter-spacing: 1.6px; margin: 0 0 12px; }
h1 { font-size: clamp(37px, 4.3vw, 58px); line-height: .98; letter-spacing: 0; margin: 0; font-weight: 750; color: var(--deep-green); }
h1 em { color: var(--coral); font-style: normal; }
.intro-text { max-width: 385px; font-size: 13px; line-height: 1.7; color: #66716a; margin: 15px 0 0; }
.intro-aside { width: 190px; height: 140px; position: relative; display: flex; justify-content: center; align-items: center; margin-right: 5%; }
.sunburst { width: 92px; height: 92px; border-radius: 50%; background: var(--green); display: grid; place-content: center; text-align: center; color: var(--deep-green); font-size: 11px; font-weight: 900; line-height: 1.25; transform: rotate(9deg); box-shadow: 0 0 0 13px rgba(183,228,91,.16), 0 0 0 26px rgba(183,228,91,.08); }
.aside-caption { position: absolute; bottom: 2px; right: 0; color: #707b73; font-size: 8px; letter-spacing: 1.2px; font-weight: 800; }
.section-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 24px 0 0; }
.section-card { border: 1px solid var(--line); background: #fbfcfa; cursor: pointer; padding: 16px 13px 14px; display: grid; gap: 6px; text-align: left; transition: transform .2s ease, border-color .2s ease, background .2s ease; position: relative; }
.section-card:hover { transform: translateY(-3px); border-color: rgba(23,75,62,.35); background: #f0f7ec; }
.section-card.is-active { background: var(--deep-green); color: white; border-color: var(--deep-green); }
.section-card.is-active .section-card-icon { color: var(--green); }
.section-card.is-active .section-card-copy { color: rgba(255,255,255,.6); }
.section-card-icon { color: var(--coral); font-size: 22px; line-height: 1; }
.section-card-title { font-size: 13px; font-weight: 800; color: inherit; }
.section-card-copy { color: var(--muted); font-size: 9px; line-height: 1.4; }
.workspace { display: grid; grid-template-columns: minmax(0, 1fr) 245px; gap: 42px; padding: 31px 0 27px; min-height: 385px; }
.content-column { min-width: 0; }
.view-panel { display: none; animation: reveal .35s ease both; }
.view-panel.is-visible { display: block; }
@keyframes reveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 0 0 20px; }
.section-heading .eyebrow { margin-bottom: 7px; }
h2 { color: var(--deep-green); font-size: 24px; line-height: 1.1; margin: 0; letter-spacing: 0; }
.demo-tag { border: 1px solid #dce3d9; color: #758078; padding: 6px 8px; font-size: 8px; font-weight: 800; letter-spacing: 1px; white-space: nowrap; }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.feature-tile { text-align: left; min-height: 152px; border: 1px solid transparent; cursor: pointer; padding: 15px; display: flex; flex-direction: column; align-items: flex-start; position: relative; transition: transform .2s ease, border-color .2s ease; }
.feature-tile:hover { transform: translateY(-3px); border-color: rgba(23,75,62,.27); }
.tile-client { background: #e6ede7; }
.tile-quality { background: #e7ebdf; }
.tile-sickness { background: #e4f0f5; }
.tile-index { font-size: 8px; font-weight: 800; letter-spacing: 1px; color: #7e8b80; }
.tile-icon { position: absolute; top: 12px; right: 13px; color: var(--deep-green); font-size: 17px; }
.tile-title { margin-top: auto; font-size: 16px; font-weight: 800; color: var(--deep-green); }
.tile-copy { color: #737d74; font-size: 10px; line-height: 1.45; margin-top: 5px; }
.login-strip { margin-top: 19px; padding: 17px 0 2px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 190px minmax(0, 1fr); column-gap: 17px; row-gap: 7px; align-items: center; }
.login-copy { display: flex; align-items: center; gap: 10px; }
.login-symbol { width: 29px; height: 29px; border-radius: 50%; display: grid; place-items: center; background: var(--deep-green); color: var(--green); font-size: 18px; }
h3 { font-size: 13px; line-height: 1.35; margin: 0; color: var(--deep-green); }
.login-copy p { margin: 3px 0 0; font-size: 9px; color: #7a847c; }
.login-form { display: grid; grid-template-columns: minmax(95px, 1fr) minmax(95px, 1fr) auto; gap: 7px; }
input, textarea { min-width: 0; border: 1px solid #d5ddd5; border-radius: 0; background: #fbfcfa; color: var(--ink); padding: 10px 11px; font-size: 10px; outline: none; }
input:focus, textarea:focus { border-color: var(--deep-green); box-shadow: 0 0 0 2px rgba(23,75,62,.09); }
.primary-button { min-height: 37px; border: 0; background: var(--green); color: white; padding: 0 14px; font-size: 10px; font-weight: 800; cursor: pointer; white-space: nowrap; transition: background .2s ease; }
.primary-button:hover { background: #4e872b; }
.primary-button span { margin-left: 12px; color: #f3faed; font-size: 14px; }
.form-feedback { grid-column: 2; min-height: 12px; margin: 0; color: var(--deep-green); font-size: 10px; }
.signin-aside { background: var(--deep-green); color: #f1f3e9; min-height: 320px; padding: 14px 15px 13px; display: flex; flex-direction: column; overflow: hidden; position: relative; }
.aside-top, .aside-bottom { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1; }
.aside-label, .aside-bottom { font-size: 8px; font-weight: 800; letter-spacing: 1px; }
.live-dot { width: 6px; height: 6px; }
.aside-art { flex: 1; min-height: 235px; position: relative; display: flex; align-items: center; justify-content: center; }
.art-ring { border: 1px solid rgba(225,238,217,.2); border-radius: 50%; position: absolute; aspect-ratio: 1; }
.ring-one { width: 180px; }
.ring-two { width: 128px; border-color: rgba(225,238,217,.37); }
.art-star { position: absolute; color: var(--green); font-size: 31px; top: 46px; right: 32px; }
.art-caption { position: relative; z-index: 1; font-size: 25px; line-height: .99; font-weight: 900; letter-spacing: 0; transform: rotate(-5deg); }
.art-caption i { color: var(--green); font-style: normal; }
.aside-bottom { color: #b5c8ba; }
.footer { border-top: 1px solid var(--line); display: flex; justify-content: space-between; padding: 13px 0 20px; color: #8a938b; font-size: 8px; font-weight: 700; letter-spacing: .8px; }
.empty-state { display: flex; align-items: flex-start; gap: 17px; padding: 30px 25px; background: #e6ede7; min-height: 150px; }
.quality-empty { background: #e7ebdf; }
.empty-symbol { color: var(--coral); font-size: 25px; line-height: 1; }
.empty-state h3 { font-size: 16px; margin: 1px 0 8px; }
.empty-state p, .prototype-note { color: #707a72; font-size: 11px; line-height: 1.65; max-width: 440px; margin: 0; }
.prototype-note { margin: 12px 0 0; font-size: 9px; }
.sickness-layout { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 18px; }
.sickness-form { display: grid; grid-template-columns: 1fr; gap: 7px; }
.form-intro { color: #66716a; font-size: 11px; line-height: 1.6; margin: 0 0 7px; }
.sickness-form label { color: var(--deep-green); font-size: 10px; font-weight: 800; margin-top: 3px; }
.sickness-form input, .sickness-form textarea { width: 100%; }
.sickness-form textarea { resize: vertical; }
.optional { font-size: 8px; color: #9aa29a; margin-left: 5px; }
.report-button { justify-self: start; margin-top: 5px; }
.sickness-form .form-feedback { grid-column: auto; }
.callout-note { padding: 15px; background: #e4f0f5; align-self: start; }
.callout-icon { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--coral); color: white; font-size: 13px; font-weight: 900; margin-bottom: 13px; }
.callout-note h3 { font-size: 13px; }
.callout-note p { color: #73736c; font-size: 10px; line-height: 1.6; margin: 8px 0 14px; }
.callout-foot { color: #c45e45; font-size: 8px; font-weight: 900; letter-spacing: 1px; }
.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; }
.audit-dashboard { display: grid; gap: 22px; }
.audit-overview { display: grid; gap: 17px; margin-bottom: 24px; }
.audit-summary-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.audit-summary-stats article { min-height: 78px; background: #e4f0f5; padding: 12px 14px; display: grid; align-content: space-between; }
.audit-summary-stats span { color: #5b7078; font-size: 9px; font-weight: 800; }
.audit-summary-stats strong { color: var(--deep-green); font-size: 21px; line-height: 1; }
.audit-location-summary { border-top: 1px solid var(--line); }
.audit-location-summary-row { display: grid; grid-template-columns: minmax(0, 1.5fr) 65px 90px minmax(130px, 1fr); gap: 10px; align-items: center; padding: 9px 8px; border-bottom: 1px solid var(--line); color: #566168; font-size: 10px; }
.audit-location-summary-row > :not(:first-child) { text-align: right; }
.audit-location-summary-row strong { color: var(--deep-green); font-size: 10px; }
.audit-location-summary-heading { color: var(--muted); background: #f2f7fa; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.audit-location-average { color: #396c24; font-weight: 800; }
.audit-dashboard-section { border-top: 1px solid var(--line); padding-top: 14px; }
.audit-subheading, .audit-editor-heading, .audit-progress, .audit-matrix-toolbar, .audit-editor-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.audit-subheading { margin-bottom: 10px; }
.audit-subheading h3, .admin-folder-tools h3, .audit-editor-heading h3 { font-size: 15px; }
.audit-subheading > span { color: var(--muted); font-size: 9px; }
.audit-history, .audit-actions { display: grid; gap: 8px; }
.audit-record { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; border-bottom: 1px solid var(--line); padding: 10px 0; }
.audit-record-details h4 { color: var(--deep-green); font-size: 12px; margin: 0 0 4px; }
.audit-record-details p { color: var(--muted); font-size: 9px; margin: 2px 0; }
.audit-record-score { font-weight: 700; }
.audit-followup-tab, .audit-followup-panel { grid-column: 1 / -1; }
.audit-followup-tab { justify-self: start; }
.audit-followup-panel { border: 1px solid var(--line); padding: 16px; }
.audit-followup-form { display: grid; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.audit-followup-form label { display: grid; gap: 6px; font-size: 12px; font-weight: 700; }
.audit-followup-form textarea { width: 100%; padding: 9px; font: inherit; resize: vertical; }
.audit-followup-form .audit-resolved-checkbox { display: flex; align-items: center; gap: 8px; }
.audit-resolved-checkbox input { width: 18px; height: 18px; }
.audit-followup-form p { white-space: pre-wrap; font-size: 12px; line-height: 1.6; }
.audit-followup-form details article { margin: 10px 0; padding: 10px; background: #f8fafc; }
.audit-followup-form button { justify-self: start; }
.audit-status { padding: 5px 7px; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.status-draft { background: #fff0cd; color: #765819; }
.audit-empty { color: var(--muted); font-size: 10px; padding: 10px 0; }
.site-action { border-left: 3px solid #d45b43; background: #f8fbfc; padding: 11px 13px; display: grid; gap: 6px; }
.site-action-heading { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 9px; }
.site-action-heading strong { color: var(--deep-green); font-size: 11px; }
.site-action > p { color: var(--muted); font-size: 9px; margin: 0; }
.site-action .site-action-text { color: var(--ink); font-size: 10px; }
.site-action-photo { color: #087a98; font-size: 9px; font-weight: 700; justify-self: start; }
.resolve-action { justify-self: start; }
.audit-editor { margin-top: 22px; border-top: 2px solid var(--deep-green); padding-top: 18px; }
.audit-editor[hidden] { display: none; }
.audit-editor-heading { margin-bottom: 17px; }
.audit-editor-heading .eyebrow { margin-bottom: 5px; }
.audit-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 14px; background: #e7f0f4; }
.audit-meta label, .failure-dialog label { display: grid; gap: 6px; color: var(--deep-green); font-size: 10px; font-weight: 800; }
.audit-meta input, .audit-meta select { width: 100%; min-height: 36px; border: 1px solid #cbd7dc; border-radius: 0; background: white; color: var(--ink); padding: 7px 9px; font-size: 10px; }
.audit-progress { justify-content: flex-start; color: var(--deep-green); font-size: 10px; font-weight: 800; padding: 14px 0 9px; }
.audit-score-pill { color: var(--muted); }
.audit-matrix-toolbar { align-items: flex-end; margin: 0 0 9px; }
.audit-matrix-toolbar span { color: var(--muted); font-size: 9px; line-height: 1.5; }
.audit-matrix-wrap { max-height: min(65vh, 620px); overflow-y: auto; overflow-x: hidden; border: 1px solid var(--line); background: white; overscroll-behavior: contain; }
.audit-room-toolbar { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(150px, 1fr) auto; gap: 10px; align-items: end; padding: 12px; background: #e4f0f5; border: 1px solid var(--line); border-bottom: 0; }
.audit-room-picker, .audit-room-name-field { display: grid; gap: 5px; color: var(--deep-green); font-size: 9px; font-weight: 800; }
.audit-room-picker select, .audit-room-name-field input { width: 100%; min-height: 36px; border: 1px solid #cbd7dc; border-radius: 0; background: white; padding: 7px 9px; color: var(--ink); font-size: 10px; }
.audit-check-list { display: grid; }
.audit-check-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 10px; border-bottom: 1px solid var(--line); background: #fff; }
.audit-check-row:nth-child(even) { background: #f8fbfc; }
.audit-check-label { display: flex; align-items: baseline; gap: 8px; color: #34434a; font-size: 10px; line-height: 1.4; }
.audit-check-number { min-width: 20px; color: #73838a; font-size: 8px; font-weight: 800; text-align: right; }
.audit-check-controls { display: grid; grid-template-columns: repeat(2, 56px); gap: 5px; }
.audit-outcome-button { min-height: 33px; border: 1px solid #cbd7dc; background: white; color: #647077; font-size: 9px; font-weight: 800; cursor: pointer; }
.audit-outcome-button:disabled { cursor: default; }
.audit-outcome-button.outcome-pass[aria-pressed="true"] { border-color: #96bf7f; background: #eaf4e4; color: #356b25; }
.audit-outcome-button.outcome-fail[aria-pressed="true"] { border-color: #d98a76; background: #fff0eb; color: #9e3e2c; }
.audit-check-action { grid-column: 1 / -1; margin: -2px 0 2px 28px; color: #884333; font-size: 9px; line-height: 1.5; }
.audit-matrix { border-collapse: separate; border-spacing: 0; min-width: max-content; table-layout: fixed; font-size: 9px; }
.audit-matrix th, .audit-matrix td { width: 112px; min-width: 112px; max-width: 112px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 6px; text-align: center; }
.audit-matrix thead th { position: sticky; top: 0; z-index: 2; height: 118px; vertical-align: bottom; background: #e4f0f5; color: #234d5b; font-size: 9px; line-height: 1.35; font-weight: 800; }
.audit-matrix .audit-room-heading, .audit-matrix .audit-room-cell { position: sticky; left: 0; z-index: 3; width: 174px; min-width: 174px; max-width: 174px; background: #f2f7fa; }
.audit-matrix .audit-room-heading { z-index: 4; text-align: left; }
.audit-matrix .audit-room-cell { display: table-cell; text-align: left; }
.audit-room-input { width: 100%; min-height: 31px; padding: 6px 7px; font-size: 10px; font-weight: 700; }
.remove-room-button { border: 0; background: transparent; color: #a13e32; font-size: 8px; padding: 5px 0 0; cursor: pointer; }
.audit-outcome { width: 100%; min-height: 34px; border: 1px solid #cbd7dc; border-radius: 0; background: #fff; color: #535f64; font-size: 9px; font-weight: 700; padding: 4px; }
.is-pass .audit-outcome { border-color: #b8d3a8; background: #eef6e9; color: #376b26; }
.is-fail .audit-outcome { border-color: #e4a999; background: #fff0eb; color: #9e3e2c; }
.audit-editor-actions { justify-content: flex-end; margin-top: 12px; flex-wrap: wrap; }
.audit-form-feedback { flex: 1; min-width: 180px; color: var(--muted); font-size: 10px; margin: 0; }
.failure-dialog { width: min(480px, calc(100% - 28px)); max-width: 100%; border: 1px solid var(--line); padding: 22px; background: #fbfcfa; color: var(--ink); box-shadow: 0 18px 55px rgba(18, 32, 36, .25); }
.failure-dialog::backdrop { background: rgba(16, 26, 31, .48); }
.failure-dialog h2 { font-size: 22px; margin-bottom: 8px; }
.failure-context { background: #e4f0f5; color: #234d5b; padding: 9px; font-size: 10px; line-height: 1.5; }
.failure-dialog form { display: grid; gap: 12px; }
.failure-dialog label input { width: 100%; min-height: 38px; }
.failure-dialog input[type="file"] { font-size: 9px; }
.failure-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
.admin-location-tools, .admin-product-tools { padding: 18px 0; border-top: 1px solid var(--line); }
.admin-location-tools > div:first-child p, .admin-product-tools > div:first-child p { margin: 5px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.location-admin-form { max-width: 700px; margin: 14px 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 12px; align-items: center; }
.location-admin-form label { display: grid; gap: 5px; color: var(--deep-green); font-size: 10px; font-weight: 800; }
.location-admin-form input, .location-admin-form select { width: 100%; min-height: 36px; }
.location-admin-form input[type="file"] { font-size: 9px; }
.location-admin-form textarea { width: 100%; resize: vertical; font-size: 10px; }
.location-admin-form .schedule-field, .location-admin-form button, .location-admin-form .admin-form-feedback { grid-column: 1 / -1; }
.location-admin-form button { justify-self: start; }
.admin-location-list, .admin-product-list { display: grid; gap: 8px; }
.admin-location-card, .admin-product-card { border: 1px solid var(--line); background: #fbfcfa; padding: 12px; display: grid; gap: 9px; }
.admin-location-card h4, .admin-product-card h4 { color: var(--deep-green); font-size: 12px; margin: 0; }
.admin-location-card p, .admin-product-card p { color: var(--muted); font-size: 9px; margin: 3px 0; }
.admin-location-card textarea { width: 100%; }
.admin-location-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.delete-location-button { border-color: #d8a59a; color: #a13e32; }
.delete-location-button:hover { background: #fff0eb; }
.client-location-list { display: grid; gap: 14px; }
.client-location-card { border: 1px solid var(--line); background: #fbfcfa; padding: 17px; }
.client-location-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.client-location-card > header h3 { font-size: 18px; }
.client-location-card > header p { color: var(--muted); font-size: 10px; margin: 5px 0 0; }
.location-address { line-height: 1.5; }
.location-contact-number { display: inline-block; margin-top: 5px; color: #087a98; font-size: 10px; font-weight: 800; }
.location-badge { background: #e4f0f5; color: #23566a; padding: 6px 8px; font-size: 8px; font-weight: 800; letter-spacing: .8px; }
.location-content-section { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 13px; }
.location-content-section h4 { color: var(--deep-green); font-size: 12px; margin: 0 0 9px; }
.location-content-section > p { color: #566168; font-size: 10px; line-height: 1.65; white-space: pre-line; margin: 0; }
.location-document-link { color: #087a98; display: inline-block; font-size: 9px; font-weight: 800; margin: 5px 10px 3px 0; }
.location-empty-note { color: var(--muted) !important; font-size: 9px !important; }
.site-product-card { display: grid; grid-template-columns: 64px minmax(130px, 1fr) minmax(170px, auto); gap: 12px; align-items: center; border-bottom: 1px solid var(--line); padding: 10px 0; }
.site-product-card img, .site-product-placeholder { width: 60px; height: 60px; object-fit: contain; border: 1px solid var(--line); background: #f2f7fa; }
.site-product-placeholder { display: grid; place-items: center; color: #71828a; font-size: 7px; font-weight: 800; }
.site-product-details h5 { color: var(--deep-green); font-size: 11px; margin: 0 0 4px; }
.site-product-details p { color: var(--muted); font-size: 9px; margin: 3px 0; }
.product-document-links { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.product-document-links .location-document-link { margin-right: 0; }
.sds-revision { color: #4c6d3c !important; }
.sds-missing { color: #a13e32; font-size: 9px; font-weight: 700; }
.location-audit-record { border-bottom: 1px solid var(--line); padding: 9px 0; }
.location-audit-record summary { color: #40525a; font-size: 10px; cursor: pointer; }
.location-audit-record ul { margin: 8px 0 0; padding-left: 18px; color: #704338; font-size: 9px; line-height: 1.6; }

@media (max-width: 900px) {
  .main-content { padding: 0 4vw; }
  .audit-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .auth-main { gap: 4vw; padding: 45px 2vw 55px; }
  .workspace { grid-template-columns: minmax(0, 1fr) 200px; gap: 23px; }
  .section-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .login-strip { grid-template-columns: 1fr; }
  .form-feedback { grid-column: 1; }
}
@media (max-width: 680px) {
  .app-shell { grid-template-columns: 54px minmax(0, 1fr); }
  .rail { padding: 21px 8px 15px; }
  .brand-mark { font-size: 21px; }
  .brand-caption { font-size: 5px; }
  .rail-rule { margin: 27px 0 18px; width: 24px; }
  .rail-bottom { font-size: 7px; letter-spacing: .6px; }
  .rail-note { font-size: 7px; }
  .main-content { padding: 0 18px; }
  .audit-meta { grid-template-columns: 1fr; padding: 11px; }
  .audit-summary-stats article { min-height: 68px; padding: 9px; }
  .audit-summary-stats span { font-size: 8px; }
  .audit-summary-stats strong { font-size: 18px; }
  .audit-location-summary-row { grid-template-columns: minmax(0, 1fr) 35px 48px 78px; gap: 4px; padding: 8px 4px; font-size: 8px; }
  .audit-location-summary-row strong { font-size: 8px; overflow-wrap: anywhere; }
  .audit-location-summary-heading { font-size: 7px; }
  .audit-subheading { align-items: flex-start; flex-direction: column; gap: 4px; }
  .audit-record { grid-template-columns: 1fr auto; gap: 8px; }
  .audit-record-details { grid-column: 1 / -1; }
  .audit-record .secondary-button { justify-self: start; }
  .audit-progress { align-items: flex-start; flex-direction: column; gap: 5px; }
  .audit-matrix-toolbar { align-items: flex-start; flex-direction: column; }
  .audit-room-toolbar { grid-template-columns: 1fr; align-items: stretch; }
  .audit-check-row { gap: 6px; padding: 7px; }
  .audit-check-label { gap: 6px; font-size: 9px; }
  .audit-check-controls { grid-template-columns: repeat(2, 48px); gap: 4px; }
  .audit-outcome-button { min-height: 34px; }
  .audit-check-action { margin-left: 26px; }
  .audit-editor-actions { align-items: stretch; }
  .audit-editor-actions .audit-form-feedback { flex-basis: 100%; }
  .failure-dialog { padding: 17px; }
  .auth-main { grid-template-columns: 1fr; gap: 25px; padding: 35px 0 42px; }
  .auth-welcome h1 { font-size: clamp(43px, 12vw, 58px); }
  .auth-welcome .eyebrow { margin-bottom: 9px; }
  .auth-welcome .intro-text { margin-top: 10px; }
  .auth-stamp { display: none; }
  .auth-box { padding: 21px; box-shadow: 7px 7px 0 #e1edf2; }
  .folder-grid { grid-template-columns: 1fr; }
  .admin-users-heading { align-items: flex-start; flex-direction: column; }
  .role-select-label { grid-template-columns: 1fr; }
  .admin-create-form { grid-template-columns: 1fr; }
  .location-admin-form { grid-template-columns: 1fr; }
  .location-admin-form .schedule-field, .location-admin-form button, .location-admin-form .admin-form-feedback { grid-column: 1; }
  .site-product-card { grid-template-columns: 52px minmax(0, 1fr); gap: 9px; }
  .site-product-card img, .site-product-placeholder { width: 50px; height: 50px; }
  .product-document-links { grid-column: 1 / -1; }
  .client-location-card { padding: 13px; }
  .admin-account-field { grid-template-columns: 1fr; gap: 5px; }
  .folder-create-form { flex-direction: column; align-items: stretch; }
  .auth-footer { font-size: 7px; line-height: 1.5; }
  .auth-footer span:last-child { text-align: right; }
  .topbar { height: 53px; font-size: 7px; letter-spacing: .7px; }
  .topbar-right { gap: 5px; }
  .intro { min-height: 212px; padding: 34px 0 28px; }
  h1 { font-size: clamp(35px, 9vw, 48px); }
  .intro-text { max-width: 270px; font-size: 11px; }
  .intro-aside { width: 82px; height: 95px; margin-right: 4px; }
  .sunburst { width: 60px; height: 60px; font-size: 8px; box-shadow: 0 0 0 8px rgba(183,228,91,.16), 0 0 0 16px rgba(183,228,91,.08); }
  .aside-caption { font-size: 6px; white-space: nowrap; }
  .section-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; padding-top: 18px; }
  .section-card { padding: 12px 10px 11px; }
  .section-card-icon { font-size: 18px; }
  .section-card-title { font-size: 11px; }
  .section-card-copy { font-size: 8px; }
  .workspace { display: block; padding-top: 24px; }
  .signin-aside { min-height: 185px; margin-top: 28px; }
  .aside-art { min-height: 115px; }
  .ring-one { width: 118px; }
  .ring-two { width: 85px; }
  .art-caption { font-size: 19px; }
  .art-star { top: 7px; right: 20%; font-size: 23px; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-tile { min-height: 112px; }
  .tile-title { font-size: 15px; }
  .tile-copy { font-size: 10px; }
  .login-form { grid-template-columns: 1fr; }
  .login-copy { margin-bottom: 3px; }
  .login-form .primary-button { justify-self: start; }
  .section-heading { align-items: center; }
  h2 { font-size: 21px; }
  .sickness-layout { grid-template-columns: 1fr; }
  .callout-note { grid-row: 1; }
  .footer { font-size: 7px; gap: 12px; line-height: 1.5; }
  .footer span:last-child { text-align: right; }
}
.stock-product-list { display: grid; gap: 12px; }
.stock-product-card { border: 1px solid var(--line); background: #fbfcfa; padding: 14px; display: grid; gap: 10px; }
.stock-product-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.stock-product-header h3 { font-size: 15px; margin: 0; color: var(--deep-green); }
.stock-product-header p { color: var(--muted); font-size: 10px; margin: 4px 0 0; }
.stock-level { background: #e4f0f5; color: #23566a; padding: 5px 8px; font-size: 9px; font-weight: 800; white-space: nowrap; }
.stock-level.low-stock { background: #fff0cd; color: #765819; }
.stock-controls { display: grid; grid-template-columns: 60px auto minmax(140px, 1fr) auto; gap: 8px; align-items: center; }
.stock-quantity-input { min-height: 34px; text-align: center; font-size: 10px; font-weight: 800; }
.stock-adjust { min-height: 34px; }
.stock-location-select { min-height: 34px; font-size: 10px; border: 1px solid #cbd7dc; background: #fbfcfa; padding: 6px 9px; }
.stock-book { min-height: 34px; font-size: 9px; padding: 0 12px; }
.stock-usage-summary { border-top: 1px solid var(--line); padding-top: 10px; }
.usage-title { color: var(--deep-green); font-size: 10px; font-weight: 800; margin: 0 0 7px; }
.usage-row { color: #566168; font-size: 9px; margin: 4px 0; }
.usage-row.over-use { color: #a13e32; font-weight: 800; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Stock search and confirmed inventory movements. */
.stock-search { position: relative; display: grid; gap: 8px; }
.stock-search > label { color: var(--deep-green); font-size: 12px; font-weight: 800; }
.stock-search input { width: 100%; min-height: 44px; padding: 10px 12px; font-size: 13px; }
.stock-search-hint, .stock-empty-details, .stock-feedback { color: var(--muted); font-size: 12px; line-height: 1.5; }
.stock-search-hint { margin: 0 0 8px; }
.stock-search-results { position: absolute; top: 72px; left: 0; right: 0; z-index: 10; max-height: 320px; overflow-y: auto; background: white; border: 1px solid var(--line); box-shadow: 0 10px 24px rgba(18,32,36,.15); }
.stock-search-results[hidden], .stock-movement-form[hidden] { display: none; }
.stock-search-result { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; border: 0; border-bottom: 1px solid var(--line); background: white; padding: 13px; text-align: left; cursor: pointer; color: var(--ink); }
.stock-search-result:hover, .stock-search-result:focus-visible { background: #eef5f8; }
.stock-search-result strong { display: block; font-size: 13px; }
.stock-search-result small { display: block; color: var(--muted); margin-top: 4px; font-size: 11px; overflow-wrap: anywhere; }
.stock-no-results { margin: 0; padding: 14px; font-size: 12px; }
.stock-level.in-stock { background: #e6f4e7; color: #24682d; }
.stock-level.out-of-stock { background: #fde8e7; color: #a52c28; }
.stock-current-quantity { font-size: 19px; color: var(--deep-green); font-weight: 800; margin: 10px 0; }
.stock-detail-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.stock-in-button { background: #24682d; color: white; }
.stock-out-button { background: #a52c28; color: white; }
.stock-movement-form { display: grid; gap: 10px; border-top: 1px solid var(--line); padding-top: 16px; margin-top: 8px; }
.stock-movement-form h4 { margin: 0; font-size: 16px; }
.stock-movement-form label { font-size: 12px; font-weight: 800; }
.stock-movement-form input, .stock-movement-form select { width: 100%; max-width: 380px; min-height: 42px; padding: 9px; font-size: 13px; }
.stock-movement-preview { color: var(--deep-green); font-size: 12px; line-height: 1.5; }
.stock-movement-form button:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 680px) {
  .stock-search-result { align-items: flex-start; flex-direction: column; gap: 8px; }
  .stock-product-header { flex-wrap: wrap; }
}

/* Office operations screen. */
.overview-open .workspace { grid-template-columns: minmax(0, 1fr); }
.overview-open .signin-aside { display: none; }
.office-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-bottom: 24px; }
.office-heading h2 { font-size: 30px; }
.office-message { font-size: 15px; line-height: 1.5; margin: 8px 0 0; max-width: 700px; overflow-wrap: anywhere; }
.office-clock { display: grid; gap: 4px; text-align: right; }
.office-clock time { font-size: clamp(30px, 4vw, 52px); font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -1px; }
.office-clock span { font-size: 13px; }
.office-clock small { font-size: 11px; color: var(--muted); }
.office-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin-bottom: 20px; }
.office-summary article { background: #e4f0f5; padding: 20px; display: grid; gap: 10px; border-top: 4px solid #079dc2; }
.office-summary span { font-size: 13px; font-weight: 800; }
.office-summary strong { font-size: 40px; font-variant-numeric: tabular-nums; }
.office-summary small { font-size: 11px; color: #52616a; }
.office-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.office-card { border: 1px solid var(--line); background: #fff; padding: 18px; min-width: 0; }
.office-card > header { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 4px; }
.office-card h3 { font-size: 17px; margin: 0; }
.office-card header span { font-size: 10px; color: var(--muted); }
.office-sites-card { grid-column: span 2; }
.office-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.office-row > div { min-width: 0; }
.office-row strong { font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.office-row p { margin: 5px 0 0; font-size: 11px; line-height: 1.5; color: #5f6e76; overflow-wrap: anywhere; }
.office-badge { flex-shrink: 0; padding: 5px 7px; background: #edf2f5; font-size: 10px; font-weight: 800; border-radius: 3px; }
.office-danger .office-badge { background: #fde8e7; color: #a52c28; }
.office-warning .office-badge { background: #fff0cd; color: #765819; }
#office-low-stock .office-low-stock-flash .office-badge,
#office-registrations .office-warning .office-badge,
#office-registration-count.has-pending { animation: lowStockAmberFlash 1.6s ease-in-out infinite; }
#office-registration-count.has-pending { padding: 5px 7px; border-radius: 3px; font-weight: 800; }
@keyframes lowStockAmberFlash {
  0%, 100% { background-color: #fff0cd; color: #765819; box-shadow: 0 0 0 0 rgba(217, 119, 6, 0); }
  50% { background-color: #fbbf24; color: #422006; box-shadow: 0 0 0 3px rgba(217, 119, 6, .2); }
}
#office-actions .office-danger .office-badge,
#office-action-count.has-urgent,
.audit-urgent-flash { animation: urgentActionFlash 1.6s ease-in-out infinite; }
#office-action-count.has-urgent { padding: 5px 7px; border-radius: 3px; font-weight: 800; }
@keyframes urgentActionFlash {
  0%, 100% { background-color: #fde8e7; color: #a52c28; box-shadow: 0 0 0 0 rgba(185, 28, 28, 0); }
  50% { background-color: #dc2626; color: white; box-shadow: 0 0 0 3px rgba(185, 28, 28, .2); }
}
@media (prefers-reduced-motion: reduce) {
  #office-actions .office-danger .office-badge,
  #office-action-count.has-urgent,
  .audit-urgent-flash { animation: none; background-color: #fde8e7; color: #a52c28; }
  #office-low-stock .office-low-stock-flash .office-badge,
  #office-registrations .office-warning .office-badge,
  #office-registration-count.has-pending { animation: none; background-color: #fbbf24; color: #422006; }
}
.office-success .office-badge { background: #e6f4e7; color: #24682d; }
.office-empty, .office-page-note { color: #63747d; font-size: 12px; line-height: 1.5; padding: 12px 0; margin: 0; }
.office-status { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; color: var(--muted); font-size: 11px; padding: 16px 0; }
.office-admin-section { border-top: 3px solid #079dc2; padding: 20px 0; }
.office-admin-section > h3 { font-size: 21px; }
.office-admin-section > p { font-size: 12px; line-height: 1.6; color: var(--muted); }
.office-admin-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 16px 0; }
.office-admin-form label { display: grid; gap: 6px; font-size: 12px; font-weight: 800; }
.office-admin-form input, .office-admin-form select { width: 100%; min-height: 40px; padding: 9px; font-size: 12px; }
.office-admin-form > button { justify-self: start; }
.office-admin-feedback { grid-column: 1 / -1; font-size: 12px; color: #4c626f; margin: 0; }
.office-admin-group { border-top: 1px solid var(--line); padding: 14px 0; }
.office-admin-group > summary { font-size: 15px; font-weight: 800; cursor: pointer; }
.office-admin-buttons { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.office-admin-buttons [hidden] { display: none; }
.office-admin-record { border: 1px solid var(--line); padding: 12px; margin: 8px 0; font-size: 13px; }
.office-admin-record p, .office-admin-list > p { font-size: 12px; line-height: 1.5; color: var(--muted); }
.office-display-mode .app-shell { display: block; }
.office-display-mode .rail, .office-display-mode .topbar, .office-display-mode .intro, .office-display-mode .section-cards, .office-display-mode .footer { display: none; }
.office-display-mode .main-content { padding: 24px 32px; }
.office-display-mode .workspace { padding-top: 0; }
.office-display-mode .office-heading h2 { font-size: 36px; }
.office-display-mode .office-row strong { font-size: 18px; }
.office-display-mode .office-row p { font-size: 14px; }
.office-display-mode .office-card h3 { font-size: 20px; }
.office-display-mode .office-badge { font-size: 12px; }
.office-display-mode .office-summary span { font-size: 16px; }
.office-display-mode .office-summary strong { font-size: 48px; }
@media (max-width: 1000px) {
  .office-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .office-sites-card { grid-column: auto; }
  .office-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 680px) {
  .office-grid, .office-admin-form { grid-template-columns: 1fr; }
  .office-heading { align-items: flex-start; }
  .office-clock { text-align: left; }
  .office-summary article { padding: 12px; }
  .office-summary strong { font-size: 32px; }
  .office-row { flex-wrap: wrap; }
  .office-display-mode .main-content { padding: 16px; }
}

/* Keep permission-hidden controls hidden even when their component uses grid/flex. */
[hidden] { display: none !important; }
.portal-menu-open .intro, .portal-menu-open .footer { display: none; }
.portal-menu-open .signin-aside { display: none; }
#office-display-launch { display: none; }
.portal-menu-open #office-display-launch { display: grid; }
.portal-menu-open .section-cards { padding-top: 28px; }
.section-cards { grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); }
#portal-no-access h2 { font-size: 22px; }
#portal-no-access p { font-size: 13px; line-height: 1.6; color: var(--muted); }
/* Original TGC website artwork. The viewport shows the mark, with the current strapline in HTML. */
.tgc-logo { position: relative; display: block; width: 150px; aspect-ratio: 450 / 280; overflow: hidden; flex-shrink: 0; }
.tgc-logo img { position: absolute; display: block; width: 240.444444%; max-width: none; height: auto; left: -12.222222%; top: -19.642857%; }
.brand-strapline { display: block; color: #078db1; font-size: 15px; font-weight: 800; letter-spacing: .3px; line-height: 1.4; margin: 0; }
.auth-brand { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 12px 0; text-decoration: none; }
.auth-brand .tgc-logo { width: 115px; }
.auth-brand .brand-strapline { color: #078db1; font-size: 12px; }
.auth-strapline { font-size: 24px; margin-top: 20px; }
.brand .tgc-logo { width: 67px; }
.brand-caption { text-align: center; font-size: 6px; letter-spacing: .5px; }
.intro-aside { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 9px; }
.intro-aside .tgc-logo { width: 145px; }
.intro-aside .brand-strapline { font-size: 13px; white-space: nowrap; }
.office-identity { display: flex; align-items: center; gap: 18px; min-width: 0; }
.office-identity .tgc-logo { width: 100px; }
.office-identity .brand-strapline { font-size: 15px; margin-bottom: 8px; }
@media (max-width: 680px) {
  .brand .tgc-logo { width: 42px; }
  .brand-caption { font-size: 4px; }
  .auth-brand .tgc-logo { width: 90px; }
  .intro-aside { width: 95px; margin-left: 8px; }
  .intro-aside .tgc-logo { width: 90px; }
  .intro-aside .brand-strapline { font-size: 9px; }
  .office-identity { gap: 10px; }
  .office-identity .tgc-logo { width: 70px; }
}

.stock-in-content { display: grid; gap: 14px; }
.stock-in-content > button { justify-self: start; }
.stock-in-facts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin: 10px 0; }
.stock-in-facts div { background: #edf5f8; padding: 12px; }
.stock-in-facts dt { font-size: 11px; color: #61737c; font-weight: 800; margin-bottom: 6px; }
.stock-in-facts dd { margin: 0; font-size: 16px; color: var(--ink); overflow-wrap: anywhere; }
.stock-in-facts div:nth-child(2) { grid-column: span 2; }
.stock-in-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; border-top: 1px solid var(--line); padding: 16px 0; }
.stock-in-form label { display: grid; gap: 7px; font-size: 12px; font-weight: 800; }
.stock-in-form input, .stock-in-form textarea { width: 100%; min-height: 42px; padding: 10px; font-size: 14px; }
.stock-in-form > .stock-detail-actions, .stock-in-form > .stock-feedback, .stock-in-preview, .stock-in-note { grid-column: 1 / -1; }
.stock-in-form > button { justify-self: start; }
.stock-sds-status { grid-column: 1 / -1; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.stock-sds-status > div { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.stock-sds-status > button { margin-left: 12px; }
.stock-in-preview { background: #e6f4e7; border-left: 3px solid #24682d; padding: 14px; font-size: 14px; line-height: 1.7; }
.stock-in-note { font-size: 12px; line-height: 1.6; color: var(--muted); margin: 0; }
.stock-in-form button:disabled { opacity: .5; cursor: not-allowed; }
.stock-product-tools { border-top: 1px solid var(--line); padding-top: 14px; }
.stock-delete-product { color: #a52c28; border-color: #d9a3a0; }
.stock-history { border-top: 1px solid var(--line); padding: 15px 0; }
.stock-history > summary { cursor: pointer; font-size: 14px; font-weight: 800; }
.stock-history-row { border-bottom: 1px solid var(--line); padding: 14px 0; font-size: 12px; }
.stock-history-row p { margin: 6px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
@media (max-width: 680px) {
  .stock-in-form, .stock-in-facts { grid-template-columns: 1fr; }
  .stock-in-facts div:nth-child(2) { grid-column: auto; }
}

/* Keep the receipt workspace compact and focused. */
.stock-in-open .intro, .stock-in-open .signin-aside { display: none; }
.stock-in-open .workspace { grid-template-columns: minmax(0,1fr); }
.stock-in-content > .stock-feedback:empty { display: none; }
/* Six office cards fit into two rows. */
.office-sites-card { grid-column: auto; }

/* Audit results and configurable traffic lights */
.audit-light { display: inline-block; border-radius: 20px; padding: 5px 12px; font-weight: 700; font-size: .85rem; }
.audit-light-red { background: #fee2e2; color: #991b1b; }
.audit-light-amber { background: #fef3c7; color: #92400e; }
.audit-light-green { background: #dcfce7; color: #166534; }
.audit-light-none { background: #f1f5f9; color: #475569; }
.audit-score-location { padding: 20px; margin-bottom: 18px; border: 1px solid #dbe4e6; border-radius: 14px; background: white; }
.audit-score-location h4 { margin: 0 0 12px; }
.audit-score-history { padding: 12px 0; border-top: 1px solid #e2e8f0; }
.audit-score-history p { margin: 6px 0; }
.audit-rectification-note, #audit-rectifications { white-space: pre-wrap; overflow-wrap: anywhere; }
#audit-rectifications { width: 100%; margin-top: 8px; padding: 12px; border: 1px solid #cbd5e1; border-radius: 8px; font: inherit; }
#client-admin-controls .office-admin-form { margin-top: 16px; }

.stock-workspace-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 24px; }
.stock-workspace-tabs button { padding: 12px 18px; border: 1px solid #cbd5e1; border-radius: 9px; background: white; color: #334155; font: inherit; font-weight: 700; cursor: pointer; }
.stock-workspace-tabs button.is-active { background: #164d44; color: white; border-color: #164d44; }
.stock-workspace-tabs button:focus-visible { outline: 3px solid #eab308; outline-offset: 3px; }
.stock-workspace-tabs button.is-locked { text-decoration: line-through; color: #64748b; background: #f1f5f9; border-color: #cbd5e1; }
.location-picker { display: grid; gap: 8px; max-width: 480px; margin-bottom: 24px; font-weight: 700; }
.location-picker select { width: 100%; min-height: 42px; padding: 9px 12px; border: 1px solid #cbd5e1; border-radius: 8px; background: white; color: var(--ink); font: inherit; }
.booking-meta, .booking-item-entry { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.booking-item-entry { margin-top: 16px; }
.booking-item-entry > button { justify-self: start; }
.booking-cart { overflow-x: auto; margin: 20px 0; }
.booking-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.booking-table th, .booking-table td { padding: 12px 9px; text-align: left; border-bottom: 1px solid #dbe4e6; }
.booking-table th { background: #f1f5f9; font-weight: 700; }
.booking-repeat { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-bottom: 16px; }
.booking-repeat label { display: grid; gap: 8px; }
.booking-repeat input { border: 1px solid #cbd5e1; border-radius: 8px; padding: 12px; font: inherit; }
.accounts-email-settings { margin: 24px 0; border-top: 1px solid #dbe4e6; padding-top: 16px; }
.stock-completion-sheet { margin-top: 24px; padding: 24px; background: white; border: 1px solid #cbd5e1; border-radius: 12px; overflow-x: auto; }
.booking-total { font-weight: 700; font-size: 1.1rem; }
.booking-sheet-controls { margin: 14px 0; }
.booking-history-button { display: block; margin: 10px 0; text-align: left; }
.booking-order-form { display: grid; gap: 12px; margin: 14px 0 0; }
.booking-order-form .booking-meta { grid-template-columns: minmax(240px, 2fr) minmax(160px, 1fr); gap: 12px; }
.booking-order-form label { display: grid; gap: 5px; font-size: 12px; font-weight: 700; }
.booking-order-form input, .booking-order-form select { min-height: 34px; padding: 7px 9px; border: 1px solid #cbd5e1; border-radius: 5px; font: inherit; font-size: 13px; width: 100%; }
.booking-order-table-wrap { margin: 0; }
.booking-order-table { font-size: 13px; }
.booking-order-table th, .booking-order-table td { padding: 7px 8px; border-bottom: 1px solid #e8edef; vertical-align: middle; }
.booking-order-table th { background: #f5f8f9; font-size: 11px; }
.booking-order-table th:first-child { width: 48%; }
.booking-order-table th:nth-child(2) { width: 90px; }
.booking-order-table th:last-child { width: 105px; }
.booking-order-table .secondary-button { min-height: 34px; padding: 6px 10px; font-size: 12px; white-space: nowrap; }
.booking-entry-row { background: #fbfcfd; }
.booking-remove-item { border: 0; padding: 4px 0; background: transparent; color: #8c3c35; font: inherit; font-size: 11px; cursor: pointer; }
.booking-order-total { font-size: 13px; font-weight: 700; margin: 12px 0; }
.booking-order-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 8px 0; }
.booking-order-actions button:disabled { opacity: .45; cursor: not-allowed; }
.stock-order-complete-dialog > p { font-size: 14px; line-height: 1.6; margin: 12px 0 20px; }
.shift-editor { border: 1px solid var(--line); padding: 16px; margin: 12px 0; min-width: 0; grid-column: 1 / -1; }
.shift-editor > legend { font-weight: 800; font-size: 16px; }
.shift-fields { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.shift-fields label { display: grid; gap: 6px; font-size: 12px; font-weight: 700; }
.shift-fields input { width: 100%; min-height: 36px; padding: 7px 9px; border: 1px solid #cbd5e1; background: white; font: inherit; }
.shift-name-field { flex: 1 1 220px; max-width: 320px; }
.shift-hours-field { flex: 0 0 120px; width: 120px; }
.shift-days { display: flex; flex-wrap: wrap; gap: 12px 18px; border: 0; padding: 12px 0; margin: 12px 0 0; }
.shift-days legend { font-weight: 700; font-size: 12px; }
.shift-days label { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.shift-days input[type="checkbox"] { width: 18px; min-height: 18px; height: 18px; margin: 0; }
.shift-summary { font-size: 12px; line-height: 1.7; }
.shift-total { padding: 12px; background: #eaf4ef; color: #173b39; font-weight: 800; line-height: 1.7; }
.shift-hours-table-wrap { overflow-x: auto; margin-top: 16px; }
.shift-hours-table-wrap table { min-width: 680px; }
.shift-entry { border: 1px solid var(--line); padding: 14px; margin: 0 0 14px; min-width: 0; }
.shift-entry > legend { font-weight: 800; font-size: 14px; }
.shift-weeks-field { display: grid; gap: 6px; max-width: 160px; font-weight: 700; }
.shift-weeks-field input { width: 100%; padding: 7px 9px; min-height: 36px; border: 1px solid #cbd5e1; font: inherit; }
.shift-row-total { font-weight: 700; line-height: 1.7; }
.office-shift-hours { display: grid; gap: 8px; }
.office-shift-hours > div { display: flex; justify-content: space-between; gap: 12px; font-size: clamp(12px, 1vw, 18px); }
.office-shift-hours strong { color: #173b39; white-space: nowrap; }
.office-shift-coverage { color: var(--muted); font-size: 10px; margin: 10px 0 0; }
@media (max-width: 650px) {
  .booking-order-form .booking-meta { grid-template-columns: 1fr; }
  .booking-order-table { min-width: 580px; }
}
.location-edit-tools { margin: 14px 0; }
.location-edit-tabs { display: flex; flex-wrap: wrap; gap: 10px; }
.location-edit-tabs button[aria-expanded="true"] { background: #173b39; color: white; border-color: #173b39; }
.location-edit-tools .admin-location-card { margin-top: 12px; }
.stock-take-controls { display: flex; align-items: end; flex-wrap: wrap; gap: 16px; }
.stock-take-controls label { display: grid; gap: 8px; }
.stock-take-controls select { padding: 12px; border: 1px solid #cbd5e1; border-radius: 8px; font: inherit; }
.stock-take-table td { height: 38px; }
.stock-control-search { display: flex; align-items: end; flex-wrap: wrap; gap: 14px; }
.stock-control-search label { display: grid; gap: 8px; flex: 1; min-width: 220px; font-weight: 700; font-size: 13px; }
.stock-control-search input { width: 100%; border: 1px solid #cbd5e1; border-radius: 8px; padding: 12px; font: inherit; }
.stock-control-product-list { overflow-x: auto; }
.stock-control-count { font-size: 12px; color: #61737c; }
.stock-control-table td { vertical-align: middle; }
.stock-control-table td:first-child, .stock-control-table td:nth-child(n+5) { white-space: nowrap; }
.stock-control-table td:nth-child(4) { min-width: 120px; max-width: 220px; overflow-wrap: anywhere; }
.stock-control-table .secondary-button { padding: 7px 12px; }
.facilities-pane { min-width: 0; }
.facilities-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 16px 0; }
.facilities-form label { display: grid; gap: 6px; font-size: 12px; font-weight: 700; min-width: 0; }
.facilities-form input:not([type="checkbox"]), .facilities-form select, .facilities-form textarea, .facilities-filters select { width: 100%; min-height: 40px; border: 1px solid var(--line); border-radius: 4px; padding: 9px; font: inherit; background: #fff; color: var(--ink); }
.facilities-form label:has(input[type="checkbox"]) { display: flex; align-items: center; gap: 9px; }
.facilities-form input[type="checkbox"] { width: 18px; height: 18px; flex: 0 0 auto; }
.facilities-form > fieldset, .facilities-form > p, .facilities-form > strong { grid-column: 1 / -1; }
.facilities-form fieldset { border: 1px solid var(--line); padding: 12px; display: grid; gap: 9px; }
.facilities-form button { justify-self: start; }
.facilities-service { margin: 18px 0; padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; overflow-wrap: anywhere; }
.facilities-service-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.facilities-service-heading h4 { margin: 0; font-size: 17px; }
.facilities-badge { display: inline-block; border-radius: 5px; border: 1px solid currentColor; padding: 5px 8px; font-size: 11px; font-weight: 800; }
.facilities-red { background: #ffe3e0; color: #9d211b; }
.facilities-amber { background: #fff1cc; color: #795200; }
.facilities-blue { background: #e0eeff; color: #184d94; }
.facilities-green { background: #dcf3e5; color: #1b633a; }
.facilities-neutral { background: #edf1f3; color: #52616a; }
.facilities-booking-status { font-weight: 700; }
.facilities-section { border-top: 1px solid var(--line); margin-top: 12px; padding: 12px 0; }
.facilities-section summary { cursor: pointer; font-weight: 700; padding: 6px 0; }
.facilities-pane pre, #facilities-admin pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; background: #f1f5f7; padding: 12px; max-height: 360px; overflow-y: auto; }
.facilities-reply, .facilities-action { border-bottom: 1px solid var(--line); padding: 12px 0; }
.facilities-feedback { font-size: 12px; line-height: 1.6; color: var(--ink); overflow-wrap: anywhere; }
.facilities-simulation { background: #f4eeff; border: 1px dashed #8565ac; padding: 14px; margin-top: 14px; }
.facilities-filters, .facilities-tools { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin: 10px 0; }
.facilities-filters label { display: grid; gap: 4px; font-size: 11px; font-weight: 700; }
.facilities-widget-list { max-height: 220px; overflow-y: auto; }
.facilities-widget-row { display: flex; flex-wrap: wrap; gap: 7px 12px; align-items: center; border: 1px solid currentColor; border-radius: 6px; margin: 6px 2px; padding: 10px 12px; font-size: 12px; }
.facilities-reminder-details { flex: 1 1 300px; display: grid; gap: 5px; overflow-wrap: anywhere; }
.facilities-reminder-status { font-weight: 800; flex: 0 1 auto; }
.facilities-widget-row button { min-height: 30px; background: #fff; }
.facilities-reminder-flash { animation: facilitiesReminderFlash 2s ease-in-out infinite; }
@keyframes facilitiesReminderFlash {
  0%, 100% { box-shadow: inset 0 0 0 0 currentColor; }
  50% { box-shadow: inset 0 0 0 3px currentColor; }
}
@media (prefers-reduced-motion: reduce) {
  .facilities-reminder-flash { animation: none; box-shadow: inset 0 0 0 2px currentColor; }
}
.facilities-dashboard { min-width: 0; }
.attendance-controls { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; margin: 16px 0; }
.attendance-controls label { display: grid; gap: 8px; font-weight: 700; flex: 1 1 240px; max-width: 480px; }
.attendance-controls select { min-height: 44px; width: 100%; padding: 9px; font: inherit; border: 1px solid var(--line); background: white; }
.attendance-controls button { min-height: 44px; padding: 10px 20px; }
.attendance-status { font-size: 16px; font-weight: 700; }
.attendance-feedback { min-height: 24px; }
.attendance-record { border-top: 1px solid var(--line); padding: 12px 0; }
.attendance-record p { font-size: 12px; line-height: 1.6; margin: 6px 0; }
.backup-reset-form { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); display: grid; gap: 12px; max-width: 650px; }
.backup-reset-form label { display: grid; gap: 7px; font-weight: 700; }
.backup-reset-form input:not([type="checkbox"]) { min-height: 42px; padding: 9px; border: 1px solid var(--line); font: inherit; max-width: 360px; }
.backup-reset-form .backup-acknowledge { display: flex; align-items: start; gap: 10px; line-height: 1.5; font-weight: 500; }
.backup-reset-form .backup-acknowledge input { width: 18px; height: 18px; flex-shrink: 0; }
.backup-reset-form button { justify-self: start; min-height: 42px; border-color: #a52c28; color: #a52c28; }
.backup-feedback { line-height: 1.6; min-height: 24px; }
.attendance-settings { border: 1px solid var(--line); border-radius: 8px; padding: 12px; margin: 12px 0; }
.attendance-settings summary { cursor: pointer; font-weight: 700; line-height: 1.6; }
.attendance-settings label { display: grid; gap: 5px; margin: 12px 0; }
.attendance-settings input:not([type="checkbox"]), .attendance-settings textarea, .attendance-settings select { padding: 9px; min-height: 40px; font: inherit; max-width: 100%; border: 1px solid var(--line); }
.attendance-settings input[type="checkbox"] { width: 20px; height: 20px; }
.attendance-settings button { min-height: 40px; margin: 8px 8px 8px 0; }
.attendance-photo { max-width: 100%; max-height: 280px; object-fit: contain; display: block; margin: 10px 0; }
.attendance-green { background: #dcf3e5; color: #1b633a; }
.attendance-red { background: #ffe3e0; color: #9d211b; }
.attendance-amber { background: #fff1cc; color: #795200; }
.attendance-neutral { background: #edf1f3; color: #52616a; }
.attendance-live-card { grid-column: 1 / -1; min-width: 0; }
#attendance-live { max-height: 180px; overflow: auto; }
.attendance-live-row { padding: 10px; margin: 5px 0; border-radius: 6px; font-size: 12px; }
.attendance-live-line { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 4px; }
.attendance-live-line > span { white-space: normal; }
.attendance-work-form select,.attendance-work-form textarea { width: 100%; padding: 9px; margin: 10px 0; font: inherit; }
.quality-checklist { margin-bottom: 24px; border: 1px solid var(--line); padding: 18px; border-radius: 10px; }
.quality-toolbar,.quality-answers { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.quality-toolbar button,.quality-answers button { min-height: 48px; padding: 10px 18px; }
.quality-meta { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 14px; margin: 16px 0; }
.quality-checklist label { display: grid; gap: 7px; margin: 10px 0; font-size: 13px; font-weight: 700; }
.quality-checklist input:not([type="checkbox"]),.quality-checklist select,.quality-checklist textarea { width: 100%; min-height: 44px; border: 1px solid var(--line); padding: 10px; font: inherit; background: white; }
.quality-checklist input[type="checkbox"] { width: 22px; height: 22px; }
.quality-guidance { background: #eef6f1; padding: 18px; line-height: 1.7; border-radius: 8px; }
.quality-area { border: 1px solid #b6c8bf; border-radius: 8px; padding: 16px; margin: 18px 0; }
.quality-section { border: 1px solid var(--line); padding: 14px; margin: 16px 0; }
.quality-section legend { font-weight: 800; font-size: 15px; }
.quality-section summary, .quality-review > summary { font-weight: 800; font-size: 15px; cursor: pointer; padding: 8px 0; }
.quality-review { border: 1px solid var(--line); padding: 16px; margin: 16px 0; }
.quality-template-editor { max-width: 1000px; }
.quality-template-editor label { display: grid; gap: 6px; margin: 12px 0; font-size: 13px; font-weight: 700; }
.quality-template-editor input:not([type="checkbox"]), .quality-template-editor textarea, .quality-template-editor select { width: 100%; min-width: 0; min-height: 44px; padding: 10px; border: 1px solid var(--line); background: #fff; font: inherit; }
.quality-template-editor textarea { min-height: 80px; }
.template-section, .template-question { margin: 12px 0; border: 1px solid var(--line); padding: 14px; }
.template-section > summary, .template-question > summary { cursor: pointer; font-weight: 700; overflow-wrap: anywhere; }
.quality-review .quality-failure { margin: 12px 0; }
@media (max-width: 600px) { .template-section, .template-question { padding: 10px; } .quality-toolbar button { flex: 1 1 auto; } }
.quality-check { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; border-top: 1px solid var(--line); padding: 10px 0; min-width: 0; overflow-wrap: anywhere; }
.quality-check > strong { grid-column: 1; grid-row: 1; align-self: center; }
.quality-check > .quality-answers { grid-column: 2; grid-row: 1; margin: 0; gap: 6px; }
.quality-check > :not(strong):not(.quality-answers) { grid-column: 1 / -1; }
.quality-check .quality-answers button { min-height: 44px; padding: 8px 14px; }
.quality-check > p { margin: 3px 0; }
.quality-check-extra { font-size: 12px; }
.quality-check-extra > summary { font-size: 12px; font-weight: 500; padding: 3px 0; cursor: pointer; color: var(--muted); }
.quality-check-extra textarea { min-height: 60px; }
@media (max-width: 640px) {
  .quality-check { grid-template-columns: minmax(0, 1fr); }
  .quality-check > .quality-answers { grid-column: 1; grid-row: auto; }
  .quality-check .quality-answers button { flex: 1; }
  .quality-area, .quality-section { padding: 10px; margin: 12px 0; }
}
.quality-answers button[aria-pressed="true"] { background: #173b39; color: white; box-shadow: inset 0 0 0 2px #b7e45b; }
.quality-unanswered { color: #9a5408; font-size: 12px; font-weight: 700; }
.quality-failure { background: #fff2ed; border-left: 4px solid #b84637; padding: 14px; }
.quality-progress { background: #edf5f0; padding: 14px; line-height: 1.6; font-weight: 800; }
.quality-feedback { line-height: 1.7; color: #8d391f; }
#quality-live { max-height: 180px; overflow-y: auto; }
@media (min-width:900px) {
  .overview-open #panel-home.is-visible:has(.facilities-dashboard:not([hidden])) { grid-template-rows: auto minmax(0,1fr) minmax(120px,.45fr) auto; }
  .overview-open .facilities-dashboard { grid-column: 1 / -1; min-height: 0; overflow-y: auto; padding: 10px 14px; }
  .overview-open .facilities-dashboard .facilities-widget-list { max-height: 120px; }
  .overview-open .facilities-filters { margin: 4px 0; }
  .overview-open .facilities-filters select { min-height: 30px; padding: 5px; font-size: 11px; }
}
@media (max-width:600px) { .facilities-form { grid-template-columns: 1fr; } .facilities-service { padding: 12px; } .facilities-filters label { flex: 1 1 100%; } }
.site-cost-table-wrap { overflow-x: auto; }
.site-cost-month { display: inline-grid; gap: 8px; margin: 12px 0; }
.site-cost-month input { padding: 10px; border: 1px solid #cbd5e1; border-radius: 8px; font: inherit; }
.location-stock-tabs { margin: 20px 0 12px; }
.site-stock-print-button { margin-left: 14px; }
#site-stock-print-sheet { display: none; }
@media print {
  body.printing-site-stock > :not(#site-stock-print-sheet) { display: none !important; }
  body.printing-site-stock { background: white; }
  body.printing-site-stock #site-stock-print-sheet { display: block; padding: 4mm; color: black; }
  body.printing-site-stock #site-stock-print-sheet .site-cost-table-wrap { overflow: visible; }
  body.printing-site-stock #site-stock-print-sheet table { font-size: 10pt; }
  body.printing-site-stock #site-stock-print-sheet tr { break-inside: avoid; }
}
.cost-up { color: #b42318; font-weight: 700; }
.cost-down { color: #166534; font-weight: 700; }
#office-cost-content .office-summary strong { font-size: clamp(18px, 2vw, 28px); overflow-wrap: anywhere; }
#office-cost-content .booking-table { font-size: 1rem; }
.office-display-mode #office-cost-content .booking-table { font-size: clamp(16px, 1.2vw, 24px); }

/* A single-screen live dashboard on desktop displays. */
@media screen and (min-width: 900px) {
  body.overview-open { height: 100dvh; overflow: hidden; }
  .overview-open .app-shell { height: 100dvh; min-height: 0; }
  .overview-open .main-content { height: 100dvh; max-width: none; padding: 0 18px; }
  .overview-open #portal-app { height: 100%; display: flex; flex-direction: column; min-height: 0; }
  .overview-open .intro, .overview-open .footer { display: none; }
  .overview-open .topbar { height: 30px; flex-shrink: 0; }
  .overview-open .section-cards { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; padding: 7px 0; flex-shrink: 0; }
  .overview-open .section-card { padding: 7px 9px; gap: 3px; }
  .overview-open .section-card-icon, .overview-open .section-card-copy { display: none; }
  .overview-open .section-card-title { font-size: 11px; }
  .overview-open .workspace { flex: 1; min-height: 0; padding: 6px 0; gap: 0; overflow: hidden; }
  .overview-open .content-column { height: 100%; min-height: 0; }
  .overview-open #panel-home.is-visible { height: 100%; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; gap: 10px; animation: none; }
  .overview-open .office-heading { grid-column: 1 / -1; margin: 0; gap: 12px; flex-wrap: nowrap; }
  .overview-open .office-heading h2 { font-size: clamp(18px, 1.6vw, 28px); }
  .overview-open .office-identity { min-width: 0; gap: 8px; }
  .overview-open .office-identity .tgc-logo { width: 58px; }
  .overview-open .brand-strapline { font-size: 10px; }
  .overview-open .office-message { font-size: 10px; margin: 2px 0 0; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
  .overview-open .office-clock time { font-size: clamp(24px, 2.5vw, 36px); }
  .overview-open .office-clock span { font-size: 10px; }
  .overview-open .office-clock small { display: none; }
  .overview-open #office-display-toggle { padding: 8px 10px; font-size: 10px; min-height: 0; }
  .overview-open #office-overview-content, .overview-open #office-cost-content { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 8px; min-height: 0; min-width: 0; }
  .overview-open .office-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0; }
  .overview-open #office-cost-content .office-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-open .office-summary article { padding: 8px 9px; gap: 3px; border-top-width: 3px; }
  .overview-open .office-summary span { font-size: clamp(10px, .7vw, 13px); line-height: 1.2; }
  .overview-open .office-summary strong { font-size: clamp(20px, 2vw, 34px); line-height: 1.1; }
  .overview-open .office-summary small { font-size: 9px; line-height: 1.2; }
  .overview-open #office-cost-content .office-summary strong { font-size: clamp(14px, 1.25vw, 22px); line-height: 1.2; }
  .overview-open .office-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 7px; min-height: 0; }
  .overview-open .office-sites-card { grid-column: span 2; }
  .overview-open .office-card { padding: 8px 10px; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
  .overview-open .office-card > header { gap: 3px; padding-bottom: 5px; flex-shrink: 0; }
  .overview-open .office-card h3 { font-size: clamp(11px, .85vw, 16px); }
  .overview-open .office-card header span { font-size: 8px; }
  .overview-open .office-rows { min-height: 0; flex: 1; display: flex; flex-direction: column; }
  .overview-open .office-row { min-height: 0; flex: 1; gap: 5px; padding: 5px 0; flex-wrap: nowrap; overflow: hidden; }
  .overview-open .office-row strong { font-size: clamp(10px, .75vw, 14px); line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .overview-open .office-row p { font-size: clamp(9px, .65vw, 12px); line-height: 1.2; margin: 3px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .overview-open .office-badge { font-size: clamp(8px, .6vw, 11px); padding: 3px 4px; max-width: 38%; overflow-wrap: anywhere; }
  .overview-open .office-empty, .overview-open .office-page-note { font-size: 9px; line-height: 1.25; padding: 5px 0; flex-shrink: 0; }
  .overview-open #office-cost-content .site-cost-table-wrap { overflow: hidden; margin-top: 7px; }
  .overview-open #office-cost-content .booking-table { table-layout: fixed; font-size: clamp(9px, .72vw, 13px); }
  .overview-open #office-cost-content .booking-table th, .overview-open #office-cost-content .booking-table td { padding: 6px 4px; line-height: 1.3; overflow-wrap: anywhere; }
  .overview-open #office-cost-content .stock-in-note { font-size: 9px; line-height: 1.3; margin-top: auto; padding-top: 7px; }
  .overview-open #office-cost-content .office-card > p:not(.stock-in-note) { font-size: 9px; margin: 5px 0; }
  .overview-open .office-status { grid-column: 1 / -1; padding: 0; font-size: 9px; gap: 4px; }
  .overview-open.office-display-mode .main-content { padding: 10px 14px; }
  .overview-open.office-display-mode .workspace { padding: 0; }
  .overview-open.office-display-mode .topbar, .overview-open.office-display-mode .section-cards { display: none; }
}
@media print {
  body.printing-stock-take { background: white; }
  body.printing-stock-take * { visibility: hidden; }
  body.printing-stock-take #stock-take-sheet,
  body.printing-stock-take #stock-take-sheet * { visibility: visible; }
  body.printing-stock-take .rail,
  body.printing-stock-take .topbar,
  body.printing-stock-take .intro,
  body.printing-stock-take .section-cards,
  body.printing-stock-take .signin-aside,
  body.printing-stock-take .footer,
  body.printing-stock-take #panel-stock > :not(#stock-take-content),
  body.printing-stock-take #stock-take-content > :not(#stock-take-sheet) { display: none !important; }
  body.printing-stock-take .app-shell,
  body.printing-stock-take .main-content,
  body.printing-stock-take .workspace { display: block; margin: 0; padding: 0; width: 100%; max-width: none; min-height: 0; }
  body.printing-stock-take #stock-take-sheet { margin: 0; padding: 4mm; border: 0; border-radius: 0; color: black; overflow: visible; }
  body.printing-stock-take .stock-take-table { font-size: 10pt; }
  body.printing-stock-take .stock-take-table thead { display: table-header-group; }
  body.printing-stock-take .stock-take-table tr { break-inside: avoid; }
  body.printing-stock-take .stock-take-table td { height: 10mm; }
}
@media (max-width: 650px) {
  .booking-meta, .booking-item-entry { grid-template-columns: 1fr; }
  .stock-workspace-tabs button { flex: 1 1 100%; }
  .stock-completion-sheet { padding: 14px; }
}
@media print {
  body.printing-stock-sheet { background: white; }
  body.printing-stock-sheet * { visibility: hidden; }
  body.printing-stock-sheet #stock-completion-sheet,
  body.printing-stock-sheet #stock-completion-sheet * { visibility: visible; }
  body.printing-stock-sheet .rail,
  body.printing-stock-sheet .topbar,
  body.printing-stock-sheet .intro,
  body.printing-stock-sheet .section-cards,
  body.printing-stock-sheet .signin-aside,
  body.printing-stock-sheet .footer,
  body.printing-stock-sheet #panel-stock > :not(#stock-book-content),
  body.printing-stock-sheet #panel-locations > :not(#locations-stock-content),
  body.printing-stock-sheet #stock-book-content > :not(#booking-sheet-display),
  body.printing-stock-sheet #booking-sheet-display > :not(#stock-completion-sheet) { display: none !important; }
  body.printing-stock-sheet .app-shell,
  body.printing-stock-sheet .main-content,
  body.printing-stock-sheet .workspace { display: block; margin: 0; padding: 0; width: 100%; max-width: none; }
  body.printing-stock-sheet #stock-completion-sheet { width: 100%; margin: 0; padding: 4mm; border: 0; border-radius: 0; box-sizing: border-box; color: black; overflow: visible; }
  body.printing-stock-sheet #stock-completion-sheet table { font-size: 10pt; }
  body.printing-stock-sheet #stock-completion-sheet tr { break-inside: avoid; }
  body.printing-stock-sheet #stock-completion-sheet h2 { font-size: 18pt; }
  body.printing-stock-sheet .app-shell { min-height: 0; }
}

.company-type-form { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; }
.company-type-form label { display: grid; gap: 6px; flex: 1 1 220px; }
.company-type-list { display: grid; gap: 6px; margin-top: 12px; }
.company-type-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid #e2e8f0; }

.admin-workspace-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.admin-workspace-tabs button { border: 1px solid #d7dde2; border-radius: 8px; background: white; color: #334155; padding: 10px 15px; cursor: pointer; font: inherit; font-weight: 600; }
.admin-workspace-tabs button[aria-selected="true"] { background: #173b39; color: white; border-color: #173b39; }
.admin-workspace-tabs button:focus-visible { outline: 3px solid #d6a72e; outline-offset: 3px; }
#panel-admin [data-admin-panel][hidden] { display: none !important; }
@media (max-width: 650px) { .admin-workspace-tabs button { flex: 1 1 160px; } }

.delete-account-button { color: #a82020; border-color: #dca7a7; }
.delete-account-button:hover { background: #fff1f1; }

#office-overview-content > .office-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 900px) { .overview-open .office-grid { grid-template-rows: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 650px) { #office-overview-content > .office-summary { grid-template-columns: 1fr; } }

.dashboard-visibility-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.dashboard-visibility-option { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); padding: 12px; cursor: pointer; }
.dashboard-visibility-option input { width: 18px; height: 18px; margin: 0; accent-color: #173b39; }
#panel-home [hidden] { display: none !important; }
#office-overview-content > .office-summary { grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); }
@media (min-width: 900px) {
  .overview-open .office-grid { grid-template-rows: none; grid-auto-rows: minmax(0, 1fr); }
  .overview-open .office-sites-card { grid-column: auto; }
  .overview-open #panel-home.dashboard-single-column.is-visible { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 900px) {
  .overview-open #office-overview-content.dashboard-without-summary, .overview-open #office-cost-content.dashboard-without-summary { grid-template-rows: minmax(0, 1fr); }
}
/* Keep the daily smile below operational alerts and naturally wrap on phones. */
.signin-smile p { margin: .65rem 0 0; line-height: 1.5; overflow-wrap: anywhere; }
.signin-smile { margin-top: 1rem; max-width: 440px; }
#home-smile-settings { margin: 0; min-width: 0; }
#home-smile-feedback:empty { display: none; }
:root { --office-display-gap: 1rem; }
.office-display-account #panel-home > :not(#office-display-workspace) { display: none !important; }
.office-display-account .section-cards { display: none; }
.office-display-account .intro { display: none; }
.office-display-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--office-display-gap); margin-block: 1rem; }
#office-display-workspace:fullscreen { overflow: auto; padding: 1.5rem; background: #f3f5f2; }