/* Integration details for the Capacitate desktop and phone layouts. */
.main { max-width: 1560px; }
.sidebar { height: 100dvh; padding-top: 27px; padding-bottom: 21px; }
.brand { flex-shrink: 0; margin-bottom: 27px; }
.brand-icon { font-size: 25px; font-weight: 750; letter-spacing: -1px; }
.nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; align-content: start; gap: 5px; scrollbar-width: thin; scrollbar-color: #567a73 transparent; padding-bottom: 6px; }
.nav-btn { min-height: 42px; padding-top: 10px; padding-bottom: 10px; }
.nav-symbol { display: inline-flex; width: 18px; height: 20px; flex: 0 0 18px; align-items: center; justify-content: center; font-size: 19px; font-weight: 400; line-height: 1; color: #b1c8bf; }
.nav-btn[aria-current="page"] .nav-symbol { color: #d2e4d7; }
.sidebar-footer { flex: 0 0 auto; gap: 11px; margin-top: 18px; padding: 18px 5px 0; }
.sidebar-footer .profile-photo { display: block; width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; object-fit: cover; border: 1px solid #729387; }
.profile-mark { width: 36px; height: 36px; flex-basis: 36px; }
.sidebar-footer > div { min-width: 0; }
.sidebar-footer .version-label { align-self: center; }
.topbar > div, .top-actions, .panel-header > div, .form-section, .common-support, .client-billing-card { min-width: 0; }
.top-actions:empty { display: none; }
.data-table td { font-size: 12px; }
.data-table td .code-label, .document-lines td .small-text, .code-label { overflow-wrap: anywhere; word-break: break-word; white-space: normal; }
.field select, select.input, select.select { max-width: 100%; text-overflow: ellipsis; }
.field-label { line-height: 1.5; }
.field > .select { width: 100%; }
.field-label > .input, .field-label > select, .field-label > .textarea { display: block; margin-top: 7px; font-weight: 400; }
.field-label .select { font-weight: 400; }
.field-hint { overflow-wrap: anywhere; }
.modal.wide { width: min(940px, 100%); }

.period-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 19px; padding: 21px 24px; border-bottom: 1px solid #e6eee5; background: #fbfdf9; }
.period-toolbar .eyebrow { margin-bottom: 5px; font-size: 9px; }
.period-toolbar > div:first-child > strong { display: block; color: #4b6e54; font-size: 14px; font-weight: 600; }
.period-toolbar .period-nav { gap: 8px; }
.period-toolbar .date-jump { margin-left: 10px; }
.period-toolbar .date-jump .input { min-width: 132px; }
.dashboard-notices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; margin-bottom: 24px; }
.dashboard-notices:empty { display: none; }
.dashboard-notices > .panel, .dashboard-notices > .panel + .panel { min-width: 0; margin: 0; }
.dashboard-notices > .panel:last-child:nth-child(odd) { grid-column: 1 / -1; }
.dashboard-notices .panel-header { padding: 18px 21px; }
.dashboard-notices .panel-title { font-size: 14px; }
.dashboard-notices .panel-subtitle { font-size: 10px; }
.dashboard-notices .c-birthday-list { padding: 0 21px; }
.dashboard-notices .c-birthday { padding: 15px 0; }
.dashboard-notices .c-birthday strong { display: block; font-size: 12px; font-weight: 600; margin-bottom: 3px; }
.dashboard-notices .c-birthday .small-text { font-size: 10px; }

.common-support { padding: 20px; border: 1px solid #d6e4d4; border-radius: 10px; background: #f5f9ef; margin-top: 22px; }
.common-support .billing-section-header { margin-bottom: 20px; }
.common-support .billing-section-header .field-hint { max-width: 520px; margin: 7px 0 0; }
.common-support fieldset, .common-support .fieldset { min-width: 0; margin: 0; border: 0; padding: 0; }
.common-support legend { color: #4b7253; font-size: 13px; font-weight: 600; margin-bottom: 12px; }
.client-billing-card { border-color: #dfe8d9; background: #f9fcf5; padding: 20px; margin-top: 16px; }
.client-billing-card .billing-header { padding-bottom: 13px; margin-bottom: 20px; border-bottom: 1px solid #e0eadd; }
.client-billing-card .field-hint + .form-row, .common-support .field-hint + .form-row { margin-top: 16px; }
.travel-code-details { border: 1px solid #e2eadd; border-radius: 7px; background: rgba(255,255,255,.7); padding: 12px 14px; margin: 0 0 19px; }
.travel-code-details summary, .client-billing-card > details > summary { color: #78916e; font-size: 11px; font-weight: 600; cursor: pointer; }
.travel-code-details[open] summary { margin-bottom: 15px; }
.travel-code-details .field:last-child { margin-bottom: 0; }
.entry-price-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 15px; margin-top: 17px; border: 1px solid #dae6d5; border-radius: 7px; background: #edf5e6; }
.entry-price-summary strong { flex-shrink: 0; color: #527148; font-size: 13px; font-weight: 650; }
.entry-price-summary > span { text-align: right; font-size: 10px; line-height: 1.65; overflow-wrap: anywhere; }
.billing-note { margin: 18px 24px 0; }
.billing-client-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(265px, 1fr)); gap: 17px; padding: 22px 24px 25px; }
.billing-client-grid > .empty-state { grid-column: 1 / -1; }
.billing-client { min-width: 0; padding: 21px; border: 1px solid #dfe9dc; border-radius: 10px; background: #f8fbf5; }
.billing-client h2 { margin: 0 0 6px; color: #456a50; font-size: 15px; font-weight: 650; overflow-wrap: anywhere; }
.billing-client > .small-text { font-size: 11px; }
.billing-client .btn { white-space: normal; margin-top: 6px; }
.invoice-total { color: #416c51; font-size: 27px; font-weight: 650; line-height: 1.25; letter-spacing: -.7px; margin: 18px 0; font-variant-numeric: tabular-nums; }
.quote-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 19px; }
.quote-grid > .panel, .quote-grid > .panel + .panel { min-width: 0; margin: 0; }
.quote-grid > .empty-state { grid-column: 1 / -1; }
.quote-card { display: flex; flex-direction: column; padding: 23px; }
.quote-card-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.quote-card-header .eyebrow { margin: 0; font-size: 9px; overflow-wrap: anywhere; }
.quote-card h2 { margin: 0 0 7px; font-size: 17px; font-weight: 650; line-height: 1.45; color: #42614e; overflow-wrap: anywhere; }
.quote-card > p { margin: 0 0 12px; font-size: 12px; color: #799179; }
.quote-card > .small-text { font-size: 11px; line-height: 1.7; }
.quote-card .top-actions { flex-wrap: wrap; justify-content: flex-start; margin-top: auto; padding-top: 5px; gap: 6px; }
.quote-card .top-actions .btn { padding: 7px 9px; font-size: 10px; }
.business-photo-row { display: flex; align-items: center; gap: 18px; padding: 16px; border: 1px solid #dfe8d8; border-radius: 9px; background: #f6faf0; margin-bottom: 25px; }
.business-photo { display: block; width: 74px; height: 74px; flex: 0 0 74px; border-radius: 18px; object-fit: cover; border: 1px solid #dae6d3; }
.business-photo.placeholder { display: grid; place-items: center; background: #e5efdc; color: #789b65; font-size: 25px; font-weight: 600; }
.business-photo-row > div { min-width: 0; }
.business-photo-row .link-btn { display: inline-flex; margin: 7px 0 0 10px; }
.business-photo-row .file-button { max-width: 100%; white-space: normal; text-align: center; }
.business-photo-row .field-hint { font-size: 10px; }
.line-warning { color: #ac7655; font-size: 10px; font-weight: 500; line-height: 1.65; margin-top: 5px; overflow-wrap: anywhere; }

/* These modules share the page title rendered by the app shell. */
.pc-config > .topbar > div:first-child, .rm-page > .topbar > div:first-child { display: none; }
.pc-config > .topbar, .rm-page > .topbar { justify-content: flex-end; margin: -4px 0 20px; gap: 0; }
.pc-config > .topbar .top-actions, .rm-page > .topbar .top-actions { width: auto; justify-content: flex-end; }
.rm-page > .local-banner { margin-top: 0; }

/* Invoice and quote previews occupy their own scrolling sheet. */
body.document-open { overflow: hidden; }
.document-overlay { position: fixed; inset: 0; z-index: 180; overflow: auto; overscroll-behavior: contain; padding: 0 28px 45px; background: #e8efec; }
.document-controls { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; width: min(1110px, 100%); margin: 0 auto 26px; padding: 18px 0; background: rgba(232,239,236,.97); border-bottom: 1px solid #d8e3dd; backdrop-filter: blur(6px); }
.document-controls .btn:first-child { margin-right: auto; }
.print-document { width: min(1110px, 100%); min-height: 760px; margin: 0 auto; padding: 49px 46px; background: #fff; color: #2b4944; border: 1px solid #dae5df; border-radius: 4px; box-shadow: 0 12px 35px rgba(40,70,56,.08); }
.document-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 35px; padding-bottom: 27px; margin-bottom: 26px; border-bottom: 2px solid #bad4c2; }
.document-header > div { min-width: 0; }
.document-header h1 { color: #244e45; font-size: 29px; letter-spacing: -.8px; line-height: 1.25; margin: 9px 0 14px; }
.document-header p { font-size: 12px; line-height: 1.8; color: #6f8579; margin: 10px 0 0; overflow-wrap: anywhere; }
.document-meta { flex: 0 1 38%; text-align: right; }
.document-meta h2 { color: #466f55; font-size: 19px; letter-spacing: -.4px; line-height: 1.4; margin: 4px 0 0; overflow-wrap: anywhere; }
.document-meta > strong { display: block; font-size: 14px; margin-top: 18px; overflow-wrap: anywhere; }
.print-document > h2 { font-size: 20px; margin: 18px 0 10px; color: #43654c; }
.print-document > p { font-size: 12px; line-height: 1.8; color: #637b6b; overflow-wrap: anywhere; }
.print-document > .table-wrap { margin: 24px 0 0; }
.document-lines { min-width: 760px; width: 100%; table-layout: fixed; }
.document-lines th, .document-lines td { vertical-align: top; padding: 13px 10px; font-size: 11px; line-height: 1.7; white-space: normal !important; overflow-wrap: anywhere; word-break: normal; }
.document-lines th { font-size: 9px; letter-spacing: .4px; }
.document-lines th:first-child, .document-lines td:first-child { width: 18%; padding-left: 12px; }
.document-lines th:nth-child(2), .document-lines td:nth-child(2) { width: 31%; }
.document-lines th:nth-child(3), .document-lines td:nth-child(3) { width: 10%; }
.document-lines th:nth-child(4), .document-lines td:nth-child(4) { width: 12%; }
.document-lines th:nth-child(5), .document-lines td:nth-child(5) { width: 16%; }
.document-lines th:last-child, .document-lines td:last-child { width: 13%; padding-right: 12px; text-align: right; }
.document-lines td .small-text { font-size: 9px; line-height: 1.65; margin-top: 5px; color: #849785; }
.document-total { display: block; text-align: right; padding: 20px 0; margin: 5px 0 20px; border-bottom: 1px solid #dce7d9; color: #426b4b; font-size: 24px; font-weight: 650; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.payment-details { padding: 20px 23px; margin: 26px 0; border: 1px solid #dde8d8; border-radius: 7px; background: #f5f9ef; }
.payment-details h3 { font-size: 12px; color: #55794c; margin: 0 0 10px; }
.payment-details p { font-size: 11px; line-height: 1.8; color: #78906e; margin: 0; overflow-wrap: anywhere; }
.print-document .small-text { font-size: 11px; }

@media (max-width: 1300px) {
  .quote-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .sidebar { padding-top: 23px; }
  .brand { margin-bottom: 22px; }
  .nav-btn { min-height: 41px; padding-left: 10px; padding-right: 10px; }
  .nav-symbol { font-size: 17px; }
  .sidebar-footer { padding-left: 0; padding-right: 0; gap: 8px; }
  .sidebar-footer .profile-photo, .sidebar-footer .profile-mark { width: 30px; height: 30px; flex-basis: 30px; }
  .period-toolbar { gap: 16px; padding: 19px 22px; }
  .period-toolbar .period-nav { width: auto; flex-wrap: wrap; justify-content: flex-start; }
  .period-toolbar .date-jump { margin-left: 7px; }
  .dashboard-notices { grid-template-columns: 1fr; }
  .dashboard-notices > .panel:last-child:nth-child(odd) { grid-column: auto; }
  .billing-client-grid { padding: 20px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .quote-card { padding: 21px; }
  .print-document { padding: 35px 28px; }
}
@media (max-width: 720px) {
  .sidebar { height: auto; padding: 13px 19px 0; }
  .brand { margin-bottom: 11px; }
  .brand-icon { font-size: 20px; }
  .nav { flex: initial; overflow-x: auto; overflow-y: hidden; gap: 2px; padding-bottom: 0; align-content: normal; }
  .nav-btn { min-height: 42px; padding: 12px 10px; }
  .nav-symbol { width: 15px; flex-basis: 15px; font-size: 17px; }
  .sidebar-footer { display: none; }
  .main { padding-top: 24px; }
  .modal.wide { width: 100%; }
  input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]), select, textarea, .input, .textarea, .search-input, .select, .pc-rate-input { font-size: 16px; }
  .period-toolbar { padding: 18px 16px; gap: 16px; }
  .period-toolbar > div:first-child > strong { font-size: 13px; }
  .period-toolbar .period-nav { width: 100%; gap: 7px; }
  .period-toolbar .date-jump { flex: 1 1 100%; margin: 6px 0 0; padding: 0; }
  .period-toolbar .date-jump .input { min-width: 160px; }
  .dashboard-notices { gap: 15px; margin-bottom: 20px; }
  .dashboard-notices .panel-header { padding: 18px 16px; }
  .dashboard-notices .c-birthday-list { padding: 0 16px; }
  .common-support { padding: 16px; margin-top: 20px; }
  .common-support .form-row { grid-template-columns: 1fr; gap: 0; }
  .common-support .billing-section-header .btn { width: 100%; }
  .entry-price-summary { align-items: flex-start; flex-direction: column; gap: 5px; padding: 13px; }
  .entry-price-summary > span { text-align: left; font-size: 11px; }
  .billing-note { margin: 16px 16px 0; }
  .billing-client-grid { padding: 17px 16px; grid-template-columns: 1fr; gap: 13px; }
  .billing-client { padding: 19px; }
  .quote-grid { grid-template-columns: 1fr; gap: 14px; }
  .quote-card { padding: 21px; }
  .quote-card .top-actions { width: auto; }
  .business-photo-row { gap: 13px; padding: 13px; align-items: flex-start; }
  .business-photo { width: 58px; height: 58px; flex-basis: 58px; border-radius: 14px; }
  .business-photo-row .btn { min-height: 36px; font-size: 10px; padding: 8px 10px; }
  .business-photo-row .link-btn { margin-left: 0; }
  .pc-config > .topbar, .rm-page > .topbar { align-items: flex-end; flex-direction: row; margin-top: 0; }
  .pc-config > .topbar .top-actions, .rm-page > .topbar .top-actions { width: 100%; }
  .document-overlay { padding: 0 12px 24px; }
  .document-controls { gap: 7px; margin-bottom: 14px; padding: 12px 0; }
  .document-controls .btn { min-height: 37px; padding: 8px 10px; font-size: 10px; white-space: normal; }
  .document-controls .btn:first-child { margin-right: 0; }
  .print-document { min-height: 600px; padding: 25px 20px; }
  .document-header { gap: 20px; }
  .document-header h1 { font-size: 23px; }
  .document-header p { font-size: 10px; }
  .document-meta { flex-basis: 40%; }
  .document-meta h2 { font-size: 15px; }
  .document-meta > strong { font-size: 12px; }
  .document-total { font-size: 21px; }
}
@media (max-width: 430px) {
  .document-header { flex-direction: column; gap: 19px; }
  .document-meta { text-align: left; flex-basis: auto; }
  .document-meta > strong { margin-top: 10px; }
  .business-photo-row { flex-direction: column; }
}

@page { size: A4; margin: 14mm 12mm; }
@media print {
  html, body, body.document-open { width: auto !important; height: auto !important; min-height: 0 !important; overflow: visible !important; background: #fff !important; color: #182f2a; }
  body.document-open { margin: 0 !important; padding: 0 !important; }
  body.document-open > #app, body.document-open > #modal-root, body.document-open > #toast-root { display: none !important; }
  body.document-open > #document-root { display: block !important; position: static !important; width: auto !important; height: auto !important; overflow: visible !important; }
  .document-overlay { display: block !important; position: static !important; inset: auto !important; width: auto !important; height: auto !important; max-height: none !important; padding: 0 !important; overflow: visible !important; background: #fff !important; }
  .document-controls { display: none !important; }
  .print-document { display: block !important; position: static !important; width: 100% !important; max-width: none !important; min-height: 0 !important; height: auto !important; overflow: visible !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: #fff !important; font-size: 10pt; }
  .print-document *, .print-document *::before, .print-document *::after { box-shadow: none !important; text-shadow: none !important; }
  .document-header { display: flex !important; flex-direction: row !important; gap: 8mm; padding-bottom: 6mm; margin-bottom: 6mm; break-inside: avoid-page; }
  .document-header h1 { font-size: 20pt; }
  .document-header p { font-size: 9pt; }
  .document-meta { flex-basis: 38%; text-align: right; }
  .document-meta h2 { font-size: 14pt; }
  .document-meta > strong { font-size: 11pt; }
  .print-document > .table-wrap, .table-wrap { display: block !important; max-height: none !important; height: auto !important; width: auto !important; overflow: visible !important; break-inside: auto !important; }
  .document-lines { display: table !important; min-width: 0 !important; width: 100% !important; table-layout: fixed !important; border-collapse: collapse !important; break-inside: auto !important; }
  .document-lines thead { display: table-header-group !important; position: static !important; }
  .document-lines tbody { display: table-row-group !important; }
  .document-lines tr { break-inside: avoid-page; page-break-inside: avoid; }
  .document-lines th, .document-lines td { overflow: visible !important; white-space: normal !important; overflow-wrap: anywhere !important; word-break: normal !important; max-height: none !important; padding: 3mm 2mm; font-size: 8pt; line-height: 1.6; color: #294437; }
  .document-lines th { font-size: 7pt; color: #4b6954; background: #f4f7f0 !important; }
  .document-lines th:first-child, .document-lines td:first-child { padding-left: 2mm; }
  .document-lines th:last-child, .document-lines td:last-child { padding-right: 2mm; }
  .document-lines .small-text, .document-lines td .small-text { font-size: 7pt; }
  .document-total { break-inside: avoid-page; margin-top: 2mm; margin-bottom: 5mm; padding: 5mm 0; font-size: 16pt; }
  .payment-details { break-inside: avoid-page; background: #fff !important; border: 1px solid #cfdacb; padding: 5mm; margin: 6mm 0; }
  .payment-details h3 { font-size: 9pt; }
  .payment-details p, .print-document > p, .print-document .small-text { font-size: 8pt; line-height: 1.7; }
  .line-warning { font-size: 7pt; color: #79552f !important; }
  .print-document a { color: inherit; text-decoration: none; }
}