/* KLEN+ ERP enterprise presentation layer.
   Loaded after page-level styles to keep every workspace visually consistent. */
:root {
  --erp-navy: #263a78;
  --erp-navy-deep: #1d2f68;
  --erp-green: #43b536;
  --erp-green-deep: #319427;
  --erp-mint: #eaf7f0;
  --erp-ink: #243c47;
  --erp-muted: #6f8388;
  --erp-line: #d9e5e2;
  --erp-surface: #ffffff;
  --erp-surface-soft: #f6faf8;
  --erp-danger: #c9433d;
  --erp-warning: #a96b17;
  --erp-shadow: 0 10px 28px rgba(29, 57, 71, .07);
  --erp-shadow-soft: 0 5px 16px rgba(29, 57, 71, .05);
}

html { color-scheme: light; scroll-behavior: smooth; }
body {
  color: var(--erp-ink);
  font-family: Inter, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 92% 5%, rgba(67,181,54,.08), transparent 25rem),
    linear-gradient(125deg, #f2f5fc 0%, #fbfcff 48%, #f1f8ef 100%);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { color: #fff; background: var(--erp-navy); }

:is(.app-page-content,.content) { min-width: 0; }
:is(.page-heading,.head,.doc-head,.governance-head) h1 {
  color: var(--erp-navy);
  letter-spacing: -.035em;
}
:is(.page-heading,.head,.doc-head,.governance-head) .subtitle {
  max-width: 780px;
  color: var(--erp-muted);
  line-height: 1.55;
}
.eyebrow {
  color: var(--erp-green-deep);
  font-weight: 800;
  letter-spacing: .12em;
}

:is(.card,.panel,.workspace-card,.form-card,.sales-card,.password-card) {
  border-color: var(--erp-line);
  border-radius: 13px;
  background: var(--erp-surface);
  box-shadow: var(--erp-shadow-soft);
}
:is(.card,.panel,.workspace-card,.form-card,.sales-card) h2 {
  color: var(--erp-navy);
  letter-spacing: -.015em;
}
:is(.card,.panel,.workspace-card,.form-card,.sales-card) > p,
:is(.card,.panel,.workspace-card,.form-card,.sales-card) .card-head p {
  color: var(--erp-muted);
  line-height: 1.5;
}
:is(.card-head,.section-title) { gap: 12px; }

:is(.kpi,.stat,.metric-card) {
  border-color: var(--erp-line);
  border-radius: 11px;
  background: linear-gradient(145deg, #fff, #f8fbfa);
  box-shadow: var(--erp-shadow-soft);
}
:is(.kpi,.stat,.metric-card) :is(span,small) {
  color: var(--erp-muted);
  font-weight: 800;
  letter-spacing: .07em;
}
:is(.kpi,.stat,.metric-card) b,
:is(.kpi,.stat,.metric-card) strong { color: var(--erp-navy); }

label {
  color: #526d72;
  font-weight: 800;
  letter-spacing: .035em;
}
:is(input,select,textarea) {
  border-color: #d5e1df;
  border-radius: 8px;
  color: var(--erp-ink);
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(26,56,67,.025);
}
:is(input,select,textarea)::placeholder { color: #91a0a3; }
:is(input,select,textarea):hover:not(:disabled) { border-color: #afc7c1; }
:is(input,select,textarea):focus {
  border-color: var(--erp-green);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(67,181,54,.14);
}
:is(input,select,textarea):disabled,
:is(input,select,textarea)[readonly] {
  color: #536d72;
  background: #f0f5f3;
  cursor: not-allowed;
}

:is(.button,.action,.mini,button) {
  border-radius: 7px;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
:is(.button,.action,.mini,button):focus-visible {
  outline: 2px solid var(--erp-navy);
  outline-offset: 2px;
}
:is(.button,.action,.mini,button):disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}
.button.primary {
  border-color: var(--erp-green);
  color: #14265e;
  background: linear-gradient(180deg, #49c03c, var(--erp-green));
  box-shadow: 0 6px 15px rgba(49,148,39,.16);
}
.button.primary:hover:not(:disabled) {
  background: linear-gradient(180deg, #4bc83e, #39a82f);
  box-shadow: 0 8px 18px rgba(49,148,39,.22);
}
:is(.button.secondary,.button.ghost,.action,.mini) {
  border-color: var(--erp-line);
  color: #526b70;
  background: #fff;
}
:is(.button.secondary,.button.ghost,.action,.mini):hover:not(:disabled) {
  border-color: #9fc4b9;
  color: var(--erp-navy);
  background: var(--erp-surface-soft);
}

:is(.tabs,.permission-tabs,.approvals-workspace-tabs) {
  gap: 6px;
  scrollbar-width: thin;
}
:is(.tab,.permission-tab,.approvals-workspace-tab) {
  border-color: var(--erp-line);
  border-radius: 8px;
  color: #62777c;
  background: #fff;
}
:is(.tab,.permission-tab,.approvals-workspace-tab):hover {
  border-color: #a8c9bf;
  color: var(--erp-navy);
  background: #f5faf8;
}
:is(.tab,.permission-tab,.approvals-workspace-tab).active,
.approvals-workspace-tab[aria-selected="true"] {
  border-color: var(--erp-navy);
  color: #fff;
  background: linear-gradient(135deg, var(--erp-navy), #36539b);
  box-shadow: 0 5px 12px rgba(38,58,120,.16);
}

:is(.table-wrap,.workspace-table-wrap,.sales-list,.wrap) {
  border-radius: 10px;
  scrollbar-width: thin;
}
:is(.table,.register,.workspace-table-wrap table,.sales-list table) {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
}
:is(.table,.register,.workspace-table-wrap table,.sales-list table) th {
  color: #60777b;
  background: #eef5f2;
  font-weight: 800;
  letter-spacing: .055em;
}
:is(.table,.register,.workspace-table-wrap table,.sales-list table) td {
  border-bottom-color: #e6eeeb;
  color: #4d666b;
}
:is(.table,.register,.workspace-table-wrap table,.sales-list table) tbody tr:hover td {
  background: #f7fbfa;
}

:is(.chip,.status,.badge) {
  border-radius: 999px;
  font-weight: 800;
}
:is(.message,.msg,.form-note) {
  border-radius: 8px;
  line-height: 1.45;
}
:is(.message,.msg,.form-note).error {
  color: var(--erp-danger);
}

.app-bar,.topbar {
  background: linear-gradient(100deg, var(--erp-navy-deep), var(--erp-navy) 72%, #38549c);
  box-shadow: 0 5px 20px rgba(38,58,120,.2);
}
.app-sidebar { border-color: #dfe8e6; background: rgba(248,251,250,.96); }
.app-nav-link { border: 1px solid transparent; }
.app-nav-link:hover { border-color: #e0ebe7; }
.app-nav-link.active {
  border-color: rgba(67,181,54,.32);
  background: linear-gradient(135deg, #49c03c, var(--erp-green));
}

@media (max-width: 760px) {
  :is(.card,.panel,.workspace-card,.form-card,.sales-card) { border-radius: 11px; }
  :is(.page-heading,.head,.doc-head,.governance-head) h1 { font-size: clamp(1.55rem,8vw,2rem); }
  :is(.tabs,.permission-tabs,.approvals-workspace-tabs) { overflow-x: auto; }
  :is(.table-wrap,.workspace-table-wrap,.sales-list,.wrap) { overflow-x: auto; }
}

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