/* Arquivar RH — interface de gestão */
:root {
  --brand: #72bd16;
  --brand-deep: #43800a;
  --ink: #171b16;
  --text: #30372e;
  --muted: #788074;
  --line: #e7eae3;
  --canvas: #f7f8fa;
  --surface: #ffffff;
  --green-soft: #eff8e5;
  --amber: #9c6a19;
  --amber-soft: #fff6e7;
  --red: #a54b40;
  --red-soft: #fdf0ed;
  --sidebar-width: 240px;
  --radius: 14px;
  --shadow: 0 3px 18px rgba(31, 43, 23, .035);
  --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; scroll-behavior: smooth; }
body { margin: 0; background: var(--canvas); color: var(--text); font-family: var(--font); font-size: 13px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
button:disabled { opacity: .5; cursor: default; }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid rgba(114, 189, 22, .45); outline-offset: 3px; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
svg { display: block; flex-shrink: 0; }
h1, h2, h3, h4, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
strong { font-weight: 650; }
[hidden] { display: none !important; }
::selection { background: #daefbe; color: var(--ink); }
.app-shell { min-height: 100vh; }
.muted { color: var(--muted); }
.small { font-size: 11px; line-height: 1.5; }
.mono, .tabular, .kpi-value, .hero-stat strong, .data-table td.numeric { font-variant-numeric: tabular-nums; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Navigation */
.sidebar { width: var(--sidebar-width); position: fixed; inset: 0 auto 0 0; z-index: 50; display: flex; flex-direction: column; background: var(--surface); border-right: 1px solid var(--line); overflow-y: auto; scrollbar-width: thin; scrollbar-color: #e1e6db transparent; }
.brand { min-height: 92px; padding: 25px 26px 23px; display: flex; align-items: center; gap: 10px; }
.brand img { width: 171px; max-height: 49px; object-fit: contain; object-position: left center; }
.brand > svg { width: 174px; max-height: 50px; }
.brand-mark { width: 35px; height: 35px; display: grid; place-items: center; color: var(--brand); background: var(--ink); border-radius: 10px; }
.brand-word { color: var(--ink); font-size: 25px; font-weight: 750; letter-spacing: -1.6px; line-height: 1; }
.brand-caption { display: block; margin-top: 6px; color: var(--muted); font-size: 10px; font-weight: 500; letter-spacing: 1.2px; }
.nav-group { padding: 13px 15px 9px; }
.nav-label { display: block; padding: 0 14px 12px; color: #969e91; font-size: 9px; font-weight: 650; letter-spacing: 1.65px; text-transform: uppercase; }
.nav-item { width: 100%; min-height: 45px; margin: 3px 0; padding: 11px 13px; border: 0; border-radius: 9px; display: flex; align-items: center; gap: 12px; background: transparent; color: #70796b; font-size: 12px; font-weight: 500; text-align: left; white-space: nowrap; transition: background .16s ease, color .16s ease; }
.nav-item:hover { background: #f5f7f2; color: var(--ink); }
.nav-item.active, .nav-item[aria-current="page"] { background: var(--ink); color: #ffffff; box-shadow: 0 4px 10px rgba(23, 27, 22, .1); }
.nav-item.active .nav-icon, .nav-item[aria-current="page"] .nav-icon { color: #91d343; }
.nav-icon { width: 19px; height: 19px; color: #90998a; display: grid; place-items: center; }
.nav-icon svg { width: 18px; height: 18px; stroke-width: 1.7; }
.nav-item > svg { width: 18px; height: 18px; stroke-width: 1.7; }
.nav-item.active > svg { color: #91d343; }
.nav-count { margin-left: auto; padding: 1px 6px; min-width: 20px; border-radius: 5px; background: #eff3e9; color: #7b8b6e; font-size: 9px; text-align: center; font-weight: 600; }
.nav-item.active .nav-count { background: #343f2e; color: #bde98e; }
.nav-divider { height: 1px; background: var(--line); margin: 18px 27px 4px; }
.sidebar-footer { margin: auto 16px 20px; padding: 17px 13px 0; border-top: 1px solid var(--line); color: #899080; font-size: 10px; line-height: 1.6; }
.sidebar-footer strong { display: block; color: #5c6655; font-size: 11px; margin-bottom: 4px; }
.sidebar-footer .badge { margin-top: 10px; }
.sidebar-close { display: none; }
.sidebar-scrim { display: none; }

/* Shell and header */
.main-shell { margin-left: var(--sidebar-width); min-height: 100vh; }
.topbar { min-height: 75px; padding: 17px 29px; display: flex; align-items: center; justify-content: space-between; gap: 20px; background: var(--surface); border-bottom: 1px solid var(--line); }
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: #949b8e; font-size: 11px; }
.breadcrumb svg { width: 15px; height: 15px; color: #a7ad9f; }
.breadcrumb strong, .breadcrumb .current { color: #505a48; font-weight: 500; }
.breadcrumb .separator { color: #c1c7ba; }
.topbar-actions { display: flex; align-items: center; gap: 13px; flex-shrink: 0; }
.topbar-status { display: flex; align-items: center; gap: 7px; color: #859078; font-size: 10px; }
.status-dot { width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: var(--brand); }
.icon-button { width: 35px; height: 35px; padding: 8px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #e8ece3; border-radius: 9px; background: var(--surface); color: #7d8772; transition: background .16s, border-color .16s; }
.icon-button:hover { background: #f5f8f0; border-color: #cedbbd; }
.icon-button svg { width: 17px; height: 17px; stroke-width: 1.65; }
.avatar { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 50%; background: #ebf4e1; color: #63883d; border: 3px solid #f6f9f1; font-size: 11px; font-weight: 700; }
.profile-block { display: flex; align-items: center; gap: 9px; padding-left: 14px; border-left: 1px solid var(--line); }
.profile-name { color: #46503e; font-size: 11px; font-weight: 600; }
.profile-role { color: #a1a897; font-size: 9px; }
.menu-toggle { display: none; }
.main-content { max-width: 1600px; margin: 0 auto; padding: 27px 29px 22px; }
.page-heading { margin-bottom: 23px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.page-title { color: var(--ink); font-size: 25px; font-weight: 650; letter-spacing: -.8px; line-height: 1.25; }
.page-subtitle { max-width: 740px; margin-top: 6px; color: #909889; font-size: 11px; line-height: 1.7; }
.page-kicker { color: #8a947f; font-size: 9px; font-weight: 650; letter-spacing: 1.8px; text-transform: uppercase; margin-bottom: 5px; }
.heading-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-top: 3px; }
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 9px; }
.filter-field { display: flex; flex-direction: column; gap: 5px; }
.filter-label { color: #8b947f; font-size: 9px; font-weight: 500; }
.select-control { min-height: 37px; max-width: 100%; padding: 8px 29px 8px 12px; color: #657058; background-color: #fff; border: 1px solid #e1e7da; border-radius: 8px; font-size: 11px; line-height: 1.4; }
.select-control:hover { border-color: #bdcbaa; }
.button { min-height: 37px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 14px; border: 1px solid transparent; border-radius: 8px; font-size: 11px; font-weight: 550; line-height: 1.4; white-space: nowrap; transition: background .16s ease, box-shadow .16s ease, border-color .16s ease; }
.button svg { width: 15px; height: 15px; stroke-width: 1.8; }
.button-primary { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 3px 7px rgba(94, 155, 18, .12); }
.button-primary:hover { background: #63a912; border-color: #63a912; box-shadow: 0 4px 10px rgba(94, 155, 18, .2); }
.button-secondary { background: #fff; border-color: #e1e7da; color: #657058; }
.button-secondary:hover { background: #f3f7ed; border-color: #cedcbe; }
.button-dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.button-dark:hover { background: #2c3526; }
.button-link { min-height: auto; border: 0; background: transparent; color: #77a346; padding: 0; font-size: 11px; }

/* Executive banner */
.hero { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 176px; padding: 28px 30px; margin-bottom: 22px; overflow: hidden; border-radius: 15px; background: #1c251b; color: #fff; box-shadow: 0 6px 21px rgba(23, 35, 18, .07); }
.hero::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse at 91% 7%, rgba(136, 194, 74, .13), transparent 60%); pointer-events: none; }
.hero::after { content: ""; position: absolute; z-index: -1; width: 260px; height: 260px; right: -102px; bottom: -159px; border-radius: 50%; border: 40px solid rgba(141, 188, 96, .045); pointer-events: none; }
.hero-main { max-width: 560px; position: relative; z-index: 1; }
.hero-eyebrow { margin-bottom: 9px; color: #a7bf93; font-size: 9px; font-weight: 600; letter-spacing: 1.7px; text-transform: uppercase; display: flex; align-items: center; gap: 7px; }
.hero-eyebrow svg { width: 13px; height: 13px; color: #a0d75e; }
.hero-title { color: #fff; font-size: 23px; font-weight: 550; line-height: 1.3; letter-spacing: -.6px; }
.hero-title em, .hero-title span { color: #a1d56d; font-style: normal; }
.hero-text { margin-top: 9px; color: #a9b4a3; font-size: 11px; line-height: 1.8; max-width: 505px; }
.hero-badge { display: inline-flex; align-items: center; gap: 5px; margin-top: 13px; padding: 4px 8px; border: 1px solid rgba(171, 211, 132, .2); border-radius: 5px; color: #b1d596; background: rgba(144, 192, 104, .05); font-size: 9px; font-weight: 500; }
.hero-badge svg { width: 11px; height: 11px; }
.hero-stats { position: relative; z-index: 1; display: flex; align-items: center; gap: 27px; flex-shrink: 0; }
.hero-stat { min-width: 73px; padding-left: 24px; border-left: 1px solid rgba(255, 255, 255, .1); }
.hero-stat:first-child { border-left: 0; padding-left: 0; }
.hero-stat strong { display: block; color: #f4f8ef; font-size: 28px; font-weight: 550; letter-spacing: -1px; line-height: 1.2; }
.hero-stat span { display: block; max-width: 110px; margin-top: 7px; color: #9da995; font-size: 10px; line-height: 1.5; }
.hero-stat small { display: block; color: #7e9372; font-size: 9px; margin-top: 3px; }
.hero .badge { border-color: rgba(170, 206, 143, .16); background: rgba(126, 178, 79, .1); color: #b8d99e; }

/* Metric cards */
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 23px; }
.kpi-grid.kpi-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kpi-grid.kpi-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi-card { min-width: 0; position: relative; padding: 20px 21px 17px; background: #fff; border: 1px solid #e5e9df; border-radius: 12px; box-shadow: var(--shadow); }
.kpi-card:hover { border-color: #d6e2c9; }
.kpi-card.kpi-featured { background: #f1f7e9; border-color: #e4edd9; }
.kpi-card.kpi-amber { background: #fffaf0; border-color: #f2e8d4; }
.kpi-card.kpi-blue { background: #f1f6fa; border-color: #e2ebf2; }
.kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.kpi-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px; color: #73a347; background: #eff7e6; flex-shrink: 0; }
.kpi-icon svg { width: 18px; height: 18px; stroke-width: 1.65; }
.kpi-icon.amber { background: #fff3dd; color: #b38b42; }
.kpi-icon.blue { background: #eaf2f8; color: #7198b3; }
.kpi-icon.purple { background: #f2edf8; color: #a18ab9; }
.kpi-icon.gray { background: #f1f3ee; color: #8b9681; }
.kpi-label { display: block; color: #8a9382; font-size: 10px; font-weight: 450; line-height: 1.5; }
.kpi-value { display: block; margin-top: 4px; color: #2b3524; font-size: 29px; line-height: 1.2; font-weight: 600; letter-spacing: -1px; overflow-wrap: anywhere; }
.kpi-value .kpi-unit { margin-left: 3px; color: #9aab89; font-size: 12px; font-weight: 400; letter-spacing: 0; }
.kpi-note { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 10px; color: #a0a795; font-size: 9px; line-height: 1.55; }
.kpi-note svg { width: 11px; height: 11px; }
.kpi-note .positive { color: #79a34f; }
.kpi-note .negative { color: #ad7d4b; }
.kpi-note .badge { font-size: 8px; padding: 2px 5px; }
.kpi-card > .kpi-icon { float: right; margin: 0 0 10px 8px; }
.kpi-card > .kpi-label { padding-top: 2px; }

/* Content panels and charts */
.grid-2 { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 20px; margin-bottom: 21px; }
.grid-2.equal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: 21px; }
.panel { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.panel + .panel.full-width { margin-top: 20px; }
.panel-header { min-height: 66px; padding: 19px 23px 16px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; border-bottom: 1px solid #f0f2ec; }
.panel-title { color: #3e4934; font-size: 12px; font-weight: 600; line-height: 1.5; }
.panel-subtitle { color: #a0a894; font-size: 9px; margin-top: 3px; line-height: 1.6; }
.panel-header .badge { flex-shrink: 0; margin-top: 1px; }
.panel-body { padding: 20px 23px; }
.panel-body.compact { padding: 12px 23px 16px; }
.panel-body.no-padding { padding: 0; }
.panel-body > .notice:last-child { margin-bottom: 0; }
.panel-actions { display: flex; align-items: center; gap: 6px; }
.panel-actions .icon-button { width: 26px; height: 26px; padding: 5px; background: #f8faf5; border-color: #eef2e8; border-radius: 6px; }
.panel-actions .icon-button svg { width: 13px; height: 13px; }
.panel-footer { padding: 12px 23px 16px; color: #9aa38f; font-size: 9px; line-height: 1.65; border-top: 1px solid #f1f3ec; }
.chart { width: 100%; min-width: 0; }
.chart svg, .chart-svg, .panel-body > svg { width: 100%; height: auto; overflow: visible; }
.chart svg text, .chart-svg text, .panel-body > svg text { font-family: var(--font); font-size: 11px; }
.chart-grid { stroke: #edf0e7; stroke-dasharray: 3 4; }
.chart-axis { color: #a1aa95; fill: #a1aa95; }
.chart-legend { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 15px; color: #929c84; font-size: 9px; padding-top: 9px; }
.chart-legend > span, .legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-dot { width: 7px; height: 7px; display: inline-block; flex-shrink: 0; border-radius: 50%; background: var(--brand); }
.legend-dot.secondary { background: #c1d7ad; }
.legend-dot.tertiary { background: #e0e8d9; }
.chart-caption { color: #a1aa95; font-size: 9px; line-height: 1.6; margin-top: 11px; }
.donut-layout { display: flex; align-items: center; justify-content: center; gap: 22px; min-height: 215px; }
.donut-layout > svg { max-width: 210px; }
.donut-legend { flex: 1; min-width: 120px; max-width: 180px; }
.donut-legend .metric-row { padding: 9px 0; }
.sparkline { height: 28px; width: 100%; margin-top: 8px; opacity: .8; }

/* Status and detail lists */
.badge { display: inline-flex; align-items: center; justify-content: center; gap: 4px; width: fit-content; max-width: 100%; padding: 4px 7px; border: 1px solid transparent; border-radius: 5px; font-size: 9px; line-height: 1.3; font-weight: 500; white-space: nowrap; }
.badge svg { width: 10px; height: 10px; }
.badge-green { color: #6b953d; background: #f1f8e8; border-color: #e7f1db; }
.badge-amber { color: #b18a45; background: #fff8ea; border-color: #f6ecd7; }
.badge-muted { color: #939e87; background: #f4f6f0; border-color: #ecefe6; }
.badge-red { color: #b07466; background: #fdf3ee; border-color: #f7e8e0; }
.badge-blue { color: #7596b1; background: #f0f5fa; border-color: #e8eff5; }
.metric-list { display: flex; flex-direction: column; }
.metric-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 12px 0; border-bottom: 1px solid #f0f3ea; font-size: 11px; }
.metric-row:last-child { border-bottom: 0; }
.metric-row > span:first-child { color: #8c9780; }
.metric-row strong { color: #525f45; font-size: 12px; font-weight: 550; font-variant-numeric: tabular-nums; }
.metric-row .badge { margin-left: auto; }
.metric-label { display: flex; align-items: center; gap: 7px; }
.metric-value { font-variant-numeric: tabular-nums; color: #46563b; font-weight: 550; }
.unit-row { padding: 15px 0; border-bottom: 1px solid #f0f3ea; }
.unit-row:first-child { padding-top: 0; }
.unit-row:last-child { padding-bottom: 0; border-bottom: 0; }
.unit-row-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.unit-name { color: #6f7a62; font-size: 10px; font-weight: 550; }
.unit-name small { color: #a8b09e; font-size: 9px; font-weight: 400; margin-left: 6px; }
.unit-value { color: #58684b; font-size: 11px; font-variant-numeric: tabular-nums; font-weight: 550; }
.unit-description { font-size: 9px; color: #a0aa94; margin-top: 6px; }
.progress-track { height: 5px; background: #f0f3e9; border-radius: 4px; overflow: hidden; }
.progress-fill { height: 100%; max-width: 100%; background: #8ec84d; border-radius: inherit; }
.progress-fill.secondary { background: #bad59c; }
.progress-fill.tertiary { background: #d7e5c9; }
.progress-fill.amber { background: #d8bc81; }
.action-list { display: grid; gap: 15px; }
.action-item { display: flex; gap: 10px; align-items: flex-start; }
.action-icon { width: 29px; height: 29px; padding: 7px; display: grid; place-items: center; flex-shrink: 0; border-radius: 7px; color: #98b879; background: #f3f8ec; }
.action-icon svg { width: 14px; height: 14px; }
.action-item strong { display: block; color: #748167; font-size: 10px; font-weight: 550; margin-bottom: 3px; }
.action-item p { color: #a4ad99; font-size: 9px; line-height: 1.7; }

/* Tables and people */
.table-wrap { width: 100%; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #dce5d2 transparent; }
.data-table { width: 100%; border-collapse: collapse; text-align: left; white-space: nowrap; font-size: 10px; }
.data-table th { padding: 12px 18px; color: #9aa58d; font-size: 9px; font-weight: 500; letter-spacing: .1px; background: #fafbf7; border-bottom: 1px solid #edf1e6; }
.data-table td { padding: 13px 18px; color: #87947b; border-bottom: 1px solid #f0f3e9; vertical-align: middle; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: #fcfdf9; }
.data-table td strong { color: #657459; font-weight: 550; }
.data-table .numeric { text-align: right; font-variant-numeric: tabular-nums; }
.data-table th:first-child, .data-table td:first-child { padding-left: 23px; }
.data-table th:last-child, .data-table td:last-child { padding-right: 23px; }
.data-table .wrap { white-space: normal; min-width: 130px; }
.data-table .badge { font-size: 8px; padding: 3px 6px; }
.employee { display: flex; align-items: center; gap: 9px; }
.employee-avatar { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: #f0f6e8; color: #92ad77; font-size: 9px; font-weight: 600; flex-shrink: 0; }
.employee-avatar:nth-child(3n) { background: #f1f4f8; color: #9aaec0; }
.employee-name { color: #758366; font-size: 10px; font-weight: 550; }
.employee-role { color: #a8b19c; font-size: 9px; margin-top: 2px; }
.table-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 23px; border-bottom: 1px solid #eff3e8; }
.table-toolbar .select-control { min-height: 32px; padding-top: 6px; padding-bottom: 6px; font-size: 10px; }
.search-box { display: flex; align-items: center; gap: 7px; min-height: 33px; padding: 6px 9px; border: 1px solid #e8eddf; border-radius: 7px; background: #fff; }
.search-box svg { width: 14px; height: 14px; color: #a4af98; }
.search-box input { width: 180px; min-width: 0; border: 0; background: transparent; color: #78866b; font-size: 10px; outline: none; }
.search-box input::placeholder { color: #afb7a5; }
.search-box:focus-within { outline: 2px solid #d5eabc; outline-offset: 1px; }
.table-pagination { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 23px; border-top: 1px solid #eff3e8; color: #a1ab95; font-size: 9px; }
.pagination-buttons { display: flex; align-items: center; gap: 4px; }
.pagination-buttons button { width: 25px; height: 25px; padding: 4px; display: grid; place-items: center; border: 1px solid #e6eddc; background: #fff; border-radius: 5px; color: #9aab88; font-size: 9px; }
.pagination-buttons button.active { background: #edf6df; color: #79a44d; border-color: #dbecc7; }

/* Notices, sources and missing inputs */
.notice { display: flex; align-items: flex-start; gap: 10px; padding: 13px 15px; margin-bottom: 18px; border: 1px solid #edf1e5; border-radius: 9px; background: #fafcf6; }
.notice-icon { display: grid; place-items: center; flex-shrink: 0; color: #a3b589; width: 17px; height: 17px; margin-top: 1px; }
.notice-icon svg { width: 16px; height: 16px; stroke-width: 1.6; }
.notice-body { min-width: 0; color: #9aa58a; font-size: 10px; line-height: 1.7; }
.notice-body strong { color: #7d8d6b; font-weight: 550; }
.notice-body p + p { margin-top: 5px; }
.notice-amber { background: #fffaf0; border-color: #f2e9d4; }
.notice-amber .notice-icon, .notice-amber .notice-body { color: #b29b6b; }
.notice-amber .notice-body strong { color: #9c8351; }
.empty-state { padding: 37px 25px; text-align: center; color: #a3ad97; font-size: 11px; line-height: 1.8; }
.empty-state > svg { width: 32px; height: 32px; margin: 0 auto 13px; color: #c9d5bc; stroke-width: 1.2; }
.empty-state h3 { margin-bottom: 5px; color: #849271; font-size: 12px; font-weight: 550; }
.empty-state p { max-width: 370px; margin: 0 auto; font-size: 10px; }
.empty-state .button { margin-top: 17px; }
.source-list { display: flex; flex-direction: column; }
.source-list li, .source-item { padding: 12px 0; border-bottom: 1px solid #f0f3e8; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.source-list li:last-child, .source-item:last-child { border-bottom: 0; }
.source-list strong, .source-item strong { color: #7e8c6e; font-size: 10px; font-weight: 550; }
.source-list p, .source-item p { margin-top: 3px; color: #aab39d; font-size: 9px; line-height: 1.65; overflow-wrap: anywhere; }
.source-icon { width: 29px; height: 29px; flex-shrink: 0; padding: 7px; border: 1px solid #e7eedc; background: #f8fbf3; color: #9db783; border-radius: 7px; }
.source-icon svg { width: 13px; height: 13px; }
.source-main { flex: 1; min-width: 0; }
.source-meta { color: #b0baa2; font-size: 9px; white-space: nowrap; }
.footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 19px 1px 0; color: #b1b8a6; font-size: 9px; line-height: 1.6; }
.footer strong { color: #a1ae92; font-weight: 500; }
.view > .panel { margin-bottom: 20px; }

/* Tabs, dialogs, forms */
.tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; padding: 4px; margin-bottom: 19px; background: #f0f3eb; border: 1px solid #e9eee0; border-radius: 9px; width: fit-content; max-width: 100%; }
.tab { padding: 7px 13px; min-height: 30px; border: 0; border-radius: 6px; background: transparent; color: #a0ac93; font-size: 10px; font-weight: 500; }
.tab.active, .tab[aria-selected="true"] { color: #71875b; background: #fff; box-shadow: 0 1px 5px rgba(67, 94, 38, .06); }
.tab:hover { color: #70865b; }
.modal-overlay { position: fixed; z-index: 100; inset: 0; padding: 30px 20px; display: flex; align-items: center; justify-content: center; background: rgba(23, 31, 18, .4); backdrop-filter: blur(3px); overflow-y: auto; }
.modal { width: 100%; max-width: 660px; max-height: calc(100dvh - 60px); overflow-y: auto; background: #fff; border: 1px solid #e5ebdc; border-radius: 15px; box-shadow: 0 22px 90px rgba(15, 27, 7, .17); }
.modal-header { padding: 21px 24px 18px; display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; border-bottom: 1px solid #eff3e8; }
.modal-header h2 { color: #637653; font-size: 16px; font-weight: 550; line-height: 1.45; }
.modal-header p { color: #a1af93; font-size: 10px; margin-top: 4px; }
.modal-body { padding: 22px 24px 25px; color: #8d9d7c; font-size: 11px; line-height: 1.8; }
.modal-body h3 { color: #7b9067; font-size: 12px; font-weight: 550; margin: 16px 0 7px; }
.modal-body h3:first-child { margin-top: 0; }
.modal-body ul { list-style: disc; padding-left: 18px; }
.modal-body li + li { margin-top: 5px; }
.modal-body .data-table { white-space: normal; }
.modal-close { width: 28px; height: 28px; display: grid; place-items: center; flex-shrink: 0; border: 1px solid #e6eddd; border-radius: 7px; background: #f8fbf4; color: #9aae89; }
.modal-close svg { width: 14px; height: 14px; }
.modal-footer { display: flex; justify-content: flex-end; gap: 9px; padding: 16px 24px; border-top: 1px solid #eff3e8; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { color: #859875; font-size: 10px; }
.form-field input, .form-field select, .form-field textarea { min-height: 38px; width: 100%; padding: 9px 11px; color: #71885e; background: #fff; border: 1px solid #e0e9d5; border-radius: 7px; font-size: 11px; }
.form-field textarea { min-height: 95px; resize: vertical; }
.form-field input::placeholder, .form-field textarea::placeholder { color: #b9c4ad; }
.toast { position: fixed; z-index: 120; bottom: 24px; right: 25px; max-width: 370px; display: flex; align-items: flex-start; gap: 10px; padding: 15px 19px; background: #263420; color: #d7e8c9; border: 1px solid #415b32; border-radius: 10px; box-shadow: 0 8px 30px rgba(20, 40, 9, .2); font-size: 11px; line-height: 1.7; }
.toast svg { width: 17px; height: 17px; color: #a7d97b; margin-top: 1px; }

/* Compact laptop and tablet */
@media (min-width: 1500px) {
  .main-content { padding-top: 31px; }
  .hero { min-height: 187px; padding-left: 34px; padding-right: 34px; }
  .kpi-card { padding: 23px 24px 20px; }
  .kpi-value { font-size: 32px; }
}
@media (max-width: 1240px) {
  :root { --sidebar-width: 220px; }
  .brand { padding-left: 22px; padding-right: 22px; }
  .brand img { width: 163px; }
  .main-content { padding: 24px 23px 20px; }
  .topbar { padding-left: 23px; padding-right: 23px; }
  .page-heading { flex-wrap: wrap; gap: 15px; }
  .filter-bar { justify-content: flex-start; }
  .hero { padding: 25px; gap: 20px; }
  .hero-title { font-size: 21px; }
  .hero-text { max-width: 420px; }
  .hero-stats { gap: 16px; }
  .hero-stat { padding-left: 16px; min-width: 61px; }
  .hero-stat strong { font-size: 25px; }
  .hero-stat span { font-size: 9px; max-width: 90px; }
  .kpi-grid { gap: 13px; }
  .kpi-card { padding: 17px 16px 15px; }
  .kpi-value { font-size: 26px; }
  .kpi-grid.kpi-grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-2 { gap: 17px; }
  .grid-3 { gap: 16px; }
  .panel-header { padding-left: 19px; padding-right: 19px; }
  .panel-body { padding-left: 19px; padding-right: 19px; }
  .donut-layout { gap: 12px; }
}
@media (max-width: 1050px) {
  .topbar-status { display: none; }
  .hero { flex-wrap: wrap; }
  .hero-main { max-width: none; }
  .hero-text { max-width: 600px; }
  .hero-stats { width: 100%; gap: 27px; padding-top: 4px; }
  .hero-stat { min-width: 80px; padding-left: 25px; }
  .hero-stat span { max-width: none; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-grid.kpi-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-2 { grid-template-columns: 1fr; }
  .grid-2.equal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 > :last-child:nth-child(3) { grid-column: 1 / -1; }
  .donut-layout { min-height: 180px; }
  .donut-layout > svg { max-width: 180px; }
  .grid-2.equal .donut-layout { flex-direction: column; gap: 5px; }
  .grid-2.equal .donut-legend { width: 100%; max-width: none; }
}
@media (max-width: 800px) {
  :root { --sidebar-width: 240px; }
  .sidebar { transform: translateX(-100%); transition: transform .22s ease; box-shadow: none; }
  .main-shell { margin-left: 0; }
  .sidebar-open .sidebar { transform: translateX(0); box-shadow: 12px 0 60px rgba(26, 38, 17, .12); }
  .sidebar-open .sidebar-scrim { display: block; position: fixed; inset: 0; z-index: 45; background: rgba(25, 35, 18, .3); }
  .sidebar-close { display: grid; position: absolute; top: 18px; right: 10px; width: 22px; height: 22px; padding: 4px; background: #f3f6ed; border: 0; border-radius: 6px; color: #9dab8f; }
  .menu-toggle { display: inline-flex; }
  .topbar { min-height: 65px; padding: 14px 21px; gap: 12px; }
  .topbar-actions { margin-left: auto; gap: 9px; }
  .breadcrumb { margin-right: auto; font-size: 10px; gap: 7px; }
  .main-content { padding: 24px 21px 20px; }
  .page-title { font-size: 24px; }
  .kpi-card { padding: 19px 21px 17px; }
  .kpi-value { font-size: 29px; }
  .hero { padding: 25px 26px; }
  .hero-title { font-size: 22px; }
  .grid-2.equal { grid-template-columns: 1fr; }
  .grid-2.equal .donut-layout { flex-direction: row; gap: 20px; }
  .grid-2.equal .donut-legend { max-width: 200px; }
}
@media (max-width: 540px) {
  body { font-size: 12px; }
  .topbar { padding: 12px 16px; min-height: 61px; }
  .topbar-actions > .icon-button { display: none; }
  .profile-block { border-left: 0; padding-left: 0; }
  .profile-name, .profile-role { display: none; }
  .topbar .avatar { width: 31px; height: 31px; font-size: 10px; }
  .breadcrumb > span:first-of-type { display: none; }
  .main-content { padding: 21px 16px 17px; }
  .page-heading { margin-bottom: 18px; gap: 14px; }
  .page-title { font-size: 22px; letter-spacing: -.6px; }
  .page-subtitle { font-size: 10px; margin-top: 5px; }
  .heading-actions { width: 100%; }
  .filter-bar { width: 100%; gap: 7px; }
  .filter-bar .select-control { flex: 1; min-width: 120px; }
  .select-control { font-size: 11px; min-height: 38px; }
  .button { min-height: 38px; padding: 8px 12px; font-size: 10px; }
  .hero { min-height: auto; padding: 22px 21px; margin-bottom: 17px; gap: 20px; border-radius: 13px; }
  .hero-title { font-size: 20px; }
  .hero-text { font-size: 10px; }
  .hero-eyebrow { font-size: 8px; }
  .hero-stats { justify-content: space-between; gap: 12px; }
  .hero-stat { min-width: 0; flex: 1; padding-left: 16px; }
  .hero-stat strong { font-size: 24px; }
  .hero-stat span { font-size: 8px; margin-top: 5px; }
  .hero-stat small { font-size: 8px; }
  .kpi-grid, .kpi-grid.kpi-grid-5, .kpi-grid.kpi-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; margin-bottom: 17px; }
  .kpi-card { padding: 16px 15px 13px; border-radius: 11px; }
  .kpi-top { margin-bottom: 10px; gap: 7px; }
  .kpi-icon { width: 31px; height: 31px; border-radius: 8px; }
  .kpi-icon svg { width: 16px; height: 16px; }
  .kpi-label { font-size: 9px; }
  .kpi-value { font-size: 25px; }
  .kpi-note { font-size: 8px; gap: 4px; margin-top: 8px; }
  .kpi-card > .kpi-icon { margin-left: 4px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; gap: 16px; margin-bottom: 17px; }
  .grid-3 > :last-child:nth-child(3) { grid-column: auto; }
  .panel { border-radius: 12px; }
  .panel-header { padding: 16px 18px 14px; min-height: 60px; }
  .panel-title { font-size: 11px; }
  .panel-subtitle { font-size: 9px; }
  .panel-body { padding: 18px; }
  .panel-body.compact { padding: 11px 18px 15px; }
  .panel-footer { padding: 12px 18px; }
  .table-toolbar { padding: 12px 18px; }
  .search-box { width: 100%; }
  .search-box input { width: 100%; font-size: 12px; }
  .data-table th, .data-table td { padding: 11px 14px; }
  .data-table th:first-child, .data-table td:first-child { padding-left: 18px; }
  .data-table th:last-child, .data-table td:last-child { padding-right: 18px; }
  .table-pagination { padding: 12px 18px; }
  .notice { padding: 12px 13px; gap: 9px; margin-bottom: 16px; }
  .notice-body { font-size: 9px; }
  .donut-layout, .grid-2.equal .donut-layout { gap: 12px; min-height: 170px; }
  .donut-layout > svg { max-width: 160px; }
  .donut-legend { min-width: 100px; }
  .chart-legend { gap: 11px; font-size: 8px; }
  .modal-overlay { padding: 14px 12px; }
  .modal { max-height: calc(100dvh - 28px); border-radius: 12px; }
  .modal-header { padding: 18px; }
  .modal-body { padding: 18px; }
  .modal-footer { padding: 14px 18px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-field input, .form-field select, .form-field textarea { font-size: 16px; }
  .toast { left: 16px; right: 16px; bottom: 17px; max-width: none; font-size: 10px; }
  .footer { font-size: 8px; padding-top: 15px; }
}
@media (max-width: 360px) {
  .main-content { padding-left: 12px; padding-right: 12px; }
  .topbar { padding-left: 12px; padding-right: 12px; }
  .hero { padding: 20px 17px; }
  .hero-stats { gap: 7px; }
  .hero-stat { padding-left: 10px; }
  .hero-stat strong { font-size: 22px; }
  .kpi-grid { gap: 9px; }
  .kpi-card { padding: 14px 12px; }
  .kpi-value { font-size: 23px; }
  .kpi-card > .kpi-icon { width: 27px; height: 27px; }
  .kpi-card > .kpi-icon svg { width: 14px; height: 14px; }
  .donut-layout, .grid-2.equal .donut-layout { flex-direction: column; }
  .donut-legend { width: 100%; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Printable review */
@media print {
  @page { size: A4 landscape; margin: 12mm; }
  body { background: #fff; color: #222; font-size: 10px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .sidebar, .topbar, .filter-bar, .heading-actions, .panel-actions, .button, .modal-overlay, .toast, .sidebar-scrim, .table-toolbar, .table-pagination { display: none !important; }
  .main-shell { margin-left: 0; }
  .main-content { max-width: none; padding: 0; }
  .page-heading { margin-bottom: 15px; }
  .page-title { font-size: 21px; }
  .page-subtitle { color: #68725f; font-size: 10px; }
  .hero { margin-bottom: 15px; min-height: auto; padding: 20px; box-shadow: none; }
  .hero-title { font-size: 20px; }
  .hero-stats { width: auto; }
  .hero-stat strong { font-size: 24px; }
  .kpi-grid, .kpi-grid.kpi-grid-5 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .kpi-card { padding: 15px; box-shadow: none; }
  .kpi-value { font-size: 25px; }
  .grid-2, .grid-2.equal { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
  .panel, .kpi-card, .hero, .notice { break-inside: avoid; }
  .panel { box-shadow: none; }
  .panel-header { min-height: auto; padding: 13px 16px; }
  .panel-body { padding: 15px 16px; }
  .table-wrap { overflow: visible; }
  .data-table { white-space: normal; font-size: 9px; }
  .data-table th, .data-table td { padding: 9px 12px; }
  .data-table thead { display: table-header-group; }
  .data-table tr { break-inside: avoid; }
  .footer { margin-top: 10px; color: #8a927f; }
}

/* Application composition */
.skip-link { position: fixed; z-index: 200; top: -80px; left: 16px; padding: 11px 17px; border-radius: 8px; background: var(--ink); color: white; }
.skip-link:focus { top: 12px; }
.brand { flex-direction: column; align-items: flex-start; gap: 11px; padding-top: 26px; padding-bottom: 21px; min-height: 111px; }
.brand > span { color: #8a947f; font-size: 8px; font-weight: 550; letter-spacing: 2.1px; }
.brand img { height: auto; max-height: 48px; }
.sidebar-status { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; color: #6e7c61; font-size: 10px; }
.sidebar-footer > span, .sidebar-footer > small { display: block; margin-top: 3px; }
.sidebar-footer > small { font-size: 10px; color: #9aa48d; }
.topbar-left { display: flex; align-items: center; gap: 13px; min-width: 0; }
#menu-toggle { display: none; }
.topbar-date { color: #8c9781; font-size: 11px; }
.topbar-divider { width: 1px; height: 28px; background: var(--line); margin: 0 4px; }
.profile-label { display: flex; align-items: center; gap: 9px; }
.profile-label strong { display: block; color: #556249; font-size: 11px; font-weight: 600; }
.profile-label small { display: block; color: #9ba78f; font-size: 9px; margin-top: 1px; }
.avatar-dark { background: #eff5e7; color: #85a862; border-color: #f5f8ef; }
.avatar-dark svg { width: 15px; height: 15px; }
.icon-button > span { display: grid; place-items: center; }
.breadcrumb-separator { color: #bbc5af; }
.breadcrumb #breadcrumb-current { color: #627252; }
.filter-bar { justify-content: space-between; margin-bottom: 22px; padding: 0 0 1px; }
.filter-controls { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.filter-field > span { font-size: 10px; color: #929e86; }
.filter-controls .select-control { min-width: 180px; }
.global-search { display: flex; align-items: center; gap: 9px; width: 242px; min-height: 38px; padding: 9px 12px; background: white; border: 1px solid #e2e8d9; border-radius: 8px; align-self: flex-end; }
.global-search svg { width: 15px; height: 15px; color: #9dac8d; }
.global-search input { width: 100%; min-width: 0; border: 0; outline: 0; padding: 0; background: transparent; color: #657856; font-size: 11px; }
.global-search input::placeholder { color: #a7b19b; }
.global-search:focus-within { border-color: #b9d49e; outline: 2px solid #e0efcf; outline-offset: 1px; }
.view-stack { display: flex; flex-direction: column; gap: 21px; min-width: 0; }
.view-stack > .kpi-grid, .view-stack > .section-grid, .view-stack > .hero-panel, .view-stack > .panel, .view-stack > .notice { margin-bottom: 0; }
.section-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; min-width: 0; }
.section-grid.two-thirds { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.section-grid.half { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hero-panel { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(250px, 1fr); align-items: center; gap: 30px; padding: 30px; background: #1d281c; color: #fff; border: 1px solid #253321; border-radius: 15px; overflow: hidden; box-shadow: 0 6px 23px rgba(21, 37, 12, .05); }
.hero-panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 94% 0, rgba(135, 197, 74, .12), transparent 63%); }
.hero-panel::after { content: ""; width: 270px; height: 270px; position: absolute; right: -130px; bottom: -210px; border: 30px solid rgba(148, 199, 105, .06); border-radius: 50%; z-index: -1; }
.hero-copy { position: relative; min-width: 0; }
.eyebrow { display: flex; align-items: center; gap: 7px; color: #85996e; font-size: 10px; font-weight: 600; letter-spacing: 1.45px; text-transform: uppercase; margin-bottom: 10px; }
.eyebrow svg { width: 14px; height: 14px; }
.hero-panel .eyebrow { color: #aac98e; }
.hero-panel .hero-title { color: #fff; font-size: 25px; font-weight: 550; letter-spacing: -.7px; }
.hero-description { max-width: 510px; color: #b4c2aa; font-size: 12px; line-height: 1.8; margin-top: 10px; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-top: 19px; }
.hero-actions .button { min-height: 33px; font-size: 10px; padding: 7px 11px; }
.hero-panel .button-secondary, .hero-panel .button-ghost { color: #d4e5c6; background: rgba(208, 230, 188, .065); border-color: rgba(193, 220, 165, .22); box-shadow: none; }
.hero-panel .button-secondary:hover, .hero-panel .button-ghost:hover { background: rgba(208, 230, 188, .13); }
.hero-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.hero-mini { min-width: 0; min-height: 97px; padding: 18px 17px; display: flex; flex-direction: column; justify-content: center; background: rgba(255, 255, 255, .035); border: 1px solid rgba(211, 229, 194, .09); border-radius: 10px; }
.hero-mini strong { display: block; color: #eef8e6; font-size: 26px; font-weight: 550; line-height: 1.2; letter-spacing: -.7px; font-variant-numeric: tabular-nums; }
.hero-mini span { display: block; margin-top: 7px; color: #a5b798; font-size: 10px; line-height: 1.5; }
.hero-mini small { color: #9aaf89; font-size: 10px; margin-top: 3px; }
.tone-green { background: #f2f8e9; border-color: #e6efd9; }
.tone-blue { background: #f0f6fa; border-color: #e1ebf2; }
.tone-lilac { background: #f5f2fa; border-color: #ebe4f2; }
.tone-peach { background: #fff6ed; border-color: #f5e9db; }
.tone-green .kpi-icon { background: #e5f2d5; color: #78a449; }
.tone-blue .kpi-icon { background: #e1eef6; color: #739cb7; }
.tone-lilac .kpi-icon { background: #ece5f4; color: #a18ab7; }
.tone-peach .kpi-icon { background: #fae8d6; color: #c49b70; }
.kpi-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 11px; color: #9aa68b; font-size: 10px; line-height: 1.6; }
.kpi-meta svg { width: 12px; height: 12px; }
.chart-wrap { min-width: 0; width: 100%; }
.chart-wrap > svg { width: 100%; height: auto; overflow: visible; }
.chart-wrap svg text { font-family: var(--font); font-size: 11px; }
.dot { display: inline-block; flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
.unit-list { display: flex; flex-direction: column; }
.unit-list .unit-row { display: flex; align-items: center; gap: 12px; padding: 15px 0; }
.unit-list .unit-row:first-child { padding-top: 0; }
.unit-list .unit-row:last-child { padding-bottom: 0; }
.unit-icon { width: 36px; height: 36px; padding: 9px; flex-shrink: 0; display: grid; place-items: center; border-radius: 9px; background: #f0f6e7; color: #8dab70; }
.unit-icon svg { width: 17px; height: 17px; }
.unit-copy { min-width: 0; flex: 1; }
.unit-copy strong { display: block; color: #748665; font-size: 11px; font-weight: 550; }
.unit-copy span, .unit-copy small { display: block; margin-top: 3px; color: #a3af96; font-size: 10px; line-height: 1.55; }
.unit-count { color: #5d734b; font-size: 21px; font-weight: 550; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.badge-neutral { color: #7b8b6d; background: #f3f6ee; border-color: #e9eee1; }
.button-ghost { border-color: #e5eddb; background: transparent; color: #859a70; }
.button-ghost:hover { background: #f4f8ec; border-color: #d6e4c6; }
.empty-icon { width: 44px; height: 44px; margin: 0 auto 13px; padding: 12px; display: grid; place-items: center; background: #f2f7e9; border: 1px solid #e9f0df; color: #9cb582; border-radius: 12px; }
.empty-icon svg { width: 20px; height: 20px; stroke-width: 1.6; }
.empty-title { color: #7c9069; font-size: 14px; font-weight: 550; }
.empty-copy { max-width: 440px; margin: 7px auto 0; color: #9daa8f; font-size: 12px; line-height: 1.8; }
.inline-stat { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #eef2e7; font-size: 11px; }
.inline-stat:last-child { border-bottom: 0; }
.inline-stat strong { color: #6f855c; font-size: 14px; font-weight: 550; font-variant-numeric: tabular-nums; }
.filter-row { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-bottom: 16px; }
.local-input, .local-select { min-height: 36px; max-width: 100%; padding: 8px 11px; border: 1px solid #e2ead9; border-radius: 7px; color: #7b906a; background: #fff; font-size: 11px; }
.local-input { min-width: 180px; }
.local-input::placeholder { color: #a4b497; }
.source-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.source-card { min-width: 0; padding: 19px; border: 1px solid #e7eddf; border-radius: 10px; background: #fcfdf9; }
.source-card h3, .source-card strong { color: #70865e; font-size: 12px; font-weight: 550; }
.source-card p { color: #9ba98d; font-size: 11px; line-height: 1.7; margin-top: 7px; overflow-wrap: anywhere; }
.source-card .badge { margin-top: 13px; }
.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; overflow-y: auto; padding: 30px 20px; background: rgba(24, 33, 18, .4); backdrop-filter: blur(3px); }
.modal-dialog { width: 100%; max-width: 720px; max-height: calc(100dvh - 60px); overflow-y: auto; background: #fff; border: 1px solid #e5ecdb; border-radius: 15px; box-shadow: 0 22px 90px rgba(15, 27, 7, .17); }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.detail-item { min-width: 0; padding-bottom: 13px; border-bottom: 1px solid #eef3e7; }
.detail-label { display: block; color: #9bab8b; font-size: 10px; margin-bottom: 4px; }
.detail-value { color: #738b60; font-size: 12px; font-weight: 500; overflow-wrap: anywhere; }
.loading-state { min-height: 330px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; color: #93a77f; font-size: 12px; }
.loading-spinner { width: 28px; height: 28px; border: 3px solid #e8f1dd; border-top-color: #84bc4d; border-radius: 50%; }

/* Screen text hierarchy and contrast */
@media screen {
  .muted { color: #78846e; }
  .small { font-size: 11px; }
  .page-subtitle { color: #7d8874; font-size: 12px; }
  .nav-label { color: #8b9681; font-size: 10px; letter-spacing: 1.25px; }
  .nav-item { font-size: 12px; color: #707e63; }
  .nav-item.active, .nav-item[aria-current="page"] { color: #fff; }
  .panel-title { font-size: 14px; color: #3f5033; }
  .panel-subtitle { color: #8d9a80; font-size: 11px; }
  .panel-footer, .chart-caption { color: #8b9880; font-size: 11px; }
  .kpi-label { color: #78896a; font-size: 12px; }
  .kpi-value { color: #344b23; font-size: 30px; }
  .kpi-note, .kpi-meta { color: #879b76; font-size: 11px; }
  .kpi-note .badge { font-size: 10px; }
  .badge { font-size: 10px; }
  .badge-green { color: #5c8531; }
  .badge-amber { color: #987331; }
  .badge-muted, .badge-neutral { color: #7a896b; }
  .badge-blue { color: #6688a3; }
  .badge-red { color: #a6685b; }
  .data-table { font-size: 12px; }
  .data-table th { color: #8a987b; font-size: 11px; }
  .data-table td { color: #778b65; }
  .data-table td strong { color: #5c7349; }
  .data-table .badge { font-size: 10px; }
  .employee-name { color: #627c4d; font-size: 12px; }
  .employee-role { color: #93a382; font-size: 11px; }
  .employee-avatar { font-size: 10px; }
  .metric-row { font-size: 12px; }
  .metric-row > span:first-child { color: #859677; }
  .metric-row strong { color: #5b7546; font-size: 13px; }
  .unit-copy strong { color: #647e4e; font-size: 12px; }
  .unit-copy span, .unit-copy small { color: #91a17f; font-size: 11px; }
  .unit-name { color: #7b8e6b; font-size: 12px; }
  .unit-value { color: #627b4e; font-size: 12px; }
  .unit-description { color: #94a381; font-size: 11px; }
  .notice-body { color: #8b9e77; font-size: 11px; }
  .notice-body strong { color: #748b5c; }
  .notice-amber .notice-body { color: #a38e62; }
  .notice-amber .notice-body strong { color: #8c7447; }
  .chart-legend { color: #8c9b7e; font-size: 11px; }
  .empty-state { color: #90a17f; font-size: 12px; }
  .empty-state h3 { color: #6d8557; font-size: 14px; }
  .empty-state p { font-size: 12px; }
  .action-item strong { color: #748a5f; font-size: 12px; }
  .action-item p { color: #91a27e; font-size: 11px; }
  .source-list strong, .source-item strong { font-size: 12px; color: #748b5e; }
  .source-list p, .source-item p { font-size: 11px; color: #92a180; }
  .modal-body { color: #83996d; font-size: 12px; }
  .modal-header h2 { color: #4d6936; font-size: 17px; }
  .modal-header p { color: #8ca078; font-size: 11px; }
  .detail-value { color: #6a8555; }
}
@media (max-width: 1200px) {
  .hero-panel { padding: 26px; gap: 24px; grid-template-columns: minmax(0, 1.4fr) minmax(220px, 1fr); }
  .hero-panel .hero-title { font-size: 23px; }
  .hero-description { font-size: 11px; }
  .hero-mini { padding: 16px 14px; }
  .hero-mini strong { font-size: 24px; }
  .hero-mini span { font-size: 10px; }
  .global-search { width: 220px; }
}
@media (max-width: 1050px) {
  .hero-panel { grid-template-columns: 1fr; }
  .hero-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-mini { min-height: 80px; padding: 15px 18px; }
  .section-grid.two-thirds, .section-grid.half { grid-template-columns: 1fr; }
  .source-grid { grid-template-columns: 1fr; }
  .filter-bar { gap: 14px; }
  .filter-controls { flex: 1; gap: 9px; }
  .filter-controls .select-control { min-width: 160px; }
  .global-search { width: 100%; }
}
@media (max-width: 800px) {
  #menu-toggle { display: inline-flex; }
  .brand { min-height: 111px; }
  .hero-panel { grid-template-columns: minmax(0, 1.5fr) minmax(220px, 1fr); gap: 22px; padding: 25px; }
  .hero-panel .hero-title { font-size: 22px; }
  .topbar-date { font-size: 10px; }
  .profile-label small { font-size: 9px; }
  .filter-controls { flex: auto; }
  .global-search { width: 220px; }
}
@media (max-width: 620px) {
  .hero-panel { grid-template-columns: 1fr; }
  .hero-description { max-width: none; }
  .section-grid { grid-template-columns: 1fr; gap: 17px; }
  .global-search { width: 100%; }
  .view-stack { gap: 17px; }
  .topbar-date { display: none; }
}
@media (max-width: 540px) {
  .profile-label > span:last-child, .topbar-divider { display: none; }
  .topbar-left { gap: 10px; }
  .hero-panel { padding: 22px; gap: 21px; border-radius: 13px; }
  .hero-panel .hero-title { font-size: 21px; }
  .hero-description { font-size: 11px; }
  .hero-side { gap: 10px; }
  .hero-mini { min-height: 82px; padding: 14px; }
  .hero-mini strong { font-size: 25px; }
  .filter-bar { margin-bottom: 19px; }
  .filter-controls { width: 100%; gap: 9px; }
  .filter-field { flex: 1; min-width: 0; }
  .filter-controls .select-control { min-width: 0; width: 100%; font-size: 11px; }
  .filter-field > span { font-size: 10px; }
  .global-search { min-height: 39px; }
  .global-search input { font-size: 12px; }
  .detail-grid { grid-template-columns: 1fr; gap: 13px; }
  .modal-backdrop { padding: 14px 12px; }
  .modal-dialog { max-height: calc(100dvh - 28px); border-radius: 12px; }
  .source-card { padding: 16px; }
  .local-input, .local-select { font-size: 16px; min-height: 39px; width: 100%; }
  .empty-state { padding: 29px 20px; }
}
@media print {
  .skip-link, .global-search, .filter-controls, .modal-backdrop { display: none !important; }
  .hero-panel { padding: 18px; margin-bottom: 0; grid-template-columns: 1.5fr 1fr; break-inside: avoid; }
  .hero-panel .hero-title { font-size: 21px; }
  .hero-description { font-size: 10px; }
  .hero-mini { min-height: auto; padding: 12px; }
  .hero-mini strong { font-size: 23px; }
  .hero-actions { display: none; }
  .section-grid.two-thirds, .section-grid.half { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .view-stack { gap: 15px; }
  .source-card { break-inside: avoid; }
}

/* Data views */
.kpi-card { min-height: 154px; }
.kpi-card > .kpi-icon { float: none; position: absolute; top: 19px; right: 18px; margin: 0; }
.kpi-card > .kpi-label { padding-right: 41px; min-height: 35px; }
.kpi-card > .kpi-value { margin-top: 7px; }
.kpi-card > .kpi-meta { margin-top: 8px; }
.hero-mini > .hero-mini-label { color: #b1c59f; font-size: 10px; margin-top: 0; margin-bottom: 11px; }
.hero-mini > strong { font-size: 20px; line-height: 1.4; font-weight: 500; letter-spacing: -.4px; }
.hero-mini > .badge { margin-top: 11px; color: #c3dfa9; border-color: rgba(193, 222, 167, .13); background: rgba(176, 208, 149, .06); font-size: 9px; }
.hero-mini-secondary { justify-content: flex-start; }
.hero-unit-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 2px; }
.hero-unit-tag { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(190, 218, 164, .15); border-radius: 7px; background: rgba(193, 222, 167, .045); color: #cae1b4; font-size: 11px; font-weight: 550; }
.hero-unit-tag:hover, .hero-unit-tag.is-selected { background: rgba(142, 199, 91, .2); border-color: #7dba47; color: #e0f4cd; }
.category-bars { display: flex; flex-direction: column; gap: 20px; }
.category-row { min-width: 0; }
.category-bar-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; color: #637456; font-size: 11px; }
.category-bar-label strong { color: #4b623c; font-size: 12px; font-weight: 550; font-variant-numeric: tabular-nums; }
.category-row .progress-track { height: 6px; }
.chart-note { margin-top: 20px; color: #7c8c6e; font-size: 11px; line-height: 1.7; }
.notice > svg { width: 16px; height: 16px; margin-top: 2px; color: #87a46b; stroke-width: 1.7; }
.notice > span { color: #758768; font-size: 11px; line-height: 1.8; }
.notice > span strong { color: #5f784b; font-weight: 550; }
.information-list { display: flex; flex-direction: column; }
.information-row { display: flex; align-items: flex-start; gap: 11px; padding: 16px 0; border-bottom: 1px solid #edf1e6; }
.information-row:first-child { padding-top: 0; }
.information-row:last-child { padding-bottom: 0; border-bottom: 0; }
.information-icon { display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px; background: #fff6e7; color: #b59b6b; }
.information-icon svg { width: 14px; height: 14px; stroke-width: 1.7; }
.information-row > div { min-width: 0; flex: 1; }
.information-row strong { display: block; color: #5c714e; font-size: 12px; font-weight: 550; }
.information-row p { color: #819374; font-size: 11px; line-height: 1.7; margin-top: 4px; }
.information-number { min-width: 50px; flex-shrink: 0; text-align: right; color: #607949; font-size: 22px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.information-number small { display: block; font-size: 9px; color: #91a280; font-weight: 400; margin-top: 5px; }
.employee-name { display: flex; align-items: center; gap: 10px; min-width: 200px; width: 100%; margin: 0; padding: 0; border: 0; text-align: left; background: transparent; border-radius: 5px; }
.employee-name > span:last-child { min-width: 0; }
.employee-name strong { display: block; font-size: 12px; font-weight: 550; color: #536c42; white-space: normal; max-width: 260px; line-height: 1.5; }
.employee-name small { display: block; margin-top: 3px; color: #829574; font-size: 11px; font-weight: 400; line-height: 1.4; }
.employee-name .avatar { width: 31px; height: 31px; border: 0; border-radius: 8px; font-size: 10px; color: var(--avatar-color, #829f66); background: color-mix(in srgb, var(--avatar-color, #829f66) 10%, white); }
.employee-name:hover strong { color: #3d7420; }
.cell-subtext { display: block; max-width: 180px; white-space: normal; color: #869a76; font-size: 10px; margin-top: 4px; line-height: 1.5; }
.row-action { width: 28px; height: 28px; display: grid; place-items: center; margin-left: auto; padding: 6px; border: 1px solid #e3ecda; border-radius: 7px; background: #fafcf6; color: #8aa476; }
.row-action svg { width: 13px; height: 13px; }
.row-action:hover { color: #5f8a3b; background: #f0f7e7; border-color: #c8ddb4; }
.data-table .row-selected td { background: #f1f7e9; }
.data-table th.numeric, .data-table td.numeric, .numeric { text-align: right; font-variant-numeric: tabular-nums; }
.local-field { display: flex; flex-direction: column; gap: 6px; color: #7a8d6a; font-size: 11px; }
.filter-row { align-items: flex-end; }
.filter-result { margin-left: auto; align-self: flex-end; padding-bottom: 9px; color: #859975; font-size: 11px; }
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 17px; margin-top: 5px; color: #869a76; font-size: 11px; }
.pagination > div { display: flex; align-items: center; gap: 8px; }
.pagination .button { min-height: 30px; font-size: 10px; padding: 6px 10px; }
.pagination-current { padding: 0 5px; color: #6a8356; font-size: 11px; font-variant-numeric: tabular-nums; }
.text-link { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: transparent; color: #78a64a; font-size: 11px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.text-link:hover { color: #507d29; }
.quality-status-list { display: flex; flex-direction: column; }
.quality-status-list > div { display: grid; grid-template-columns: 1fr auto; gap: 7px 13px; padding: 16px 0; border-bottom: 1px solid #edf2e6; }
.quality-status-list > div:first-child { padding-top: 0; }
.quality-status-list > div:last-child { padding-bottom: 0; border-bottom: 0; }
.quality-status-list strong { color: #5e754e; font-size: 12px; font-weight: 550; }
.quality-status-list p { grid-column: 1 / -1; font-size: 11px; color: #829774; line-height: 1.7; }
.method-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 25px; }
.method-grid > div { min-width: 0; }
.method-grid svg { width: 21px; height: 21px; padding: 0; color: #8baf6a; margin-bottom: 12px; stroke-width: 1.5; }
.method-grid h3 { color: #5f784e; font-size: 12px; font-weight: 550; margin-bottom: 6px; }
.method-grid p { color: #809471; font-size: 11px; line-height: 1.8; }
.source-card { display: flex; align-items: flex-start; gap: 12px; }
.source-card .source-icon { margin-top: 1px; width: 32px; height: 32px; padding: 8px; }
.source-card > div { min-width: 0; }
.source-card strong, .source-card small, .source-card div > span { display: block; }
.source-card small { color: #829775; font-size: 10px; line-height: 1.6; margin-top: 4px; overflow-wrap: anywhere; }
.source-card div > span { color: #9bab8e; font-size: 10px; margin-top: 4px; }
.view-footnote { font-size: 11px; color: #7b906b; line-height: 1.75; }
.empty-requirements { padding: 18px 0 0; border-top: 1px solid #edf2e5; margin-top: 4px; }
.empty-requirements > span { color: #677f55; font-size: 11px; font-weight: 550; }
.empty-requirements > p { color: #879b78; font-size: 11px; line-height: 1.8; margin-top: 6px; }
.module-links { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.modal-person { display: flex; align-items: center; gap: 12px; }
.modal-person .avatar { width: 43px; height: 43px; border-radius: 11px; border: 0; font-size: 14px; color: var(--avatar-color, #829f66); background: color-mix(in srgb, var(--avatar-color, #829f66) 10%, white); }
.modal-section-header { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 24px 0 13px; }
.modal-section-header h3 { margin: 0; font-size: 13px; color: #5e784b; font-weight: 550; }
.modal-section-header > span { color: #91a780; font-size: 10px; }
.modal-body > .view-footnote { padding-top: 17px; }
body.modal-open { overflow: hidden; }
.app-toast { position: fixed; right: 24px; bottom: 24px; z-index: 150; max-width: 380px; padding: 14px 19px; border: 1px solid #38572a; border-radius: 10px; background: #263c1d; color: #deedcf; box-shadow: 0 7px 26px rgba(23, 42, 12, .15); font-size: 12px; line-height: 1.7; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .18s ease, transform .18s ease, visibility .18s ease; pointer-events: none; }
.app-toast.show { opacity: 1; visibility: visible; transform: translateY(0); }
@media (min-width: 1051px) { :root { --sidebar-width: 240px; } }
@media (max-width: 1050px) {
  .sidebar { transform: translateX(-100%); transition: transform .22s ease; box-shadow: none; }
  .main-shell { margin-left: 0; }
  #menu-toggle { display: inline-flex; }
  .sidebar-open .sidebar { transform: translateX(0); box-shadow: 12px 0 60px rgba(26, 38, 17, .12); }
  .sidebar-open .sidebar-scrim { display: block; position: fixed; inset: 0; z-index: 45; background: rgba(25, 35, 18, .3); }
}
@media (min-width: 621px) and (max-width: 1050px) {
  .hero-panel { grid-template-columns: minmax(0, 1.5fr) minmax(230px, 1fr); }
}
@media (max-width: 620px) {
  .method-grid { grid-template-columns: 1fr; gap: 22px; }
  .method-grid > div { padding-bottom: 17px; border-bottom: 1px solid #edf2e5; }
  .method-grid > div:last-child { padding-bottom: 0; border-bottom: 0; }
  .pagination { flex-direction: column; align-items: flex-start; gap: 12px; }
  .pagination > div { width: 100%; justify-content: space-between; }
  .filter-result { margin-left: 0; width: 100%; padding-bottom: 0; }
  .local-field { width: 100%; }
  .local-field .local-input { min-width: 0; }
  .modal-section-header { align-items: flex-start; flex-direction: column; gap: 5px; }
  .app-toast { left: 16px; right: 16px; bottom: 17px; max-width: none; }
}
@media (max-width: 540px) {
  .kpi-card { min-height: 157px; }
  .kpi-card > .kpi-icon { width: 29px; height: 29px; right: 13px; top: 14px; }
  .kpi-card > .kpi-label { font-size: 11px; padding-right: 29px; min-height: 34px; }
  .kpi-card > .kpi-value { font-size: 27px; }
  .kpi-card > .kpi-meta { font-size: 10px; }
  .information-number { min-width: 42px; font-size: 20px; }
  .information-number small { font-size: 9px; }
}
@media print {
  .pagination, .row-action, .app-toast, .hero-unit-tag { display: none !important; }
  .kpi-card { min-height: 135px; }
  .employee-name { cursor: default; }
  .method-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .filter-row { display: none !important; }
  .hero-mini > strong { font-size: 17px; }
}

/* Final header sizing and hero contrast */
@media screen {
  .nav-item { font-size: 13px; }
  .hero-panel { padding: 22px 27px; min-height: 200px; gap: 26px; }
  .hero-panel .eyebrow { margin-bottom: 8px; font-size: 9px; }
  .hero-panel .hero-title { font-size: 24px; line-height: 1.3; }
  .hero-description { font-size: 11px; line-height: 1.75; margin-top: 8px; }
  .hero-actions { margin-top: 15px; }
  .hero-mini { min-height: 116px; padding: 14px; background: #26341f; border-color: #35472b; }
  .hero-mini > .hero-mini-label { margin-bottom: 7px; color: #b6cba4; }
  .hero-mini > strong { font-size: 18px; line-height: 1.35; color: #f0f7e9; }
  .hero-mini > span:not(.badge) { color: #b8cba8; }
  .hero-unit-tags { gap: 6px; }
  .hero-unit-tag { background: #2f4522; color: #e1f1d2; border-color: #50683d; }
  .hero-unit-tag:hover, .hero-unit-tag.is-selected { background: #537c32; color: #fff; border-color: #84ac62; }
  .hero-panel .badge, .hero-mini > .badge { background: #344c25; color: #d6ecc3; border-color: #4f6d3c; font-size: 9px; }
  .hero-panel .button-ghost { background: #2b3a23; color: #d8eacb; border-color: #4a603c; }
  .hero-panel .button-ghost:hover { background: #3c5230; border-color: #6c8b54; }
}
@media (max-width: 620px) {
  .hero-panel { min-height: 0; padding: 23px; }
  .hero-panel .hero-title { font-size: 22px; }
  .hero-mini { min-height: 112px; }
}

/* Arquivar palette: brand green and warm neutrals */
.tone-green { background: #f1f8e8; border-color: #e3edd7; }
.tone-blue { background: #f4f7ef; border-color: #e5ebdd; }
.tone-lilac { background: #f5f6f3; border-color: #e7eae2; }
.tone-peach { background: #f8f9f3; border-color: #e9ecdf; }
.tone-green .kpi-icon { background: #e3f0d4; color: #587e37; }
.tone-blue .kpi-icon { background: #e7efdd; color: #617e48; }
.tone-lilac .kpi-icon { background: #e9ede3; color: #718462; }
.tone-peach .kpi-icon { background: #edf1e3; color: #78875b; }
.kpi-icon.blue, .kpi-icon.purple, .kpi-icon.gray { background: #edf2e5; color: #718b59; }
.kpi-card.kpi-blue { background: #f4f7ef; border-color: #e5ebdd; }
.employee-avatar:nth-child(3n) { background: #eff3e9; color: #83996e; }
.badge-blue { color: #738862; background: #f2f6eb; border-color: #e7eddf; }
.button-primary { color: #183006; font-weight: 600; }
.button-primary:hover { color: #142a04; }
@media screen {
  .kpi-label { color: #65745a; }
  .kpi-meta, .kpi-note { color: #7a896e; }
  .panel-subtitle, .panel-footer, .chart-note, .chart-caption { color: #78866d; }
  .data-table th { color: #718264; }
  .data-table td { color: #677c56; }
  .employee-role, .employee-name small, .cell-subtext { color: #7c8c6e; }
  .source-card small, .source-card div > span, .source-card p { color: #7d8d6f; }
  .source-list p, .source-item p { color: #7d8d6f; }
  .page-subtitle { color: #748267; }
  .hero-description { color: #b7c9aa; }
}

.unit-list button.unit-row { width: 100%; margin: 0; border: 0; border-bottom: 1px solid #eef2e7; background: transparent; text-align: left; border-radius: 0; transition: background .16s ease; }
.unit-list button.unit-row:last-child { border-bottom: 0; }
.unit-list button.unit-row:hover { background: #fafcf6; }
.unit-list button.unit-row.is-selected { background: #f4f8ed; }
.unit-count { min-width: 65px; text-align: right; }
.unit-count strong { display: block; font-size: 23px; font-weight: 550; line-height: 1.25; color: #4b6639; }
.unit-count small { display: block; font-size: 9px; font-weight: 400; color: #849876; letter-spacing: 0; line-height: 1.5; margin-top: 4px; }
@media (min-width: 821px) and (max-width: 1050px) {
  .kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kpi-card { padding: 18px 17px 16px; }
  .kpi-card > .kpi-label { font-size: 11px; padding-right: 34px; }
  .kpi-card > .kpi-icon { width: 29px; height: 29px; right: 14px; top: 16px; }
  .kpi-card > .kpi-value { font-size: 28px; }
  .kpi-meta { font-size: 10px; }
  .filter-controls { flex: 1; }
  .global-search { width: 220px; }
}

/* Attention indicators and monthly employee review */
.kpi-card, button.kpi-card { text-align: left; }
button.kpi-card { display: block; font-family: var(--font); line-height: 1.5; }
.attention-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.attention-card { min-width: 0; min-height: 153px; padding: 18px; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; border: 1px solid #e4ebda; border-radius: 11px; background: #fafcf6; color: #596e49; text-align: left; font: inherit; transition: border-color .16s ease, background .16s ease; }
button.attention-card:hover { background: #f3f8eb; border-color: #b9d49f; }
.attention-card.tone-amber, .attention-card.is-warning { background: #fffaf1; border-color: #f0e5cf; }
.attention-card > svg, .attention-card .attention-icon { width: 19px; height: 19px; color: #7a9a5f; }
.attention-label { color: #657b53; font-size: 12px; font-weight: 500; line-height: 1.55; }
.attention-number { color: #263e17; font-size: 29px; font-weight: 600; line-height: 1.2; letter-spacing: -.7px; font-variant-numeric: tabular-nums; }
.attention-card.is-warning .attention-number, .attention-card.tone-amber .attention-number { color: #8b703c; }
.attention-number small { margin-left: 4px; font-size: 11px; font-weight: 400; color: #82966f; letter-spacing: 0; }
.attention-meta { color: #7b8e6b; font-size: 11px; line-height: 1.65; }
.attention-action { display: inline-flex; align-items: center; gap: 5px; margin-top: auto; padding-top: 5px; color: #658c43; font-size: 11px; font-weight: 500; }
.attention-action svg { width: 13px; height: 13px; }
.status-chip { display: inline-flex; align-items: center; gap: 4px; width: fit-content; padding: 4px 7px; border: 1px solid #e4ebda; border-radius: 5px; background: #f4f7ef; color: #6c805a; font-size: 11px; font-weight: 500; line-height: 1.4; white-space: nowrap; }
.status-chip svg { width: 11px; height: 11px; }
.status-chip.warning, .status-chip.is-warning, .badge-falta, .badge-absence, .badge-missing { color: #937134; background: #fff6e6; border-color: #f2e5c9; }
.status-chip.good, .badge-good { color: #5c813b; background: #edf6e2; border-color: #dcebc9; }
.status-chip.neutral { color: #7a896d; background: #f4f6f0; border-color: #e7ecdf; }
.period-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; margin: 17px 0; padding: 17px; background: #f7faf2; border: 1px solid #e7efdb; border-radius: 10px; }
.period-summary > div { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.period-summary strong { display: block; color: #405c2e; font-size: 20px; font-weight: 550; line-height: 1.3; letter-spacing: -.3px; font-variant-numeric: tabular-nums; }
.period-summary span, .period-summary small { color: #7d916b; font-size: 11px; line-height: 1.6; }
.monthly-person-summary { min-width: 0; margin-top: 21px; }
.monthly-person-summary h3 { color: #4e6a3c; font-size: 14px; font-weight: 550; line-height: 1.6; margin-bottom: 9px; }
.monthly-person-summary h4 { margin: 17px 0 7px; color: #6b8358; font-size: 12px; font-weight: 550; }
.monthly-person-summary p { color: #7d936c; font-size: 11px; line-height: 1.75; }
.monthly-person-summary .data-table { min-width: 720px; }
.date-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 9px 0; }
.date-tag { display: inline-flex; align-items: center; gap: 4px; padding: 4px 7px; background: #f5f8ef; border: 1px solid #e5edd9; color: #6f875b; border-radius: 5px; font-size: 11px; line-height: 1.45; font-variant-numeric: tabular-nums; white-space: nowrap; }
.date-tag.warning, .date-tag.falta, .date-tag.absence { background: #fff8eb; border-color: #f1e6ce; color: #9a7b43; }
.date-tag svg { width: 11px; height: 11px; }
.monthly-report-table { min-width: 980px; }
.monthly-report-table th { white-space: normal; line-height: 1.55; vertical-align: middle; }
.monthly-report-table th:first-child { min-width: 235px; }
.monthly-report-table td { padding-top: 13px; padding-bottom: 13px; }
.monthly-report-table .numeric { min-width: 82px; white-space: nowrap; }
.monthly-report-table .cell-subtext { min-width: 90px; }
.report-period { color: #627d4e; font-size: 11px; font-weight: 500; }
.report-footnote { margin-top: 13px; color: #7f936f; font-size: 11px; line-height: 1.75; }
@media (max-width: 1050px) {
  .attention-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .attention-card { min-height: 143px; }
  .monthly-report-table { min-width: 980px; }
}
@media (max-width: 620px) {
  .attention-grid { gap: 11px; }
  .attention-card { padding: 15px; min-height: 160px; }
  .attention-label { font-size: 11px; }
  .attention-number { font-size: 27px; }
  .attention-meta, .attention-action { font-size: 10px; }
  .period-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; padding: 15px; }
  .period-summary strong { font-size: 19px; }
  .monthly-person-summary { margin-top: 18px; }
}
@media print {
  .attention-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .attention-card { min-height: auto; break-inside: avoid; }
  .attention-action { display: none; }
  .monthly-report-table { min-width: 0; font-size: 8px; }
  .monthly-report-table th { font-size: 8px; }
  .monthly-report-table th:first-child { min-width: 140px; }
  .monthly-report-table .numeric { min-width: 45px; }
  .monthly-person-summary .data-table { min-width: 0; }
  .period-summary { break-inside: avoid; }
}

/* Aggregated payroll view */
.finance-kpi-grid { grid-template-columns: minmax(230px, 1.24fr) repeat(3, minmax(0, 1fr)); }
.finance-kpi-grid .kpi-card { min-height: 160px; text-align: left; }
.finance-kpi-grid .kpi-value { font-variant-numeric: tabular-nums; white-space: nowrap; overflow-wrap: normal; letter-spacing: -.65px; }
.finance-kpi-grid .kpi-card:first-child .kpi-value { font-size: 28px; }
.finance-kpi-grid .kpi-card:first-child .kpi-label { padding-right: 38px; }
.finance-value { display: block; white-space: nowrap; overflow-wrap: normal; color: #2d461d; font-size: 28px; font-weight: 600; line-height: 1.3; letter-spacing: -.65px; font-variant-numeric: tabular-nums; }
.finance-unit-table { min-width: 630px; }
.finance-unit-table th { white-space: normal; line-height: 1.5; }
.finance-unit-table th:first-child { min-width: 205px; }
.finance-unit-table .numeric { min-width: 115px; white-space: nowrap; }
.finance-unit-table td { padding-top: 17px; padding-bottom: 17px; }
.finance-unit-table td strong { font-size: 12px; }
.finance-unit-table tfoot td { background: #f7faf2; color: #4d683b; border-top: 1px solid #e4ecd8; font-weight: 550; }
.finance-share-list { display: flex; flex-direction: column; gap: 23px; }
.finance-share-row { min-width: 0; }
.finance-share-row .category-bar-label { gap: 13px; margin-bottom: 10px; }
.finance-share-row .category-bar-label > span { color: #617a4f; font-size: 12px; font-weight: 500; }
.finance-share-row .category-bar-label strong { color: #385429; font-size: 12px; white-space: nowrap; font-weight: 550; }
.finance-share-row .progress-track { height: 7px; background: #eef3e7; }
.finance-share-row .progress-fill { background: #72bd16; }
.finance-share-row small { display: block; margin-top: 7px; color: #81966e; font-size: 11px; line-height: 1.6; }
.finance-pending-list { display: flex; flex-direction: column; }
.finance-pending-list .information-row { align-items: flex-start; }
.finance-pending-list .information-row strong { font-size: 12px; }
.finance-pending-list .information-row p { max-width: 630px; color: #7d916d; }
.finance-overview { min-width: 0; display: grid; grid-template-columns: minmax(200px, .8fr) minmax(0, 1.5fr) auto; align-items: center; gap: 22px; padding: 21px 23px; background: #f8fbf3; border: 1px solid #e6eedb; border-radius: 12px; }
.finance-overview-value { min-width: 0; color: #314b21; font-size: 26px; font-weight: 600; line-height: 1.35; letter-spacing: -.6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.finance-overview-value > span, .finance-overview-value > small { display: block; margin: 5px 0 0; color: #7b906b; font-size: 11px; font-weight: 400; line-height: 1.6; letter-spacing: 0; white-space: normal; }
.finance-overview-copy { min-width: 0; color: #748a63; font-size: 12px; line-height: 1.75; }
.finance-overview-copy strong { display: block; margin-bottom: 4px; color: #4a6638; font-size: 12px; font-weight: 550; }
.finance-overview-copy small { display: block; margin-top: 4px; color: #8a9e79; font-size: 11px; line-height: 1.7; }
.finance-overview .button { min-height: 35px; padding: 8px 12px; font-size: 11px; }
@media (min-width: 821px) and (max-width: 1050px) {
  .finance-kpi-grid { grid-template-columns: minmax(230px, 1.24fr) repeat(3, minmax(0, 1fr)); }
  .finance-kpi-grid .kpi-card:first-child .kpi-value { font-size: 28px; }
}
@media (max-width: 820px) {
  .finance-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .finance-kpi-grid .kpi-card:first-child .kpi-value { font-size: 28px; }
  .finance-overview { grid-template-columns: minmax(0, 1fr) auto; gap: 13px 18px; padding: 20px; }
  .finance-overview-copy { grid-column: 1 / -1; grid-row: 2; }
  .finance-overview > .button { grid-column: 2; grid-row: 1; }
}
@media (max-width: 540px) {
  .finance-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .finance-kpi-grid .kpi-card:first-child, .finance-kpi-grid .kpi-card:last-child { grid-column: 1 / -1; }
  .finance-kpi-grid .kpi-card:first-child { min-height: 146px; }
  .finance-kpi-grid .kpi-card:first-child .kpi-value { font-size: 28px; }
  .finance-kpi-grid .kpi-value { font-size: 28px; }
  .finance-kpi-grid .kpi-card { min-height: 145px; }
  .finance-overview { grid-template-columns: 1fr; padding: 19px; gap: 10px; }
  .finance-overview-value { font-size: 27px; }
  .finance-overview-copy { grid-column: auto; grid-row: auto; }
  .finance-overview > .button { grid-column: auto; grid-row: auto; justify-self: flex-start; margin-top: 3px; }
  .finance-share-row .category-bar-label { gap: 8px; }
  .finance-share-row .category-bar-label > span, .finance-share-row .category-bar-label strong { font-size: 11px; }
}
@media print {
  .finance-kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .finance-kpi-grid .kpi-card:first-child, .finance-kpi-grid .kpi-card:last-child { grid-column: auto; }
  .finance-kpi-grid .kpi-card { min-height: 135px; }
  .finance-kpi-grid .kpi-card:first-child .kpi-value, .finance-value { font-size: 24px; }
  .finance-unit-table { min-width: 0; }
  .finance-unit-table th:first-child { min-width: 140px; }
  .finance-unit-table .numeric { min-width: 75px; }
  .finance-overview { break-inside: avoid; grid-template-columns: minmax(180px, .8fr) 1.5fr; padding: 17px; }
  .finance-overview-value { font-size: 23px; }
  .finance-overview-copy { grid-column: auto; grid-row: auto; }
  .finance-overview .button { display: none !important; }
}

.finance-overview-copy h2 { margin: 0; color: #486438; font-size: 14px; line-height: 1.5; font-weight: 550; letter-spacing: -.15px; }
.finance-overview-copy > .eyebrow { margin-bottom: 5px; color: #839b6f; font-size: 9px; letter-spacing: 1.1px; }
.finance-overview-copy p { margin-top: 5px; color: #7c916b; font-size: 11px; line-height: 1.7; }
.finance-share-row .category-bar-label > span { white-space: nowrap; font-variant-numeric: tabular-nums; }
.point-scope-note { color: #657267; font-size: 12px; line-height: 1.7; margin: 0 0 16px; }
.point-period-kpis { margin: 0 0 18px; }
.point-period-kpis .kpi-card { min-height: 132px; padding: 18px; }
.point-period-kpis .kpi-value { font-size: 27px; line-height: 1.25; }
.point-period-kpis .kpi-meta { font-size: 11px; }
.point-audit-totals { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; padding: 17px 18px; background: #f7faf4; border-radius: 9px; }
.point-audit-totals > div { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.point-audit-totals span { color: #72806c; font-size: 11px; line-height: 1.55; }
.point-audit-totals strong { color: #344f28; font-size: 18px; font-weight: 550; font-variant-numeric: tabular-nums; white-space: nowrap; }
.point-holidays { margin-top: 20px; }
.point-holidays > strong { display: block; margin-bottom: 9px; font-size: 12px; font-weight: 550; color: #4c5e45; }
.point-holidays .date-tag { font-size: 11px; white-space: normal; }
.point-period-actions { margin-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.point-period-actions > .muted { max-width: 530px; font-size: 11px; line-height: 1.65; }
.point-person-summary { margin: 20px 0; }
.point-person-summary h3 { margin-bottom: 12px; }
@media (max-width:820px) {
  .point-period-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .point-audit-totals { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .point-period-actions { align-items: flex-start; flex-direction: column; gap: 10px; }
}
@media (max-width:540px) {
  .point-period-kpis .kpi-card { min-height: 125px; padding: 14px; }
  .point-period-kpis .kpi-value { font-size: 23px; }
  .point-audit-totals { padding: 14px; gap: 15px; }
  .point-audit-totals strong { font-size: 17px; }
}
@media (min-width: 821px) {
  .finance-overview { grid-template-columns: minmax(0, 1.5fr) minmax(190px, .8fr) auto; }
  .finance-overview-value { text-align: right; }
}