:root {
  /* Typography: change the font in these two variables only.
     The matching webfont <link> lives in portal/templates/portal/base.html. */
  --font-sans: 'Open Sans', Arial, Helvetica, sans-serif;
  --font-heading: var(--font-sans);
  --check-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  /* Readable ink for amber status chips - the brand amber fails contrast on its own tint. */
  --status-amber-ink: #8A6100;

  --primary-dark: #304F63;
  --primary: #556B77;
  --primary-light: #6F8795;
  --accent: #F4B51C;
  --accent-hover: #DFA315;
  --ink: #304F63;
  --muted: #6F8795;
  --line: #D9E1E5;
  --surface: #FFFFFF;
  --canvas: #F7F9FA;
  --nav: #304F63;
  --nav-soft: #556F80;
  --teal: #556B77;
  --teal-dark: #304F63;
  --mint: #E4F3EF;
  --amber: #F4B51C;
  --amber-bg: #FFF5D6;
  --red: #C44D56;
  --red-bg: #FCEBEC;
  --blue: #6F8795;
  --blue-bg: #EDF2F5;
  --success: #287D70;
  --success-bg: #E4F3EF;
  --shadow: 0 10px 30px rgba(48, 79, 99, .07);
  --r: 8px;
  --color-primary-dark: #304F63;
  --color-primary: #556B77;
  --color-primary-light: #6F8795;
  --color-accent: #F4B51C;
  --color-accent-hover: #DFA315;
  --color-text-primary: #304F63;
  --color-text-secondary: #556B77;
  --color-text-muted: #6F8795;
  --color-sidebar: #304F63;
  --color-sidebar-text: #FFFFFF;
  --color-sidebar-muted: #C6D2D9;
  --color-sidebar-active: #556F80;
  --color-background: #F7F9FA;
  --color-surface: #FFFFFF;
  --color-border: #D9E1E5;
  --color-success: #287D70;
  --color-success-bg: #E4F3EF;
  --color-danger: #C44D56;
  --color-danger-bg: #FCEBEC;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--canvas);
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--canvas);
  font: 14px/1.5 var(--font-sans);
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  margin: 0;
  letter-spacing: 0;
}

h1 {
  font-size: 30px;
  line-height: 1.2;
}

h2 {
  font-size: 20px;
}

h3 {
  font-size: 16px;
}

p {
  margin: 0;
}

.app-shell {
  display: grid;
  grid-template-columns: 248px 1fr;
  min-height: 100vh;
}

.sidebar {
  background: var(--nav);
  color: #e4f1ed;
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0 auto 0 0;
  width: 248px;
  z-index: 20;
}

.brand {
  display: flex;
  align-items: center;
  margin: 0 0 20px;
  padding: 0 12px 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Nav list scrolls on its own when the viewport is too short for every link,
   so the brand stays at the top and the account block at the bottom. */
.sidebar-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .25) transparent;
  padding: 0 12px;
}

.sidebar-nav::-webkit-scrollbar {
  width: 6px;
}

.sidebar-nav::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .22);
  border-radius: 3px;
}

.sidebar-nav:hover::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .38);
}

.brand,
.sidebar-bottom {
  flex: 0 0 auto;
}

.brand-logo {
  display: block;
  width: 168px;
  max-width: 100%;
  height: auto;
  max-height: 46px;
  object-fit: contain;
  object-position: left center;
}

.nav-group {
  margin: 14px 0 8px;
  padding: 0 12px;
  color: #7fa19c;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.nav-link {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #c4d9d4;
  border-radius: 6px;
  padding: 0 12px;
  margin: 2px 0;
  font-weight: 600;
}

.nav-link:hover,
.nav-link.active {
  background: var(--nav-soft);
  color: #fff;
}

.nav-icon {
  width: 18px;
  text-align: center;
  color: #8dbab0;
  font-weight: 700;
}

.sidebar-bottom {
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding: 10px 12px 0;
}

.user-mini {
  display: flex;
  gap: 10px;
  align-items: center;
  color: #e8f3f0;
  border-radius: 6px;
  padding: 6px;
}

.user-mini:hover,
.user-mini:focus {
  background: var(--nav-soft);
  color: #fff;
  outline: none;
}

.user-mini:focus {
  box-shadow: 0 0 0 3px rgba(155, 214, 196, .24);
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #d7aa79;
  color: #4e3524;
  display: grid;
  place-items: center;
  font-weight: 800;
  flex: none;
}

.user-mini strong {
  font-size: 12px;
  display: block;
}

.user-mini span {
  font-size: 11px;
}

.main {
  grid-column: 2;
  min-width: 0;
}

.topbar {
  height: 76px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 36px;
  position: sticky;
  top: 0;
  z-index: 10;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.search {
  width: min(380px, 40vw);
  position: relative;
}

.search input {
  width: 100%;
  background: #f4f7f5;
  border: 1px solid transparent;
  padding: 10px 14px 10px 38px;
  border-radius: 6px;
  outline: none;
}

.search input:focus {
  border-color: var(--teal);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(23, 126, 123, .12);
}

.search-symbol {
  position: absolute;
  left: 14px;
  top: 9px;
  color: #839391;
  font-size: 16px;
}

.search-results {
  position: absolute;
  top: 44px;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  border-radius: 6px;
  padding: 8px;
  z-index: 30;
}

.search-results a {
  display: block;
  padding: 9px 10px;
  border-radius: 4px;
}

.search-results a:hover {
  background: var(--canvas);
}

.icon-btn {
  border: 0;
  background: transparent;
  color: var(--muted);
  min-width: 35px;
  min-height: 35px;
  border-radius: 6px;
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon-btn:hover {
  background: var(--canvas);
  color: var(--ink);
}

/* Topbar removed: the sidebar toggle now floats at the top of the page itself.
   Hidden on wide screens and on the icon rail, where the sidebar is always visible. */
.mobile-menu {
  display: none;
}

.main > .mobile-menu {
  position: sticky;
  top: 10px;
  z-index: 15;
  margin: 10px 0 -6px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.content {
  padding: 20px;
}

.page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 20px;
}

/* A section title under the job tabs needs breathing room; inside the job header card it does not. */
.tabs + .page-head {
  margin-top: 15px;
  margin-bottom: 15px;
}

.job-head .page-head {
  margin: 0;
}

.subtitle {
  color: var(--muted);
  margin-top: 3px;
}

.actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.btn {
  min-height: 40px;
  border: 1px solid var(--line);
  padding: 0 15px;
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn:hover {
  border-color: #a8c5be;
  background: #f8fbf9;
}

.btn-primary {
  background: var(--teal);
  color: #fff;
  border-color: var(--teal);
}

.btn-primary:hover {
  background: var(--teal-dark);
  color: #fff;
}

.btn-danger {
  color: var(--red);
}

.btn:disabled {
  cursor: not-allowed;
}

.section {
  margin-top: 20px;
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* Dashboard: three cards across (the phone rules below still stack them two by two). */
.kpis-3 {
  grid-template-columns: repeat(3, 1fr);
}

.kpi {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 15px;
  box-shadow: 0 3px 10px rgba(23, 43, 45, .025);
}

.kpi-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
}

.kpi-value {
  font: 700 29px var(--font-sans);
  margin: 8px 0 6px;
}

.kpi-note {
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
}

.split {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 20px;
}

.split>*,
.panel,
.panel-pad {
  min-width: 0;
}

.panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
}

.panel-pad {
  padding: 15px;
}

.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 650px;
}

th {
  text-align: left;
  color: #81908e;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

td {
  padding: 14px 16px;
  border-bottom: 1px solid #edf2ef;
  vertical-align: middle;
}

tr:last-child td {
  border-bottom: 0 !important;
}

tbody tr {
  transition: background .12s ease;
}

/* Row hover needs to be visible: the old #fbfdfc was indistinguishable from white, and
   DataTables' own `table.dataTable>tbody>tr{background-color:transparent}` outranked it. */
tbody tr:hover,
table.dataTable > tbody > tr:hover {
  background-color: #EFF5F8;
}

.link {
  color: var(--teal-dark);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(48, 79, 99, .35);
  text-underline-offset: 2px;
}

.link:hover,
.link:focus-visible {
  color: #1F6E63;
  text-decoration-color: currentColor;
}

.status {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.status:before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.status.in-progress,
.status.generating {
  color: var(--blue);
  background: var(--blue-bg);
}

.status.generated,
.status.ready,
.status.paid,
.status.published {
  color: var(--teal-dark);
  background: var(--mint);
}

.status.needs-review,
.status.unpaid,
.status.pending {
  color: var(--amber);
  background: var(--amber-bg);
}

.status.blocked,
.status.archived,
.status.draft {
  color: var(--red);
  background: var(--red-bg);
}

.task {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid #edf2ef;
}

.task:last-child {
  border-bottom: 0;
}

.task-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: var(--amber-bg);
  color: var(--amber);
  border-radius: 50%;
  font-weight: 800;
}

.task p,
.meta {
  color: var(--muted);
  font-size: 12px;
}

.doc-row,
.invoice-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #edf2ef;
}

.doc-row:first-child,
.invoice-row:first-child,
.section-head + .doc-row,
.section-head + .invoice-row {
  padding-top: 0;
}

.doc-row:last-child,
.invoice-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.file-icon {
  width: 36px;
  border: 1px solid #c7ded7;
  color: var(--teal);
  border-radius: 4px;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 800;
}

.doc-info {
  flex: 1;
  min-width: 0;
}

.doc-info strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid var(--line);
  padding: 12px;
  border-radius: var(--r);
  margin-bottom: 14px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

label {
  color: #445654;
  font-size: 12px;
  font-weight: 700;
}

input,
select,
textarea {
  border: 1px solid #ccd9d5;
  border-radius: 5px;
  background: #fff;
  color: var(--ink);
  min-height: 40px;
  padding: 9px 11px;
  outline: 0;
}

textarea {
  min-height: 65px;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(23, 126, 123, .12);
}

.input-error {
  border-color: var(--red);
  background: var(--red-bg);
}

.error {
  color: var(--red);
  font-size: 12px;
}

.settings-check {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #445654;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.settings-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-height: 16px;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
  accent-color: var(--teal);
}

.settings-form {
  display: grid;
  gap: 13px;
  max-width: 700px;
}

.settings-field {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.settings-field>label {
  text-align: right;
}

.settings-logo-field {
  align-items: start;
}

.settings-logo-field>label {
  padding-top: 8px;
}

.settings-logo-preview {
  width: min(250px, 100%);
  min-height: 58px;
  display: flex;
  align-items: center;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fff;
}

.settings-logo-preview img {
  display: block;
  width: 100%;
  max-height: 46px;
  object-fit: contain;
  object-position: left center;
}

.settings-logo-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
  color: var(--muted);
  font-size: 12px;
}

.settings-logo-actions .text-btn {
  padding: 0;
  font-size: 12px;
}

.settings-short {
  width: 165px;
}

.settings-medium {
  width: 210px;
}

.settings-inline {
  display: flex;
  align-items: center;
  gap: 8px;
}

.settings-inline input {
  width: 62px;
}

#account-email {
  width: 100%;
  box-sizing: border-box;
}

@media (max-width:640px) {
  .settings-field {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .settings-field>label {
    text-align: left;
  }

  .settings-logo-field>label {
    padding-top: 0;
  }
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.form-stack {
  display: grid;
  gap: 12px;
}

.muted-box {
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 14px;
}

.callout {
  padding: 13px 15px;
  border-left: 3px solid var(--amber);
  background: var(--amber-bg);
  color: #6c481e;
  border-radius: 4px;
}

.callout.success {
  border-color: var(--teal);
  background: var(--mint);
  color: #205c51;
}

.tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}

.tab {
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 10px 15px;
  font-weight: 700;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}

.tab.active {
  color: var(--primary-dark);
  border-color: var(--accent);
}

.job-head {
  background: #fff;
  border: 1px solid var(--line);
  padding: 15px;
  border-radius: var(--r);
  margin-bottom: 10px;
}

.job-meta {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 12px;
}

.page-head + .job-meta {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.job-meta strong {
  display: block;
  color: var(--ink);
  font-size: 13px;
  margin-top: 2px;
}

.progress {
  height: 7px;
  background: #e5eeeb;
  border-radius: 99px;
  overflow: hidden;
}

.progress>span {
  height: 100%;
  display: block;
  background: var(--success);
  border-radius: 99px;
  transition: width .25s ease;
}

.progress-line {
  display: flex;
  align-items: center;
  gap: 12px;
}

.progress-line .progress {
  flex: 1;
}

.stack-list {
  display: grid;
  gap: 0;
}

.stack-item {
  padding: 10px 0;
  border-bottom: 1px solid #edf2ef;
}

.stack-item:first-child,
.section-head + .stack-item {
  padding-top: 0;
}

.stack-item:last-child {
  border: 0;
  padding-bottom: 0;
}

.drawer-shade,
.modal-shade {
  position: fixed;
  inset: 0;
  background: rgba(13, 32, 32, .46);
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 20px;
}

.modal {
  width: min(600px, 100%);
  max-height: min(760px, calc(100vh - 40px));
  overflow: auto;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .2);
}

.modal-head,
.modal-foot {
  padding: 10px 20px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.modal-foot {
  border-top: 1px solid var(--line);
  border-bottom: 0;
  justify-content: flex-end;
}

.modal-body {
  padding: 20px;
}

.drawer {
  background: #fff;
  width: min(510px, 100%);
  margin-left: auto;
  height: 100%;
  overflow: auto;
  padding: 22px;
}

.drawer-shade {
  display: block;
  padding: 0;
}

.toast-region {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 100;
  display: grid;
  gap: 8px;
}

.toast {
  background: var(--nav);
  color: #fff;
  padding: 12px 16px;
  border-radius: 6px;
  box-shadow: var(--shadow);
  min-width: 240px;
  animation: slideIn .2s ease;
}

@keyframes slideIn {
  from {
    transform: translateY(8px);
    opacity: 0;
  }

  to {
    transform: none;
    opacity: 1;
  }
}

.stepper {
  display: flex;
  gap: 0;
  margin-bottom: 20px;
  overflow: auto;
}

.step {
  min-width: 120px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #94a29f;
  font-size: 12px;
  font-weight: 700;
}

.step:not(:last-child):after {
  content: '';
  height: 1px;
  background: var(--line);
  width: 28px;
  margin: 0 8px;
}

.step-num {
  width: 26px;
  height: 26px;
  border: 1px solid #b7c9c4;
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.step.active {
  color: var(--teal-dark);
}

.step.active .step-num {
  color: #fff;
  background: var(--teal);
  border-color: var(--teal);
}

.step.done .step-num {
  color: var(--teal-dark);
  background: var(--mint);
  border-color: #9ed4c6;
}

.wizard-grid {
  display: grid;
  grid-template-columns: 1.4fr .6fr;
  gap: 20px;
  align-items: flex-start;
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px;
  align-content: start;
  max-height: 58vh;
  overflow-y: auto;
  padding: 2px 4px 2px 2px;
  margin-right: -4px;
  margin-left: -2px;
}

.choice {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 32px 8px 12px;
  cursor: pointer;
}

.choice:hover,
.choice.selected {
  border-color: var(--teal);
  box-shadow: 0 0 0 2px rgba(23, 126, 123, .1);
}

.choice input {
  display: none;
}

.choice strong {
  display: block;
  font-size: 13px;
  line-height: 1.35;
}

.choice p {
  margin: 0;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.interview-layout {
  display: grid;
  grid-template-columns: 215px minmax(0, 1fr) 260px;
  gap: 18px;
  align-items: start;
}

.interview-nav,
.summary {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 12px;
}

.interview-nav a {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-radius: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.interview-nav a.active {
  background: var(--mint);
  color: var(--teal-dark);
}

.check {
  color: var(--teal);
  font-weight: 800;
}

.interview-main {
  min-width: 0;
}

.section-banner {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
}

.section-banner p {
  color: var(--muted);
  margin-top: 4px;
}

.conditional {
  overflow: hidden;
  max-height: 1000px;
  opacity: 1;
  transition: max-height .3s ease, opacity .2s ease, margin .3s ease;
}

.conditional.hidden {
  max-height: 0;
  opacity: 0;
  margin: 0;
}

.repeater {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px;
  display: grid;
  gap: 8px;
}

.repeater-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  align-items: end;
}

.review-row {
  display: grid;
  grid-template-columns: 150px 1fr auto;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid #edf2ef;
}

.review-row:last-child {
  border: 0;
}

.dropzone {
  border: 1.5px dashed #a9c9c1;
  border-radius: 8px;
  padding: 40px 20px;
  text-align: center;
  background: #f8fcfa;
}

.dropzone.drag {
  background: var(--mint);
  border-color: var(--teal);
}

.doc-preview {
  background: #f0f3f1;
  padding: 20px;
  min-height: 350px;
}

.paper {
  background: #fff;
  box-shadow: 0 4px 12px rgba(48, 79, 99, .12);
  width: min(420px, 100%);
  min-height: 470px;
  margin: auto;
  padding: 36px 42px;
  color: var(--primary-dark);
  font: 11px/1.7 var(--font-sans);
}

.paper h4 {
  text-align: center;
  font: 700 14px var(--font-sans);
  margin-bottom: 24px;
}

.paper p {
  margin: 0 0 15px;
  text-align: justify;
}

.template-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.template-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px;
  display: flex;
  flex-direction: column;
  min-height: 190px;
}

.template-card p {
  color: var(--muted);
  font-size: 12px;
  margin: 11px 0 18px;
  flex: 1;
}

.builder-layout {
  display: grid;
  grid-template-columns: 205px minmax(0, 1fr) 300px;
  gap: 18px;
  align-items: start;
}

.builder-nav {
  display: grid;
  gap: 3px;
}

.builder-nav a {
  padding: 11px 12px;
  border-radius: 5px;
  color: var(--muted);
  font-weight: 700;
  font-size: 12px;
}

.builder-nav a.active {
  color: var(--teal-dark);
  background: var(--mint);
}

.builder-field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 5px;
  margin-bottom: 8px;
}

.drag-handle {
  color: #a1afac;
}

.rule {
  background: #f8fbf9;
  border: 1px solid var(--line);
  padding: 14px;
  border-radius: 6px;
  margin-top: 10px;
}

.condition-row {
  display: grid;
  grid-template-columns: 1fr 110px 1fr auto;
  gap: 8px;
  margin-top: 8px;
}

.integration {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 17px 0;
  border-bottom: 1px solid #edf2ef;
}

.integration:last-child {
  border: 0;
}

.tag {
  display: inline-block;
  font-size: 11px;
  color: var(--muted);
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: 4px;
}

.empty {
  padding: 42px 20px;
  text-align: center;
  color: var(--muted);
}

.hide {
  display: none !important;
}

.mobile-only {
  display: none;
}

@media (max-width:1100px) {
  .app-shell {
    grid-template-columns: 76px 1fr;
  }

  .sidebar {
    width: 76px;
  }

  .brand {
    padding: 0 13px 28px;
  }

  .brand>div:last-child,
  .nav-group,
  .nav-link span:not(.nav-icon),
  .user-mini>div:not(.avatar) {
    display: none;
  }

  .nav-link {
    justify-content: center;
    padding: 0;
  }

  .user-mini {
    justify-content: center;
  }

  .wizard-grid,
  .builder-layout {
    grid-template-columns: 1fr;
  }

  .builder-nav {
    display: flex;
    overflow: auto;
  }

  .builder-nav a {
    white-space: nowrap;
  }

  .interview-layout {
    grid-template-columns: 180px minmax(0, 1fr);
  }

  .summary {
    grid-column: 2;
  }
}

@media (max-width:760px) {
  .app-shell {
    display: block;
  }

  .sidebar {
    transform: translateX(-100%);
    transition: transform .2s ease;
    width: 260px;
    box-shadow: 10px 0 40px rgba(0, 0, 0, .15);
  }

  .sidebar.open {
    transform: none;
  }

  .brand>div:last-child,
  .nav-group,
  .nav-link span:not(.nav-icon),
  .user-mini>div:not(.avatar) {
    display: block;
  }

  .nav-link {
    justify-content: flex-start;
    padding: 0 12px;
  }

  .user-mini {
    justify-content: flex-start;
  }

  .main {
    min-height: 100vh;
  }

  .topbar {
    padding: 0 16px;
    height: 64px;
  }

  .topbar-actions {
    margin-left: auto;
  }

  .mobile-menu {
    display: inline-grid;
    place-items: center;
  }

  .topbar .search {
    width: calc(100vw - 190px);
  }

  .content {
    padding: 24px 16px 42px;
  }

  .page-head {
    display: block;
  }

  .page-head .actions {
    margin-top: 16px;
  }

  h1 {
    font-size: 25px;
  }

  .kpis {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .kpi {
    padding: 14px;
  }

  .kpi-value {
    font-size: 23px;
  }

  .split,
  .grid-2,
  .grid-3,
  .template-grid {
    grid-template-columns: 1fr;
  }

  .panel-pad {
    padding: 16px;
  }

  .toolbar>* {
    width: 100%;
  }

  .toolbar .btn {
    width: auto;
  }

  .mobile-only {
    display: block;
  }

  .interview-layout {
    display: block;
  }

  .interview-nav {
    display: none;
  }

  .summary {
    margin-top: 16px;
  }

  .choice-grid {
    grid-template-columns: 1fr;
  }

  .repeater-row {
    grid-template-columns: 1fr 1fr auto;
  }

  .review-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .review-row .btn {
    justify-self: start;
  }

  .sticky-mobile {
    position: sticky;
    bottom: 0;
    background: #fff;
    border-top: 1px solid var(--line);
    margin: 18px -16px -42px;
    padding: 12px 16px;
    z-index: 4;
  }

  .stepper {
    margin-right: -16px;
  }

  .step {
    min-width: 105px;
  }

  .step:not(:last-child):after {
    width: 12px;
    margin: 0 4px;
  }

  .modal-shade {
    padding: 10px;
  }

  .toast-region {
    right: 12px;
    left: 12px;
    bottom: 12px;
  }

  .toast {
    min-width: 0;
  }
}

@media (max-width:360px) {
  .kpis {
    grid-template-columns: 1fr;
  }

  .topbar .search {
    width: calc(100vw - 145px);
  }

  .topbar-actions .icon-btn.help {
    display: none;
  }
}

.login-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #fff;
}

.login-aside {
  background: var(--nav);
  color: #fff;
  padding: 40px clamp(32px, 7vw, 100px);
  display: flex;
  flex-direction: column;
}

.login-aside .brand {
  padding: 0;
}

.login-quote {
  margin: auto 0;
  max-width: 430px;
}

.eyebrow {
  color: var(--teal);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .11em;
  font-weight: 800;
}

.login-aside .eyebrow {
  color: #9bd6c4;
}

.login-quote h1 {
  font-size: 48px;
  margin: 14px 0 16px;
  max-width: 420px;
}

.login-quote p {
  color: #a6c3bd;
  max-width: 350px;
  font-size: 16px;
}

.login-stat {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 40px;
}

.login-stat strong {
  font: 700 38px var(--font-sans);
  color: var(--accent);
}

.login-stat span {
  color: var(--primary-light);
  font-size: 12px;
  line-height: 1.4;
}

.login-card {
  width: min(430px, calc(100% - 48px));
  align-self: center;
  justify-self: center;
}

.login-copy h2 {
  font-size: 27px;
  margin-bottom: 15px;
}

.login-copy p {
  color: var(--muted);
  margin: 7px 0 26px;
}

.login-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.check-label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-weight: 500;
}

.check-label input {
  min-height: 0;
  accent-color: var(--accent);
}

.text-btn {
  border: 0;
  background: transparent;
  color: var(--primary-dark);
  font-weight: 700;
  padding: 4px;
}

.login-foot {
  color: var(--muted);
  font-size: 11px;
  text-align: center;
  margin-top: 26px;
}

.mobile-brand {
  display: none;
  align-items: center;
  gap: 10px;
  font: 700 20px var(--font-sans);
  margin-bottom: 25px;
}

.list-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

code {
  color: var(--teal-dark);
  background: var(--mint);
  padding: 2px 4px;
  border-radius: 3px;
}

.masq-banner {
  color: var(--amber);
  background: var(--amber-bg);
  border: 1px solid #efd4a9;
  border-radius: 4px;
  padding: 6px 9px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

@media (max-width:760px) {
  .login-page {
    display: block;
    min-height: 100vh;
    padding: 32px 24px;
  }

  .login-aside {
    display: none;
  }

  .login-card {
    width: 100%;
    padding: 0;
  }

  .mobile-brand {
    display: flex;
  }
}

/* Invoice status controls (jobs, clients, invoices) */
.status.partially-paid {
  color: var(--blue);
  background: var(--blue-bg);
}

.status-select {
  min-height: 32px;
  padding: 4px 26px 4px 8px;
  font-size: 11px;
  font-weight: 800;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
}

.status-select.paid {
  color: var(--teal-dark);
  background-color: var(--mint);
}

.status-select.unpaid {
  color: var(--status-amber-ink);
  background-color: var(--amber-bg);
}

.status-select.partially-paid {
  color: var(--blue);
  background-color: var(--blue-bg);
}

.amount-input {
  min-height: 32px;
  padding: 4px 8px;
  width: 110px;
  font-size: 13px;
}

/* Dashboard KPI tiles link to their detail screens */
a.kpi {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s;
}

a.kpi:hover {
  border-color: var(--teal);
  box-shadow: 0 4px 14px rgba(23, 43, 45, .08);
}

/* Audit event modal */
.detail-list {
  display: grid;
  gap: 0;
}

.detail-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid #edf2ef;
}

.detail-row:last-child {
  border: 0;
}

.detail-row .meta {
  font-weight: 700;
}

@media (max-width:640px) {
  .detail-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* The interview summary no longer includes the prototype-rule notice. */
.interview-layout .summary .callout {
  display: none;
}

.nav-link[href="#clients"] .nav-icon {
  font-size: 0;
}

.nav-link[href="#clients"] .nav-icon::after {
  content: '▣';
  font-size: 16px;
}

/* Centered, production-style login presentation */
.login-page {
  grid-template-columns: 1fr;
  place-items: center;
  background: var(--canvas);
}

.login-aside {
  display: none;
}

.login-card {
  width: min(430px, calc(100% - 48px));
}

.mobile-brand {
  display: flex;
  justify-content: center;
  margin-bottom: 25px;
}

.mobile-brand .brand-logo {
  width: 200px;
  max-height: 58px;
}

.login-copy p,
.login-foot,
[data-action="sample-account"] {
  display: none !important;
}

/* DocPrep blue-gray and gold theme refinements */
.sidebar {
  color: var(--sidebar-text, #FFFFFF);
}

.nav-group {
  color: var(--sidebar-muted, #C6D2D9);
}

.nav-link {
  color: var(--sidebar-muted, #C6D2D9);
}

.nav-link:hover,
.nav-link.active {
  background: var(--nav-soft);
  color: #FFFFFF;
}

.nav-link.active {
  box-shadow: inset 3px 0 0 var(--accent);
}

.nav-icon {
  color: var(--sidebar-muted, #C6D2D9);
}

.user-mini,
.sidebar-bottom {
  color: #FFFFFF;
}

.user-mini span {
  color: var(--sidebar-muted, #C6D2D9);
}

.search input {
  background: #FFFFFF;
  border-color: var(--line);
}

.btn-primary {
  background: var(--accent);
  color: var(--primary-dark);
  border-color: var(--accent);
}

.btn-primary:hover {
  background: var(--accent-hover);
  color: var(--primary-dark);
  border-color: var(--accent-hover);
}

input,
select,
textarea {
  border-color: var(--line);
  color: var(--primary-dark);
}

input::placeholder,
textarea::placeholder {
  color: var(--primary-light);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(85, 107, 119, .14);
}

.status.generated,
.status.ready,
.status.paid,
.status.published {
  color: var(--success);
  background: var(--success-bg);
}

.sidebar {
  color: var(--color-sidebar-text);
}

.nav-group,
.nav-link,
.nav-icon,
.user-mini span {
  color: var(--color-sidebar-muted);
}

.topbar,
.panel,
.kpi,
.toolbar,
.template-card,
.job-head,
.modal,
.drawer {
  background: var(--color-surface);
  border-color: var(--color-border);
}

th,
label,
.settings-check {
  color: var(--color-text-secondary);
}

td,
.task,
.doc-row,
.invoice-row,
.stack-item,
.review-row,
.integration,
.detail-row {
  border-color: var(--color-border);
}

.file-icon {
  border-color: var(--color-border);
  color: var(--color-primary);
}

.progress {
  background: #E8EEF1;
}

.dropzone {
  border-color: #BFCBD1;
  background: #F7F9FA;
}

.doc-preview {
  background: #EEF2F4;
}

.rule,
.builder-field {
  background: #F7F9FA;
}
/* Short viewports: tighten the sidebar chrome so the scrollable nav keeps room. */
@media (max-height:640px) {

  .brand {
    margin-bottom: 12px;
    padding-bottom: 10px;
  }

  .nav-group {
    margin: 10px 0 6px;
  }

  .nav-link {
    min-height: 38px;
  }
}

/* Mobile drawer: close button inside the sidebar plus a tap-anywhere backdrop. */
.sidebar-close,
.sidebar-backdrop {
  display: none;
}

@media (max-width:760px) {
  .sidebar-close {
    display: inline-grid;
    place-items: center;
    position: absolute;
    top: 8px;
    right: 8px;
    min-width: 34px;
    min-height: 34px;
    font-size: 15px;
    color: #cfe0dc;
    background: rgba(255, 255, 255, .08);
  }

  .sidebar-close:hover,
  .sidebar-close:focus {
    background: rgba(255, 255, 255, .2);
    color: #fff;
  }

  .sidebar-backdrop:not([hidden]) {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 19;
    background: rgba(12, 28, 38, .45);
  }

  body.nav-open {
    overflow: hidden;
  }
}

/* ---- Django-build additions (was portal/css/portal.css, merged 2026-09-18) ---- */
.brand-text {
  color: #fff;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: .01em;
}

.inline-form {
  display: inline;
  margin: 0;
}

.masq-banner {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Disabled buttons drop the brand colour entirely instead of just fading it,
   so a disabled primary button can't be mistaken for an active one. */
.btn:disabled,
.btn[disabled],
.btn.is-disabled,
a.btn[aria-disabled="true"] {
  background: #EDF1F3;
  border-color: #E1E7EA;
  color: #96A5AE;
  box-shadow: none;
  cursor: not-allowed;
}

/* Links are not inert on their own; buttons already are via the disabled attribute,
   and keeping them hoverable lets their title tooltip explain why. */
a.btn[aria-disabled="true"] {
  pointer-events: none;
}

.errorlist {
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--red);
  font-size: 12px;
}

.field .helptext {
  color: var(--muted);
  font-size: 12px;
}

.dropzone[aria-disabled="true"] {
  opacity: .6;
  pointer-events: none;
}

.pagination {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  margin-top: 14px;
  color: var(--muted);
  font-size: 12px;
}

.settings-logo-preview img {
  max-width: 350px;
  max-height: 58px;
  object-fit: contain;
}

.toast.error {
  border-left: 4px solid var(--red);
}

.toast.success {
  border-left: 4px solid var(--success);
}

.field select,
.field input[type="date"] {
  min-height: 40px;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.checkbox-row input {
  min-height: auto;
}

.topbar .btn-primary {
  white-space: nowrap;
}

@media (max-width:760px) {
  .topbar .btn-primary {
    display: none;
  }
}

.choice input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.choice {
  position: relative;
  cursor: pointer;
}

.user-mini {
  width: 100%;
}

.doc-row .actions {
  flex-wrap: nowrap;
}

.plain-value {
  border: 0;
  background: transparent;
  padding: 0;
  min-height: auto;
  width: 100%;
  color: var(--ink);
  font-weight: 600;
}

.settings-logo-actions label.text-btn {
  cursor: pointer;
}

.stack-item>.meta {
  display: block;
}

.stack-item>.meta+strong,
.stack-item>.meta+p {
  display: block;
}

/* Switch Back: app.js moves it into the page head, ahead of the page's own buttons (New Job...).
   A page without a page head keeps it floating at the bottom right. */
.masq-switch {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 40;
  margin: 0;
}

.masq-switch .btn {
  box-shadow: var(--shadow);
}

.page-head .masq-switch {
  position: static;
}

.page-head .masq-switch .btn {
  box-shadow: none;
}

.avatar-menu {
  position: relative;
}

.avatar-btn {
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
}

.avatar-btn:hover,
.avatar-btn:focus {
  outline: 3px solid rgba(48, 79, 99, .18);
}

.user-menu,
.dropdown {
  position: absolute;
  right: 0;
  top: 44px;
  min-width: 200px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: var(--shadow);
  padding: 6px;
  z-index: 60;
}

.user-menu-head {
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.user-menu a,
.user-menu button,
.dropdown a,
.dropdown button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 10px;
  border: 0;
  background: transparent;
  border-radius: 4px;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  min-height: auto;
}

.user-menu a:hover,
.user-menu button:hover,
.dropdown a:hover,
.dropdown button:hover {
  background: var(--canvas);
}

.user-menu form,
.dropdown form {
  margin: 0;
}

.dropdown button.danger {
  color: var(--red);
}

.row-menu {
  position: relative;
  display: inline-block;
}

.dropdown.floating {
  position: fixed;
  top: auto;
  right: auto;
}

.dropdown button[disabled] {
  opacity: .45;
  cursor: not-allowed;
}

/* Live interview screen */
.da-choice {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: var(--ink);
  font-size: 14px;
}

.da-choice input {
  min-height: auto;
  width: auto;
}

.da-currency {
  position: relative;
}

.da-currency-prefix {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}

.da-currency input {
  padding-left: 24px;
  width: 100%;
}

/* Invoice line items: the modal's editable rows and the read-only table on the invoice pages. */
.invoice-item-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.invoice-items-table {
  min-width: 0;
  width: 100%;
  margin-top: 8px;
}

.invoice-items-table td:last-child,
.invoice-items-table th:last-child {
  text-align: right;
  white-space: nowrap;
}

.invoice-items-table tfoot td {
  font-weight: 600;
}

.da-note {
  color: var(--muted);
  font-size: 13px;
}

.field input,
.field select,
.field textarea {
  width: 100%;
}

.interview-nav .da-outline-form {
  margin: 0;
}

.interview-nav .da-outline-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 10px 12px;
  border-radius: 6px;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}

.interview-nav .da-outline-btn:hover {
  background: var(--canvas);
}

.interview-nav .da-outline-btn .check {
  color: var(--success);
}

.interview-nav .da-outline-pending {
  display: flex;
  padding: 10px 12px;
  color: var(--muted);
  font-weight: 600;
}

.interview-main .actions .btn {
  white-space: nowrap;
}

.field input[type="radio"],
.field input[type="checkbox"],
.da-choice input {
  width: auto;
  min-height: auto;
  margin: 0;
}

.da-choice {
  cursor: pointer;
}

/* The document picker (the field named in outline_preview_var): up to 3 columns of checkboxes, filled top to
   bottom; fewer on narrower screens (each column needs about 10rem, so three fit the question card). A label that
   wraps stays indented past its checkbox. */
.choice-columns {
  columns: 3 10rem;
  column-gap: 1.5rem;
}

.choice-columns .da-choice {
  align-items: flex-start;
  break-inside: avoid;
  padding: 3px 0;
}

.choice-columns .da-choice input {
  margin-top: 3px;
  flex: none;
}

/* A line of side-by-side fields (screen_columns): up to three across (each needs about 10rem, so three fit the
   question card), one per line on phones. */
.field-row {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1.25rem;
  row-gap: 1rem;
}

.field-row > .field {
  flex: 1 1 10rem;
  min-width: 0;
}

@media (max-width: 600px) {
  .field-row > .field {
    flex-basis: 100%;
  }
}

/* Conditional interview fields: the prototype's .field{display:flex} must not defeat the hidden attribute. */
.field[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Already-added list table: Edit is the last column (as in the interview app) but stays pinned in view while the wide table scrolls. */
.da-list-table .da-sticky-col {
  position: sticky;
  right: 0;
  background: #fff;
  box-shadow: -8px 0 8px -8px rgba(48, 79, 99, .25);
}

.da-list-table thead .da-sticky-col {
  background: #fff;
}

.da-list-table tbody tr:hover .da-sticky-col {
  background: #fbfdfc;
}

/* Token picker (multi-user select) */
.tokens {
  position: relative;
}

.tokens-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-height: 40px;
  padding: 5px 8px;
  border: 1px solid #ccd9d5;
  border-radius: 5px;
  background: #fff;
  cursor: text;
}

.tokens-chips:focus-within {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(23, 126, 123, .12);
}

.token {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--mint);
  color: var(--teal-dark);
  border-radius: 4px;
  padding: 3px 6px 3px 9px;
  font-size: 12px;
  font-weight: 700;
}

.token button {
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 15px;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
  min-height: auto;
}

.token button:hover {
  color: var(--red);
}

.tokens-input {
  flex: 1;
  min-width: 120px;
  border: 0 !important;
  outline: 0;
  padding: 4px 2px !important;
  min-height: 26px !important;
  background: transparent;
  box-shadow: none !important;
}

.tokens-list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: var(--shadow);
  padding: 6px;
  z-index: 70;
  max-height: 240px;
  overflow: auto;
}

.tokens-list button {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 8px 10px;
  border-radius: 4px;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  min-height: auto;
}

.tokens-list button:hover {
  background: var(--canvas);
}

.tokens-empty {
  padding: 8px 10px;
}

/* Wizard choice cards: make the selected one unmistakable */
.choice.selected {
  border-color: var(--teal);
  background: var(--mint);
  box-shadow: 0 0 0 2px rgba(23, 126, 123, .18);
  position: relative;
}

.choice.selected::after {
  content: "✓";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 9px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: grid;
  place-items: center;
}

/* DataTables integration */
div.dt-container {
  padding: 0;
}

div.dt-container .dt-layout-row {
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  margin: 0 !important;
}

div.dt-container .dt-layout-table {
    padding: 10px 5px;
}

div.dt-container .dt-layout-row:first-child {
  border-top: 0;
}

div.dt-container .dt-layout-row:has(> .dt-layout-cell:empty):not(:has(.dt-search)) {
  display: none;
}

div.dt-container .dt-search {
  display: flex;
  align-items: center;
  gap: 8px;
}

div.dt-container .dt-search input {
  min-height: 38px;
  padding: 8px 11px;
  border: 1px solid #ccd9d5;
  border-radius: 5px;
  background: #f4f7f5;
  min-width: 240px;
}

div.dt-container .dt-search input:focus {
  border-color: var(--teal);
  background: #fff;
  outline: 0;
  box-shadow: 0 0 0 3px rgba(23, 126, 123, .12);
}

div.dt-container .dt-length {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

div.dt-container .dt-length select {
  min-height: 34px;
  padding: 5px 8px;
}

div.dt-container .dt-info {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  padding: 0;
}

div.dt-container .dt-paging {
  display: flex;
  gap: 4px;
}

div.dt-container .dt-paging .dt-paging-button {
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fff;
  color: var(--ink);
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  min-height: auto;
}

div.dt-container .dt-paging .dt-paging-button.current,
div.dt-container .dt-paging .dt-paging-button:hover:not(.disabled) {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff !important;
}

div.dt-container .dt-paging .dt-paging-button.disabled {
  opacity: .4;
  cursor: default;
}

table.dataTable {
  border-collapse: collapse !important;
  width: 100% !important;
  margin: 0 !important;
}

table.dataTable thead th.dt-orderable-asc:hover,
table.dataTable thead th.dt-orderable-desc:hover {
  outline: none !important;
}

table.dataTable tbody td.dt-empty {
  padding: 42px 20px;
  text-align: center;
  color: var(--muted);
}

table.dataTable>tbody>tr>td,
table.dataTable>thead>tr>th {
  border-bottom: 1px solid #edf2ef;
}

/* A totals row (Team Performance): the same light rule as the rows above it instead of DataTables' dark one,
   and no line of its own below, since the pager row under the table already draws one. */
table.dataTable>tfoot>tr>th,
table.dataTable>tfoot>tr>td {
  border-top: 1px solid var(--line);
  border-bottom: 0;
}

table.dataTable td.dt-type-numeric,
table.dataTable th.dt-type-numeric,
table.dataTable td.dt-type-date,
table.dataTable th.dt-type-date {
  text-align: left;
}

/* DataTables: left-align everything, keep header text + arrow together, make sort arrows obvious */
table.dataTable thead>tr>th,
table.dataTable tbody>tr>td {
  text-align: left !important;
}

table.dataTable td.dt-empty {
  text-align: center !important;
}

table.dataTable thead th.dt-orderable-asc span.dt-column-order:before,
table.dataTable thead th.dt-orderable-desc span.dt-column-order:after,
table.dataTable thead th.dt-ordering-asc span.dt-column-order:before,
table.dataTable thead th.dt-ordering-desc span.dt-column-order:after {
  opacity: .55 !important;
  color: var(--primary);
  font-size: .95em !important;
}

table.dataTable thead th.dt-ordering-asc span.dt-column-order:before,
table.dataTable thead th.dt-ordering-desc span.dt-column-order:after {
  opacity: 1 !important;
  color: var(--teal) !important;
}

table.dataTable thead th.dt-ordering-asc,
table.dataTable thead th.dt-ordering-desc {
  color: var(--teal-dark);
}

table.dataTable thead th.dt-orderable-asc:hover span.dt-column-order:before,
table.dataTable thead th.dt-orderable-desc:hover span.dt-column-order:after {
  opacity: .9 !important;
}

/* Header layout: title first, sort icon right after it, for every column type (DataTables flips numeric/date columns by default) */
table.dataTable thead th div.dt-column-header {
  flex-direction: row !important;
  justify-content: flex-start !important;
  gap: 6px;
}

table.dataTable thead th div.dt-column-header span.dt-column-title {
  flex-grow: 0 !important;
}

/* Payment pills/selects */
.status.received,
.status-select.received {
  color: var(--teal-dark);
  background-color: var(--mint);
}

.status.pending,
.status-select.pending {
  color: var(--status-amber-ink);
  background-color: var(--amber-bg);
}

/* Status pills: no bullet points anywhere */
.status::before {
  display: none !important;
}

/* Clickable job number */
.link-underline {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Icon action buttons with hover tooltip */
.row-actions {
  display: flex;
  gap: 4px;
  align-items: center;
  white-space: nowrap;
}

.icon-action {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--primary);
  cursor: pointer;
  padding: 0;
  min-height: auto;
}

.icon-action:hover {
  border-color: #a8c5be;
  background: #f8fbf9;
  color: var(--teal-dark);
}

.icon-action.danger:hover {
  color: var(--red);
  border-color: #e5b4b8;
  background: var(--red-bg);
}

.icon-action[disabled] {
  opacity: .4;
  cursor: not-allowed;
}

.ico {
  display: block;
}

[data-tip] {
  position: relative;
}

[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 50;
  pointer-events: none;
}

.btn-small {
  min-height: 32px;
  padding: 0 10px;
  font-size: 12px;
  gap: 6px;
}

.btn .ico {
  width: 15px;
  height: 15px;
}

/* Sidebar user menu (replaces the top-right avatar menu) */
.sidebar-user {
  position: relative;
}

.user-mini-btn {
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
  display: flex;
  gap: 10px;
  align-items: center;
  color: #e8f3f0;
}

.user-mini-btn strong {
  color: #fff;
}

.user-mini-caret {
  margin-left: auto;
  color: #8eaba6;
  font-size: 20px !important;
}

.sidebar-user-menu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 8px);
  top: auto;
  min-width: 0;
}

@media (max-width:1100px) and (min-width:761px) {
  .sidebar-user-menu {
    left: 0;
    min-width: 220px;
    right: auto;
  }

  .user-mini-caret {
    display: none;
  }
}

/* MM/DD/YYYY inputs */
input.date-us {
  font-variant-numeric: tabular-nums;
}

.sidebar-user-menu,
.sidebar-user-menu strong {
  color: var(--ink);
}

.sidebar-user-menu .meta {
  color: var(--muted);
}

td.desc {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
  max-width: 520px;
  white-space: normal;
}

/* Interview date fields: mm/dd/yyyy text box with a calendar button */
.date-mdy-wrap {
  position: relative;
}

.date-mdy-wrap input.date-mdy {
  width: 100%;
  padding-right: 44px;
  font-variant-numeric: tabular-nums;
}

.date-mdy-btn {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--primary);
  cursor: pointer;
  padding: 0;
  min-height: auto;
}

.date-mdy-btn:hover {
  background: var(--canvas);
  color: var(--teal-dark);
}

/* The native date input sits invisibly over the button so a click still opens a picker in browsers without
   showPicker(); it has no name, so it is never submitted -- the text box beside it carries the value. */
.date-mdy-btn .date-mdy-picker {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  border: 0;
  padding: 0;
  margin: 0;
  min-height: auto;
}
/* Inline SVG icons (Lucide) replace the old Unicode glyphs in the sidebar. */
.icon {
  width: 18px;
  height: 18px;
  display: block;
  flex: none;
}

.nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.icon-btn .icon {
  width: 20px;
  height: 20px;
}

.user-mini-caret {
  display: inline-flex;
  align-items: center;
}

.user-mini-caret .icon {
  width: 16px;
  height: 16px;
}

/* Icon sizing per context: buttons, KPI tiles, wizard steps. */
.btn .icon {
  width: 16px;
  height: 16px;
}

.kpi-icon {
  display: inline-flex;
  align-items: center;
  color: var(--muted);
}

.kpi-icon .icon {
  width: 16px;
  height: 16px;
}

.step-num .icon {
  width: 14px;
  height: 14px;
}

.check {
  display: inline-flex;
  align-items: center;
}

.check .icon {
  width: 16px;
  height: 16px;
}

/* Dashboard quick actions: two per row, full-width items span both columns. */
.quick-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.quick-actions .full {
  grid-column: 1 / -1;
}

@media (max-width:520px) {
  .quick-actions {
    grid-template-columns: 1fr;
  }
}

/* Filters live inside the table card, so the toolbar drops its own card chrome. */
.panel > .toolbar {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  margin: 0;
  padding: 12px;
}

/* Payment selects read as pills, not form controls: content width and a small chevron. */
.status-select {
  width: auto;
  max-width: 100%;
  appearance: none;
  -webkit-appearance: none;
  padding: 4px 24px 4px 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236F8795' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 7px center;
  background-size: 11px;
}

.status-select:hover {
  filter: brightness(.97);
}

/* Wizard picker: search above the card grid, so long template lists stay usable. */
.choice-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.choice-toolbar input {
  flex: 1 1 240px;
  max-width: 340px;
}

.choice-toolbar .meta {
  white-space: nowrap;
}

/* Scrollbars: thin and theme-tinted everywhere (modals, tables, panels).
   The dark sidebar nav keeps its own lighter thumb via .sidebar-nav rules. */
* {
  scrollbar-width: thin;
  scrollbar-color: #C6D2D9 transparent;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #C6D2D9;
  border: 2px solid transparent;
  background-clip: content-box;
  border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
  background: #A6B7C1;
  border: 2px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* Clear filters: appears in a toolbar only while a filter is set. */
.filter-clear {
  font-size: 12px;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  min-height: auto;
}

.filter-clear:hover {
  color: var(--primary-dark);
}

/* Status picker: the pill is the trigger, the menu is a styled listbox
   (a native <select> popup cannot be styled by CSS). */
.status-picker {
  display: inline-block;
  position: relative;
  width: max-content;
  justify-self: start;
}

/* Anchor the menu under the pill's left edge. Inherited `right: 0` from .dropdown
   pushed it to the right edge of whatever the picker stretched to (e.g. a .field cell). */
.status-menu:not(.floating) {
  left: 0;
  right: auto;
  top: calc(100% + 4px);
}

.status-select {
  font-family: inherit;
  text-align: left;
  border: 1px solid transparent;
}

.status-select:hover {
  filter: brightness(.96);
}

.status-menu {
  min-width: 168px;
  padding: 6px;
}

.status-menu form {
  margin: 0;
}

.status-menu .status-option {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  min-height: auto;
  cursor: pointer;
}

.status-menu .status-option:hover {
  background: var(--canvas);
}

.status-option .status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
  flex: none;
}

.status-option.received .status-dot,
.status-option.paid .status-dot {
  background: var(--success);
}

.status-option.pending .status-dot,
.status-option.unpaid .status-dot {
  background: var(--amber);
}

.status-option.partially-paid .status-dot {
  background: var(--blue);
}

.status-option.is-current::after {
  content: "✓";
  margin-left: auto;
  color: var(--success);
  font-weight: 800;
}

/* Role badges: admin reads as elevated access, user as ordinary. */
.tag.role-admin {
  color: var(--status-amber-ink);
  background: var(--amber-bg);
  border-color: #EFDCA9;
  font-weight: 700;
}

.tag.role-user {
  color: var(--primary-dark);
  background: var(--blue-bg);
  border-color: #D5E0E7;
  font-weight: 700;
}

/* Account status had no pill colours, so it rendered as plain text. */
.status.active {
  color: var(--success);
  background: var(--success-bg);
}

.status.inactive {
  color: var(--muted);
  background: #EDF1F3;
}

/* Styled dropdown that replaces the unstyleable native <select> popup.
   The real <select> stays in the DOM (hidden) so forms keep working. */
.select-wrap {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.select-native {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  pointer-events: none;
}

.select-btn {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 40px;
  padding: 0 32px 0 12px;
  border: 1px solid #ccd9d5;
  border-radius: 5px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  text-align: left;
  white-space: nowrap;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236F8795' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 13px;
}

.select-btn:hover {
  border-color: #a8c5be;
}

.select-btn[aria-expanded="true"] {
  border-color: var(--teal);
}

.select-btn.is-placeholder .select-label {
  color: var(--muted);
}

.select-btn:disabled {
  background-color: #EDF1F3;
  color: #96A5AE;
  cursor: not-allowed;
}

.select-menu {
  position: absolute;
  z-index: 70;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  max-height: 264px;
  overflow-y: auto;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: var(--shadow);
}

.select-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: auto;
  padding: 8px 10px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.select-option:hover,
.select-option:focus {
  background: var(--canvas);
  outline: none;
}

.select-option.is-current {
  font-weight: 700;
}

.select-option.is-current::after {
  content: "✓";
  margin-left: auto;
  padding-left: 12px;
  color: var(--success);
}

/* Full width inside form fields, content width in toolbars. */
.field .select-wrap,
.form-stack .select-wrap {
  display: block;
  width: 100%;
}

/* In a form field a long choice ("Commercial Long Form Deed of Trust") wraps onto a second line instead of
   running past the box and over the arrow; the box grows taller, never wider, so side-by-side fields keep their
   columns. The open list wraps too and is capped at the viewport so it cannot run off the right edge. Toolbar
   dropdowns keep the one-line nowrap look. */
.field .select-btn {
  white-space: normal;
  padding-top: 8px;
  padding-bottom: 8px;
  line-height: 1.3;
}

.field .select-label {
  min-width: 0;
  overflow-wrap: anywhere;
}

.field .select-menu {
  max-width: min(100vw - 32px, 28rem);
}

.field .select-option {
  white-space: normal;
}

.toolbar .select-btn {
  min-height: 38px;
}

div.dt-container .select-btn {
  min-height: 32px;
  padding: 0 28px 0 10px;
  font-size: 12px;
}

/* Audit activity types: one tint per kind, so the log is scannable by category.
   All pairs clear 4.5:1 against their tint. */
.tag-auth {
  color: #3D5566;
  background: #E9EEF2;
  border-color: #D5DFE6;
}

.tag-edit {
  color: #1F6E63;
  background: var(--mint);
  border-color: #C4E3DA;
}

.tag-billing {
  color: var(--status-amber-ink);
  background: var(--amber-bg);
  border-color: #EFDCA9;
}

.tag-document,
.tag-upload {
  color: #574191;
  background: #EFEAF9;
  border-color: #DCD2F0;
}

.tag-publish {
  color: #2E5A92;
  background: #E7EFFA;
  border-color: #CFDFF2;
}

.tag-client {
  color: #1F6076;
  background: #E2F1F5;
  border-color: #C7E2EA;
}

.tag-users {
  color: #96324A;
  background: #FBEAEE;
  border-color: #F2D3DA;
}

.tag-settings {
  color: #5A6B75;
  background: #EDF1F3;
  border-color: #DCE3E7;
}

/* Audit pager sits inside the table card, like the DataTables footer on other lists. */
.panel > .pagination {
  margin: 0;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  gap: 12px;
}

/* Audit rows-per-page control, mirroring the DataTables "Show 25" footer. */
.page-size {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  margin-right: auto;
  font-weight: 700;
  color: var(--ink);
}

.page-size .select-btn,
.page-size select {
  min-height: 32px;
  padding: 0 28px 0 10px;
  font-size: 12px;
}

/* Read-only display fields are plain text, so they never take a focus ring or border. */
.plain-value,
.plain-value:focus,
.plain-value:focus-visible {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  outline: 0;
}

/* Audit pager: same look as the DataTables pager used on the other lists. */
.pager {
  display: flex;
  gap: 4px;
  align-items: center;
}

.pager-btn {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}

a.pager-btn:hover,
.pager-btn.current {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
  text-decoration: none;
}

.pager-btn.disabled {
  opacity: .4;
  cursor: default;
}

.pager-gap {
  padding: 0 2px;
  color: var(--muted);
}

/* Settings: grouped cards, each row a label column plus its controls. */
.settings-card + .settings-card {
  margin-top: 16px;
}

.settings-head {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.settings-head h2 {
  font-size: 16px;
}

.settings-head .meta {
  margin: 4px 0 0;
}

.settings-rows {
  display: grid;
}

.settings-row {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.settings-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.settings-label {
  display: grid;
  gap: 2px;
  font-weight: 700;
  font-size: 13px;
}

.settings-label .meta {
  font-weight: 400;
}

.settings-control > input,
.settings-control > select,
.settings-control > .select-wrap {
  width: 100%;
}

.settings-stack {
  display: grid;
  gap: 8px;
}

.settings-citystate {
  display: grid;
  grid-template-columns: 1fr 1fr 130px;
  gap: 8px;
}

.settings-row-logo {
  align-items: start;
}

.settings-row-logo .settings-label {
  padding-top: 10px;
}

.settings-logo {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.settings-logo-upload {
  display: grid;
  gap: 8px;
}

/* Inline dropzone: compact version of the full-width upload area. */
.dropzone-inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  text-align: left;
  cursor: pointer;
}

.dropzone-inline strong {
  display: block;
  font-size: 13px;
}

.dropzone-inline .meta {
  display: block;
  margin-top: 2px;
}

.settings-logo-actions {
  margin-top: 0;
}

.text-btn.danger {
  color: var(--red);
}

@media (max-width:760px) {
  .settings-row,
  .settings-logo {
    grid-template-columns: 1fr;
  }

  .settings-citystate {
    grid-template-columns: 1fr 1fr;
  }
}

/* Settings detail fixes: short numeric field, non-wrapping upload button,
   checkerboard behind the logo so transparent PNGs are readable. */
.settings-control.settings-inline input {
  width: 72px;
  flex: none;
}

.settings-control.settings-inline .meta {
  flex: 1 1 auto;
}

.dropzone-inline .btn {
  white-space: nowrap;
  flex: none;
}

.settings-logo-preview {
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #EEF2F4 25%, transparent 25%, transparent 75%, #EEF2F4 75%),
    linear-gradient(45deg, #EEF2F4 25%, transparent 25%, transparent 75%, #EEF2F4 75%);
  background-size: 14px 14px;
  background-position: 0 0, 7px 7px;
  justify-content: center;
}

.amount-value {
  margin: 5px 0 0;
  font: 700 30px/1.2 var(--font-heading);
  color: var(--ink);
}

/* Job header: status sits next to the job number. */
.job-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.job-title-row .status.generated::before,
.job-title-row .status.published::before,
.job-title-row .status.received::before,
.job-title-row .status.paid::before {
  content: "";
  display: block !important;
  width: 12px;
  height: 12px;
  background: currentColor;
  -webkit-mask: var(--check-mask) center / contain no-repeat;
  mask: var(--check-mask) center / contain no-repeat;
}

/* Job overview cards: quieter headings, so the content leads. */
.job-overview .section-head h2 {
  font-size: 16px;
}

.job-overview .not-set {
  color: var(--muted);
  font-weight: 400;
}

.done-tick {
  display: inline-flex;
  vertical-align: -3px;
  margin-right: 5px;
  color: var(--success);
}

.done-tick .icon {
  width: 14px;
  height: 14px;
}

/* Small caps label for a sub-group inside a card. */
.stack-label {
  margin: 18px 0 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Split rows: cards share the row height, including when a column wraps its panel. */
.split > div {
  display: flex;
  flex-direction: column;
}

.split > div > .panel:only-child {
  flex: 1 1 auto;
}

/* A single summary tile sizes to its content instead of a quarter of the row. */
.kpis-inline {
  grid-template-columns: repeat(auto-fit, minmax(220px, 260px));
  justify-content: start;
}

.kpi-note-amber {
  color: var(--amber);
}

/* Search leads the toolbar; give it room for its placeholder. */
.toolbar input[data-filter="search"] {
  flex: 1 1 260px;
  max-width: 340px;
}

/* Interview screen: the layout follows the tabs directly, so it needs the same
   breathing room a .page-head would give, and the question column needs card chrome. */
.tabs + .interview-layout,
.tabs + #interview-panel {
  margin-top: 15px;
}

.interview-main {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px;
}

/* Section list: labels and their ticks need a gap, and the active dot its own size. */
.interview-nav a,
.interview-nav .da-outline-btn,
.interview-nav .da-outline-pending {
  gap: 10px;
  align-items: center;
  line-height: 1.35;
}

.interview-nav a .check,
.interview-nav .da-outline-btn .check {
  flex: none;
}

/* Terminal screen actions: Back on the left, forward actions grouped on the right. */
.interview-actions {
  margin-top: 18px;
  align-items: center;
  gap: 10px;
}

.interview-actions .inline-form {
  order: -1;
  margin-right: auto;
}

/* Interview states as status pills (the summary badge used to be a plain grey tag). */
.status.completed {
  color: var(--success);
  background: var(--success-bg);
}

.status.completed::before {
  content: "";
  display: block !important;
  width: 11px;
  height: 11px;
  background: currentColor;
  -webkit-mask: var(--check-mask) center / contain no-repeat;
  mask: var(--check-mask) center / contain no-repeat;
}

.status.not-started {
  color: var(--muted);
  background: #EDF1F3;
}

.status.error {
  color: var(--red);
  background: var(--red-bg);
}

/* Choice screens: Back sits on the same row as the choices, on the left. */
.choice-actions {
  align-items: center;
}

.choice-actions .btn-back {
  margin-right: auto;
}

/* Empty state with its own heading: one centred block, heading included. */
.empty-state {
  display: grid;
  justify-items: center;
  gap: 6px;
}

.empty-state h2 {
  color: var(--ink);
  margin-bottom: 4px;
}

.empty-state .btn {
  margin-top: 12px;
}

/* Invoice detail: quieter headings and a denser field grid, so the two cards read as a summary. */
.invoice-detail .section-head h2 {
  font-size: 16px;
}

.invoice-detail .amount-value {
  font-size: 24px;
}

.invoice-detail .grid-2,
.invoice-detail .grid-3 {
  gap: 14px 20px;
}

.invoice-detail .not-set {
  color: var(--muted);
}

.invoice-detail .doc-info strong {
  font-size: 13px;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* "Open" carries an arrow, like other links that leave the page. */
.link .icon {
  width: 13px;
  height: 13px;
  display: inline-block;
  vertical-align: -1px;
  margin-left: 2px;
}

/* File/record badges carry a tint per kind instead of all reading the same. */
.file-icon.file-docx,
.file-icon.file-doc {
  color: #2E5A92;
  background: #E7EFFA;
  border-color: #CFDFF2;
}

.file-icon.file-pdf {
  color: #96324A;
  background: #FBEAEE;
  border-color: #F2D3DA;
}

.file-icon.file-job {
  color: var(--status-amber-ink);
  background: var(--amber-bg);
  border-color: #EFDCA9;
}

/* Waiting for docassemble to assemble the documents (interviews/assembly.py). The panel polls in place, so
   this is a state of the interview panel rather than a page of its own. */
.assembly-wait {
  text-align: center;
  padding: 56px 24px;
}
.assembly-wait h2 {
  margin-top: 20px;
}
.assembly-wait .meta {
  margin-top: 8px;
}
.assembly-wait .assembly-elapsed {
  margin-top: 18px;
  font-variant-numeric: tabular-nums;
}
.assembly-spinner {
  width: 34px;
  height: 34px;
  margin: 0 auto;
  border: 3px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: assembly-spin 900ms linear infinite;
}
@keyframes assembly-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .assembly-spinner { animation-duration: 2.4s; }
}

/* Interview progress bar shows its percentage beside it. */
.interview-progress-line {
  margin-bottom: 18px;
}

.interview-progress-line strong {
  font-size: 12px;
  color: var(--success);
  min-width: 34px;
  text-align: right;
}

/* Completion ring in the interview summary. */
.completion-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ring {
  position: relative;
  width: 60px;
  height: 60px;
  flex: none;
}

.ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.ring circle {
  fill: none;
  stroke-width: 3.5;
}

.ring-track {
  stroke: #E3EAEE;
}

.ring-fill {
  stroke: var(--success);
  stroke-linecap: round;
  transition: stroke-dasharray .3s ease;
}

.ring-pct {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.completion-text {
  display: grid;
  gap: 0;
  min-width: 0;
}

.completion-text strong {
  font-size: 15px;
  color: var(--success);
}

/* ---------- Reports: date filter, headline stats, charts ---------- */
.period-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Every preset fits without scrolling (the default menu stops at 264px), and the menu opens leftwards
   because the filter sits in the table's toolbar at the right. */
.period-filter .select-menu {
  max-height: min(440px, calc(100vh - 120px));
  left: auto;
  right: 0;
}

.period-custom {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.period-custom[hidden] {
  display: none;
}

.date-filter-custom {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.date-filter-custom[hidden] {
  display: none;
}

.date-filter-custom input.date-us,
.period-custom input.date-us {
  width: 110px;
}

.title-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* A soft count beside a page title ("3 members" on Team Performance). */
.count-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--blue-bg);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.stat-dots {
  display: flex;
  gap: 8px;
}

.stat-dot {
  min-width: 40px;
  height: 40px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-weight: 700;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 10px rgba(23, 43, 45, .04);
  cursor: default;
  font-variant-numeric: tabular-nums;
}

.stat-dot:hover,
.stat-dot:focus-visible {
  border-color: var(--primary-light);
  outline: 0;
}

/* The headline stats sit at the top of the page, so their hint opens below them. */
.stat-dot[data-tip]:hover::after,
.stat-dot[data-tip]:focus-visible::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 6px);
  bottom: auto;
  left: 0;
  transform: none;
  background: var(--ink);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 50;
  pointer-events: none;
}

@media (min-width:761px) {
  .split-wide {
    grid-template-columns: 2.4fr 1fr;
  }
}

.chart-legend {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.chart-legend i {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
}

/* The Top clients dropdown sits at the panel's right edge, so its list opens leftwards, like the date filter's. */
.top-metric .select-menu {
  left: auto;
  right: 0;
}

/* Jobs column chart shared by the reports: one group per row, jobs on the left axis, invoiced (when shown)
   on the right. Bar and tick positions are percentages of each axis's top, from views/reports._jobs_chart. */
.col-chart {
  margin: 12px 0 0;
  padding-bottom: 44px;
  min-width: 0;
}

.col-legend {
  justify-content: flex-end;
  margin-bottom: 12px;
}

.col-plot {
  display: grid;
  grid-template-columns: 64px 1fr 64px;
  height: 280px;
}

/* Two count series share the one jobs axis, so there is no right axis, only a small gutter. */
.col-plot.col-plot-single {
  grid-template-columns: 64px 1fr 12px;
}

.col-axis {
  position: relative;
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.col-axis span {
  position: absolute;
  right: 8px;
  transform: translateY(50%);
  white-space: nowrap;
}

.col-axis-right span {
  right: auto;
  left: 8px;
}

/* Axis titles, turned to run up the side as in a printed chart. */
.col-axis em {
  position: absolute;
  top: 50%;
  left: 4px;
  font-style: normal;
  font-weight: 600;
  writing-mode: vertical-rl;
  transform: translateY(-50%) rotate(180deg);
}

.col-axis-right em {
  left: auto;
  right: 4px;
  transform: translateY(-50%);
}

/* Groups spread edge to edge: the first starts at the left axis, the last ends at the right. */
.col-area {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
}

.col-grid {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px dashed var(--line);
}

.col-group {
  position: relative;
  flex: 0 1 98px;
  min-width: 0;
  height: 100%;
  display: flex;
  justify-content: center;
  gap: 2px;
}

/* The name sits under its group, below the baseline, a little wider than the group and up to two lines,
   so many groups (Template Performance) never run their names into each other. */
.col-name {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% + 16px);
  font-size: 12px;
  line-height: 1.3;
  text-align: center;
  overflow: hidden;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.col-slot {
  position: relative;
  flex: 1 1 0;
  max-width: 48px;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: flex-end;
  outline: 0;
}

.col-bar {
  position: relative;
  display: block;
  width: 100%;
  min-height: 3px;
  border-radius: 4px 4px 0 0;
}

.col-jobs { background: var(--primary-dark); }
.col-invoiced { background: var(--accent); }
.col-generated { background: var(--success); }
.col-received { background: var(--success); }
.col-outstanding { background: var(--accent); }

.col-slot:hover .col-bar,
.col-slot:focus-visible .col-bar {
  filter: brightness(1.12);
}

.col-value {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Dollar figures (the invoiced bars' values and the right axis) wear the darker amber of the invoiced series. */
.col-chart-money .col-slot-other .col-value,
.col-chart-money .col-axis-right {
  color: var(--status-amber-ink);
}

/* A zero shows as a faint line on the baseline with a muted value. */
.col-slot.is-zero .col-bar {
  background: var(--line);
}

.col-slot.is-zero .col-value {
  color: var(--muted);
  font-weight: 600;
}

/* Invoiced split into received (bottom) and outstanding (top), 2px apart. */
.col-bar.col-stack {
  display: flex;
  flex-direction: column-reverse;
  gap: 2px;
  background: none;
}

.col-stack>i {
  display: block;
  min-height: 2px;
}

.col-stack>i:last-of-type {
  border-radius: 4px 4px 0 0;
}

@media (max-width:760px) {
  .period-filter {
    justify-content: flex-start;
  }

  .col-plot {
    grid-template-columns: 48px 1fr 52px;
  }

  .col-plot.col-plot-single {
    grid-template-columns: 48px 1fr 12px;
  }

  .col-axis em {
    display: none;
  }
}

/* ---- Interview subquestion text (docassemble's HTML) and the review answer book ----------------------
   Scoped to these classes only. The global p/h margins are 0, which made the subquestion's paragraphs and
   headings run together; here they get normal spacing again. */
.da-subquestion { margin-top: 6px; color: var(--muted); line-height: 1.55; }
.da-subquestion p { margin: 0 0 8px; }
.da-subquestion p:last-child { margin-bottom: 0; }
.da-subquestion h1, .da-subquestion h2, .da-subquestion h3, .da-subquestion h4 { margin: 14px 0 6px; color: var(--ink); }
.da-subquestion ul, .da-subquestion ol { margin: 0 0 8px; padding-left: 20px; }
.da-subquestion li { margin: 2px 0; }

.da-review { margin-bottom: 24px; }
.da-review-section { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 14px 16px; margin-bottom: 16px; }
.da-review-heading { margin: 0 0 10px; font-size: 15px; color: var(--ink); }
.da-review-subheading { margin: 14px 0 6px; font-size: 13px; color: var(--primary); text-transform: none; }
.da-review-table { width: 100%; min-width: 0; table-layout: fixed; border-collapse: collapse; }
.da-review-table th, .da-review-table td { padding: 8px 10px; border-top: 1px solid var(--line); vertical-align: top; text-align: left; white-space: normal; overflow-wrap: anywhere; font-size: 14px; }
.da-review-table tr:first-child th, .da-review-table tr:first-child td { border-top: 0; }
.da-review-table th { width: 42%; color: var(--muted); font-weight: 600; letter-spacing: 0; text-transform: none; }
.da-review-table td { color: var(--ink); }
@media (max-width: 640px) {
  .da-review-table th, .da-review-table td { display: block; width: auto; padding: 4px 0; border-top: 0; }
  .da-review-table tr { display: block; padding: 6px 0; border-top: 1px solid var(--line); }
  .da-review-table tr:first-child { border-top: 0; }
}

/* Interview review screen: the answer book scrolls inside a box as tall as the window allows (laptop or monitor
   alike), leaving room for the button bar; the answer form holding Back / Continue sticks to the bottom of the
   window, so the buttons stay visible however far the page is scrolled. Its containing block is .interview-main,
   which spans the box, so sticky has room to work. */
.da-review-scroll {
  max-height: calc(100vh - 160px);
  max-height: calc(100dvh - 160px);
  min-height: 240px;
  overflow-y: auto;
  padding-right: 6px;
  margin-bottom: 12px;
}
.da-review-scroll .da-review { margin-bottom: 0; }
.da-review-actions {
  position: sticky;
  bottom: 0;
  z-index: 5;
  margin: 0 -18px -18px;
  padding: 12px 18px;
  background: var(--surface, #fff);
  border-top: 1px solid var(--line);
  border-radius: 0 0 var(--r) var(--r);
}

/* Stat tiles: icon chip + figure, used beside a report title. */
.stat-tiles {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.stat-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  min-width: 150px;
}

.stat-tile-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  flex: none;
}

.stat-tile-icon .icon {
  width: 17px;
  height: 17px;
}

.stat-tile-icon.tone-mint {
  background: var(--mint);
  color: var(--success);
}

.stat-tile-icon.tone-blue {
  background: #E7EFFA;
  color: #2E5A92;
}

.stat-tile-icon.tone-green {
  background: #E6F4E9;
  color: #2F7A46;
}

.stat-tile-icon.tone-amber {
  background: var(--amber-bg);
  color: var(--status-amber-ink);
}

.stat-tile-text strong {
  display: block;
  font-size: 18px;
  line-height: 1.1;
}

.stat-tile-text .meta {
  font-size: 11px;
}

/* Stat tile tooltips wrap, since these explanations are sentences, not labels. */
.stat-tile[data-tip]:hover::after,
.stat-tile[data-tip]:focus-visible::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 8px);
  bottom: auto;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 240px;
  white-space: normal;
  line-height: 1.35;
  text-align: left;
  background: var(--ink);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 6px 9px;
  border-radius: 5px;
  box-shadow: var(--shadow);
  z-index: 50;
}

/* Keep the last tile's tooltip inside the viewport. */
.stat-tiles .stat-tile:last-child[data-tip]:hover::after,
.stat-tiles .stat-tile:last-child[data-tip]:focus-visible::after {
  left: auto;
  right: 0;
  transform: none;
}

.stat-tile:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}