/* Portal base — design tokens live in theme.css */
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 1024px) {
  body { font-size: .9375rem; }
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.25; }
svg { width: 20px; height: 20px; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* ============ APP SHELL ============ */
.app-shell { min-height: 100vh; }

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-w);
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  border-right: 1px solid rgba(0, 0, 0, .2);
  box-shadow: 2px 0 8px rgba(10, 18, 32, .12);
  display: flex;
  flex-direction: column;
  z-index: 60;
  transform: translateX(-100%);
  transition: transform .25s ease;
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  height: var(--topbar-h);
  padding: 0 1.25rem;
  border-bottom: 1px solid var(--sidebar-border);
  overflow: hidden;
}
.site-logo-link {
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 1;
  max-width: 100%;
  overflow: hidden;
}
.site-logo {
  display: block;
  object-fit: contain;
  object-position: left center;
}
.site-logo-sidebar {
  height: 36px;
  width: auto;
  max-width: 100%;
  aspect-ratio: 1391 / 379;
}
.site-logo-text {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  line-height: 1.2;
}
.site-logo-text-auth {
  font-size: 1.5rem;
  color: var(--text);
  text-align: center;
}
.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--sidebar-accent);
  color: #fff;
  font-weight: 800;
  font-size: 1.2rem;
  display: grid;
  place-items: center;
}
.brand-text { display: flex; flex-direction: column; font-weight: 700; color: #fff; letter-spacing: .02em; }
.brand-text small { font-weight: 500; font-size: .7rem; color: var(--sidebar-text-muted); letter-spacing: .08em; text-transform: uppercase; }

.sidebar-nav { flex: 1; padding: 1rem .75rem; overflow-y: auto; }
.sidebar-section {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--sidebar-text-muted);
  padding: 1.25rem .75rem .5rem;
  font-weight: 600;
}
.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .7rem .85rem;
  margin-bottom: .15rem;
  border-radius: var(--radius-sm);
  color: var(--sidebar-text);
  font-weight: 500;
  font-size: .92rem;
  transition: background .15s, color .15s;
}
.sidebar-nav a:hover { background: var(--sidebar-hover-bg); color: #fff; text-decoration: none; }
.sidebar-nav a.active { background: var(--sidebar-active-bg); color: #fff; box-shadow: inset 3px 0 0 var(--sidebar-accent); }
.sidebar-nav a svg { width: 19px; height: 19px; }
.sidebar-nav a.sidebar-nav-sub {
  padding-left: 1.75rem;
  font-size: .86rem;
}
.sidebar-nav a.sidebar-nav-sub svg { width: 17px; height: 17px; }
.sidebar-footer { padding: 1rem 1.25rem; font-size: .75rem; color: var(--sidebar-text-muted); border-top: 1px solid var(--sidebar-border); }

.sidebar-backdrop {
  position: fixed; inset: 0;
  background: rgba(61, 82, 112, .45);
  z-index: 55;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s;
}
.sidebar.open { transform: translateX(0); }
.sidebar-backdrop.show { opacity: 1; visibility: visible; }

.app-main { display: flex; flex-direction: column; min-height: 100vh; }

/* ============ TOPBAR ============ */
.topbar {
  position: sticky;
  top: 0;
  height: var(--topbar-h);
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--border-strong);
  box-shadow: 0 1px 0 rgba(10, 18, 32, .06);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1rem;
  z-index: 50;
}
.topbar-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-right { display: flex; align-items: center; gap: .5rem; }

.topbar-inbound-alert {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  color: var(--warning);
  text-decoration: none;
  background: var(--warning-soft);
  border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent);
  flex-shrink: 0;
}
.topbar-inbound-alert:hover {
  background: color-mix(in srgb, var(--warning-soft) 65%, var(--warning) 35%);
}
.topbar-inbound-alert svg {
  width: 20px;
  height: 20px;
}
.topbar-inbound-alert-count {
  position: absolute;
  top: 3px;
  right: 3px;
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 .18rem;
  border-radius: 999px;
  background: var(--warning);
  color: #fff;
  font-size: .62rem;
  font-weight: 700;
  line-height: 1.05rem;
  text-align: center;
}

.topbar-draft-alert {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  color: var(--primary);
  text-decoration: none;
  background: var(--info-soft);
  border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
  flex-shrink: 0;
}
.topbar-draft-alert:hover {
  background: color-mix(in srgb, var(--info-soft) 65%, var(--primary) 35%);
}
.topbar-draft-alert svg {
  width: 20px;
  height: 20px;
}
.topbar-draft-alert-count {
  position: absolute;
  top: 3px;
  right: 3px;
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 .18rem;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: .62rem;
  font-weight: 700;
  line-height: 1.05rem;
  text-align: center;
}

.icon-btn {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: none; background: transparent;
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
}
.icon-btn:hover { background: var(--surface-hover); }

/* ============ PROFILE MENU ============ */
.profile-menu { position: relative; }
.profile-trigger {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: .3rem .5rem .3rem .35rem;
  cursor: pointer;
  font: inherit;
}
.profile-trigger:hover { background: var(--surface-hover); }
.avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--sidebar-accent-muted);
  color: #fff;
  font-weight: 700;
  font-size: .85rem;
  display: grid; place-items: center;
}
.profile-info { display: none; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.profile-name { font-weight: 600; font-size: .88rem; color: var(--text); }
.profile-role { font-size: .72rem; color: var(--muted); }
.chevron { width: 16px; height: 16px; color: var(--muted); display: none; }

.profile-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: 240px;
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: .4rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .15s, transform .15s;
}
.profile-dropdown.open { opacity: 1; visibility: visible; transform: translateY(0); }
.profile-dropdown-head { padding: .65rem .75rem; border-bottom: 1px solid var(--line); margin-bottom: .35rem; display: flex; flex-direction: column; }
.profile-dropdown-head .profile-email { font-size: .78rem; color: var(--muted); }
.profile-dropdown a, .profile-dropdown-action, .dropdown-logout {
  display: block;
  width: 100%;
  text-align: left;
  padding: .6rem .75rem;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: .9rem;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
}
.profile-dropdown a:hover, .profile-dropdown-action:hover, .dropdown-logout:hover { background: var(--surface-hover); text-decoration: none; }
.dropdown-logout { color: var(--danger); border-top: 1px solid var(--line); margin-top: .35rem; }

/* ============ CONTENT ============ */
.content { flex: 1; padding: 1.25rem; width: 100%; }

@media (min-width: 1024px) {
  .sidebar { transform: translateX(0); }
  .sidebar-backdrop { display: none; }
  .app-main { margin-left: var(--sidebar-w); }
  .menu-btn { display: none; }
  .content { padding: 1.5rem 1.75rem; }
  .profile-info { display: flex; }
  .chevron { display: block; }
}

/* ============ AUTH PAGES ============ */
.auth-body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--sidebar-bg);
  padding: max(1.25rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1.25rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  -webkit-tap-highlight-color: transparent;
}

.auth-body:has(.auth-page--login, .auth-page--tenant) {
  background-color: var(--navy);
  background-image: var(--auth-splash-bg-shaded);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.auth-shell {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--auth-space-sm) 0;
}

.auth-wrap {
  width: 100%;
  max-width: 440px;
}

.auth-wrap--wide {
  max-width: 680px;
}

.auth-card {
  background: var(--card);
  border-radius: var(--auth-radius);
  padding: var(--auth-space-lg) var(--auth-space-md);
  box-shadow:
    0 24px 64px rgba(10, 20, 34, .32),
    0 0 0 1px rgba(255, 255, 255, .06);
}

/* Shared auth page sections */
.auth-page {
  display: flex;
  flex-direction: column;
  gap: var(--auth-space-md);
}

.auth-page-header {
  text-align: center;
  padding-bottom: var(--auth-space-xs);
}

.auth-page-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto var(--auth-space-sm);
  border-radius: 14px;
  background: var(--navy);
  color: #fff;
  box-shadow: 0 8px 24px rgba(15, 30, 54, .24);
}

.auth-page-icon svg {
  width: 1.5rem;
  height: 1.5rem;
  stroke-width: 1.75;
}

.auth-page-title,
.auth-card .auth-page-title {
  margin: 0 0 var(--auth-space-xs);
  font-size: clamp(1.5rem, 4vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -.025em;
  color: var(--text);
  line-height: 1.2;
}

.auth-page-lead,
.auth-card .auth-page-lead {
  margin: 0 auto;
  max-width: 22rem;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--muted);
}

.auth-page-body {
  display: flex;
  flex-direction: column;
  gap: var(--auth-space-sm);
}

.auth-page-footer {
  text-align: center;
  padding-top: var(--auth-space-xs);
  font-size: .9rem;
  color: var(--muted);
}

.auth-page-footer a {
  display: inline-block;
  padding: .5rem .75rem;
  font-weight: 500;
  color: var(--primary);
  text-decoration: none;
}

.auth-page-footer a.btn {
  padding: .5rem 1.1rem;
  font-weight: 600;
  text-decoration: none;
}

.auth-page-footer a.btn-primary,
.auth-page-footer a.btn-primary:hover {
  color: #fff;
  text-decoration: none;
}

.auth-page-footer a.btn-secondary,
.auth-page-footer a.btn-secondary:hover {
  color: var(--text);
  text-decoration: none;
}

.auth-page-footer a:hover {
  color: var(--primary-600);
  text-decoration: underline;
}

/* Login form — spacious fields */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--auth-space-sm);
}

.auth-form label {
  margin-bottom: 0;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--muted);
}

.auth-form .checkbox {
  margin-bottom: 0;
}

.auth-form input {
  margin-top: .5rem;
  min-height: var(--auth-input-h);
  padding: .75rem 1rem;
  font-size: 1rem;
  border-radius: var(--radius-sm);
}

.auth-form-remember {
  margin-top: .25rem;
  padding: .25rem 0;
  font-size: .9rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
}

.auth-form-remember input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  min-height: auto;
  margin: 0;
  accent-color: var(--primary);
}

.auth-form-submit {
  margin-top: var(--auth-space-xs);
  min-height: 3rem;
  font-size: .95rem;
  border-radius: var(--radius-sm);
}

.auth-page--login {
  gap: var(--auth-space-sm);
}

.auth-page--login .auth-form {
  gap: .65rem;
}

.auth-page--login .auth-form input {
  margin-top: .35rem;
}

.auth-page--login .auth-form-remember {
  margin-top: 0;
  padding: 0;
}

.auth-page--login .auth-form-submit {
  margin-top: .35rem;
}

.auth-page--login .auth-page-footer {
  padding-top: 0;
}

.auth-page--login .auth-page-footer a {
  padding: .25rem .5rem;
}

/* Sign-in & org switch — public website green highlights */
.auth-page--login .auth-page-title,
.auth-page--tenant .auth-page-title {
  color: var(--navy);
}

.auth-page--login .auth-form input:hover,
.auth-page--tenant .auth-form input:hover {
  border-color: rgba(13, 148, 136, .35);
}

.auth-page--login .auth-form input:focus,
.auth-page--tenant .auth-form input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-focus-ring);
}

.auth-page--login .auth-form-remember input[type="checkbox"] {
  accent-color: var(--accent);
}

.auth-page--login .auth-form-submit.btn-primary {
  background: #0d9488;
  box-shadow: 0 2px 8px rgba(13, 148, 136, .28);
}

.auth-page--login .auth-form-submit.btn-primary:hover,
.auth-page--login .auth-form-submit.btn-primary:active {
  background: #0d9488;
  box-shadow: 0 2px 8px rgba(13, 148, 136, .28);
}

.auth-page--login .auth-page-footer a {
  color: var(--accent-dark);
}

.auth-page--login .auth-page-footer a:hover {
  color: var(--accent);
}

/* ============ SPLIT-PANEL LOGIN ============ */
.auth-body.auth-body--split-login {
  padding: 0;
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  background-color: #0a1528;
  background-image: var(--auth-splash-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.auth-body--split-login .auth-login-split-form {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
}

.auth-login-split-panel {
  width: 518px;
  max-width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  background: #fff;
  display: flex;
  flex-direction: column;
  padding: 0 40px 0 40px;
  color: var(--text);
  font-family: var(--font);
  font-size: inherit;
}

.auth-login-split-panel__spacer--top {
  flex: 0 3 170px;
  width: 80%;
}

.auth-login-split-panel__spacer--bottom {
  flex: 0 3 175px;
  width: 100%;
}

.auth-login-split-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-left: 40px;
}

.auth-login-split-logo .site-logo-auth {
  width: 200px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1391 / 379;
}

.auth-login-split-tagline {
  margin: 8px 0 0;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--muted, #64748b);
  letter-spacing: 0.02em;
  text-align: center;
}

.auth-login-split-input-area {
  flex: 0 0 355px;
  width: 90%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  min-height: 300px;
  align-self: center;
}

.auth-login-split-message {
  width: 100%;
  text-align: left;
  padding: 10px 20px;
  font-size: .8rem;
  line-height: 1.4;
  box-sizing: border-box;
  margin-bottom: 20px;
  border-radius: 3px;
}

.auth-login-split-message--hidden {
  display: none;
}

.auth-login-split-message--error {
  color: #fff;
  background-color: #d52b1e;
}

.auth-login-split-message--success {
  color: #065f46;
  background-color: #d1fae5;
  border: 1px solid #a7f3d0;
}

.auth-login-split-input {
  width: 100%;
  height: var(--auth-input-h);
  margin-bottom: 10px;
  font-size: 1rem;
  font-family: var(--font);
  padding: 0 13px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  color: var(--text);
  background: var(--input-bg);
  box-sizing: border-box;
  transition: border-color .2s ease;
}

.auth-login-split-input::placeholder {
  color: #59636b;
}

.auth-login-split-input:hover {
  border-color: #3f9cf4;
}

.auth-login-split-input:focus {
  outline: none;
  border-color: #3f9cf4;
}

.auth-login-split-password-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.auth-login-split-input--password {
  margin-top: 15px;
  margin-bottom: 0;
}

.auth-login-split-options {
  width: 100%;
  min-height: 30px;
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
}

.auth-login-split-forgot {
  font-size: .9rem;
  color: var(--primary);
  text-decoration: none;
  font-weight: 400;
  white-space: nowrap;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}

.auth-login-split-forgot:hover {
  opacity: .8;
}

.auth-forgot-modal[hidden] {
  display: none !important;
}

.auth-forgot-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: max(6rem, 12vh) 1.25rem 1.5rem;
}

.auth-forgot-modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .4);
}

.auth-forgot-modal__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 700px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-lg);
  color: var(--text);
  font-family: var(--font);
  animation: auth-forgot-modal-in .35s ease;
}

@keyframes auth-forgot-modal-in {
  from {
    transform: translateY(-24px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.auth-forgot-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 2px 16px 0;
}

.auth-forgot-modal__title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy);
}

.auth-forgot-modal__close {
  border: none;
  background: none;
  font-size: 1.75rem;
  line-height: 1;
  color: #333;
  cursor: pointer;
  padding: 0;
}

.auth-forgot-modal__close:hover {
  opacity: .7;
}

.auth-forgot-modal__form {
  padding: 2px 16px 0;
}

.auth-forgot-modal__lead {
  margin: 0 0 1rem;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--muted);
}

.auth-forgot-modal__label {
  display: block;
  margin-bottom: .5rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--muted);
}

.auth-forgot-modal__input {
  width: 100%;
  height: var(--auth-input-h);
  margin-bottom: 1rem;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-family: var(--font);
  color: var(--text);
  background: var(--input-bg);
  box-sizing: border-box;
}

.auth-forgot-modal__input:focus {
  outline: none;
  border-color: #3f9cf4;
}

.auth-forgot-modal__actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: .5rem;
  padding: 2px 0 0;
}

.auth-forgot-modal__btn {
  min-width: 150px;
  height: 40px;
  margin: 5px 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  font-size: .88rem;
  line-height: 1.2;
  cursor: pointer;
  font-family: var(--font);
  font-weight: 600;
}

.auth-forgot-modal__btn:hover {
  opacity: .7;
}

.auth-forgot-modal__btn:active {
  opacity: .85;
}

.auth-forgot-modal__btn--secondary {
  background: var(--card);
  color: var(--text);
}

.auth-forgot-modal__btn--primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

body.auth-forgot-modal-open {
  overflow: hidden;
}

/* ============ TENANT PICKER MODAL (choose / switch organisation) ============ */
.tenant-picker-modal[hidden] {
  display: none !important;
}

.tenant-picker-modal {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: max(4rem, 10vh) 1.25rem 1.5rem;
}

.tenant-picker-modal__backdrop {
  position: fixed;
  inset: 0;
  background: var(--modal-backdrop);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.tenant-picker-modal__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 42rem;
  max-height: min(86vh, 52rem);
  overflow: auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.35rem 1.35rem 1.15rem;
  box-shadow: var(--shadow-lg);
  color: var(--text);
  font-family: var(--font);
  animation: auth-forgot-modal-in .35s ease;
}

.tenant-picker-modal__header {
  text-align: center;
  margin-bottom: 1rem;
}

.tenant-picker-modal__actions {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
  padding-top: .25rem;
}

.tenant-picker-modal__cancel {
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: .92rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: .15em;
}

.tenant-picker-modal__cancel:hover {
  color: var(--text);
}

.tenant-picker-modal__content.is-busy {
  pointer-events: none;
  opacity: .72;
}

body.tenant-picker-modal-open {
  overflow: hidden;
}

@media (max-width: 640px) {
  .tenant-picker-modal {
    align-items: stretch;
    padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  }

  .tenant-picker-modal__panel {
    max-width: none;
    margin-top: auto;
    margin-bottom: auto;
  }

  .auth-forgot-modal {
    align-items: stretch;
    padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  }

  .auth-forgot-modal__panel {
    max-width: none;
    margin-top: auto;
    margin-bottom: auto;
  }

  .auth-forgot-modal__actions {
    flex-direction: column-reverse;
  }

  .auth-forgot-modal__btn {
    width: 100%;
    min-width: 0;
  }
}

.auth-login-split-remember {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .9rem;
  color: var(--text);
}

.auth-login-split-remember input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #0277bd;
}

.auth-login-split-remember label {
  margin: 0;
  font-weight: 400;
  cursor: pointer;
  user-select: none;
}

.auth-login-split-submit-wrap {
  flex: 0 1 118px;
  min-height: 80px;
  width: 100%;
  display: flex;
}

.auth-login-split-submit {
  height: 48px;
  align-self: flex-end;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--radius-sm);
  border: none;
  color: #fff;
  background-color: #0d9488;
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  line-height: 1.2;
  font-family: var(--font);
  text-transform: uppercase;
  letter-spacing: .02em;
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, .14), 0 2px 2px 0 rgba(0, 0, 0, .12), 0 1px 3px 0 rgba(0, 0, 0, .2);
}

.auth-login-split-submit:hover {
  background-color: #0d9488;
  opacity: .92;
}

.auth-login-split-submit:active {
  opacity: .85;
}

.auth-login-split-footer {
  flex: 0 0 60px;
  width: 100%;
  max-width: 100%;
  margin-bottom: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: var(--muted);
  font-size: .9rem;
  gap: 10px;
}

.auth-login-split-footer__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
}

.auth-login-split-footer a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 400;
}

.auth-login-split-footer a:hover {
  opacity: .8;
}

.auth-login-split-footer__sep {
  color: #d8dada;
}

.auth-login-split-footer__line--copy {
  color: var(--muted);
  justify-content: center;
}

@media (max-width: 640px) {
  .auth-body--split-login {
    background-attachment: scroll;
  }

  .auth-login-split-panel {
    width: 100%;
    padding: max(1.5rem, env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left));
  }

  .auth-login-split-panel__spacer--top {
    flex: 0 0 2rem;
  }

  .auth-login-split-panel__spacer--bottom {
    flex: 0 0 1.5rem;
  }

  .auth-login-split-logo {
    padding-left: 0;
  }

  .auth-login-split-input-area {
    width: 100%;
    flex: 1 0 auto;
  }

  .auth-login-split-options {
    flex-direction: column;
    align-items: flex-start;
    gap: .65rem;
  }

  .auth-login-split-footer {
    margin-bottom: max(1.5rem, env(safe-area-inset-bottom));
  }

  .auth-login-split-input,
  .auth-forgot-modal__input {
    font-size: 16px;
  }
}

/* Legacy auth helpers (forgot/reset/join pages) */
.auth-brand {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-bottom: var(--auth-space-sm);
  overflow: hidden;
}

.site-logo-auth {
  width: 100%;
  max-width: 220px;
  height: auto;
  aspect-ratio: 1391 / 379;
  object-fit: contain;
}

.auth-card .form label { color: var(--muted); }
.auth-links { text-align: center; margin-top: var(--auth-space-sm); font-size: .9rem; color: var(--muted); }
.auth-lead { margin: -.25rem 0 var(--auth-space-sm); font-size: .95rem; color: var(--muted); line-height: 1.55; }

/* ============ TENANT PICKER (choose / switch organisation) ============ */
.auth-page--tenant {
  gap: var(--auth-space-md);
}

.tenant-picker-page { margin: 0; }

.tenant-picker-header {
  margin-bottom: 0;
}

.tenant-picker-header-icon {
  margin-bottom: var(--auth-space-sm);
  background: var(--accent-soft);
  color: var(--accent-dark);
  box-shadow: none;
}

.auth-card .tenant-picker-title,
.tenant-picker-title {
  max-width: none;
}

.auth-card .tenant-picker-subtitle,
.tenant-picker-subtitle {
  margin: 0 auto;
  max-width: 30rem;
  font-size: .95rem;
  line-height: 1.6;
  text-align: center;
  color: var(--muted);
}

.tenant-picker-account {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  margin: var(--auth-space-sm) auto 0;
  padding: .85rem 1.25rem;
  max-width: 100%;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  border: 1px solid rgba(13, 148, 136, .18);
}

.tenant-picker-account-label {
  font-size: .66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accent-dark);
}

.tenant-picker-account-value {
  font-size: .95rem;
  font-weight: 600;
  color: var(--text);
  word-break: break-word;
  text-align: center;
}

.tenant-picker-account-email {
  font-size: .85rem;
  color: var(--muted);
  word-break: break-all;
  text-align: center;
}

.tenant-picker-form {
  display: flex;
  flex-direction: column;
  gap: var(--auth-space-sm);
}

.tenant-picker-grid {
  display: flex;
  flex-direction: column;
  gap: var(--auth-space-xs);
}

.tenant-picker-card {
  appearance: none;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4.5rem;
  padding: 1.15rem 1.25rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  cursor: pointer;
  color: inherit;
  font: inherit;
  text-align: left;
  box-shadow: var(--shadow-sm);
  transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}

.tenant-picker-card::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 16px;
  bottom: 16px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--accent);
  opacity: 0;
  transform: scaleY(.4);
  transform-origin: center;
  transition: opacity .15s ease, transform .15s ease;
}

.tenant-picker-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
  text-decoration: none;
}

.tenant-picker-card:hover::before { opacity: 1; transform: scaleY(1); }

.tenant-picker-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.tenant-picker-card.is-current {
  border-color: rgba(13, 148, 136, .45);
  background: rgba(13, 148, 136, .04);
}

.tenant-picker-card.is-current::before {
  background: var(--accent);
  opacity: 1;
  transform: scaleY(1);
}

.tenant-picker-card-avatar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 10px;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--navy-600);
  background: #eef3f9;
  border: 1px solid #e0e8f2;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.tenant-picker-card:hover .tenant-picker-card-avatar {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.tenant-picker-card.is-current .tenant-picker-card-avatar {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.tenant-picker-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.tenant-picker-card-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem .6rem;
}

.tenant-picker-card-name {
  font-size: 1.05rem;
  font-weight: 650;
  line-height: 1.35;
  color: var(--text);
}

.tenant-picker-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .55rem;
}

.tenant-picker-card-detail {
  font-size: .85rem;
  color: var(--muted);
}

.tenant-picker-pill {
  display: inline-flex;
  align-items: center;
  padding: .18rem .55rem;
  border-radius: 6px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1.3;
}

.tenant-picker-pill-current {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.tenant-picker-pill-role--admin {
  background: rgba(15, 30, 54, .07);
  color: var(--navy);
}

.tenant-picker-pill-role--staff {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.tenant-picker-pill-role--customer {
  background: rgba(13, 148, 136, .08);
  color: var(--accent-dark);
}

.tenant-picker-card-check {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 10px;
  color: #aab6c6;
  background: transparent;
  transition: color .15s ease, background .15s ease, transform .15s ease;
}

.tenant-picker-card-check svg {
  width: 1.1rem;
  height: 1.1rem;
  stroke-width: 2.25;
}

.tenant-picker-card:hover .tenant-picker-card-check {
  color: var(--accent);
  transform: translateX(3px);
}

.tenant-picker-actions {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-top: 0;
  padding-top: 0;
}

.tenant-picker-cancel {
  display: inline-block;
  padding: .65rem 1rem;
  text-align: center;
  font-size: .9rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
}

.tenant-picker-cancel:hover {
  color: var(--accent-dark);
  text-decoration: underline;
}

/* Organisation join invitation */
.auth-page--join-tenant {
  max-width: 28rem;
  margin: 0 auto;
}

.join-tenant-header {
  text-align: center;
  padding-bottom: var(--auth-space-sm);
}

.join-tenant-brand {
  display: flex;
  justify-content: center;
  margin-bottom: var(--auth-space-sm);
}

.join-tenant-logo {
  display: block;
  max-width: 9.5rem;
  max-height: 3rem;
  width: auto;
  height: auto;
  object-fit: contain;
}

.join-tenant-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 18px;
  background: linear-gradient(145deg, var(--primary), var(--primary-600, var(--primary)));
  color: #fff;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .04em;
  box-shadow: 0 10px 28px rgba(15, 30, 54, .18);
}

.join-tenant-avatar--neutral {
  background: var(--navy);
}

.join-tenant-title {
  margin-bottom: .35rem;
}

.join-tenant-legal-name {
  margin: 0;
  font-size: .88rem;
  color: var(--muted);
}

.join-tenant-card {
  padding: 1.15rem 1.1rem 1.2rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 10px 30px rgba(15, 30, 54, .06);
}

.join-tenant-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .85rem;
}

.join-tenant-eyebrow {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.join-tenant-lead {
  margin: 0 0 1rem;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--text);
}

.join-tenant-details {
  display: grid;
  gap: .75rem;
  margin: 0 0 1.1rem;
  padding: .85rem .9rem;
  border-radius: 10px;
  background: rgba(15, 30, 54, .04);
}

.join-tenant-detail {
  display: grid;
  gap: .15rem;
}

.join-tenant-detail dt {
  margin: 0;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

.join-tenant-detail dd {
  margin: 0;
  font-size: .92rem;
  font-weight: 600;
  color: var(--text);
  word-break: break-word;
}

.join-tenant-form {
  display: grid;
  gap: .55rem;
}

.join-tenant-form .btn-primary,
.join-tenant-form .btn-primary:hover,
.join-tenant-footer .btn-primary,
.join-tenant-footer .btn-primary:hover {
  color: #fff;
}

.join-tenant-form .btn-secondary,
.join-tenant-form .btn-secondary:hover,
.join-tenant-footer .btn-secondary,
.join-tenant-footer .btn-secondary:hover {
  color: var(--text);
}

.join-tenant-accept {
  min-height: 2.85rem;
}

.join-tenant-decline {
  min-height: 2.65rem;
}

.join-tenant-footnote {
  margin: .95rem 0 0;
  font-size: .84rem;
  line-height: 1.55;
  color: var(--muted);
  text-align: center;
}

.join-tenant-card--status {
  text-align: center;
}

.join-tenant-status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin: 0 auto .75rem;
  border-radius: 999px;
  background: rgba(15, 30, 54, .06);
  color: var(--primary);
}

.join-tenant-status-icon svg {
  width: 1.35rem;
  height: 1.35rem;
}

.join-tenant-status-title {
  margin: 0 0 .65rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
}

.join-tenant-card--accepted .join-tenant-status-icon {
  background: rgba(34, 197, 94, .12);
  color: #15803d;
}

.join-tenant-card--declined .join-tenant-status-icon,
.join-tenant-card--expired .join-tenant-status-icon {
  background: rgba(245, 158, 11, .12);
  color: #b45309;
}

.join-tenant-footer {
  margin-top: 1rem;
}

.join-tenant-footer .btn {
  min-height: 2.75rem;
}

.content .tenant-picker-page {
  max-width: 32rem;
  margin: 0 auto;
  padding: .5rem 0 1rem;
}

.content .tenant-picker-header { text-align: left; }
.content .tenant-picker-header-icon { margin-left: 0; }
.content .tenant-picker-account { align-items: flex-start; }

/* Auth pages — mobile */
@media (max-width: 480px) {
  :root {
    --auth-space-md: 1.5rem;
    --auth-space-lg: 2rem;
    --auth-radius: 16px;
  }

  /* Full-screen white card — sign in & choose/switch org */
  .auth-body:has(.auth-page--login, .auth-page--tenant, .auth-page--join-tenant) {
    padding: 0;
  }

  .auth-body:has(.auth-page--login, .auth-page--tenant) {
    background-color: var(--navy);
    background-image: var(--auth-splash-bg-shaded);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .auth-body:has(.auth-page--join-tenant) {
    background: var(--card);
  }

  .auth-body:has(.auth-page--login, .auth-page--tenant, .auth-page--join-tenant) .auth-shell {
    align-items: stretch;
    padding: 0;
    min-height: 100dvh;
  }

  .auth-body:has(.auth-page--login, .auth-page--tenant, .auth-page--join-tenant) .auth-wrap,
  .auth-body:has(.auth-page--login, .auth-page--tenant, .auth-page--join-tenant) .auth-wrap--wide {
    max-width: none;
    min-height: 100dvh;
    flex: 1;
    display: flex;
  }

  .auth-body:has(.auth-page--login, .auth-page--tenant, .auth-page--join-tenant) .auth-card {
    flex: 1;
    width: 100%;
    min-height: 100dvh;
    border-radius: 0;
    box-shadow: none;
    padding:
      max(1.75rem, env(safe-area-inset-top))
      max(1.25rem, env(safe-area-inset-right))
      max(1.75rem, env(safe-area-inset-bottom))
      max(1.25rem, env(safe-area-inset-left));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Other auth pages — card layout */
  .auth-shell:not(:has(.auth-page--login, .auth-page--tenant, .auth-page--join-tenant)) {
    align-items: flex-start;
    padding: .5rem 0;
  }

  .auth-card:not(:has(.auth-page--login, .auth-page--tenant, .auth-page--join-tenant)) {
    padding: var(--auth-space-lg) var(--auth-space-sm);
    border-radius: var(--auth-radius);
  }

  .auth-page-icon {
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
  }

  .auth-page-icon svg {
    width: 1.35rem;
    height: 1.35rem;
  }

  .auth-page-lead,
  .auth-card .auth-page-lead {
    font-size: .9rem;
    max-width: none;
  }

  .auth-form input {
    font-size: 16px; /* prevents iOS zoom on focus */
  }

  .tenant-picker-card {
    min-height: 4rem;
    padding: 1rem;
    gap: .85rem;
  }

  .tenant-picker-card-avatar {
    width: 2.75rem;
    height: 2.75rem;
    font-size: .88rem;
  }

  .tenant-picker-card-name {
    font-size: 1rem;
  }

  .tenant-picker-card-check {
    width: 2rem;
    height: 2rem;
  }
}

@media (max-width: 380px) {
  .auth-body:not(:has(.auth-page--login, .auth-page--tenant, .auth-page--join-tenant)) {
    padding-left: max(.75rem, env(safe-area-inset-left));
    padding-right: max(.75rem, env(safe-area-inset-right));
  }

  .auth-card:not(:has(.auth-page--login, .auth-page--tenant, .auth-page--join-tenant)) {
    padding: 1.75rem 1.15rem;
  }

  .auth-body:has(.auth-page--login, .auth-page--tenant, .auth-page--join-tenant) .auth-card {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }

  .tenant-picker-card {
    padding: .9rem .85rem;
    gap: .75rem;
  }

  .tenant-picker-card-check {
    display: none;
  }

  .tenant-picker-account {
    padding: .75rem 1rem;
    width: 100%;
  }
}

@media (min-width: 640px) {
  .auth-card {
    padding: var(--auth-space-xl) var(--auth-space-lg);
  }

  .auth-page--tenant .tenant-picker-grid {
    gap: var(--auth-space-sm);
  }
}
.existing-user-banner {
  padding: .85rem 1rem;
  border-radius: var(--radius-sm);
  font-size: .88rem;
  line-height: 1.45;
  margin: .35rem 0 0;
}
.existing-user-banner__message {
  margin: 0;
  font-weight: 600;
}
.existing-user-banner__meta {
  margin: .35rem 0 0;
  font-size: .82rem;
  font-weight: 500;
  opacity: .9;
}
.existing-user-banner.is-info {
  background: rgba(0, 174, 239, .12);
  border: 1px solid rgba(0, 174, 239, .35);
  color: var(--text);
}
.existing-user-banner.is-warning {
  background: rgba(245, 158, 11, .12);
  border: 1px solid rgba(245, 158, 11, .4);
  color: var(--text);
}

.modal-form-lede {
  margin: 0 0 1.15rem;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--muted);
  font-weight: 500;
}
.form-section {
  grid-column: 1 / -1;
  margin-top: 1.35rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--line);
}
.form-section--first {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.form-section-title {
  margin: 0 0 .35rem;
  font-size: .95rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -.01em;
}
.form-section-desc {
  margin: 0 0 1rem;
  font-size: .84rem;
  line-height: 1.5;
  color: var(--muted);
  font-weight: 500;
}
.form-section .form-section-desc:last-child {
  margin-bottom: .85rem;
}
.form-tabs {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.form-tab-list {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  width: fit-content;
  max-width: 100%;
  padding: .25rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-muted);
  overflow-x: auto;
}
.form-tab {
  appearance: none;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  line-height: 1;
  padding: .55rem .9rem;
  white-space: nowrap;
  transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}
.form-tab:hover {
  color: var(--text);
  background: var(--neutral-soft);
}
.form-tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-focus-ring);
}
.form-tab.is-active {
  background: var(--card);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}
.form-tab-panel {
  animation: formTabPanelIn .16s ease;
}
.form-tab-panel[hidden] {
  display: none !important;
}
.form-tab-panel > .form-grid,
.form-tab-panel > .form-section:first-child {
  margin-top: 0;
}
@keyframes formTabPanelIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .form-tab-panel {
    animation: none;
  }
}
.label-required {
  color: var(--danger);
  font-weight: 700;
}
.email-field-wrap {
  position: relative;
}
.email-field-wrap input {
  padding-right: 6.5rem;
}
.email-lookup-status {
  position: absolute;
  right: .75rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: .75rem;
  font-weight: 600;
  color: var(--muted);
  pointer-events: none;
}
.email-field-wrap.is-looking-up input {
  border-color: rgba(106, 155, 200, .55);
}
.password-field-wrap {
  position: relative;
}
.password-field-wrap input {
  padding-right: 2.75rem;
}
.password-toggle {
  position: absolute;
  right: .35rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  color: var(--muted);
  cursor: pointer;
}
.password-toggle:hover {
  background: #eef1f7;
  color: var(--text);
}
.password-toggle-icon {
  grid-area: 1 / 1;
  width: 1.15rem;
  height: 1.15rem;
}
.password-toggle-icon--hide {
  display: none;
}
.password-toggle.is-password-visible .password-toggle-icon--show {
  display: none;
}
.password-toggle.is-password-visible .password-toggle-icon--hide {
  display: block;
}
.modal-form-actions,
.user-form-actions {
  flex-wrap: wrap;
  align-items: center;
  padding-top: 1.15rem;
  margin-top: 1.35rem;
  border-top: 1px solid var(--line);
}
.modal-form-actions .btn-primary,
.user-form-actions .btn-primary {
  min-width: 8.5rem;
}
.modal-form-actions--with-xero {
  justify-content: flex-end;
}
.xero-linked-indicator {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .38rem .72rem;
  border: 1px solid #bae6fd;
  border-radius: 999px;
  background: #f0f9ff;
  font-size: .78rem;
  font-weight: 600;
  color: #0c4a6e;
  white-space: nowrap;
  user-select: none;
}
.xero-linked-indicator-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: .3rem;
  background: #13b5ea;
  color: #fff;
  flex-shrink: 0;
}
.xero-linked-indicator-mark svg {
  width: .72rem;
  height: .72rem;
}
.xero-linked-indicator.is-pending {
  border-color: #fcd34d;
  background: #fffbeb;
  color: #92400e;
}
.xero-linked-indicator.is-pending .xero-linked-indicator-mark {
  background: #f59e0b;
}
.xero-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .38rem .72rem;
  border: 1px solid #7dd3fc;
  border-radius: 999px;
  background: #fff;
  font-size: .78rem;
  font-weight: 600;
  color: #0c4a6e;
  white-space: nowrap;
  cursor: pointer;
  font-family: inherit;
  line-height: inherit;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.xero-upload-btn:hover:not(:disabled) {
  border-color: #13b5ea;
  background: #f0f9ff;
  box-shadow: 0 0 0 3px rgba(19, 181, 234, .12);
}
.xero-upload-btn:disabled {
  opacity: .7;
  cursor: wait;
}
.xero-upload-status {
  margin: 0 0 .45rem;
  font-size: .78rem;
  font-weight: 600;
  text-align: right;
}
.xero-upload-status.is-error {
  color: var(--danger);
}
.modal-form-actions .form-actions-end {
  margin-left: auto;
}
@media (max-width: 599px) {
  .modal-form-actions:has([data-xero-footer-status]) {
    align-items: stretch;
  }
  .modal-form-actions:has([data-xero-footer-status]) .form-actions-end {
    margin-left: 0;
    order: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}
.modal-form-xero-option {
  margin-right: auto;
  margin-bottom: 0;
  white-space: nowrap;
}
@media (max-width: 599px) {
  .modal-form-actions--with-xero {
    flex-direction: column;
    align-items: stretch;
  }
  .modal-form-xero-option {
    margin-right: 0;
    order: 3;
    justify-content: center;
  }
  .modal-form-actions--with-xero .btn-primary,
  .modal-form-actions--with-xero .btn-secondary {
    width: 100%;
  }
}

.xero-sync-preview-lede {
  margin: 0 0 1rem;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--muted);
}
.xero-sync-summary-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: .85rem;
}
.xero-sync-summary-pill {
  display: inline-flex;
  align-items: center;
  padding: .28rem .65rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.xero-sync-summary-pill--pull {
  background: #e0f2fe;
  color: #0369a1;
}
.xero-sync-summary-pill--push {
  background: #fef3c7;
  color: #92400e;
}
.xero-sync-table-wrap {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: auto;
  margin-bottom: 1rem;
}
.xero-sync-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .84rem;
}
.xero-sync-table th,
.xero-sync-table td {
  padding: .65rem .75rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.xero-sync-table thead th {
  background: #f8fafd;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}
.xero-sync-table tbody th[scope="row"] {
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.xero-sync-row--pull {
  background: rgba(224, 242, 254, .35);
}
.xero-sync-row--push {
  background: rgba(254, 243, 199, .28);
}
.xero-sync-action {
  display: inline-flex;
  padding: .15rem .45rem;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.xero-sync-action--pull {
  background: #dbeafe;
  color: #1d4ed8;
}
.xero-sync-action--push {
  background: #fde68a;
  color: #92400e;
}
.xero-sync-reason {
  display: block;
  margin-top: .2rem;
  font-size: .75rem;
  color: var(--muted);
}
.xero-sync-in-sync {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.25rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid #86efac;
  border-radius: var(--radius-sm);
  background: #f0fdf4;
}
.xero-sync-in-sync-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  background: #dcfce7;
  color: #166534;
  margin-bottom: .65rem;
}
.xero-sync-in-sync-icon svg {
  width: 1.2rem;
  height: 1.2rem;
}
.xero-sync-in-sync-title {
  margin: 0 0 .25rem;
  font-size: .95rem;
  font-weight: 700;
  color: #14532d;
}
.xero-sync-in-sync-text {
  margin: 0;
  font-size: .84rem;
  color: #166534;
}
.xero-sync-form-error {
  margin: 0 0 .75rem;
  font-size: .84rem;
  color: var(--danger);
}
.xero-sync-form-actions {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.app-submodal-container:has(.xero-sync-preview) {
  max-width: 720px;
}
.user-form-actions [data-user-primary-action][hidden],
.modal-form-actions [data-staff-primary-action][hidden] {
  display: none !important;
}
.user-form-actions-hint {
  flex: 1 1 100%;
  margin: .15rem 0 0;
}
.user-form .form-section .customer-picker,
.customer-form .form-section .customer-picker,
.site-form .form-section .customer-picker {
  margin-bottom: .5rem;
}
.user-form .form-section .customer-picker:last-child,
.customer-form .form-section .customer-picker:last-child,
.site-form .form-section .customer-picker:last-child {
  margin-bottom: 0;
}
.user-form .form-section > .form-grid,
.customer-form .form-section > .form-grid,
.site-form .form-section > .form-grid {
  margin-bottom: 0;
}
.customer-form .form-section label.full textarea,
.site-form .form-section textarea {
  min-height: 5.5rem;
  resize: vertical;
}
.staff-licenses-form .staff-licenses-section {
  margin-bottom: 0;
}
.staff-licenses-form .modal-form-actions {
  margin-top: 1rem;
  padding-top: 1rem;
}
.staff-form .form-section .customer-picker {
  margin-bottom: .5rem;
}
.staff-form .form-section > .form-grid,
.staff-form-main .form-section > .form-grid {
  margin-bottom: 0;
}
.staff-form-main .modal-form-lede {
  margin-bottom: 1rem;
}
.form-section-checkboxes {
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.form-section-checkboxes .checkbox {
  margin-bottom: 0;
  font-size: .9rem;
  font-weight: 500;
  color: var(--text);
  text-transform: none;
  letter-spacing: normal;
}

/* ============ TENANT FORM / MODULES ============ */
.tenant-form {
  min-width: 0;
  max-width: 100%;
}
.tenant-form > .form {
  min-width: 0;
  max-width: 100%;
}
.tenant-form-layout {
  display: grid;
  gap: 1.25rem;
  align-items: start;
  grid-column: 1 / -1;
  min-width: 0;
  max-width: 100%;
}
.tenant-form-main {
  min-width: 0;
}
.tenant-form-main .form-section {
  grid-column: auto;
}
.tenant-form-main .form-section > .form-grid {
  grid-template-columns: 1fr;
}
.tenant-form-main .form-grid > * {
  min-width: 0;
}
.tenant-form-modules {
  min-width: 0;
}
.tenant-form-modules-panel {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.05rem;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.tenant-form-modules-panel .form-section-title {
  margin-bottom: .3rem;
}
.tenant-form-modules-panel .form-section-desc {
  margin-bottom: .85rem;
}
.tenant-form .form-section > .form-grid {
  margin-bottom: 0;
}
.tenant-modules-grid {
  display: grid;
  gap: .65rem;
}
.tenant-license-selection.is-hidden {
  display: none;
}
.tenant-license-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: .75rem;
}
.tenant-license-library {
  display: grid;
  gap: .75rem;
  max-height: 24rem;
  overflow: auto;
  padding-right: .25rem;
}
.tenant-license-group {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
}
.tenant-license-group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .7rem .85rem;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}
.tenant-license-group > summary::-webkit-details-marker {
  display: none;
}
.tenant-license-group-count {
  font-size: .8rem;
  color: var(--muted);
  font-weight: 500;
}
.tenant-license-group-grid {
  display: grid;
  gap: .45rem;
  padding: 0 .85rem .85rem;
}
.tenant-license-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .65rem;
  align-items: start;
  padding: .55rem .65rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.tenant-license-option:has(input:checked) {
  border-color: rgba(0, 174, 239, .45);
  background: rgba(0, 174, 239, .05);
}
.tenant-license-option__title {
  display: block;
  font-weight: 600;
}
.tenant-license-option__meta {
  display: block;
  font-size: .82rem;
  color: var(--muted);
}
.tenant-module-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .75rem;
  padding: .8rem .85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  cursor: pointer;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.tenant-module-card:hover {
  border-color: rgba(106, 155, 200, .45);
}
.tenant-module-card.is-enabled {
  border-color: rgba(0, 174, 239, .45);
  background: rgba(0, 174, 239, .05);
  box-shadow: 0 0 0 1px rgba(0, 174, 239, .1);
}
.tenant-module-card__checkbox {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.tenant-module-card__icon {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: var(--radius-sm);
  background: #eef1f7;
  color: var(--navy);
  flex-shrink: 0;
}
.tenant-module-card.is-enabled .tenant-module-card__icon {
  background: rgba(0, 174, 239, .15);
  color: #0077a8;
}
.tenant-module-card__icon svg {
  width: 1.15rem;
  height: 1.15rem;
}
.tenant-module-card__body {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
}
.tenant-module-card__title {
  font-size: .88rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
}
.tenant-module-card__desc {
  font-size: .78rem;
  line-height: 1.4;
  color: var(--muted);
  font-weight: 500;
  overflow-wrap: anywhere;
}
.tenant-module-switch {
  flex-shrink: 0;
  align-self: center;
}
.tenant-module-switch__track {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 2.75rem;
  height: 1.5rem;
  border-radius: 999px;
  background: #cbd5e1;
  border: 1px solid #b6c2d1;
  padding: .125rem;
  box-sizing: border-box;
  transition: background .15s ease, border-color .15s ease;
}
.tenant-module-switch__thumb {
  display: block;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .22);
  flex-shrink: 0;
  transition: transform .15s ease;
}
.tenant-module-card.is-enabled .tenant-module-switch__track {
  background: var(--accent, #00aeef);
  border-color: #0099d4;
  justify-content: flex-end;
}
.tenant-module-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.tenant-module-badge {
  background: rgba(0, 174, 239, .12);
  color: #0077a8;
  border: 1px solid rgba(0, 174, 239, .25);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}
@media (min-width: 768px) {
  .tenant-form-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .tenant-form-modules {
    border-left: 1px solid var(--line);
    padding-left: 1.25rem;
  }
  .tenant-form-modules-panel {
    position: sticky;
    top: 0;
  }
}

/* ============ HEADINGS / PAGE HEADER ============ */
h1 { font-size: 1.35rem; margin: 0 0 1.25rem; font-weight: 700; color: var(--text); }
.content > h1:first-child, .page-header { margin-top: 0; }
.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.page-header h1 { margin: 0; }
.page-header > .btn:only-child, .page-header > a:only-child { margin-left: auto; }
.page-header-buttons {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-left: auto;
  flex-shrink: 0;
}
.page-header-job { align-items: flex-start; }
.page-header-job .page-header-main { flex: 1; min-width: 0; }
.page-header-job .page-header-end {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-left: auto;
  flex-shrink: 0;
}

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 38px; padding: .5rem 1.1rem;
  border-radius: var(--radius-sm);
  font-size: .88rem; font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .15s, box-shadow .15s, transform .05s;
  text-decoration: none; font-family: inherit; letter-spacing: .01em;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--primary); color: #fff; border-color: var(--primary-600); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--primary-600); box-shadow: var(--shadow); }
.btn-primary:disabled,
.btn-primary[disabled] {
  opacity: .5;
  cursor: not-allowed;
  box-shadow: none;
}
.btn-primary:disabled:hover,
.btn-primary[disabled]:hover {
  background: var(--primary);
  box-shadow: none;
}
.btn-secondary { background: var(--card); color: var(--text); border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.btn-secondary:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.btn-secondary:disabled,
.btn-secondary[disabled] {
  opacity: .55;
  cursor: not-allowed;
  background: var(--surface-muted);
}
.btn-secondary:disabled:hover,
.btn-secondary[disabled]:hover {
  background: var(--surface-muted);
  border-color: var(--line);
}
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #b91c1c; }
.btn-block { width: 100%; justify-content: center; }
.btn-sm { min-height: 32px; padding: .32rem .8rem; font-size: .82rem; }
.btn-link { background: none; border: none; color: var(--primary); cursor: pointer; padding: .5rem; font-family: inherit; }

/* ============ FORMS ============ */
.form label {
  display: block;
  margin-bottom: .7rem;
  font-weight: 600;
  font-size: .72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .055em;
}
.form input, .form select, .form textarea {
  width: 100%; margin-top: .25rem;
  padding: .5rem .75rem;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: .9rem; min-height: 38px;
  background: var(--input-bg); color: var(--text);
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.form input:hover, .form select:hover, .form textarea:hover {
  border-color: var(--border-strong);
  background: var(--card);
}
.form input[readonly],
.form input:read-only {
  background: var(--input-bg-readonly);
  color: var(--muted);
  cursor: default;
}
.form input[readonly]:hover,
.form input:read-only:hover {
  border-color: var(--line);
}
.form input:focus, .form textarea:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--input-bg-focus);
  box-shadow: 0 0 0 3px rgba(61, 116, 165, .24);
}
.form label.has-error input,
.form label.has-error select,
.form label.has-error textarea {
  border-color: #dc2626;
  background: var(--input-bg-focus);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .12);
}
.field-error {
  display: block;
  margin-top: .35rem;
  font-size: .8rem;
  font-weight: 500;
  color: #991b1b;
  text-transform: none;
  letter-spacing: normal;
}
.form select:focus {
  outline: none;
  border-color: var(--primary);
  background-color: var(--input-bg-focus);
  box-shadow: 0 0 0 3px rgba(61, 116, 165, .24);
}
.form input::placeholder, .form textarea::placeholder { color: var(--muted); font-weight: 400; opacity: .7; }
.form textarea { min-height: 88px; resize: vertical; }
.form select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.2rem;
  cursor: pointer;
  background-image: none;
}
.form label:has(> select) { position: relative; }
.form label:has(> select)::after {
  content: '';
  position: absolute;
  right: .75rem;
  bottom: 13px;
  width: 12px;
  height: 12px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center / contain;
}
.form label:has(> select:focus)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236a9bc8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}
.checkbox { display: flex; align-items: center; gap: .5rem; font-weight: 500; font-size: .88rem; margin-bottom: .6rem; text-transform: none; letter-spacing: 0; }
.checkbox input { width: 15px; height: 15px; min-height: auto; margin: 0; accent-color: var(--primary); cursor: pointer; }
.checkbox-group { margin-bottom: 1rem; }
.checkbox-group.full { grid-column: 1 / -1; }
.checkbox-group-label {
  display: block;
  font-weight: 600;
  font-size: .72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .055em;
  margin-bottom: .35rem;
}
.checkbox-group-help { margin: 0 0 .65rem; font-size: .85rem; color: var(--muted); }
.checkbox-group .checkbox { margin-bottom: .45rem; }

.link-picker-grid {
  display: grid;
  gap: .75rem;
}
@media (min-width: 760px) {
  .link-picker-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}
.customer-picker { position: relative; z-index: 5; margin-bottom: 1rem; }
.link-picker-card {
  min-width: 0;
  margin-bottom: 0;
  padding: .8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
.user-form .form-section .link-picker-grid .customer-picker,
.customer-form .form-section .link-picker-grid .customer-picker,
.site-form .form-section .link-picker-grid .customer-picker {
  margin-bottom: 0;
}
.link-picker-card .checkbox-group-label {
  margin-bottom: .2rem;
}
.link-picker-card .checkbox-group-help {
  margin-bottom: .55rem;
  font-size: .8rem;
  line-height: 1.4;
}
.customer-picker-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  min-height: .25rem;
  margin-bottom: .5rem;
}
.customer-pill {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  max-width: 100%;
  padding: .2rem .35rem .2rem .55rem;
  border-radius: 999px;
  background: var(--pill-bg);
  border: 1px solid var(--pill-border);
  color: var(--text);
  font-size: .78rem;
  font-weight: 500;
}
.customer-pill-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.customer-pill-remove {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.customer-pill-remove:hover {
  background: var(--neutral-soft);
  color: var(--danger);
}
.customer-picker-input-wrap { position: relative; z-index: 2; }
.customer-picker-search {
  width: 100%;
  margin-top: 0;
  padding: .45rem .7rem;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: .86rem;
  min-height: 36px;
  background: var(--input-bg);
  color: var(--text);
  font-family: inherit;
}
.customer-picker-search:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--input-bg-focus);
  box-shadow: 0 0 0 3px rgba(106, 155, 200, .18);
}
.customer-picker-dropdown {
  position: absolute;
  top: calc(100% + .35rem);
  left: 0;
  right: 0;
  z-index: 50;
  max-height: 220px;
  overflow-y: auto;
  margin: 0;
  padding: .35rem 0;
  list-style: none;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
.customer-picker-dropdown.customer-picker-dropdown--floating {
  position: fixed;
  top: 0;
  left: 0;
  right: auto;
  z-index: 1000;
  max-height: min(280px, calc(100vh - 1rem));
}
.customer-picker-option,
.customer-picker-empty {
  padding: .55rem .85rem;
  font-size: .88rem;
  color: var(--text);
}
.customer-picker-option {
  cursor: pointer;
}
.customer-picker-option:hover,
.customer-picker-option.is-active {
  background: var(--surface-hover);
}
.customer-picker-empty {
  color: var(--muted);
}

.picker-option-name { display: block; font-weight: 600; }
.picker-option-meta { display: block; font-size: .78rem; color: var(--muted); margin-top: .12rem; word-break: break-word; }

.site-combobox { position: relative; }
.site-combobox-input-wrap { position: relative; z-index: 2; }
.site-combobox-dropdown {
  position: absolute;
  top: calc(100% + .35rem);
  left: 0;
  right: 0;
  z-index: 50;
  max-height: 240px;
  overflow-y: auto;
  margin: 0;
  padding: .35rem 0;
  list-style: none;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
.site-combobox-dropdown.site-combobox-dropdown--floating {
  position: fixed;
  top: 0;
  left: 0;
  right: auto;
  z-index: 1000;
  max-height: min(280px, calc(100vh - 1rem));
}
.site-combobox-option,
.site-combobox-empty {
  padding: .6rem .85rem;
  font-size: .88rem;
  color: var(--text);
}
.site-combobox-option {
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background .12s ease, border-color .12s ease;
}
.site-combobox-option:hover,
.site-combobox-option.is-active {
  background: var(--surface-hover);
  border-left-color: var(--primary);
}
.site-combobox-option-name {
  display: block;
  font-weight: 600;
  line-height: 1.3;
}
.site-combobox-option-address {
  display: block;
  margin-top: .15rem;
  font-size: .78rem;
  color: var(--muted);
  line-height: 1.35;
  word-break: break-word;
}
.site-combobox-empty {
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.4;
}
.site-combobox-hint {
  margin: .4rem 0 0;
  font-size: .8rem;
  color: var(--muted);
}
.contact-combobox-option-meta {
  display: block;
  margin-top: .12rem;
  font-size: .76rem;
  color: var(--muted);
  line-height: 1.35;
  word-break: break-word;
}
.contact-combobox .site-combobox-hint:not([hidden]) {
  display: block;
}

@media (max-width: 899px) {
  .site-combobox-input-wrap {
    overflow: visible;
  }
  .site-combobox-dropdown:not(.site-combobox-dropdown--floating) {
    z-index: 200;
    max-height: min(50vh, 240px);
    -webkit-overflow-scrolling: touch;
  }
  .site-combobox-option {
    line-height: 1.35;
  }
}

@media (max-width: 899px) {
  .customer-picker {
    z-index: 30;
    position: relative;
  }
  .customer-picker-input-wrap {
    overflow: visible;
  }
  .customer-picker-dropdown:not(.customer-picker-dropdown--floating) {
    z-index: 200;
    max-height: min(50vh, 280px);
    -webkit-overflow-scrolling: touch;
  }
  .customer-picker-option {
    line-height: 1.35;
    word-break: break-word;
  }
}

.form-grid { display: grid; gap: 0 1rem; }
.form-grid .form-grid-checkbox { align-self: end; margin-bottom: .7rem; min-height: 38px; }
.form-grid .full { grid-column: 1 / -1; }
@media (min-width: 640px) { .form-grid { grid-template-columns: 1fr 1fr; } }
.form-actions, .sticky-actions { margin-top: 1rem; display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; position: relative; z-index: 1; }
.form-actions.full, .sticky-actions.full { grid-column: 1 / -1; }
.form-actions-end { margin-left: auto; }
.sticky-actions { position: sticky; bottom: 0; background: linear-gradient(transparent, var(--bg) 30%); padding: .85rem 0; }

/* ============ ALERTS (inline, legacy) ============ */
.alert { padding: .8rem 1.1rem; border-radius: var(--radius-sm); margin-bottom: 1.25rem; font-size: .92rem; font-weight: 500; border: 1px solid transparent; }
.alert-success { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.alert-error { background: #fef2f2; color: #991b1b; border-color: #fecaca; }

/* ============ TOAST NOTIFICATIONS ============ */
.notifications {
  position: fixed;
  bottom: 1.25rem;
  left: 1.25rem;
  z-index: 10000;
  display: flex;
  flex-direction: column-reverse;
  gap: .75rem;
  max-width: min(360px, calc(100vw - 2.5rem));
  pointer-events: none;
}
.notification {
  pointer-events: auto;
  padding: .85rem 1.1rem;
  border-radius: var(--radius-sm);
  font-size: .92rem;
  font-weight: 500;
  border: 1px solid transparent;
  box-shadow: var(--shadow-lg);
  transform: translateY(calc(100% + 1.25rem));
  opacity: 0;
  transition: transform .35s ease, opacity .35s ease;
}
.notification.is-visible {
  transform: translateY(0);
  opacity: 1;
}
.notification.is-leaving {
  transform: translateY(calc(100% + 1.25rem));
  opacity: 0;
}
.notification-success { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.notification-error { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.notification-warning { background: #fffbeb; color: #92400e; border-color: #fde68a; }

/* ============ STAT CARDS ============ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: .85rem;
  margin-bottom: 1.75rem;
}
.stat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: .2rem;
  min-height: 5.75rem;
  padding: 1.15rem 1.2rem 1.15rem;
  background: var(--card);
  border-radius: var(--dashboard-card-radius);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-strong);
  overflow: hidden;
  transition: box-shadow .18s ease, transform .14s ease, border-color .18s ease, background .18s ease;
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--stat-accent, var(--border-strong));
}
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: color-mix(in srgb, var(--stat-accent, var(--primary)) 40%, var(--border-strong));
}
.stat-card--primary { --stat-accent: var(--primary); }
.stat-card--accent { --stat-accent: var(--accent); }
.stat-card--success { --stat-accent: var(--success); }
.stat-card--warning { --stat-accent: var(--warning); }
.stat-card--alert { --stat-accent: var(--danger); }
.stat-card--highlight,
.stat-card.highlight {
  --stat-accent: var(--warning);
  background: var(--warning-soft);
  border-color: color-mix(in srgb, var(--warning) 28%, var(--border-strong));
}
.stat-value {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat-label {
  font-size: .8rem;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: .01em;
}

/* ============ JOB CARDS ============ */
.job-cards {
  display: grid;
  gap: .85rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .job-cards {
    grid-template-columns: repeat(auto-fill, minmax(var(--dashboard-card-min), 1fr));
    gap: 1rem;
  }
}
.job-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: var(--card);
  border-radius: var(--dashboard-card-radius);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-strong);
  border-left: 4px solid var(--job-accent, transparent);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: box-shadow .18s ease, transform .14s ease, border-color .18s ease, background .18s ease;
}
.job-card:hover,
.job-card:focus-visible {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
  background: var(--card-hover-bg);
  text-decoration: none;
  outline: none;
}
.job-card:focus-visible {
  box-shadow: var(--shadow), 0 0 0 3px var(--accent-focus-ring);
}
.job-card:hover .job-title,
.job-card:focus-visible .job-title { color: var(--primary); }
.job-card.status-new,
.job-card.status-assigned { --job-accent: var(--primary); }
.job-card.status-draft { --job-accent: var(--muted); }
.job-card.status-in-progress,
.job-card.status-scheduled { --job-accent: var(--purple); }
.job-card.status-completed,
.job-card.status-invoiced { --job-accent: var(--success); }
.job-card.status-waiting-on-customer,
.job-card.status-waiting-on-parts { --job-accent: var(--warning); }
.job-card.status-cancelled,
.job-card.status-archived { --job-accent: var(--muted); }
.job-card.customer-updated { --job-accent: var(--warning); }
.job-card.admin-unseen {
  border-color: var(--primary);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--primary) 40%, transparent),
    var(--shadow-sm);
}
.job-card.admin-unseen:hover,
.job-card.admin-unseen:focus-visible {
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--primary) 50%, transparent),
    var(--shadow);
}
.job-card-flag--new {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  border-color: color-mix(in srgb, var(--primary) 35%, transparent);
  color: var(--primary);
}
.job-card.priority-low { --job-accent: var(--border-strong); }
.job-card.priority-normal { --job-accent: var(--primary); }
.job-card.priority-high { --job-accent: var(--warning); }
.job-card.priority-urgent { --job-accent: var(--danger); }
.job-card-body {
  flex: 1;
  padding: 1rem 1.05rem .8rem;
}
.job-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .65rem;
  margin-bottom: .6rem;
}
.job-card-header-end {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  flex-shrink: 0;
}
.job-number {
  display: inline-flex;
  align-items: center;
  padding: .18rem .5rem;
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  border: 1px solid var(--line);
  font-weight: 700;
  font-size: .72rem;
  color: var(--text-secondary);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.job-card-flag {
  display: inline-flex;
  align-items: center;
  padding: .15rem .45rem;
  border-radius: 999px;
  background: var(--warning-soft);
  border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
  color: var(--warning);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.job-title {
  margin: 0 0 .45rem;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
  transition: color .15s ease;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.job-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem .45rem;
  font-size: .82rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.45;
}
.job-meta-customer { font-weight: 600; color: var(--text-secondary); }
.job-meta-site::before {
  content: '·';
  margin-right: .45rem;
  color: var(--border-strong);
  font-weight: 400;
}
.job-meta-site {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.job-card-footer {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem .6rem;
  align-items: center;
  margin-top: auto;
  padding: .7rem 1.05rem;
  background: var(--card-footer-bg);
  border-top: 1px solid var(--line);
  font-size: .76rem;
  color: var(--muted);
}
.job-card-footer time {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.job-card-assignee {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  max-width: 100%;
  min-width: 0;
}
.job-card-assignee-initial {
  display: inline-grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  background: var(--info-soft);
  color: var(--primary);
  font-size: .68rem;
  font-weight: 800;
  flex-shrink: 0;
}
.job-card-assignee-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: var(--text-secondary);
}

/* ============ PROPOSAL CARDS ============ */
.proposal-cards {
  display: grid;
  gap: .85rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .proposal-cards {
    grid-template-columns: repeat(auto-fill, minmax(var(--dashboard-card-min), 1fr));
    gap: 1rem;
  }
}
.proposal-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: var(--card);
  border-radius: var(--dashboard-card-radius);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-strong);
  border-left: 4px solid var(--proposal-accent, var(--primary));
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: box-shadow .18s ease, transform .14s ease, border-color .18s ease, background .18s ease;
}
.proposal-card:hover,
.proposal-card:focus-visible {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
  background: var(--card-hover-bg);
  text-decoration: none;
  outline: none;
}
.proposal-card:focus-visible {
  box-shadow: var(--shadow), 0 0 0 3px var(--accent-focus-ring);
}
.proposal-card:hover .proposal-title,
.proposal-card:focus-visible .proposal-title { color: var(--primary); }
.proposal-card.proposal-status-draft { --proposal-accent: var(--border-strong); }
.proposal-card.proposal-status-sent,
.proposal-card.proposal-status-viewed { --proposal-accent: var(--purple); }
.proposal-card.proposal-status-accepted { --proposal-accent: var(--success); }
.proposal-card.proposal-status-declined,
.proposal-card.proposal-status-expired { --proposal-accent: var(--muted); }
.proposal-card-body {
  flex: 1;
  padding: 1rem 1.05rem .8rem;
}
.proposal-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .65rem;
  margin-bottom: .6rem;
}
.proposal-number {
  display: inline-flex;
  align-items: center;
  padding: .18rem .5rem;
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  border: 1px solid var(--line);
  font-weight: 700;
  font-size: .72rem;
  color: var(--text-secondary);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.proposal-title {
  margin: 0 0 .45rem;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
  transition: color .15s ease;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.proposal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem .45rem;
  font-size: .82rem;
  color: var(--muted);
  margin: 0 0 .35rem;
  line-height: 1.45;
}
.proposal-meta-customer { font-weight: 600; color: var(--text-secondary); }
.proposal-meta-site::before {
  content: '·';
  margin-right: .45rem;
  color: var(--border-strong);
}
.proposal-meta-site {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.proposal-recipient {
  margin: 0;
  font-size: .78rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.proposal-card-footer {
  margin-top: auto;
  padding: .7rem 1.05rem;
  background: var(--card-footer-bg);
  border-top: 1px solid var(--line);
  font-size: .76rem;
  color: var(--muted);
}
.proposal-card-updated { font-variant-numeric: tabular-nums; }

/* ============ DASHBOARD PANELS ============ */
.dashboard-panel {
  background: var(--dashboard-panel-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--dashboard-card-radius);
  box-shadow: var(--shadow-sm);
  padding: 1.2rem 1.25rem 1.3rem;
}
.dashboard-panel--alert {
  border-color: color-mix(in srgb, var(--warning) 35%, var(--border-strong));
  background: color-mix(in srgb, var(--warning-soft) 42%, var(--dashboard-panel-bg));
}
.dashboard-panel-head {
  margin-bottom: 1rem;
}
.dashboard-panel-head h2 {
  margin: 0 0 .35rem;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.01em;
}
.dashboard-panel-lead {
  margin: 0;
  font-size: .86rem;
  color: var(--muted);
  line-height: 1.45;
}
.dashboard-panel-more {
  margin: .85rem 0 0;
  padding-top: .65rem;
  border-top: 1px solid var(--line);
  font-size: .88rem;
  font-weight: 600;
}
.license-issues-table .row-highlight {
  background: var(--danger-soft);
}

/* Job queue: dashboard-style cards on mobile, table list on desktop */
.jobs-queue-table { display: none; }
@media (min-width: 900px) {
  .jobs-queue-cards { display: none; }
  .jobs-queue-table { display: block; }
}

/* ============ BADGES ============ */
.badge { display: inline-flex; align-items: center; padding: .25rem .6rem; border-radius: 999px; font-size: .73rem; font-weight: 600; background: var(--surface-muted); color: var(--muted); border: 1px solid transparent; }
.priority-urgent { background: var(--danger-soft); color: var(--danger); }
.priority-high { background: var(--warning-soft); color: var(--warning); }
.priority-normal { background: var(--info-soft); color: var(--primary); }
.priority-low { background: var(--neutral-soft); color: var(--muted); }
.status-new { background: var(--info-soft); color: var(--primary); }
.status-draft { background: var(--surface-muted); color: var(--muted); border-color: var(--border-strong); }
.quote-status-sent { background: var(--success-soft); color: var(--success); }
.status-assigned { background: var(--info-soft); color: var(--primary); }
.status-in-progress { background: var(--purple-soft); color: var(--purple); }
.status-scheduled { background: var(--purple-soft); color: var(--purple); }
.status-completed { background: var(--success-soft); color: var(--success); }
.status-invoiced { background: var(--info-soft); color: var(--primary); }
.status-waiting-on-customer, .status-waiting-on-parts { background: var(--warning-soft); color: var(--warning); }
.status-cancelled, .status-archived { background: var(--neutral-soft); color: var(--muted); }

/* ============ DASHBOARD STATUS PILLS ============ */
.dashboard-status-section {
  background: var(--dashboard-panel-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--dashboard-card-radius);
  box-shadow: var(--shadow-sm);
  padding: 1.2rem 1.25rem 1.3rem;
}
.dashboard-status-section > h2 {
  margin: 0 0 1rem;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.01em;
}
.status-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-bottom: 1.15rem;
}
.dashboard-status-section .status-filter-pills {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: .4rem;
  margin-left: -.25rem;
  margin-right: -.25rem;
  padding: .15rem .25rem .35rem;
}
.dashboard-status-section .status-filter-pills::-webkit-scrollbar { display: none; }
@media (min-width: 720px) {
  .dashboard-status-section .status-filter-pills {
    flex-wrap: wrap;
    overflow: visible;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
  }
}
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .42rem .9rem;
  border-radius: 999px;
  border: 1.5px solid var(--border-strong);
  background: var(--card);
  color: var(--text);
  font-size: .8rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: border-color .15s, box-shadow .15s, transform .1s, background .15s, color .15s;
}
.status-pill:hover {
  border-color: var(--primary);
  background: var(--surface-muted);
  transform: translateY(-1px);
}
.status-pill.is-active {
  border-color: var(--primary);
  background: var(--info-soft);
  color: var(--primary);
  box-shadow: 0 0 0 3px var(--accent-focus-ring);
}
.status-pill.status-new.is-active,
.status-pill.status-assigned.is-active,
.status-pill.status-invoiced.is-active {
  border-color: var(--primary);
  background: var(--info-soft);
  color: var(--primary);
}
.status-pill.status-in-progress.is-active,
.status-pill.status-scheduled.is-active {
  border-color: var(--purple);
  background: var(--purple-soft);
  color: var(--purple);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--purple) 22%, transparent);
}
.status-pill.status-completed.is-active {
  border-color: var(--success);
  background: var(--success-soft);
  color: var(--success);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 22%, transparent);
}
.status-pill.status-waiting-on-customer.is-active,
.status-pill.status-waiting-on-parts.is-active {
  border-color: var(--warning);
  background: var(--warning-soft);
  color: var(--warning);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--warning) 22%, transparent);
}
.status-pill.status-cancelled.is-active {
  border-color: var(--border-strong);
  background: var(--neutral-soft);
  color: var(--muted);
  box-shadow: 0 0 0 3px var(--neutral-soft);
}
.status-pill .pill-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  padding: .12rem .42rem;
  border-radius: 999px;
  background: var(--neutral-soft);
  font-size: .72rem;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.status-pill.is-active .pill-count {
  background: color-mix(in srgb, currentColor 14%, var(--card));
  color: inherit;
}
.dashboard-status-section .job-card-slot { display: contents; }
.dashboard-status-section .job-card-slot.is-hidden { display: none; }
.dashboard-status-more {
  margin: .85rem 0 0;
  padding-top: .65rem;
  border-top: 1px solid var(--line);
  font-size: .88rem;
  font-weight: 600;
}

/* ============ FILTERS ============ */
.filters-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .65rem;
  margin-bottom: 1.25rem;
  background: var(--card);
  padding: .75rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.filters-form input, .filters-form select {
  flex: 1 1 140px; min-height: 36px; padding: .42rem .7rem;
  border-radius: var(--radius-sm); border: 1.5px solid var(--border-strong);
  font-size: .88rem; background: var(--input-bg); color: var(--text); font-family: inherit;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.filters-form input:focus, .filters-form select:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(106,155,200,.18); background: var(--input-bg-focus);
}
.filters-form select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2rem;
  cursor: pointer;
  background-image: none;
}

.filter-style-select {
  width: 100%;
  min-height: 36px;
  padding: .42rem .7rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-strong);
  font-size: .88rem;
  background: var(--input-bg);
  font-family: inherit;
  color: var(--text);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.filter-style-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(106,155,200,.18);
  background: var(--input-bg-focus);
}
.filter-style-select-multiple {
  min-height: 0;
  padding: .25rem .35rem;
  cursor: default;
}
.filter-style-select-multiple option {
  padding: .35rem .45rem;
  border-radius: 4px;
}
.filter-style-select-multiple option:checked {
  background: linear-gradient(0deg, #e8f1fa 0%, #e8f1fa 100%);
  color: var(--text);
}
.filter-style-multiselect {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  max-height: 9.5rem;
  overflow-y: auto;
  padding: .35rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-strong);
  background: var(--input-bg);
  -webkit-overflow-scrolling: touch;
}
.filter-style-multiselect:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(106,155,200,.18);
  background: var(--input-bg-focus);
}
.filter-style-multiselect-option {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  padding: .38rem .45rem;
  border-radius: 6px;
  font-size: .88rem;
  line-height: 1.3;
  cursor: pointer;
  transition: background .12s ease;
}
.filter-style-multiselect-option:hover {
  background: var(--surface-hover);
}
.filter-style-multiselect-option input {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--primary);
}
.filter-style-multiselect-option span {
  min-width: 0;
  word-break: break-word;
}
.filters-form-bar {
  display: flex;
  align-items: stretch;
  gap: .5rem;
  width: 100%;
}
.filters-form-bar input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}
.filters-form-field {
  position: relative;
  flex: 1 1 140px;
  min-width: 0;
  display: flex;
  align-items: stretch;
}
.filters-form-bar .filters-form-field {
  flex: 1 1 auto;
}
.filters-form-field select,
.filters-form-field input[type="date"],
.filters-form-field input[type="search"] {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  padding-right: 2.15rem;
}
.filters-form-field-clear {
  position: absolute;
  top: 50%;
  right: .3rem;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color .15s, background .15s;
}
.filters-form-field-clear svg {
  width: 14px;
  height: 14px;
}
.filters-form-field-clear:hover,
.filters-form-field-clear:focus-visible {
  outline: none;
  color: var(--text);
  background: var(--surface-hover);
}
.filters-form-field-clear[hidden] {
  display: none;
}
.filters-form-toggle {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  min-height: 36px;
  padding: 0;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  color: var(--muted);
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.filters-form-toggle:hover,
.filters-form-toggle:focus-visible {
  outline: none;
  border-color: var(--primary);
  background: var(--input-bg-focus);
  color: var(--text);
  box-shadow: 0 0 0 3px rgba(106,155,200,.18);
}
.filters-form[data-filters-active="1"] .filters-form-toggle::after {
  content: '';
  position: absolute;
  top: 6px;
  right: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
}
.filters-form-chevron {
  width: 18px;
  height: 18px;
  transition: transform .2s ease;
}
.filters-form.is-expanded .filters-form-chevron {
  transform: rotate(180deg);
}
.filters-form-options select,
.filters-form-options input[type="date"],
.filters-form-options .btn {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}

@media (max-width: 899px) {
  .filters-form-options {
    display: none;
    flex-direction: column;
    gap: .5rem;
    width: 100%;
  }
  .filters-form.is-expanded .filters-form-options {
    display: flex;
  }
  .filters-form-options .filters-form-field {
    flex: 0 0 auto;
  }
  .filters-form-options select,
  .filters-form-options input[type="date"],
  .filters-form-options .btn,
  .filters-form-options .filters-form-field select,
  .filters-form-options .filters-form-field input[type="date"] {
    flex: 0 0 auto;
  }
}

@media (min-width: 900px) {
  .filters-form {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    gap: .5rem;
  }
  .filters-form-bar {
    flex: 1 1 200px;
    width: auto;
  }
  .filters-form-toggle {
    display: none;
  }
  .filters-form .filters-form-options {
    display: contents;
  }
  .filters-form-options select,
  .filters-form-options input[type="date"],
  .filters-form-options .btn {
    flex: 1 1 140px;
    width: auto;
  }
  .filters-form-options .filters-form-clear {
    flex: 0 1 auto;
    min-width: 0;
  }
}

.jobs-queue-results.is-loading,
.filter-results.is-loading,
[data-filter-results].is-loading {
  opacity: 0.55;
  pointer-events: none;
  transition: opacity .15s ease;
}

/* ============ TABLES ============ */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-sm); border: 1px solid var(--line); }
.data-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.data-table th, .data-table td { padding: .85rem 1rem; text-align: left; border-bottom: 1px solid var(--line); }
.data-table th { background: var(--table-header-bg); font-weight: 600; color: var(--table-header-text); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid var(--border-strong); }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--table-row-hover); }
.list-bulk-form { margin: 0; }
.list-bulk-toolbar {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0 0 .75rem;
  padding: .55rem .75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.list-bulk-toolbar[hidden] { display: none; }
.list-bulk-count {
  font-size: .875rem;
  color: var(--muted);
}
.data-table .list-bulk-col {
  width: 2.5rem;
  min-width: 2.5rem;
  max-width: 2.5rem;
  padding-left: .5rem;
  padding-right: .25rem;
  text-align: center;
  vertical-align: middle;
}
.data-table .list-bulk-col input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  margin: 0;
  cursor: pointer;
}
.data-table .table-actions { text-align: right; width: 1%; white-space: nowrap; }
@media (min-width: 900px) {
  .customer-list-table tbody tr.customer-row {
    background: var(--card);
  }
  .customer-list-table tbody tr.customer-row:hover {
    background: var(--table-row-hover);
  }
  .customer-list-table td.cell-primary,
  .customer-list-table td[data-label="Primary contact"],
  .customer-list-table td[data-label="Contact email"],
  .customer-list-table td[data-label="Contact phone"],
  .customer-list-table td[data-label="Billing email"],
  .customer-list-table td[data-label="Status"],
  .customer-list-table td.table-actions {
    background: transparent;
  }
  .customer-list-table td.cell-primary {
    color: var(--text);
  }
}
a.icon-btn.table-action-btn { text-decoration: none; color: var(--muted); }
a.icon-btn.table-action-btn:hover { color: var(--text); }
a.icon-btn.table-action-btn svg { width: 18px; height: 18px; }
.table-action-group { display: inline-flex; align-items: center; gap: .15rem; }
.inline-form { display: inline; margin: 0; }
button.icon-btn.table-action-btn { padding: 0; font: inherit; }
.table-action-danger { color: var(--muted); }
.table-action-danger:hover { color: var(--danger); background: var(--danger-soft); }
.page-intro { margin: 0 0 1.25rem; color: var(--muted); font-size: .92rem; }
.row-highlight { background: var(--warning-soft); }
.row-highlight:hover { background: var(--warning-soft) !important; }
.data-table tbody tr.row-admin-unseen {
  box-shadow: inset 0 0 0 2px var(--primary);
}
.data-table tbody tr.row-admin-unseen:hover {
  box-shadow: inset 0 0 0 2px var(--primary);
}

@media (max-width: 899px) {
  .filters-form-bar input[type="search"] {
    width: auto;
    flex: 1 1 auto;
  }
  .page-header { flex-direction: column; align-items: stretch; }
  .page-header .btn { width: 100%; }
  .page-header-buttons { margin-left: 0; width: 100%; flex-direction: column; }
  .page-header-buttons .btn { width: 100%; }
  .page-header-job .page-header-end { margin-left: 0; width: 100%; flex-wrap: wrap; }
  .page-header-job .page-header-end .btn { width: 100%; }

  /* Tables collapse into stacked cards */
  .table-wrap {
    overflow: visible;
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
  }
  .data-table { font-size: .92rem; }
  .data-table thead { display: none; }
  .data-table,
  .data-table tbody,
  .data-table tr,
  .data-table td { display: block; width: 100%; }
  .data-table tbody tr {
    margin-bottom: .85rem;
    border: 1px solid var(--border-strong);
    border-left: 4px solid var(--list-accent, var(--border-strong));
    border-radius: var(--dashboard-card-radius);
    background: var(--card);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow .18s ease, transform .14s ease;
  }
  .data-table tbody tr:last-child { margin-bottom: 0; }
  .data-table tbody tr:hover { background: var(--card); box-shadow: var(--shadow); transform: translateY(-1px); }
  .data-table tbody tr.row-highlight { --list-accent: var(--warning); background: var(--card); }
  .data-table tbody tr.row-admin-unseen {
    --list-accent: var(--primary);
    border-color: var(--primary);
    box-shadow:
      0 0 0 2px color-mix(in srgb, var(--primary) 40%, transparent),
      var(--shadow-sm);
  }

  .data-table td {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .2rem;
    padding: .65rem 1rem;
    border: none;
    border-bottom: 1px solid var(--line);
    text-align: left;
    word-break: break-word;
  }
  .data-table td:last-child { border-bottom: none; }
  .data-table td::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: .7rem;
    line-height: 1.5;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .03em;
  }

  /* Primary cell becomes the card title bar */
  .data-table td.cell-primary {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    padding: 1rem 1.05rem .85rem;
    background: var(--surface-muted);
    border-bottom: 1px solid var(--line);
  }
  .data-table td.cell-primary::before { display: none; }
  .data-table td.cell-primary a { color: var(--primary); }

  /* Action cell becomes a footer row with comfortable tap targets */
  .data-table td.table-actions {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: .5rem;
    padding: .7rem 1.05rem;
    background: var(--card-footer-bg);
    border-top: 1px solid var(--line);
    border-bottom: none;
  }
  .data-table td.table-actions:empty { display: none; }
  .data-table td.table-actions::before { display: none; }
  .data-table td.table-actions .table-action-group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: .4rem;
    width: auto;
  }
  .data-table td.table-actions .icon-btn.table-action-btn {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--card);
    color: var(--text);
    font-size: .82rem;
    font-weight: 600;
  }
  .data-table td.table-actions .icon-btn.table-action-btn::after {
    content: none;
  }
  .data-table td.table-actions .table-action-danger {
    color: var(--danger);
  }
  .data-table td.table-actions .inline-form {
    display: inline-flex;
  }
  .data-table td.table-actions .btn {
    min-height: 40px;
  }

  .customer-list-table td:not(.cell-primary):not(.table-actions):not([data-label="Status"]):not([data-label="Primary contact"]):not([data-label="Contact email"]) {
    display: none;
  }
  .customer-list-table tbody tr.customer-row {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-bottom: .85rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--dashboard-card-radius);
    border-left: 4px solid var(--customer-accent, var(--border-strong));
    background: var(--card);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow .18s ease, transform .14s ease;
  }
  .customer-list-table tbody tr.customer-row--active { --customer-accent: var(--success); }
  .customer-list-table tbody tr.customer-row--inactive { --customer-accent: var(--muted); }
  .customer-list-table tbody tr.customer-row:hover {
    box-shadow: var(--shadow);
    transform: translateY(-1px);
  }
  .customer-list-table td.cell-primary {
    grid-column: 1 / -1;
    display: block;
    padding: 1rem 1.05rem .85rem;
    background: var(--surface-muted);
    border-bottom: 1px solid var(--line);
    font-size: inherit;
    font-weight: inherit;
  }
  .customer-list-table td.cell-primary::before { display: none; }
  .customer-list-table td.cell-primary strong {
    display: block;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text);
  }
  .customer-list-table td.cell-primary .text-muted-sm {
    display: inline-flex;
    align-items: center;
    margin-top: .4rem;
    padding: .18rem .5rem;
    border-radius: var(--radius-sm);
    background: var(--neutral-soft);
    border: 1px solid var(--line);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--muted);
  }
  .customer-list-table td[data-label="Primary contact"],
  .customer-list-table td[data-label="Contact email"] {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .2rem;
    padding: .6rem 1.05rem;
    background: var(--card);
    border-bottom: 1px solid var(--line);
  }
  .customer-list-table td[data-label="Contact email"] {
    border-bottom: none;
  }
  .customer-list-table td[data-label="Status"] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: 4.25rem;
    padding: .8rem 6.6rem .8rem 1.05rem;
    background: var(--card-footer-bg);
    border-top: 1px solid var(--line);
    border-bottom: none;
  }
  .customer-list-table td[data-label="Status"]::before {
    display: none;
  }
  .customer-list-table td.table-actions {
    position: absolute;
    right: 1.05rem;
    bottom: .7rem;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    width: auto;
    padding: 0;
    background: transparent;
    border-top: none;
    border-bottom: none;
  }
  .customer-list-table td.table-actions::before { display: none; }
  .customer-list-table td.table-actions .table-action-group {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: .4rem;
    width: auto;
  }
  .customer-list-table td.table-actions .inline-form {
    display: inline-flex;
  }
  .customer-list-table td.table-actions .icon-btn.table-action-btn {
    width: 40px;
    min-width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--card);
    color: var(--text);
    display: inline-grid;
    place-items: center;
  }
  .customer-list-table td.table-actions .icon-btn.table-action-btn::after {
    content: none;
  }
  .customer-list-table td.table-actions .icon-btn.table-action-btn:hover {
    background: var(--surface-muted);
    border-color: var(--primary);
    color: var(--primary);
  }
  .customer-list-table td.table-actions .table-action-danger:hover {
    border-color: var(--danger);
    color: var(--danger);
    background: var(--danger-soft);
  }
  .proposal-list-table td.table-actions .table-action-group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: .4rem;
    width: auto;
  }
  .proposal-list-table td.table-actions .inline-form {
    display: inline-flex;
    width: auto;
  }
  .proposal-list-table td.table-actions .btn {
    width: auto;
    min-height: 40px;
  }
  .proposal-list-table td.table-actions .icon-btn.table-action-btn {
    width: 40px;
    min-width: 40px;
    min-height: 40px;
  }

  .recurring-jobs-list-table td[data-label="Site"] {
    display: none;
  }
  .recurring-jobs-list-table tbody tr.recurring-row--inactive {
    --list-accent: var(--muted);
  }
  .recurring-jobs-list-table td.cell-primary strong {
    display: block;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text);
  }

  /* Lists with status + actions use the same mobile footer as customer cards. */
  .data-table:not(.customer-list-table) tbody tr:has(> td[data-label="Status"]):has(> td.table-actions) {
    position: relative;
  }
  .data-table:not(.customer-list-table) tbody tr:has(.status-completed) { --list-accent: var(--success); }
  .data-table:not(.customer-list-table) tbody tr:has(.status-waiting-on-customer),
  .data-table:not(.customer-list-table) tbody tr:has(.status-waiting-on-parts) { --list-accent: var(--warning); }
  .data-table:not(.customer-list-table) tbody tr:has(.status-in-progress),
  .data-table:not(.customer-list-table) tbody tr:has(.status-scheduled) { --list-accent: var(--purple); }
  .data-table:not(.customer-list-table) tbody tr:has(.status-cancelled),
  .data-table:not(.customer-list-table) tbody tr:has(.status-archived) { --list-accent: var(--muted); }
  .data-table:not(.customer-list-table) tbody tr:has(> td[data-label="Status"]):has(> td.table-actions) > td[data-label="Status"] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: 4.25rem;
    padding: .8rem 10rem .8rem 1.05rem;
    background: var(--card-footer-bg);
    border-top: 1px solid var(--line);
    border-bottom: none;
  }
  .data-table:not(.customer-list-table) tbody tr:has(> td[data-label="Status"]):has(> td.table-actions) > td[data-label="Status"]::before {
    display: none;
  }
  .data-table:not(.customer-list-table) tbody tr:has(> td[data-label="Status"]):has(> td.table-actions) > td.table-actions {
    position: absolute;
    right: 1.05rem;
    bottom: .7rem;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    width: auto;
    padding: 0;
    background: transparent;
    border-top: none;
    border-bottom: none;
  }
  .data-table:not(.customer-list-table) tbody tr:has(> td[data-label="Status"]):has(> td.table-actions) > td.table-actions .table-action-group {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: .4rem;
    width: auto;
  }
}

@media (max-width: 639px) {
  .stats-grid { grid-template-columns: 1fr; }
}
@media (max-width: 479px) {
  .content { padding: 1rem; }
  .action-bar .btn { flex: 1 1 100%; }
}

/* ============ DETAIL PAGE ============ */
.detail-grid { display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .detail-grid { grid-template-columns: 3fr 1fr; } }

.job-layout { display: grid; gap: 1.25rem; align-items: start; }
@media (min-width: 768px) {
  .job-layout { grid-template-columns: 3fr 1fr; }
}
.job-layout-main,
.job-layout-sidebar { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }

/* On mobile, flatten the two columns into a single ordered stack so the
   most useful panels (details, status) surface above the fold. */
@media (max-width: 767px) {
  .job-layout { display: flex; flex-direction: column; gap: 1rem; align-items: stretch; }
  .job-layout-main,
  .job-layout-sidebar { display: contents; }
  .job-layout > .detail-panel { width: 100%; min-width: 0; }
  .job-panel-details { order: 1; }
  .job-panel-description { order: 2; }
  .job-panel-status { order: 3; }
  .job-panel-tm { order: 4; }
  .job-panel-comments { order: 5; }
  .job-panel-attachments { order: 6; }
  .job-panel-activity { order: 7; }
  .detail-panel { padding: 1.1rem; }
}
.job-layout-sidebar .detail-list:not(.job-details-list) {
  grid-template-columns: 1fr;
  gap: .15rem 0;
}
.job-layout-sidebar .detail-list:not(.job-details-list) dt {
  margin-top: .65rem;
}
.job-layout-sidebar .detail-list:not(.job-details-list) dt:first-child { margin-top: 0; }
.job-layout-sidebar .detail-list:not(.job-details-list) dd { margin: 0; }

/* Compact job details sidebar panel */
.job-panel-details {
  padding: 1rem 1.1rem;
}
.job-details-heading {
  margin-bottom: .65rem;
}
.job-details-heading h2 {
  margin: 0;
  font-size: .95rem;
}
.job-details-list {
  grid-template-columns: minmax(4.5rem, auto) 1fr;
  gap: .3rem .65rem;
  margin: 0;
  font-size: .84rem;
  line-height: 1.4;
}
.job-details-list dt {
  color: var(--muted);
  font-weight: 500;
  font-size: .78rem;
  margin: 0;
}
.job-details-list dd {
  margin: 0;
  min-width: 0;
}
.job-details-list .job-detail-span {
  grid-column: 1 / -1;
}
.job-details-list dt.job-detail-span {
  margin-top: .35rem;
  padding-top: .45rem;
  border-top: 1px solid var(--line);
}
.job-details-list dt.job-detail-span-with-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
}
.job-detail-span-label {
  min-width: 0;
}
.job-detail-span-action {
  margin: 0;
  flex-shrink: 0;
}
.job-details-list dd.job-detail-span {
  margin-top: -.15rem;
}
.job-detail-primary {
  display: block;
  font-weight: 600;
}
.job-detail-sub {
  display: block;
  margin-top: .1rem;
  font-size: .8rem;
  line-height: 1.35;
}
.job-details-list .detail-link {
  font-size: .8rem;
  font-weight: 600;
}
.job-details-list .detail-link + .detail-link {
  display: block;
  margin-top: .1rem;
}
.detail-link-inline {
  display: inline-block;
  margin-top: .15rem;
  margin-left: 0;
}
.job-details-list .license-req-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.job-details-list .license-req-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem .5rem;
}
.job-details-list .license-req-list .badge {
  flex-shrink: 0;
  font-size: .68rem;
  padding: .15rem .45rem;
}
.job-details-list .license-req-list .muted {
  font-size: .78rem;
  line-height: 1.35;
}
.job-details-assign-form {
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.job-assign-selected {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  list-style: none;
  margin: 0;
  padding: 0;
  min-height: 0;
}
.job-assign-selected:not(:empty) + .job-assign-empty {
  display: none;
}
.job-assign-empty {
  margin: 0;
  font-size: .82rem;
  color: var(--muted);
}
.job-assign-pill {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  max-width: 100%;
  padding: .22rem .4rem .22rem .55rem;
  border-radius: 999px;
  background: var(--pill-bg);
  border: 1px solid var(--pill-border);
  color: var(--text);
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.3;
}
.job-assign-pill-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.job-assign-pill-remove {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1;
  cursor: pointer;
}
.job-assign-pill-remove:hover {
  background: rgba(15, 30, 54, .08);
  color: var(--danger);
}
.job-assign-selected-readonly .job-assign-pill {
  padding: .22rem .65rem;
}
.job-details-assign-form .btn-sm {
  min-height: 32px;
  padding: .35rem .65rem;
  font-size: .82rem;
}
.job-details-assign-form [data-job-assign-add]:disabled {
  opacity: .65;
  cursor: not-allowed;
}
.job-details-schedule {
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.job-details-schedule-techs {
  margin-top: .1rem;
}
.job-details-schedule-edit {
  margin-top: .15rem;
}
.job-schedule-modal .form-section--first {
  margin-top: 0;
}
.job-schedule-modal-section .form-section-title {
  margin-bottom: .65rem;
}
.job-schedule-time-grid {
  display: grid;
  gap: .65rem .75rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.job-schedule-time-grid .schedule-visit-date {
  grid-column: 1 / -1;
}
@media (min-width: 520px) {
  .job-schedule-time-grid {
    grid-template-columns: minmax(8.5rem, 1.25fr) minmax(5.5rem, 0.95fr) minmax(4.75rem, 0.8fr) minmax(5.5rem, 0.95fr);
  }
  .job-schedule-time-grid .schedule-visit-date {
    grid-column: auto;
  }
}
.job-schedule-time-grid label {
  display: block;
  margin: 0;
}
.job-schedule-time-grid select {
  width: 100%;
  min-height: 2.5rem;
  padding: .45rem .55rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  color: var(--text);
  font: inherit;
}
.job-schedule-time-grid select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.job-schedule-modal-actions {
  margin-top: .25rem;
}
.job-schedule-modal-invites {
  margin-top: 1.15rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--line);
}
.job-schedule-modal-invites .form-section-title {
  margin-bottom: .35rem;
}
.scheduled-visits-list {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-bottom: .65rem;
}
.scheduled-visit-row {
  position: relative;
  padding: .75rem .75rem .5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
}
.scheduled-visit-row .field-report-visit-badge {
  display: inline-block;
  margin-bottom: .45rem;
}
.scheduled-visit-remove {
  position: absolute;
  top: .45rem;
  right: .45rem;
}
.scheduled-visit-fields {
  margin: 0;
}
.job-schedule-visit-list {
  list-style: none;
  margin: 0 0 .45rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.job-schedule-visit-list-item {
  margin: 0;
}
.job-sidebar-form label { display: block; margin-bottom: .65rem; }
.job-sidebar-form select,
.job-sidebar-form input[type="file"] {
  width: 100%;
  min-height: 38px;
  padding: .45rem .7rem;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: .9rem;
  background-color: var(--input-bg);
  color: var(--text);
  font-family: inherit;
}
.job-sidebar-form select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--accent-focus-ring);
  background-color: var(--input-bg-focus);
}
.job-draft-notice {
  margin: .75rem 0 0;
  color: var(--muted);
  font-size: .92rem;
  max-width: 42rem;
}
.approve-queue-panel { display: flex; flex-direction: column; gap: 1rem; }
.approve-queue-lead { margin: 0; color: var(--text); line-height: 1.5; }
.approve-queue-recipients {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.approve-queue-recipient {
  display: grid;
  gap: .15rem .75rem;
  padding: .75rem .85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
}
.approve-queue-recipient-label { font-weight: 600; font-size: .9rem; }
.approve-queue-recipient-email { font-size: .88rem; word-break: break-all; }
.approve-queue-recipient-note { font-size: .78rem; color: var(--muted); }
.approve-queue-recipients--compact .approve-queue-recipient {
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: .55rem .7rem;
}
.job-draft-summary { margin: 0 0 .75rem; color: var(--muted); font-size: .88rem; }
.approve-queue-form .form-actions {
  display: flex;
  justify-content: flex-end;
  gap: .65rem;
  margin-top: .5rem;
}
.detail-panel { background: var(--card); padding: 1.4rem; border-radius: var(--radius); box-shadow: var(--shadow-sm); border: 1px solid var(--line); }
.detail-panel h2 { font-size: 1.05rem; margin: 0 0 1rem; }
.detail-panel h3 { font-size: .95rem; margin: 1.25rem 0 .4rem; }
.detail-list { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1.25rem; margin: 0 0 1rem; font-size: .9rem; }
.detail-list dt { color: var(--muted); font-weight: 500; }
.detail-list dd { word-break: break-word; }
@media (max-width: 899px) {
  .detail-list {
    grid-template-columns: 1fr;
    gap: .15rem .5rem;
  }
  .detail-list dt {
    margin-top: .5rem;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .03em;
  }
  .detail-list dt:first-child { margin-top: 0; }
  .detail-list dd { margin: 0 0 .25rem; }
}
.detail-muted { color: var(--muted); }
.detail-link {
  display: inline-block;
  margin-top: .15rem;
  color: var(--primary);
  font-weight: 600;
}
.detail-link:hover { text-decoration: underline; }
.detail-list dd .detail-link + .detail-link { margin-left: 0; }
.description { white-space: pre-wrap; }

.comments-section { margin-top: 0; min-width: 0; }
.comments { margin-bottom: 1.25rem; min-width: 0; }
.comments:empty { margin-bottom: 0; }
.comments .comment {
  background: var(--surface-muted);
  padding: .85rem 1rem;
  border-radius: var(--radius-sm);
  margin-bottom: .6rem;
  border: 1px solid var(--line);
  box-shadow: none;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.comments .comment:last-child { margin-bottom: 0; }
.comments .comment-text,
.comments .comment p { margin: 0; font-size: .92rem; overflow-wrap: anywhere; word-break: break-word; }
.comment-text.is-truncated:not(.is-expanded) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--comment-clamp-lines, 4);
  overflow: hidden;
}
.comment-toggle {
  display: inline-block;
  margin-top: .4rem;
  padding: 0;
  font-size: .85rem;
  font-weight: 600;
}
.comments .comment.internal { border-left: 3px solid var(--navy-600); background: var(--surface-muted); }
.staff-only-panel { border-left: 3px solid var(--navy-600); background: var(--surface-muted); }
.panel-heading-row { display: flex; align-items: center; gap: .6rem; margin-bottom: .35rem; }
.panel-heading-row h2 { margin: 0; }
.panel-note { margin: 0 0 1rem; font-size: .85rem; color: var(--muted); }
.field-report-summary { margin-bottom: 1.25rem; }
.onsite-visit-summary-list { margin: 0; padding-left: 1.1rem; }
.onsite-visit-summary-list li + li { margin-top: .35rem; }
.onsite-visits { margin-bottom: 1rem; }
.onsite-visits-list { display: flex; flex-direction: column; gap: 1rem; margin-bottom: .75rem; }
.onsite-visit-row {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg, #f8fafc);
}
.onsite-visit-row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .75rem;
}
.onsite-visit-row-title { font-weight: 600; font-size: .9rem; color: var(--navy); }
.btn-sm { padding: .25rem .55rem; font-size: .8rem; }
.onsite-visit-tech { display: block; margin-bottom: .75rem; }
.onsite-visit-tech select {
  width: 100%;
  padding: .45rem .7rem;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: .9rem;
  background: var(--input-bg);
  color: var(--text);
}
.grid-onsite-visit { display: grid; gap: 1rem; }
@media (min-width: 768px) { .grid-onsite-visit { grid-template-columns: 1fr 1fr 1fr; } }
.grid-onsite-travel { display: grid; gap: 1rem; margin-top: .75rem; }
@media (min-width: 768px) { .grid-onsite-travel { grid-template-columns: 1fr 1fr; } }
.field-report-form input[type="date"],
.field-report-form input[type="time"],
.field-report-form input[type="number"],
.field-report-form textarea {
  width: 100%;
  padding: .45rem .7rem;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: .9rem;
  background-color: var(--input-bg);
  color: var(--text);
  font-family: inherit;
}
.onsite-visit-tech select:focus,
.field-report-form input[type="date"]:focus,
.field-report-form input[type="time"]:focus,
.field-report-form input[type="number"]:focus,
.field-report-form textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(106, 155, 200, .18);
}

.field-report-modal .field-report-note {
  margin: 0 0 .5rem;
  font-size: .78rem;
  color: var(--muted);
}
.field-report-modal .field-report-stats {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: .85rem;
}
.field-report-modal .field-report-stat {
  display: inline-flex;
  align-items: baseline;
  gap: .35rem;
  padding: .2rem .55rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  font-size: .82rem;
  color: var(--text);
}
.field-report-modal .field-report-stat-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.field-report-modal .field-report-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem .6rem;
  margin-bottom: .45rem;
}
.field-report-modal .field-report-section-head h3 {
  margin: 0;
  font-size: .92rem;
}
.field-report-modal .field-report-hint {
  font-size: .78rem;
  color: var(--muted);
}
.field-report-modal .field-report-form label {
  margin-bottom: 0;
}
.field-report-modal .field-report-form .form-actions {
  margin-top: .75rem;
}
.field-report-modal .field-report-form-actions {
  width: 100%;
}
.field-report-modal .field-report-section--materials {
  margin-top: .85rem;
}
.field-report-modal .field-report-section--materials .field-report-section-head {
  margin-bottom: .35rem;
}
.field-report-modal .material-lines-grid {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
  overflow: hidden;
}
.field-report-modal .material-lines-cols,
.field-report-modal .material-line-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5.25rem 26px;
  gap: .35rem .4rem;
  align-items: end;
  padding: .3rem .45rem;
}
.field-report-modal .material-lines-cols {
  padding-top: .4rem;
  padding-bottom: .15rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface-muted);
}
.field-report-modal .material-lines-cols span {
  font-size: .65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--muted);
}
.field-report-modal .material-lines-list {
  display: flex;
  flex-direction: column;
}
.field-report-modal .material-line-row {
  border-bottom: 1px solid var(--line);
}
.field-report-modal .material-line-row:last-child {
  border-bottom: none;
}
.field-report-modal .material-line-row label {
  margin: 0;
  font-size: .65rem;
  color: var(--muted);
}
.field-report-modal .material-line-row input {
  min-height: 30px;
  padding: .25rem .45rem;
  font-size: .82rem;
}
.field-report-modal .material-line-row .material-line-remove {
  width: 26px;
  height: 26px;
  padding: 0;
  margin-bottom: 1px;
  align-self: end;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--card);
  color: var(--muted);
}
.field-report-modal .material-line-row .material-line-remove:hover {
  color: var(--danger);
  border-color: var(--danger);
}
.field-report-modal .material-line-row .material-line-remove svg {
  width: 14px;
  height: 14px;
}
.field-report-modal .material-line-add {
  margin-top: .4rem;
  min-height: 28px;
  padding: .2rem .55rem;
  font-size: .8rem;
}
@media (min-width: 400px) {
  .field-report-modal .material-line-row .material-line-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .field-report-modal .material-line-row label {
    font-size: 0;
  }
}
@media (max-width: 399px) {
  .field-report-modal .material-lines-cols {
    display: none;
  }
  .field-report-modal .material-line-row {
    grid-template-columns: 1fr 5rem 26px;
    padding: .4rem .45rem;
  }
  .field-report-modal .material-line-row .material-line-label {
    display: block;
    font-size: .65rem;
    margin-bottom: .1rem;
  }
}
.field-report-modal .onsite-visits {
  margin-bottom: 0;
}
.field-report-modal .onsite-visits-list {
  gap: .45rem;
  margin-bottom: .45rem;
}
.field-report-modal .onsite-visit-row {
  position: relative;
  padding: 1.85rem .65rem .55rem;
}
.field-report-modal .field-report-visit-badge {
  position: absolute;
  top: .45rem;
  left: .65rem;
  font-weight: 600;
  font-size: .78rem;
  color: var(--navy);
}
.field-report-modal .onsite-visit-row .onsite-visit-remove {
  position: absolute;
  top: .35rem;
  right: .55rem;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--card);
  color: var(--muted);
}
.field-report-modal .onsite-visit-row .onsite-visit-remove:hover {
  color: var(--danger);
  border-color: var(--danger);
  background: var(--danger-soft);
}
.field-report-modal .onsite-visit-row .onsite-visit-remove svg {
  width: 14px;
  height: 14px;
}
.field-report-modal .field-report-visit-fields {
  display: grid;
  gap: .45rem .5rem;
  grid-template-columns: 1fr 1fr;
}
.field-report-modal .field-report-visit-tech {
  grid-column: 1 / -1;
}
.field-report-modal .field-report-visit-fields input,
.field-report-modal .field-report-visit-fields select {
  min-height: 34px;
  padding: .35rem .55rem;
  font-size: .85rem;
}
.field-report-modal .field-report-visit-fields label {
  font-size: .68rem;
}
@media (min-width: 640px) {
  .field-report-modal .field-report-visit-fields {
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
    align-items: end;
  }
  .field-report-modal .field-report-visit-tech {
    grid-column: auto;
  }
}
.field-report-modal .onsite-visit-add {
  min-height: 32px;
  padding: .25rem .65rem;
}
.invoice-modal {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.quote-builder-columns {
  display: grid;
  gap: 1rem;
  align-items: start;
}
@media (min-width: 768px) {
  .quote-builder-columns {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
  }
}
@media (min-width: 1024px) {
  .quote-builder-columns {
    grid-template-columns: minmax(0, 1fr) minmax(400px, 500px);
  }
}
.quote-builder-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.quote-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  padding: 1.1rem 1.15rem;
  box-shadow: var(--shadow-sm);
}
.quote-card label {
  margin-bottom: .85rem;
}
.quote-card label:last-child {
  margin-bottom: 0;
}
.quote-generate-btn,
.quote-add-material-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.quote-generate-btn {
  margin-bottom: .35rem;
}

/* Pricing inputs */
.quote-charges {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.quote-labour-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 .85rem;
}
.quote-labour-grid .quote-charge-full {
  grid-column: 1 / -1;
}

/* Material lines */
.quote-materials-fieldset {
  margin: .4rem 0 0;
  padding: 0;
  border: 0;
}
.quote-materials-fieldset legend {
  padding: 0;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .055em;
  color: var(--muted);
  margin-bottom: .55rem;
}
.quote-materials-rows {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  margin-bottom: .65rem;
}
.quote-builder-col--pricing .quote-material-row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  gap: .35rem .7rem;
  align-items: end;
  padding: .7rem .75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #f8fafd;
}
.quote-material-item {
  grid-column: 1 / -1;
}
.quote-material-qty {
  grid-column: 1;
}
.quote-material-price {
  grid-column: 2;
}
.quote-material-line {
  grid-column: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  gap: .15rem;
  padding-bottom: .55rem;
  min-width: 4.5rem;
}
.quote-material-line-label {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}
.quote-material-line-total {
  font-size: .9rem;
  font-weight: 700;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.quote-material-row label {
  margin-bottom: 0;
}
.quote-material-remove {
  grid-column: 1 / -1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: none;
  border: none;
  padding: .15rem .1rem;
  font-family: inherit;
  font-size: .76rem;
  font-weight: 600;
  color: #b91c1c;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.quote-material-remove:hover {
  color: #7f1d1d;
  text-decoration: underline;
}

/* Live total summary */
.quote-summary-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #f8fafd 0%, #fff 100%);
  padding: 1rem 1.15rem;
  box-shadow: var(--shadow-sm);
}
@media (min-width: 768px) {
  .quote-summary-card {
    position: sticky;
    top: .5rem;
  }
}
.quote-summary-title {
  margin: 0 0 .65rem;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}
.quote-summary-list {
  margin: 0;
}
.quote-summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  font-size: .85rem;
  color: var(--text);
  padding: .28rem 0;
}
.quote-summary-row[hidden] {
  display: none;
}
.quote-summary-row dt,
.quote-summary-row dd {
  margin: 0;
}
.quote-summary-row dd {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}
.quote-summary-meta {
  font-size: .72rem;
  font-weight: 500;
  color: var(--muted);
}
.quote-summary-row--sub {
  border-top: 1px solid var(--line);
  margin-top: .35rem;
  padding-top: .5rem;
  color: var(--muted);
}
.quote-summary-row--total {
  border-top: 2px solid var(--navy);
  margin-top: .35rem;
  padding-top: .5rem;
}
.quote-summary-row--total dt {
  font-weight: 700;
  color: var(--navy);
}
.quote-summary-row--total dd {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--navy);
}
.quote-summary-empty {
  margin: .4rem 0 0;
  font-size: .78rem;
  line-height: 1.45;
  color: var(--muted);
}
.quote-send-section .invoice-cta {
  margin-top: 0;
}
.quote-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.quote-modal .invoice-modal-header.quote-modal-header {
  padding-bottom: 0;
  border-bottom: none;
}
.quote-description-field {
  min-height: 280px;
}
.quote-modal-header-main {
  flex: 1;
  min-width: 0;
}
.quote-modal-header-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .5rem;
  flex-shrink: 0;
}
.quote-scope-actions {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.quote-scope-actions .quote-save-draft-btn {
  min-height: 42px;
  font-size: .9rem;
}
.quote-save-status {
  margin: .45rem 0 0;
  font-size: .75rem;
  color: var(--muted);
  text-align: center;
  line-height: 1.4;
}
.quote-save-status.is-error {
  color: #b91c1c;
}
.invoice-modal-header {
  padding-bottom: .85rem;
  border-bottom: 1px solid var(--line);
}
.invoice-modal-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  flex-wrap: wrap;
}
.invoice-modal-job-number {
  font-weight: 700;
  font-size: .95rem;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.invoice-modal-customer {
  margin: .45rem 0 0;
  font-weight: 600;
  font-size: .92rem;
  color: var(--text);
}
.invoice-modal-title {
  margin: .15rem 0 0;
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.35;
}
.invoice-modal-note {
  margin: .5rem 0 0;
  font-size: .72rem;
  color: var(--muted);
}
.invoice-status-card {
  display: flex;
  gap: .65rem;
  padding: .75rem .85rem;
  border-radius: 8px;
  border: 1px solid var(--line);
}
.invoice-status-card--success {
  background: var(--success-soft);
  border-color: var(--success-soft-border);
}
.invoice-status-card-icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--success);
}
.invoice-status-card-icon svg {
  width: 100%;
  height: 100%;
}
.invoice-status-card-body strong {
  display: block;
  font-size: .88rem;
  color: var(--success-on-soft);
  margin-bottom: .35rem;
}
.invoice-status-card--success > strong {
  display: block;
  font-size: .88rem;
  color: var(--success-on-soft);
}
.invoice-status-card--success .text-muted-sm {
  color: var(--muted);
}
.invoice-status-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  margin: 0;
  font-size: .78rem;
}
.invoice-status-meta div {
  display: flex;
  gap: .35rem;
  align-items: baseline;
}
.invoice-status-meta dt {
  margin: 0;
  color: var(--success);
  font-weight: 500;
}
.invoice-status-meta dd {
  margin: 0;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.invoice-section-head {
  margin-bottom: .65rem;
}
.invoice-section-head h3 {
  margin: 0;
  font-size: .95rem;
  font-weight: 700;
  color: var(--navy);
}
.invoice-section-lead {
  margin: .2rem 0 0;
  font-size: .78rem;
  color: var(--muted);
}
.invoice-callout {
  padding: .65rem .75rem;
  border-radius: 8px;
  font-size: .82rem;
  line-height: 1.45;
}
.invoice-callout p {
  margin: 0;
}
.invoice-callout--info {
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  color: #0c4a6e;
}
.invoice-callout--warning {
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
}
.invoice-callout a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
}
.invoice-checklist {
  margin: .5rem 0 0;
  padding-left: 1.15rem;
  font-size: .8rem;
}
.invoice-checklist li {
  margin: .2rem 0;
}
.invoice-lines-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
.invoice-lines-card--readonly {
  background: #f8fafc;
}
.invoice-lines-group + .invoice-lines-group {
  border-top: 1px solid var(--line);
}
.invoice-lines-group-label {
  display: block;
  padding: .35rem .65rem;
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  background: #f8fafc;
}
.invoice-lines-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .78rem;
}
.invoice-lines-table td {
  padding: .4rem .65rem;
  vertical-align: top;
  border-bottom: 1px solid #f1f5f9;
}
.invoice-lines-table tr:last-child td {
  border-bottom: none;
}
.invoice-lines-desc {
  color: var(--text);
  line-height: 1.35;
  word-break: break-word;
}
.invoice-lines-amt {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  width: 5rem;
}
.invoice-lines-totals {
  padding: .5rem .65rem;
  background: #f8fafc;
  border-top: 1px solid var(--line);
}
.invoice-lines-total-row {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  font-size: .8rem;
  color: var(--muted);
}
.invoice-lines-total-row + .invoice-lines-total-row {
  margin-top: .2rem;
}
.invoice-lines-total-row--inc {
  font-weight: 700;
  font-size: .88rem;
  color: var(--navy);
}
.invoice-lines-total-row--inc span:last-child {
  font-variant-numeric: tabular-nums;
}
.invoice-cta {
  margin-top: .85rem;
}
.invoice-cta-btn {
  min-height: 42px;
  font-size: .9rem;
}
.invoice-cta-hint {
  margin: .45rem 0 0;
  font-size: .75rem;
  color: var(--muted);
  text-align: center;
  line-height: 1.4;
}
.invoice-manual-details {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-muted);
}
.invoice-manual-summary {
  padding: .55rem .75rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
  user-select: none;
  border-radius: 7px;
  transition: background .15s ease, color .15s ease;
}
.invoice-manual-summary:hover {
  background: var(--surface-hover);
  color: var(--text);
}
.invoice-manual-summary::-webkit-details-marker {
  display: none;
}
.invoice-manual-summary::before {
  content: '▸';
  display: inline-block;
  margin-right: .4rem;
  transition: transform .15s ease;
}
.invoice-manual-details[open] .invoice-manual-summary::before {
  transform: rotate(90deg);
}
.invoice-manual-body {
  padding: 0 .75rem .75rem;
  border-top: 1px solid var(--line);
}
.invoice-manual-note {
  margin: .6rem 0 .5rem;
  font-size: .75rem;
  color: var(--muted);
}
.invoice-manual-form label {
  font-size: .78rem;
}
.invoice-manual-form input {
  min-height: 34px;
  font-size: .85rem;
}
.invoice-manual-hint {
  margin: .35rem 0 .55rem;
  font-size: .72rem;
  color: var(--muted);
}
.invoice-modal-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: .25rem;
  border-top: 1px solid var(--line);
  margin-top: .15rem;
}
.invoice-preview-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin: 0 0 .75rem;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.invoice-preview-lead {
  margin: 0 0 1rem;
  font-size: .88rem;
  color: var(--muted);
  line-height: 1.5;
}
.accounts-api-invoice-preview .invoice-preview-form {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.accounts-invoice-doc {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  background: var(--card);
  box-shadow: 0 1px 2px rgba(10, 21, 40, .04), 0 8px 24px rgba(10, 21, 40, .06);
}
.accounts-invoice-doc-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  background: #e8f2fb;
  border-bottom: 1px solid #c8d9ec;
  color: var(--text);
}
.accounts-invoice-doc-header .accounts-invoice-doc-type {
  color: var(--primary);
  opacity: 1;
}
.accounts-invoice-doc-header .accounts-invoice-doc-title {
  color: var(--text);
}
.accounts-invoice-doc-header .accounts-invoice-doc-ref-label {
  color: var(--muted);
  opacity: 1;
}
.accounts-invoice-doc-header .accounts-invoice-doc-ref-value {
  color: var(--text);
}
.accounts-invoice-doc-brand {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  min-width: 0;
}
.accounts-invoice-doc-type {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .82;
}
.accounts-invoice-doc-title {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
}
.accounts-invoice-doc-ref {
  text-align: right;
}
.accounts-invoice-doc-ref-label {
  display: block;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .75;
}
.accounts-invoice-doc-ref-value {
  display: block;
  margin-top: .15rem;
  font-size: .92rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.accounts-invoice-doc-parties {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface-muted);
}
.accounts-invoice-doc-party {
  min-width: min(100%, 14rem);
}
.accounts-invoice-doc-party-name {
  display: block;
  margin-top: .2rem;
  font-size: .95rem;
  color: var(--text);
}
.accounts-invoice-doc-party-contact {
  display: block;
  margin-top: .25rem;
  font-size: .8rem;
  color: var(--muted);
}
.accounts-invoice-doc-label {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.accounts-invoice-doc-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem 1rem;
  margin: 0;
  min-width: min(100%, 18rem);
}
.accounts-invoice-doc-meta dt {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.accounts-invoice-doc-meta dd {
  margin: .15rem 0 0;
  font-size: .84rem;
  font-weight: 600;
  color: var(--text);
}
.accounts-invoice-doc-notes {
  padding: .9rem 1.25rem;
  border-bottom: 1px solid var(--line);
  background: var(--card);
}
.accounts-invoice-doc-notes p {
  margin: 0;
  font-size: .84rem;
  line-height: 1.45;
  color: var(--text);
}
.accounts-invoice-doc-notes p + p {
  margin-top: .35rem;
}
.accounts-invoice-doc-empty {
  margin: 0;
  padding: 1.25rem;
  font-size: .85rem;
  color: var(--muted);
}
.accounts-invoice-doc-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.accounts-invoice-doc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
}
.accounts-invoice-doc-table th,
.accounts-invoice-doc-table td {
  padding: .65rem 1.25rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.accounts-invoice-doc-table th.num,
.accounts-invoice-doc-table td.num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.accounts-invoice-doc-table thead th {
  background: var(--surface-muted);
  color: var(--muted);
  font-weight: 700;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.accounts-invoice-doc-table tbody tr:last-child td {
  border-bottom: 0;
}
.accounts-invoice-doc-table tbody tr.is-material-item-no-price td.num {
  color: var(--muted);
}
.accounts-invoice-doc-table tbody tr.is-group-subtotal td {
  padding-top: .65rem;
  padding-bottom: .65rem;
  background: var(--info-soft);
  border-top: 1px solid var(--pill-border);
  border-bottom: 1px solid var(--pill-border);
  font-weight: 700;
}
.accounts-invoice-doc-table tbody tr.is-group-subtotal td:first-child {
  border-left: 1px solid var(--pill-border);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.accounts-invoice-doc-table tbody tr.is-group-subtotal td:last-child {
  border-right: 1px solid var(--pill-border);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--text);
}
.accounts-invoice-line-tag {
  display: inline-block;
  margin-right: .4rem;
  padding: .12rem .4rem;
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--primary);
  background: var(--info-soft);
  border-radius: 999px;
  vertical-align: middle;
}
.accounts-invoice-line-tag--labour {
  color: var(--accent-600);
  background: var(--accent-soft);
}
.accounts-invoice-doc-totals {
  padding: .85rem 1.25rem 1.1rem;
  margin-left: auto;
  max-width: 18rem;
  background: var(--card);
}
.accounts-invoice-doc-total-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .28rem 0;
  font-size: .82rem;
  color: var(--muted);
}
.accounts-invoice-doc-total-row--grand {
  margin-top: .45rem;
  padding-top: .55rem;
  border-top: 2px solid var(--primary);
  font-weight: 700;
  font-size: .98rem;
  color: var(--text);
}
@media (max-width: 640px) {
  .accounts-invoice-doc-meta {
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }
  .accounts-invoice-doc-ref {
    text-align: left;
  }
  .accounts-invoice-doc-totals {
    max-width: none;
  }
}
.invoice-preview-step {
  color: var(--muted);
}
.invoice-preview-step.is-done {
  color: #059669;
}
.invoice-preview-step.is-current {
  color: var(--primary);
}
.invoice-preview-step-divider {
  width: 2rem;
  height: 1px;
  background: var(--line);
}
.invoice-preview-form {
  margin-top: .85rem;
}
.invoice-preview-due {
  margin-bottom: .65rem;
  font-size: .82rem;
}
.invoice-preview-due input {
  min-height: 36px;
}
.invoice-preview-actions {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  flex-wrap: wrap;
}
.invoice-preview-actions .btn-primary {
  margin-left: auto;
}
.xero-line-tag {
  display: inline-block;
  margin-right: .35rem;
  padding: .1rem .35rem;
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #6b7280;
  background: #f3f4f6;
  border-radius: 3px;
  vertical-align: middle;
}
.xero-invoice-mock-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.xero-invoice-mock-empty {
  margin: 0;
  padding: 1rem;
}
.xero-invoice-preview-wrap .xero-invoice-mock {
  border: 1px solid #c5d7e8;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 1rem;
  background: #fff;
  color: #0b1220;
  box-shadow: 0 2px 8px rgba(19, 60, 100, .08);
}
.xero-invoice-mock .panel-note {
  color: #475569;
}
.xero-invoice-mock-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .75rem 1rem;
  background: linear-gradient(135deg, #13b5ea 0%, #0b7eb8 100%);
  color: #fff;
}
.xero-invoice-mock-brand {
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .02em;
}
.xero-invoice-mock-meta {
  font-size: .8rem;
  opacity: .92;
}
.xero-invoice-mock-parties {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 1rem;
  font-size: .85rem;
  border-bottom: 1px solid #e8eef4;
}
.xero-invoice-mock-label {
  display: block;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #6b7c8f;
  margin-bottom: .15rem;
}
.xero-invoice-mock-dates {
  text-align: right;
}
.xero-invoice-mock-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .8rem;
}
.xero-invoice-mock-table th,
.xero-invoice-mock-table td {
  padding: .5rem 1rem;
  border-bottom: 1px solid #eef2f6;
  text-align: left;
  vertical-align: top;
}
.xero-invoice-mock-table th.num,
.xero-invoice-mock-table td.num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.xero-invoice-mock-table thead th {
  background: #f4f8fb;
  color: #4a5f73;
  font-weight: 600;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.xero-invoice-mock-totals {
  padding: .65rem 1rem 1rem;
  margin-left: auto;
  max-width: 16rem;
}
.xero-invoice-mock-total-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .25rem 0;
  font-size: .82rem;
  color: #4a5f73;
}
.xero-invoice-mock-materials {
  margin: 0;
  padding: .5rem 1rem;
  font-size: .78rem;
  border-top: 1px dashed #e8eef4;
}
.xero-invoice-mock-total-row--grand {
  margin-top: .35rem;
  padding-top: .45rem;
  border-top: 2px solid #13b5ea;
  font-weight: 700;
  font-size: .95rem;
  color: #0b3d5c;
}

.xero-import-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.xero-import-header {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  margin: -.25rem 0 1rem;
  padding: .85rem 1rem;
  border: 1px solid #86efac;
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, #f0fdf4 0%, #f8fffb 100%);
}
.xero-import-header-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: .55rem;
  background: #13b5ea;
  color: #fff;
  flex-shrink: 0;
}
.xero-import-header-mark svg { width: 1.15rem; height: 1.15rem; }
.xero-import-header-copy { min-width: 0; }
.xero-import-header-org {
  margin: 0;
  font-size: .95rem;
  font-weight: 700;
  color: var(--navy-800);
  overflow-wrap: anywhere;
}
.xero-import-header-meta {
  margin: .2rem 0 0;
  font-size: .8rem;
  color: var(--muted);
}
.xero-import-lede {
  margin: 0 0 1rem;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--muted);
}
.xero-import-layout {
  display: flex;
  flex-direction: column;
  gap: .85rem;
}
.xero-import-controls {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.xero-import-search-wrap {
  position: relative;
}
.xero-import-search-icon {
  position: absolute;
  left: .75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  color: var(--muted);
  pointer-events: none;
}
.xero-import-search {
  width: 100%;
  margin: 0;
  padding: .55rem .75rem .55rem 2.35rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: .9rem;
  min-height: 40px;
  background: #f8fafd;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.xero-import-search:focus {
  outline: none;
  border-color: #13b5ea;
  box-shadow: 0 0 0 3px rgba(19, 181, 234, .15);
  background: #fff;
}
.xero-import-search-wrap:has(.xero-import-search:not(:placeholder-shown)) .xero-import-search,
.xero-import-search-wrap.has-value .xero-import-search {
  padding-right: 2.35rem;
}
.xero-import-search-clear {
  position: absolute;
  right: .35rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.xero-import-search-clear:hover {
  background: #eef2f6;
  color: var(--text);
}
.xero-import-search-clear svg { width: .95rem; height: .95rem; }
.xero-import-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}
.xero-import-filter {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 32px;
  padding: .28rem .7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--text);
  font-size: .8rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.xero-import-filter:hover {
  background: #f8fafd;
  border-color: #c8d4e8;
}
.xero-import-filter.is-active {
  border-color: #13b5ea;
  background: #e8f7fd;
  color: #0b6480;
  box-shadow: 0 0 0 3px rgba(19, 181, 234, .12);
}
.xero-import-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 .35rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, .08);
  font-size: .72rem;
  font-weight: 700;
}
.xero-import-filter.is-active .xero-import-filter-count {
  background: rgba(11, 100, 128, .14);
}
.xero-import-list-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  overflow: hidden;
}
.xero-import-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .55rem .85rem;
  border-bottom: 1px solid var(--line);
  background: #f8fafd;
}
.xero-import-select-all {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: 0;
  cursor: pointer;
  font-size: .8rem;
  font-weight: 600;
  color: var(--text);
  text-transform: none;
  letter-spacing: normal;
}
.xero-import-select-all input[type="checkbox"] {
  width: auto;
  min-height: auto;
  margin: 0;
}
.xero-import-visible-count {
  font-size: .78rem;
  color: var(--muted);
  white-space: nowrap;
}
.xero-import-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: min(22rem, 48vh);
  overflow: auto;
}
.xero-import-item + .xero-import-item { border-top: 1px solid var(--line); }
.xero-import-item.is-hidden { display: none; }
.xero-import-item-label {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .7rem .85rem;
  margin: 0;
  cursor: pointer;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  font-size: .9rem;
  color: var(--text);
  transition: background .12s;
}
.xero-import-item-label:hover { background: #f8fafd; }
.xero-import-item.is-selected .xero-import-item-label {
  background: #eef8fc;
}
.xero-import-item.is-imported .xero-import-item-label {
  cursor: default;
  opacity: .78;
}
.xero-import-item.is-imported .xero-import-item-label:hover {
  background: transparent;
}
.xero-import-item-checkbox {
  width: auto !important;
  min-height: auto !important;
  margin: 0 !important;
  flex-shrink: 0;
}
.xero-import-item-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: .55rem;
  background: #e8f4fb;
  color: #0b6480;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  flex-shrink: 0;
}
.xero-import-item.is-imported .xero-import-item-avatar {
  background: #eef2f6;
  color: #64748b;
}
.xero-import-item-body {
  display: flex;
  flex-direction: column;
  gap: .12rem;
  min-width: 0;
  flex: 1;
}
.xero-import-item-top {
  display: flex;
  align-items: center;
  gap: .45rem;
  min-width: 0;
}
.xero-import-item-name {
  font-weight: 600;
  color: var(--text);
  overflow-wrap: anywhere;
}
.xero-import-item-meta {
  font-size: .82rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.xero-import-item-meta--empty {
  font-style: italic;
  opacity: .85;
}
.xero-import-item-tag {
  display: inline-flex;
  flex-shrink: 0;
  padding: .12rem .45rem;
  border-radius: 999px;
  font-size: .66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: #e8f4ec;
  color: #166534;
}
.xero-import-item-tag--customer {
  background: #eef2f6;
  color: #64748b;
}
.xero-import-no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: 2rem 1rem;
  text-align: center;
}
.xero-import-no-results-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
}
.xero-import-no-results-icon svg { width: 1.2rem; height: 1.2rem; }
.xero-import-no-results-title {
  margin: .35rem 0 0;
  font-size: .92rem;
  font-weight: 700;
  color: var(--text);
}
.xero-import-no-results-text {
  margin: 0;
  font-size: .82rem;
  color: var(--muted);
}
.xero-import-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: .15rem;
  padding-top: .85rem;
  border-top: 1px solid var(--line);
}
.xero-import-selection {
  margin: 0;
  font-size: .84rem;
  color: var(--muted);
}
.xero-import-selection.has-selection {
  color: var(--text);
  font-weight: 600;
}
.xero-import-footer-actions {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-left: auto;
}
.xero-import-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: .5rem 0 0;
}
.xero-import-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  margin-bottom: .85rem;
}
.xero-import-empty-icon svg { width: 1.45rem; height: 1.45rem; }
.xero-import-empty-title {
  margin: 0 0 .35rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}
.xero-import-empty-text {
  margin: 0;
  max-width: 24rem;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--muted);
}
.xero-import-empty-actions {
  margin-top: 1.25rem;
  width: 100%;
  justify-content: center;
}
@media (max-width: 599px) {
  .xero-import-footer {
    flex-direction: column;
    align-items: stretch;
  }
  .xero-import-footer-actions {
    margin-left: 0;
    width: 100%;
    flex-direction: column-reverse;
  }
  .xero-import-footer-actions .btn { width: 100%; }
}
body.invoice-standalone .content {
  max-width: 36rem;
  margin: 0 auto;
}
.comment-meta {
  font-size: .8rem;
  color: var(--muted);
  margin-bottom: .5rem;
  display: flex;
  gap: .6rem;
  align-items: center;
  flex-wrap: wrap;
  min-width: 0;
}
.comment-meta strong { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.comment-meta time { margin-left: auto; flex-shrink: 0; }
@media (max-width: 767px) {
  .comment-meta time {
    flex-basis: 100%;
    margin-left: 0;
    margin-top: .15rem;
  }
}
.activity-log { list-style: none; padding: 0; margin: 0; font-size: .88rem; }
.activity-log li { padding: .65rem 0; border-bottom: 1px solid var(--line); color: #475569; }
.activity-log time { color: var(--muted); font-size: .78rem; display: inline-block; margin-right: .5rem; }

.attachments-panel { display: flex; flex-direction: column; gap: 1rem; }
.attachment-gallery-label {
  margin: 0 0 .5rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.attachment-empty {
  margin: 0;
  color: var(--muted);
  font-size: .9rem;
}
.attachment-item {
  position: relative;
  aspect-ratio: 1;
}
.attachment-delete-btn {
  position: absolute;
  top: .35rem;
  right: .35rem;
  z-index: 2;
  width: 1.65rem;
  height: 1.65rem;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(15, 30, 54, .72);
  color: #fff;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.attachment-delete-btn:hover {
  background: var(--danger, #c0392b);
}
.attachment-file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.attachment-file-item .attachment-file-link {
  flex: 1;
  min-width: 0;
}
.attachment-delete-btn-inline { flex-shrink: 0; }
.attachment-thumb-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .55rem;
}
.attachment-thumb {
  appearance: none;
  display: block;
  width: 100%;
  height: 100%;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  padding: 0;
  background: #eef2f7;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.attachment-thumb:hover {
  border-color: rgba(106, 155, 200, .45);
  transform: translateY(-1px);
}
.attachment-thumb.is-active {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(106, 155, 200, .18);
}
.attachment-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.attachment-lightbox-open { overflow: hidden; }
.attachment-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: clamp(.5rem, 2vw, 1rem);
  width: 100%;
  max-width: 100vw;
  overflow: hidden;
}
.attachment-lightbox[hidden] { display: none; }
.attachment-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .72);
}
.attachment-lightbox-panel {
  position: relative;
  width: min(980px, 100%);
  height: min(90dvh, 820px);
  max-height: calc(100dvh - 1rem);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .35);
}
.attachment-lightbox-close {
  position: absolute;
  top: .75rem;
  right: .75rem;
  z-index: 1;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  background: rgba(15, 23, 42, .72);
  color: #fff;
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
}
.attachment-lightbox-image-wrap {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .5rem;
  background: #0f172a;
}
.attachment-lightbox-image-wrap img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
.attachment-lightbox-footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .85rem;
  padding: .85rem 1rem;
  border-top: 1px solid var(--line);
}
.attachment-preview-name {
  margin: 0;
  font-size: .84rem;
  color: var(--muted);
  word-break: break-word;
}
.attachment-download-link { flex: 0 0 auto; }
.attachment-file-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.attachment-file-link {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem .65rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: inherit;
  text-decoration: none;
  font-size: .88rem;
  transition: border-color .15s, background-color .15s;
}
.attachment-file-link:hover {
  border-color: var(--primary);
  background: #f8fbff;
}
.attachment-file-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.attachment-upload-form { margin-top: .25rem; }
.attachment-upload-label span {
  display: block;
  margin-bottom: .35rem;
  font-size: .84rem;
  color: var(--muted);
}
@media (min-width: 768px) {
  .job-layout-sidebar .attachment-thumb-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .attachment-thumb-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .attachment-lightbox {
    align-items: stretch;
    padding: .5rem;
  }
  .attachment-lightbox-panel {
    width: 100%;
    height: calc(100dvh - 1rem);
    max-height: calc(100dvh - 1rem);
    border-radius: var(--radius-sm);
  }
  .attachment-lightbox-close {
    top: .5rem;
    right: .5rem;
  }
  .attachment-lightbox-footer {
    align-items: stretch;
    flex-direction: column;
    padding: .75rem;
  }
}

.grid-2 { display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .grid-2 { grid-template-columns: 1fr 1fr; } }

.staff-form-layout {
  display: grid;
  gap: 1.25rem;
  align-items: start;
}
.staff-form-main .form-actions.sticky-actions {
  margin-top: 0;
}
.staff-delete-form {
  margin-left: auto;
}
@media (max-width: 639px) {
  .staff-delete-form {
    margin-left: 0;
    width: 100%;
  }
  .staff-delete-form .btn {
    width: 100%;
  }
}
.staff-form-main { min-width: 0; }
.staff-form-side {
  min-width: 0;
}
.staff-form-side-placeholder .staff-licenses-section {
  background: var(--surface-muted);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 0;
}
.staff-licenses-section {
  margin-bottom: 0;
}
.staff-licenses-section h2 {
  font-size: 1rem;
  margin-bottom: .5rem;
}
.staff-licenses-section h3 {
  font-size: .95rem;
  margin: 1.25rem 0 .75rem;
}
.staff-licenses-section .panel-note {
  margin-bottom: .75rem;
}
.staff-licenses-table-wrap {
  margin-bottom: .5rem;
}
.staff-form-side .data-table {
  font-size: .86rem;
}
.staff-form-side .data-table th,
.staff-form-side .data-table td {
  padding: .5rem .65rem;
}
.staff-form-side .license-add-form,
.staff-form-side .license-inline-form {
  grid-template-columns: 1fr;
}
.staff-form-side .inline-edit-details {
  position: relative;
}
.staff-form-side .inline-edit-details[open] > form,
.staff-form-side .inline-edit-details[open] > .inline-delete-form {
  margin-top: .75rem;
  padding: .75rem;
  background: var(--surface-muted);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.license-number-muted {
  display: block;
  font-size: .78rem;
  color: var(--muted);
  margin-top: .15rem;
}
@media (max-width: 899px) {
  .staff-licenses-section .data-table td .badge {
    justify-self: start;
  }
}
@media (min-width: 1024px) {
  .staff-form-layout {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 1.5rem;
  }
  .staff-form-side {
    border-left: 1px solid var(--line);
    padding-left: 1.5rem;
  }
  .app-modal-container:has(.user-form),
  .app-modal-container:has(.customer-form),
  .app-modal-container:has(.site-form),
  .app-modal-container:has(.staff-create-form),
  .app-modal-container:has(.staff-edit-form) {
    max-width: 800px;
  }
  .app-modal-container:has(.staff-licenses-form) {
    max-width: 720px;
  }
  .app-modal-container:has(.field-report-modal) {
    max-width: 760px;
  }
  .app-modal-container:has(.invoice-modal) {
    max-width: 520px;
  }
  .app-modal-container:has(.quote-modal) {
    max-width: min(1180px, calc(100vw - 3rem));
  }
  .app-modal-container:has(.xero-import-form) {
    max-width: 640px;
  }
  .app-modal-container:has(.tenant-form) {
    max-width: min(1080px, calc(100vw - 3rem));
  }
  .app-submodal-container:has(.xero-invoice-preview-wrap) {
    max-width: 560px;
  }
  .app-modal-container:has(.accounts-api-invoice-preview) {
    max-width: min(680px, calc(100vw - 3rem));
  }
  .app-modal:has(.quote-modal) .app-submodal-container {
    max-width: min(720px, calc(100vw - 3rem));
  }
}

.input-prefix-wrap {
  display: flex;
  align-items: center;
  gap: .1rem;
  margin-top: .25rem;
  padding-left: .75rem;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.input-prefix-wrap:hover {
  border-color: var(--border-strong);
  background: var(--surface-muted);
}
.input-prefix-wrap:focus-within {
  border-color: var(--primary);
  background: var(--input-bg-focus);
  box-shadow: 0 0 0 3px rgba(106, 155, 200, .18);
}
.input-prefix {
  color: var(--muted);
  font-size: .9rem;
  font-weight: 600;
  flex-shrink: 0;
}
.form .input-prefix-field {
  width: 100%;
  min-width: 0;
  margin-top: 0;
  border: 0;
  background: transparent;
  padding-left: .15rem;
}
.form .input-prefix-field:hover {
  border: 0;
}
.form .input-prefix-field:focus {
  outline: none;
  box-shadow: none;
  background: transparent;
}
.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;
}

.section { margin-bottom: 2rem; }
.section h2 { font-size: 1.1rem; margin: 0 0 1rem; }
.licenses-section-desc {
  margin: -.35rem 0 1rem;
  font-size: .88rem;
  line-height: 1.45;
}
.licenses-page .licenses-section {
  scroll-margin-top: calc(var(--topbar-h) + 4.5rem);
}
.licenses-page .licenses-section[hidden] {
  display: none !important;
}
.licenses-page .licenses-section.is-active {
  animation: settings-section-in .2s ease-out;
}
.licenses-page .licenses-expiring-section {
  margin-bottom: 1.25rem;
}
.licenses-page .licenses-section .settings-section-head {
  margin-bottom: 1rem;
}
.licenses-page .licenses-section .filters-form {
  margin-bottom: 1rem;
}
.card-form { background: var(--card); padding: 1.25rem; border-radius: var(--radius); margin-bottom: 1.5rem; box-shadow: var(--shadow-sm); border: 1px solid var(--border-strong); }
.card-form h2 { font-size: 1rem; margin: 0 0 .9rem; font-weight: 700; color: var(--navy); }
.empty { color: var(--muted); padding: 2rem; text-align: center; background: var(--card); border-radius: var(--radius); border: 1px dashed var(--line); }
.list-plain { list-style: none; padding: 0; margin: 0; }
.list-plain li { padding: .4rem 0; }
.inline-form-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.inline-form-row select {
  flex: 1; min-height: 38px; padding: .45rem .7rem;
  border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm);
  font-size: .9rem; background-color: var(--input-bg); color: var(--text); font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  background-image: none;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.inline-form-row select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(106,155,200,.18); background-color: var(--input-bg-focus); }
.action-bar { display: flex; flex-wrap: wrap; gap: .75rem; }
.job-header-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .6rem;
  margin-bottom: .25rem;
}
.job-number-lg { font-size: .85rem; color: var(--muted); font-weight: 600; }

@media (min-width: 480px) { .profile-info { display: flex; } }

/* ============ CONFIRM MODALS ============ */
.confirm-modal[hidden] { display: none !important; }
.confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.confirm-modal.is-open { display: flex; }
.confirm-modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--modal-backdrop);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.confirm-modal-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  background: var(--card);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
  animation: app-modal-in .2s ease;
}
.confirm-modal-title {
  margin: 0 0 .65rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy);
}
.confirm-modal-message {
  margin: 0 0 1.25rem;
  font-size: .92rem;
  color: var(--muted);
  line-height: 1.5;
}
.confirm-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  justify-content: flex-end;
}

.wave-business-picker-list {
  display: grid;
  gap: .65rem;
  margin: 1rem 0 1.25rem;
}

.wave-business-picker-option {
  display: grid;
  gap: .2rem;
  width: 100%;
  padding: .85rem .95rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.wave-business-picker-option:hover,
.wave-business-picker-option:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
  outline: none;
}

.wave-business-picker-option__name {
  font-weight: 700;
}

.wave-business-picker-option__id {
  overflow-wrap: anywhere;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .82rem;
}

.field-report-modal .onsite-visit-add {
  min-height: 32px;
  padding: .25rem .65rem;
}

/* Field report: mobile fullscreen modal + standalone page */
@media (max-width: 1023px) {
  .app-modal[hidden] { display: none !important; }
  .app-modal.is-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    background: var(--card);
  }
  .app-modal.is-fullscreen.is-open { display: flex; }
  .app-modal.is-fullscreen .app-modal-backdrop { display: none; }
  .app-modal.is-fullscreen .app-modal-container {
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--card);
  }
  .app-modal.is-fullscreen .app-modal-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-radius: 0;
    border: none;
    box-shadow: none;
    background: var(--card);
  }
  .app-modal.is-fullscreen .app-modal-header {
    display: none;
  }
  .app-modal.is-fullscreen .app-modal-body {
    flex: 1;
    overflow-y: auto;
    max-height: none;
    -webkit-overflow-scrolling: touch;
    padding: max(1rem, env(safe-area-inset-top)) 1rem max(1.25rem, env(safe-area-inset-bottom));
    background: var(--card);
  }
  body.app-modal-open { overflow: hidden; }
  body.app-modal-open .confirm-modal { z-index: 250; }

  .app-submodal[hidden] { display: none !important; }
  .app-submodal.is-open {
    position: fixed;
    inset: 0;
    z-index: 210;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    background: var(--card);
  }
  .app-submodal.is-open .app-modal-backdrop { display: none; }
  .app-submodal.is-open .app-submodal-container {
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--card);
  }
  .app-submodal.is-open .app-modal-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-radius: 0;
    border: none;
    box-shadow: none;
    background: var(--card);
  }
  .app-submodal.is-open .app-modal-body {
    flex: 1;
    overflow-y: auto;
    max-height: none;
    -webkit-overflow-scrolling: touch;
    padding: max(1rem, env(safe-area-inset-top)) 1rem max(1.25rem, env(safe-area-inset-bottom));
    background: var(--card);
  }

  body.field-report-standalone .content {
    margin: 0;
    padding: 0;
    max-width: none;
  }
  body.field-report-standalone .field-report-page {
    min-height: calc(100dvh - var(--topbar-h));
    display: flex;
    flex-direction: column;
    padding: 1rem 1rem max(1.25rem, env(safe-area-inset-bottom));
  }
  body.field-report-standalone .field-report-form {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  body.field-report-standalone .field-report-form .form-actions {
    margin-top: auto;
    padding-top: 1rem;
  }

  body.approve-queue-standalone .content {
    margin: 0;
    padding: 0;
    max-width: none;
  }
  body.approve-queue-standalone .approve-queue-page {
    min-height: calc(100dvh - var(--topbar-h));
    display: flex;
    flex-direction: column;
    padding: 1rem 1rem max(1.25rem, env(safe-area-inset-bottom));
  }
  body.approve-queue-standalone .approve-queue-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  body.approve-queue-standalone .approve-queue-form .form-actions {
    margin-top: auto;
    padding-top: 1rem;
  }
}

/* ============ APP MODAL (desktop) ============ */
@media (min-width: 1024px) {
  body.job-form-standalone .content {
    position: fixed;
    left: var(--sidebar-w);
    top: var(--topbar-h);
    right: 0;
    bottom: 0;
    z-index: 70;
    margin: 0;
    padding: 1.5rem;
    background: rgba(15, 30, 54, .42);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
  }
  body.job-form-standalone .job-form-page {
    width: 100%;
    max-width: 720px;
    background: var(--card);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem 1.5rem;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--line);
    margin: auto 0;
  }
  body.job-form-standalone .sticky-actions {
    position: static;
    background: none;
    padding-bottom: 0;
  }

  .app-modal[hidden] { display: none !important; }
  .app-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 1.5rem;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .app-modal.is-open { display: flex; }
  .app-modal-backdrop {
    position: fixed;
    inset: 0;
    background: var(--modal-backdrop);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
  .app-modal-container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 720px;
    min-width: 0;
    margin: auto 0;
    animation: app-modal-in .2s ease;
  }
  @keyframes app-modal-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .app-modal-panel {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--line);
    overflow: hidden;
  }
  .app-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-strong);
    background: var(--modal-header-bg);
  }
  .app-modal-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
  }
  .app-modal-close-btn {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    color: var(--muted);
    cursor: pointer;
    flex-shrink: 0;
  }
  .app-modal-close-btn:hover { background: var(--surface-hover); color: var(--text); }
  .app-modal-close-btn svg { width: 20px; height: 20px; }
  .app-modal-body {
    padding: 1.25rem 1.5rem 1.5rem;
    max-height: calc(100vh - var(--topbar-h) - 5rem);
    overflow-x: hidden;
    overflow-y: auto;
  }
  .app-modal-body:has(.tenant-form) {
    overflow-x: clip;
  }
  .app-modal-body .sticky-actions {
    position: static;
    background: none;
    padding-bottom: 0;
  }
  body.app-modal-open { overflow: hidden; }
  body.app-modal-open .confirm-modal { z-index: 250; }

  .app-submodal {
    z-index: 90;
  }
  .app-submodal-container {
    max-width: 520px;
  }
  .app-modal.has-submodal .app-modal-container {
    filter: brightness(0.96);
  }
  .staff-license-add-wrap {
    margin-top: 1rem;
  }
  .staff-license-delete-form {
    margin-top: .75rem;
  }
  .modal-toast {
    margin: 0 0 1rem;
    padding: .75rem 1rem;
    border-radius: var(--radius-sm);
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
    font-size: .9rem;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .2s ease, transform .2s ease;
  }
  .modal-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  .form-error {
    color: var(--danger, #b42318);
    font-size: .88rem;
    margin: 0;
  }
}

.text-muted-sm { font-size: .78rem; color: var(--muted); font-weight: 500; }
.text-muted { color: var(--muted); }

/* ============ LIST TOOLBAR & PAGINATION ============ */
.list-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1rem;
  margin-bottom: .75rem;
}
.list-toolbar-bottom { margin-top: 1rem; margin-bottom: 0; }
.list-summary {
  margin: 0;
  font-size: .85rem;
  color: var(--muted);
  font-weight: 500;
}
.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1rem;
  margin-left: auto;
}
.list-toolbar-bottom .pagination { margin-left: auto; }
.pagination-per-page {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .85rem;
  color: var(--muted);
}
.pagination-per-page select {
  min-height: 34px;
  padding: .35rem .55rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  font: inherit;
  color: var(--text);
}
.pagination-pages {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}
.pagination-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 .55rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text);
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
}
.pagination-btn:hover { background: var(--surface-muted); text-decoration: none; border-color: var(--border-strong); }
.pagination-btn.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.pagination-btn.is-disabled {
  opacity: .45;
  cursor: default;
}
.pagination-ellipsis {
  min-width: 24px;
  text-align: center;
  color: var(--muted);
  font-size: .85rem;
}

/* ============ INBOUND EMAILS ============ */
.page-header-actions .page-header-main { flex: 1; min-width: 0; }
.page-lead { margin: .35rem 0 0; font-size: .92rem; }
.inbound-action-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1rem;
}
.inbound-action-pills .status-pill { text-decoration: none; }
.inbound-action-pills .status-pill:hover { text-decoration: none; }
.inbound-pill-new_job.is-active { border-color: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }
.inbound-pill-add_to_job.is-active { border-color: var(--primary); box-shadow: 0 0 0 3px var(--info-soft); }
.inbound-pill-ignore.is-active { border-color: var(--border-strong); box-shadow: 0 0 0 3px var(--neutral-soft); }
.inbound-pill-needs_review.is-active { border-color: var(--warning); box-shadow: 0 0 0 3px var(--warning-soft); }
.inbound-pill-failed.is-active { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }

.inbound-action-new-job { background: var(--success-soft); color: var(--success); }
.inbound-action-add { background: var(--info-soft); color: var(--primary); }
.inbound-action-ignore { background: var(--neutral-soft); color: var(--muted); }
.inbound-action-review { background: var(--warning-soft); color: var(--warning); }
.inbound-action-failed { background: var(--danger-soft); color: var(--danger); }

.supplier-invoice-pending,
.supplier-invoice-pending.badge { background: var(--warning-soft); color: var(--warning); }
.supplier-invoice-submitted,
.supplier-invoice-submitted.badge { background: var(--success-soft); color: var(--success); }
.supplier-invoice-review,
.supplier-invoice-review.badge { background: var(--purple-soft); color: var(--purple); }
.supplier-invoice-ignored,
.supplier-invoice-ignored.badge { background: var(--neutral-soft); color: var(--muted); }
.supplier-invoice-failed,
.supplier-invoice-failed.badge { background: var(--danger-soft); color: var(--danger); }

.price-book-import-processing,
.price-book-import-processing.badge { background: var(--info-soft); color: var(--primary); }
.price-book-import-completed,
.price-book-import-completed.badge { background: var(--success-soft); color: var(--success); }
.price-book-import-failed,
.price-book-import-failed.badge { background: var(--danger-soft); color: var(--danger); }

.price-book-settings-block {
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}
.price-book-settings-block__label {
  display: block;
  max-width: 20rem;
  font-weight: 600;
}
.price-book-settings-block__label select { margin-top: .35rem; }
.price-book-settings-panel {
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--card) 96%, var(--bg));
}
.price-book-settings-panel__head { margin-bottom: .75rem; }
.price-book-settings-panel__head--split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.price-book-settings-panel__head--split .settings-panel-title {
  margin: 0;
  flex: 1;
  min-width: 0;
}
.price-book-settings-panel .settings-panel-title { margin: 0 0 .25rem; }
.price-book-settings-panel .settings-panel-lead { margin: 0; }
.price-book-settings-panel--accounts { margin-bottom: 1rem; }
.price-book-accounts-sync {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .65rem .85rem;
}
.price-book-accounts-sync__meta { font-size: .86rem; }
.price-book-accounts-sync__hint {
  flex: 1 1 100%;
  margin: 0;
}
.price-book-active-list {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  overflow: hidden;
}
.price-book-active-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .65rem .85rem;
  border-bottom: 1px solid var(--line);
}
.price-book-active-item:last-child {
  border-bottom: none;
}
.price-book-active-item__info {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  min-width: 0;
  flex: 1;
}
.price-book-active-item__name {
  font-weight: 600;
  font-size: .92rem;
  line-height: 1.3;
}
.price-book-active-item__meta {
  font-size: .8rem;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.price-book-active-item__meta-sep {
  margin: 0 .2rem;
}
.price-book-active-item__actions {
  flex-shrink: 0;
}
.price-book-active-item__upload {
  margin: 0;
}
.price-book-active-item__actions .btn-sm {
  white-space: nowrap;
}
.price-book-active-empty {
  margin: .75rem 0 0;
  font-size: .88rem;
}
.price-book-supplier-combobox { margin-top: .5rem; }
.price-book-supplier-search-input {
  width: 100%;
  padding: .55rem .75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: .95rem;
}
.price-book-file-field {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  font-size: .85rem;
}
.price-book-file-field__label { font-weight: 600; color: var(--muted); }
.price-book-file-field input[type="file"] { font-size: .82rem; }

.price-book-recent-imports {
  margin-top: 1.5rem;
}
.price-book-custom-modal__panel {
  max-width: 480px;
}
.price-book-custom-modal .settings-notice {
  margin: 0 0 1rem;
}
.price-book-custom-supplier-form {
  display: grid;
  gap: .85rem;
  margin-bottom: 1.25rem;
}
.price-book-custom-supplier-form__field {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--muted);
}
.price-book-custom-supplier-form__field input[type="text"],
.price-book-custom-supplier-form__field input[type="file"] {
  font-weight: 400;
  color: var(--text);
}

.price-book-supplier-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1rem;
}
.price-book-supplier-pills .status-pill { text-decoration: none; }
.price-book-supplier-pills .status-pill:hover { text-decoration: none; }

.price-books-table .num { text-align: right; white-space: nowrap; }
.price-book-import-date { white-space: nowrap; font-size: .88rem; color: var(--muted); }
.price-book-sku { display: block; font-weight: 600; font-variant-numeric: tabular-nums; }
.price-book-sku-alt { display: block; font-size: .8rem; margin-top: .15rem; }
.price-book-desc { display: block; line-height: 1.35; max-width: 36rem; }
.price-book-manufacturer { display: block; font-size: .82rem; margin-top: .2rem; }
.price-book-category { font-size: .88rem; color: var(--muted); max-width: 14rem; }
.price-books-result-summary { margin: 0 0 .65rem; font-size: .88rem; }
.price-books-empty { text-align: center; padding: 2.5rem 1rem; }
.price-books-empty .btn { margin-top: 1rem; }
.page-header-actions-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}
.price-books-accounts-hint {
  margin: 0 0 1rem;
  font-size: .9rem;
}
.price-books-actions-col {
  width: 6.5rem;
  white-space: nowrap;
}
.price-book-row--pending-sync {
  background: color-mix(in srgb, var(--warning-soft) 35%, transparent);
}
.price-book-pending-badge {
  display: inline-flex;
  margin-top: .35rem;
  background: var(--warning-soft);
  color: var(--warning);
}
.price-book-edit-modal__panel {
  max-width: 34rem;
}
.price-book-edit-form .confirm-modal-actions {
  margin-top: .25rem;
}
.settings-notice--warn {
  border-left: 3px solid var(--warning);
  padding-left: .85rem;
}
.inbound-from-name { font-weight: 600; }
.inbound-subject { font-weight: 600; line-height: 1.35; }
a.inbound-subject-link {
  color: inherit;
  text-decoration: none;
}
a.inbound-subject-link:hover {
  color: var(--primary);
  text-decoration: underline;
}
.inbound-email-action-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: .4rem;
}
.inbound-email-view-meta {
  display: grid;
  gap: .65rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}
.inbound-email-view-meta-row {
  display: grid;
  grid-template-columns: minmax(5.5rem, 7rem) 1fr;
  gap: .5rem 1rem;
  align-items: baseline;
  font-size: .9rem;
}
.inbound-email-view-label {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}
.inbound-email-view-note {
  margin-bottom: 1rem;
  padding: .75rem 1rem;
  border-radius: var(--radius-sm);
  font-size: .88rem;
  line-height: 1.5;
  background: var(--surface-muted);
}
.inbound-email-view-note.inbound-note-needs_review { background: var(--warning-soft); }
.inbound-email-view-note.inbound-note-failed { background: var(--danger-soft); }
.inbound-email-view-body { margin-bottom: 1rem; }
.inbound-email-view-text {
  margin: 0;
  padding: 1rem;
  background: var(--input-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: .88rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}
.inbound-email-view-truncated { margin: .5rem 0 0; }
.inbound-email-view-actions { margin-top: 1.25rem; }
.inbound-email-card-meta { display: none; }
.inbound-email-card-head .inbound-email-badge { display: none; }
.inbound-preview {
  margin-top: .35rem;
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.table-note td {
  padding: .65rem 1rem .85rem;
  font-size: .84rem;
  color: var(--muted);
  background: var(--surface-muted);
  border-bottom: 1px solid var(--line);
}
.inbound-email-note td { border-top: none; }
.inbound-note-label {
  display: inline-block;
  margin-right: .45rem;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}
.inbound-note-ignore td { background: var(--surface-muted); }
.inbound-note-needs_review td { background: var(--warning-soft); }
.inbound-note-failed td { background: var(--danger-soft); }

.inbound-prefill-notice {
  margin: 0 0 1rem;
  padding: .75rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--info-soft);
  border: 1px solid var(--border-strong);
  color: var(--text);
  font-size: .88rem;
  line-height: 1.5;
}
.inbound-prefill-notice strong { font-weight: 600; }

.btn-sm {
  min-height: 32px;
  padding: .35rem .75rem;
  font-size: .8rem;
}
.inbound-email-table td.table-actions {
  vertical-align: middle;
}
.inbound-email-table td.table-actions:empty { display: none; }
.inbound-email-action-btn {
  min-height: 32px;
  padding: .35rem .85rem;
  font-size: .8rem;
}

@media (max-width: 899px) {
  .inbound-action-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: .4rem;
    margin-bottom: .85rem;
    padding-bottom: .15rem;
  }
  .inbound-action-pills::-webkit-scrollbar { display: none; }
  .inbound-action-pills .status-pill {
    flex-shrink: 0;
    white-space: nowrap;
  }

  .inbound-email-table td.inbound-email-col-desktop { display: none !important; }

  .inbound-email-table td.inbound-email-primary {
    display: block;
    padding: 1rem 1.05rem .85rem;
    background: var(--surface-muted);
    border-bottom: 1px solid var(--line);
    font-size: inherit;
    font-weight: inherit;
  }
  .inbound-email-table td.inbound-email-primary::before { display: none; }

  .inbound-email-card-head .inbound-email-badge {
    display: inline-flex;
    margin-bottom: .5rem;
  }
  .inbound-email-card-meta {
    display: block;
    margin-top: .55rem;
  }
  .inbound-email-meta-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem .5rem;
    font-size: .84rem;
    color: var(--muted);
    line-height: 1.4;
  }
  .inbound-email-meta-line + .inbound-email-meta-line { margin-top: .35rem; }
  .inbound-meta-from {
    font-weight: 600;
    color: var(--text);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }
  .inbound-meta-time::before {
    content: '·';
    margin-right: .35rem;
    color: var(--border-strong);
    font-weight: 400;
  }
  .inbound-email-meta-secondary {
    font-size: .82rem;
  }
  .inbound-meta-job {
    font-weight: 600;
    text-decoration: none;
  }
  .inbound-meta-job:hover { text-decoration: underline; }
  .inbound-meta-customer::before {
    content: '·';
    margin: 0 .35rem;
    color: var(--border-strong);
  }
  .inbound-email-table .inbound-preview {
    margin-top: .65rem;
    -webkit-line-clamp: 3;
  }

  .inbound-email-table tbody tr.inbound-email-row {
    margin-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .inbound-email-table tbody tr.inbound-email-row:not(.inbound-email-row--has-note) {
    margin-bottom: .75rem;
    border-radius: var(--dashboard-card-radius);
  }
  .inbound-email-table tbody tr.inbound-email-row--actionable {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-sm);
  }

  .inbound-email-table td.inbound-email-actions.inbound-email-actions--desktop-only {
    display: none !important;
  }

  .inbound-email-table td.inbound-email-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    max-width: none;
    white-space: normal;
    padding: .7rem 1.05rem;
    background: var(--card-footer-bg);
    border-top: 1px solid var(--line);
  }
  .inbound-email-table td.inbound-email-actions .inbound-email-action-group {
    width: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .4rem;
  }
  .inbound-email-table td.inbound-email-actions .inbound-email-action-btn {
    flex: 0 0 auto;
    min-height: 40px;
    padding: .5rem .75rem;
    font-size: .82rem;
    font-weight: 600;
    justify-content: center;
    text-align: center;
  }

  .inbound-email-table tbody tr.inbound-email-note {
    margin-top: -.5rem;
    margin-bottom: .75rem;
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
    background: var(--surface-muted);
    box-shadow: var(--shadow-sm);
  }
  .inbound-email-table tbody tr.inbound-email-note td {
    display: block;
    padding: .75rem 1rem;
    border-bottom: none;
  }
  .inbound-email-table tbody tr.inbound-email-note td::before { display: none; }
}

@media (max-width: 768px) {
  .list-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .pagination {
    margin-left: 0;
    justify-content: space-between;
  }
}

/* ============ TENANT SETTINGS ============ */
.settings-quick-links {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  flex-shrink: 0;
}
.profile-page .profile-section {
  scroll-margin-top: calc(var(--topbar-h) + 4.5rem);
}
.profile-page .profile-section[hidden] {
  display: none !important;
}
.profile-page .profile-section.is-active {
  animation: settings-section-in .2s ease-out;
}
.profile-page .profile-form .modal-form-actions {
  margin-top: 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.profile-license-panel {
  padding-top: .25rem;
}
.profile-license-panel .form-section-title {
  margin: 0 0 1rem;
}
.profile-license-delete-form {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.profile-licenses-table-wrap {
  margin-top: .25rem;
}
.page-lead {
  margin: .35rem 0 0;
  font-size: .9rem;
  line-height: 1.5;
  max-width: 42rem;
}
.settings-nav {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin: -0.5rem 0 1.25rem;
  padding: .75rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: calc(var(--topbar-h) + .5rem);
  z-index: 40;
}
.settings-nav-bar {
  display: flex;
  align-items: stretch;
  gap: .5rem;
  width: 100%;
}
.settings-nav-current {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 36px;
  display: flex;
  align-items: center;
  padding: .42rem .7rem;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  font-size: .88rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
}
.settings-nav-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  min-height: 36px;
  padding: 0;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  color: var(--muted);
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.settings-nav-toggle:hover,
.settings-nav-toggle:focus-visible {
  outline: none;
  border-color: var(--primary);
  background: var(--input-bg-focus);
  color: var(--text);
  box-shadow: 0 0 0 3px var(--accent-focus-ring);
}
.settings-nav-chevron {
  width: 18px;
  height: 18px;
  transition: transform .2s ease;
}
.settings-nav.is-expanded .settings-nav-chevron {
  transform: rotate(180deg);
}
.settings-nav-options {
  display: none;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: 100%;
  margin-top: .5rem;
  padding-top: .5rem;
  border-top: 1px solid var(--line);
}
.settings-nav.is-expanded .settings-nav-options {
  display: flex;
}
.settings-nav-main,
.settings-nav-end {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}
.settings-nav-end {
  margin-top: .35rem;
  padding-top: .35rem;
  border-top: 1px solid var(--line);
}
.settings-nav a {
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;
  padding: .65rem .7rem;
  border-radius: var(--radius-sm);
  font-size: .88rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  transition: color .15s ease, background .15s ease;
}
.settings-nav a:hover {
  color: var(--text);
  text-decoration: none;
  background: var(--surface-muted);
}
.settings-nav a.is-active {
  color: var(--primary);
  background: var(--info-soft);
}
@media (min-width: 900px) {
  .settings-nav {
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0 .35rem;
  }
  .settings-nav-bar {
    display: none;
  }
  .settings-nav-options {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }
  .settings-nav-toggle {
    display: none;
  }
  .settings-nav-main,
  .settings-nav-end {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    width: auto;
  }
  .settings-nav-main {
    flex: 1;
    min-width: 0;
  }
  .settings-nav-end {
    margin-left: auto;
    margin-top: 0;
    padding-top: 0;
    flex-shrink: 0;
    border-top: none;
    border-left: 1px solid var(--line);
  }
  .settings-nav-end a {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .settings-nav a {
    display: inline-flex;
    width: auto;
    padding: .7rem .85rem .65rem;
    border-radius: 0;
    font-size: .82rem;
    background: transparent;
  }
  .settings-nav a::after {
    content: '';
    position: absolute;
    left: .85rem;
    right: .85rem;
    bottom: .45rem;
    height: 2px;
    border-radius: 1px;
    background: var(--primary);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .18s ease;
  }
  .settings-nav a:hover {
    background: transparent;
  }
  .settings-nav a.is-active {
    background: transparent;
  }
  .settings-nav a.is-active::after {
    transform: scaleX(1);
  }
}
.settings-form .settings-section {
  scroll-margin-top: calc(var(--topbar-h) + 4.5rem);
}
.settings-form .settings-section[hidden] {
  display: none !important;
}
.settings-form .settings-section.is-active {
  animation: settings-section-in .2s ease-out;
}
@keyframes settings-section-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .settings-form .settings-section.is-active {
    animation: none;
  }
  .settings-nav a::after {
    transition: none;
  }
}
.settings-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
}
.settings-section-head h2 { margin: 0; }
.settings-section-lead {
  margin: .35rem 0 0;
  font-size: .88rem;
  color: var(--muted);
  font-weight: 500;
  line-height: 1.5;
  max-width: 42rem;
}
.settings-section-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}
.settings-test-status {
  margin: 0 0 1rem;
  padding: .65rem .85rem;
  border-radius: var(--radius-sm);
  font-size: .86rem;
  line-height: 1.45;
}
.settings-test-status.is-success {
  background: var(--success-soft);
  border: 1px solid color-mix(in srgb, var(--success) 35%, transparent);
  color: var(--success);
}
.settings-test-status.is-error {
  background: var(--danger-soft);
  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
  color: var(--danger);
}
.settings-panel {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--line);
}
.settings-panel--company {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.settings-company-head { margin-bottom: 1rem; }
.settings-company-lead {
  margin: 0;
  font-size: .88rem;
  line-height: 1.45;
  color: var(--muted);
  max-width: 36rem;
}
.settings-company-grid {
  display: grid;
  gap: .85rem 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .settings-company-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.settings-company-field {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin: 0;
  font-size: .88rem;
}
.settings-company-field--full { grid-column: 1 / -1; }
.settings-company-field__label {
  font-weight: 600;
  color: var(--navy-600, var(--navy));
}
.settings-company-field input,
.settings-company-field textarea,
.settings-company-field select {
  width: 100%;
  padding: .65rem .75rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  color: var(--text);
  font: inherit;
  line-height: 1.5;
}
.settings-company-field textarea {
  min-height: 72px;
  resize: vertical;
}
.settings-company-field input:focus,
.settings-company-field textarea:focus,
.settings-company-field select:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--input-bg-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
.settings-panel--proposals {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.settings-proposals-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem 1rem;
  margin-bottom: 1.1rem;
}
.settings-proposals-head .settings-panel-title { margin-bottom: .35rem; }
.settings-proposals-lead {
  margin: 0;
  font-size: .88rem;
  line-height: 1.45;
  color: var(--muted);
  max-width: 36rem;
}
.settings-proposals-link { flex-shrink: 0; }
.settings-proposals-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .settings-proposals-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
}
.settings-proposal-card {
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
}
.settings-proposal-card__title {
  margin: 0 0 .35rem;
  font-size: .92rem;
  font-weight: 700;
  color: var(--navy);
}
.settings-proposal-card__desc {
  margin: 0 0 1rem;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--muted);
}
.settings-proposal-field {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin: 0;
  font-size: .88rem;
}
.settings-proposal-field__label {
  font-weight: 600;
  color: var(--navy-600, var(--navy));
}
.settings-proposal-field__hint {
  font-weight: 500;
  color: var(--muted);
  font-size: .78rem;
}
.settings-proposal-field select,
.settings-proposal-field .input-prefix-field,
.settings-proposal-field textarea { margin-top: 0; }
.settings-proposal-field select,
.settings-proposal-field textarea {
  width: 100%;
  padding: .65rem .75rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  color: var(--text);
  font: inherit;
  line-height: 1.5;
}
.settings-proposal-field textarea {
  min-height: 88px;
  resize: vertical;
}
.settings-proposal-field select:focus,
.settings-proposal-field textarea:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--input-bg-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
.settings-proposal-card--copy { margin-top: 1rem; }
.settings-proposal-card--callouts { margin-top: 1rem; }
.settings-proposal-callouts-head,
.settings-proposal-callout-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(7rem, .85fr) 4.5rem 2.625rem;
  gap: .65rem;
  align-items: center;
}
.settings-proposal-callouts-head {
  margin-bottom: .45rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .03em;
}
.settings-proposal-callouts-label--action {
  min-width: 0;
  text-align: center;
}
.settings-proposal-callouts-list {
  list-style: none;
  margin: 0 0 .75rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.settings-proposal-callout-field { margin: 0; }
.settings-proposal-callout-order {
  display: inline-flex;
  align-items: center;
  gap: .1rem;
  justify-self: center;
}
.settings-proposal-callout-order .icon-btn {
  width: 32px;
  height: 32px;
}
.settings-proposal-callout-order .icon-btn svg {
  width: 16px;
  height: 16px;
}
.settings-proposal-callout-order .icon-btn:disabled {
  opacity: .35;
  cursor: default;
}
.settings-proposal-callout-order .icon-btn:disabled:hover {
  background: transparent;
}
.settings-proposal-callout-remove {
  justify-self: center;
}
.settings-proposal-callouts-empty { margin: 0 0 .75rem; }
.settings-proposals-copy-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .settings-proposals-copy-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
}
.settings-proposal-example {
  margin: .75rem 0 0;
  padding: .55rem .7rem;
  border-radius: var(--radius-sm);
  background: var(--info-soft);
  border: 1px solid color-mix(in srgb, var(--primary) 28%, transparent);
  font-size: .78rem;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.settings-proposal-field--mode {
  margin-bottom: .75rem;
  max-width: 100%;
}
.settings-proposal-mode-field {
  margin: 0 0 .65rem;
  padding: .7rem .85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
}
.settings-proposal-mode-field[hidden] { display: none !important; }
.settings-panel[hidden] { display: none !important; }
.settings-panel-title {
  margin: 0 0 .85rem;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--navy-600);
}

.settings-panel--appearance {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.theme-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 10.5rem));
  gap: .85rem;
}

.theme-picker__option {
  position: relative;
  cursor: pointer;
}

.theme-picker__option input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  pointer-events: none;
  min-height: 0;
}

.theme-picker__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  padding: .65rem;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.theme-picker__option input:checked + .theme-picker__card {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--accent-focus-ring);
}

.theme-picker__option input:focus-visible + .theme-picker__card {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.theme-picker__preview {
  display: flex;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, .08);
}

.theme-picker__preview-sidebar {
  width: 28%;
  flex-shrink: 0;
}

.theme-picker__preview-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10%;
  padding: 10% 8%;
}

.theme-picker__preview-bar {
  height: 14%;
  border-radius: 2px;
}

.theme-picker__preview-block {
  flex: 1;
  border-radius: 3px;
  border: 1px solid transparent;
}

.theme-picker__preview--light .theme-picker__preview-sidebar { background: #152238; }
.theme-picker__preview--light .theme-picker__preview-main { background: #dde3eb; }
.theme-picker__preview--light .theme-picker__preview-bar { background: #ffffff; }
.theme-picker__preview--light .theme-picker__preview-block { background: #ffffff; border-color: #b8c4d0; }

.theme-picker__preview--dark .theme-picker__preview-sidebar { background: #1a1a1a; }
.theme-picker__preview--dark .theme-picker__preview-main { background: #1c1c1c; }
.theme-picker__preview--dark .theme-picker__preview-bar { background: #2c2c2c; }
.theme-picker__preview--dark .theme-picker__preview-block { background: #2c2c2c; border-color: #3d3d3d; }

.theme-picker__preview--system {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.theme-picker__preview-split {
  display: flex;
  min-width: 0;
}

.theme-picker__preview-split--light .theme-picker__preview-sidebar { background: #152238; }
.theme-picker__preview-split--light .theme-picker__preview-main { background: #dde3eb; }
.theme-picker__preview-split--light .theme-picker__preview-bar { background: #ffffff; }

.theme-picker__preview-split--dark .theme-picker__preview-sidebar { background: #1a1a1a; }
.theme-picker__preview-split--dark .theme-picker__preview-main { background: #1c1c1c; }
.theme-picker__preview-split--dark .theme-picker__preview-bar { background: #2c2c2c; }

.theme-picker__label {
  font-size: .88rem;
  font-weight: 600;
  color: var(--text);
}

@media (max-width: 520px) {
  .theme-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.start-page-picker {
  margin-top: 1.35rem;
  padding-top: 1.35rem;
  padding-bottom: 1.35rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.start-page-picker__label {
  display: block;
  margin-bottom: .55rem;
  font-size: .88rem;
  font-weight: 600;
  color: var(--text);
}

.start-page-picker__options {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}

.start-page-picker__option {
  position: relative;
  cursor: pointer;
}

.start-page-picker__option input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  pointer-events: none;
  min-height: 0;
}

.start-page-picker__card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 6.75rem;
  padding: .55rem .85rem;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  font-size: .88rem;
  font-weight: 600;
  color: var(--text);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.start-page-picker__option input:checked + .start-page-picker__card {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--accent-focus-ring);
}

.start-page-picker__option input:focus-visible + .start-page-picker__card {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.start-page-picker__hint {
  margin: .55rem 0 0;
  font-size: .82rem;
  color: var(--muted);
}
.settings-email-box {
  margin-top: 1.5rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
}
.settings-email-box__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.settings-email-box__title {
  margin: 0 0 .35rem;
  font-size: .92rem;
  font-weight: 700;
  color: var(--navy);
}
.settings-email-box__lead {
  margin: 0;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--muted);
  max-width: 36rem;
}
.settings-notifications-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 960px) {
  .settings-notifications-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}
.settings-notifications-column {
  min-width: 0;
}
.settings-notifications-column__lead {
  margin: -.35rem 0 1rem;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--muted);
}
.notification-settings-panel {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
  max-width: 100%;
  min-width: 0;
}
.notification-settings-group + .notification-settings-group {
  margin-top: 1rem;
}
.notification-settings-group__title {
  margin: 0 0 .45rem;
  font-size: .76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--navy-600);
}
.notification-settings-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  max-width: 100%;
  min-width: 0;
}
.notification-settings-item {
  margin: 0;
  min-width: 0;
}
.notification-settings-card {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: .45rem .6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  cursor: pointer;
  min-width: 0;
  position: relative;
  transition: border-color .15s ease, background .15s ease;
}
.notification-settings-card:hover {
  border-color: rgba(106, 155, 200, .45);
}
.notification-settings-card:has(.notification-settings-card__checkbox:checked) {
  border-color: rgba(0, 174, 239, .4);
  background: rgba(0, 174, 239, .04);
}
.notification-settings-card__checkbox {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.notification-settings-card__main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
.notification-settings-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .5rem;
  min-width: 0;
}
.notification-settings-card__title {
  font-size: .82rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.25;
  min-width: 0;
  overflow-wrap: anywhere;
}
.notification-settings-card__recipient {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-width: 0;
  padding: .05rem .4rem;
  border-radius: 999px;
  background: #eef1f7;
  border: 1px solid #e2e8f0;
  font-size: .68rem;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notification-settings-card:has(.notification-settings-card__checkbox:checked) .notification-settings-card__recipient {
  background: rgba(0, 174, 239, .12);
  border-color: rgba(0, 174, 239, .25);
  color: #0077a8;
}
.notification-settings-card__desc {
  font-size: .72rem;
  line-height: 1.35;
  color: var(--muted);
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.notification-settings-switch {
  flex-shrink: 0;
  align-self: center;
}
.notification-settings-switch__track {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 2.25rem;
  height: 1.25rem;
  border-radius: 999px;
  background: #cbd5e1;
  border: 1px solid #b6c2d1;
  padding: .1rem;
  box-sizing: border-box;
  transition: background .15s ease, border-color .15s ease;
}
.notification-settings-switch__thumb {
  display: block;
  width: .95rem;
  height: .95rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .2);
  flex-shrink: 0;
  transition: transform .15s ease;
}
.notification-settings-card:has(.notification-settings-card__checkbox:checked) .notification-settings-switch__track {
  background: var(--accent, #00aeef);
  border-color: #0099d4;
  justify-content: flex-end;
}
.settings-form label.notification-settings-card {
  display: flex;
}
.form label.notification-settings-card {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  margin-bottom: 0;
  font-weight: inherit;
  font-size: inherit;
  color: inherit;
  text-transform: none;
  letter-spacing: normal;
}
.form-tabs,
.form-tab-panel,
.form-tab-panel .form-section,
.form-tabs .notification-settings-panel,
.form-tabs .notification-settings-list,
.form-tabs .notification-settings-item {
  min-width: 0;
  max-width: 100%;
}
@media (max-width: 1023px) {
  .notification-settings-card__desc {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    overflow-wrap: anywhere;
  }
  .notification-settings-card__head {
    flex-direction: column;
    align-items: flex-start;
  }
  .notification-settings-card__recipient {
    white-space: normal;
    max-width: 100%;
  }
  body.job-form-standalone .content {
    overflow-x: clip;
    min-width: 0;
  }
  body.job-form-standalone .job-form-page,
  body.job-form-standalone .form,
  body.job-form-standalone .form-tabs {
    min-width: 0;
    max-width: 100%;
  }
}
.notification-settings-card__desc a {
  color: var(--accent, #00aeef);
  text-decoration: underline;
  text-underline-offset: .12em;
}
.settings-notice {
  margin: 0 0 1rem;
  padding: .75rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--info-soft);
  border: 1px solid color-mix(in srgb, var(--primary) 28%, transparent);
  color: var(--text-secondary);
  font-size: .86rem;
  line-height: 1.5;
}
.settings-notice code {
  font-size: .82rem;
  background: color-mix(in srgb, var(--card) 70%, transparent);
  padding: .1rem .35rem;
  border-radius: 4px;
}
.field-hint {
  display: block;
  margin-top: .35rem;
  font-size: .78rem;
  font-weight: 500;
  color: var(--muted);
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.45;
}
.field-hint-success { color: var(--success); }

/* Accounts API settings */
.accounts-api-settings .settings-section-head {
  margin-bottom: .85rem;
}
.accounts-api-provider-bar {
  display: grid;
  gap: .45rem .85rem;
  align-items: end;
  margin-bottom: .85rem;
  padding: .65rem .75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--card) 94%, var(--bg));
}
@media (min-width: 640px) {
  .accounts-api-provider-bar {
    grid-template-columns: minmax(10rem, 14rem) 1fr;
    align-items: center;
  }
}
.accounts-api-provider-field {
  display: grid;
  gap: .25rem;
  margin: 0;
  min-width: 0;
}
.accounts-api-provider-field__label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--navy-600);
}
.accounts-api-provider-field select {
  margin-top: 0;
}
.accounts-api-provider-hint {
  margin: 0;
  font-size: .8rem;
  line-height: 1.4;
  color: var(--muted);
}
.accounts-api-layout {
  display: grid;
  gap: 1rem;
  align-items: start;
}
.accounts-api-layout__main,
.accounts-api-layout__instructions {
  min-width: 0;
}
@media (min-width: 960px) {
  .accounts-api-layout {
    grid-template-columns: minmax(0, 1.05fr) minmax(18rem, .95fr);
  }
  .accounts-api-layout__instructions {
    position: sticky;
    top: calc(var(--topbar-h) + 1rem);
  }
}
.accounts-api-disabled-notice {
  margin-bottom: .85rem;
}
.accounts-api-status-card {
  margin-bottom: .75rem;
  padding: .65rem .75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-muted);
}
.accounts-api-status-card[hidden] { display: none !important; }
.accounts-api-status-card__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .65rem .85rem;
}
.accounts-api-status-card__inner[hidden] { display: none !important; }
.accounts-api-status-card--connected {
  border-color: color-mix(in srgb, var(--success) 40%, transparent);
  background: var(--success-soft);
}
.accounts-api-status-card--disconnected {
  border-color: color-mix(in srgb, var(--warning) 40%, transparent);
  background: var(--warning-soft);
}
.accounts-api-status-card__main {
  min-width: 0;
  flex: 1 1 10rem;
}
.accounts-api-status-badge {
  display: inline-block;
  margin-bottom: .2rem;
  padding: .15rem .45rem;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.accounts-api-status-card--connected .accounts-api-status-badge {
  background: color-mix(in srgb, var(--success) 18%, transparent);
  color: var(--success);
}
.accounts-api-status-card--disconnected .accounts-api-status-badge {
  background: color-mix(in srgb, var(--warning) 18%, transparent);
  color: var(--warning);
}
.accounts-api-status-card__title {
  margin: 0;
  font-size: .92rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.accounts-api-status-card__meta {
  margin: .15rem 0 0;
  font-size: .78rem;
  color: var(--muted);
  line-height: 1.4;
}
.accounts-api-status-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;
  width: 100%;
}
@media (min-width: 480px) {
  .accounts-api-status-card__actions {
    width: auto;
    flex: 0 0 auto;
  }
}
.accounts-api-panel {
  margin-top: .5rem;
  padding: .75rem .8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
}
.accounts-api-panel[hidden] { display: none !important; }
.accounts-api-panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .45rem .65rem;
  margin-bottom: .35rem;
}
.accounts-api-panel__title {
  margin: 0;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--navy-600);
}
.accounts-api-panel__lead {
  margin: 0 0 .7rem;
  font-size: .8rem;
  color: var(--muted);
  line-height: 1.45;
}
.accounts-api-panel__lead a {
  color: var(--accent, #00aeef);
}
.accounts-api-grid {
  margin-bottom: 0;
  gap: .65rem 1rem;
}
.accounts-api-test-status {
  margin: 0 0 .65rem;
}
.accounts-api-optional {
  font-weight: 500;
  font-size: .78rem;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
}
.accounts-api-steps {
  margin-top: .65rem;
  padding-top: .55rem;
  border-top: 1px dashed var(--line);
}
.accounts-api-steps > summary {
  font-size: .78rem;
  font-weight: 700;
  color: var(--navy-600);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.accounts-api-steps > summary::-webkit-details-marker { display: none; }
.accounts-api-steps > summary::before {
  content: '▸';
  display: inline-block;
  margin-right: .35rem;
  font-size: .7rem;
  transition: transform .15s ease;
}
.accounts-api-steps[open] > summary::before {
  transform: rotate(90deg);
}
.accounts-api-steps ol {
  margin: .45rem 0 0;
  padding-left: 1.15rem;
  font-size: .8rem;
  color: var(--muted);
  line-height: 1.45;
}
.accounts-api-steps li + li { margin-top: .25rem; }
.accounts-api-instructions {
  padding: .9rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
.accounts-api-instructions[hidden] { display: none !important; }
.accounts-api-instructions h3 {
  margin: 0 0 .5rem;
  font-size: .95rem;
  line-height: 1.3;
  color: var(--text);
}
.accounts-api-instructions p,
.accounts-api-instructions li {
  font-size: .84rem;
  line-height: 1.55;
  color: var(--text-secondary);
}
.accounts-api-instructions p {
  margin: 0;
}
.accounts-api-instructions a {
  color: var(--accent, #00aeef);
  text-decoration: underline;
  text-underline-offset: .12em;
}
.accounts-api-instructions p + ol,
.accounts-api-instructions ol + p {
  margin-top: .7rem;
}
.accounts-api-instructions ol {
  margin: .7rem 0 0;
  padding-left: 1.15rem;
}
.accounts-api-instructions li + li {
  margin-top: .45rem;
}
.accounts-api-instructions code {
  font-size: .78rem;
  background: var(--surface-muted);
  padding: .08rem .3rem;
  border-radius: 4px;
  overflow-wrap: anywhere;
}
@media (max-width: 479px) {
  .accounts-api-settings .accounts-api-status-card__actions .btn {
    flex: 1 1 calc(50% - .2rem);
    min-width: 0;
    justify-content: center;
    text-align: center;
  }
  .accounts-api-settings .accounts-api-panel__head .btn {
    width: 100%;
    justify-content: center;
  }
  .accounts-api-settings .accounts-api-provider-bar {
    padding: .6rem .65rem;
  }
  .accounts-api-settings .accounts-api-panel {
    padding: .65rem .7rem;
  }
}
.field-hint code {
  font-size: .76rem;
  background: var(--surface-muted);
  padding: .08rem .3rem;
  border-radius: 4px;
}
.color-field {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-top: .25rem;
}
.color-field input[type="color"] {
  width: 42px;
  min-width: 42px;
  height: 38px;
  padding: .2rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  cursor: pointer;
}
.color-field input[type="text"] {
  flex: 1;
  margin-top: 0;
}
.brand-preview {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem .85rem;
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
  border: 1px solid var(--line);
  min-width: 0;
}
.brand-preview-swatch {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid var(--card);
  box-shadow: 0 0 0 1px var(--line);
}
.brand-preview-swatch--sidebar {
  width: 12px;
  height: 24px;
  border-radius: 4px;
}
.brand-preview-name {
  font-size: .82rem;
  font-weight: 700;
  color: var(--text);
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.settings-save-bar {
  margin-top: .5rem;
  padding-top: 1rem;
  z-index: 45;
}
.settings-save-hint {
  font-size: .82rem;
  font-weight: 500;
}
@media (max-width: 899px) {
  .settings-nav {
    top: calc(var(--topbar-h) + .25rem);
  }
  .settings-form .settings-section,
  .profile-page .profile-section {
    scroll-margin-top: calc(var(--topbar-h) + 5.5rem);
  }
}
@media (max-width: 639px) {
  .brand-preview { width: 100%; }
  .settings-quick-links { width: 100%; }
  .settings-quick-links .btn { flex: 1; }
}

/* ============ APP LOADING OVERLAY ============ */
.app-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(15, 23, 42, .42);
  backdrop-filter: blur(2px);
}
.app-loading-overlay[hidden] {
  display: none !important;
}
.app-loading-overlay__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  min-width: min(18rem, 100%);
  padding: 1.5rem 1.75rem;
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.app-loading-spinner {
  width: 2.5rem;
  height: 2.5rem;
  border: 3px solid var(--line);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: app-loading-spin .75s linear infinite;
}
.app-loading-overlay__message {
  margin: 0;
  font-size: .95rem;
  font-weight: 600;
  color: var(--text);
}
body.app-loading-active {
  overflow: hidden;
}
@keyframes app-loading-spin {
  to { transform: rotate(360deg); }
}
.btn.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.btn.is-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1.1rem;
  height: 1.1rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: app-loading-spin .75s linear infinite;
  color: #fff;
}
.btn.btn-secondary.is-loading::after,
.btn.btn-ghost.is-loading::after {
  color: var(--navy);
}

/* ============ PROPOSALS ============ */
.proposal-builder-page .page-header { margin-bottom: 1.25rem; }
.proposal-builder-header .proposal-ref { font-family: var(--font-mono, monospace); font-size: .9rem; }
.proposal-status-accepted { background: var(--success-soft); color: var(--success); }
.proposal-status-declined, .proposal-status-expired { background: var(--danger-soft); color: var(--danger); }
.proposal-status-sent, .proposal-status-viewed { background: var(--info-soft); color: var(--primary); }
.proposal-status-draft { background: var(--surface-muted); color: var(--muted); }

.proposal-builder { display: grid; gap: 1.25rem; grid-template-columns: 1fr; align-items: start; }
.proposal-builder-form { display: contents; }
@media (min-width: 1100px) {
  .proposal-builder { grid-template-columns: 1fr 19rem; grid-template-rows: auto auto auto; }
  .proposal-builder-grid { grid-column: 1; }
  .proposal-panel--lines { grid-column: 1; }
  .proposal-builder-sidebar {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: start;
    position: sticky;
    top: calc(var(--topbar-h) + 1rem);
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
}

.proposal-builder-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .proposal-builder-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(280px, 1fr);
    grid-template-areas:
      "recipient recipient details"
      "labour callout details";
    align-items: stretch;
  }
  .proposal-panel--recipient { grid-area: recipient; }
  .proposal-panel--details {
    grid-area: details;
    display: flex;
    flex-direction: column;
    min-height: 100%;
  }
  .proposal-panel--labour { grid-area: labour; }
  .proposal-panel--callout { grid-area: callout; }
  .proposal-panel--details .proposal-details-notes {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
  }
  .proposal-panel--details .proposal-details-notes textarea {
    flex: 1;
    min-height: 7rem;
  }
}

.proposal-panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.35rem 1.45rem;
  box-shadow: var(--shadow-sm);
}

/* Panel headings -- numbered "builder" steps */
.proposal-panel-head { margin-bottom: 1.1rem; padding-bottom: .9rem; border-bottom: 1px solid var(--line); }
.proposal-panel-head h2 { margin: 0; font-size: 1.02rem; display: flex; align-items: center; gap: .6rem; }
.proposal-panel-head p { margin: .45rem 0 0; font-size: .85rem; color: var(--muted); }
.proposal-summarise-materials {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  margin: .75rem 0 0;
  font-size: .85rem;
  color: var(--text);
  cursor: pointer;
}
.proposal-summarise-materials input { margin-top: .15rem; flex-shrink: 0; }
.proposal-summarise-materials .label-hint { color: var(--muted); }

.proposal-lines-layout { display: flex; flex-direction: column; gap: 1rem; }
.proposal-lines-grouped:not([hidden]) { display: flex; flex-direction: column; gap: .85rem; }
.proposal-lines-grouped[hidden] { display: none !important; }
.proposal-line-groups { display: flex; flex-direction: column; gap: .85rem; }
.proposal-line-group {
  border: 1px solid var(--line);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius);
  background: var(--surface-muted);
  overflow: hidden;
}
.proposal-line-group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .65rem 1rem;
  padding: .85rem 1rem;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.proposal-panel .proposal-line-group-name-field {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1 1 12rem;
  min-width: 0;
  margin-bottom: 0;
  font-weight: 400;
  font-size: inherit;
  text-transform: none;
  letter-spacing: normal;
}
.proposal-line-group-name-label {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .055em;
  text-transform: uppercase;
  color: var(--muted);
}
.proposal-line-group-name-input {
  width: 100%;
  max-width: 18rem;
  min-height: 38px;
}
.proposal-line-group-subtotal {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .2rem .4rem;
  padding: .38rem .7rem;
  border-radius: var(--radius-sm);
  background: var(--info-soft);
  color: var(--primary);
  font-size: .78rem;
  font-weight: 600;
  margin-left: auto;
  white-space: nowrap;
}
.proposal-line-group-subtotal strong {
  color: var(--text);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.proposal-line-group-subtotal .text-muted-sm {
  color: var(--muted);
  font-weight: 500;
}
.proposal-line-group-remove.icon-btn.table-action-btn {
  flex-shrink: 0;
}
.proposal-line-group-body {
  padding: .85rem 1rem 0;
}
.proposal-line-group-body .proposal-lines-table-wrap {
  margin-bottom: .65rem;
}
.proposal-line-group-empty {
  margin: 0 0 .75rem;
  padding: .7rem 1rem;
  font-size: .85rem;
  text-align: center;
  background: var(--bg-subtle);
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
}
.proposal-line-group-add-line {
  margin: 0 1rem 1rem;
}
.proposal-line-group-add {
  align-self: flex-start;
}
.proposal-lines-optional-panel {
  margin-top: .85rem;
  padding: 0;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface-muted);
  overflow: hidden;
}
.proposal-lines-optional-heading {
  margin: 0;
  padding: .85rem 1rem;
  font-size: .95rem;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.proposal-lines-optional-lead {
  margin: 0;
  padding: .55rem 1rem .75rem;
  font-size: .85rem;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.proposal-lines-optional-panel .proposal-lines-table-wrap {
  margin-bottom: 0;
  padding: .85rem 1rem 0;
  background: var(--surface-muted);
}
.proposal-lines-optional-panel .proposal-line-optional {
  display: none !important;
}
.proposal-lines-optional-panel .proposal-add-optional-line {
  margin: 0 1rem 1rem;
}
.proposal-panel-head--split {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
}
.proposal-panel-head--split > div { min-width: 0; }
.proposal-step {
  flex-shrink: 0;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--info-soft);
  color: var(--primary);
  font-size: .82rem;
  font-weight: 700;
  font-feature-settings: "tnum";
}

/* Field labels -- mirror the app-wide .form label style */
.proposal-panel label {
  display: block;
  margin-bottom: .85rem;
  font-weight: 600;
  font-size: .72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .055em;
}
.proposal-panel label:last-child { margin-bottom: 0; }
.proposal-recipient-customer-row {
  display: grid;
  gap: .3rem;
  margin-bottom: .85rem;
  --proposal-recipient-control-h: 38px;
}
.proposal-recipient-customer-label {
  display: block;
  font-weight: 600;
  font-size: .72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .055em;
}
.proposal-recipient-customer-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7.5rem;
  gap: .55rem;
  align-items: stretch;
}
.proposal-recipient-customer-field {
  display: block;
  margin-bottom: 0;
  min-width: 0;
}
.proposal-recipient-customer-field select,
.proposal-recipient-customer-field .site-combobox-input-wrap > input[type="text"] {
  height: var(--proposal-recipient-control-h);
  min-height: var(--proposal-recipient-control-h);
}
.proposal-panel .site-combobox-input-wrap > input[type="text"] {
  width: 100%;
}
.proposal-panel--recipient {
  overflow: visible;
}
.proposal-panel--recipient label:has(.site-combobox:focus-within),
.proposal-panel--recipient .proposal-recipient-customer-row:has(.site-combobox:focus-within) {
  position: relative;
  z-index: 40;
}
.proposal-panel--recipient .site-combobox:focus-within {
  z-index: 40;
}
.proposal-add-customer-box {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  width: 100%;
  height: var(--proposal-recipient-control-h);
  min-height: var(--proposal-recipient-control-h);
  padding: 0 .4rem;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  color: var(--muted);
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1;
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color .15s, color .15s, background .15s;
  text-decoration: none;
}
.proposal-add-customer-box:disabled,
.proposal-add-customer-box[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
}
.proposal-add-customer-box:disabled:hover,
.proposal-add-customer-box[aria-disabled="true"]:hover {
  border-color: var(--border-strong);
  color: var(--muted);
  background: var(--input-bg);
}
.proposal-recipient-site-row {
  margin-bottom: .85rem;
}
.proposal-add-customer-box svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.proposal-add-customer-box:hover,
.proposal-add-customer-box:focus,
.proposal-add-customer-box:focus-visible {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--accent-soft);
  text-decoration: none;
}
.proposal-add-customer-box span {
  line-height: 1.2;
  text-align: center;
}
.proposal-customer-modal[hidden] { display: none !important; }
.proposal-customer-modal {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}
.proposal-customer-modal.is-open { display: flex; }
.proposal-customer-modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--modal-backdrop);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.proposal-customer-modal-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 28rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 1.25rem 1.35rem 1.35rem;
  animation: app-modal-in .2s ease;
}
.proposal-customer-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .35rem;
}
.proposal-customer-modal-head h3 {
  margin: 0;
  font-size: 1.05rem;
  color: var(--navy);
}
.proposal-customer-modal-close {
  width: 2rem;
  height: 2rem;
}
.proposal-customer-modal-lead {
  margin: 0 0 1rem;
  font-size: .85rem;
  color: var(--muted);
}
.proposal-customer-modal-form label {
  margin-bottom: .75rem;
}
.proposal-customer-modal-form label:last-of-type {
  margin-bottom: 0;
}
.proposal-customer-modal-error {
  margin: .75rem 0 0;
  font-size: .82rem;
  color: var(--danger);
}
.proposal-customer-modal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .6rem;
  margin-top: 1.1rem;
}
@media (max-width: 520px) {
  .proposal-recipient-customer-controls {
    grid-template-columns: 1fr;
  }
  .proposal-builder input[type="text"],
  .proposal-builder input[type="number"],
  .proposal-builder input[type="search"],
  .proposal-builder input[type="email"],
  .proposal-builder select,
  .proposal-builder textarea {
    font-size: 16px;
  }
  .proposal-add-customer-box {
    font-size: .76rem;
    text-transform: none;
    letter-spacing: 0;
  }
}
.label-hint { font-weight: 400; color: var(--muted); font-size: .76rem; text-transform: none; letter-spacing: normal; }

/* Inputs/selects/textareas -- match the app-wide .form controls */
.proposal-builder input[type="text"],
.proposal-builder input[type="number"],
.proposal-builder input[type="search"],
.proposal-builder input[type="email"],
.proposal-builder select,
.proposal-builder textarea {
  width: 100%;
  margin-top: .3rem;
  padding: .5rem .75rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: .9rem;
  min-height: 38px;
  background: #f8fafd;
  color: var(--text);
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.proposal-recipient-customer-controls .proposal-recipient-customer-field select,
.proposal-recipient-customer-controls .proposal-recipient-customer-field .site-combobox-input-wrap > input[type="text"],
.proposal-recipient-customer-controls select[name="customer_id"] {
  margin-top: 0;
}
.proposal-builder input:hover,
.proposal-builder select:hover,
.proposal-builder textarea:hover { border-color: #c8d4e8; }
.proposal-builder input:focus,
.proposal-builder select:focus,
.proposal-builder textarea:focus {
  outline: none;
  border-color: var(--primary);
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(106, 155, 200, .18);
}
.proposal-builder input::placeholder,
.proposal-builder textarea::placeholder { color: #b0bccf; font-weight: 400; }
.proposal-builder textarea { min-height: 88px; resize: vertical; }
.proposal-builder input[readonly],
.proposal-builder input:read-only,
.proposal-builder select:disabled,
.proposal-builder textarea[readonly] {
  background: #f1f4f9;
  color: var(--muted);
  cursor: default;
}

/* Custom select chevron, matching the rest of the app */
.proposal-panel select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.2rem;
  cursor: pointer;
}
.proposal-panel label:has(> select) { position: relative; }
.proposal-panel label:has(> select)::after {
  content: '';
  position: absolute;
  right: .75rem;
  bottom: 13px;
  width: 12px;
  height: 12px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center / contain;
}
.proposal-panel label:has(> select:focus)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236a9bc8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

.proposal-line-desc-combobox {
  position: relative;
  min-width: 0;
}
.proposal-line-desc-combobox [data-proposal-line-desc] {
  width: 100%;
  margin-top: 0;
}
.proposal-line-desc-results {
  position: absolute;
  z-index: 60;
  top: calc(100% + .35rem);
  left: 0;
  right: 0;
  max-height: min(280px, 50vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  margin: 0;
  padding: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
.proposal-line-desc-results.proposal-line-desc-results--floating {
  position: fixed;
  top: 0;
  left: 0;
  right: auto;
  z-index: 1200;
}
.proposal-line-desc-results-empty {
  margin: 0;
  padding: .75rem .85rem;
  font-size: .84rem;
  color: var(--muted);
}
.proposal-lines-table td[data-label="Description"] {
  overflow: visible;
  position: relative;
}
.proposal-catalogue-hit {
  display: block;
  width: 100%;
  text-align: left;
  padding: .65rem .85rem;
  border: none;
  border-bottom: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
}
.proposal-catalogue-hit:last-child { border-bottom: 0; }
.proposal-catalogue-hit:hover { background: var(--surface-hover); }
.proposal-catalogue-hit-desc { display: block; font-size: .9rem; font-weight: 500; }
.proposal-catalogue-hit-meta { display: block; font-size: .78rem; color: var(--muted); margin-top: .15rem; }

.proposal-lines-empty {
  margin: 0 0 1rem;
  padding: 1.1rem 1.25rem;
  background: var(--bg-subtle, #f4f6f8);
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  font-size: .9rem;
}
.proposal-lines-table-wrap { overflow-x: auto; margin-bottom: 1rem; }
.proposal-lines-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.proposal-lines-table th,
.proposal-lines-table td { padding: .6rem .5rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.proposal-lines-table th:first-child,
.proposal-lines-table td:first-child { padding-left: 0; }
.proposal-lines-table th:last-child,
.proposal-lines-table td:last-child { padding-right: 0; }
.proposal-lines-table thead th { padding-top: 0; border-bottom: 1.5px solid var(--line); }
.proposal-lines-table th { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; text-align: left; }
.proposal-lines-table th.num, .proposal-lines-table td.num { text-align: right; }
.proposal-lines-table th .th-hint { display: block; font-weight: 500; text-transform: none; letter-spacing: 0; font-size: .65rem; opacity: .85; }
.proposal-lines-table tbody tr:last-child td { border-bottom: 0; }
.proposal-lines-table tbody tr:hover { background: transparent; }
.proposal-lines-table input[type="text"]:hover,
.proposal-lines-table input[type="number"]:hover,
.proposal-lines-table select:hover,
.proposal-lines-table .input-prefix-wrap:hover,
.proposal-lines-table .input-prefix-field:hover {
  border-color: var(--line);
  background: var(--input-bg);
  box-shadow: none;
}
.proposal-lines-table .input-prefix-wrap:hover {
  border-color: var(--border-strong);
}
.proposal-lines-table input[type="text"],
.proposal-lines-table input[type="number"],
.proposal-lines-table select { width: 100%; min-width: 0; margin-top: 0; min-height: 34px; }
.proposal-lines-table input[type="number"] { text-align: right; }
.proposal-lines-table select { text-align: right; text-align-last: right; padding-right: 1.5rem; }
.proposal-lines-table th:nth-child(2), .proposal-lines-table td:nth-child(2) { width: 6.5rem; }
.proposal-lines-table th:nth-child(3), .proposal-lines-table td:nth-child(3) { width: 8rem; }
.proposal-lines-table th:nth-child(4), .proposal-lines-table td:nth-child(4) { width: 5.25rem; }
.proposal-lines-table th:nth-child(5), .proposal-lines-table td:nth-child(5) { width: 9rem; }
.proposal-lines-table th:nth-child(6), .proposal-lines-table td:nth-child(6) { width: 5.5rem; }
.proposal-line-cost-display,
.proposal-line-unit-display,
.proposal-line-markup-na {
  display: block;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
  padding: .45rem 0;
}
.proposal-line-markup-na { color: var(--muted); font-weight: 500; }
.proposal-line-total { font-weight: 700; white-space: nowrap; text-align: right; }
.proposal-line-optional { width: 6rem; }
.proposal-line-actions {
  width: 2.75rem;
  text-align: center;
  vertical-align: middle;
}
.proposal-lines-table .proposal-line-actions .icon-btn.table-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-sm);
}
.proposal-lines-table .proposal-line-actions .icon-btn.table-action-btn svg {
  width: 18px;
  height: 18px;
}
@media (max-width: 767px) {
  .proposal-builder {
    gap: 1rem;
  }
  .proposal-builder-grid {
    gap: 1rem;
  }
  .proposal-panel,
  .proposal-summary-card {
    padding: 1rem;
  }
  .proposal-panel-head--split {
    display: grid;
    gap: .85rem;
  }
  .proposal-lines-table-wrap {
    overflow: visible;
  }
  .proposal-lines-table,
  .proposal-lines-table tbody,
  .proposal-lines-table tr,
  .proposal-lines-table td {
    display: block;
    width: 100%;
  }
  .proposal-lines-table thead {
    display: none;
  }
  .proposal-lines-table tbody {
    display: grid;
    gap: .85rem;
  }
  .proposal-lines-table tbody tr {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
  }
  .proposal-lines-table tbody tr:hover { background: var(--card); }
  .proposal-lines-table tbody tr:last-child td {
    border-bottom: 1px solid var(--line);
  }
  .proposal-lines-table tbody tr:last-child td:last-child {
    border-bottom: 0;
  }
  .proposal-lines-table th:first-child,
  .proposal-lines-table td:first-child,
  .proposal-lines-table th:last-child,
  .proposal-lines-table td:last-child {
    padding-left: .85rem;
    padding-right: .85rem;
  }
  .proposal-lines-table td {
    display: grid;
    grid-template-columns: minmax(6.5rem, 38%) minmax(0, 1fr);
    align-items: center;
    gap: .65rem;
    padding: .65rem .85rem;
    border-bottom: 1px solid var(--line);
    text-align: left;
  }
  .proposal-lines-table td::before {
    content: attr(data-label);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .055em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .proposal-lines-table td:first-child {
    display: block;
  }
  .proposal-lines-table td:first-child::before {
    display: none;
  }
  .proposal-lines-table td.num {
    text-align: left;
  }
  .proposal-lines-table input[type="text"],
  .proposal-lines-table input[type="number"],
  .proposal-lines-table select {
    min-height: 40px;
  }
  .proposal-lines-table .input-prefix-wrap,
  .proposal-lines-table select,
  .proposal-lines-table input[type="number"] {
    justify-self: stretch;
  }
  .proposal-line-cost-display,
  .proposal-line-unit-display,
  .proposal-line-markup-na,
  .proposal-line-total {
    justify-self: end;
    text-align: right;
  }
  .proposal-line-optional {
    width: 100%;
  }
  .proposal-line-optional .proposal-optional-toggle {
    justify-self: end;
  }
  .proposal-line-actions {
    width: 100%;
    text-align: left;
  }
  .proposal-lines-table .proposal-line-actions {
    display: block;
    padding: .75rem .85rem;
  }
  .proposal-lines-table .proposal-line-actions::before {
    display: none;
  }
  .proposal-lines-table .proposal-line-actions .icon-btn.table-action-btn {
    width: 100%;
    min-height: 40px;
    height: auto;
    gap: .45rem;
    border: 1px solid var(--border-strong);
    background: var(--card);
    color: var(--danger);
  }
  .proposal-lines-table .proposal-line-actions .icon-btn.table-action-btn::after {
    content: attr(aria-label);
    font-size: .82rem;
    font-weight: 700;
  }
  .proposal-add-line,
  .proposal-line-group-add,
  .proposal-line-group-add-line,
  .proposal-add-optional-line,
  .proposal-builder-sidebar-actions .btn {
    width: 100%;
  }
  .proposal-line-group-add-line {
    margin-left: 0;
    margin-right: 0;
  }
  .proposal-line-group-head {
    flex-direction: column;
    align-items: stretch;
  }
  .proposal-line-group-subtotal {
    margin-left: 0;
    align-self: flex-start;
    white-space: normal;
  }
  .proposal-line-group-name-input {
    max-width: none;
  }
  .proposal-line-group-remove.icon-btn.table-action-btn {
    align-self: flex-end;
  }
  .proposal-send-hint {
    width: 100%;
  }
}
.proposal-markup-grid--labour { grid-template-columns: 1fr; max-width: 16rem; }
.proposal-panel--labour .proposal-panel-head--compact {
  margin-bottom: .65rem;
  padding-bottom: .55rem;
}
.proposal-labour-compact {
  display: flex;
  flex-direction: column;
  gap: .65rem;
  max-width: 36rem;
}
.proposal-labour-tech {
  display: grid;
  gap: .4rem;
  --proposal-labour-tech-w: 11rem;
  --proposal-labour-hours-w: 4.75rem;
  --proposal-labour-action-w: 38px;
  --proposal-labour-control-h: 38px;
}
.proposal-labour-tech-head {
  display: grid;
  grid-template-columns: var(--proposal-labour-tech-w) var(--proposal-labour-hours-w) var(--proposal-labour-action-w);
  gap: .45rem;
  align-items: end;
}
.proposal-labour-tech-label {
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted);
  margin: 0;
}
.proposal-labour-tech-head .proposal-labour-tech-label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .055em;
}
.proposal-labour-tech-action-label {
  overflow: hidden;
  white-space: nowrap;
  text-indent: 100%;
}
.proposal-labour-tech-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.proposal-labour-tech-row {
  display: grid;
  grid-template-columns: var(--proposal-labour-tech-w) var(--proposal-labour-hours-w) var(--proposal-labour-action-w);
  align-items: stretch;
  gap: .45rem;
  min-width: 0;
}
.proposal-labour-tech-pill {
  width: var(--proposal-labour-tech-w);
  min-width: var(--proposal-labour-tech-w);
  max-width: var(--proposal-labour-tech-w);
  height: var(--proposal-labour-control-h);
  min-height: var(--proposal-labour-control-h);
  align-items: center;
  padding: 0 .65rem;
  box-sizing: border-box;
}
.proposal-labour-tech-pill .job-assign-pill-label {
  flex: 1;
  min-width: 0;
}
.proposal-labour-tech-hours {
  display: block;
  height: var(--proposal-labour-control-h);
  min-height: var(--proposal-labour-control-h);
  margin: 0;
}
.proposal-panel .proposal-labour-tech-hours:has(> select)::after,
.proposal-panel .proposal-labour-tech-hours:has(> input[type="number"])::after {
  display: none;
}
.proposal-labour-tech-hours-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.proposal-labour-tech-hours select,
.proposal-labour-tech-hours input[type="number"] {
  width: var(--proposal-labour-hours-w);
  height: var(--proposal-labour-control-h);
  min-height: var(--proposal-labour-control-h);
  min-width: 0;
  margin-top: 0;
  padding-left: .45rem;
  padding-right: .45rem;
}
.proposal-labour-tech-hours select {
  padding-right: 1.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .5rem center;
  background-size: 12px 12px;
}
.proposal-labour-tech-hours select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236a9bc8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .5rem center;
  background-size: 12px 12px;
}
.proposal-labour-tech-remove {
  width: var(--proposal-labour-control-h);
  height: var(--proposal-labour-control-h);
  min-height: var(--proposal-labour-control-h);
  padding: 0;
  flex-shrink: 0;
  color: var(--muted);
}
.proposal-labour-tech-remove:hover {
  color: var(--danger);
  background: var(--danger-soft);
}
.proposal-labour-tech-remove svg {
  width: 14px;
  height: 14px;
}
@media (max-width: 520px) {
  .proposal-labour-tech-head,
  .proposal-labour-tech-row {
    grid-template-columns: minmax(0, 1fr) 5rem var(--proposal-labour-action-w);
  }
  .proposal-labour-tech-pill {
    width: auto;
    min-width: 0;
    max-width: none;
  }
  .proposal-labour-tech-hours select,
  .proposal-labour-tech-hours input[type="number"] {
    width: 100%;
  }
}
.proposal-labour-tech-empty {
  margin: 0;
  font-size: .82rem;
  color: var(--muted);
}
.proposal-labour-tech-search {
  position: relative;
  flex: 1 1 12rem;
  min-width: 0;
}
.proposal-labour-tech-search input[type="search"] {
  margin-top: 0;
  width: 100%;
}
.proposal-labour-tech-results {
  position: absolute;
  z-index: 20;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: .35rem;
  max-height: 16rem;
  overflow: auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
.proposal-labour-tech-hit {
  display: block;
  width: 100%;
  padding: .65rem .85rem;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.proposal-labour-tech-hit:last-child {
  border-bottom: 0;
}
.proposal-labour-tech-hit:hover,
.proposal-labour-tech-hit:focus-visible {
  background: var(--surface-hover);
  outline: none;
}
.proposal-labour-tech-hit-name {
  display: block;
  font-size: .9rem;
  font-weight: 600;
  color: var(--text);
}
.proposal-labour-tech-hit-meta {
  display: block;
  margin-top: .15rem;
  font-size: .78rem;
  color: var(--muted);
}
.proposal-labour-tech-results-empty {
  margin: 0;
  padding: .75rem .85rem;
  font-size: .82rem;
  color: var(--muted);
}
/* Unit-price field sits inside the shared .input-prefix-wrap */
.proposal-builder .input-prefix-wrap .input-prefix-field {
  width: 100%;
  min-width: 0;
  margin-top: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  min-height: 32px;
  padding: .35rem .25rem;
  text-align: right;
}
.proposal-builder .input-prefix-wrap .input-prefix-field:hover,
.proposal-builder .input-prefix-wrap .input-prefix-field:focus {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.proposal-builder .proposal-optional-toggle {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .28rem .6rem;
  border: 1.5px solid var(--border-strong);
  border-radius: 999px;
  background: var(--input-bg);
  font-size: .76rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: none;
  letter-spacing: normal;
  margin-bottom: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.proposal-builder .proposal-optional-toggle:hover { border-color: var(--primary); background: var(--surface-muted); }
.proposal-builder .proposal-optional-toggle:has(input:checked) {
  background: var(--accent-soft);
  border-color: var(--primary);
  color: var(--primary);
}
.proposal-builder .proposal-optional-toggle input { width: 14px; height: 14px; min-height: auto; margin: 0; accent-color: var(--primary); cursor: pointer; }

.proposal-add-line { margin-top: .25rem; }

.proposal-generate-btn { margin-bottom: .45rem; align-self: flex-start; white-space: normal; text-align: left; }
.proposal-generate-status {
  margin: .35rem 0 .85rem;
  font-size: .84rem;
  line-height: 1.45;
  color: var(--muted);
}
.proposal-generate-status.is-error {
  color: var(--danger, #b71c1c);
  font-weight: 600;
}
.proposal-generate-hint {
  margin: 0 0 .85rem;
  font-size: .78rem;
  line-height: 1.45;
  max-width: 36rem;
}
.proposal-generate-btn svg { color: var(--primary-600); }
.proposal-generate-btn:hover svg { color: var(--primary-600); }
.proposal-markup-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1rem;
  margin-bottom: 1rem;
}
@media (max-width: 600px) {
  .proposal-markup-grid { grid-template-columns: 1fr; }
}
.proposal-labour-grid {
  display: grid;
  grid-template-columns: minmax(5rem, 7rem) minmax(8rem, 1fr);
  gap: 0 .65rem;
  align-items: end;
}
.proposal-labour-grid label {
  margin-bottom: 0;
  font-size: .78rem;
}
.proposal-labour-grid .proposal-labour-full { grid-column: 1 / -1; }
.proposal-labour-calc {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .5rem;
  padding: .7rem .85rem;
  background: var(--surface-muted);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}
.proposal-labour-stat {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  min-width: 0;
  padding-left: .85rem;
  border-left: 1px solid var(--line);
}
.proposal-labour-stat:first-child {
  padding-left: 0;
  border-left: 0;
}
.proposal-labour-stat-label {
  font-size: .64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .055em;
  color: var(--muted);
}
.proposal-labour-stat-value {
  font-size: .92rem;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.proposal-labour-stat--accent .proposal-labour-stat-value { color: var(--primary-600); }
@media (max-width: 520px) {
  .proposal-labour-calc { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem .5rem; }
  .proposal-labour-stat:nth-child(3) { padding-left: 0; border-left: 0; }
}
.proposal-panel--labour .proposal-labour-grid {
  grid-template-columns: 1fr;
  max-width: 14rem;
}
@media (max-width: 520px) {
  .proposal-labour-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.proposal-callouts-empty { margin: 0; font-size: .88rem; }
.proposal-callout-add {
  display: grid;
  gap: .3rem;
  margin-bottom: .85rem;
  --proposal-callout-control-h: 38px;
}
.proposal-callout-add-label {
  display: block;
  font-weight: 600;
  font-size: .72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .055em;
}
.proposal-callout-add-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .55rem;
  align-items: center;
}
.proposal-callout-add-field {
  margin: 0;
  min-width: 0;
}
.proposal-panel label.proposal-callout-add-field {
  margin-bottom: 0;
}
.proposal-callout-add-field select {
  width: 100%;
  margin-top: 0;
  height: var(--proposal-callout-control-h);
  min-height: var(--proposal-callout-control-h);
}
.proposal-callout-add-btn {
  min-height: var(--proposal-callout-control-h);
  height: var(--proposal-callout-control-h);
  white-space: nowrap;
}
.proposal-callouts-list-empty { margin: 0 0 .75rem; font-size: .88rem; }
.proposal-callouts-head,
.proposal-callout-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(4.5rem, auto) minmax(3.5rem, 4rem) minmax(4.5rem, auto) 2rem;
  gap: .55rem;
  align-items: center;
}
.proposal-callouts-label--action { text-align: center; }
.proposal-callout-remove { justify-self: center; }
.proposal-callouts-head {
  margin-bottom: .45rem;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}
.proposal-callouts-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.proposal-callout-desc {
  font-size: .88rem;
  color: var(--text);
  min-width: 0;
}
.proposal-callout-price,
.proposal-callout-line {
  font-size: .88rem;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  white-space: nowrap;
}
.proposal-callout-line { font-weight: 600; color: var(--primary-600); }
.proposal-callout-qty { margin: 0; }
.proposal-callout-qty input {
  width: 100%;
  min-width: 0;
  text-align: center;
}
.proposal-callouts-calc {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
  margin-top: .85rem;
  padding: .75rem .85rem;
  background: var(--surface-muted);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}
@media (max-width: 767px) {
  .proposal-callouts-head { display: none; }
  .proposal-callout-row {
    grid-template-columns: 1fr auto auto;
    grid-template-areas:
      "desc price remove"
      "qty line remove";
    padding: .65rem .75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-muted);
  }
  .proposal-callout-desc { grid-area: desc; }
  .proposal-callout-price { grid-area: price; justify-self: end; }
  .proposal-callout-qty { grid-area: qty; }
  .proposal-callout-line { grid-area: line; justify-self: end; align-self: end; }
  .proposal-callout-remove { grid-area: remove; align-self: start; }
}

.proposal-builder .input-suffix-wrap {
  display: flex;
  align-items: stretch;
  margin-top: .35rem;
}
.proposal-builder .input-suffix-field {
  flex: 1;
  min-width: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.proposal-builder .input-suffix {
  display: flex;
  align-items: center;
  padding: 0 .75rem;
  background: var(--bg-subtle, #f4f6f8);
  border: 1px solid var(--line);
  border-left: 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: .88rem;
  color: var(--muted);
  font-weight: 600;
}
.proposal-margin-block {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--line);
}
.proposal-margin-block h4 {
  margin: 0 0 .65rem;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}
.proposal-summary-row--margin-pct dd { color: var(--success, #2e7d32); }

.proposal-summary-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.35rem;
  box-shadow: var(--shadow-sm);
}
.proposal-summary-card h3 {
  margin: 0 0 1rem;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}
.proposal-summary-list { margin: 0; }
.proposal-summary-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .4rem 0;
  font-size: .9rem;
}
.proposal-summary-row dt { margin: 0; color: var(--muted); }
.proposal-summary-row dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.proposal-summary-row .text-muted-sm { display: block; font-weight: 400; }
.proposal-summary-row--sub { border-top: 1px solid var(--line); margin-top: .4rem; padding-top: .65rem; }
.proposal-summary-row--sub dt { color: var(--text); }
.proposal-summary-row--total {
  font-size: 1.05rem;
  margin-top: .5rem;
  padding-top: .75rem;
  border-top: 2px solid var(--line);
}
.proposal-summary-row--total dt { color: var(--text); font-weight: 700; }
.proposal-summary-row--total dd { color: var(--primary-600); font-weight: 800; }
.proposal-summary-hint { margin: 1rem 0 0; font-size: .82rem; }

.proposal-published-block {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.proposal-published-lead { margin: 0 0 .75rem; font-size: .86rem; line-height: 1.45; color: var(--text); }
.proposal-public-link-field { display: block; margin: 0 0 .75rem; }
.proposal-public-link-label { display: block; margin-bottom: .35rem; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.proposal-public-link-input {
  width: 100%;
  min-width: 0;
  padding: .55rem .65rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: .78rem;
  background: var(--bg-subtle, #f8fafb);
  color: var(--text);
}
.proposal-builder-sidebar-actions {
  display: grid;
  gap: .65rem;
  width: 100%;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.proposal-builder-sidebar-actions .btn {
  width: 100%;
  justify-content: center;
  box-sizing: border-box;
}
.proposal-send-hint { margin: 0; font-size: .85rem; color: var(--muted); }
.proposal-save-status { margin: 0; width: 100%; font-size: .85rem; }
.proposal-save-status.is-error { color: var(--danger, #b71c1c); }
.proposal-builder-sidebar { display: grid; gap: 1rem; }
@media (max-width: 767px) {
  .proposal-summary-card {
    padding: 1rem;
  }
  .proposal-builder-sidebar-actions .btn {
    width: 100%;
  }
  .proposal-send-hint {
    width: 100%;
  }
}
@media (max-width: 767px) {
  .proposal-panel--lines {
    padding: .9rem;
  }
  .proposal-panel--lines .proposal-panel-head {
    margin-bottom: .85rem;
  }
  .proposal-panel--lines .proposal-panel-head h2 {
    font-size: .98rem;
  }
  .proposal-panel--lines .proposal-panel-head p {
    font-size: .82rem;
    line-height: 1.45;
  }
  .proposal-lines-table-wrap {
    overflow: visible !important;
    margin-bottom: .85rem;
  }
  .proposal-lines-table {
    display: block !important;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .9rem;
  }
  .proposal-lines-table thead {
    display: none !important;
  }
  .proposal-lines-table tbody {
    display: grid !important;
    gap: .9rem;
    width: 100%;
  }
  .proposal-lines-table tbody tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "desc desc"
      "qty cost"
      "markup unit"
      "optional total"
      "actions actions";
    gap: .65rem;
    width: 100%;
    padding: .85rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: var(--shadow-sm);
  }
  .proposal-lines-table tbody tr:hover { background: var(--card); }
  .proposal-lines-table td,
  .proposal-lines-table th:first-child,
  .proposal-lines-table td:first-child,
  .proposal-lines-table th:last-child,
  .proposal-lines-table td:last-child {
    width: auto !important;
    padding: 0 !important;
    border: 0 !important;
  }
  .proposal-lines-table td {
    display: flex !important;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    gap: .25rem;
    align-items: stretch;
    text-align: left !important;
  }
  .proposal-lines-table td::before {
    display: block;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .055em;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--muted);
  }
  .proposal-lines-table td:nth-child(2)::before { content: "Qty"; }
  .proposal-lines-table td:nth-child(3)::before { content: "Cost ex GST"; }
  .proposal-lines-table td:nth-child(4)::before { content: "Markup"; }
  .proposal-lines-table td:nth-child(5)::before { content: "Unit ex GST"; }
  .proposal-lines-table td:nth-child(6)::before { content: "Line"; }
  .proposal-lines-table td:nth-child(7)::before { content: "Optional"; }
  .proposal-lines-table td:nth-child(1) {
    grid-area: desc;
    padding-bottom: .2rem !important;
  }
  .proposal-lines-table td:nth-child(1)::before {
    display: none;
  }
  .proposal-lines-table td:nth-child(2) { grid-area: qty; }
  .proposal-lines-table td:nth-child(3) { grid-area: cost; }
  .proposal-lines-table td:nth-child(4) { grid-area: markup; }
  .proposal-lines-table td:nth-child(5) { grid-area: unit; }
  .proposal-lines-table td:nth-child(6) {
    grid-area: total;
    justify-content: center;
    padding: .65rem .75rem !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: var(--radius-sm);
    background: var(--info-soft);
  }
  .proposal-lines-table td:nth-child(7) {
    grid-area: optional;
    justify-content: center;
  }
  .proposal-lines-table td:nth-child(8) {
    grid-area: actions;
  }
  .proposal-lines-table td:nth-child(8):empty {
    display: none !important;
  }
  .proposal-lines-table td:not(:nth-child(1)):not(:nth-child(6)):not(:nth-child(8)) {
    padding: .65rem .7rem !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius-sm);
    background: var(--input-bg);
  }
  .proposal-lines-table input[type="text"],
  .proposal-lines-table input[type="number"],
  .proposal-lines-table select {
    min-height: 42px;
    font-size: 16px;
  }
  .proposal-lines-table input[type="text"] {
    font-size: .95rem;
    font-weight: 600;
  }
  .proposal-lines-table .input-prefix-wrap,
  .proposal-line-unit-calc,
  .proposal-line-unit-manual {
    width: 100%;
  }
  .proposal-line-cost-display,
  .proposal-line-unit-display,
  .proposal-line-total {
    display: block;
    width: 100%;
    padding: 0;
    text-align: right;
  }
  .proposal-line-total::before {
    text-align: left;
  }
  .proposal-line-optional,
  .proposal-line-actions {
    width: auto !important;
  }
  .proposal-line-optional .proposal-optional-toggle {
    display: flex;
    width: 100%;
    min-height: 42px;
    justify-content: center;
    padding: .45rem .65rem;
  }
  .proposal-lines-table .proposal-line-actions .icon-btn.table-action-btn {
    width: 100%;
    min-height: 42px;
    height: auto;
    gap: .45rem;
    border: 1px solid var(--border-strong);
    background: var(--card);
    color: var(--danger);
  }
  .proposal-lines-table .proposal-line-actions .icon-btn.table-action-btn::after {
    content: attr(aria-label);
    font-size: .82rem;
    font-weight: 700;
  }
  .proposal-lines-optional-panel .proposal-lines-table tbody tr {
    grid-template-areas:
      "desc desc"
      "qty cost"
      "markup unit"
      "total total"
      "actions actions";
  }
  .proposal-lines-optional-panel .proposal-lines-table td:nth-child(6) {
    grid-area: total;
  }
  .proposal-lines-optional-panel .proposal-lines-table td:nth-child(7) {
    display: none !important;
  }
  .proposal-lines-optional-panel .proposal-lines-table td:nth-child(8) {
    grid-area: actions;
  }
}

/* Admin proposal preview banner */
.auth-body:has(.proposal-admin-preview-page) {
  padding: 0;
  background:
    radial-gradient(circle at top left, rgba(106, 155, 200, .18), transparent 28rem),
    linear-gradient(180deg, #f6f8fb 0%, #edf2f7 100%);
}
.auth-body:has(.proposal-admin-preview-page) .auth-shell {
  align-items: flex-start;
  padding: 0;
}
.auth-body:has(.proposal-admin-preview-page) .auth-wrap,
.auth-body:has(.proposal-admin-preview-page) .auth-wrap--wide {
  max-width: none;
  width: 100%;
}
.auth-body:has(.proposal-admin-preview-page) .auth-card {
  padding: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  overflow: visible;
}
.proposal-admin-preview-page {
  width: 100%;
}
.proposal-admin-preview-banner {
  width: 100%;
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  border-bottom: 1px solid var(--sidebar-border);
  border-radius: 0;
}
.proposal-admin-preview-banner__inner {
  display: grid;
  gap: 1rem;
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: 1rem max(1.25rem, env(safe-area-inset-right)) 1rem max(1.25rem, env(safe-area-inset-left));
}
.proposal-admin-preview-shell {
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: 1rem max(1rem, env(safe-area-inset-right)) 1.25rem max(1rem, env(safe-area-inset-left));
}
.proposal-admin-preview-banner__main {
  display: grid;
  gap: .65rem;
  min-width: 0;
}
.proposal-admin-preview-banner__eyebrow {
  margin: 0;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sidebar-text-muted);
}
.proposal-admin-preview-banner__lead {
  margin: 0;
  font-size: .92rem;
  line-height: 1.45;
  color: var(--sidebar-text);
}
.proposal-admin-preview-link-field {
  display: block;
  margin: 0;
}
.proposal-admin-preview-link-label {
  display: block;
  margin-bottom: .35rem;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--sidebar-text-muted);
}
.proposal-admin-preview-link-input {
  width: 100%;
  padding: .55rem .7rem;
  border: 1px solid var(--sidebar-border);
  border-radius: 8px;
  background: var(--sidebar-hover-bg);
  color: var(--sidebar-text);
  font-size: .84rem;
}
.proposal-admin-preview-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}
.proposal-admin-preview-banner .btn-secondary {
  background: rgba(255, 255, 255, .1);
  color: var(--sidebar-text);
  border-color: var(--sidebar-border);
  box-shadow: none;
}
.proposal-admin-preview-banner .btn-secondary:hover {
  background: var(--sidebar-hover-bg);
  color: var(--sidebar-text);
  border-color: var(--sidebar-border);
}
.proposal-admin-preview-banner .btn-primary {
  background: var(--sidebar-accent);
  border-color: var(--sidebar-accent);
  color: #fff;
}
.proposal-admin-preview-banner .btn-primary:hover {
  background: var(--sidebar-accent-muted);
  border-color: var(--sidebar-accent-muted);
}
.proposal-admin-preview-status {
  margin: 0;
  font-size: .84rem;
  color: var(--sidebar-text-sub);
}
.proposal-admin-preview-status.is-error { color: #fca5a5; }
.proposal-admin-preview-shell .proposal-public-page {
  border: 1px solid rgba(226, 232, 240, .9);
  border-radius: 18px;
  box-shadow: 0 26px 70px rgba(15, 30, 54, .14);
  overflow: visible;
}
.proposal-public-actions [aria-disabled="true"] {
  pointer-events: none;
  cursor: default;
}
@media (min-width: 768px) {
  .proposal-admin-preview-banner__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
  .proposal-admin-preview-banner__actions {
    justify-content: flex-end;
  }
  .proposal-admin-preview-status {
    grid-column: 1 / -1;
  }
}
@media (max-width: 480px) {
  .auth-body:has(.proposal-admin-preview-page) {
    padding: 0;
  }
  .auth-body:has(.proposal-admin-preview-page) .auth-shell {
    padding: 0;
  }
  .auth-body:has(.proposal-admin-preview-page) .auth-card {
    border-radius: 0;
    padding: 0;
  }
  .proposal-admin-preview-banner {
    border-radius: 0;
  }
}

/* Public proposal response (auth layout) */
.auth-body:has(.proposal-public-page) {
  background:
    radial-gradient(circle at top left, rgba(106, 155, 200, .18), transparent 28rem),
    linear-gradient(180deg, #f6f8fb 0%, #edf2f7 100%);
}
.auth-body:has(.proposal-public-page) .auth-shell { align-items: flex-start; }
.auth-body:has(.proposal-public-page):not(:has(.proposal-admin-preview-page)) .auth-card {
  padding: 0;
  border: 1px solid rgba(226, 232, 240, .9);
  border-radius: 18px;
  box-shadow: 0 26px 70px rgba(15, 30, 54, .14);
  overflow: visible;
}
.auth-wrap--wide { max-width: 72rem; }
.proposal-public-page {
  background: #fff;
  color: #172033;
  color-scheme: light;
  --navy: #0a1528;
  --navy-700: #0f1e36;
  --navy-600: #16294a;
  --primary: #3d74a5;
  --primary-600: #2f6290;
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  letter-spacing: -.01em;
}
.proposal-public-hero {
  position: relative;
  padding: 2.25rem 2.5rem 2rem;
  border-bottom: 1px solid #e7ebf2;
  background:
    linear-gradient(135deg, rgba(15, 30, 54, .045), transparent 42%),
    #fff;
}
.proposal-public-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--navy));
}
.proposal-public-masthead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: 2rem;
}
.proposal-public-masthead__brand { min-width: 0; }
.proposal-public-masthead__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .75rem;
  max-width: 18rem;
  text-align: right;
}
.proposal-public-company {
  color: #536176;
  font-size: .84rem;
  line-height: 1.5;
}
.proposal-public-company__name {
  margin: 0 0 .3rem;
  color: #172033;
  font-size: .92rem;
  font-weight: 750;
}
.proposal-public-company__line {
  margin: 0 0 .2rem;
}
.proposal-public-company__line:last-child { margin-bottom: 0; }
.proposal-public-company a {
  color: inherit;
  text-decoration: none;
}
.proposal-public-company a:hover { color: var(--primary); text-decoration: underline; }
.proposal-public-logo { max-height: 6rem; width: auto; display: block; }
.proposal-public-brand {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: .02em;
  color: #172033;
}
.proposal-public-ref {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  margin: 0;
  padding: .35rem .7rem;
  border: 1px solid #dce4ee;
  border-radius: 999px;
  background: rgba(248, 250, 252, .92);
  color: #475569;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .045em;
  text-transform: uppercase;
  white-space: nowrap;
}
.proposal-public-hero-copy {
  max-width: 44rem;
}
.proposal-public-kicker {
  margin: 0 0 .55rem;
  color: var(--primary);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.proposal-public-title {
  margin: 0;
  color: #172033;
  font-size: clamp(2rem, 4vw, 3.3rem);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1.02;
}
.proposal-public-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem .7rem;
  margin: 1.1rem 0 0;
  color: #536176;
  font-size: .98rem;
}
.proposal-public-meta strong { color: #172033; font-weight: 750; }
.proposal-public-meta--prepared-by { margin-top: .45rem; }
.proposal-public-meta span {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}
.proposal-public-meta span::before {
  content: "";
  width: .28rem;
  height: .28rem;
  border-radius: 50%;
  background: #9aa8ba;
}
.proposal-public-summary {
  max-width: 54rem;
  margin: 1.5rem 0 0;
  color: #536176;
  font-size: 1.02rem;
  line-height: 1.65;
}
.proposal-public-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 21rem);
  gap: 1.75rem;
  align-items: start;
  padding: 2.25rem 2.5rem 2.5rem;
  overflow: visible;
}
.proposal-public-main { display: grid; gap: 1.25rem; }
.proposal-public-card {
  background: #fff;
  border: 1px solid #e5eaf1;
  border-radius: 14px;
  padding: 1.5rem;
  box-shadow: 0 1px 2px rgba(15, 30, 54, .035);
}
.proposal-public-card h2 {
  margin: 0 0 1rem;
  color: #172033;
  font-size: .84rem;
  font-weight: 800;
  letter-spacing: .115em;
  text-transform: uppercase;
}
.proposal-public-subheading {
  margin: 1.35rem 0 .65rem;
  color: #172033;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.proposal-public-scope,
.proposal-public-terms { font-size: .98rem; line-height: 1.72; color: #253149; }
.proposal-public-scope p,
.proposal-public-terms p { margin: 0 0 .65rem; }
.proposal-public-scope p:last-child,
.proposal-public-terms p:last-child { margin-bottom: 0; }
.proposal-public-terms { font-size: .9rem; color: #475569; }
.proposal-optional-lead { margin: -.35rem 0 1rem; font-size: .92rem; color: #64748b; }
.proposal-public-lines { list-style: none; margin: 0; padding: 0; }
.proposal-public-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(7rem, auto) minmax(6.5rem, auto);
  gap: .7rem 1.25rem;
  padding: .95rem 0;
  border-bottom: 1px solid #edf1f6;
  align-items: start;
  font-size: .94rem;
}
.proposal-public-line:last-child { border-bottom: 0; }
.proposal-public-line-desc { display: block; color: #1e293b; font-weight: 650; line-height: 1.4; }
.proposal-public-line-sku { display: block; margin-top: .22rem; font-size: .76rem; color: #7b8798; font-weight: 600; letter-spacing: .035em; text-transform: uppercase; }
.proposal-public-line-qty { color: #64748b; font-size: .83rem; white-space: nowrap; text-align: right; }
.proposal-public-line-amt { color: #111827; font-weight: 750; white-space: nowrap; text-align: right; }
.proposal-public-line--no-price .proposal-public-line-amt-hidden { color: #cbd5e1; }
.proposal-public-line--no-price:has(+ .proposal-public-line--group-subtotal) {
  border-bottom: 0;
  padding-bottom: .35rem;
}
.proposal-public-line--group-subtotal {
  margin-top: 0;
  margin-bottom: 1.15rem;
  padding: .8rem .75rem;
  background: var(--sidebar-bg);
  border: 1px solid rgba(255, 255, 255, .08);
  border-bottom: 0;
  border-radius: var(--radius);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--sidebar-bg) 20%, transparent);
}
.proposal-public-lines > .proposal-public-line--group-subtotal:last-child {
  margin-bottom: 2.25rem;
}
.proposal-public-line--group-subtotal .proposal-public-line-desc { color: #f8fafc; font-weight: 700; }
.proposal-public-line--group-subtotal .proposal-public-line-qty { color: #94a3b8; font-weight: 600; }
.proposal-public-line--group-subtotal .proposal-public-line-amt { color: #fff; font-size: 1rem; font-weight: 800; }
.proposal-line-group-cell input {
  width: 100%;
  min-width: 6.5rem;
  max-width: 9rem;
}
.proposal-optional-pick { display: block; cursor: pointer; }
.proposal-optional-pick input {
  width: 1.05rem;
  height: 1.05rem;
  margin: .95rem 0 0;
  accent-color: #3d74a5;
  appearance: auto;
  -webkit-appearance: checkbox;
  background-color: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 3px;
  cursor: pointer;
}
.proposal-optional-pick input:checked {
  accent-color: #3d74a5;
  background-color: #3d74a5;
  border-color: #3d74a5;
}
.proposal-optional-pick-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(7rem, auto) minmax(6.5rem, auto);
  gap: .7rem 1.25rem;
  align-items: start;
  padding: .9rem 1rem;
  border: 1px solid #e4eaf2;
  border-radius: 12px;
  background: #f8fafc;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.proposal-optional-pick:has(input:checked) .proposal-optional-pick-body {
  border-color: color-mix(in srgb, var(--primary) 58%, #dbe3ee);
  background: color-mix(in srgb, var(--primary) 7%, #fff);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}
.proposal-public-line--optional { display: block; padding: .5rem 0; border-bottom: 0; }
.proposal-public-line--optional .proposal-optional-pick {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .85rem;
  align-items: start;
}
.proposal-public-sidebar {
  display: grid;
  gap: 1rem;
  align-self: start;
  position: sticky;
  top: 1rem;
  z-index: 10;
}
.proposal-public-total-card {
  background: var(--sidebar-bg);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  padding: 1.25rem;
  color: #fff;
  box-shadow: 0 16px 36px color-mix(in srgb, var(--sidebar-bg) 24%, transparent);
}
.proposal-public-total-card h2 {
  margin: 0 0 1rem;
  color: #f8fafc;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.proposal-public-total-list { margin: 0; }
.proposal-public-total-line {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .42rem 0;
  font-size: .9rem;
}
.proposal-public-total-line dt { margin: 0; font-weight: 500; color: #cbd5e1; }
.proposal-public-total-line dd { margin: 0; color: #f8fafc; font-weight: 700; }
.proposal-public-total-card .text-muted-sm { color: #94a3b8; }
.proposal-public-total-row {
  font-size: 1.12rem;
  font-weight: 800;
  border-top: 1px solid rgba(255, 255, 255, .18);
  margin-top: .55rem;
  padding-top: .85rem;
}
.proposal-public-total-row dd { color: #fff; }
.proposal-public-actions {
  display: grid;
  gap: .7rem;
  width: 100%;
  margin-top: 1.15rem;
  padding-top: 1.15rem;
  border-top: 1px solid rgba(255, 255, 255, .18);
}
.proposal-public-actions .btn,
.proposal-public-actions .proposal-public-download {
  width: 100%;
  justify-content: center;
  box-sizing: border-box;
}
.proposal-public-actions .btn {
  min-height: 2.85rem;
  border-radius: 10px;
  font-weight: 800;
}
.proposal-public-actions .btn-secondary,
.proposal-public-actions .proposal-public-download {
  background: rgba(255, 255, 255, .12);
  color: #f8fafc;
  border-color: rgba(255, 255, 255, .22);
  box-shadow: none;
}
.proposal-public-actions .btn-secondary:hover,
.proposal-public-actions .proposal-public-download:hover {
  background: rgba(255, 255, 255, .18);
  color: #fff;
  border-color: rgba(255, 255, 255, .28);
}
.proposal-public-actions .btn-primary {
  background: #fff;
  color: var(--sidebar-bg);
  border-color: #fff;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .18);
}
.proposal-public-actions .btn-primary:hover {
  background: #f1f5f9;
  color: var(--sidebar-bg);
  border-color: #f1f5f9;
}
.proposal-public-footer {
  margin: 0;
  padding: 0 .15rem;
  color: #64748b;
  font-size: .78rem;
  line-height: 1.55;
}
.proposal-public-download {
  text-decoration: none;
}

.proposal-complete-card { text-align: center; padding: 1.5rem 0 2rem; max-width: 32rem; margin: 0 auto; }
.proposal-complete-total { text-align: left; margin: 1.25rem auto 1rem; max-width: 20rem; }
.proposal-complete-card h1 { margin: 0 0 .75rem; }
.proposal-complete-icon { margin: 0 auto 1rem; width: 4rem; height: 4rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.proposal-complete-icon--accept { background: #e8f5e9; color: #2e7d32; }
.proposal-complete-icon--decline { background: #fdecea; color: #b71c1c; }

@media (max-width: 860px) {
  .proposal-public-layout { grid-template-columns: 1fr; }
  .proposal-public-sidebar { position: static; }
}
@media (max-width: 540px) {
  .auth-body:has(.proposal-public-page) { padding: .75rem; }
  .proposal-public-hero,
  .proposal-public-layout { padding-left: 1.25rem; padding-right: 1.25rem; }
  .proposal-public-hero { padding-top: 1.75rem; }
  .proposal-public-masthead { flex-direction: column; margin-bottom: 1.5rem; }
  .proposal-public-masthead__aside {
    align-items: flex-start;
    max-width: none;
    text-align: left;
  }
  .proposal-public-line,
  .proposal-optional-pick-body {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .proposal-public-line-qty,
  .proposal-public-line-amt { text-align: left; }
  .proposal-public-link-row { flex-direction: column; }
}

/* ============ SCHEDULE / CALENDAR ============ */
.calendar-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.calendar-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}
.calendar-nav-controls {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.calendar-view-switch {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--card);
}
.calendar-view-row {
  display: contents;
}
.calendar-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .4rem .75rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  border-right: 1px solid var(--line);
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.calendar-view-btn:last-child {
  border-right: 0;
}
.calendar-view-btn:hover {
  color: var(--text);
  background: var(--surface-hover);
  text-decoration: none;
}
.calendar-view-btn.is-active {
  color: var(--primary);
  background: var(--info-soft);
}
.calendar-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
}
.calendar-picker-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  min-width: 2rem;
  height: 32px;
  margin: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--card);
  cursor: pointer;
  color: var(--muted);
  transition: background .15s, border-color .15s, color .15s;
}
.calendar-picker-label:hover {
  background: var(--surface-hover);
  border-color: var(--primary);
  color: var(--text);
}
.calendar-picker-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  pointer-events: none;
  color: inherit;
}
.calendar-picker-range {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
  color-scheme: inherit;
}
.calendar-picker-label:focus-within {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}
.calendar-picker-range::-webkit-calendar-picker-indicator,
.calendar-picker-range::-moz-calendar-picker-indicator {
  display: none;
}
.calendar-week-label {
  margin: 0 0 0 .5rem;
  font-size: 1.15rem;
  font-weight: 700;
}
.calendar-tech-filter {
  margin-top: 1.25rem;
}
.calendar-tech-filter-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem 1rem;
  margin-bottom: .65rem;
}
.calendar-tech-filter-label {
  font-size: .85rem;
  font-weight: 700;
  color: var(--text);
}
.calendar-tech-filter-hint {
  font-size: .78rem;
}
.calendar-tech-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.calendar-tech-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .85rem;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--card);
  color: var(--text);
  font-size: .8rem;
  font-weight: 600;
  font-family: inherit;
  line-height: 1.3;
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s, color .15s, opacity .15s, transform .1s;
}
.calendar-tech-pill:hover {
  border-color: var(--tech-color);
}
.calendar-tech-pill-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(15, 30, 54, .12);
}
.calendar-tech-pill.is-active {
  background: var(--tech-color);
  border-color: var(--tech-color);
  color: #fff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tech-color) 30%, transparent);
  opacity: 1;
}
.calendar-tech-pill.is-active .calendar-tech-pill-dot {
  background: rgba(255, 255, 255, .92) !important;
  box-shadow: none;
}
.calendar-tech-pill:not(.is-active) {
  opacity: .72;
}
.calendar-tech-pill:not(.is-active):hover {
  opacity: 1;
  background: color-mix(in srgb, var(--tech-color) 12%, var(--card));
}

.schedule-week {
  --schedule-slot-h: 24px;
  --schedule-header-h: 3.25rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  max-width: 100%;
}
.schedule-week-grid {
  display: grid;
  grid-template-columns: 52px repeat(var(--schedule-day-columns, 7), minmax(100px, 1fr));
  min-width: max(720px, calc(52px + var(--schedule-day-columns, 7) * 100px));
}
.schedule-week--1-days .schedule-week-grid {
  grid-template-columns: 52px minmax(240px, 1fr);
  min-width: 320px;
}
.schedule-week--3-days .schedule-week-grid {
  min-width: 420px;
}
.schedule-week-grid--header {
  position: sticky;
  top: 0;
  z-index: 4;
}
.schedule-week-scroll {
  overflow: auto;
  max-height: calc(var(--schedule-header-h) + var(--schedule-view-slots, 28) * var(--schedule-slot-h));
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.schedule-week-scroll:focus {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}
.schedule-week-scroll-hint {
  margin: .5rem 1rem .75rem;
  font-size: .78rem;
}
.schedule-week-grid--header .schedule-week-corner,
.schedule-week-grid--header .schedule-week-dayhead {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.schedule-week-corner {
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
.schedule-week-grid--header .schedule-week-corner {
  z-index: 5;
  background: linear-gradient(
    180deg,
    var(--card) 0%,
    var(--card) 28%,
    color-mix(in srgb, var(--card) 92%, transparent) 40%,
    color-mix(in srgb, var(--card) 78%, transparent) 52%,
    color-mix(in srgb, var(--card) 58%, transparent) 64%,
    color-mix(in srgb, var(--card) 38%, transparent) 76%,
    color-mix(in srgb, var(--card) 16%, transparent) 88%,
    transparent 100%
  );
}
.schedule-week-dayhead {
  text-align: center;
  padding: .65rem .35rem;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  background: var(--calendar-header-bg);
  font-size: .78rem;
}
.schedule-week-grid--header .schedule-week-dayhead {
  background: linear-gradient(
    180deg,
    var(--calendar-header-bg) 0%,
    var(--calendar-header-bg) 70%,
    color-mix(in srgb, var(--calendar-header-bg) 88%, transparent) 100%
  );
}
.schedule-week-dayhead.is-today {
  background: var(--calendar-today-bg);
  color: var(--primary);
  font-weight: 700;
}
.schedule-week-grid--header .schedule-week-dayhead.is-today {
  background: linear-gradient(
    180deg,
    var(--calendar-today-bg) 0%,
    var(--calendar-today-bg) 70%,
    color-mix(in srgb, var(--calendar-today-bg) 88%, transparent) 100%
  );
}
.schedule-week-dow {
  display: block;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  font-size: .68rem;
}
.schedule-week-date {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
}
.schedule-week-times {
  display: grid;
  grid-template-rows: repeat(var(--schedule-slots, 48), var(--schedule-slot-h));
  border-right: 1px solid var(--line);
  background: var(--card);
  position: sticky;
  left: 0;
  z-index: 2;
}
.schedule-week-time {
  font-size: .68rem;
  color: var(--muted);
  padding-right: .45rem;
  text-align: right;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  min-height: var(--schedule-slot-h);
}
.schedule-week-daycol {
  position: relative;
  border-right: 1px solid var(--line);
  min-height: calc(var(--schedule-slots, 48) * var(--schedule-slot-h));
}
.schedule-week-daycol.is-today {
  background: var(--calendar-today-col-bg);
}
.schedule-week-slots {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: repeat(var(--schedule-slots, 48), var(--schedule-slot-h));
  pointer-events: none;
}
.schedule-week-slot {
  border-top: 1px solid var(--calendar-grid-line);
}
.schedule-week-events {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.schedule-event {
  position: absolute;
  box-sizing: border-box;
  border-radius: 6px;
  padding: .2rem .35rem;
  color: #fff;
  font-size: .68rem;
  line-height: 1.25;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(15, 30, 54, .18);
  pointer-events: auto;
  z-index: 1;
  border: 1px solid rgba(255, 255, 255, .25);
}
.schedule-event:hover {
  filter: brightness(1.05);
  text-decoration: none;
  color: #fff;
  z-index: 2;
}
.schedule-event-time {
  display: block;
  font-weight: 700;
  opacity: .95;
}
.schedule-event-title {
  display: block;
  font-weight: 700;
}
.schedule-event-meta {
  display: block;
  opacity: .9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.job-panel-schedule .form label {
  display: block;
  margin-bottom: .65rem;
}
.schedule-conflicts {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: var(--radius-sm);
  padding: .75rem .9rem;
  margin-bottom: .85rem;
  font-size: .85rem;
  color: #92400e;
}
.schedule-conflicts--active ul {
  margin: .4rem 0 0;
  padding-left: 1.1rem;
}
.schedule-conflicts--active li {
  margin: .25rem 0;
}
.schedule-conflicts--active a {
  color: #b45309;
  font-weight: 600;
}
.schedule-hint {
  font-size: .82rem;
  line-height: 1.45;
  margin: 0 0 .65rem;
  color: var(--muted);
}
.schedule-hint--blocked {
  color: var(--text);
}
.form-actions-stack {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-top: .5rem;
}

@media (max-width: 900px) {
  .calendar-page .content {
    padding-left: .75rem;
    padding-right: .75rem;
    min-width: 0;
    overflow-x: visible;
  }
  .calendar-page .calendar-header.page-header {
    flex-direction: column;
    align-items: stretch;
    gap: .75rem;
    margin-bottom: 1rem;
  }
  .calendar-page .calendar-header .btn {
    width: auto;
  }
  .calendar-page .calendar-nav {
    flex-direction: column;
    align-items: stretch;
    gap: .75rem;
    width: 100%;
  }
  .calendar-page .calendar-nav-controls {
    display: grid;
    grid-template-columns: 2.75rem 1fr 2.75rem;
    gap: .5rem;
    width: 100%;
  }
  .calendar-page .calendar-nav-controls .btn {
    width: auto;
    min-height: 44px;
    margin: 0;
    justify-content: center;
  }
  .calendar-page .calendar-nav-prev,
  .calendar-page .calendar-nav-next {
    padding-left: 0;
    padding-right: 0;
  }
  .calendar-page .calendar-view-row {
    display: flex;
    align-items: stretch;
    gap: .5rem;
    width: 100%;
  }
  .calendar-page .calendar-view-switch {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    flex: 1;
    min-width: 0;
    width: auto;
  }
  .calendar-page .calendar-view-btn {
    padding: .55rem .35rem;
    font-size: .72rem;
  }
  .calendar-page .calendar-picker {
    flex-shrink: 0;
    width: auto;
  }
  .calendar-page .calendar-picker-label {
    width: 2.75rem;
    min-width: 2.75rem;
    height: 100%;
    min-height: 44px;
  }
  .calendar-page .calendar-week-label {
    margin: 0;
    font-size: 1rem;
    line-height: 1.3;
  }
  .calendar-page .schedule-week-grid {
    grid-template-columns: 48px repeat(var(--schedule-day-columns, 7), minmax(92px, 92px));
    min-width: max(692px, calc(48px + var(--schedule-day-columns, 7) * 92px));
  }
  .calendar-page .schedule-week--3-days .schedule-week-grid {
    grid-template-columns: 48px repeat(3, minmax(calc((692px - 48px) / 3), 1fr));
    min-width: 692px;
  }
  .calendar-page .schedule-week--1-days .schedule-week-grid {
    grid-template-columns: 48px minmax(220px, 1fr);
    min-width: 280px;
  }
  .calendar-page .schedule-week-scroll {
    overflow-x: auto;
    overflow-y: auto;
    touch-action: pan-x pan-y;
  }
}

/* Settings — backup & restore */
.backup-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}
@media (max-width: 768px) {
  .backup-grid { grid-template-columns: 1fr; }
}
.backup-panel h3 {
  margin: 0 0 .75rem;
  font-size: 1rem;
  font-weight: 700;
}
.backup-panel--drive { min-width: 0; }
.backup-drive-setup-lead {
  margin: 0 0 1rem;
  font-size: .86rem;
  color: var(--muted);
  line-height: 1.5;
  max-width: 36rem;
}
.backup-drive-credentials { margin-bottom: 1rem; }
.backup-drive-steps {
  margin: 1rem 0 0;
  padding-left: 1.25rem;
  font-size: .86rem;
  color: var(--muted);
  line-height: 1.55;
  max-width: 36rem;
}
.backup-drive-card {
  border: 1px solid var(--border, #d8dee8);
  border-radius: 8px;
  padding: 1rem;
  background: var(--surface-elevated, #f8fafc);
}
.backup-drive-card--connected {
  border-color: #86efac;
  background: #f0fdf4;
}
.backup-drive-badge {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: .2rem .5rem;
  border-radius: 4px;
  background: var(--muted, #64748b);
  color: #fff;
}
.backup-drive-card--connected .backup-drive-badge {
  background: #15803d;
}
.backup-drive-email {
  margin: .5rem 0 .75rem;
  font-size: .9rem;
  color: var(--navy-800, #1e293b);
}
.backup-drive-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.backup-drive-status--warn {
  color: #92400e;
  font-size: .88rem;
  line-height: 1.5;
}
.backup-actions-row {
  margin: 1rem 0 1.25rem;
}
.backup-inline-form {
  display: inline-block;
  margin: 0 .25rem .25rem 0;
}
.backup-list-heading {
  margin: 1.5rem 0 .75rem;
  font-size: 1rem;
  font-weight: 700;
}
.backup-table-wrap { margin-bottom: 1rem; }
.backup-row-actions {
  white-space: nowrap;
  text-align: right;
}
.backup-status--completed { color: #15803d; font-weight: 600; }
.backup-status--failed { color: #b91c1c; font-weight: 600; }
.backup-status--pending { color: #92400e; font-weight: 600; }
.backup-error-row td {
  padding-top: 0;
  font-size: .84rem;
}
.backup-restore-upload.nested-card {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  border: 1px dashed var(--border, #d8dee8);
  border-radius: 8px;
}
.backup-warning {
  margin-top: 1rem;
  max-width: 42rem;
  color: #92400e;
}

/* ============ HOW TO USE (INFO PAGE) ============ */
.info-page {
  --info-sidebar-w: 15.5rem;
  max-width: 72rem;
  margin: 0 auto;
  padding-bottom: 3rem;
}
.info-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}
.info-title {
  margin: 0 0 .45rem;
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
}
.info-lead {
  margin: 0;
  max-width: 42rem;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.6;
}
.info-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.info-hero-link {
  display: inline-flex;
  align-items: center;
  padding: .4rem .75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  font-size: .82rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  transition: border-color .15s, background .15s, color .15s;
}
.info-hero-link:hover {
  border-color: var(--primary);
  background: var(--info-soft);
  color: var(--primary);
  text-decoration: none;
}
.info-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
}
.info-toc {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: .75rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: calc(var(--topbar-h) + .5rem);
  z-index: 35;
}
.info-toc-bar {
  display: flex;
  align-items: stretch;
  gap: .5rem;
  width: 100%;
}
.info-toc-current {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 36px;
  display: flex;
  align-items: center;
  padding: .42rem .7rem;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  font-size: .88rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
}
.info-toc-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  min-height: 36px;
  padding: 0;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  color: var(--muted);
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.info-toc-toggle:hover,
.info-toc-toggle:focus-visible {
  outline: none;
  border-color: var(--primary);
  background: var(--input-bg-focus);
  color: var(--text);
  box-shadow: 0 0 0 3px var(--accent-focus-ring);
}
.info-toc-chevron {
  width: 18px;
  height: 18px;
  transition: transform .2s ease;
}
.info-toc.is-expanded .info-toc-chevron {
  transform: rotate(180deg);
}
.info-toc-options {
  display: none;
  flex-direction: column;
  gap: 0;
  margin-top: .5rem;
  padding-top: .5rem;
  border-top: 1px solid var(--line);
  max-height: min(70vh, 32rem);
  overflow-y: auto;
}
.info-toc.is-expanded .info-toc-options {
  display: flex;
}
.info-toc-group {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: .35rem 0;
}
.info-toc-group + .info-toc-group {
  border-top: 1px solid var(--line);
  margin-top: .15rem;
  padding-top: .5rem;
}
.info-toc-group-label {
  padding: .25rem .55rem .15rem;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}
.info-toc-link {
  display: flex;
  align-items: center;
  padding: .5rem .55rem;
  border-radius: var(--radius-sm);
  font-size: .86rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  transition: color .15s, background .15s;
}
.info-toc-link:hover {
  color: var(--text);
  background: var(--surface-muted);
  text-decoration: none;
}
.info-toc-link.is-active {
  color: var(--primary);
  background: var(--info-soft);
}
.info-content {
  min-width: 0;
}
.info-section {
  scroll-margin-top: calc(var(--topbar-h) + 5.5rem);
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line);
}
.info-section:first-child {
  padding-top: 0;
}
.info-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.info-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
  margin-bottom: 1rem;
}
.info-section-head h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -.01em;
}
.info-subhead {
  margin: 1.5rem 0 .65rem;
  font-size: 1rem;
  font-weight: 700;
}
.info-prose {
  margin: 0 0 1rem;
  max-width: 42rem;
  line-height: 1.65;
  color: var(--text);
}
.info-note {
  margin: .75rem 0 0;
  font-size: .88rem;
  color: var(--muted);
  line-height: 1.55;
  max-width: 42rem;
}
.info-role-tag {
  display: inline-flex;
  align-items: center;
  padding: .15rem .5rem;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  background: var(--surface-muted);
  color: var(--muted);
}
.info-role-tag--customer { background: #dbeafe; color: #1e40af; }
.info-role-tag--staff { background: #d1fae5; color: #065f46; }
.info-role-tag--admin { background: #ede9fe; color: #5b21b6; }
[data-theme="dark"] .info-role-tag--customer { background: #1e3a5f; color: #93c5fd; }
[data-theme="dark"] .info-role-tag--staff { background: #064e3b; color: #6ee7b7; }
[data-theme="dark"] .info-role-tag--admin { background: #3b2667; color: #c4b5fd; }
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
}
.info-grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}
.info-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  box-shadow: var(--shadow-sm);
}
.info-card h3 {
  margin: 0 0 .55rem;
  font-size: .95rem;
  font-weight: 700;
}
.info-card p {
  margin: 0 0 .65rem;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--muted);
}
.info-card p:last-child { margin-bottom: 0; }
.info-list {
  margin: 0;
  padding-left: 1.15rem;
  font-size: .9rem;
  line-height: 1.55;
}
.info-list li + li { margin-top: .35rem; }
.info-list-ordered {
  list-style: decimal;
}
.info-steps,
.info-workflow {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  counter-reset: info-step;
  max-width: 44rem;
}
.info-steps > li,
.info-workflow > li {
  position: relative;
  padding: .85rem 0 .85rem 2.75rem;
  border-bottom: 1px solid var(--line);
}
.info-steps > li:last-child,
.info-workflow > li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.info-steps > li::before,
.info-workflow > li::before {
  counter-increment: info-step;
  content: counter(info-step);
  position: absolute;
  left: 0;
  top: .85rem;
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: .78rem;
  font-weight: 800;
}
.info-steps > li strong,
.info-workflow > li strong {
  display: block;
  margin-bottom: .2rem;
  font-size: .92rem;
  font-weight: 700;
}
.info-steps > li > span,
.info-workflow > li > span {
  display: block;
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.55;
}
.info-legend {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .55rem;
  max-width: 44rem;
}
.info-legend-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .75rem;
  align-items: start;
  padding: .55rem .7rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: .88rem;
  line-height: 1.5;
}
.info-legend-item .badge {
  margin-top: .1rem;
  white-space: nowrap;
}
.info-swatch {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 4px;
  margin-top: .15rem;
  border: 1px solid rgba(0, 0, 0, .12);
}
.info-swatch-customer-update { background: #fef9c3; }
.info-swatch-card-update { background: linear-gradient(90deg, #fb923c 0 4px, transparent 4px); border: 1px solid var(--line); }
.info-swatch-internal { background: #94a3b8; }
.info-callout {
  margin-top: 1rem;
  padding: .9rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-muted);
  max-width: 44rem;
}
.info-callout strong {
  display: block;
  margin-bottom: .25rem;
  font-size: .88rem;
}
.info-callout p {
  margin: 0;
  font-size: .88rem;
  line-height: 1.55;
  color: var(--muted);
}
.info-callout-tip {
  border-color: #86efac;
  background: #f0fdf4;
}
[data-theme="dark"] .info-callout-tip {
  border-color: #166534;
  background: #052e16;
}
.info-callout-warn {
  border-color: #fcd34d;
  background: #fffbeb;
}
[data-theme="dark"] .info-callout-warn {
  border-color: #92400e;
  background: #451a03;
}
.info-settings-map {
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
  max-width: 44rem;
}
.info-settings-row {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: .75rem 1rem;
  padding: .7rem 1rem;
  font-size: .88rem;
  line-height: 1.5;
  border-bottom: 1px solid var(--line);
}
.info-settings-row:last-child { border-bottom: none; }
.info-settings-label {
  font-weight: 700;
  color: var(--text);
}
.info-settings-row > span:last-child {
  color: var(--muted);
}
.info-faq {
  display: grid;
  gap: .5rem;
  max-width: 44rem;
}
.info-faq-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  overflow: hidden;
}
.info-faq-item summary {
  padding: .8rem 1rem;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.info-faq-item summary::-webkit-details-marker { display: none; }
.info-faq-item summary::after {
  content: '+';
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--muted);
  flex-shrink: 0;
}
.info-faq-item[open] summary::after { content: '−'; }
.info-faq-item summary:hover { background: var(--surface-muted); }
.info-faq-item p {
  margin: 0;
  padding: 0 1rem 1rem;
  font-size: .88rem;
  line-height: 1.6;
  color: var(--muted);
}
.info-glossary {
  margin: 0;
  max-width: 44rem;
}
.info-glossary-row {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: .5rem 1.25rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--line);
  font-size: .9rem;
  line-height: 1.55;
}
.info-glossary-row:last-child { border-bottom: none; }
.info-glossary-row dt {
  margin: 0;
  font-weight: 700;
}
.info-glossary-row dd {
  margin: 0;
  color: var(--muted);
}
@media (min-width: 900px) {
  .info-layout {
    grid-template-columns: var(--info-sidebar-w) 1fr;
    gap: 2rem;
  }
  .info-toc-bar { display: none; }
  .info-toc-options {
    display: flex;
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    max-height: calc(100vh - var(--topbar-h) - 2rem);
  }
  .info-toc {
    padding: .85rem .65rem;
  }
}
@media (max-width: 640px) {
  .info-title { font-size: 1.3rem; }
  .info-settings-row,
  .info-glossary-row {
    grid-template-columns: 1fr;
    gap: .2rem;
  }
  .info-settings-label { color: var(--primary); }
}