@charset "UTF-8";

:root {
  --forest: #064b3c;
  --forest-hover: #003b2e;
  --charcoal: #252c2a;
  --burgundy: #802b40;
  --paper: #fff;
  --canvas: #f4f6f5;
  --line: #dce3df;
  --muted: #626e68;
  --green-wash: #e9f3ee;
  --rose-wash: #f8edf0;
  --amber: #795511;
  --amber-wash: #fbf4e4;
  color-scheme: light;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  color: var(--charcoal);
  background: var(--canvas);
  font-synthesis: none;
}

* { box-sizing: border-box; letter-spacing: 0; }
body { margin: 0; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .48; }
button, a, input, select, textarea { outline-offset: 3px; }
:focus-visible { outline: 2px solid #23826b; }
button, a, th, td, p, dd, strong, span { overflow-wrap: anywhere; }
a { color: var(--forest); }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 25px; line-height: 1.25; font-weight: 650; }
h2 { font-size: 18px; line-height: 1.35; font-weight: 650; }
h3 { font-size: 14px; line-height: 1.4; font-weight: 650; }
h1:focus { outline: none; }
svg, i[data-lucide] { width: 18px; height: 18px; flex: 0 0 18px; vertical-align: middle; }
i[data-lucide] { display: inline-block; }
input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--forest); cursor: pointer; flex: 0 0 16px; }
input[type="checkbox"]:disabled { cursor: not-allowed; opacity: .4; }
input:not([type="checkbox"]), select, textarea {
  width: 100%; min-width: 0; border: 1px solid #c9d3cd; border-radius: 5px;
  background: var(--paper); color: var(--charcoal); padding: 9px 10px; line-height: 1.4;
}
textarea { resize: vertical; min-height: 70px; }
select { min-height: 38px; padding-right: 26px; }
input::placeholder, textarea::placeholder { color: #77817c; opacity: 1; }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
fieldset:disabled input, fieldset:disabled select, fieldset:disabled textarea { background: #f1f3f2; color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.mono { font-family: "Cascadia Mono", Consolas, monospace; font-size: 12px; }
.small { font-size: 12px; }
.muted { color: var(--muted); }
.numeric { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nowrap { white-space: nowrap; }
.push-right { margin-left: auto; }
.overdue-text { color: var(--burgundy); }
.desk { min-height: 100vh; display: grid; grid-template-columns: 232px minmax(0, 1fr); }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 30; width: 232px; display: flex; flex-direction: column; background: var(--forest); color: #fff; padding: 28px 14px 16px; overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; padding: 0 8px 29px; }
.brand img { object-fit: contain; background: #fff; border-radius: 5px; flex: 0 0 52px; }
.brand > span { min-width: 0; }
.brand strong { display: block; font-size: 22px; font-weight: 700; line-height: 1.2; }
.brand span span { display: block; font-size: 13px; margin-top: 3px; color: #e2ede8; }
.sidebar-label { font-size: 10px; font-weight: 650; color: #afcec1; padding: 4px 12px 12px; }
.sidebar nav { display: flex; flex-direction: column; gap: 5px; }
.nav-item { display: flex; gap: 12px; align-items: center; border: 0; border-radius: 5px; background: transparent; color: #d9e9e1; padding: 12px; text-align: left; min-height: 44px; font-size: 13px; }
.nav-item:hover { background: #145d4d; color: #fff; }
.nav-item.active { background: #fff; color: var(--forest); font-weight: 650; box-shadow: inset 3px 0 0 #a8c9b6; }
.sidebar-bottom { margin-top: auto; padding: 34px 6px 0; }
.source-mini { display: flex; align-items: center; gap: 8px; color: #e5eeea; font-size: 12px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #e6a1ad; flex: 0 0 7px; }
.status-dot.online { background: #88d6b5; }
.sidebar-caption { display: block; margin: 8px 0 22px; color: #bad2c6; font-size: 11px; }
.user-block { display: flex; gap: 9px; align-items: center; border-top: 1px solid #39705f; padding-top: 18px; }
.avatar { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border: 1px solid #7aab94; border-radius: 5px; font-weight: 650; }
.user-block > div { flex: 1; min-width: 0; }
.user-block strong { display: block; font-size: 12px; font-weight: 600; }
.user-block small { display: block; margin-top: 3px; font-size: 11px; color: #bad2c6; }
.user-block .button { color: #fff; background: transparent; border-color: transparent; }
.user-block .button:hover { background: #145d4d; }
.workspace { grid-column: 2; min-width: 0; }
.topbar { height: 64px; padding: 0 28px; background: #fff; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; }
.breadcrumb { display: flex; align-items: center; gap: 12px; font-size: 12px; min-width: 0; color: var(--muted); }
.breadcrumb strong { font-weight: 600; color: var(--charcoal); }
.breadcrumb svg { width: 13px; height: 13px; flex-basis: 13px; color: #8a9690; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 7px; min-height: 36px; max-width: 100%; padding: 8px 11px; border: 1px solid #cdd7d1; border-radius: 5px; background: #fff; color: var(--charcoal); text-decoration: none; font-size: 12px; line-height: 1.4; font-weight: 600; text-align: center; }
.button:hover:not(:disabled) { background: #eff4f1; border-color: #a8bdb0; }
.button.primary { background: var(--forest); color: #fff; border-color: var(--forest); }
.button.primary:hover:not(:disabled) { background: var(--forest-hover); border-color: var(--forest-hover); }
.button.danger { background: var(--burgundy); border-color: var(--burgundy); color: #fff; }
.button.danger:hover:not(:disabled) { background: #662033; border-color: #662033; }
.button.icon-button { width: 34px; height: 34px; min-height: 34px; padding: 7px; flex-shrink: 0; }
.text-button { border-color: transparent; background: transparent; color: var(--forest); padding: 5px 7px; min-height: 30px; }
.menu-toggle { display: none; }
main { padding: 28px; max-width: 1800px; margin: 0 auto; }
.page-content { min-width: 0; }
.page-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 25px; }
.page-heading p { margin-top: 7px; font-size: 12px; color: var(--muted); }
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: #fff; border: 1px solid var(--line); margin-bottom: 24px; }
.metric { padding: 19px 20px; display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; border-right: 1px solid var(--line); }
.metric:last-child { border-right: 0; }
.metric > div { min-width: 0; }
.metric span { display: block; color: var(--muted); font-size: 11px; font-weight: 600; }
.metric strong { display: block; font-size: 23px; font-weight: 650; margin-top: 8px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.metric svg { color: #628172; width: 17px; height: 17px; }
.metric.overdue strong, .metric.overdue svg { color: var(--burgundy); }
.table-tools { display: flex; align-items: center; gap: 10px; padding: 14px 0; border-top: 1px solid var(--line); }
.search { display: flex; gap: 9px; align-items: center; padding: 0 11px; min-width: 180px; width: 360px; max-width: 100%; border: 1px solid #c9d3cd; background: #fff; border-radius: 5px; }
.search svg { color: #738379; width: 16px; height: 16px; }
.search input { border: 0; padding: 10px 0; background: transparent; font-size: 12px; }
.search:focus-within { outline: 2px solid #23826b; outline-offset: 2px; }
.search input:focus-visible { outline: none; }
.filter-label { min-width: 145px; max-width: 240px; }
.filter-label select { font-size: 12px; }
.selection-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; min-height: 43px; padding: 0 0 10px; font-size: 11px; color: var(--muted); }
.selection-bar .button { font-size: 11px; }
.table-scroll { position: relative; max-width: 100%; overflow: auto; border: 1px solid var(--line); background: #fff; scrollbar-width: thin; scrollbar-color: #a5b7ac #f0f4f1; }
table { border-collapse: collapse; width: 100%; min-width: 980px; font-size: 12px; text-align: left; }
th { padding: 12px 14px; color: #5c6961; font-size: 10px; font-weight: 650; white-space: nowrap; background: #eef2ef; border-bottom: 1px solid var(--line); }
td { padding: 14px; border-bottom: 1px solid #e7ece9; vertical-align: middle; line-height: 1.5; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fafcfb; }
tbody tr.selected-row { background: #eef7f1; }
.client-link { border: 0; padding: 0; color: var(--forest); background: transparent; font: inherit; font-weight: 650; text-align: left; }
.client-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.cell-secondary { font-size: 10px; color: var(--muted); margin-top: 4px; line-height: 1.45; }
.recommendation-cell { min-width: 180px; max-width: 265px; }
.event-cell { min-width: 220px; }
.badge { display: inline-flex; align-items: center; max-width: 100%; padding: 3px 7px; background: #eef1ef; color: #526058; border-radius: 3px; font-size: 10px; line-height: 1.4; font-weight: 600; }
.badge.green { background: var(--green-wash); color: var(--forest); }
.badge.burgundy { background: var(--rose-wash); color: var(--burgundy); }
.badge.amber { background: var(--amber-wash); color: var(--amber); }
.notice { display: flex; align-items: flex-start; gap: 10px; border: 1px solid #c5dbce; background: var(--green-wash); color: var(--forest); padding: 13px 15px; margin-bottom: 22px; border-radius: 5px; font-size: 12px; line-height: 1.5; }
.notice > svg { margin-top: 1px; }
.notice > .button { margin-left: auto; }
.notice strong { font-weight: 650; }
.notice p { margin-top: 3px; }
.notice.error { background: var(--rose-wash); border-color: #e9c5cd; color: var(--burgundy); }
.notice.warning { background: var(--amber-wash); border-color: #e5d5ae; color: var(--amber); }
.notice-body { flex: 1; min-width: 0; }
.notice ul { padding-left: 17px; margin: 8px 0 0; max-height: 200px; overflow: auto; }
.empty-state { padding: 64px 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; border-top: 1px solid var(--line); }
.empty-state > svg { width: 29px; height: 29px; color: #82988b; }
.empty-state h2 { font-size: 16px; }
.empty-state p { color: var(--muted); font-size: 12px; max-width: 440px; line-height: 1.6; }
.empty-state .button { margin-top: 6px; }
.settings-form { max-width: 900px; }
.settings-section { padding: 24px 0; border-top: 1px solid var(--line); }
.settings-section:first-child { padding-top: 20px; }
.settings-section h2 { font-size: 15px; margin-bottom: 20px; }
.definition-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px 24px; margin: 0; }
.definition-grid > div { min-width: 0; }
dt { font-size: 10px; color: var(--muted); margin-bottom: 5px; }
dd { margin: 0; font-size: 12px; line-height: 1.5; font-weight: 550; white-space: pre-wrap; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 15px; min-width: 0; }
.field > label { font-size: 11px; font-weight: 650; }
.check-field { display: flex; align-items: flex-start; gap: 10px; font-size: 12px; line-height: 1.5; margin: 3px 0 18px; }
.check-field input { margin-top: 1px; }
.check-field:last-child { margin-bottom: 0; }
.form-footer { display: flex; justify-content: flex-end; padding-top: 20px; border-top: 1px solid var(--line); }
.desk-overlay-open { overflow: hidden; }
.drawer-layer, .modal-layer { position: fixed; inset: 0; z-index: 70; }
.overlay-scrim { position: absolute; inset: 0; background: rgb(14 26 20 / 38%); }
.case-drawer { position: absolute; inset: 0 0 0 auto; width: min(620px, 100%); display: flex; flex-direction: column; background: #fff; box-shadow: -12px 0 38px rgb(0 0 0 / 12%); }
.drawer-header, .modal-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding: 22px 24px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.drawer-header h2 { margin-top: 5px; }
.eyebrow { font-size: 10px; color: var(--muted); }
.drawer-body { overflow-y: auto; flex: 1; min-height: 0; padding: 0 24px 24px; overscroll-behavior: contain; }
.case-state { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-top: 20px; }
.drawer-section { padding: 23px 0; border-bottom: 1px solid var(--line); }
.drawer-section:last-child { border-bottom: 0; }
.drawer-section h3 { margin-bottom: 17px; }
.drawer-section > p, .drawer-section fieldset > p { margin: 10px 0 15px; line-height: 1.6; }
.drawer-section .table-scroll { margin-top: 12px; }
.drawer-section table { min-width: 500px; font-size: 11px; }
.drawer-section td, .drawer-section th { padding: 10px; }
.timeline { padding: 0; margin: 0; list-style: none; }
.timeline li { border-left: 2px solid #d1e3d8; margin-left: 3px; padding: 0 0 20px 15px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline-meta, .history-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 11px; }
.timeline time { color: var(--muted); font-size: 10px; }
.note-body { white-space: pre-wrap; font-size: 12px; line-height: 1.65; margin-top: 7px; }
.timeline .text-button { margin-top: 6px; margin-left: -7px; }
.modal-layer { z-index: 90; display: flex; align-items: center; justify-content: center; padding: 24px; }
.modal { position: relative; width: 560px; max-width: 100%; max-height: calc(100dvh - 48px); background: #fff; border-radius: 7px; box-shadow: 0 15px 60px rgb(0 0 0 / 19%); display: flex; flex-direction: column; }
.modal-header { padding: 19px 22px; align-items: center; }
.modal-header h2 { font-size: 17px; }
.modal-body { padding: 22px; overflow-y: auto; min-height: 0; overscroll-behavior: contain; }
.modal-body > p { margin-bottom: 17px; font-size: 13px; line-height: 1.6; }
.modal-body > p:last-child { margin-bottom: 0; }
.modal-body h3 { margin-bottom: 20px; }
.modal-body .definition-grid { margin-bottom: 22px; }
.modal-footer { border-top: 1px solid var(--line); padding: 16px 22px; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 9px; flex-shrink: 0; }
.review-list { list-style: none; padding: 0; margin: 16px 0; }
.review-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 5px 14px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.review-list li > .muted { grid-column: 1; grid-row: 2; font-size: 11px; }
.review-list li > .badge { grid-column: 2; grid-row: 1 / 3; }
.document-actions { display: flex; flex-wrap: wrap; gap: 9px; padding: 4px 0 20px; border-bottom: 1px solid var(--line); }
.approval-line { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding-top: 20px; }
.busy-message, .modal-error { padding: 0 22px 16px; font-size: 12px; color: var(--muted); }
.modal-error { color: var(--burgundy); }
.nav-scrim { display: none; }
.company-selector { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.company-selector > span { font-size: 10px; font-weight: 600; }
.sidebar > .company-selector { margin: 0 8px 24px; color: #e2ede8; }
.company-selector select { font-size: 12px; text-overflow: ellipsis; }
.topbar .company-selector { width: 200px; }
.topbar .company-selector > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.companies-view > .table-scroll table { min-width: 620px; }
.connection-section { margin-top: 28px; }
.connection-label { margin: -8px 0 20px; }
.connection-actions { display: flex; flex-wrap: wrap; gap: 10px; padding: 16px 0; border-top: 1px solid var(--line); }
.field-hint, .mapping-fields { margin: 0 0 18px; line-height: 1.6; overflow-wrap: anywhere; }
.connection-result { border-left: 3px solid var(--forest); padding: 14px 16px; margin-top: 12px; background: var(--green-wash); font-size: 12px; line-height: 1.6; }
.connection-result.test-error { border-color: var(--burgundy); background: var(--rose-wash); color: var(--burgundy); }
.connection-result p { margin-top: 7px; white-space: pre-wrap; }
.connection-result .table-scroll { margin-top: 14px; }
.connection-result table { min-width: 420px; }

@media (min-width: 1500px) {
  main { padding: 32px 36px; }
  td { padding-top: 16px; padding-bottom: 16px; }
}
@media (max-width: 1150px) {
  .topbar .company-selector { width: 160px; }
  .desk { grid-template-columns: 210px minmax(0, 1fr); }
  .sidebar { width: 210px; padding-left: 10px; padding-right: 10px; }
  .brand { gap: 9px; padding-left: 5px; padding-right: 5px; }
  .brand img { width: 46px; height: 46px; flex-basis: 46px; }
  .brand strong { font-size: 21px; }
  .brand span span { font-size: 12px; }
  main { padding: 24px 20px; }
  .topbar { padding: 0 20px; }
  .metric { padding: 16px 14px; }
  .metric strong { font-size: 20px; }
  .table-tools { flex-wrap: wrap; }
  .search { flex: 1 1 260px; }
  .filter-label { flex: 1 1 145px; }
}
@media (max-width: 800px) {
  .topbar .company-selector { width: 150px; }
  .desk { display: block; }
  .sidebar { transform: translateX(-100%); visibility: hidden; width: 250px; z-index: 60; }
  .menu-open .sidebar { transform: none; visibility: visible; }
  .nav-scrim { display: block; position: fixed; inset: 0; z-index: 50; background: rgb(14 26 20 / 38%); border: 0; }
  .menu-toggle { display: inline-flex; }
  .topbar { padding: 0 16px; height: 60px; gap: 9px; }
  .breadcrumb { gap: 7px; }
  .breadcrumb > span { display: none; }
  .breadcrumb > svg { display: none; }
  .breadcrumb::before { content: 'Madai'; font-weight: 700; color: var(--forest); }
  .topbar-actions { gap: 8px; }
  main { padding: 23px 16px; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric:nth-child(2) { border-right: 0; }
  .metric:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .page-heading { align-items: flex-start; }
  h1 { font-size: 23px; }
  .metric strong { font-size: 22px; }
  .filter-label { max-width: none; }
}
@media (max-width: 480px) {
  .topbar .company-selector { width: 125px; }
  .topbar-actions > .badge, .breadcrumb strong { display: none; }
  .topbar-actions { min-width: 0; }
  h1 { font-size: 21px; }
  .topbar { padding: 0 10px; gap: 6px; }
  .breadcrumb { font-size: 10px; gap: 7px; }
  .topbar-actions { gap: 4px; }
  .topbar-actions .badge { font-size: 9px; padding: 3px 5px; }
  main { padding: 20px 12px; }
  .page-heading { flex-wrap: wrap; gap: 14px; margin-bottom: 20px; }
  .page-heading > .button { min-height: 38px; }
  .metric { padding: 15px 12px; gap: 5px; }
  .metric strong { font-size: 20px; }
  .metric svg { display: none; }
  .search { flex-basis: 100%; }
  .filter-label { min-width: 0; flex-basis: calc(50% - 5px); }
  .filter-label select { padding-left: 8px; font-size: 11px; }
  .selection-bar .push-right { flex-basis: 100%; margin-left: 0; }
  .form-grid, .form-grid.three { grid-template-columns: 1fr; gap: 0; }
  .drawer-header { padding: 18px; }
  .drawer-body { padding-left: 18px; padding-right: 18px; }
  .drawer-header h2 { font-size: 18px; }
  .definition-grid { gap: 17px 14px; }
  .modal-layer { padding: 12px; }
  .modal { max-height: calc(100dvh - 24px); }
  .modal-header, .modal-body { padding: 18px; }
  .modal-footer { padding: 14px 18px; }
  .modal-footer > .button { flex: 1 1 auto; }
  .modal-header h2 { font-size: 16px; }
  .notice { padding: 12px; gap: 8px; }
  .review-list li { grid-template-columns: minmax(0, 1fr); }
  .review-list li > .badge { grid-column: 1; grid-row: 3; justify-self: start; }
}
@media (prefers-reduced-motion: no-preference) {
  .sidebar { transition: transform .16s ease-out; }
}