@charset "UTF-8";

:root {
  color-scheme: light;
  --bg: #f5f7f5;
  --surface: #fff;
  --ink: #23332f;
  --muted: #84918a;
  --line: #e7ece8;
  --teal: #27766a;
  --forest: #153c39;
  --green-light: #edf5ee;
  --gold: #d8b977;
  --red: #b35d4d;
  --radius: 14px;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-synthesis: none;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
body:has(dialog[open]) { overflow: hidden; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .55; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { outline: none; }
:focus-visible { outline: 3px solid #d1ac62; outline-offset: 3px; }
button:focus-visible, a:focus-visible { outline-offset: 3px; }
input:focus, select:focus, textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px #27766a12; }
button svg, a svg { flex-shrink: 0; }
svg { vertical-align: middle; }
h1, h2, h3, h4, p { margin-top: 0; }
h1 { margin-bottom: 6px; font-size: clamp(25px, 2.3vw, 32px); font-weight: 650; line-height: 1.25; letter-spacing: -.8px; }
h2 { font-size: 17px; font-weight: 620; letter-spacing: -.3px; }
h3 { font-size: 15px; font-weight: 620; }
p { margin-bottom: 12px; }
small { font-size: 12px; }
[hidden] { display: none !important; }
.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 30; display: flex; flex-direction: column; width: 244px; padding: 30px 16px 18px; color: #d2dfd9; background: var(--forest); overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 11px; padding: 0 11px 34px; }
.brand-mark { display: grid; flex: 0 0 38px; width: 38px; height: 42px; place-items: center; color: var(--gold); font-size: 42px; line-height: 1; }
.brand-mark svg { width: 35px; height: 39px; }
.brand-name { display: block; color: #fff; font-size: 17px; font-weight: 650; line-height: 1.25; letter-spacing: -.3px; }
.brand-caption { display: block; margin-top: 5px; color: #90afa5; font-size: 8px; letter-spacing: 1.4px; text-transform: uppercase; }
.nav-label { margin: 9px 14px 12px; color: #82a098; font-size: 10px; font-weight: 600; letter-spacing: 1.7px; text-transform: uppercase; }
.nav-link { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 45px; margin-bottom: 5px; padding: 11px 14px; border: 0; border-radius: 7px; color: #c2d3cb; background: transparent; font-size: 13px; font-weight: 450; text-align: left; transition: background .15s, color .15s; }
.nav-link:hover { color: white; background: #ffffff0c; }
.nav-link.active { color: #fff; background: #ffffff12; box-shadow: inset 3px 0 var(--gold); }
.nav-link.active .nav-icon { color: #dbc58c; }
.nav-icon { display: inline-flex; flex: 0 0 18px; width: 18px; height: 18px; color: #96b3a8; }
.nav-icon svg { width: 18px; height: 18px; }
.nav-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; margin-left: auto; padding: 0 5px; border-radius: 5px; color: #b9d4c8; background: #ffffff10; font-size: 10px; }
.sidebar nav + .nav-label, .sidebar nav + nav { margin-top: 22px; }
.sidebar-bottom { margin-top: auto; padding-top: 28px; }
.demo-pill { display: flex; align-items: center; gap: 8px; margin: 0 10px 23px; padding: 10px 11px; border: 1px solid #ffffff14; border-radius: 7px; color: #abc4b8; background: #ffffff04; font-size: 11px; }
.demo-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #c7b683; box-shadow: 0 0 0 4px #c7b6830c; }
.demo-pill > span { display: none; }
.sidebar-user { display: flex; align-items: center; gap: 10px; padding: 18px 11px 0; border-top: 1px solid #ffffff11; font-size: 12px; }
.sidebar-user strong { display: block; color: #ebf0ec; font-size: 12px; font-weight: 500; }
.sidebar-user small { display: block; margin-top: 3px; color: #90aaa0; font-size: 10px; }
.avatar { display: inline-grid; flex: 0 0 34px; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: #427365; background: #e2ece4; font-size: 11px; font-weight: 600; }
.sidebar .avatar { color: #d2c49c; background: #38554b; }
.workspace { margin-left: 244px; min-height: 100vh; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 77px; padding: 0 38px; border-bottom: 1px solid var(--line); background: #fff; }
.breadcrumb { display: flex; align-items: center; gap: 12px; color: #8b958e; font-size: 12px; }
.breadcrumb strong { color: #526259; font-weight: 450; }
.breadcrumb svg { width: 15px; height: 15px; }
.topbar-actions { display: flex; align-items: center; gap: 18px; }
.locale-switch { min-width: 120px; max-width: 155px; min-height: 33px; padding: 6px 23px 6px 10px; border: 1px solid #dce6d8; border-radius: 6px; color: #526e45; background-color: #fff; font-size: 11px; }
.locale-control { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; }
.dialog-header-actions { display: flex; align-items: center; flex-shrink: 0; gap: 6px; }
.dialog-header-actions .locale-switch { min-width: 110px; max-width: 135px; font-size: 10px; }
.global-search { display: flex; align-items: center; gap: 9px; width: 230px; color: #a0aaa3; }
.global-search input { width: 100%; padding: 6px 0; border: 0; color: var(--ink); background: transparent; font-size: 12px; }
.global-search input:focus { box-shadow: none; }
.global-search:focus-within { box-shadow: 0 2px 0 var(--teal); }
.global-search svg { width: 16px; height: 16px; flex-shrink: 0; }
.global-search kbd { padding: 1px 4px; border: 1px solid var(--line); border-radius: 4px; font-size: 10px; white-space: nowrap; }
.icon-button { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 33px; height: 33px; padding: 7px; border: 0; border-radius: 7px; color: #7f8b83; background: transparent; }
.notification-dot { position: absolute; top: 6px; right: 6px; width: 5px; height: 5px; border: 1px solid white; border-radius: 50%; background: #c3a269; }
.icon-button:hover { color: var(--teal); background: var(--green-light); }
.icon-button svg { width: 18px; height: 18px; }
.mobile-menu { display: none; }
.main-content { width: 100%; max-width: 1600px; margin: auto; padding: 34px 38px 45px; }
.page-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.eyebrow { margin-bottom: 8px; color: #819187; font-size: 10px; font-weight: 600; letter-spacing: 1.7px; text-transform: uppercase; }
.heading-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; }
.page-description { max-width: 720px; margin: 8px 0 0; color: #87928a; font-size: 12px; line-height: 1.65; }
.header-actions { display: flex; align-items: center; flex-shrink: 0; gap: 9px; padding-top: 4px; }
.header-actions:empty { display: none; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 37px; padding: 9px 14px; border: 1px solid transparent; border-radius: 7px; color: var(--ink); background: #fff; font-size: 12px; font-weight: 500; line-height: 1.4; white-space: nowrap; transition: background .15s, border-color .15s, transform .15s; }
.button svg { width: 16px; height: 16px; }
.button.primary { border-color: #256a5f; color: #fff; background: #256a5f; box-shadow: 0 2px 3px #153c3910; }
.button.primary:hover { border-color: #1b554b; background: #1b554b; }
.button.secondary { border-color: #dfe7e1; color: #5c6c62; background: #fff; }
.button.secondary:hover { border-color: #a4bfb0; background: #f8fbf8; }
.button.ghost { min-height: auto; padding: 3px 0; color: var(--teal); background: transparent; font-size: 11px; }
.button.ghost:hover { color: #154f44; text-decoration: underline; }
.button.danger { border-color: #e8cccc; color: #a74444; background: #fff8f7; }
.button.danger:hover { background: #faeeee; }
.button.small { min-height: 30px; padding: 6px 10px; font-size: 11px; }
.welcome-banner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 25px; min-height: 206px; margin-bottom: 24px; padding: 25px 29px; border: 1px solid #dfe8df; border-radius: var(--radius); background: #eaf1e8; overflow: hidden; }
.welcome-copy { position: relative; z-index: 1; max-width: 75%; }
.welcome-copy .eyebrow { display: block; margin-bottom: 8px; color: #7d917e; font-size: 9px; letter-spacing: 1.1px; }
.welcome-copy h2 { margin-bottom: 8px; color: #335a46; font-size: 23px; line-height: 1.3; letter-spacing: -.45px; }
.welcome-copy p { max-width: 590px; margin-bottom: 15px; color: #7f9382; font-size: 12px; line-height: 1.7; }
.welcome-copy .button { min-height: 32px; padding: 7px 12px; font-size: 11px; }
.welcome-copy .badge { margin-bottom: 9px; }
.banner-art { position: absolute; right: 36px; bottom: -2px; width: 280px; height: 190px; color: #a7bf9e; opacity: .85; }
.banner-art svg { width: 100%; height: 100%; }
.badge { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 4px 8px; border-radius: 5px; font-size: 10px; font-weight: 500; line-height: 1.35; white-space: nowrap; }
.badge.green { color: #52856a; background: #edf5ee; }
.badge.amber { color: #b48b47; background: #fbf4e6; }
.badge.red { color: #b46c66; background: #f9eeeb; }
.badge.blue { color: #658caa; background: #edf3f7; }
.badge.gray { color: #89958c; background: #f1f4f1; }
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-bottom: 24px; }
.kpi-card { position: relative; padding: 20px 21px 17px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.kpi-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #87958a; font-size: 11px; }
.kpi-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin: -2px -2px -4px 0; border-radius: 9px; color: #739781; background: #f0f5ed; }
.kpi-icon svg { width: 16px; height: 16px; }
.kpi-card:nth-child(2) .kpi-icon { color: #ab9869; background: #f8f4e9; }
.kpi-card:nth-child(3) .kpi-icon { color: #7d99ac; background: #edf3f7; }
.kpi-card:nth-child(4) .kpi-icon { color: #a18da8; background: #f6f0f7; }
.kpi-value { margin-top: 13px; color: #2d4237; font-size: 29px; font-weight: 650; line-height: 1.15; letter-spacing: -.7px; }
.kpi-value small { margin-left: 3px; color: #94a096; font-size: 14px; font-weight: 400; }
.kpi-foot { display: flex; align-items: center; gap: 7px; margin-top: 12px; color: #9ba59e; font-size: 10px; }
.trend { display: inline-flex; align-items: center; gap: 2px; color: #5f9b78; font-size: 10px; font-weight: 550; }
.trend svg { width: 12px; height: 12px; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(290px, 1fr); gap: 22px; margin-bottom: 23px; }
.card { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; overflow: hidden; }
.card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; padding: 22px 23px 0; }
.card-title { margin-bottom: 4px; color: #35483b; font-size: 14px; font-weight: 600; }
.card-subtitle { margin: 3px 0 0; color: #9aa69d; font-size: 10px; line-height: 1.5; }
.card-header .button { margin-top: 1px; }
.chart-legend { display: flex; align-items: center; gap: 17px; padding: 17px 24px 2px; color: #909e92; font-size: 10px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend > span:empty { flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; }
.chart-legend > strong { margin-left: auto; color: #68766b; font-size: 10px; font-weight: 450; }
.chart-legend i, .chart-legend b { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #619b7b; }
.chart-legend span:nth-child(2) i, .chart-legend span:nth-child(2) b { background: #d7c08d; }
.chart-wrap { min-width: 0; padding: 14px 20px 8px 13px; }
.chart-wrap .chart-legend { gap: 7px; padding: 2px 5px 12px 12px; }
.chart-svg { display: block; width: 100%; height: auto; min-height: 180px; overflow: visible; }
.chart-label { fill: #a0aba1; font-size: 10px; font-family: inherit; }
.department-list { display: flex; flex-direction: column; gap: 19px; padding: 22px 24px 24px; }
.department-row { color: #697c6d; font-size: 11px; }
.department-row .progress-track { margin-top: 10px; }
.department-row strong { display: inline-flex; align-items: center; gap: 8px; color: #667e6d; font-size: 11px; font-weight: 550; }
.department-row .card-subtitle { flex-shrink: 0; margin-top: 0; }
.department-row small { color: #9cac9e; font-size: 10px; }
.department-dot { display: inline-block; flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: #76a583; }
.department-row:nth-child(2) .department-dot { background: #d2b987; }
.department-row:nth-child(3) .department-dot { background: #9cb3c1; }
.department-row:nth-child(4) .department-dot { background: #b5a8be; }
.progress-track { height: 5px; border-radius: 4px; background: #f0f4ef; overflow: hidden; }
.progress-fill { height: 100%; border-radius: inherit; background: #91b69a; }
.department-row:nth-child(2) .progress-fill { background: #d8c59d; }
.department-row:nth-child(3) .progress-fill { background: #a9bdc8; }
.department-row:nth-child(4) .progress-fill { background: #bfb2c6; }
.bottom-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(290px, 1fr); gap: 22px; }
.task-list { padding: 10px 23px 10px; }
.task-row { display: flex; align-items: center; gap: 11px; min-height: 64px; border-bottom: 1px solid #edf1ec; }
.task-row:last-child { border-bottom: none; }
.task-check { display: grid; flex: 0 0 16px; width: 16px; height: 16px; padding: 0; place-items: center; border: 1px solid #d7e0d7; border-radius: 5px; color: #fff; background: #fff; }
.task-check:hover { border-color: #6e9d7c; background: #f1f7ef; }
.task-check[aria-pressed="true"], .task-check.checked { border-color: #719d7b; color: #fff; background: #719d7b; }
.task-check svg { width: 11px; height: 11px; }
.task-main { flex: 1; min-width: 0; }
.task-title { display: block; margin-bottom: 3px; color: #65776a; font-size: 11px; line-height: 1.5; }
.task-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: #a0aba0; font-size: 9px; }
.task-meta svg { width: 11px; height: 11px; }
.task-row > .badge { font-size: 9px; }
.event-item { display: flex; align-items: center; gap: 12px; margin: 0 23px; padding: 17px 0; border-bottom: 1px solid #edf1ec; }
.event-item:last-child { border: 0; }
.event-date { display: flex; flex: 0 0 43px; flex-direction: column; align-items: center; justify-content: center; width: 43px; height: 46px; border: 1px solid #edf0e8; border-radius: 8px; color: #7e8e76; background: #f5f7f0; font-size: 17px; font-weight: 600; line-height: 1.2; }
.event-date small { margin-top: 3px; color: #a0ab94; font-size: 8px; font-weight: 500; text-transform: uppercase; }
.event-date strong { font-size: 17px; font-weight: 600; }
.event-date > span { margin-top: 3px; color: #68755e; font-size: 8px; font-weight: 450; text-transform: uppercase; }
.event-info { flex: 1; min-width: 0; color: #637666; font-size: 11px; }
.event-info strong { display: block; margin-bottom: 5px; font-size: 11px; font-weight: 500; }
.event-info p, .event-info small { margin-bottom: 0; color: #a1ac9f; font-size: 9px; }
.activity-list { padding: 10px 23px 20px; }
.activity-item { position: relative; display: grid; grid-template-columns: 7px minmax(0, 1fr) auto; align-items: baseline; gap: 12px; padding: 12px 0; color: #7b8b7c; font-size: 11px; }
.activity-item strong { color: #65765f; font-weight: 500; }
.activity-item p { margin: 3px 0 0; color: #68766b; font-size: 10px; }
.activity-dot { width: 6px; height: 6px; border-radius: 50%; background: #b0c4ae; }
.activity-item:not(:last-child)::after { content: ""; position: absolute; left: 2px; top: 26px; bottom: -7px; border-left: 1px solid #e8eee5; }
.activity-time { display: block; margin-top: 3px; color: #adb5ab; font-size: 9px; }
.section-tabs { display: flex; gap: 23px; margin-bottom: 22px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tab { padding: 0 0 11px; border: 0; border-bottom: 2px solid transparent; color: #8c9a8d; background: transparent; font-size: 12px; white-space: nowrap; }
.tab.active { border-bottom-color: #397e65; color: #397e65; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.search-field { position: relative; display: flex; align-items: center; gap: 9px; min-width: 220px; max-width: 360px; padding: 9px 12px; border: 1px solid #e0e7df; border-radius: 7px; color: #96a291; background: #fff; }
.search-field svg { flex-shrink: 0; width: 16px; height: 16px; }
.search-field input { width: 100%; min-width: 0; padding: 0; border: 0; color: var(--ink); background: transparent; font-size: 12px; }
.search-field input:focus { box-shadow: none; }
.search-field:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px #27766a12; }
.filter-select { min-height: 37px; max-width: 230px; padding: 8px 31px 8px 11px; border: 1px solid #e0e7df; border-radius: 7px; color: #7b8d7c; background-color: #fff; font-size: 12px; }
.table-wrap { position: relative; width: 100%; max-width: 100%; overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; text-align: left; white-space: nowrap; }
.data-table th { padding: 14px 20px; border-bottom: 1px solid #e8eee5; color: #8d9c8c; background: #fafcf8; font-size: 10px; font-weight: 500; }
.data-table td { padding: 16px 20px; border-bottom: 1px solid #edf1e9; color: #768772; font-size: 11px; }
.data-table tbody tr:hover { background: #fbfdf9; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.name-cell { display: flex; align-items: center; gap: 10px; }
.name-cell .avatar { flex-basis: 31px; width: 31px; height: 31px; border-radius: 9px; font-size: 9px; }
.cell-title { color: #4d6752; font-size: 11px; font-weight: 500; }
.cell-note { display: block; max-width: 240px; margin-top: 3px; overflow: hidden; color: #a5b09f; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.row-actions { display: flex; align-items: center; gap: 4px; }
.row-actions .icon-button { width: 28px; height: 28px; padding: 6px; }
.row-actions .icon-button svg { width: 14px; height: 14px; }
.row-actions .icon-button[data-action="delete"] { color: #b1958e; }
.row-actions .icon-button[data-action="delete"]:hover { color: #ac554e; background: #faf0ed; }
.empty-state { display: grid; min-height: 220px; padding: 38px 20px; place-content: center; text-align: center; color: #94a38f; }
.empty-state > svg { width: 30px; height: 30px; margin: 0 auto 12px; color: #b0c2a8; }
.empty-state h3 { margin-bottom: 7px; color: #6b8165; font-size: 14px; }
.empty-state p { max-width: 380px; margin: 0 auto 15px; font-size: 12px; }
.table-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 20px; border-top: 1px solid var(--line); color: #a1ad9c; font-size: 10px; }
.split-layout { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 22px; }
.org-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.org-card { position: relative; padding: 23px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.org-card::before { content: ""; position: absolute; top: 0; left: 23px; right: 23px; height: 3px; border-radius: 0 0 3px 3px; background: #a1b69b; }
.org-card:nth-child(3n+2)::before { background: #d1c19c; }
.org-card:nth-child(3n+3)::before { background: #a7bbc6; }
.org-card h3 { margin: 4px 0 9px; color: #516c55; font-size: 15px; }
.org-card h2 { margin: 16px 0 8px; color: #516c55; font-size: 16px; }
.org-card p { min-height: 43px; color: #94a08e; font-size: 11px; line-height: 1.7; }
.org-card > .icon-button { position: absolute; top: 14px; right: 13px; }
.org-card .row-actions { justify-content: flex-end; margin-top: 15px; }
.org-lead { display: flex; align-items: center; gap: 9px; padding-top: 16px; border-top: 1px solid #edf1e8; color: #8a9b85; font-size: 10px; }
.org-lead strong { display: block; margin-bottom: 2px; color: #66815e; font-size: 11px; font-weight: 500; }
.org-lead small { font-size: 9px; }
.org-card > .card-subtitle { margin-top: 15px; font-size: 10px; }
.staff-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.staff-card { padding: 23px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; text-align: center; }
.staff-card > .avatar { width: 45px; height: 45px; margin-bottom: 12px; border-radius: 13px; font-size: 13px; }
.staff-card h3 { margin-bottom: 5px; color: #5b7557; font-size: 13px; }
.staff-card p { margin-bottom: 12px; color: #9ba694; font-size: 11px; }
.staff-card .row-actions { justify-content: center; margin-top: 13px; }
.assistant-layout { display: grid; grid-template-columns: 255px minmax(0, 1fr); align-items: start; gap: 23px; }
.assistant-sidebar { display: flex; flex-direction: column; gap: 11px; }
.assistant-profile { padding: 23px; border: 1px solid #dfe8dc; border-radius: var(--radius); background: #eef4ea; }
.assistant-profile > svg { width: 29px; height: 29px; margin-bottom: 13px; color: #789571; }
.assistant-profile h3 { margin-bottom: 8px; color: #577452; font-size: 14px; }
.assistant-profile > .kpi-icon { margin-bottom: 13px; }
.assistant-profile h2 { margin-bottom: 8px; color: #577452; font-size: 15px; }
.assistant-profile p { margin-bottom: 0; color: #8d9d85; font-size: 11px; line-height: 1.7; }
.prompt-chip { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 15px; border: 1px solid #e3eadf; border-radius: 9px; color: #687e5f; background: #fff; text-align: left; font-size: 11px; line-height: 1.6; }
.prompt-chip:hover { border-color: #b9cdb0; background: #f9fcf6; }
.prompt-chip svg { width: 14px; height: 14px; margin-right: 7px; color: #b1bea7; }
.chat-panel { display: flex; flex-direction: column; min-height: 520px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; overflow: hidden; }
.chat-panel .card-header { padding-bottom: 20px; border-bottom: 1px solid #edf1e8; }
.chat-messages { display: flex; flex: 1; flex-direction: column; gap: 18px; max-height: 510px; min-height: 360px; padding: 25px; overflow-y: auto; }
.message { align-self: flex-start; max-width: 92%; padding: 14px 17px; border: 1px solid #e6eee1; border-radius: 12px 12px 12px 3px; color: #6c8363; background: #f5f8f1; font-size: 12px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
.message.user { align-self: flex-end; border-color: #2f7764; border-radius: 12px 12px 3px 12px; color: #f0f5ed; background: #2f7764; }
.message strong { color: #506f47; }
.message.user strong { color: #fff; }
.message p { margin-bottom: 0; }
.message .eyebrow { display: block; margin-bottom: 5px; color: #65835a; font-size: 9px; letter-spacing: 1px; }
.message.user .eyebrow { color: #d7e7d1; }
.chat-form { position: relative; display: flex; align-items: flex-end; gap: 10px; margin: 0 21px 21px; padding: 8px; border: 1px solid #dce6d6; border-radius: 10px; background: #fff; }
.chat-input { flex: 1; min-width: 0; min-height: 37px; max-height: 140px; padding: 8px 9px; border: 0; color: #4d6a44; resize: vertical; font-size: 12px; }
.chat-input:focus { box-shadow: none; }
.chat-form .button { min-height: 36px; }
.demo-note { margin: 14px 0 0; color: #a0ab99; font-size: 10px; line-height: 1.7; }
.assistant-sidebar .demo-note { padding: 0 4px; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.settings-card { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.settings-card .card-header { padding-bottom: 18px; }
.settings-card h3 { margin-bottom: 10px; color: #59784e; font-size: 14px; }
.settings-card p { color: #94a18c; font-size: 12px; line-height: 1.8; }
.settings-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 0; font-size: 12px; }
.settings-card dt { color: #a0ac97; }
.settings-card dd { margin: 0; color: #69825d; text-align: right; }
.settings-card .button { margin: 10px 6px 0 0; }
.toast { position: fixed; right: 28px; bottom: 25px; z-index: 100; max-width: min(440px, calc(100vw - 40px)); padding: 14px 19px; border: 1px solid #d3e2ca; border-radius: 9px; color: #4e7544; background: #f5faef; box-shadow: 0 5px 25px #324b3220; font-size: 12px; animation: toast-in .2s ease-out; }
.toast.error { border-color: #e7cec7; color: #a16f64; background: #fff5f1; }
.modal-backdrop { position: fixed; inset: 0; z-index: 60; display: grid; padding: 24px; place-items: center; background: #153c3970; backdrop-filter: blur(3px); }
.modal { width: min(620px, calc(100vw - 40px)); max-height: calc(100dvh - 48px); padding: 0; border: 1px solid #dce7d7; border-radius: 15px; color: var(--ink); background: #fff; box-shadow: 0 22px 80px #193d3530; overflow-y: auto; }
.modal::backdrop { background: #153c3970; backdrop-filter: blur(3px); }
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 25px 17px; border-bottom: 1px solid #edf1e8; }
.modal-header h2, .modal-header h3 { margin: 0; color: #486a3b; font-size: 18px; }
.modal-header p { margin: 5px 0 0; color: #a2af98; font-size: 11px; }
.modal-body { padding: 23px 25px; }
.modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 17px 25px; border-top: 1px solid #edf1e8; background: #fafcf7; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 19px 18px; }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field-wide { grid-column: 1 / -1; }
.field label, label.field { color: #7f9272; font-size: 11px; }
.field input, .field select, .field textarea { width: 100%; min-width: 0; min-height: 39px; padding: 9px 11px; border: 1px solid #dfe7da; border-radius: 7px; color: #5a754a; background: #fff; font-size: 12px; }
.field textarea { min-height: 92px; resize: vertical; }
.field input[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: #cf9e8e; }
.field-error { min-height: 0; color: #b47d6b; font-size: 10px; }
.error-banner { margin-bottom: 18px; padding: 13px 16px; border: 1px solid #eddbce; border-radius: 8px; color: #ab8369; background: #fff7ee; font-size: 12px; line-height: 1.7; }
.loading-screen { display: grid; min-height: 80vh; padding: 30px; place-content: center; text-align: center; color: #92a086; font-size: 13px; }
.loading-screen::before { content: ""; width: 24px; height: 24px; margin: 0 auto 18px; border: 2px solid #dce7d4; border-top-color: #5d8b4e; border-radius: 50%; animation: rotate 1s linear infinite; }
.metric-list { padding: 11px 24px 20px; }
.stat-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 0; border-bottom: 1px solid #edf1e7; color: #91a082; font-size: 12px; }
.stat-row:last-child { border: none; }
.stat-row strong { color: #648453; font-size: 13px; font-weight: 550; }
.bar-chart { display: flex; align-items: flex-end; justify-content: space-evenly; gap: 18px; height: 255px; padding: 32px 25px 22px; }
.bar-column { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: flex-end; gap: 9px; height: 100%; min-width: 0; color: #839b74; font-size: 10px; }
.bar { width: min(42px, 75%); min-height: 2px; border-radius: 5px 5px 0 0; background: #97b489; }
.bar-column:nth-child(2n) .bar { background: #c9bb94; }
.bar-caption { min-height: 28px; color: #a0ae95; font-size: 9px; text-align: center; }
.finance-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 22px; }
.report-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.text-muted { color: var(--muted); }
.text-right { text-align: right; }
.text-center { text-align: center; }
.positive { color: #658f56 !important; }
.negative { color: #b58270 !important; }
.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; }
/* Small supporting text keeps its contrast on pale cards and backgrounds. */
.workspace .breadcrumb, .workspace .page-description, .workspace .eyebrow,
.workspace .kpi-label, .workspace .kpi-foot, .workspace .card-subtitle,
.workspace .chart-legend, .workspace .department-row, .workspace .department-row small,
.workspace .task-meta, .workspace .event-info small, .workspace .event-info p,
.workspace .activity-time, .workspace .cell-note, .workspace .table-footer,
.workspace .demo-note, .workspace .bar-caption, .workspace .field label,
.workspace .settings-card p, .workspace .settings-card dt, .workspace .text-muted,
.workspace .org-card p, .workspace .org-lead, .workspace .staff-card p,
.workspace .assistant-profile p, .workspace .welcome-copy p,
.workspace .global-search, .workspace .empty-state, .workspace .stat-row {
  color: #68766b;
}
.workspace .data-table th { color: #63725e; }
.workspace .data-table td { color: #61725e; }
.workspace .event-date small { color: #68755e; }
.workspace .chart-label { fill: #67765f; }
.workspace .badge.green { color: #3d6f4b; }
.workspace .badge.amber { color: #80612c; }
.workspace .badge.red { color: #98564d; }
.workspace .badge.blue { color: #466e8a; }
.workspace .badge.gray { color: #647060; }
.workspace .trend { color: #4c795a; }
@keyframes toast-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes rotate { to { transform: rotate(360deg); } }

@media (min-width: 1550px) {
  .main-content { padding-top: 41px; padding-bottom: 50px; }
  .kpi-card { padding-top: 24px; padding-bottom: 21px; }
  .chart-svg { min-height: 220px; }
  .department-list { gap: 26px; padding-top: 26px; }
}
@media (max-width: 1200px) {
  .sidebar { width: 222px; padding-left: 12px; padding-right: 12px; }
  .workspace { margin-left: 222px; }
  .topbar { padding: 0 27px; }
  .main-content { padding: 29px 27px 35px; }
  .global-search { width: 180px; }
  .kpi-grid { gap: 13px; }
  .kpi-card { padding-left: 16px; padding-right: 16px; }
  .dashboard-grid, .bottom-grid { grid-template-columns: minmax(0, 1.4fr) minmax(270px, 1fr); gap: 17px; }
  .org-grid, .staff-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .assistant-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 18px; }
  .card-header { padding-left: 19px; padding-right: 19px; }
  .task-list { padding-left: 19px; padding-right: 19px; }
}
@media (max-width: 1000px) {
  .sidebar { width: 244px; transform: translateX(-100%); transition: transform .2s ease; }
  .workspace { margin-left: 0; }
  .mobile-menu { display: inline-flex; margin-left: -7px; }
  .topbar { min-height: 68px; }
  .topbar .breadcrumb { margin-right: auto; gap: 8px; }
  .topbar-actions { gap: 14px; }
  body.menu-open .sidebar { transform: translateX(0); box-shadow: 12px 0 70px #173c3940; }
  body.menu-open::after { content: ""; position: fixed; inset: 0; z-index: 20; background: #153c3940; }
  body.menu-open .mobile-menu { position: relative; z-index: 31; color: #fff; background: #2b5b50; }
  .main-content { padding-top: 27px; }
}
@media (max-width: 760px) {
  .topbar .user-role { display: none; }
  .topbar .breadcrumb { flex: 1; min-width: 0; overflow: hidden; font-size: 0; white-space: nowrap; }
  .topbar .breadcrumb strong { min-width: 0; overflow: hidden; font-size: 11px; text-overflow: ellipsis; }
  .topbar .breadcrumb > span { display: none; }
  .topbar-actions { flex-shrink: 0; }
  .topbar { gap: 12px; padding: 0 20px; }
  .topbar-actions { gap: 7px; }
  .global-search { display: none; }
  .breadcrumb { font-size: 11px; }
  .breadcrumb > span:first-child { display: none; }
  .main-content { padding: 24px 20px 35px; }
  h1 { font-size: 27px; }
  .page-header { align-items: flex-start; flex-direction: column; gap: 14px; margin-bottom: 22px; }
  .heading-row { align-items: flex-start; flex-direction: column; gap: 14px; }
  .header-actions { width: 100%; padding-top: 0; }
  .header-actions .button { min-height: 36px; }
  .welcome-banner { min-height: 207px; padding: 23px; }
  .welcome-copy { max-width: 74%; }
  .welcome-copy h2 { font-size: 21px; }
  .welcome-copy p { font-size: 11px; }
  .banner-art { right: -38px; width: 220px; opacity: .45; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; margin-bottom: 20px; }
  .kpi-card { padding: 18px 18px 16px; }
  .kpi-value { font-size: 29px; }
  .dashboard-grid, .bottom-grid { grid-template-columns: minmax(0, 1fr); gap: 19px; margin-bottom: 20px; }
  .chart-svg { min-height: 0; }
  .card-header { padding: 21px 21px 0; }
  .department-list { padding-bottom: 25px; }
  .task-list { padding-left: 21px; padding-right: 21px; }
  .task-row { min-height: 69px; }
  .task-title { font-size: 12px; }
  .task-meta { font-size: 10px; }
  .event-item { padding-top: 18px; padding-bottom: 18px; }
  .event-info { font-size: 12px; }
  .event-info strong { font-size: 12px; }
  .toolbar { align-items: stretch; gap: 10px; }
  .toolbar > div:not(.search-field) { min-width: 0; }
  .search-field { flex: 1; min-width: 0; max-width: none; }
  .filter-select { max-width: 150px; }
  .data-table th, .data-table td { padding-left: 16px; padding-right: 16px; }
  .data-table td { font-size: 12px; }
  .cell-title { font-size: 12px; }
  .table-footer { align-items: flex-start; font-size: 10px; }
  .org-grid, .staff-grid { gap: 14px; }
  .org-card, .staff-card { padding: 20px; }
  .split-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .assistant-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .assistant-sidebar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .assistant-profile { grid-column: 1 / -1; padding: 20px; }
  .assistant-sidebar > .nav-label { grid-column: 1 / -1; margin: 7px 0 0 !important; }
  .assistant-profile > svg { float: left; margin: 0 14px 10px 0; }
  .assistant-profile > .kpi-icon { float: left; margin: 0 14px 10px 0; }
  .assistant-profile p { font-size: 12px; }
  .assistant-sidebar .demo-note { grid-column: 1 / -1; margin-top: 2px; }
  .prompt-chip { padding: 12px; font-size: 11px; }
  .chat-panel { min-height: 450px; }
  .chat-messages { min-height: 290px; max-height: 480px; padding: 20px; }
  .message { max-width: 95%; font-size: 12px; }
  .chat-form { margin: 0 15px 15px; }
  .settings-grid { grid-template-columns: minmax(0, 1fr); gap: 17px; }
  .finance-summary { gap: 12px; }
  .finance-summary .kpi-card { padding: 16px 12px; }
  .finance-summary .kpi-value { font-size: 23px; }
  .finance-summary .kpi-label { font-size: 10px; }
  .modal { width: calc(100vw - 32px); max-height: calc(100dvh - 32px); }
  .modal-header { padding-left: 20px; padding-right: 20px; }
  .modal-body { padding: 20px; }
  .modal-footer { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 440px) {
  .topbar .locale-switch { min-width: 74px; max-width: 100px; padding-left: 7px; font-size: 10px; }
  .dialog-header-actions .locale-switch { min-width: 86px; max-width: 104px; padding-left: 6px; font-size: 9px; }
  .modal-header:has(.dialog-header-actions) { padding-left: 16px; padding-right: 12px; gap: 8px; }
  .modal-header:has(.dialog-header-actions) h2 { font-size: 14px; }
  .topbar { gap: 8px; padding-left: 16px; padding-right: 16px; }
  .breadcrumb { gap: 6px; font-size: 10px; }
  .topbar-actions .avatar { flex-basis: 30px; width: 30px; height: 30px; font-size: 10px; }
  .main-content { padding: 22px 16px 30px; }
  h1 { font-size: 25px; }
  .page-description { font-size: 11px; }
  .welcome-banner { padding: 20px; }
  .welcome-copy { max-width: 86%; }
  .welcome-copy h2 { font-size: 17px; }
  .banner-art { right: -80px; opacity: .24; }
  .kpi-grid { gap: 10px; }
  .kpi-card { padding: 15px 13px 13px; }
  .kpi-label { font-size: 10px; }
  .kpi-icon { width: 25px; height: 25px; border-radius: 7px; }
  .kpi-icon svg { width: 13px; height: 13px; }
  .kpi-value { font-size: 27px; }
  .kpi-foot { align-items: flex-start; flex-direction: column; gap: 2px; margin-top: 9px; font-size: 9px; }
  .card-header { gap: 10px; padding-left: 18px; padding-right: 18px; }
  .card-title { font-size: 13px; }
  .card-header .button.ghost { font-size: 10px; }
  .task-list { padding-left: 18px; padding-right: 18px; }
  .task-row { gap: 9px; }
  .task-row > .badge { max-width: 82px; padding: 4px 5px; font-size: 8px; }
  .task-title { font-size: 11px; }
  .task-meta { gap: 4px; font-size: 9px; }
  .toolbar { flex-wrap: wrap; }
  .toolbar > div:not(.search-field) { width: 100%; }
  .search-field { flex-basis: 100%; }
  .filter-select { max-width: none; flex: 1; }
  .section-tabs { gap: 19px; }
  .org-grid, .staff-grid { grid-template-columns: minmax(0, 1fr); }
  .assistant-sidebar { grid-template-columns: minmax(0, 1fr); }
  .assistant-profile, .assistant-sidebar .demo-note { grid-column: auto; }
  .chat-messages { padding: 16px; }
  .message { padding: 12px 14px; font-size: 11px; }
  .chat-form .button { width: 35px; padding: 8px; font-size: 0; }
  .chat-form .button svg { width: 17px; height: 17px; }
  .finance-summary { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .finance-summary .kpi-card { padding: 18px; }
  .finance-summary .kpi-value { font-size: 27px; }
  .form-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .field-wide { grid-column: auto; }
  .modal-header h2 { font-size: 16px; }
  .modal-footer { gap: 8px; }
  .modal-footer .button { flex: 1; }
  .toast { right: 16px; bottom: 16px; max-width: calc(100vw - 32px); }
}
/* First vertical slice: private access, organization, posts and weekly statistics. */
.form-help { margin: 5px 0 0; color: #68766b; font-size: 11px; line-height: 1.65; }
.editor-description { margin: 0 0 20px; }
.editor-notice { margin: 0 0 20px; }
.choice-field { min-width: 0; margin: 0; padding: 14px 15px; border: 1px solid #dfe8d7; border-radius: 8px; }
.choice-field legend { padding: 0 6px; color: #687e5c; font-size: 11px; }
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 18px; max-height: 240px; overflow-y: auto; }
.field .checkbox-label, .checkbox-label { display: flex; align-items: flex-start; gap: 9px; color: #647c58; font-size: 11px; line-height: 1.7; }
.field .checkbox-label input, .checkbox-label input { flex: 0 0 15px; width: 15px; height: 15px; min-height: 15px; margin: 2px 0 0; padding: 0; accent-color: #397d62; }
.field input[readonly] { color: #7c8c71; background: #f6f8f2; }
.match-candidates { display: flex; flex-direction: column; gap: 10px; margin-bottom: 21px; }
.match-candidate { padding: 13px 15px; border: 1px solid #dfe7d6; border-radius: 8px; background: #f7faf2; overflow-wrap: anywhere; }
.match-candidate > strong { color: #60794e; font-size: 12px; font-weight: 550; }
.match-candidate p { margin: 5px 0; color: #6c7f5c; font-size: 11px; line-height: 1.7; }
.match-candidate small { color: #76876a; font-size: 9px; }
.source-panel { padding: 17px 20px; border: 1px solid #e6e6d4; border-left: 3px solid #c3ab72; border-radius: 8px; color: #76785d; background: #faf9f0; font-size: 11px; line-height: 1.7; }
.source-panel strong { display: block; margin-bottom: 4px; color: #74764e; font-size: 12px; font-weight: 550; }
.source-panel p { margin-bottom: 0; }
.permission-note { display: flex; align-items: center; gap: 9px; margin: 16px 0; padding: 11px 15px; border: 1px solid #dce7eb; border-radius: 8px; color: #5b7885; background: #f0f6f8; font-size: 11px; line-height: 1.6; }
.role-badge { display: inline-flex; align-items: center; padding: 4px 8px; border: 1px solid #e0e7dc; border-radius: 5px; color: #62785c; background: #f7faf4; font-size: 10px; line-height: 1.35; }
.auth-error { padding: 11px 14px; border: 1px solid #ebcec6; border-radius: 7px; color: #9c5a4c; background: #fff4ef; font-size: 12px; line-height: 1.6; }
.login-page { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 480px); justify-content: center; align-content: center; align-items: stretch; min-height: 100dvh; padding: 42px; background: radial-gradient(ellipse at 10% 10%, #dfe9db, transparent 55%), radial-gradient(ellipse at 95% 90%, #eceddd, transparent 50%), #f4f7f1; }
.login-card { width: 100%; min-height: 690px; padding: 37px; border: 1px solid #dfe8da; border-right: 0; border-radius: 18px 0 0 18px; background: #fff; box-shadow: 0 20px 70px #2544310d; }
.login-aside { position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 56px 48px; border: 1px solid #153c39; border-radius: 0 18px 18px 0; color: #dae6da; background: radial-gradient(circle at 100% 0%, #315a4a, transparent 60%), #153c39; overflow: hidden; }
.login-aside::after { content: ''; position: absolute; right: -110px; bottom: 110px; width: 290px; height: 290px; border: 1px solid #c9d3a115; border-radius: 50%; box-shadow: 0 0 0 40px #c9d3a105, 0 0 0 80px #c9d3a104; pointer-events: none; }
.login-aside .brand-mark { flex: 0 0 95px; width: 95px; height: 95px; margin-bottom: 34px; color: #d4b474; }
.login-aside h2 { position: relative; z-index: 1; margin-bottom: 18px; color: #f0f4e9; font-size: 31px; font-weight: 550; line-height: 1.45; letter-spacing: -.7px; }
.login-aside p { position: relative; z-index: 1; max-width: 320px; margin-bottom: 40px; color: #b3c6b1; font-size: 12px; line-height: 1.9; }
.login-aside .demo-pill { position: absolute; right: 48px; bottom: 34px; left: 48px; margin: 0; padding: 12px 10px; color: #b9caac; font-size: 8px; letter-spacing: 1.1px; }
.login-card .brand { justify-content: center; padding: 0 0 25px; }
.login-card .brand-name { color: #274a3d; }
.login-card .brand-caption { color: #73836c; }
.login-card .brand-mark { color: #b4975e; }
.login-card h1 { margin-bottom: 11px; color: #2d4b3b; font-size: 27px; text-align: center; }
.login-card > p, .login-description { color: #74816e; font-size: 12px; line-height: 1.8; text-align: center; }
.login-card form { display: flex; flex-direction: column; gap: 17px; margin-top: 25px; }
.login-card form > .field + .field { margin-top: 0 !important; }
.login-card form .button.primary { min-height: 42px; margin-top: 3px; }
.login-card .field label { color: #62765a; font-size: 12px; }
.login-card .field input, .login-card .field select { min-height: 42px; }
.login-note { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid #e9eee4; color: #71816a; font-size: 11px; line-height: 1.75; }
.login-note strong { color: #5a7350; }
.login-card .error-banner, .login-card .auth-error { margin: 16px 0 0; }
.login-demo-users { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 20px; }
.login-demo-users .button { flex-direction: column; align-items: flex-start; padding: 10px 12px; white-space: normal; text-align: left; }
.login-demo-users small { color: #7c8d72; font-size: 10px; }
.week-controls { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-bottom: 23px; padding: 17px 20px; border: 1px solid #e0e8da; border-radius: 10px; background: #fff; }
.week-controls > div { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-width: 0; }
.week-controls > div:first-child { display: block; }
.week-controls > div:first-child .eyebrow { display: block; margin-bottom: 5px; font-size: 9px; letter-spacing: 1.1px; }
.week-controls > div:first-child h2 { color: #4d6d40; font-size: 18px; }
.week-controls > div:first-child .card-subtitle { margin-top: 6px; }
.week-controls > .header-actions { display: flex; flex-direction: row; flex-wrap: nowrap; width: auto; }
.week-controls label { color: #6d7e63; font-size: 11px; }
.week-controls input, .week-controls select { min-height: 35px; max-width: 100%; padding: 7px 10px; border: 1px solid #dce5d5; border-radius: 6px; color: #5f7554; background: #fff; font-size: 12px; }
.week-controls strong { color: #57734b; font-size: 12px; font-weight: 550; }
.week-controls .form-help { flex-basis: 100%; margin: 0; font-size: 10px; }
.stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 23px; }
.stat-card { min-width: 0; padding: 21px; border: 1px solid #e2e9dd; border-radius: 12px; background: #fff; }
.stat-card h2, .stat-card h3 { margin-bottom: 5px; color: #54714a; font-size: 15px; }
.stat-card h2 small, .stat-card h3 small { color: #7f9074; font-size: 10px; font-weight: 450; }
.stat-card .card-header { padding: 0 0 13px; }
.stat-card .card-subtitle { font-size: 10px; }
.stat-value { display: flex; align-items: baseline; gap: 7px; margin: 14px 0 10px; color: #4e7043; }
.stat-number { color: #3c5c33; font-size: 31px; font-weight: 650; line-height: 1.15; letter-spacing: -.8px; }
.stat-value small, .stat-value > span:not(.stat-number) { color: #76876b; font-size: 11px; }
.stat-card .progress-track { margin: 15px 0 10px; height: 5px; }
.stat-pending { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 5px; color: #8a713d; background: #faf6e9; font-size: 10px; }
.stat-comparison { display: flex; justify-content: space-between; gap: 8px; margin: 10px 0 0; color: #718668; font-size: 10px; }
.stat-sparkline { display: block; width: 100%; height: 55px; margin-top: 13px; }
.stat-card .source-panel { margin-top: 14px; padding: 10px 12px; font-size: 10px; }
.stat-card .source-panel strong { font-size: 10px; }
.ledger-list { display: flex; flex-direction: column; gap: 13px; margin-bottom: 22px; }
.ledger-item { padding: 20px; border: 1px solid #e2e9db; border-radius: 10px; background: #fff; }
.ledger-item > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.ledger-item h3 { margin-bottom: 3px; color: #5b7750; font-size: 13px; }
.ledger-item p { color: #708466; font-size: 11px; line-height: 1.7; }
.ledger-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 15px; color: #73866a; font-size: 10px; }
.ledger-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.funnel-grid { display: grid; grid-template-columns: repeat(7, minmax(128px, 1fr)); gap: 12px; width: 100%; max-width: 100%; padding: 2px 0 12px; overflow-x: auto; }
.funnel-stage { position: relative; min-width: 0; padding: 19px 15px; border: 1px solid #e0e8d7; border-radius: 9px; background: #f6f9f1; }
.funnel-stage:nth-child(2n) { border-color: #e7e4d4; background: #fbfaf1; }
.funnel-stage h3, .funnel-stage h4 { min-height: 34px; margin-bottom: 15px; color: #687f57; font-size: 11px; line-height: 1.6; }
.funnel-stage strong { display: block; margin-bottom: 12px; color: #4f6f3b; font-size: 29px; line-height: 1; }
.funnel-stage small, .funnel-stage p { margin-bottom: 0; color: #718563; font-size: 10px; }
.funnel-stage::after { content: '→'; position: absolute; top: 38px; right: -12px; z-index: 1; color: #a6b696; font-size: 15px; }
.funnel-stage:last-child::after { content: none; }
.org-chart-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 17px; }
.org-chart-toolbar .search-field { flex: 1; max-width: 450px; }
.org-chart-toolbar .form-help { margin: 0; text-align: right; }
.org-source-note { margin-bottom: 21px; }
.org-tree, .org-tree-children { margin: 0; padding: 0; list-style: none; }
.org-tree { display: flex; flex-direction: column; gap: 16px; }
.org-tree-node { min-width: 0; }
.org-tree-unit { min-width: 0; border: 1px solid #e0e8da; border-radius: 10px; background: #fff; overflow: hidden; }
.org-tree-unit-row { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 70px; padding: 12px 17px; }
.unit-division > .org-tree-unit > .org-tree-unit-row { background: #edf3e8; }
.unit-division > .org-tree-unit { border-color: #d8e4cf; }
.unit-kind { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 3px; color: #6f8463; font-size: 9px; letter-spacing: .35px; }
.unit-code { padding: 1px 5px; border-radius: 3px; color: #6d8063; background: #e9efe2; font-size: 9px; letter-spacing: 0; }
.unit-heading { flex: 1; min-width: 0; }
.unit-heading h3 { margin: 0; color: #4f7141; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.unit-division > .org-tree-unit .unit-heading h3 { color: #3e6232; font-size: 14px; }
.unit-child-count { display: inline-grid; flex: 0 0 23px; width: 23px; height: 23px; place-items: center; border-radius: 5px; color: #6d865d; background: #f0f5eb; font-size: 10px; }
.tree-toggle { display: grid; flex: 0 0 27px; width: 27px; height: 27px; padding: 5px; place-items: center; border: 1px solid #dbe5d1; border-radius: 6px; color: #6c855c; background: #fff; }
.tree-toggle:hover { border-color: #b6cba5; background: #f8fbf3; }
.tree-toggle svg { transition: transform .15s ease; }
.tree-toggle.is-expanded svg { transform: rotate(90deg); }
.tree-leaf-dot { display: grid; flex: 0 0 27px; width: 27px; height: 27px; place-items: center; }
.tree-leaf-dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #a6bc96; }
.org-tree-children { display: flex; flex-direction: column; gap: 10px; margin: 11px 0 0 28px; padding-left: 17px; border-left: 1px solid #dce6d2; }
.org-tree-children > li { position: relative; }
.org-tree-children > li::before { content: ''; position: absolute; top: 35px; left: -18px; width: 17px; border-top: 1px solid #dce6d2; }
.unit-details { border-top: 1px solid #ecf0e6; }
.unit-details summary { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 18px 10px 54px; color: #6c8260; background: #fdfefa; font-size: 10px; cursor: pointer; list-style: none; }
.unit-details summary::-webkit-details-marker { display: none; }
.unit-details summary::before { content: '+'; position: absolute; top: 8px; left: 27px; color: #91a580; font-size: 14px; }
.unit-details[open] summary::before { content: '−'; }
.unit-details summary > span { color: #7d8d71; font-size: 9px; }
.unit-detail-body { padding: 18px 22px; border-top: 1px solid #ecf0e6; }
.unit-detail-label { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; color: #6c825f; font-size: 10px; }
.unit-detail-label .badge { padding: 3px 6px; font-size: 9px; }
.unit-product > p { margin-bottom: 18px; color: #5f7a50; font-size: 12px; line-height: 1.8; }
.unit-detail-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 25px; }
.unit-detail-columns h4 { margin: 0 0 12px; color: #607c51; font-size: 11px; font-weight: 600; }
.unit-task-list { margin: 0 0 19px; padding-left: 16px; color: #6f8361; font-size: 11px; line-height: 1.8; }
.unit-task-list li + li { margin-top: 5px; }
.subproduct-list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.subproduct-list li > div { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.subproduct-list strong { color: #6b805e; font-size: 11px; font-weight: 500; }
.subproduct-list .badge { padding: 3px 5px; font-size: 8px; }
.subproduct-list p { margin: 4px 0 0; color: #6c7f60; font-size: 10px; }
.unit-stat-links { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.stat-abbreviation { padding: 4px 8px; border: 1px solid #dce7d2; border-radius: 5px; color: #627b53; background: #f1f6ea; font-size: 10px; font-weight: 550; }
.unit-source { margin-top: 18px; padding-top: 13px; border-top: 1px solid #e9eee1; color: #7b8b6e; font-size: 10px; overflow-wrap: anywhere; }
.unit-source > span { color: #6d815f; font-weight: 550; }
.unit-source p { margin: 4px 0 0; line-height: 1.7; }
.org-tree-node.search-match > .org-tree-unit { border-color: #b6c996; box-shadow: 0 0 0 2px #dde8ca55; }
.staff-directory-note { display: flex; align-items: center; flex-wrap: wrap; gap: 11px; margin-bottom: 21px; }
.staff-directory-note p { margin: 0; color: #6b7e5f; font-size: 11px; }
.staff-directory { display: flex; flex-direction: column; gap: 21px; }
.staff-directory-header { display: flex; align-items: flex-start; gap: 13px; padding: 23px; }
.staff-directory-header > .avatar { flex: 0 0 43px; width: 43px; height: 43px; border-radius: 11px; color: #638354; background: #edf3e6; font-size: 13px; }
.staff-directory-person { flex: 1; min-width: 0; }
.staff-directory-person h2 { margin: 0 0 5px; color: #4e7140; font-size: 16px; }
.staff-directory-person p { margin: 0 0 10px; color: #6d815f; font-size: 11px; line-height: 1.7; }
.staff-person-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.staff-person-badges .form-help { margin: 0 0 0 2px; font-size: 10px; }
.staff-directory-actions { display: flex; align-items: center; flex-shrink: 0; gap: 9px; }
.assignment-table { border-top: 1px solid #e6edde; }
.assignment-table td { vertical-align: top; }
.assignment-table .cell-note { max-width: 300px; margin-top: 6px; }
.assignment-rights { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; max-width: 250px; }
.assignment-rights .badge { font-size: 9px; }
.staff-no-assignments { padding: 16px 23px 23px; border-top: 1px solid #e9eee1; color: #6d815f; font-size: 11px; }
@media (max-width: 1200px) {
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
  .funnel-grid { grid-template-columns: repeat(7, 128px); }
}
@media (max-width: 760px) {
  .login-page { grid-template-columns: minmax(0, 480px); padding: 24px 20px; }
  .login-card { min-height: 0; border-right: 1px solid #dfe8da; border-radius: 18px; }
  .login-aside { display: none; }
  .stat-grid { gap: 13px; }
  .stat-card { padding: 18px; }
  .stat-number { font-size: 28px; }
  .week-controls { align-items: flex-start; flex-direction: column; gap: 12px; padding: 16px; }
  .week-controls > div { width: 100%; }
  .week-controls > .header-actions { width: 100%; }
  .org-chart-toolbar { align-items: stretch; flex-direction: column; gap: 10px; }
  .org-chart-toolbar .search-field { width: 100%; max-width: none; }
  .org-chart-toolbar .form-help { text-align: left; }
  .org-tree-children { margin-left: 15px; padding-left: 11px; }
  .org-tree-children > li::before { left: -12px; width: 11px; }
  .org-tree-unit-row { gap: 8px; min-height: 66px; padding: 10px 12px; }
  .unit-heading h3 { font-size: 12px; }
  .unit-division > .org-tree-unit .unit-heading h3 { font-size: 13px; }
  .unit-code, .unit-kind { font-size: 8px; }
  .unit-child-count { flex-basis: 20px; width: 20px; height: 20px; }
  .tree-toggle, .tree-leaf-dot { flex-basis: 24px; width: 24px; height: 24px; }
  .unit-details summary { align-items: flex-start; flex-direction: column; gap: 3px; padding: 9px 12px 9px 44px; }
  .unit-details summary::before { left: 21px; top: 8px; }
  .unit-detail-body { padding: 16px; }
  .unit-detail-columns { grid-template-columns: minmax(0, 1fr); gap: 19px; }
  .unit-product > p { font-size: 11px; }
  .staff-directory-header { flex-wrap: wrap; gap: 11px; padding: 20px; }
  .staff-directory-person h2 { font-size: 15px; }
  .staff-directory-actions { flex-basis: 100%; justify-content: flex-end; padding-top: 3px; }
  .staff-directory-note p { font-size: 11px; line-height: 1.7; }
  .source-panel { padding: 15px 17px; }
}
@media (max-width: 440px) {
  .login-page { padding: 20px 14px; }
  .login-card { padding: 27px 23px; border-radius: 13px; }
  .login-card h1 { font-size: 25px; }
  .login-demo-users { grid-template-columns: minmax(0, 1fr); }
  .stat-grid { grid-template-columns: minmax(0, 1fr); }
  .stat-card { padding: 20px; }
  .week-controls input { width: 100%; }
  .week-controls .button { flex: 1; min-width: 0; padding-left: 9px; padding-right: 9px; }
  .unit-detail-body { padding: 14px 12px; }
  .org-tree-unit-row { gap: 6px; padding-left: 9px; padding-right: 8px; }
  .org-tree-unit-row > .icon-button { width: 27px; height: 27px; padding: 5px; }
  .org-tree-children { margin-left: 11px; padding-left: 9px; }
  .org-tree-children > li::before { left: -10px; width: 9px; }
  .unit-heading h3 { font-size: 11px; }
  .unit-division > .org-tree-unit .unit-heading h3 { font-size: 12px; }
  .unit-kind { gap: 4px; }
  .unit-child-count { display: none; }
  .staff-directory-header { padding: 18px; }
  .staff-directory-header > .avatar { flex-basis: 37px; width: 37px; height: 37px; font-size: 11px; }
  .staff-directory-person h2 { font-size: 14px; }
  .staff-directory-person p { font-size: 10px; }
  .staff-person-badges .role-badge { font-size: 9px; }
  .ledger-item { padding: 16px; }
  .ledger-item > header { align-items: flex-start; flex-direction: column; gap: 8px; }
}
.week-controls > div:first-child { display: block; flex: 1; }
.week-controls > div.header-actions { display: flex; flex: 0 0 auto; }
#stat-select { min-width: 0; max-width: min(500px,100%); width: 340px; flex: 1; text-overflow: ellipsis; }
.toolbar > div:has(#stat-select) { width: 100%; }
.choice-field { min-width: 0; margin: 0; border: 1px solid var(--line); border-radius: 8px; padding: 14px; }
.choice-field legend { padding: 0 6px; font-size: 12px; font-weight: 500; }
.choice-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px 16px; }
.checkbox-label { display: flex !important; align-items: flex-start; gap: 9px; font-size: 12px; line-height: 1.5; }
.checkbox-label input { flex: 0 0 16px; width: 16px; min-height: 16px !important; height: 16px; margin: 2px 0 0; accent-color: var(--teal); }
.editor-description { margin: 0 0 18px; }
.editor-notice { margin: 0 0 18px; }
@media (max-width:900px) { .login-page { grid-template-columns: minmax(0,480px); gap:0; padding: 30px 18px; } .login-aside { display:none; } }
@media (max-width:600px) { .choice-grid { grid-template-columns: minmax(0,1fr); } .week-controls > div.header-actions { width:100%; } .topbar-actions .badge { max-width:150px; white-space:normal; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
@media print {
  .sidebar, .topbar, .header-actions, .toolbar, .row-actions, .chat-form, .toast, .button { display: none !important; }
  .workspace { margin-left: 0; }
  .main-content { padding: 0; }
  .card, .kpi-card, .org-card { break-inside: avoid; }
  :root, body { color: #000; background: #fff; }
}

/* 6A source-map pilot: sectors keep a distinct semantic type and nested card. */
.org-chart-node.type-sector { border-style:dashed; border-top:2px solid #a2b1ca; background:#f1f4fa; }
.org-chart-node.type-sector .org-node-kind { color:#667b9b; }
.unit-sector > .org-tree-unit { border-left:3px solid #a2b1ca; background:#f6f8fc; }

/* Keep installed phone views clear of notches and the home indicator. */
@media (max-width: 1000px) {
  .topbar {
    min-height: calc(68px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
  .sidebar {
    max-width: calc(100vw - 44px);
    padding-top: calc(24px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    padding-left: max(16px, env(safe-area-inset-left, 0px));
  }
  .main-content {
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
    padding-bottom: max(30px, calc(20px + env(safe-area-inset-bottom, 0px)));
  }
  .login-page {
    padding-top: max(20px, env(safe-area-inset-top, 0px));
    padding-bottom: max(20px, calc(12px + env(safe-area-inset-bottom, 0px)));
    padding-left: max(14px, env(safe-area-inset-left, 0px));
    padding-right: max(14px, env(safe-area-inset-right, 0px));
  }
  .modal {
    width: min(620px, calc(100vw - 24px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
    max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  }
  .toast {
    right: max(12px, env(safe-area-inset-right, 0px));
    bottom: max(16px, calc(12px + env(safe-area-inset-bottom, 0px)));
    max-width: calc(100vw - 24px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
  }
}

@media (max-width: 600px) {
  /* 16px controls avoid Safari's automatic focus zoom without disabling zoom. */
  .field input:not([type="checkbox"]):not([type="radio"]),
  .field select, .field textarea, .search-field input, .filter-select,
  .week-controls input, .week-controls select,
  .locale-switch,
  .topbar .locale-switch, .dialog-header-actions .locale-switch,
  .login-language .locale-switch, #chart-division-picker {
    font-size: 16px;
  }
  .field input:not([type="checkbox"]):not([type="radio"]),
  .field select, .week-controls input, .week-controls select,
  .filter-select, .locale-switch, #chart-division-picker { min-height: 44px; }
  .search-field { min-height: 44px; }
  .topbar .locale-switch, .dialog-header-actions .locale-switch {
    min-width: 122px;
    max-width: 138px;
    padding-left: 8px;
  }
  .topbar { gap: 8px; }
  .topbar .breadcrumb strong { font-size: 12px; }
  .topbar-actions { gap: 6px; }
  .topbar-actions > .avatar { display: none; }
  .main-content .button, .modal .button, .login-card .button, .sidebar .button {
    min-height: 44px;
    font-size: 12px;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .icon-button, .org-tree-unit-row > .icon-button {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
  }
  .tree-toggle, .tree-leaf-dot { flex-basis: 44px; width: 44px; height: 44px; }
  .header-actions, .week-controls > .header-actions, .modal-footer { flex-wrap: wrap; }
  .modal-header { flex-wrap: wrap; align-items: flex-start; gap: 12px; }
  .modal-header > div:first-child { flex: 1 1 160px; min-width: 0; }
  .dialog-header-actions { margin-left: auto; max-width: 100%; }
  .modal-body, .modal-header, .modal-footer { padding-left: 18px; padding-right: 18px; }
  .field label, label.field, .field .checkbox-label, .field-error, .form-help, .card-subtitle,
  .page-description, .login-note, .login-card > p, .source-panel,
  .settings-card p, .stat-card .source-panel, .stat-definition,
  .stat-pending, .stat-comparison, .kpi-label, .kpi-foot { font-size: 12px; }
  .page-description, .form-help, .source-panel, .stat-card p,
  .settings-card p, .ledger-item p { overflow-wrap: anywhere; }
  .data-table td, .cell-title { font-size: 13px; }
  .data-table th, .data-table .cell-note { font-size: 11px; }
  .checkbox-label { min-height: 44px; align-items: center; padding: 8px 0; }
  .org-tree-children { margin-left: 6px; padding-left: 6px; }
  .org-tree-children > li::before { left: -7px; width: 6px; }
  .unit-heading h3, .unit-division > .org-tree-unit .unit-heading h3 { font-size: 13px; }
  .unit-details summary { min-height: 44px; font-size: 12px; }
  .unit-details summary > span { font-size: 11px; }
  .unit-details .unit-product > p { font-size: 12px; }
}

@media (max-width: 380px) {
  .org-tree-unit-row { display: grid; grid-template-columns: 44px minmax(0, 1fr); }
  .org-tree-unit-row > .icon-button { grid-column: 2; justify-self: end; }
  .unit-kind .badge { white-space: normal; }
}