:root {
  color-scheme: light;
  --ink: #172923;
  --muted: #788780;
  --muted-dark: #53635c;
  --line: #e8ede9;
  --paper: #fff;
  --canvas: #f7f8f6;
  --green: #2f7864;
  --green-dark: #245c4e;
  --green-soft: #eaf4ef;
  --amber: #a76b27;
  --red: #b95049;
  --shadow: 0 16px 48px rgba(24, 45, 37, .1);
  font-family: "DM Sans", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--canvas); color: var(--ink); font-size: 13px; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #8cc4ad; outline-offset: 2px; }
a { color: inherit; text-decoration: none; }
.hidden { display: none !important; }
.app-shell { display: flex; min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 20; display: flex; flex-direction: column; width: 246px; padding: 27px 15px 15px; background: #fff; border-right: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 10px; width: fit-content; margin: 0 0 31px 7px; }
.brand-mark { display: grid; width: 37px; height: 37px; place-items: center; border-radius: 12px; color: white; background: #367966; }
.brand-mark svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.brand-copy { display: flex; flex-direction: column; }
.brand-copy strong { font-family: Manrope, sans-serif; font-size: 20px; font-weight: 800; letter-spacing: -1.15px; line-height: 1.05; }
.brand-copy strong span, .preview-brand span { color: #76a592; }
.brand-copy small { margin-top: 4px; color: #8d9993; font-size: 8px; font-weight: 700; letter-spacing: 1.4px; }
.workspace-switch { display: flex; align-items: center; gap: 10px; margin: 0 0 27px; padding: 10px; border: 1px solid #e8ece8; border-radius: 9px; }
.workspace-avatar { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 9px; background: #ecf4ef; color: #397764; font-family: Manrope, sans-serif; font-weight: 800; }
.workspace-copy, .profile-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; }
.workspace-copy strong, .profile-copy strong { overflow: hidden; font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.workspace-copy small, .profile-copy small { color: #87918c; font-size: 10px; }
.workspace-switch > svg { width: 14px; fill: none; stroke: #8b9690; stroke-width: 1.6; }
.nav-label { margin: 0 10px 9px; color: #9aa39e; font-size: 9px; font-weight: 700; letter-spacing: 1.3px; }
.nav-label-spaced { margin-top: 28px; }
.main-nav { display: grid; gap: 3px; }
.nav-item { display: flex; width: 100%; align-items: center; gap: 12px; min-height: 40px; padding: 0 11px; color: #65736c; border: 0; border-radius: 7px; background: transparent; text-align: left; cursor: pointer; transition: background .16s, color .16s; }
.nav-item:hover { background: #f5f7f5; color: var(--ink); }
.nav-item.active { color: #2f725f; background: #edf5f0; font-weight: 600; }
.nav-item svg, .icon-button svg, .button svg, .search-box svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.nav-item span { flex: 1; font-size: 12px; }
.nav-count { max-width: 25px; padding: 2px 6px; border-radius: 10px; background: #e3eee8; color: #367664; font-size: 10px !important; text-align: center; }
.sidebar-bottom { margin-top: auto; }
.help-card { margin: 0 1px 14px; padding: 14px; border: 1px solid #e8eee9; border-radius: 9px; background: #fbfcfb; }
.help-icon { display: grid; width: 21px; height: 21px; margin-bottom: 10px; place-items: center; border-radius: 50%; background: #eaf3ed; color: #43836e; font-weight: 700; }
.help-card strong { display: block; font-size: 11px; }
.help-card p { margin: 5px 0 10px; color: #85918a; font-size: 10px; }
.help-card a { color: #397764; font-size: 10px; font-weight: 600; }
.help-card a span { padding-left: 3px; }
.profile-button { display: flex; width: 100%; align-items: center; gap: 10px; padding: 11px 6px 4px; border: 0; border-top: 1px solid var(--line); background: transparent; text-align: left; cursor: pointer; }
.profile-avatar { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; background: #e6eee8; color: #3a715e; font-size: 10px; font-weight: 700; }
.profile-menu { color: #77837d; font-size: 19px; line-height: 1; }
.main-area { width: calc(100% - 246px); min-height: 100vh; margin-left: 246px; }
.topbar { position: sticky; top: 0; z-index: 10; display: flex; height: 62px; align-items: center; justify-content: space-between; padding: 0 37px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.92); backdrop-filter: blur(12px); }
.breadcrumbs { display: flex; align-items: center; gap: 10px; color: #8b9791; font-size: 11px; }
.breadcrumbs strong { color: #43534b; font-weight: 600; }
.crumb-slash { color: #cad1cc; }
.topbar-actions { display: flex; align-items: center; gap: 17px; }
.live-status { display: flex; align-items: center; gap: 7px; color: #75827b; font-size: 10px; }
.live-status i { width: 6px; height: 6px; border-radius: 50%; background: #61aa7d; box-shadow: 0 0 0 3px #e9f4eb; }
.icon-button { display: inline-grid; width: 34px; height: 34px; place-items: center; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #697770; cursor: pointer; }
.icon-button:hover { border-color: var(--line); background: #f8faf8; }
.notification-button { position: relative; }
.notification-button svg { width: 17px; }
.notification-button > i { position: absolute; top: 6px; right: 7px; width: 5px; height: 5px; border: 1px solid #fff; border-radius: 50%; background: #d18462; }
.topbar-divider { height: 19px; border-left: 1px solid #e6ebe7; }
.top-date { color: #7d8983; font-size: 10px; }
.mobile-menu { display: none; }
.page-content { width: min(100%, 1500px); margin: 0 auto; padding: 35px 37px 38px; }
.view-panel { display: none; }.view-panel.active { display: block; }
.empty-row { height: 110px !important; color: #929e96 !important; text-align: center; }
.attention-empty, .timeline-empty { padding: 18px; color: #929e96; font-size: 10px; }
.empty-template { grid-column: 1 / -1; padding: 40px; text-align: center; }.empty-template strong { font-size: 12px; }.empty-template p { margin: 7px 0 0; color: #89958e; font-size: 10px; }
.button-danger { border: 1px solid #efd9d5; background: #fff7f6; color: #ae4c45; }.button-danger:hover { background: #fcecea; }
.confirm-mark.danger { background: #fbebea; color: #b34e47; }
.confirm-reason { width: 100%; margin-top: 13px; padding: 9px; border: 1px solid #e3e9e4; border-radius: 5px; resize: vertical; font: inherit; font-size: 10px; }
.welcome-row, .page-heading-row { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; color: #849189; font-size: 9px; font-weight: 700; letter-spacing: 1.15px; }
.eyebrow-line { display: inline-block; width: 16px; height: 1px; background: #6fa38d; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 6px; font-family: Manrope, sans-serif; font-size: clamp(24px, 2.2vw, 31px); font-weight: 700; letter-spacing: -1.25px; line-height: 1.2; }
.wave { margin-left: 2px; color: #e8ad61; font-size: 18px; }
.page-subtitle { margin: 0; color: #87938d; font-size: 12px; }
.button { display: inline-flex; min-height: 37px; align-items: center; justify-content: center; gap: 9px; padding: 0 14px; border: 1px solid transparent; border-radius: 6px; font-size: 11px; font-weight: 600; cursor: pointer; transition: background .15s, transform .15s, box-shadow .15s; }
.button:disabled { opacity: .6; cursor: wait; }
.button-primary { background: #347864; color: #fff; box-shadow: 0 2px 5px rgba(45, 102, 82, .13); }
.button-primary:hover { background: #286852; box-shadow: 0 4px 12px rgba(45, 102, 82, .2); }
.button-secondary { border-color: #e0e7e2; background: #fff; color: #596960; }
.button-secondary:hover { background: #f7f9f7; }
.button svg { width: 15px; height: 15px; }
.metrics-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.metric-card { position: relative; min-height: 142px; overflow: hidden; padding: 16px 17px 18px; border: 1px solid #e9ede9; border-radius: 8px; background: #fff; }
.metric-top { display: flex; align-items: center; justify-content: space-between; color: #77847d; font-size: 10px; }
.metric-icon { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 7px; }
.metric-icon svg { width: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icon-lilac { background: #f0eef9; color: #796ab0; }
.icon-amber { background: #fcf3e7; color: #b7864b; }
.icon-green { background: #eaf5ee; color: #4a9670; }
.icon-blue { background: #edf3fa; color: #6485aa; }
.metric-value { margin-top: 8px; font-family: Manrope, sans-serif; font-size: 27px; font-weight: 700; letter-spacing: -.8px; line-height: 1.1; }
.metric-change { margin-left: 5px; padding: 3px 5px; border-radius: 4px; background: #edf6ef; color: #498366; font-family: "DM Sans", sans-serif; font-size: 9px; font-weight: 600; letter-spacing: 0; vertical-align: middle; }
.change-neutral { background: #f1f3f1; color: #7e8982; }
.metric-foot { margin-top: 5px; color: #9aa39e; font-size: 9px; }
.metric-spark { position: absolute; right: 17px; bottom: 17px; display: flex; height: 17px; align-items: end; gap: 3px; opacity: .65; }
.metric-spark i { width: 3px; border-radius: 3px; background: currentColor; }
.metric-spark i:nth-child(1), .metric-spark i:nth-child(8) { height: 6px; }.metric-spark i:nth-child(2), .metric-spark i:nth-child(5), .metric-spark i:nth-child(10) { height: 10px; }.metric-spark i:nth-child(3), .metric-spark i:nth-child(7), .metric-spark i:nth-child(12) { height: 14px; }.metric-spark i:nth-child(4), .metric-spark i:nth-child(6), .metric-spark i:nth-child(9), .metric-spark i:nth-child(11) { height: 8px; }
.spark-purple { color: #a297ca; }.spark-orange { color: #d4aa78; }.spark-green { color: #83b49a; }.spark-blue { color: #93abc3; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(270px, .92fr); align-items: start; gap: 15px; }
.surface { border: 1px solid #e8ede9; border-radius: 8px; background: #fff; }
.activity-surface { min-width: 0; padding: 19px 0 0; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 18px 15px; }
.section-heading h2 { margin: 0 0 5px; font-family: Manrope, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: -.2px; }
.section-heading p { margin: 0; color: #929d97; font-size: 10px; }
.text-button { padding: 5px 0; border: 0; background: transparent; color: #39806a; font-size: 10px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.text-button:hover { color: #205b49; }
.text-button span { padding-left: 3px; font-size: 13px; }
.table-wrap { width: 100%; overflow-x: auto; }
.document-table { width: 100%; border-collapse: collapse; text-align: left; white-space: nowrap; }
.document-table thead { background: #fafbfa; }
.document-table th { height: 35px; padding: 0 10px; color: #939e98; font-size: 8px; font-weight: 700; letter-spacing: .7px; }
.document-table th:first-child, .document-table td:first-child { padding-left: 18px; }
.document-table td { height: 57px; padding: 7px 10px; border-top: 1px solid #f0f2f0; color: #637168; font-size: 10px; }
.document-table tbody tr { cursor: pointer; transition: background .15s; }
.document-table tbody tr:hover { background: #fafcfb; }
.document-name { display: flex; align-items: center; gap: 9px; }
.doc-icon { display: grid; width: 29px; height: 32px; flex: 0 0 auto; place-items: center; border: 1px solid #e6ebe7; border-radius: 5px; background: #fff; color: #779286; }
.doc-icon svg { width: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.doc-name-copy { display: flex; flex-direction: column; gap: 3px; }
.doc-name-copy strong { max-width: 185px; overflow: hidden; color: #33433b; font-size: 10px; font-weight: 600; text-overflow: ellipsis; }
.doc-name-copy small { color: #9aa39e; font-size: 8px; }
.employee-cell { display: flex; align-items: center; gap: 7px; }
.employee-avatar, .attention-avatar { display: grid; width: 25px; height: 25px; flex: 0 0 auto; place-items: center; border-radius: 50%; font-size: 8px; font-weight: 700; }
.employee-cell span:last-child { color: #59685f; font-size: 9px; }
.av-peach { background: #fbede3; color: #ad7756; }.av-sky { background: #e8f1f7; color: #6486a0; }.av-violet { background: #f0eafa; color: #8574a4; }.av-mint { background: #e7f2eb; color: #58836b; }.av-blue { background: #e9eef8; color: #6179a1; }
.type-label { color: #77847d; font-size: 9px; }
.status-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border-radius: 12px; font-size: 8px; font-weight: 600; }
.status-pill::before { width: 5px; height: 5px; border-radius: 50%; background: currentColor; content: ""; }
.status-pending-employee-sign { background: #fcf3e5; color: #ad782f; }.status-pending-hr-sign { background: #eaf1f8; color: #5e7d9c; }.status-completed { background: #eaf5ee; color: #4c8863; }.status-draft { background: #f1f3f1; color: #79857e; }.status-rejected { background: #fbebea; color: #b0504b; }
.updated-cell { color: #96a19b !important; font-size: 9px !important; }
.row-menu { width: 27px; height: 27px; border: 0; border-radius: 5px; background: transparent; color: #8e9993; cursor: pointer; }
.row-menu:hover { background: #f1f5f2; }
.mobile-view-all { display: none; }
.overview-side { padding: 19px 0 0; }
.attention-count { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; background: #fbf0e5; color: #ab7843; font-size: 9px; font-weight: 700; }
.attention-list { padding: 0 12px; }
.attention-item { display: flex; width: 100%; align-items: center; gap: 9px; padding: 10px 6px; border: 0; border-top: 1px solid #f0f2f0; background: transparent; text-align: left; cursor: pointer; }
.attention-item:hover { background: #fafcfb; }
.attention-avatar { width: 30px; height: 30px; font-size: 9px; }
.attention-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 4px; }
.attention-copy strong { overflow: hidden; color: #435249; font-size: 10px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.attention-copy small { color: #9aa49f; font-size: 8px; }
.attention-arrow { color: #a4aea8; font-size: 14px; }
.completion-card { display: flex; align-items: center; justify-content: space-between; margin: 13px 15px 15px; padding: 13px; border-radius: 7px; background: #f6f9f6; }
.completion-copy { display: flex; flex-direction: column; gap: 4px; }
.completion-copy > span { color: #8d9992; font-size: 8px; font-weight: 700; letter-spacing: .65px; }
.completion-copy strong { font-family: Manrope, sans-serif; font-size: 23px; }
.completion-copy small { color: #6b9479; font-size: 8px; }
.completion-ring { display: grid; width: 59px; height: 59px; place-items: center; border-radius: 50%; background: conic-gradient(#4d9674 0 86%, #dfece3 86% 100%); }
.completion-ring > div { display: flex; width: 47px; height: 47px; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; background: #f6f9f6; }
.completion-ring strong { font-family: Manrope, sans-serif; font-size: 13px; }.completion-ring strong span { font-size: 8px; }.completion-ring small { color: #94a099; font-size: 7px; }
.insight-strip { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 12px 14px; border: 1px solid #e5eee7; border-radius: 7px; background: #f1f7f2; color: #76847b; font-size: 10px; }
.insight-mark { color: #5b9a75; font-size: 15px; }.insight-strip strong { color: #496555; font-weight: 700; }.insight-strip > div { flex: 1; }.insight-strip button { width: 25px; height: 25px; border: 0; background: transparent; color: #8da296; font-size: 17px; cursor: pointer; }
.page-heading-row { align-items: center; margin-bottom: 22px; }
.page-heading-row h1 { margin-bottom: 6px; }
.heading-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.full-table-surface { overflow: hidden; }
.table-toolbar { display: flex; min-height: 63px; align-items: center; justify-content: space-between; gap: 15px; padding: 10px 18px; border-bottom: 1px solid #edf0ed; }
.filter-tabs { display: flex; align-items: center; gap: 4px; overflow-x: auto; }
.filter-tab { display: inline-flex; min-height: 29px; align-items: center; gap: 6px; padding: 0 9px; border: 0; border-radius: 5px; background: transparent; color: #7c8981; font-size: 9px; cursor: pointer; white-space: nowrap; }
.filter-tab:hover { background: #f5f7f5; }.filter-tab.active { background: #edf5f0; color: #33735e; font-weight: 600; }.filter-tab span { color: #8c9991; font-size: 8px; }
.search-box { display: flex; width: 190px; height: 31px; flex: 0 0 auto; align-items: center; gap: 7px; padding: 0 8px; border: 1px solid #e5eae6; border-radius: 5px; color: #98a39c; }
.search-box svg { width: 14px; height: 14px; }
.search-box input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 9px; }
.search-box input::placeholder { color: #a3ada7; }
.all-documents-table th { height: 40px; }.all-documents-table td { height: 64px; }
.empty-state { padding: 60px 20px; text-align: center; }.empty-state > span { color: #8fa99b; font-size: 30px; }.empty-state strong { display: block; margin-top: 8px; font-size: 12px; }.empty-state p { margin: 5px 0; color: #89958e; font-size: 10px; }
.compact-heading { padding: 0; }
.employee-table-row td { height: 59px; }
.employee-primary { display: flex; align-items: center; gap: 9px; }
.employee-primary .employee-avatar { width: 30px; height: 30px; }
.employee-primary > span:last-child { display: flex; flex-direction: column; gap: 4px; }
.employee-primary strong { color: #38493f; font-size: 10px; font-weight: 600; }.employee-primary small { color: #9aa49e; font-size: 8px; }
.role-label { color: #67766d; font-size: 9px; }
#view-employees .document-table { min-width: 880px; }
.employee-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.activation-button { padding: 6px 8px; border: 1px solid #dfe9e1; border-radius: 5px; background: #f7faf7; color: #397764; font-size: 8px; white-space: nowrap; cursor: pointer; }
.import-note { display: flex; align-items: center; gap: 11px; margin-top: 16px; padding: 15px; border: 1px solid #e6ece7; border-radius: 7px; background: #fff; }
.import-note > span { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 7px; background: #eff5f0; color: #4b886b; font-size: 16px; }
.import-note > div { flex: 1; }.import-note strong { font-size: 10px; }.import-note p { margin: 4px 0 0; color: #8b9790; font-size: 9px; }
.template-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.template-card { padding: 17px; border: 1px solid #e7ece8; border-radius: 8px; background: #fff; }
.template-card-head { display: flex; align-items: center; justify-content: space-between; }.template-symbol { display: grid; width: 34px; height: 37px; place-items: center; border: 1px solid #e6ebe7; border-radius: 6px; color: #7d9b8c; font-size: 15px; }
.template-card h2 { margin: 15px 0 5px; font-family: Manrope, sans-serif; font-size: 13px; }.template-card p { min-height: 30px; margin-bottom: 15px; color: #89958e; font-size: 10px; line-height: 1.5; }
.template-card-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid #edf0ed; color: #8d9992; font-size: 9px; }.template-card-foot button { border: 0; background: transparent; color: #3c7c65; font-size: 9px; font-weight: 600; cursor: pointer; }
.timeline-surface { padding: 8px 20px; }.timeline-item { display: flex; gap: 12px; padding: 17px 0; border-bottom: 1px solid #edf0ed; }.timeline-item:last-child { border-bottom: 0; }.timeline-dot { width: 9px; height: 9px; margin-top: 3px; border-radius: 50%; background: #68a182; box-shadow: 0 0 0 4px #eff6f0; }.timeline-item p { margin: 0; color: #53635b; font-size: 11px; }.timeline-item small { display: block; margin-top: 5px; color: #96a19a; font-size: 9px; }
.settings-surface { padding: 4px 19px; }.settings-surface > div { display: flex; align-items: center; gap: 12px; padding: 16px 0; border-bottom: 1px solid #edf0ed; }.settings-surface > div:last-child { border-bottom: 0; }.setting-icon { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 7px; background: #f0f5f1; color: #4d876b; font-size: 15px; }.settings-surface > div > div { flex: 1; }.settings-surface strong { font-size: 11px; }.settings-surface p { margin: 4px 0 0; color: #89958e; font-size: 9px; }.settings-tag { padding: 4px 8px; border-radius: 12px; background: #eef5ef; color: #518368; font-size: 8px; font-weight: 600; }
.toast-region { position: fixed; right: 20px; bottom: 20px; z-index: 100; display: grid; width: min(370px, calc(100vw - 32px)); gap: 8px; }
.toast { padding: 12px 14px; border: 1px solid #dfe9e1; border-radius: 7px; background: #fff; box-shadow: var(--shadow); color: #42534a; font-size: 11px; animation: toast-in .2s ease-out; }.toast.error { border-color: #f1d9d6; color: #a74742; }.toast.warning { border-color: #efe3cd; color: #9a6a2e; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.app-dialog { width: min(480px, calc(100% - 28px)); max-height: min(88vh, 840px); overflow: auto; padding: 23px; border: 1px solid #e8ede9; border-radius: 10px; background: #fff; box-shadow: 0 22px 80px rgba(24, 45, 37, .2); }
.app-dialog::backdrop { background: rgba(20, 33, 27, .38); backdrop-filter: blur(2px); }
.dialog-header { display: flex; align-items: start; justify-content: space-between; gap: 15px; margin-bottom: 20px; }.dialog-header .eyebrow { margin-bottom: 8px; }.dialog-header h2, .confirm-dialog h2 { margin: 0 0 5px; font-family: Manrope, sans-serif; font-size: 20px; letter-spacing: -.6px; }.dialog-header p, .confirm-dialog p { margin: 0; color: #87938c; font-size: 10px; }.dialog-close { margin-top: -6px; font-size: 21px; }
.field-label { display: grid; gap: 7px; margin-bottom: 14px; color: #53635b; font-size: 10px; font-weight: 600; }.field-label input, .field-label select, .field-label textarea { width: 100%; min-height: 37px; padding: 9px 10px; border: 1px solid #e2e8e3; border-radius: 5px; outline: 0; background: #fff; color: #283a31; font-size: 11px; font-weight: 400; }.field-label textarea { resize: vertical; }.field-label input:focus, .field-label select:focus, .field-label textarea:focus { border-color: #86b69b; box-shadow: 0 0 0 3px #edf5ef; }.field-label input::placeholder, .field-label textarea::placeholder { color: #a7b0aa; }.optional { color: #9aa49e; font-weight: 400; }
.employee-dialog { width: min(680px, calc(100% - 28px)); }.employee-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }.employee-form-grid .field-label { min-width: 0; }.employee-role-note { margin: -2px 0 16px; color: #7d8b82; font-size: 10px; line-height: 1.6; }.employee-extra { margin: 0 0 14px; border-top: 1px solid #edf0ed; border-bottom: 1px solid #edf0ed; }.employee-extra summary { padding: 12px 0; color: #456b57; cursor: pointer; font-size: 10px; font-weight: 700; }.employee-extra[open] summary { margin-bottom: 10px; }.employee-address { grid-column: 1 / -1; }@media (max-width: 480px) { .employee-form-grid { grid-template-columns: 1fr; }.employee-address { grid-column: auto; } }
.dialog-footer { display: flex; justify-content: end; gap: 8px; margin-top: 20px; padding-top: 14px; border-top: 1px solid #edf0ed; }.detail-dialog { width: min(760px, calc(100% - 28px)); }.detail-dialog .dialog-header { margin-bottom: 13px; }.detail-body { display: grid; gap: 13px; }.detail-meta { display: flex; flex-wrap: wrap; gap: 7px; }.meta-chip { padding: 6px 9px; border-radius: 5px; background: #f4f7f4; color: #627168; font-size: 9px; }.progress-label { margin: 4px 0 -3px; color: #8b9790; font-size: 8px; font-weight: 700; letter-spacing: .8px; }.step-progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }.progress-step { position: relative; padding-top: 11px; color: #98a39c; font-size: 8px; text-align: center; }.progress-step::before { position: absolute; top: 0; left: 0; width: 100%; height: 3px; border-radius: 4px; background: #e9eeea; content: ""; }.progress-step.done { color: #3e8063; }.progress-step.done::before { background: #68a581; }.progress-step.current { color: #9d713b; }.progress-step.current::before { background: #d1a462; }
.document-preview { min-height: 215px; padding: 24px 30px; border: 1px solid #e8e8e2; background: #fffefa; color: #4f534e; box-shadow: 0 3px 12px rgba(40, 45, 37, .04); }.preview-brand { margin-bottom: 20px; color: #344c40; font-family: Manrope, sans-serif; font-size: 12px; font-weight: 800; letter-spacing: .5px; }.preview-kicker { color: #9a9d92; font-size: 7px; font-weight: 700; letter-spacing: 1.3px; }.document-preview h3 { margin: 7px 0 10px; font-family: Manrope, sans-serif; font-size: 12px; text-align: center; }.preview-rule { width: 35px; height: 1px; margin: 0 auto 13px; background: #8ca594; }.preview-content { max-height: 185px; overflow: auto; color: #75796f; font-size: 9px; line-height: 1.7; }.preview-content p { margin-bottom: 8px; }.preview-content h1, .preview-content h2, .preview-content h3 { margin: 7px 0; font-size: 11px; }.preview-lines { display: none; }.preview-signatures { display: flex; justify-content: space-around; margin-top: 23px; }.preview-signatures span { display: grid; width: 130px; gap: 5px; color: #94988f; font-size: 7px; text-align: center; }.preview-signatures i { height: 22px; border-bottom: 1px solid #d9ddd5; }
.signature-area { padding: 13px; border: 1px solid #e7ece8; border-radius: 6px; }.signature-heading { display: flex; align-items: start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }.signature-heading strong { font-size: 10px; }.signature-heading p { margin: 4px 0 0; color: #89958e; font-size: 9px; }.signature-area canvas { display: block; width: 100%; height: 130px; border: 1px dashed #cbd7ce; border-radius: 4px; background: #fdfefd; touch-action: none; }.signature-actions { display: flex; justify-content: end; gap: 7px; margin-top: 10px; }.detail-footer { padding-top: 12px; }.confirm-dialog { width: min(390px, calc(100% - 28px)); padding: 25px; text-align: center; }.confirm-mark { display: grid; width: 35px; height: 35px; margin: 0 auto 12px; place-items: center; border-radius: 50%; background: #eef5ef; color: #397d62; font-family: Manrope, sans-serif; font-size: 17px; font-weight: 700; }.confirm-dialog .dialog-footer { justify-content: center; }
.auth-gate { display: none; }.auth-card { width: min(420px, 100%); padding: 34px 35px 29px; border: 1px solid #e6ece7; border-radius: 10px; background: #fff; box-shadow: 0 16px 55px rgba(29, 54, 41, .08); }.auth-brand { margin: 0 0 34px; }.auth-kicker { color: #7d9988; font-size: 8px; font-weight: 700; letter-spacing: 1.45px; }.auth-card h1 { margin: 9px 0 7px; font-size: 25px; }.auth-description { margin-bottom: 22px; color: #849188; font-size: 11px; }.auth-form .field-label { margin-bottom: 13px; }.auth-form .field-label input { min-height: 41px; }.auth-submit { width: 100%; min-height: 40px; margin-top: 5px; }.button-google { width: 100%; min-height: 40px; border-color: #e3e8e4; background: #fff; color: #4c5a52; }.button-google:hover { background: #f8faf8; }.button-google svg { width: 16px; height: 16px; }.auth-divider { display: flex; align-items: center; gap: 10px; margin: 17px 0; color: #a1aaa4; font-size: 8px; font-weight: 600; letter-spacing: .8px; }.auth-divider span { flex: 1; border-top: 1px solid #edf0ed; }.auth-footnote { margin: 21px 0 0; padding-top: 14px; border-top: 1px solid #edf0ed; color: #929c96; font-size: 9px; line-height: 1.5; text-align: center; }.auth-error { margin: -7px 0 16px; padding: 10px; border: 1px solid #f0d7d4; border-radius: 5px; background: #fff7f6; color: #a64c46; font-size: 10px; line-height: 1.5; }
body:not(.authenticated) .app-shell { display: none; }.auth-brand { margin: 0 0 34px; }.auth-kicker { color: #7d9988; font-size: 8px; font-weight: 700; letter-spacing: 1.45px; }.auth-card h1 { margin: 9px 0 7px; font-size: 25px; }.auth-description { margin-bottom: 22px; color: #849188; font-size: 11px; }.auth-form .field-label { margin-bottom: 13px; }.auth-form .field-label input { min-height: 41px; }.auth-submit { width: 100%; min-height: 40px; margin-top: 5px; }.button-google { width: 100%; min-height: 40px; border-color: #e3e8e4; background: #fff; color: #4c5a52; }.button-google:hover { background: #f8faf8; }.button-google svg { width: 16px; height: 16px; }.auth-divider { display: flex; align-items: center; gap: 10px; margin: 17px 0; color: #a1aaa4; font-size: 8px; font-weight: 600; letter-spacing: .8px; }.auth-divider span { flex: 1; border-top: 1px solid #edf0ed; }.auth-footnote { margin: 21px 0 0; padding-top: 14px; border-top: 1px solid #edf0ed; color: #929c96; font-size: 9px; line-height: 1.5; text-align: center; }.auth-error { margin: -7px 0 16px; padding: 10px; border: 1px solid #f0d7d4; border-radius: 5px; background: #fff7f6; color: #a64c46; font-size: 10px; line-height: 1.5; }
body:not(.authenticated) .auth-gate { display: grid; min-height: 100vh; grid-template-columns: minmax(320px, 1fr) minmax(250px, .6fr); align-items: center; justify-items: center; padding: 32px; background: radial-gradient(circle at 15% 15%, #e8f0e9 0, transparent 37%), #f7f8f6; }.auth-decoration { display: flex; max-width: 390px; flex-direction: column; align-items: start; justify-self: start; padding: 36px; border-left: 1px solid #dce7de; color: #577365; }.auth-decoration > span { margin-bottom: 16px; color: #78a38a; font-size: 27px; }.auth-decoration p { margin: 0; font-family: Manrope, sans-serif; font-size: 25px; letter-spacing: -.8px; line-height: 1.5; }.auth-decoration p strong { color: #294d3d; }.auth-decoration small { margin-top: 18px; color: #8aa091; font-size: 8px; font-weight: 700; letter-spacing: 1.4px; }
@media (max-width: 1150px) { .metrics-grid { grid-template-columns: repeat(2, 1fr); }.dashboard-grid { grid-template-columns: 1fr; }.overview-side { display: grid; grid-template-columns: 1fr 1.4fr; align-items: start; }.overview-side .section-heading { grid-column: 1 / -1; }.attention-list { grid-column: 1; }.completion-card { grid-column: 2; grid-row: 2; margin-top: 0; }.template-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 780px) { .sidebar { width: 230px; transform: translateX(-101%); transition: transform .2s ease; box-shadow: 8px 0 30px rgba(30, 45, 36, .1); }.sidebar.open { transform: translateX(0); }.main-area { width: 100%; margin-left: 0; }.topbar { height: 56px; padding: 0 16px; }.mobile-menu { display: inline-grid; margin-right: 7px; }.breadcrumbs { margin-right: auto; }.topbar-actions { gap: 9px; }.live-status { display: none; }.page-content { padding: 26px 17px 30px; }.welcome-row, .page-heading-row { align-items: start; }.welcome-row { gap: 10px; }.welcome-row > .button { margin-top: 10px; white-space: nowrap; }.welcome-row .button { width: 38px; min-width: 38px; overflow: hidden; padding: 0 10px; font-size: 0; }.welcome-row .button svg { width: 17px; }.dashboard-grid { display: block; }.overview-side { display: block; margin-top: 14px; }.completion-card { margin-top: 12px; }.table-toolbar { align-items: start; flex-direction: column; }.search-box { width: 100%; }.filter-tabs { width: 100%; }.activity-surface { overflow: hidden; }.activity-surface .document-table { min-width: 720px; }.mobile-view-all { display: block; width: 100%; padding: 12px; border: 0; border-top: 1px solid #edf0ed; background: #fff; color: #3b7c65; font-size: 10px; font-weight: 600; }.page-heading-row { align-items: center; }.page-heading-row > .button { flex: 0 0 auto; }.full-table-surface .document-table { min-width: 730px; }.template-grid { grid-template-columns: 1fr; }.auth-card { padding: 29px 23px 24px; }.auth-decoration { display: none; }body:not(.authenticated) .auth-gate { grid-template-columns: 1fr; padding: 18px; }.import-note { align-items: start; flex-wrap: wrap; }.import-note .text-button { margin-left: 39px; } }
@media (max-width: 480px) { .page-content { padding: 22px 12px; }.top-date { display: none; }.topbar-divider { display: none; }.metrics-grid { gap: 9px; }.metric-card { min-height: 130px; padding: 13px; }.metric-top { gap: 4px; font-size: 9px; }.metric-spark { right: 12px; }.metric-value { font-size: 24px; }.welcome-row h1 { font-size: 22px; }.welcome-row .page-subtitle { max-width: 240px; font-size: 10px; }.eyebrow { font-size: 8px; }.insight-strip { align-items: start; }.insight-strip > div { line-height: 1.5; }.document-preview { padding: 20px 17px; }.app-dialog { padding: 18px; }.step-progress { gap: 2px; }.progress-step { font-size: 7px; }.auth-card { padding: 26px 20px; }.profile-button { padding-top: 9px; } }

.template-editor-tools { display: flex; gap: 8px; margin: 0 0 9px; }
.template-editor-tools .button { min-height: 34px; padding: 0 11px; font-size: 11px; }
.template-preview-frame { display: block; width: 100%; height: 420px; margin-top: 12px; border: 1px solid var(--line); border-radius: 9px; background: white; }
.template-preview-body { min-height: 100vh; padding: 25px; background: white; color: #172923; font: 14px/1.6 Arial, sans-serif; }
.template-preview-body img { display: block; max-width: 100%; height: auto; }
.template-preview-body table { width: 100%; border-collapse: collapse; }
.template-preview-body td, .template-preview-body th { padding: 6px; border: 1px solid #cdd8d1; text-align: left; }
.template-preview-body .pdf-template-page { position: relative; margin: 0 auto 18px; border: 1px solid #e8ede9; background: white; }
.template-preview-body .pdf-template-page img { width: 100%; }
.template-preview-body .pdf-template-token { position: absolute; display: flex; align-items: center; overflow: hidden; background: white; color: black; line-height: 1; white-space: nowrap; }