/* CaseZero / Sleek UI 1.0
   System-wide, presentation-only design layer. No authorization/execution changes.
   Explicitly scoped to standard contrast so high/maximum user choices remain authoritative.
   The reference is a visual direction, not a source of borrowed assets or exact UI markup.
*/
html[data-contrast="standard"] {
  --cz-sleek-page: #f7f9fc;
  --cz-sleek-white: #ffffff;
  --cz-sleek-ink: #192b42;
  --cz-sleek-muted: #52647a;
  --cz-sleek-line: #e5eaf1;
  --cz-sleek-accent: #245bc2;
  --cz-sleek-pale: #eef4ff;
  --cz-sleek-radius: 12px;
  --cz-sleek-shadow: 0 1px 2px rgba(16,39,69,.035),0 6px 23px rgba(16,39,69,.025);
  --bg: var(--cz-sleek-page);
  --panel: var(--cz-sleek-white);
  --panel2: #f8fafc;
  --panel3: #f1f5fa;
  --text: var(--cz-sleek-ink);
  --muted: var(--cz-sleek-muted);
  --border: var(--cz-sleek-line);
  --accent: var(--cz-sleek-accent);
  --blue: var(--cz-sleek-accent);
  --cz-setup-accent: var(--cz-sleek-accent);
  --cz-setup-border: var(--cz-sleek-line);
  --cz-setup-soft: #f8fafc;
  --cz-setup-text: var(--cz-sleek-ink);
  --cz-setup-muted: var(--cz-sleek-muted);
}
html[data-contrast="standard"] body,
html[data-contrast="standard"] .app-shell,
html[data-contrast="standard"] .main {
  background: var(--cz-sleek-page) !important;
  color: var(--cz-sleek-ink) !important;
}
/* Slim, calm, legible navigation in the same visual language as the reference. */
html[data-contrast="standard"] .app-shell:not(.nav-collapsed) {grid-template-columns:216px minmax(0,1fr) !important}
html[data-contrast="standard"] .sidebar {
  background:#fff !important;
  border-right:1px solid var(--cz-sleek-line) !important;
  box-shadow:none !important;
  padding:19px 11px 15px !important;
  scrollbar-color:#d5dce8 transparent;
}
html[data-contrast="standard"] .sidebar-brand {border-bottom:1px solid var(--cz-sleek-line) !important;margin-bottom:10px !important;padding-bottom:16px !important}
html[data-contrast="standard"] .sidebar .brand-logo-full {max-width:128px;max-height:53px;object-fit:contain}
html[data-contrast="standard"] .sidebar .nav-group {
  color:#748197 !important;font-size:10px !important;font-weight:750 !important;
  letter-spacing:.1em !important;padding-left:11px !important;margin-top:15px !important;
}
html[data-contrast="standard"] .sidebar .nav-item {
  color:#45546a !important;font-size:12.7px !important;font-weight:570 !important;
  min-height:39px !important;border-radius:9px !important;padding:8px 10px !important;
  box-shadow:none !important;transition:background .12s ease,color .12s ease !important;
}
html[data-contrast="standard"] .sidebar .nav-item>span {
  color:#798aa0 !important;background:transparent !important;
  border-radius:7px !important;width:24px !important;min-width:24px !important;
  height:24px !important;font-size:17px !important;
}
html[data-contrast="standard"] .sidebar .nav-item:hover {
  color:#173855 !important;background:#f1f5fb !important;
}
html[data-contrast="standard"] .sidebar .nav-item.active,
html[data-contrast="standard"] .sidebar .nav-item[aria-current="page"] {
  background:#eaf2ff !important;color:#1550ac !important;
  box-shadow:none !important;font-weight:720 !important;
}
html[data-contrast="standard"] .sidebar .nav-item.active>span {color:#1d63c1 !important;background:#dfeeff !important}
html[data-contrast="standard"] .sidebar .advanced-nav>summary {color:#65768d !important;font-size:12px !important}
html[data-contrast="standard"] .sidebar .sidebar-foot {
  background:#fff !important;border-top:1px solid var(--cz-sleek-line) !important;
  padding-top:12px !important;color:#60748b !important;
}
html[data-contrast="standard"] .sidebar .platform-badge {color:#597189 !important}
html[data-contrast="standard"] .sidebar .platform-badge span {color:inherit !important}
html[data-contrast="standard"] .sidebar #sidebarHelp,
html[data-contrast="standard"] .sidebar #logoutBtn {
  color:#45556d !important;background:#fff !important;border-color:var(--cz-sleek-line) !important;
  box-shadow:none !important;min-height:36px !important;
}
html[data-contrast="standard"] .sidebar-toggle {border:1px solid var(--cz-sleek-line) !important;background:#fff !important;color:#597089 !important;box-shadow:0 1px 4px rgba(16,40,70,.07) !important}
/* Preserve the existing rail-collapse behavior, but make it useful as a clean icon rail. */
html[data-contrast="standard"] .nav-collapsed .sidebar .nav-item>span {background:transparent !important;color:#627991 !important}
html[data-contrast="standard"] .nav-collapsed .sidebar .nav-item.active>span {background:#e7f0ff !important;color:#1754b0 !important}
/* Surface rhythm: flat tables, subtle cards, consistent headings. */
html[data-contrast="standard"] .topbar {
  background:rgba(255,255,255,.985) !important;border-bottom:1px solid var(--cz-sleek-line) !important;
  box-shadow:none !important;padding-top:14px !important;padding-bottom:14px !important;
}
html[data-contrast="standard"] .topbar h1 {font-size:clamp(20px,2vw,25px) !important;letter-spacing:-.035em !important;font-weight:760 !important;color:#152a43 !important}
html[data-contrast="standard"] .topbar .eyebrow {font-size:10px !important;color:#5c7898 !important;letter-spacing:.1em !important}
html[data-contrast="standard"] .page-context {font-size:13px !important;color:#617186 !important}
html[data-contrast="standard"] .content {padding:24px clamp(16px,2vw,32px) 48px !important}
html[data-contrast="standard"] .content :is(h2,h3,h4) {letter-spacing:-.018em}
html[data-contrast="standard"] .card,
html[data-contrast="standard"] .ui-card,
html[data-contrast="standard"] .studio-panel,
html[data-contrast="standard"] .workflow-inspector,
html[data-contrast="standard"] .agent-inspector,
html[data-contrast="standard"] .cz-managed-auto,
html[data-contrast="standard"] .metric,
html[data-contrast="standard"] .emerald-kpi,
html[data-contrast="standard"] .cz-resolution-row,
html[data-contrast="standard"] .cz-exec-row {
  border:1px solid var(--cz-sleek-line) !important;
  border-radius:var(--cz-sleek-radius) !important;
  box-shadow:var(--cz-sleek-shadow) !important;
  background:#fff !important;color:#192b42 !important;
}
html[data-contrast="standard"] .card:hover,html[data-contrast="standard"] .cz-managed-auto:hover {border-color:#cdd9e6 !important}
html[data-contrast="standard"] .emerald-home-hero,
html[data-contrast="standard"] .premium-home-hero,
html[data-contrast="standard"] .onboarding-hero,
html[data-contrast="standard"] .setup-intro,
html[data-contrast="standard"] .cz-res-intro {
  background:#fff !important;color:#192b42 !important;
  box-shadow:var(--cz-sleek-shadow) !important;border:1px solid var(--cz-sleek-line) !important;
  border-radius:15px !important;
}
html[data-contrast="standard"] .next-best,
html[data-contrast="standard"] .next-action-card,
html[data-contrast="standard"] .permission-callout {
  background:#f5f8fe !important;border:1px solid #dee8f6 !important;
  color:#2c4868 !important;
}
/* Inputs/buttons resemble purposeful application controls rather than gradients. */
html[data-contrast="standard"] :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea,.select) {
  border:1px solid #d3dce8 !important;background:#fff !important;color:#24364c !important;
  border-radius:9px !important;box-shadow:0 1px 1px rgba(10,31,57,.02) !important;
}
html[data-contrast="standard"] :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea,.select):hover {border-color:#aebfd4 !important}
html[data-contrast="standard"] :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea,.select):focus-visible,
html[data-contrast="standard"] :is(button,a,[tabindex]):focus-visible {
  outline:2px solid #2463c7 !important;outline-offset:2px !important;
}
html[data-contrast="standard"] input[type="checkbox"],html[data-contrast="standard"] input[type="radio"] {
  accent-color:#245bc2;
}
html[data-contrast="standard"] .btn,
html[data-contrast="standard"] button.btn {font-size:12.5px !important;font-weight:675 !important;min-height:37px !important;padding:8px 13px !important;border-radius:9px !important;box-shadow:none !important}
html[data-contrast="standard"] .btn.primary,
html[data-contrast="standard"] button.btn.primary {
  background:#245bc2 !important;color:#fff !important;border:1px solid #245bc2 !important;
  box-shadow:0 2px 6px rgba(31,88,188,.11) !important;
}
html[data-contrast="standard"] .btn.primary:hover,
html[data-contrast="standard"] button.btn.primary:hover {background:#174da9 !important;border-color:#174da9 !important}
html[data-contrast="standard"] .btn.ghost,
html[data-contrast="standard"] button.btn.ghost {
  color:#3a506b !important;background:#fff !important;border:1px solid #dce3ec !important;
}
html[data-contrast="standard"] .btn.ghost:hover {background:#f5f8fd !important}
html[data-contrast="standard"] .badge {border-radius:999px !important;font-weight:650 !important;font-size:11px !important}
html[data-contrast="standard"] .eyebrow,html[data-contrast="standard"] .small-label {color:#466788 !important;letter-spacing:.09em !important}
html[data-contrast="standard"] .secondary,
html[data-contrast="standard"] :is(.card,.studio-panel,.modal,.drawer) :is(small,.description,.section-head p) {color:#566b83 !important}
html[data-contrast="standard"] .modal,html[data-contrast="standard"] .drawer {
  background:#fff !important;color:#1b2d44 !important;
  box-shadow:0 20px 60px rgba(21,42,71,.18) !important;
  border-radius:15px !important;border:1px solid #e4eaf1 !important;
}
html[data-contrast="standard"] .modal-head,html[data-contrast="standard"] .drawer-head {background:#fff !important;border-bottom:1px solid var(--cz-sleek-line) !important}
html[data-contrast="standard"] .icon-btn {background:#fff !important;color:#5a6b7d !important;border-color:var(--cz-sleek-line) !important;border-radius:9px !important}
/* Dense lists and administrative grids should read like the reference's clean permission table. */
html[data-contrast="standard"] :is(.list-row,.cz-resolution-row,.cz-exec-row,.ob-resource-row,.validation-row,.connection-row,.workspace-member-row) {
  border-color:var(--cz-sleek-line) !important;
}
html[data-contrast="standard"] .workflow-node,
html[data-contrast="standard"] .agent-node {
  background:#fff !important;border-color:#d8e0eb !important;
  border-radius:12px !important;box-shadow:0 3px 9px rgba(22,48,74,.065) !important;
}
html[data-contrast="standard"] .workflow-node.selected,
html[data-contrast="standard"] .agent-node.selected {
  outline:2px solid #2866c7 !important;
}
html[data-contrast="standard"] .workflow-canvas-wrap,
html[data-contrast="standard"] .agent-canvas-wrap {
  background-color:#fbfcff !important;
  background-image:radial-gradient(circle,#e0e6ed .9px,transparent 1px) !important;
  background-size:20px 20px !important;
}
html[data-contrast="standard"] .studio-toolbar {border-color:var(--cz-sleek-line) !important}
/* Permission management uses the same two-panel rail and calm grid. */
html[data-contrast="standard"] #czAccessModal .cz-access-dialog {border:1px solid var(--cz-sleek-line) !important;box-shadow:0 23px 75px rgba(15,35,58,.15) !important;border-radius:16px !important}
html[data-contrast="standard"] #czAccessModal .cz-access-overview {gap:9px !important}
html[data-contrast="standard"] #czAccessModal .cz-access-overview>div {background:#fbfcfe !important;border:1px solid var(--cz-sleek-line) !important;border-radius:10px !important}
html[data-contrast="standard"] #czAccessModal .cz-access-tabs {border-color:var(--cz-sleek-line) !important}
html[data-contrast="standard"] #czAccessModal .cz-access-tabs>.cz-access-tab-active {
  color:#235bb4 !important;background:#eaf2ff !important;border-bottom:2px solid #2463c6 !important;
}
html[data-contrast="standard"] #czAccessModal .cz-access-roster,
html[data-contrast="standard"] #czAccessModal .cz-access-editor {
  border:1px solid var(--cz-sleek-line) !important;border-radius:12px !important;box-shadow:none !important;
}
html[data-contrast="standard"] #czAccessModal .cz-member-select {border-radius:8px !important}
html[data-contrast="standard"] #czAccessModal .cz-member-selected {background:#edf4ff !important;border-color:#d2e2fa !important}
html[data-contrast="standard"] #czAccessModal .cz-role-toggle {
  border:1px solid #e3e9f0 !important;background:#fff !important;border-radius:9px !important;
  padding:10px 12px !important;justify-content:flex-start !important;
}
html[data-contrast="standard"] #czAccessModal .cz-role-toggle:has(input:checked) {
  border-color:#bed2f6 !important;background:#f0f6ff !important;
}
html[data-contrast="standard"] #czAccessModal .cz-permission-group {border-color:#e2e8ef !important;border-radius:10px !important}
html[data-contrast="standard"] #czAccessModal .cz-permission-group>summary {background:#f8fafc !important;padding:12px 15px !important}
html[data-contrast="standard"] #czAccessModal .cz-permission-item {background:#fff !important;border-color:#edf0f5 !important}
html[data-contrast="standard"] #czAccessModal .cz-permission-item:hover {background:#f7faff !important}
html[data-contrast="standard"] #czAccessModal .cz-permission-item:nth-child(even) {background:#fcfdff !important}
html[data-contrast="standard"] #czAccessModal .cz-permission-item select {font-weight:580 !important}
html[data-contrast="standard"] #czAccessModal .cz-effective-access {border-color:var(--cz-sleek-line) !important}
/* Avoid unworkable micro typography and preserve long technical content. */
html[data-contrast="standard"] :is(.studio-panel,.workflow-inspector,.agent-inspector) :is(p,label,small) {line-height:1.5 !important}
html[data-contrast="standard"] .workflow-inspector :is(small,.description,.inspector-help span) {font-size:11.5px !important}
html[data-contrast="standard"] :is(.modal,.drawer,.workflow-inspector,.agent-inspector) :is(pre,code) {max-width:100%;overflow-wrap:anywhere}
html[data-contrast="standard"] :is(.modal,.drawer) pre {overflow:auto;white-space:pre-wrap}
/* Responsive: the existing collapsible navigation and editor stay functional. */
@media (max-width: 900px) {
  html[data-contrast="standard"] .app-shell:not(.nav-collapsed) {grid-template-columns: minmax(0,1fr) !important}
  html[data-contrast="standard"] .content {padding:17px 14px 34px !important}
  html[data-contrast="standard"] #czAccessModal .cz-access-people-layout {grid-template-columns:minmax(0,1fr) !important}
}
@media (max-width: 570px) {
  html[data-contrast="standard"] .topbar {padding:12px !important}
  html[data-contrast="standard"] .topbar h1 {font-size:20px !important}
  html[data-contrast="standard"] .btn {font-size:12px !important}
  html[data-contrast="standard"] #czAccessModal .cz-permission-item {grid-template-columns:minmax(0,1fr) minmax(106px,140px) !important}
}
@media (prefers-reduced-motion:reduce) {
  html[data-contrast="standard"] :is(.nav-item,.btn,.card) {transition:none !important}
}
/* Old theme used :is(.nav-item,.nav-item span) with extra specificity.
   Override both targets so inactive links stay readable against white navigation. */
html[data-contrast="standard"] .sidebar :is(.nav-item,.nav-item span) {color:#44566c !important}
html[data-contrast="standard"] .sidebar .nav-item:hover,
html[data-contrast="standard"] .sidebar .nav-item:hover span {color:#174f99 !important}
html[data-contrast="standard"] .sidebar .nav-item.active,
html[data-contrast="standard"] .sidebar .nav-item.active span,
html[data-contrast="standard"] .sidebar .nav-item[aria-current="page"],
html[data-contrast="standard"] .sidebar .nav-item[aria-current="page"] span {color:#1550ac !important}
html[data-contrast="standard"] .sidebar .nav-group {color:#6e8096 !important}