/* Design tokens matched to the approved mockup's "SAP Fiori Horizon" palette. */
:root {
  --proc-brand: #0070F2;
  --proc-brand-hover: #0064D9;
  --proc-brand-light: #EBF5FF;
  --proc-success: #188918;
  --proc-success-bg: #F1FAF1;
  --proc-warning: #E9730C;
  --proc-warning-bg: #FEF7F1;
  --proc-danger: #B00;
  --proc-danger-bg: #FFEBEB;
  --proc-page-bg: #F3F4F5;
  --proc-surface: #FFFFFF;
  --proc-border: #E5E5E5;
  --proc-border-dark: #C2C2C2;
  --proc-text: #1C2228;
  --proc-text-secondary: #556B82;
  --proc-text-muted: #89919A;
  --proc-radius: 4px;
  --proc-radius-lg: 8px;
  --proc-shadow-sm: 0 1px 3px rgba(0,0,0,.10);
  --proc-shadow-md: 0 4px 12px rgba(0,0,0,.12);
}

html, body { height: 100%; background: var(--proc-page-bg); }

/* ── Shell header ── */
.procShellHeader { background: #354A5E; }
.procShellLogo { color: #fff; font-weight: 700; }
.procShellLogo .procShellLogoAccent { color: #8FBFFF; font-weight: 300; }
.procShellNavItem { color: rgba(255,255,255,.8); cursor: pointer; padding: 0 4px; }
.procShellNavItem:hover { color: #fff; }
.procShellAvatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--proc-brand); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}

/* ── Sidebar ── */
.procSidebar {
  background: var(--proc-surface);
  border-right: 1px solid var(--proc-border);
  min-width: 220px; max-width: 220px;
}
.procSidebarSection {
  font-size: 11px; font-weight: 700; color: var(--proc-text-muted);
  text-transform: uppercase; letter-spacing: .8px;
  padding: 12px 16px 4px;
}
.procSidebarItem {
  padding: 9px 16px; cursor: pointer;
  border-left: 3px solid transparent;
  color: var(--proc-text-secondary);
}
.procSidebarItem:hover { background: var(--proc-brand-light); }
.procSidebarItemActive {
  background: var(--proc-brand-light);
  border-left: 3px solid var(--proc-brand);
}
.procSidebarItemActive .procSidebarItemText { color: var(--proc-brand); font-weight: 600; }
.procSidebarBadge {
  background: var(--proc-danger); color: #fff; font-size: 10px; font-weight: 700;
  border-radius: 10px; padding: 1px 6px; min-width: 18px; text-align: center;
}

/* ── Content area ── */
.procContent { padding: 20px 24px; }
.procPageSubtitle { color: var(--proc-text-secondary); }

/* ── KPI cards ── */
.procKpiCard {
  background: var(--proc-surface);
  border: 1px solid var(--proc-border);
  border-radius: var(--proc-radius-lg);
  padding: 16px 18px;
  box-shadow: var(--proc-shadow-sm);
  min-width: 10rem;
}
.procKpiLabel {
  font-size: 12px; color: var(--proc-text-muted);
  text-transform: uppercase; letter-spacing: .5px; font-weight: 600;
}

/* ── AI panel ── */
.procAiPanel {
  background: linear-gradient(135deg, #F0F7FF 0%, #EDF3FF 100%);
  border: 1px solid #BDD5FF;
  border-radius: var(--proc-radius-lg);
  padding: 16px 18px;
}
.procAiChip {
  background: var(--proc-brand); color: #fff; font-size: 10.5px; font-weight: 700;
  padding: 2px 8px; border-radius: 10px; letter-spacing: .5px; text-transform: uppercase;
}
.procAiFinding {
  background: var(--proc-surface); border-radius: var(--proc-radius);
  border-left: 3px solid var(--proc-brand); padding: 10px 14px;
}
.procAiFindingCritical { border-left-color: var(--proc-danger); }

/* ── Table polish ── */
.procTableWrap {
  background: var(--proc-surface);
  border: 1px solid var(--proc-border);
  border-radius: var(--proc-radius-lg);
  box-shadow: var(--proc-shadow-sm);
  overflow: hidden;
}
.procMutedText { color: var(--proc-text-muted); font-size: 0.8rem; }
.procRowCritical { background: #FFF5F5; }
.procRowWarning { background: #FFF9F0; }
.procProgressTrack { height: 6px; border-radius: 3px; background: var(--proc-border); overflow: hidden; width: 3.5rem; }
.procProgressFill { height: 100%; border-radius: 3px; }
.procProgressSuccess { background: var(--proc-success); }
.procProgressWarning { background: var(--proc-warning); }
.procProgressDanger { background: var(--proc-danger); }
.procTrendUp { color: var(--proc-success); }
.procTrendDown { color: var(--proc-danger); }

/* ── Login (unchanged from before) ── */
.procLoginPage { height: 100%; }
.procLoginBox { height: 100%; padding: 1rem; box-sizing: border-box; }
.procLoginCard { padding: 2rem; background: var(--proc-surface); border-radius: var(--proc-radius-lg); box-shadow: var(--proc-shadow-md); }
.procLoginIcon { color: var(--proc-brand); align-self: center; }
.procLoginSubtitle { color: var(--proc-text-secondary); }

/* ── Placeholder pages ── */
.procPlaceholder { text-align: center; padding: 4rem 1rem; color: var(--proc-text-muted); }