:root {
  --vd-ink: #17211b;
  --vd-muted: #66736b;
  --vd-line: #dfe5e0;
  --vd-canvas: #f3f6f3;
  --vd-surface: #ffffff;
  --vd-green: #18794e;
  --vd-green-dark: #105f3c;
  --vd-green-soft: #e8f5ed;
  --vd-blue: #235fba;
  --vd-violet: #7546c7;
  --vd-amber: #a66613;
  --vd-danger: #b63a42;
  --vd-radius: 14px;
  --vd-shadow: 0 8px 30px rgba(24, 48, 32, .06);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--vd-canvas); }
body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 82% -10%, rgba(77, 151, 104, .09), transparent 30rem),
    var(--vd-canvas);
  color: var(--vd-ink);
  font: 14px/1.45 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { text-underline-offset: 2px; }
.btn { border-radius: 9px; font-weight: 650; }
.btn-primary { --bs-btn-bg: var(--vd-green); --bs-btn-border-color: var(--vd-green); --bs-btn-hover-bg: var(--vd-green-dark); --bs-btn-hover-border-color: var(--vd-green-dark); }
.btn-success { --bs-btn-bg: #176f4a; --bs-btn-border-color: #176f4a; }
.form-control, .form-select, .input-group-text {
  min-height: 40px;
  border-color: #d5ddd7;
  border-radius: 9px;
}
.form-control-sm, .form-select-sm { min-height: 34px; }
.form-control:focus, .form-select:focus {
  border-color: #6da683;
  box-shadow: 0 0 0 .2rem rgba(24, 121, 78, .12);
}

.app-topbar {
  position: sticky;
  top: 0;
  z-index: 1040;
  height: 68px;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 24px;
  color: #f7fbf8;
  background: rgba(23, 33, 27, .97);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  backdrop-filter: blur(16px);
}
.app-brand { display: flex; align-items: center; gap: 11px; width: 248px; color: #fff; text-decoration: none; }
.app-brand:hover { color: #fff; }
.app-brand-mark {
  width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px;
  background: #effbf3; color: #12643e; font-size: 11px; font-weight: 850; letter-spacing: -.04em;
}
.app-brand-copy { display: flex; flex-direction: column; line-height: 1.05; }
.app-brand-copy strong { font-size: 17px; letter-spacing: -.02em; }
.app-brand-copy small { margin-top: 4px; color: #93a49a; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.app-context { color: #aebbb2; font-size: 13px; font-weight: 650; }
.app-topbar-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.topbar-link { display: flex; align-items: center; gap: 7px; padding: 7px 9px; color: #dce7df; text-decoration: none; font-weight: 650; }
.topbar-link:hover { color: #fff; }
.live-dot { width: 7px; height: 7px; display: inline-block; flex: 0 0 7px; border-radius: 50%; background: #44d482; box-shadow: 0 0 0 4px rgba(68, 212, 130, .12); }
.topbar-create { padding-inline: 13px; }
.app-nav-toggle { display: none; width: 42px; height: 42px; padding: 10px; border: 0; border-radius: 10px; background: rgba(255,255,255,.08); }
.app-nav-toggle span { display: block; height: 2px; margin: 4px 0; border-radius: 2px; background: #fff; transition: transform .2s, opacity .2s; }

.app-shell { min-height: calc(100vh - 68px); }
.app-sidebar {
  position: fixed;
  top: 68px;
  bottom: 0;
  left: 0;
  z-index: 1030;
  width: 272px;
  display: flex;
  flex-direction: column;
  padding: 18px 14px 14px;
  background: #fbfdfb;
  border-right: 1px solid var(--vd-line);
  overflow-y: auto;
}
.side-nav-group + .side-nav-group { margin-top: 20px; }
.side-nav-label { margin: 0 10px 7px; color: #879189; font-size: 10px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.side-nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 54px;
  margin: 3px 0;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: #29362e;
  text-decoration: none;
  transition: background .15s, border-color .15s, transform .15s;
}
.side-nav-link:hover { color: #17211b; background: #f0f5f1; transform: translateX(1px); }
.side-nav-link.active { color: #105f3c; background: var(--vd-green-soft); border-color: #d3ebdc; }
.side-nav-link.active::before { content: ""; position: absolute; left: -15px; width: 3px; height: 28px; border-radius: 0 4px 4px 0; background: var(--vd-green); }
.side-nav-link > span:last-child { min-width: 0; display: flex; flex-direction: column; }
.side-nav-link strong { font-size: 13px; font-weight: 750; }
.side-nav-link small { margin-top: 2px; color: #7c8980; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-nav-icon {
  width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center;
  border-radius: 9px; background: #e9eeea; color: #526057; font-size: 10px; font-weight: 850; letter-spacing: -.02em;
}
.active .side-nav-icon, .icon-doc { color: #176d46; background: #d9efe1; }
.icon-fgis { color: #245ca4; background: #e2edfb; }
.icon-invoice { color: #8a5a0c; background: #f7ecd8; }
.icon-contract { color: #6840a8; background: #eee6fb; }
.icon-people { color: #216c62; background: #def1ed; }
.icon-ai { color: #fff; background: linear-gradient(135deg, #127147, #3b9169); }
.side-nav-link.compact { min-height: 44px; }
.side-nav-link.compact .side-nav-icon { width: 28px; height: 28px; flex-basis: 28px; border-radius: 8px; font-size: 9px; }
.sidebar-footer { display: flex; align-items: center; gap: 8px; margin-top: auto; padding: 16px 11px 2px; border-top: 1px solid #e8ece9; color: #637067; font-size: 12px; }
.sidebar-footer small { margin-left: auto; color: #9aa49d; font-size: 10px; }
.app-scrim { display: none; }

.app-main {
  width: auto;
  min-width: 0;
  max-width: 1560px;
  min-height: calc(100vh - 68px);
  margin-left: 272px;
  padding: 30px clamp(20px, 3vw, 48px) 56px;
}
.app-alert { box-shadow: var(--vd-shadow); }

.page-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 22px; }
.page-heading-copy { max-width: 780px; }
.page-eyebrow { margin-bottom: 5px; color: var(--vd-green); font-size: 10px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.page-heading h1 { margin: 0; font-size: clamp(24px, 2.5vw, 34px); font-weight: 780; letter-spacing: -.035em; }
.page-heading p { margin: 7px 0 0; color: var(--vd-muted); font-size: 14px; }
.page-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.feature-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.feature-chip { padding: 5px 9px; border: 1px solid #dce5de; border-radius: 999px; background: rgba(255,255,255,.65); color: #56635a; font-size: 11px; font-weight: 650; }

.card, .step { border: 1px solid rgba(220, 228, 222, .9); border-radius: var(--vd-radius); background: var(--vd-surface); box-shadow: var(--vd-shadow); }
.card-header { padding: 15px 18px; border-bottom: 1px solid #edf1ee; border-radius: var(--vd-radius) var(--vd-radius) 0 0 !important; background: #fff; color: var(--vd-ink); font-weight: 750; }
.step { padding: clamp(18px, 2.5vw, 30px); margin-bottom: 18px; }
.step h2 { display: flex; align-items: center; margin: 0 0 18px; color: var(--vd-ink); font-size: 17px; font-weight: 760; }
.step h2 .step-num { width: 26px; height: 26px; display: inline-grid; place-items: center; margin-right: 9px; border-radius: 8px; background: var(--vd-green); color: #fff; font-size: 11px; }
.step-intro { margin: -10px 0 20px 35px; color: var(--vd-muted); font-size: 13px; }

.drop-zone { padding: 32px 22px; border: 1.5px dashed #95b7a1; border-radius: 12px; background: #f7fbf8; text-align: center; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.drop-zone:hover, .drop-zone.dragover { border-color: var(--vd-green); background: #eef8f1; transform: translateY(-1px); }
.drop-zone p { margin: 0; color: #47564c; }
.drop-zone .hint { margin-top: 7px; color: #859088; font-size: 11px; }
.drop-zone .filename { margin-top: 8px; color: var(--vd-green); font-weight: 700; }
.status-pill { min-height: 22px; margin: 10px 0 0; font-size: 13px; }
.status-pill.ok { color: #147444; }
.status-pill.error { color: var(--vd-danger); }
.status-pill.loading::after { content: ' …'; animation: dots 1.4s infinite; }
@keyframes dots { 0%,20%{content:' .'} 40%{content:' ..'} 60%,100%{content:' ...'} }

.nav-pills { gap: 5px; padding: 4px; border-radius: 11px; background: #f1f4f2; }
.nav-pills .nav-link { padding: 8px 13px; border-radius: 8px; color: #526057; font-size: 13px; font-weight: 650; }
.nav-pills .nav-link:hover { color: #1d5f3d; }
.nav-pills .nav-link.active { color: #fff; background: var(--vd-green); box-shadow: 0 4px 12px rgba(24,121,78,.18); }

fieldset { padding: 15px 17px 18px; margin-bottom: 14px; border: 1px solid #e2e8e3; border-radius: 11px; background: #fcfdfc; }
legend { float: none; width: auto; margin: 0 0 3px; padding: 0 7px; color: #334039; font-size: 12px; font-weight: 800; letter-spacing: .02em; }
fieldset .form-label { margin-bottom: 4px; color: #59665e; font-size: 12px; font-weight: 600; }
.file-list li { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; padding: 9px 12px; border-radius: 8px; background: #f5f8f6; }
.file-list a { flex: 1; color: var(--vd-green); text-decoration: none; }

.table-responsive { border: 1px solid #e2e8e3; border-radius: 12px; background: #fff; box-shadow: 0 5px 22px rgba(24,48,32,.04); }
.table { --bs-table-bg: transparent; margin-bottom: 0; }
.table thead th { padding-top: 11px; padding-bottom: 11px; border-bottom-color: #dfe6e1; background: #f7f9f7; color: #68736c; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.table tbody td { border-color: #edf1ee; }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: #f6faf7; }
.badge { border-radius: 999px; font-weight: 700; }

.acc-tabs { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 9px; }
.acc-tab { position: relative; display: flex; align-items: center; gap: 10px; min-height: 66px; padding: 9px 10px; overflow: hidden; border: 1px solid #e0e7e2; border-radius: 11px; background: #fff; color: #243129; text-decoration: none; box-shadow: 0 3px 12px rgba(24,48,32,.04); transition: transform .15s, border-color .15s, box-shadow .15s; }
.acc-tab:hover { color: #17211b; border-color: #bdcbbf; transform: translateY(-1px); }
.acc-tab.active { border-color: #8eb89c; box-shadow: 0 6px 18px rgba(24,121,78,.11); }
.acc-tab::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: #89958c; }
.acc-tab-icon { width: 37px; height: 37px; flex: 0 0 37px; display: grid; place-items: center; border-radius: 9px; background: #89958c; color: #fff; font-size: 10px; font-weight: 850; }
.acc-tab-text { min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.acc-tab-title { font-weight: 780; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acc-tab-sub { margin-top: 3px; color: #78847b; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acc-tab-count { min-width: 26px; height: 23px; display: grid; place-items: center; margin-left: auto; padding: 0 7px; border-radius: 999px; background: #f0f3f1; color: #5f6b63; font-size: 10px; font-weight: 800; }
.acc-tab-invoice::before, .acc-tab-invoice .acc-tab-icon { background: #b27620; }
.acc-tab-contract::before, .acc-tab-contract .acc-tab-icon { background: #7546c7; }
.acc-tab-contractor::before, .acc-tab-contractor .acc-tab-icon { background: #247768; }

.empty-state { padding: 52px 20px; border: 1px dashed #cad5cd; border-radius: 14px; background: rgba(255,255,255,.55); text-align: center; color: var(--vd-muted); }
.section-anchor { scroll-margin-top: 82px; }
.required-marker { color: var(--vd-danger); }
.autocomplete-list { position: absolute; z-index: 1000; width: 100%; max-height: 240px; overflow-y: auto; border: 1px solid #ced4da; border-radius: 0 0 8px 8px; background: #fff; box-shadow: var(--vd-shadow); }
.autocomplete-list .item { padding: 7px 11px; cursor: pointer; }
.autocomplete-list .item:hover { background: #f0f5f1; }

@media (max-width: 1100px) {
  .app-sidebar { width: 244px; }
  .app-main { margin-left: 244px; padding-inline: 22px; }
  .app-brand { width: 220px; }
}

@media (max-width: 860px) {
  body.nav-open { overflow: hidden; }
  .app-topbar { height: 60px; padding: 0 14px; }
  .app-brand { width: auto; }
  .app-brand-copy small, .app-context, .topbar-create { display: none; }
  .app-brand-mark { width: 33px; height: 33px; }
  .app-nav-toggle { display: block; }
  .nav-open .app-nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-open .app-nav-toggle span:nth-child(2) { opacity: 0; }
  .nav-open .app-nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .app-sidebar { top: 60px; width: min(320px, 88vw); transform: translateX(-103%); box-shadow: 20px 0 50px rgba(13,27,17,.18); transition: transform .22s ease; }
  .nav-open .app-sidebar { transform: translateX(0); }
  .app-scrim { position: fixed; inset: 60px 0 0; z-index: 1020; display: block; border: 0; background: rgba(15,25,18,.4); opacity: 0; pointer-events: none; transition: opacity .2s; }
  .nav-open .app-scrim { opacity: 1; pointer-events: auto; }
  .app-main { width: 100%; max-width: 100%; min-height: calc(100vh - 60px); margin-left: 0; padding: 22px 14px 44px; overflow-x: hidden; }
  .page-heading { flex-direction: column; margin-bottom: 17px; }
  .page-actions { width: 100%; }
  .acc-tabs { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  body { font-size: 13px; }
  .topbar-link { display: none; }
  .page-heading h1 { font-size: 26px; }
  .page-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-actions .btn { width: 100%; min-width: 0; white-space: normal; }
  .page-actions .btn:nth-child(3) { grid-column: 1 / -1; }
  .step { padding: 17px 14px; border-radius: 12px; }
  .step h2 { font-size: 15px; }
  .nav-pills { display: grid; grid-template-columns: 1fr; }
  .nav-pills .nav-link { width: 100%; text-align: left; }
  fieldset { padding: 12px 11px 15px; }
  .table-responsive { border-radius: 10px; }
  .acc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .input-group { flex-wrap: wrap; }
  .input-group > .form-control { width: 100%; min-width: 0; border-radius: 9px !important; }
  .input-group > .btn { width: 100%; margin-top: 7px; border-radius: 9px !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}