/* Shared ERP palette. Functional/status colors and operational form geometry stay intact. */
:root {
  --visual-color-ink: #18354d;
  --visual-color-muted: #60788a;
  --visual-color-border: #d8e4ed;
  --visual-color-surface-soft: #f2f6fa;
  --visual-color-graphite: #123f67;
  --visual-color-graphite-deep: #082b4b;
  --visual-color-graphite-soft: #195477;
  --visual-color-primary: #078f99;
  --visual-color-primary-hover: #076a79;
  --visual-color-focus: #078f99;
  --visual-color-focus-ring: rgb(7 143 153 / 16%);
  --visual-color-disabled-bg: #edf2f6;
  --visual-color-disabled-text: #708594;
}

.login-hero { background: linear-gradient(135deg, #082b4b, #123f67); }
.login-benefit-icon { background: rgb(7 143 153 / 20%); color: #8ce8e9; }
.brand-mark,
.login-environment > span { background: #078f99; color: #fff; }
.login-input:focus-within { border-color: #078f99; }

.main-area,
.desktop-page-body,
.content { background-color: #f2f6fa; }
.content { width: 100%; max-width: 1500px; margin-inline: auto; }
.content.administration-page { max-width: 1280px; }
.content:has(.desktop-home) { max-width: none; }
.page-head { margin-bottom: 18px; }
.page-head h1,
.panel-head h2 { color: #102f4d; }
.page-head p,
.panel-head p { color: #60788a; }
.eyebrow,
.link:not(.danger-link) { color: #087f91; }

.panel,
.stat { background: #fff; border-color: #d8e4ed; box-shadow: 0 7px 22px rgb(16 47 77 / 7%); }
.panel-head { background: #fff; border-color: #dce7ef; }
th { background: #edf3f8; border-color: #dce7ef; color: #38566c; }
td { border-color: #e6edf3; }
tbody tr:hover { background: #f4fafc; }
.grid-selectable-row.selected { background: #e3f3f5 !important; box-shadow: inset 3px 0 #078f99; }

.primary { background: #078f99; color: #fff; box-shadow: none; }
.primary:hover:not(:disabled) { background: #076a79; }
.secondary { border-color: #c8d9e5; color: #254660; background: #fff; }
.secondary:hover:not(:disabled) { border-color: #078f99; background: #f0f9fa; }
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea { border-color: #c8d9e5; color: #183851; }
input:focus,
select:focus,
textarea:focus { border-color: #078f99; box-shadow: 0 0 0 3px rgb(7 143 153 / 15%); }

.sidebar { background: linear-gradient(180deg, #082b4b, #123f67); }
.nav-title { color: #9cb8cb; }
.nav-item { color: #d8e9f1; }
.nav-item.active { background: #195477; box-shadow: inset 3px 0 #22d0d1; }
.desktop-menu summary:hover,
.desktop-menu[open] summary,
.desktop-menu-exit:hover,
.desktop-menu-items button:hover { background: #e3f3f5; color: #102f4d; }
.desktop-menu[open] summary { box-shadow: inset 0 -2px #078f99; }
.topbar,
.desktop-menubar,
.desktop-toolbar,
.desktop-status { border-color: #d8e4ed; }
.topbar { box-shadow: inset 0 -1px #e3f3f5; }
.desktop-home .desktop-menubar { border-bottom-color: #078f99; }
.desktop-home .desktop-shortcut:hover:not(:disabled) { border-color: #078f99; background: #f0f9fa; }
.desktop-home .desktop-shortcut:focus-visible { outline-color: #078f99; }
.page-numbers button.active { background: #123f67; border-color: #123f67; box-shadow: inset 0 -2px #22d0d1; }
.customer-tabs button[aria-selected="true"],
.entry-mode-switch .secondary.active { border-color: #078f99; color: #076a79; background: #e3f3f5; }

/* Shared icon geometry: line icons do not depend on a particular font. */
.ui-icon { display: inline-block; width: 19px; height: 19px; flex: none; vertical-align: -0.2em; }
.nav-item .icon { display: inline-grid; place-items: center; }
.nav-item .ui-icon { width: 18px; height: 18px; }
.login-input > span { display: inline-grid; place-items: center; }
.login-input .ui-icon { width: 19px; height: 19px; color: #42677f; }
.login-input button .ui-icon { width: 18px; height: 18px; }
.login-input > span .ui-icon { width: 21px; height: 21px; stroke-width: 2; }
.login-benefit-icon .ui-icon,
.login-environment .ui-icon { width: 19px; height: 19px; }
.quote-icon .ui-icon { width: 17px; height: 17px; }
.product-section-icon .ui-icon { width: 18px; height: 18px; }
.entry-section-title .ui-icon { width: 17px; height: 17px; }

/* Unavailable actions remain identifiable without looking actionable. */
.desktop-home .desktop-shortcut.unavailable {
  opacity: 1;
  filter: none;
  color: #536b79;
  background: #eef3f6;
  box-shadow: inset 0 0 0 1px #d5e0e6;
}
.desktop-home .desktop-shortcut.unavailable .desktop-shortcut-icon img {
  opacity: .85;
  filter: grayscale(.35);
}
.desktop-home .desktop-shortcut.unavailable:hover { background: #eef3f6; }
@media (max-width: 760px) {
  .desktop-home .desktop-menubar { padding-inline: 4px; }
  .desktop-home .desktop-menu summary,
  .desktop-home .desktop-menu-pending,
  .desktop-home .desktop-menu-exit { min-height: 40px; padding-inline: 9px; font-size: 12px; }
  .desktop-home .desktop-toolbar { overflow-x: auto; flex-wrap: nowrap; }
  .desktop-home .desktop-toolbar-brand,
  .desktop-home .desktop-shortcut { flex: 0 0 92px; min-width: 92px; }
}

/* Cash flow: retain all columns and totals, but stop stretching across ultrawide displays. */
.content:has(> .page-head-cashFlow) { max-width: 1320px; }
.desktop-page-body > .content:has(> .page-head-cashFlow) {
  flex: 0 1 1320px;
  width: min(100%, 1320px);
  max-width: 1320px;
  margin-inline: auto;
}
.content:has(> .page-head-cashFlow) .cash-flow-grid:has(tbody .empty) {
  height: auto;
  min-height: 120px;
  max-height: 180px;
}

@media (max-width: 760px) {
  .content.administration-page { padding: 16px 12px 24px; }
  .desktop-page-body > .content:has(> .page-head-cashFlow) { width: 100%; }
}