/* QuoteFlow v13.3 — shared website design system. Customer PDF styles live
   in quotation.css and retain their existing fonts, colours and geometry. */
:root {
  --primary: #191817;
  --accent: #b98262;
  --accent-ink: #805338;
  --accent-hover: #2d2925;
  --accent-soft: #efe7df;
  --text: #272522;
  --muted: #74706b;
  --border: #e7e0d8;
  --surface: #ffffff;
  --background: #f7f4f0;
  --error: #a23c36;
  --success: #46624d;
  --warning: #8b6735;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --heading-font: Georgia, "Times New Roman", serif;
  --radius: 18px;
  --radius-small: 11px;
  --shadow: 0 4px 18px #19181704;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-padding-top: 110px; }
body { margin: 0; font-family: var(--font); color: var(--text); background: var(--background); font-size: 15px; line-height: 1.5; }
button, input, select, textarea { font: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .5; }
button[aria-busy="true"] { cursor: wait; }
a { color: var(--accent-ink); text-underline-offset: 4px; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 11px 20px; border: 1px solid var(--primary); border-radius: var(--radius-small); background: var(--primary); color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; line-height: 1.35; transition: background .15s, border-color .15s; }
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.secondary { background: var(--surface); border-color: var(--border); color: var(--text); }
.btn.secondary:hover { background: #f9f6f2; border-color: #cbbbac; }
.btn.small { min-height: 44px; padding: 9px 14px; font-size: 13px; }
.btn.danger { background: var(--error); border-color: var(--error); }
.btn.danger:hover { background: #87312c; border-color: #87312c; }
.quiet-button, .text-button { border: 0; background: none; min-height: 44px; padding: 8px 0; color: var(--accent-ink); font-size: 14px; font-weight: 500; }
.quiet-button:hover, .text-button:hover { text-decoration: underline; text-underline-offset: 4px; }
.small { font-size: 13px; }
.muted { color: var(--muted); }
.eyebrow { color: var(--accent-ink); font-size: 11px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.control-label { display: grid; gap: 8px; min-width: 0; font-size: 13px; font-weight: 600; }
.control-label input, .control-label select, .control-label textarea { width: 100%; min-width: 0; max-width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-small); background: var(--surface); color: var(--text); font-size: 16px; font-weight: 400; }
.control-label input::placeholder { color: #948b82; }
.control-label input:focus, .control-label select:focus, .control-label textarea:focus { border-color: var(--accent); }
.control-label textarea { min-height: 96px; resize: vertical; }
.control-label input[readonly] { background: #f7f4f0; color: var(--muted); }
.control-label input[aria-invalid="true"] { border-color: var(--error); }
.field-error { color: var(--error); font-size: 13px; font-weight: 400; line-height: 1.45; scroll-margin-top: 120px; }
.message { padding: 15px 17px; border: 1px solid var(--border); border-radius: 12px; background: #f7f4f0; margin: 20px 0; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.message[data-kind="error"] { color: #883830; background: #fbf1ed; border-color: #edd6cd; }
/* Invitation-only authentication: decorative curves are CSS, copy is HTML. */
.auth-page { min-height: 100svh; display: grid; grid-template-columns: 54% 46%; background: #fcfbf9; }
.auth-intro { position: relative; isolation: isolate; overflow: hidden; background: var(--background); padding: 52px clamp(40px, 6vw, 90px); display: flex; flex-direction: column; justify-content: space-between; gap: 70px; }
.auth-wordmark, .auth-card-brand { display: inline-flex; align-items: center; width: fit-content; text-decoration: none; color: var(--primary); font-size: 24px; font-weight: 650; letter-spacing: -.8px; }
.brand-logo { display: block; width: 174px; height: auto; max-height: 52px; object-fit: contain; object-position: left center; }
.auth-wordmark .brand-logo { width: 216px; max-height: 64px; }
.auth-card-brand { font-size: 20px; margin-bottom: 29px; }
.auth-card-brand .brand-logo { width: 155px; max-height: 44px; }
.auth-copy { position: relative; z-index: 1; max-width: 590px; margin: auto 0; }
.auth-intro h1 { font-family: var(--heading-font); font-size: clamp(43px, 4.3vw, 68px); font-weight: 400; line-height: 1.09; letter-spacing: -2.3px; margin: 0 0 27px; }
.auth-intro h1 span { display: block; }
.auth-intro .intro-copy { max-width: 450px; margin: 0 0 42px; font-size: 16px; line-height: 1.75; color: #6f665e; }
.auth-values { display: grid; gap: 20px; padding: 0; margin: 0; list-style: none; }
.auth-values li { display: flex; align-items: flex-start; gap: 15px; }
.auth-values .value-number { display: grid; place-items: center; flex: 0 0 33px; min-height: 33px; border: 1px solid #d9c8b9; border-radius: 50%; color: var(--accent-ink); font-size: 11px; margin-top: 3px; }
.auth-values strong { font-size: 14px; font-weight: 600; }
.auth-values p { margin: 4px 0 0; color: #79716a; font-size: 13px; }
.auth-footer { position: relative; z-index: 1; font-size: 11px; letter-spacing: 1.25px; color: var(--muted); text-transform: uppercase; }
.auth-flow { position: absolute; z-index: -1; top: -210px; right: -285px; width: 600px; height: 600px; border: 66px solid #b9826211; border-radius: 50%; transform: rotate(-24deg); }
.auth-flow::before { content: ""; position: absolute; inset: 38px; border: 1px solid #b9826230; border-radius: 50%; }
.auth-flow::after { content: ""; position: absolute; width: 105px; height: 380px; right: 175px; top: 410px; background: #b9826210; border: 1px solid #b982621c; border-radius: 65px; transform: rotate(-32deg); }
.auth-main { padding: 48px clamp(24px, 4vw, 62px); display: flex; align-items: center; justify-content: center; min-width: 0; }
.auth-card { width: 100%; max-width: 455px; background: var(--surface); border: 1px solid var(--border); border-radius: 22px; padding: 38px 36px; box-shadow: 0 8px 32px #19181704; }
.auth-eyebrow { color: var(--accent-ink); font-size: 11px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; margin: 0 0 10px; }
.auth-card h2 { font-family: var(--heading-font); font-size: 36px; line-height: 1.16; font-weight: 400; letter-spacing: -.9px; margin: 0 0 12px; }
.auth-card #auth-subtitle { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 0 0 30px; }
.auth-form { display: grid; gap: 21px; }
.auth-form .btn { width: 100%; margin-top: 2px; }
.auth-options { display: flex; justify-content: flex-end; margin: -10px 0 -4px; }
.auth-card .auth-switch { margin: 24px 0 0; padding-top: 22px; border-top: 1px solid var(--border); color: var(--muted); text-align: center; font-size: 12px; }
#signin-switch { padding: 0; border: 0; margin-top: 8px; }
#approval-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 22px; }
/* Existing Agent/Admin header, access gates and dynamic company chooser. */
.app-header, .saas-header { background: #fffdfb; border-bottom: 1px solid var(--border); }
.app-header { position: sticky; top: 0; z-index: 30; }
.header-inner, .saas-header-inner { max-width: 1320px; min-height: 82px; margin: auto; padding: 18px 40px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.brand, .saas-brand { display: inline-flex; align-items: center; gap: 10px; flex: none; color: var(--primary); text-decoration: none; font-size: 23px; font-weight: 650; letter-spacing: -.9px; }
.brand-mark { display: grid; place-items: center; width: 32px; height: 36px; border: 1px solid #d8c1ac; border-radius: 9px; color: var(--accent-ink); background: var(--accent-soft); }
.brand-mark svg { width: 20px; height: 20px; }
.account-area { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 18px; min-width: 0; }
.account-details { text-align: right; font-size: 11px; min-width: 0; max-width: 260px; overflow-wrap: anywhere; }
.account-details strong { display: block; font-size: 13px; font-weight: 600; }
.account-details span { display: block; color: var(--muted); }
.account-area .btn, .account-area .quiet-button { min-height: 44px; font-size: 12px; }
.gate-screen { width: min(840px, 100%); margin: 64px auto; padding: 0 24px; }
.gate-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 38px; box-shadow: var(--shadow); }
#gate.gate-panel { width: min(800px, calc(100% - 48px)); }
.gate-panel::before { content: ""; display: block; width: 44px; height: 44px; border: 1px solid #d8c1ac; border-radius: 14px; background: #efe7df; box-shadow: inset 0 0 0 12px #f8f3ee; margin-bottom: 25px; }
.gate-panel h1 { font-family: var(--heading-font); font-weight: 400; font-size: 36px; line-height: 1.2; letter-spacing: -.8px; margin: 0 0 15px; }
.gate-panel p { color: var(--muted); font-size: 15px; line-height: 1.7; margin: 0 0 24px; }
.gate-panel .eyebrow { margin-bottom: 12px; }
.company-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 14px; margin-top: 30px; }
.company-card { display: block; text-decoration: none; padding: 24px; border: 1px solid var(--border); border-radius: 14px; background: #fcfaf7; color: var(--text); min-width: 0; overflow-wrap: anywhere; transition: border-color .15s, background .15s; }
.company-card:hover { border-color: var(--accent); background: #f5ede5; }
.company-card strong { display: block; font-size: 17px; font-weight: 600; }
.company-card span { display: block; margin-top: 16px; color: var(--accent-ink); font-size: 12px; }
.company-context { max-width: 1200px; margin: 22px auto 0; padding: 0 40px; display: flex; align-items: center; justify-content: flex-end; gap: 16px; font-size: 12px; }
.company-context strong { margin-right: 12px; }
.save-bar { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 22px 0 0; margin: 24px 0 12px; border-top: 1px solid var(--border); }
.save-bar > div, .save-actions { display: flex; flex-wrap: wrap; gap: 10px; }
#save-status { color: var(--muted); font-size: 12px; }
/* Administration: three real sections, distinct Account/Subscription/Access. */
.admin-shell { max-width: 1320px; min-height: calc(100svh - 82px); margin: auto; display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 34px; padding: 34px 40px 60px; }
.admin-nav { position: sticky; top: 28px; align-self: start; display: flex; flex-direction: column; gap: 8px; padding: 18px 12px; border: 1px solid var(--border); background: #fffdfb; border-radius: 16px; }
.admin-nav .eyebrow { padding: 0 12px; margin-bottom: 12px; font-size: 10px; }
.admin-nav button { position: relative; min-height: 46px; padding: 11px 15px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--muted); text-align: left; font-size: 13px; font-weight: 500; }
.admin-nav button[aria-current="page"] { color: var(--accent-ink); background: #f3ebe3; border-color: #e9d8c9; font-weight: 600; }
.admin-content { min-width: 0; }
.admin-content h1 { margin: 0 0 9px; font-family: var(--heading-font); font-size: 38px; font-weight: 400; line-height: 1.2; letter-spacing: -.8px; }
.section-heading { margin: 8px 0 30px; }
.section-heading p { margin: 0; color: var(--muted); font-size: 13px; }
.stats-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 23px 24px; }
.stat-card span { display: block; font-size: 12px; color: var(--muted); }
.stat-card strong { display: block; margin-top: 19px; font-size: 35px; line-height: 1.15; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -1px; }
.toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 23px 0; }
.toolbar .control-label { flex: 1 1 170px; }
.toolbar .control-label input { width: 100%; }
.admin-panel { margin-top: 24px; padding: 27px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); scroll-margin-top: 24px; }
.admin-panel h2 { margin: 0 0 20px; font-size: 19px; font-weight: 600; }
.admin-panel .account-heading, .admin-panel .access-heading { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border); }
.form-note { max-width: 620px; color: var(--muted); font-size: 13px; line-height: 1.7; margin: -3px 0 24px; }
.table-scroll { overflow: hidden; border: 1px solid var(--border); border-radius: 15px; background: var(--surface); }
.data-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 12px; }
.data-table th { background: #f8f5f1; color: var(--muted); padding: 14px 15px; text-align: left; font-size: 11px; font-weight: 600; }
.data-table td { padding: 16px 15px; border-top: 1px solid #eee8e1; vertical-align: middle; overflow-wrap: anywhere; }
.data-table tr:hover td { background: #fdfbf8; }
.data-table td .small { font-size: 11px; white-space: pre-line; color: var(--muted); }
.agents-view .data-table th:first-child { width: 24%; }
.agents-view .data-table th:nth-child(2) { width: 17%; }
.agents-view .data-table th:nth-child(3) { width: 21%; }
.agents-view .data-table th:nth-child(4) { width: 26%; }
.agents-view .data-table th:last-child { width: 12%; }
.agents-view .data-table td:last-child .btn { min-width: 55px; padding: 9px 11px; }
.empty-cell { color: var(--muted); padding: 40px 20px !important; text-align: center; }
.status-badge { display: inline-block; padding: 5px 8px; max-width: 100%; border-radius: 7px; background: #f2eeea; color: #68625d; font-size: 10px; font-weight: 500; line-height: 1.35; text-transform: capitalize; overflow-wrap: anywhere; }
.status-badge[data-status="active"], .status-badge[data-status="Active"], .status-badge[data-status="Configured"] { background: #edf2ed; color: #45604a; }
.status-badge[data-status="pending"], .status-badge[data-status="trial"], .status-badge[data-status="Scheduled"] { background: #f7efdf; color: #806234; }
.status-badge[data-status="suspended"], .status-badge[data-status="Suspended"], .status-badge[data-status="disabled"], .status-badge[data-status="Expired"] { background: #f8ece7; color: #925346; }
.agent-form, .insurance-fields, .subscription-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 800px; }
.full-width { grid-column: 1 / -1; }
.agent-form > .btn { grid-column: 1 / -1; justify-self: start; }
.subscription-fields .control-label, .subscription-fields input, .subscription-fields select { min-width: 0; width: 100%; }
.subscription-section { padding-top: 25px; margin-top: 28px; border-top: 1px solid var(--border); }
.subscription-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 21px; margin: 0 0 24px; max-width: 760px; }
.subscription-summary dt { color: var(--muted); font-size: 11px; }
.subscription-summary dd { margin: 6px 0 0; font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.subscription-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.insurance-card { border-top: 1px solid var(--border); padding: 24px 0; }
.insurance-card h3 { margin: 0 0 20px; font-size: 16px; }
.access-toggle { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 13px; }
.access-toggle input { width: 19px; height: 19px; accent-color: var(--primary); }
.insurer-access-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 12px; }
.insurer-access-option { min-width: 0; padding: 15px 17px; border: 1px solid var(--border); border-radius: 11px; cursor: pointer; }
.insurer-access-option:has(input:checked) { border-color: #c7a68d; background: #faf4ed; }
.insurer-access-option input { flex: 0 0 19px; }
.insurer-access-option span { min-width: 0; overflow-wrap: anywhere; }
.insurer-access-form > p { margin: 18px 0; font-size: 13px; color: var(--muted); line-height: 1.7; }
.insurer-access-form > button { margin-top: 22px; min-height: 44px; }
.pagination { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 14px; margin-top: 20px; color: var(--muted); font-size: 12px; }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); max-width: calc(100% - 32px); border: 1px solid #44403b; border-radius: 12px; padding: 14px 21px; background: var(--primary); color: #fff; z-index: 100; font-size: 13px; box-shadow: 0 4px 15px #19181714; }
@media (max-width: 1180px) {
  .admin-shell { display: block; }
  .admin-nav { position: static; flex-direction: row; padding: 5px; margin-bottom: 25px; gap: 4px; border-radius: 12px; }
  .admin-nav .eyebrow { display: none; }
  .admin-nav button { flex: 1; min-width: 0; text-align: center; padding: 10px 12px; }
}
@media (max-width: 1100px) {
  .stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .auth-page { grid-template-columns: 52% 48%; }
  .auth-intro { padding: 40px 36px; gap: 40px; }
  .auth-intro h1 { font-size: 47px; }
  .auth-main { padding: 36px 24px; }
  .auth-card { padding: 32px 28px; }
  .admin-shell { padding: 28px 24px; }
  .data-table th, .data-table td { padding-left: 12px; padding-right: 12px; }
}
@media (max-width: 900px) {
  .auth-page { grid-template-columns: 1fr; }
  .auth-intro { padding: 26px 32px; min-height: 90px; gap: 0; border-bottom: 1px solid var(--border); }
  .auth-copy, .auth-footer { display: none; }
  .auth-flow { top: -450px; right: -220px; }
  .auth-main { padding: 36px 24px; align-items: flex-start; }
  .auth-card { max-width: 455px; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 740px) {
  html { scroll-padding-top: 22px; }
  .app-header { position: static; }
  .header-inner, .saas-header-inner { padding: 18px 20px; gap: 16px; }
  .brand-logo { width: 156px; max-height: 45px; }
  .account-area { width: 100%; justify-content: space-between; gap: 10px; }
  .account-details { flex: 1 1 110px; text-align: left; }
  .gate-screen { margin: 30px auto; padding: 0 20px; }
  #gate.gate-panel { width: calc(100% - 40px); }
  .gate-panel { padding: 26px; }
  .gate-panel h1 { font-size: 31px; }
  .company-context { padding: 0 20px; }
  .admin-shell { padding: 24px 20px 40px; }
  .admin-nav button { padding: 10px 5px; font-size: 12px; }
  .admin-content h1 { font-size: 34px; }
  .section-heading { margin-bottom: 24px; }
  .admin-panel { padding: 24px 20px; }
  .data-table thead { display: none; }
  .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; }
  .data-table tr { padding: 14px 0; border-bottom: 1px solid var(--border); }
  .data-table tr:last-child { border-bottom: 0; }
  .data-table td { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding: 8px 18px; border: 0; align-items: start; }
  .data-table td[data-label]::before { content: attr(data-label); color: var(--muted); font-size: 11px; }
  .data-table .empty-cell { display: block; }
  .agents-view .data-table td:last-child { display: flex; justify-content: flex-end; }
  .agents-view .data-table td:last-child::before { display: none; }
  .subscription-summary { gap: 20px; }
}
@media (max-width: 480px) {
  .auth-intro { padding: 22px 24px; min-height: 82px; }
  .auth-wordmark .brand-logo { width: 178px; max-height: 48px; }
  .auth-main { padding: 24px 16px; }
  .auth-card { padding: 28px 23px; border-radius: 18px; }
  .auth-card h2 { font-size: 33px; }
  .auth-card-brand { margin-bottom: 26px; }
  .header-inner, .saas-header-inner { padding: 16px; }
  .gate-screen { padding: 0 16px; }
  #gate.gate-panel { width: calc(100% - 32px); }
  .gate-panel { padding: 24px 21px; }
  .gate-panel h1 { font-size: 29px; }
  .admin-shell { padding: 22px 16px 36px; }
  .admin-panel { padding: 23px 18px; }
  .agent-form, .insurance-fields, .subscription-fields, .subscription-summary { grid-template-columns: 1fr; }
  .full-width { grid-column: auto; }
  .subscription-actions .btn { flex: 1 1 100%; }
  .save-bar { align-items: flex-start; flex-direction: column; }
  .save-bar > div { width: 100%; }
  .save-bar .btn { flex: 1; padding-left: 10px; padding-right: 10px; }
  .stats-grid { gap: 12px; }
  .stat-card { padding: 20px 17px; }
  .stat-card strong { font-size: 30px; }
  .data-table td { grid-template-columns: 95px minmax(0, 1fr); gap: 10px; padding: 8px 16px; }
  .pagination { justify-content: space-between; gap: 9px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }
@media print {
  .saas-header, .account-area, .company-context, .save-bar, .gate-screen, .admin-shell, #gate { display: none !important; }
}