html {
  --lumo-font-family: "Segoe UI", Arial, sans-serif;
  --lumo-primary-color: #126b77;
  --lumo-primary-color-50pct: rgba(18,107,119,.5);
  --lumo-primary-color-10pct: rgba(18,107,119,.09);
  --lumo-primary-text-color: #0f6570;
  --lumo-body-text-color: #25374b;
  --lumo-header-text-color: #142e45;
  --lumo-secondary-text-color: #607286;
  --lumo-border-radius-m: 9px;
  background: #f3f6f9;
}
body { margin: 0; }
.erp-shell { max-width: 1600px; margin: auto; padding: 32px clamp(18px,4vw,64px) 48px; gap: 20px; }
.erp-heading { width: 100%; padding: 28px 32px; box-sizing: border-box; border-radius: 18px; background: linear-gradient(115deg,#142e45,#20566a); color: white; }
.erp-heading > span { font-size: 11px; letter-spacing: .16em; font-weight: 700; color: #a8dcd9; }
.erp-heading h1 { color: white !important; font-size: clamp(26px,3vw,38px); letter-spacing: -.035em; margin: 10px 0; }
.erp-heading p { color: #d3e3ec; margin: 0; line-height: 1.6; }
.erp-session { width: 100%; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.erp-session > span { margin-right: auto; font-size: 13px; color: var(--lumo-secondary-text-color); }
.erp-session vaadin-button { font-size: 13px; }
.erp-session a { font-size: 13px; }
.erp-navigation { align-items: center; gap: 6px; padding: 10px; background: white; border: 1px solid #dfe6ed; border-radius: 13px; box-sizing: border-box; box-shadow: 0 4px 14px #142e4505; }
.erp-navigation vaadin-button { margin: 0; padding: 0 15px; color: #52657a; font-weight: 600; }
.erp-navigation vaadin-button:hover { background: #eef5f6; }
.erp-navigation vaadin-button.is-active { color: white; background: #126b77; box-shadow: 0 3px 8px #126b7726; }
.erp-navigation a { padding: 10px 14px; font-size: 13px; font-weight: 600; }
.erp-content { gap: 18px; }
.erp-content h2 { margin: 10px 0 0; font-size: 25px; letter-spacing: -.025em; }
.erp-content p { margin: 0; color: var(--lumo-secondary-text-color); line-height: 1.65; max-width: 90ch; }
.erp-metrics { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; width: 100%; }
.erp-metric { padding: 22px 26px; border: 1px solid #dfe6ed; border-radius: 14px; background: white; box-shadow: 0 5px 18px #142e4505; }
.erp-metric > span:first-child { color: #52657a; font-size: 13px; font-weight: 600; }
.erp-metric-value { display: block; font-size: 38px; font-weight: 750; line-height: 1.4; letter-spacing: -.04em; color: #142e45; }
.erp-metric:last-child { background: #edf7f6; border-color: #c5e0df; }
.erp-metric:last-child .erp-metric-value { color: #126b77; }
.erp-metric p { font-size: 12px; }
vaadin-grid { border: 1px solid #dfe6ed; border-radius: 12px; overflow: hidden; background: white; }
vaadin-grid::part(header-cell) { background: #edf2f6; color: #455b70; font-size: 12px; font-weight: 700; }
vaadin-grid::part(body-cell) { padding-top: 11px; padding-bottom: 11px; }
vaadin-grid::part(row):hover { background: #f3f8fa; }
vaadin-text-field::part(input-field), vaadin-combo-box::part(input-field), vaadin-password-field::part(input-field), vaadin-text-area::part(input-field) { background: white; box-shadow: inset 0 0 0 1px #cdd8e2; }
vaadin-dialog-overlay::part(overlay) { border-radius: 16px; box-shadow: 0 24px 80px #142e4526; }
vaadin-dialog-overlay::part(header) { border-bottom: 1px solid #e4eaf0; }
vaadin-dialog-overlay::part(footer) { background: #f5f8fa; }
a { text-underline-offset: 4px; }
a:focus-visible { outline: 2px solid #126b77; outline-offset: 4px; border-radius: 3px; }
.erp-login { background: radial-gradient(ellipse at top,#dceeed,transparent 65%),#f3f6f9; min-height: 100dvh; }
.erp-login h1 { font-size: clamp(24px,4vw,34px); letter-spacing: -.035em; text-align: center; }
.erp-login vaadin-login-form { background: white; border: 1px solid #dfe6ed; border-radius: 16px; box-shadow: 0 20px 65px #142e4512; overflow: hidden; }
@media (max-width: 700px) {
  .erp-shell { padding: 16px 14px 32px; gap: 14px; }
  .erp-heading { padding: 22px; }
  .erp-navigation { gap: 4px; }
  .erp-navigation vaadin-button { padding: 0 11px; font-size: 13px; }
  .erp-metrics { grid-template-columns: 1fr; gap: 12px; }
  .erp-session > span { width: 100%; }
  .erp-content > vaadin-horizontal-layout { flex-wrap: wrap; }
}
.erp-pdf-download { display:inline-flex; padding:10px 18px; background:#126b77; color:white; border-radius:9px; font-weight:600; text-decoration:none; margin:8px 0; } .erp-pdf-download:hover { background:#0d5360; color:white; }

/* Shared navigation for every ERP module. */
.erp-workspace { --vaadin-app-layout-drawer-width: 264px; background: #f3f6f9; }
.erp-workspace::part(drawer) { background: #fff; border-right: 1px solid #e2e9ef; }
.erp-workspace::part(navbar) { background: #fff; border-bottom: 1px solid #e2e9ef; }
.erp-sidebar { display: flex; flex-direction: column; min-height: 100%; }
.erp-brand { display: flex; align-items: center; gap: 12px; padding: 25px 22px; color: #142e45; text-decoration: none; }
.erp-brand-mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: white; background: #126b77; font-size: 25px; font-weight: 750; }
.erp-brand strong { display: block; font-size: 21px; letter-spacing: -.03em; }
.erp-brand div > span { display: block; font-size: 12px; color: #607286; }
.erp-side-nav { flex: 1; padding: 0 12px 20px; }
.erp-side-group { margin-top: 15px; }
.erp-side-heading { display: block; padding: 0 12px 7px; font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: .1em; color: #667789; }
.erp-side-link { display: flex; align-items: center; gap: 11px; min-height: 38px; padding: 2px 12px; margin: 2px 0; border-radius: 8px; box-sizing: border-box; color: #45586b; font-size: 13px; font-weight: 550; text-decoration: none; transition: background .15s, color .15s; }
.erp-side-link vaadin-icon { width: 17px; height: 17px; flex-shrink: 0; color: #768897; }
.erp-side-link:hover { background: #f0f5f7; color: #142e45; text-decoration: none; }
.erp-side-link.is-active { background: #e3f2f0; color: #0b626c; box-shadow: inset 3px 0 #126b77; font-weight: 700; }
.erp-side-link.is-active vaadin-icon { color: #126b77; }
.erp-side-link:focus-visible { outline: 2px solid #126b77; outline-offset: 1px; }
.erp-side-account { display: flex; flex-wrap: wrap; gap: 0 10px; padding: 16px 22px; border-top: 1px solid #e2e9ef; background: #fafcfd; }
.erp-account-name { width: 100%; overflow-wrap: anywhere; font-size: 13px; font-weight: 700; color: #25374b; }
.erp-side-account vaadin-button { font-size: 11px; margin: 3px 0 0; }
.erp-topbar { display: flex; align-items: center; gap: 14px; padding: 10px 24px 10px 12px; min-height: 64px; box-sizing: border-box; }
.erp-header-titles { display: flex; flex-direction: column; gap: 2px; }
.erp-section-title { font-size: 11px; color: #607286; }
.erp-page-title { font-size: 17px; font-weight: 700; color: #142e45; }
.erp-workspace .erp-shell { padding: 28px clamp(18px,3vw,42px) 40px; gap: 22px; }
.erp-workspace .erp-heading { padding: 22px 26px; border-radius: 12px; }
.erp-workspace .erp-heading h1 { font-size: clamp(23px,2.4vw,31px); }
@media (max-width: 700px) {
  .erp-workspace .erp-shell { padding: 18px 14px 32px; }
  .erp-workspace .erp-heading { padding: 20px; }
  .erp-topbar { padding-left: 6px; }
}
.erp-brand div > span:first-child { font-size: 21px; font-weight: 750; color: #142e45; }