/* ============================================================
 * PolicyOS Theme Tokens
 * Path: server/static/policyos_theme.css
 *
 * Semantic design tokens for the PolicyOS UI. All colors,
 * typography, spacing, and component values are defined as
 * CSS custom properties on :root so every HTML page and
 * every inject.js module can reference them globally.
 *
 * Usage:
 *   background: var(--pos-bg-card);
 *   color:      var(--pos-text-primary);
 *   font-family: var(--pos-font-sans);
 *
 * Philosophy: names describe WHAT a value is used for,
 * not what the raw value is. This lets designers tweak
 * the palette without renaming tokens throughout the app.
 *
 * When adding new tokens, prefix with --pos- to avoid
 * collision with browser extensions or third-party styles.
 * ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=DM+Serif+Display&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ------------------------------------------------------------
   * TYPOGRAPHY — fonts (v7.6.22p warm edition)
   * ------------------------------------------------------------ */
  --pos-font-sans: 'DM Sans', system-ui, -apple-system, sans-serif;
  --pos-font-serif: 'DM Serif Display', Georgia, serif;
  --pos-font-mono: 'JetBrains Mono', 'DM Mono', 'SF Mono', Consolas, monospace;

  /* ------------------------------------------------------------
   * TYPOGRAPHY — sizes (v7.6.20: +2px bump applied globally)
   * Scale pattern:
   *   large  → 24px (data focus)
   *   med+   → 19px (topbar title)
   *   med    → 16px (section titles)
   *   base   → 15px (body)
   *   small  → 13–14px (labels, metadata)
   *   micro  → 11.5–12px (uppercase stat labels, nav section labels)
   * ------------------------------------------------------------ */

  /* Headings + titles */
  --pos-text-topbar-title:      19px;   /* topbar header */
  --pos-text-section-title:     16px;   /* section / panel titles */
  --pos-text-card-title:        15.5px; /* level card title */

  /* Body */
  --pos-text-nav-item:          15.5px; /* sidebar nav items */
  --pos-text-step-name:         15px;   /* step row name */
  --pos-text-body:              15px;   /* general UI text default */
  --pos-text-body-sm:           14.5px; /* general UI text (smaller) */

  /* Labels + metadata */
  --pos-text-label:             14px;   /* uppercase section labels */
  --pos-text-subtitle:          14px;   /* topbar subtitle / helper text */
  --pos-text-sla:               13px;   /* SLA tag (mono) */
  --pos-text-meta:              13px;   /* user role, secondary meta */

  /* Micro / system */
  --pos-text-stat-label:        11.5px;  /* uppercase stat grid labels */
  --pos-text-nav-section:       12px;   /* sidebar nav section headers */
  --pos-text-level-num:         12px;   /* level number label */
  --pos-text-badge:             12px;   /* badge text (revise / tags) */

  /* Data / mono values (DM Mono) */
  --pos-text-stat-value:        24px;   /* big stat numbers */
  --pos-text-ready-badge:       12px;
  --pos-text-sla-timer:         13px;

  /* Buttons */
  --pos-text-btn-primary:       15px;
  --pos-text-btn-action:        13.5px;
  --pos-text-btn-logout:        14px;

  /* Misc */
  --pos-text-logo:              20px;
  --pos-text-logo-sub:          12px;
  --pos-text-empty:             15px;
  --pos-text-warning:           14.5px;

  /* ------------------------------------------------------------
   * TYPOGRAPHY — weights
   * Per spec: 300, 400, 500, 600, 700 on DM Sans / 400, 500 on DM Mono
   * ------------------------------------------------------------ */
  --pos-weight-light:     300;
  --pos-weight-normal:    400;
  --pos-weight-medium:    500;
  --pos-weight-semibold:  600;
  --pos-weight-bold:      700;

  /* ------------------------------------------------------------
   * SURFACES — background colors (v7.6.22p warm edition)
   * ------------------------------------------------------------ */
  --pos-bg-base:        #F7F5F0;  /* outermost canvas, body — warm cream */
  --pos-bg-panel:       #FAF8F4;  /* sidebar, topbar, level lanes */
  --pos-bg-card:        #FFFFFF;  /* cards, approver rows, form inputs */
  --pos-bg-card-hover:  #F5F2EC;  /* card hover state */

  /* ------------------------------------------------------------
   * BORDERS
   * ------------------------------------------------------------ */
  --pos-border:         #E0DCD6;  /* default borders, dividers */
  --pos-border-hover:   #D5CFC7;  /* hover state */

  /* ------------------------------------------------------------
   * TEXT — hierarchy
   * ------------------------------------------------------------ */
  --pos-text-primary:    #2A2A2A;  /* main body text, titles */
  --pos-text-secondary:  #7D7D7D;  /* secondary text, descriptions */
  --pos-text-label-c:    #8A8A8A;  /* uppercase labels, th headers */
  --pos-text-muted:      #B0A89E;  /* hint text, disabled states */

  /* ------------------------------------------------------------
   * ACCENT PALETTE (v7.6.22p warm edition)
   * ------------------------------------------------------------ */
  --pos-accent-blue:         #D4734A;  /* primary accent — terracotta */
  --pos-accent-blue-light:   #D4845A;  /* lighter accent — coral */
  --pos-accent-cyan:         #0F6E56;  /* teal for groups */
  --pos-accent-green:        #2E7D32;  /* success — forest green */
  --pos-accent-amber:        #E65100;  /* warning — burnt orange */
  --pos-accent-red:          #C62828;  /* error/danger — deep red */
  --pos-accent-purple:       #6A1B9A;  /* kept for priority only */  /* purple — kept for priority */

  /* ------------------------------------------------------------
   * SEMANTIC — what the accents mean in this app
   * Use these instead of the raw accent tokens when the color
   * has a specific meaning. Makes intent obvious in code.
   * ------------------------------------------------------------ */
  --pos-role-datapoint:      var(--pos-accent-blue);        /* DP IDs, DP cards */
  --pos-role-datapoint-soft: var(--pos-accent-blue-light);  /* DP IDs in tables */
  --pos-role-group:          var(--pos-accent-cyan);        /* group IDs, group cards */
  --pos-role-standalone:     var(--pos-accent-amber);       /* standalone validation */
  --pos-role-confirmed:      var(--pos-accent-green);       /* confirmed/built logic */
  --pos-role-pending:        var(--pos-accent-red);         /* unbuilt / blocked */

  /* Status semantics */
  --pos-status-pass:         var(--pos-accent-green);       /* passed, approved, active */
  --pos-status-fail:         var(--pos-accent-red);         /* failed, rejected */
  --pos-status-pending:      var(--pos-accent-amber);       /* pending timer, SLA wait */
  --pos-status-info:         var(--pos-accent-blue-light);  /* informational */
  --pos-status-neutral:      var(--pos-accent-purple);      /* normal priority, etc */

  /* ------------------------------------------------------------
   * BADGES + ALERTS — transparent overlays with semantic intent
   * ------------------------------------------------------------ */

  /* Warning alert (amber family — warm orange) */
  --pos-warn-bg:        rgba(230, 81, 0, 0.06);
  --pos-warn-border:    rgba(230, 81, 0, 0.20);
  --pos-warn-text:      #E65100;

  /* Revise badge (red family) */
  --pos-revise-bg:      rgba(198, 40, 40, 0.08);
  --pos-revise-text:    #C62828;
  --pos-revise-border:  rgba(198, 40, 40, 0.20);

  /* Tag badge (terracotta family) */
  --pos-tag-bg:         #FDEAE2;
  --pos-tag-border:     rgba(201, 107, 66, 0.25);
  --pos-tag-text:       #C96B42;

  /* Success badge (green family) */
  --pos-success-bg:     rgba(46, 125, 50, 0.08);
  --pos-success-border: rgba(46, 125, 50, 0.20);
  --pos-success-text:   #2E7D32;

  /* Priority pill (purple family) */
  --pos-priority-bg:    rgba(106, 27, 154, 0.08);
  --pos-priority-border:rgba(106, 27, 154, 0.20);
  --pos-priority-text:  #00695C;

  /* Group accent badge (teal family) */
  --pos-group-bg:       rgba(15, 110, 86, 0.08);
  --pos-group-border:   rgba(15, 110, 86, 0.20);
  --pos-group-text:     #0F6E56;

  /* Client-executed attribution badge */
  --pos-client-bg:      rgba(212, 115, 74, 0.06);
  --pos-client-border:  rgba(212, 115, 74, 0.20);
  --pos-client-text:    #D4734A;

  /* SLA dot */
  --pos-sla-dot:        #E65100;

  /* ------------------------------------------------------------
   * SPACING — component internals (px) and vertical rhythm (rem)
   * ------------------------------------------------------------ */
  --pos-radius-sm:    6px;
  --pos-radius-md:    8px;
  --pos-radius-lg:    10px;
  --pos-radius-xl:    12px;
  --pos-radius-2xl:   16px;
  --pos-radius-pill:  9999px;

  /* ------------------------------------------------------------
   * EFFECTS
   * ------------------------------------------------------------ */
  --pos-shadow-card:       0 1px 4px rgba(0, 0, 0, 0.04);
  --pos-shadow-modal:      0 8px 32px rgba(0, 0, 0, 0.12);
  --pos-focus-ring-blue:   0 0 0 3px rgba(212, 115, 74, 0.12);

  /* ------------------------------------------------------------
   * TRANSITIONS
   * ------------------------------------------------------------ */
  --pos-transition-fast:   0.15s ease;
  --pos-transition-base:   0.2s ease;
  --pos-transition-slow:   0.3s ease;
}

/* ============================================================
 * BASE SCROLLBAR STYLING
 * Applied globally to match the dark theme
 * ============================================================ */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #F0EDE8;
}
::-webkit-scrollbar-thumb {
  background: #D5CFC7;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #C5BFB7;
}

/* ============================================================
 * SHARED UTILITY CLASSES
 * Optional — can be used by any view that wants them.
 * Not required for the variables to work.
 * ============================================================ */

.pos-mono {
  font-family: var(--pos-font-mono);
}

.pos-label-upper {
  font-size: var(--pos-text-stat-label);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--pos-text-label-c);
  font-family: var(--pos-font-mono);
  font-weight: var(--pos-weight-medium);
}

.pos-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: var(--pos-radius-sm);
  font-size: var(--pos-text-badge);
  font-family: var(--pos-font-mono);
  font-weight: var(--pos-weight-medium);
  letter-spacing: 0.2px;
}

.pos-badge-pass {
  background: var(--pos-success-bg);
  color: var(--pos-success-text);
  border: 1px solid var(--pos-success-border);
}

.pos-badge-fail {
  background: var(--pos-revise-bg);
  color: var(--pos-revise-text);
  border: 1px solid var(--pos-revise-border);
}

.pos-badge-pending {
  background: var(--pos-warn-bg);
  color: var(--pos-warn-text);
  border: 1px solid var(--pos-warn-border);
}

.pos-badge-tag {
  background: var(--pos-tag-bg);
  color: var(--pos-tag-text);
  border: 1px solid var(--pos-tag-border);
}

.pos-badge-group {
  background: var(--pos-group-bg);
  color: var(--pos-group-text);
  border: 1px solid var(--pos-group-border);
}

.pos-badge-priority {
  background: var(--pos-priority-bg);
  color: var(--pos-priority-text);
  border: 1px solid var(--pos-priority-border);
}

.pos-badge-client {
  background: var(--pos-client-bg);
  color: var(--pos-client-text);
  border: 1px solid var(--pos-client-border);
}

.pos-sla-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pos-sla-dot);
  vertical-align: 1px;
  margin-right: 6px;
}

/* ============================================================
 * GLOBAL FONT SIZE OVERRIDES
 *
 * Proportional bump at the small end — tiny labels get more
 * growth since they're hardest to read; larger elements stay
 * close to original. Targets classes already defined inline
 * in policyos.html; this stylesheet must be linked AFTER the
 * inline <style> block for these rules to win.
 *
 * Size scale (old → new, after second +2 bump):
 *   9.5px  → 11px      (uppercase stat labels — UNCHANGED, still in :root)
 *   10px   → 12px      (badges, ch-badge)
 *   10.5px → 12.5px    (light secondary)
 *   11px   → 13px      (SLA, sidebar-foot, btn-logout, table headers)
 *   11.5px → 13.5px    (small badges, micro labels)
 *   12px   → 14px      (form labels, topbar subtitle, hint cells)
 *   12.5px → 14.5px    (body labels, secondary, badges)
 *   13px   → 15px      (general body, mono cells)
 *   13.5px → 15.5px    (nav items, tab, phase-tab, btn)
 *   14px   → 16px      (publish list)
 *   14.5px → 16.5px    (body text, toast, empty, table cells, banner, modal h4)
 *   15px   → 17px      (large nav items)
 *   15.5px → 17.5px    (approver-name, group-hdr, level-title, group name)
 *   17px   → 19px      (modal h3)
 *   18px   → 20px      (topbar title, panel h2, section title)
 *   19px   → 21px      (sidebar logo)
 *   22px   → 24px      (result num)
 *   24px   → 26px      (stat value — biggest data focus)
 *   30px   → 32px      (login title h1)
 *
 *
 * Headings scale up slightly for visual hierarchy preservation.
 * ============================================================ */

/* --- Base body — affects every element that doesn't override --- */
body {
  font-size: 16.5px;
}

/* --- Login --- */
.login-title h1           { font-size: 32px; }
.login-title small        { font-size: 12px; }
.login-title p            { font-size: 15.5px; }
.form-group label         { font-size: 14.5px; }
.form-group input,
.form-group select,
.form-group textarea      { font-size: 16.5px; }
.btn-primary              { font-size: 17.5px; }
.err-box,
.ok-box                   { font-size: 15.5px; }

/* --- Sidebar --- */
.sidebar-brand h2         { font-size: 21px; }
.sidebar-brand small      { font-size: 12px; }
.nav-btn                  { font-size: 17px; }
.nav-sep                  { font-size: 12.5px; }
.sidebar-foot             { font-size: 14.5px; }
.sidebar-foot .name       { font-size: 15px; }
.sidebar-foot .role       { font-size: 13.5px; }
.btn-logout               { font-size: 13.5px; }

/* --- Topbar + content --- */
.topbar h1                { font-size: 20px; }
.topbar .sub              { font-size: 14.5px; }
.section-title            { font-size: 20px; }
.empty                    { font-size: 16.5px; }

/* --- Stat cards --- */
.stat .lbl                { font-size: 13px; }
.stat .val                { font-size: 26px; }
.stat .sub                { font-size: 14.5px; }

/* --- Pills + badges --- */
.pill                     { font-size: 13.5px; }
.ch-badge                 { font-size: 12.5px; }

/* --- Tabs --- */
.tab                      { font-size: 15.5px; }
.phase-tab                { font-size: 15.5px; }

/* --- Tables --- */
th                        { font-size: 13px; }
td                        { font-size: 16.5px; }

/* --- Buttons --- */
.btn-sm                   { font-size: 14.5px; }
.btn-back                 { font-size: 15.5px; }

/* --- Step cards + level lanes --- */
.step-num                 { font-size: 14.5px; }
.level-title              { font-size: 15.5px; }
.approver-name            { font-size: 16.5px; }

/* --- Toast --- */
.toast                    { font-size: 16.5px; }

/* ============================================================
 * STEP3 (VALIDATIONS TAB) — SCOPED OVERRIDES
 *
 * policyos_step3_inject.js defines CSS rules scoped under
 * #pos3Panel and #pos3Modal. These external rules win by virtue
 * of equal specificity + later source order + !important.
 *
 * Covers the 23 CSS-block rules inside the inject file.
 * No JS edit needed for any of these.
 * ============================================================ */

#pos3Panel h2                                 { font-size: 20px !important; }
#pos3Panel .pos3-sub                          { font-size: 16.5px !important; }
#pos3Panel h3                                 { font-size: 17.5px !important; }
#pos3Panel .pos3-badge                        { font-size: 14.5px !important; }
#pos3Panel .pos3-card .num                    { font-size: 26px !important; }
#pos3Panel .pos3-card .lbl                    { font-size: 13.5px !important; }
#pos3Panel .pos3-btn                          { font-size: 15.5px !important; }
#pos3Panel .pos3-btn-sm                       { font-size: 14.5px !important; }
#pos3Panel table.pos3-table                   { font-size: 15.5px !important; }
#pos3Panel .pos3-table th                     { font-size: 13.5px !important; }
#pos3Panel .pos3-table input.cell,
#pos3Panel .pos3-table select.cell            { font-size: 15px !important; }
#pos3Panel .pos3-status                       { font-size: 12.5px !important; }
#pos3Panel .pos3-group-header .name           { font-size: 17.5px !important; }
#pos3Panel .pos3-group-header .input-mode-badge { font-size: 13.5px !important; }
#pos3Panel .pos3-group-members                { font-size: 14.5px !important; }
#pos3Panel .pos3-banner                       { font-size: 16.5px !important; }
#pos3Modal h3                                 { font-size: 19px !important; }
#pos3Modal pre                                { font-size: 14.5px !important; }
#pos3Modal textarea,
#pos3Modal input.modal-input                  { font-size: 15.5px !important; }
#pos3Modal select                             { font-size: 15.5px !important; }
#pos3Modal label                              { font-size: 15px !important; }
#pos3Toast                                    { font-size: 16.5px !important; }
.pos3-multi-action-bar                        { font-size: 16.5px !important; }

/* ============================================================
 * TYPOGRAPHY UTILITY CLASSES (STEP3 SCOPE)
 *
 * Semantic names bound to specific size+weight combos used
 * across inline JS-generated HTML inside the Validations tab.
 * Used by policyos_step3_inject.js to replace inline
 * style="font-size:…" so size lives here and not in the
 * HTML template strings.
 *
 * Naming: .pos3-ts-<role> — "step3 typography-scale <role>"
 * ============================================================ */

/* Table ID cell (DP001, grp_002) — emphasized */
.pos3-ts-cell-id              { font-size: 15px !important; font-weight: 600 !important; }

/* Small hint text inside cells ("Build first", "Handled by …") */
.pos3-ts-cell-hint            { font-size: 14px !important; }

/* Dash placeholder in disabled cells */
.pos3-ts-cell-dash            { font-size: 14px !important; }

/* Group membership badge inline ("3 MEMBERS") */
.pos3-ts-meta-badge           { font-size: 13px !important; padding: 2px 6px; border-radius: 3px; }

/* Inline meta row (field=… · op=… · valid=…) */
.pos3-ts-meta-row             { font-size: 13.5px !important; font-family: var(--pos-font-mono); }

/* Stage label in progress indicator ("Stage 1/3") */
.pos3-ts-stage-label          { font-size: 14.5px !important; font-family: var(--pos-font-mono); }

/* Stage main status text */
.pos3-ts-stage-main           { font-size: 16.5px !important; font-weight: 500 !important; }

/* Progress stage range (0% / 50% / 100%) */
.pos3-ts-stage-range          { font-size: 13.5px !important; }

/* Validation summary line item ("DP001 ✓", "grp_002 ✗") */
.pos3-ts-summary-item         { font-size: 13.5px !important; }

/* Summary icon span */
.pos3-ts-summary-icon         { font-size: 14.5px !important; }

/* Extraction result stat number */
.pos3-ts-result-num           { font-size: 24px !important; font-weight: 500 !important; font-family: var(--pos-font-mono); }

/* Extraction result stat label */
.pos3-ts-result-lbl           { font-size: 13.5px !important; }

/* Card section header inside extraction panel */
.pos3-ts-card-hdr             { font-size: 14.5px !important; font-weight: 500 !important; }

/* Card body text inside extraction panel */
.pos3-ts-card-body            { font-size: 14.5px !important; line-height: 1.8; }

/* Banner / modal inline button (Python Function / ctx.json toggle) */
.pos3-ts-inline-btn           { font-size: 14.5px !important; }

/* Output file meta (format, size, "⬇ Download") */
.pos3-ts-file-meta            { font-size: 14px !important; }

/* Output file download link */
.pos3-ts-file-link            { font-size: 14.5px !important; }

/* Code block inside modal */
.pos3-ts-code-pre             { font-size: 14.5px !important; }

/* Modal section heading ("Return dict", "Output files") */
.pos3-ts-modal-h4             { font-size: 16.5px !important; }

/* Output files list */
.pos3-ts-file-list            { font-size: 15px !important; }

/* Form label in group creation form */
.pos3-ts-form-label           { font-size: 14.5px !important; font-weight: 500 !important; }

/* Form micro label (NEW badge, required asterisk) */
.pos3-ts-form-micro           { font-size: 13px !important; }

/* Form function preview (validate_G_<n>) */
.pos3-ts-form-fn-preview      { font-size: 13.5px !important; }

/* Selected DPs header in group form */
.pos3-ts-group-hdr            { font-size: 15.5px !important; font-weight: 500 !important; }

/* Selected DPs member count */
.pos3-ts-group-count          { font-size: 12.5px !important; font-weight: 600 !important; }

/* Members preview list */
.pos3-ts-members-preview      { font-size: 14.5px !important; }

/* Pass rule choice card label */
.pos3-ts-pass-choice          { font-size: 14.5px !important; }

/* Input mode select within group form */
.pos3-ts-form-select          { font-size: 15.5px !important; }

/* Description textarea */
.pos3-ts-form-textarea        { font-size: 14.5px !important; }

/* GPT prompt hint inside group form */
.pos3-ts-form-hint            { font-size: 14.5px !important; }

/* GPT prompt checklist items */
.pos3-ts-form-hint-items      { font-size: 13.5px !important; line-height: 1.6; }

/* Block-reasons list inside publish modal */
.pos3-ts-publish-list         { font-size: 16px !important; line-height: 1.7; }

/* ============================================================
 * ADMIN PANEL — INLINE STYLE OVERRIDES (v7.6.22p warm edition)
 * Override hardcoded dark colors in policyos.html JS output.
 * Uses !important to beat inline styles.
 * ============================================================ */

/* Body & base */
body{
  font-family:var(--pos-font-sans) !important;
  background:#F7F5F0 !important;
  color:#2A2A2A !important;
  background-image:linear-gradient(#E8E4DE 1px,transparent 1px),linear-gradient(90deg,#E8E4DE 1px,transparent 1px) !important;
  background-size:40px 40px !important;
}
input:focus,select:focus,textarea:focus{
  border-color:#D4734A !important;
  box-shadow:var(--pos-focus-ring-blue) !important;
}

/* Dark backgrounds → warm */
[style*="background:#0B0F1A"],[style*="background:#0b0f1a"]{background:#F7F5F0 !important}
[style*="background:#0E1420"],[style*="background:#0e1420"]{background:#FAF8F4 !important}
[style*="background:#161D2E"],[style*="background:#161d2e"]{background:#FFFFFF !important}
[style*="background:#1E2D4A"],[style*="background:#1e2d4a"]{background:#F0EDE8 !important}
[style*="background:#0c1220"],[style*="background:#0d1525"]{background:#FFFFFF !important}
[style*="background:#141e33"],[style*="background:#1C2540"]{background:#F5F2EC !important}
[style*="background:#374151"]{background:#8A8A8A !important}

/* Dark borders → warm */
[style*="border:1px solid #1a2744"],[style*="border:1px solid #1E2D4A"],[style*="border:1px solid #1e2d4a"]{border-color:#E0DCD6 !important}
[style*="border-color:#1a2744"],[style*="border-color:#1E2D4A"]{border-color:#E0DCD6 !important}
[style*="border-bottom:1px solid #1a2744"]{border-bottom-color:#E0DCD6 !important}
[style*="border:2px solid #10B981"]{border-color:#2E7D32 !important}
[style*="background:#10B98108"]{background:rgba(46,125,50,0.04) !important}

/* Dark text → warm */
[style*="color:#F0F4FF"],[style*="color:#f0f4ff"],[style*="color:#dfe7f5"]{color:#2A2A2A !important}
[style*="color:#8FA3C8"],[style*="color:#8fa3c8"]{color:#7D7D7D !important}
[style*="color:#6B84A8"],[style*="color:#6b84a8"],[style*="color:#506080"]{color:#8A8A8A !important}
[style*="color:#4E6080"],[style*="color:#4e6080"]{color:#B0A89E !important}

/* Blue accent → terracotta */
[style*="color:#3b82f6"],[style*="color:#3B82F6"]{color:#D4734A !important}
[style*="color:#60A5FA"],[style*="color:#60a5fa"]{color:#D4845A !important}
[style*="background:#3b82f615"]{background:rgba(212,115,74,0.08) !important}
[style*="background:#3b82f620"]{background:rgba(212,115,74,0.12) !important}

/* Green */
[style*="color:#10B981"],[style*="color:#10b981"]{color:#2E7D32 !important}
[style*="background:#10B981"],[style*="background:#059669"]{background:#2E7D32 !important}
[style*="background:#10B98118"],[style*="background:#10B98120"]{background:rgba(46,125,50,0.08) !important}
[style*="color:#22c55e"]{color:#2E7D32 !important}

/* Red */
[style*="color:#EF4444"],[style*="color:#ef4444"]{color:#C62828 !important}
[style*="background:#EF4444"],[style*="background:#ef4444"]{background:#C62828 !important}
[style*="background:#7f1d1d"]{background:#FFF5F5 !important;color:#C62828 !important}

/* Amber/warning */
[style*="color:#F59E0B"],[style*="color:#f59e0b"],[style*="color:#eab308"]{color:#E65100 !important}
[style*="color:#FCD34D"],[style*="color:#fcd34d"]{color:#E65100 !important}

/* Purple */
[style*="color:#8B5CF6"],[style*="color:#8b5cf6"],[style*="color:#a855f7"]{color:#00695C !important}
[style*="background:#EEEDFE"]{background:rgba(0,105,92,0.06) !important}
[style*="color:#c084fc"]{color:#D4734A !important}

/* Cyan */
[style*="color:#06B6D4"],[style*="color:#06b6d4"]{color:#0F6E56 !important}
[style*="background:#06b6d420"]{background:rgba(15,110,86,0.08) !important}

/* Link/file colors */
[style*="color:#93c5fd"]{color:#D4734A !important}

/* Serif headings for admin */
[style*="font-weight:800"][style*="font-size:24px"],
[style*="font-weight:800"][style*="font-size:19px"],
[style*="font-weight:700"][style*="font-size:16px"]{
  font-family:var(--pos-font-serif) !important;
  font-weight:400 !important;
  color:#2A2A2A !important;
}

/* Monospace */
[style*="font-family:Courier New"],[style*="font-family:Courier"],.mono{
  font-family:var(--pos-font-mono) !important;
}

/* YOUR TURN banner */
[style*="background:#14532d"]{background:#E8F5E9 !important;border-color:#C8E6C9 !important;color:#2E7D32 !important}

/* ============================================================
 * ADMIN PANEL — CLASS OVERRIDES (v7.6.22p warm edition)
 * Override the <style> block in policyos.html which uses class
 * selectors. These load AFTER the inline block, so they win.
 * !important used as belt-and-suspenders.
 * ============================================================ */

/* Body */
body{
  background:#F7F5F0 !important;
  color:#2A2A2A !important;
  font-family:'DM Sans',system-ui,-apple-system,sans-serif !important;
}

/* Sidebar */
.sidebar{background:#FFFFFF !important;border-right:1px solid #E0DCD6 !important}
.sidebar-brand{padding:24px 20px 20px}
.sidebar-brand h2{color:#2A2A2A !important;font-family:'DM Serif Display',Georgia,serif !important;font-weight:400 !important;letter-spacing:0 !important}
.sidebar-brand h2 span{color:#D4734A !important}
.sidebar-brand small{color:#8A8A8A !important;font-family:'JetBrains Mono','DM Mono',monospace !important}
.nav-btn{color:#7D7D7D !important;font-family:'DM Sans',sans-serif !important}
.nav-btn:hover{background:rgba(212,115,74,0.04) !important;color:#2A2A2A !important}
.nav-btn.active{background:rgba(212,115,74,0.08) !important;border-left-color:#D4734A !important;color:#2A2A2A !important}
.nav-sep{color:#B0A89E !important;font-family:'JetBrains Mono','DM Mono',monospace !important}
.sidebar-foot{border-top:1px solid #E0DCD6 !important}
.sidebar-foot .name{color:#2A2A2A !important}
.sidebar-foot .role{color:#8A8A8A !important}
.btn-logout{border-color:#E0DCD6 !important;color:#8A8A8A !important}
.btn-logout:hover{border-color:#D4734A !important;color:#D4734A !important}

/* Topbar */
.topbar{background:#FFFFFF !important;border-bottom:1px solid #E0DCD6 !important;box-shadow:0 1px 4px rgba(0,0,0,0.04) !important}
.topbar h1{color:#2A2A2A !important;font-family:'DM Serif Display',Georgia,serif !important;font-weight:400 !important}
.topbar .sub{color:#8A8A8A !important}

/* Cards */
.card{background:#FFFFFF !important;border:1px solid #E0DCD6 !important;box-shadow:0 1px 4px rgba(0,0,0,0.04) !important}
.card:hover{border-color:#D5CFC7 !important}

/* Stats */
.stat{background:#FAF8F4 !important;border:1px solid #E0DCD6 !important}
.stat .lbl{color:#8A8A8A !important;font-family:'JetBrains Mono','DM Mono',monospace !important}
.stat .val{font-family:'JetBrains Mono','DM Mono',monospace !important}
.stat .sub{color:#7D7D7D !important}

/* Pills */
.pill{font-family:'JetBrains Mono','DM Mono',monospace !important;border-radius:6px !important}

/* Section title */
.section-title{color:#2A2A2A !important;font-family:'DM Serif Display',Georgia,serif !important;font-weight:400 !important}

/* Empty state */
.empty{color:#B0A89E !important}

/* Tabs */
.tabs{background:#FAF8F4 !important;border:1px solid #E0DCD6 !important}
.tab{color:#8A8A8A !important}
.tab.active{background:#D4734A !important;color:#fff !important}
.tab:hover:not(.active){background:rgba(212,115,74,0.06) !important}

/* Phase tabs */
.phase-rail{background:#FAF8F4 !important;border:1px solid #E0DCD6 !important}
.phase-tab{color:#8A8A8A !important}
.phase-tab.active{background:#D4734A !important;color:#fff !important}
.phase-tab.done{background:rgba(46,125,50,0.08) !important;color:#2E7D32 !important}

/* Table */
th{color:#8A8A8A !important;border-bottom:1px solid #E0DCD6 !important;font-family:'JetBrains Mono','DM Mono',monospace !important}
td{color:#2A2A2A !important;border-bottom:1px solid #E8E4DE !important}
thead{background:#FAF8F4 !important}
tbody tr:hover{background:rgba(212,115,74,0.03) !important}
.tbl-wrap{border:1px solid #E0DCD6 !important}

/* Monospace */
.mono{font-family:'JetBrains Mono','DM Mono',monospace !important}

/* Buttons */
.btn-primary{background:#D4734A !important;color:#fff !important}
.btn-primary:hover{background:#C96B42 !important}
.btn-primary:disabled{background:#B0A89E !important}
.btn-blue{background:#D4734A !important;color:#fff !important}
.btn-blue:hover{background:#C96B42 !important}
.btn-green{background:#2E7D32 !important;color:#fff !important}
.btn-green:hover{background:#1B5E20 !important}
.btn-amber{background:#E65100 !important;color:#fff !important}
.btn-amber:hover{background:#BF360C !important}
.btn-red{background:#C62828 !important;color:#fff !important}
.btn-red:hover{background:#B71C1C !important}
.btn-back{color:#7D7D7D !important;border:1px solid #E0DCD6 !important}
.btn-back:hover{border-color:#D4734A !important;color:#D4734A !important}

/* Login */
.login-wrap{background:#F7F5F0 !important}
.login-box{background:#FFFFFF !important;border:1px solid #E0DCD6 !important;box-shadow:0 4px 24px rgba(0,0,0,0.06) !important}
.login-title h1{color:#2A2A2A !important;font-family:'DM Serif Display',Georgia,serif !important;font-weight:400 !important}
.login-title small{color:#8A8A8A !important;font-family:'JetBrains Mono','DM Mono',monospace !important}
.login-title p{color:#7D7D7D !important}
.form-group label{color:#8A8A8A !important;font-family:'JetBrains Mono','DM Mono',monospace !important}
.form-group input,.form-group select,.form-group textarea{background:#FAF8F4 !important;border:1px solid #E0DCD6 !important;color:#2A2A2A !important}

/* Error/success boxes */
.err-box{background:#FFF5F5 !important;border:1px solid #FFCDD2 !important;color:#C62828 !important}
.ok-box{background:#E8F5E9 !important;border:1px solid #C8E6C9 !important;color:#2E7D32 !important}

/* Toast */
.toast{box-shadow:0 4px 20px rgba(0,0,0,0.15) !important}

/* Step cards */
.step-card {
    background: #dae6ff;
    border: 1px solid #1E2D4A;
    border-radius: 5px;
    padding: 5px;
    margin-bottom: 5px;
    transition: border-color .15s;
    font-size: 13px;
}
.step-card:hover{border-color:#D5CFC7 !important}
.step-num{background:#FDEAE2 !important;color:#C96B42 !important}

/* Level lanes */
.level-lane {
    background: #ffffff !important;
    border: 1px solid #E0DCD6 !important;
    padding: 1px 5px;
    border-radius: 5px;
}
.level-lane:hover{border-color:#D5CFC7 !important}
.level-title{color:#D4734A !important;font-family:'DM Serif Display',Georgia,serif !important}
.level-hdr {
    margin-bottom: 5px;
}
/* Approver rows */
.approver-row{background:#FFFFFF !important;border:1px solid #E0DCD6 !important}
.approver-row:hover{border-color:#D5CFC7 !important}

/* Upload zone */
.upload-zone{border-color:#E0DCD6 !important}
.upload-zone:hover{border-color:#D4734A !important;background:rgba(212,115,74,0.03) !important}
.upload-zone.dragover{border-color:#D4734A !important;background:rgba(212,115,74,0.06) !important}

/* Focus */
input:focus,select:focus,textarea:focus{border-color:#D4734A !important;box-shadow:0 0 0 3px rgba(212,115,74,0.12) !important}

/* Scrollbar */
::-webkit-scrollbar-track{background:#F0EDE8 !important}
::-webkit-scrollbar-thumb{background:#D5CFC7 !important;border-radius:3px}

/* ============================================================
 * PILL FIX — v7.6.22p warm (replaces broken broad selectors)
 * pill() generates: background:{c}1a; color:{c}; border:{c}33
 * Override by matching the TEXT color (exact hex), then remap
 * all three properties to warm palette equivalents.
 * ============================================================ */

/* Blue pills → terracotta (category, approval_mode, priority, status) */
.pill[style*="color:#3b82f6"],
.pill[style*="color:#3B82F6"]{
  background:rgba(212,115,74,0.08) !important;
  color:#C96B42 !important;
  border-color:rgba(201,107,66,0.2) !important;
}

/* Green pills → forest green (published, approved) */
.pill[style*="color:#10B981"],
.pill[style*="color:#10b981"],
.pill[style*="color:#22c55e"]{
  background:rgba(46,125,50,0.08) !important;
  color:#2E7D32 !important;
  border-color:rgba(46,125,50,0.2) !important;
}

/* Red pills → deep red (reject, rejected) */
.pill[style*="color:#ef4444"],
.pill[style*="color:#EF4444"]{
  background:rgba(198,40,40,0.08) !important;
  color:#C62828 !important;
  border-color:rgba(198,40,40,0.2) !important;
}

/* Amber pills → burnt orange (pending, warning) */
.pill[style*="color:#eab308"],
.pill[style*="color:#F59E0B"]{
  background:rgba(230,81,0,0.08) !important;
  color:#E65100 !important;
  border-color:rgba(230,81,0,0.2) !important;
}

/* Purple pills → warm purple (priority, admin) */
.pill[style*="color:#a855f7"],
.pill[style*="color:#8B5CF6"],
.pill[style*="color:#8b5cf6"]{
  background:rgba(0,105,92,0.08) !important;
  color:#00695C !important;
  border-color:rgba(0,105,92,0.2) !important;
}

/* Cyan pills → teal (roles, groups) */
.pill[style*="color:#06b6d4"],
.pill[style*="color:#06B6D4"]{
  background:rgba(15,110,86,0.08) !important;
  color:#0F6E56 !important;
  border-color:rgba(15,110,86,0.2) !important;
}

/* Gray pills → warm gray */
.pill[style*="color:#506080"],
.pill[style*="color:#4E6080"]{
  background:rgba(176,168,158,0.1) !important;
  color:#7D7D7D !important;
  border-color:rgba(176,168,158,0.2) !important;
}

/* ============================================================
 * VALIDATION PANEL + STEP 3 OVERRIDES
 * step3_inject.js, custom_build.js, paste_code.js, sample_output.js
 * All use dark navy inline styles.
 * ============================================================ */

/* Dark backgrounds from JS-generated content */
[style*="background:#05080f"],[style*="background:#0a0f1d"]{background:#F7F5F0 !important}
[style*="background:#0c1220"],[style*="background:#0d1525"],[style*="background:#0E1420"],[style*="background:#0e1420"]{background:#FFFFFF !important}
[style*="background:#141e33"],[style*="background:#161D2E"],[style*="background:#161d2e"]{background:#FFFFFF !important}
[style*="background:#1E2D4A"],[style*="background:#1e2d4a"]{background:#FAF8F4 !important}
[style*="background:#312e81"]{background:rgba(0,105,92,0.08) !important}

/* Solid colored backgrounds for buttons/badges in JS */
[style*="background:#3B82F6"][style*="color:#fff"],
[style*="background:#3b82f6"][style*="color:#fff"]{background:#D4734A !important}
[style*="background:#a855f7"][style*="color:#fff"]{background:#00695C !important}
[style*="background:#eab308"][style*="color:#fff"]{background:#E65100 !important}
[style*="background:#ef4444"][style*="color:#fff"]{background:#C62828 !important}
[style*="background:#22c55e"][style*="color:#fff"]{background:#2E7D32 !important}

/* Dark border patterns from JS */
[style*="border:1px solid #1a2744"]{border-color:#E0DCD6 !important}
[style*="border:1px solid #1E2D4A"],[style*="border:1px solid #1e2d4a"]{border-color:#E0DCD6 !important}
[style*="border:2px dashed #1E2D4A"]{border-color:#E0DCD6 !important}
[style*="border-color:#1a2744"],[style*="border-color:#1E2D4A"]{border-color:#E0DCD6 !important}
[style*="border-bottom:1px solid #1a2744"],[style*="border-bottom:1px solid #1E2D4A"]{border-bottom-color:#E0DCD6 !important}
[style*="border-left:2px solid #3B82F6"]{border-left-color:#D4734A !important}

/* JS text colors */
[style*="color:#F0F4FF"],[style*="color:#f0f4ff"],[style*="color:#dfe7f5"]{color:#2A2A2A !important}
[style*="color:#8FA3C8"],[style*="color:#8fa3c8"]{color:#7D7D7D !important}
[style*="color:#6B84A8"],[style*="color:#6b84a8"],[style*="color:#506080"]{color:#8A8A8A !important}
[style*="color:#4E6080"],[style*="color:#4e6080"]{color:#B0A89E !important}
[style*="color:#3b82f6"],[style*="color:#3B82F6"]{color:#D4734A !important}
[style*="color:#60A5FA"],[style*="color:#60a5fa"]{color:#D4845A !important}
[style*="color:#10B981"],[style*="color:#10b981"]{color:#2E7D32 !important}
[style*="color:#22c55e"]{color:#2E7D32 !important}
[style*="color:#06B6D4"],[style*="color:#06b6d4"]{color:#0F6E56 !important}
[style*="color:#EF4444"],[style*="color:#ef4444"]{color:#C62828 !important}
[style*="color:#eab308"],[style*="color:#F59E0B"]{color:#E65100 !important}
[style*="color:#a855f7"],[style*="color:#8B5CF6"],[style*="color:#8b5cf6"]{color:#00695C !important}
[style*="color:#c084fc"]{color:#D4734A !important}
[style*="color:#FCD34D"],[style*="color:#fcd34d"]{color:#E65100 !important}
[style*="color:#93c5fd"]{color:#D4734A !important}
[style*="color:#fbbf24"]{color:#D4734A !important}
[style*="color:#fca5a5"]{color:#C62828 !important}
[style*="color:#86efac"]{color:#2E7D32 !important}
[style*="color:#c7d2fe"]{color:#00695C !important}
[style*="color:#fde68a"]{color:#C96B42 !important}

/* Transparent background tints from JS pills/badges */
[style*="background:rgba(59,130,246"]{background:rgba(212,115,74,0.08) !important}
[style*="background:rgba(16,185,129"]{background:rgba(46,125,50,0.08) !important}
[style*="background:rgba(239,68,68"]{background:rgba(198,40,40,0.08) !important}
[style*="background:rgba(245,158,11"],[style*="background:rgba(234,179,8"]{background:rgba(230,81,0,0.08) !important}
[style*="background:rgba(139,92,246"],[style*="background:rgba(168,85,247"]{background:rgba(0,105,92,0.08) !important}
[style*="background:rgba(6,182,212"]{background:rgba(15,110,86,0.08) !important}

/* Transparent border tints */
[style*="border:1px solid rgba(59,130,246"],[style*="border-color:rgba(59,130,246"]{border-color:rgba(212,115,74,0.2) !important}
[style*="border:1px solid rgba(16,185,129"],[style*="border-color:rgba(16,185,129"]{border-color:rgba(46,125,50,0.2) !important}
[style*="border:1px solid rgba(239,68,68"],[style*="border-color:rgba(239,68,68"]{border-color:rgba(198,40,40,0.2) !important}
[style*="border:1px solid rgba(245,158,11"],[style*="border:1px solid rgba(234,179,8"]{border-color:rgba(230,81,0,0.2) !important}
[style*="border:1px solid rgba(168,85,247"],[style*="border:1px solid rgba(139,92,246"]{border-color:rgba(0,105,92,0.2) !important}
[style*="border:1px solid rgba(6,182,212"]{border-color:rgba(15,110,86,0.2) !important}

/* Linear gradient step-num → flat warm */
.step-num,[style*="background:linear-gradient(135deg,#1E2D4A"]{
  background:#FDEAE2 !important;
  color:#C96B42 !important;
}

/* ============================================================
 * STEP 3 VALIDATION PANEL — #pos3Panel override (v7.6.22q)
 * step3_inject.js injects: #pos3Panel { background:#0c1220 !important }
 * To beat it we need higher specificity: body #pos3Panel
 * ============================================================ */
body #pos3Panel{
  background:#FFFFFF !important;
  border:1px solid #E0DCD6 !important;
  color:#2A2A2A !important;
  font-family:'DM Sans',system-ui,sans-serif !important;
  box-shadow:0 1px 4px rgba(0,0,0,0.04) !important;
}
body #pos3Panel *{color:inherit}
body #pos3Panel [style*="background:#0c1220"],
body #pos3Panel [style*="background:#0d1525"],
body #pos3Panel [style*="background:#0E1420"],
body #pos3Panel [style*="background:#141e33"],
body #pos3Panel [style*="background:#161D2E"],
body #pos3Panel [style*="background:#1E2D4A"],
body #pos3Panel [style*="background:#05080f"],
body #pos3Panel [style*="background:#0a0f1d"]{
  background:#FFFFFF !important;
  border-color:#E0DCD6 !important;
}
body #pos3Panel [style*="border:1px solid #1a2744"],
body #pos3Panel [style*="border:1px solid #1E2D4A"]{
  border-color:#E0DCD6 !important;
}
body #pos3Panel [style*="color:#dfe7f5"],
body #pos3Panel [style*="color:#F0F4FF"]{color:#2A2A2A !important}
body #pos3Panel [style*="color:#8FA3C8"],[style*="color:#8a9cc0"]{color:#7D7D7D !important}
body #pos3Panel [style*="color:#6B84A8"],[style*="color:#506080"]{color:#8A8A8A !important}
body #pos3Panel [style*="color:#3b82f6"],[style*="color:#3B82F6"]{color:#D4734A !important}
body #pos3Panel [style*="color:#10B981"]{color:#2E7D32 !important}
body #pos3Panel [style*="color:#ef4444"]{color:#C62828 !important}
body #pos3Panel [style*="color:#eab308"]{color:#E65100 !important}
body #pos3Panel [style*="color:#a855f7"]{color:#00695C !important}
body #pos3Panel [style*="color:#06B6D4"]{color:#0F6E56 !important}
body #pos3Panel [style*="color:#c084fc"]{color:#D4734A !important}

/* Step 3 popup modals (custom_build, paste_code, sample_output) */
[style*="background:rgba(0,0,0,.7)"]{background:rgba(0,0,0,0.5) !important}
[style*="background:#0c1220"][style*="border-radius:16px"]{
  background:#FFFFFF !important;
  border-color:#E0DCD6 !important;
  color:#2A2A2A !important;
}

/* ============================================================
 * STEP 3 — COMPREHENSIVE #pos3Panel override (v7.6.22q fix2)
 * Overrides ALL sub-selectors from step3_inject.js
 * ============================================================ */
body #pos3Panel h2{color:#D4734A !important;font-family:'DM Serif Display',Georgia,serif !important;font-weight:400 !important}
body #pos3Panel .pos3-sub{color:#7D7D7D !important}
body #pos3Panel h3{color:#2A2A2A !important;font-family:'DM Serif Display',Georgia,serif !important;font-weight:400 !important}
body #pos3Panel .pos3-badge{background:rgba(212,115,74,0.1) !important;color:#D4734A !important}
body #pos3Panel .pos3-card{background:#FAF8F4 !important;border:1px solid #E0DCD6 !important}
body #pos3Panel .pos3-card .num{color:#2A2A2A !important}
body #pos3Panel .pos3-card .lbl{color:#8A8A8A !important}
body #pos3Panel .pos3-card.green .num{color:#2E7D32 !important}
body #pos3Panel .pos3-card.amber .num{color:#E65100 !important}
body #pos3Panel .pos3-card.red .num{color:#C62828 !important}
body #pos3Panel .pos3-card.blue .num{color:#D4734A !important}
body #pos3Panel .pos3-btn-primary{background:#D4734A !important;color:white !important}
body #pos3Panel .pos3-btn-success{background:#2E7D32 !important;color:white !important}
body #pos3Panel .pos3-btn-warning{background:#E65100 !important;color:white !important}
body #pos3Panel .pos3-btn-danger{background:#C62828 !important;color:white !important}
body #pos3Panel .pos3-btn-ghost{background:rgba(0,0,0,.03) !important;color:#2A2A2A !important;border:1px solid #E0DCD6 !important}
body #pos3Panel table.pos3-table{background:#FFFFFF !important;border:1px solid #E0DCD6 !important}
body #pos3Panel .pos3-table th{background:#FAF8F4 !important;color:#8A8A8A !important;font-family:'JetBrains Mono',monospace !important}
body #pos3Panel .pos3-table td{border-top:1px solid #E8E4DE !important;color:#2A2A2A !important}
body #pos3Panel .pos3-table tbody tr.confirmed{background:rgba(46,125,50,0.04) !important}
body #pos3Panel .pos3-table tbody tr.in-group{background:rgba(0,105,92,0.04) !important}
body #pos3Panel .pos3-table input.cell,body #pos3Panel .pos3-table select.cell{border:1px solid #E0DCD6 !important;background:#FAF8F4 !important;color:#2A2A2A !important}
body #pos3Panel .pos3-status-built{background:rgba(212,115,74,0.1) !important;color:#D4734A !important}
body #pos3Panel .pos3-status-failed{background:rgba(198,40,40,0.1) !important;color:#C62828 !important}
body #pos3Panel .pos3-status-passed{background:rgba(46,125,50,0.1) !important;color:#2E7D32 !important}
body #pos3Panel .pos3-status-pending{background:rgba(176,168,158,0.15) !important;color:#8A8A8A !important}
body #pos3Panel .pos3-status-grouped{background:rgba(0,105,92,0.1) !important;color:#00695C !important}
body #pos3Panel .pos3-group-card{background:rgba(0,105,92,0.04) !important;border:1px solid rgba(0,105,92,0.15) !important}
body #pos3Panel .pos3-group-header .name{color:#00695C !important}
body #pos3Panel .pos3-group-header .input-mode-badge{background:rgba(0,105,92,0.1) !important;color:#00695C !important}
body #pos3Panel .pos3-group-members{color:#7D7D7D !important;background:rgba(0,0,0,.03) !important}
body #pos3Panel .pos3-banner.warn{background:rgba(230,81,0,0.06) !important;border-color:rgba(230,81,0,0.2) !important;color:#E65100 !important}
body #pos3Panel .pos3-banner.info{background:rgba(212,115,74,0.06) !important;border-color:rgba(212,115,74,0.2) !important;color:#D4734A !important}

/* Step 3 popup modals */
body #pos3Modal{background:rgba(0,0,0,0.5) !important}
body #pos3Modal > div{background:#FFFFFF !important;border:1px solid #E0DCD6 !important;color:#2A2A2A !important;box-shadow:0 8px 32px rgba(0,0,0,0.12) !important}
body #pos3Modal [style*="background:#0c1220"]{background:#FFFFFF !important}
body #pos3Modal [style*="background:#141e33"]{background:#FAF8F4 !important}
body #pos3Modal [style*="background:#161D2E"]{background:#FFFFFF !important}
body #pos3Modal [style*="border:1px solid #1a2744"]{border-color:#E0DCD6 !important}
body #pos3Modal [style*="color:#dfe7f5"]{color:#2A2A2A !important}
body #pos3Modal [style*="color:#8a9cc0"],[style*="color:#8FA3C8"]{color:#7D7D7D !important}
body #pos3Modal [style*="color:#3b82f6"]{color:#D4734A !important}
body #pos3Modal input,body #pos3Modal select,body #pos3Modal textarea{background:#FAF8F4 !important;border:1px solid #E0DCD6 !important;color:#2A2A2A !important}

/* ============================================================
 * STEP 3 — NUCLEAR OVERRIDE (v7.6.22q fix4)
 * Uses html body prefix for maximum specificity.
 * Targets inline styles from step3_inject.js renderGroup*
 * ============================================================ */

/* Force ALL descendants in pos3Panel to inherit warm colors */
html body #pos3Panel,
html body #pos3Panel *{
  color:#2A2A2A;
}
div#pos3GroupsArea {
    BORDER: 2px solid #919191;
    PADDING: 0PX 10PX;
    BORDER-RADIUS: 8PX;
    background: #d3f7ff;
}
html body #pos3Panel{
  background:#FFFFFF !important;
  border:1px solid #E0DCD6 !important;
  color:#2A2A2A !important;
  font-family:'DM Sans',system-ui,sans-serif !important;
  box-shadow:0 1px 4px rgba(0,0,0,0.04) !important;
}
div#pos3DpArea {
    BORDER: 2px solid #919191;
    PADDING: 0PX 10PX;
    BORDER-RADIUS: 8PX;
    background: #d3f7ff;
}
/* Group cards */
html body #pos3Panel .pos3-group-card{
  background:rgba(0,105,92,0.04) !important;
  border:1px solid rgba(0,105,92,0.18) !important;
}
html body #pos3Panel .pos3-group-header .name{color:#00695C !important}
html body #pos3Panel .pos3-group-header .input-mode-badge{
  background:rgba(0,105,92,0.1) !important;
  color:#00695C !important;
}

/* Members section - dark overlay fix */
html body #pos3Panel .pos3-group-members{
  color:#7D7D7D !important;
  background:rgba(0,105,92,0.04) !important;
}

/* Blocks workflow row (inline style has purple bg) */
html body #pos3Panel .pos3-ts-meta-row,
html body #pos3Panel [style*="background:rgba(168,85,247"]{
  background:rgba(0,105,92,0.05) !important;
  color:#2A2A2A !important;
}
html body #pos3Panel .pos3-ts-meta-row label,
html body #pos3Panel [style*="color:#8a9cc0"]{
  color:#7D7D7D !important;
}

/* Stat cards */
html body #pos3Panel .pos3-card{
  background:#FAF8F4 !important;
  border:1px solid #E0DCD6 !important;
}
html body #pos3Panel .pos3-card .num{color:#2A2A2A !important}
html body #pos3Panel .pos3-card .lbl{color:#8A8A8A !important}
html body #pos3Panel .pos3-card.green .num{color:#2E7D32 !important}
html body #pos3Panel .pos3-card.amber .num{color:#E65100 !important}
html body #pos3Panel .pos3-card.red .num{color:#C62828 !important}
html body #pos3Panel .pos3-card.blue .num{color:#D4734A !important}

/* Table */
html body #pos3Panel table.pos3-table{background:#FFFFFF !important;border:1px solid #E0DCD6 !important}
html body #pos3Panel .pos3-table th{background:#FAF8F4 !important;color:#8A8A8A !important}
html body #pos3Panel .pos3-table td{border-top:1px solid #E8E4DE !important;color:#2A2A2A !important}
html body #pos3Panel .pos3-table input.cell,
html body #pos3Panel .pos3-table select.cell{
  border:1px solid #E0DCD6 !important;
  background:#FAF8F4 !important;
  color:#2A2A2A !important;
}

/* Buttons */
html body #pos3Panel .pos3-btn-primary{background:#D4734A !important;color:#fff !important}
html body #pos3Panel .pos3-btn-success{background:#2E7D32 !important;color:#fff !important}
html body #pos3Panel .pos3-btn-warning{background:#E65100 !important;color:#fff !important}
html body #pos3Panel .pos3-btn-danger{background:#C62828 !important;color:#fff !important}
html body #pos3Panel .pos3-btn-ghost{background:rgba(0,0,0,.03) !important;color:#2A2A2A !important;border:1px solid #E0DCD6 !important}

/* Headings */
html body #pos3Panel h2{color:#00695C !important;font-family:'DM Serif Display',Georgia,serif !important}
html body #pos3Panel .pos3-sub{color:#7D7D7D !important}
html body #pos3Panel h3{color:#2A2A2A !important}

/* Badge */
html body #pos3Panel .pos3-badge{background:rgba(230,81,0,0.1) !important;color:#E65100 !important}

/* Status badges */
html body #pos3Panel .pos3-status-built{background:rgba(0,105,92,0.1) !important;color:#00695C !important}
html body #pos3Panel .pos3-status-failed{background:rgba(198,40,40,0.1) !important;color:#C62828 !important}
html body #pos3Panel .pos3-status-passed{background:rgba(46,125,50,0.1) !important;color:#2E7D32 !important}
html body #pos3Panel .pos3-status-pending{background:rgba(176,168,158,0.15) !important;color:#8A8A8A !important}
html body #pos3Panel .pos3-status-grouped{background:rgba(0,105,92,0.1) !important;color:#00695C !important}

/* Banners */
html body #pos3Panel .pos3-banner.warn{background:rgba(230,81,0,0.06) !important;border-color:rgba(230,81,0,0.2) !important;color:#E65100 !important}
html body #pos3Panel .pos3-banner.info{background:rgba(0,105,92,0.06) !important;border-color:rgba(0,105,92,0.2) !important;color:#00695C !important}

/* Inline dark backgrounds in JS-generated HTML */
html body #pos3Panel [style*="background:#0a0f1d"],
html body #pos3Panel [style*="background:#0c1220"],
html body #pos3Panel [style*="background:#141e33"],
html body #pos3Panel [style*="background:#0d1525"],
html body #pos3Panel [style*="background:#161D2E"]{
  background:#FFFFFF !important;
  border-color:#E0DCD6 !important;
}
html body #pos3Panel [style*="background:#a855f7"]{background:#00695C !important}
html body #pos3Panel [style*="background:rgba(99,102,241"]{background:rgba(0,105,92,0.06) !important}
html body #pos3Panel [style*="background:rgba(0,0,0,.2)"]{background:rgba(0,0,0,0.03) !important}
html body #pos3Panel [style*="color:#c7d2fe"]{color:#00695C !important}
html body #pos3Panel [style*="color:#d8b4fe"]{color:#00695C !important}
html body #pos3Panel [style*="color:#dfe7f5"]{color:#2A2A2A !important}

/* Modals */
html body #pos3Modal > div{background:#FFFFFF !important;border:1px solid #E0DCD6 !important;color:#2A2A2A !important}
html body #pos3Modal [style*="background:#0c1220"]{background:#FFFFFF !important}
html body #pos3Modal [style*="background:#141e33"]{background:#FAF8F4 !important}
html body #pos3Modal input,html body #pos3Modal select,html body #pos3Modal textarea{background:#FAF8F4 !important;border:1px solid #E0DCD6 !important;color:#2A2A2A !important}

/* ============================================================
 * STEP 4 — APPROVAL MAPPING (.pam-*) warm overrides (v7.6.22v)
 * approval_mapping.js injects these with dark purple/navy colors
 * ============================================================ */
.pam-section{background:rgba(0,105,92,0.04) !important;border:1px solid rgba(0,105,92,0.15) !important}
.pam-title{color:#00695C !important;font-family:'DM Serif Display',Georgia,serif !important;font-weight:400 !important}
.pam-sub{color:#7D7D7D !important}
.pam-badge{background:#FAF8F4 !important;color:#00695C !important;border:1px solid rgba(0,105,92,0.2) !important}
.pam-btn{background:#D4734A !important;color:#fff !important}
.pam-btn:hover{background:#C96B42 !important}
.pam-btn-sm{color:#8A8A8A !important;border:1px dashed #E0DCD6 !important}
.pam-btn-sm:hover{border-color:#D4734A !important;color:#D4734A !important}
.pam-btn-red{color:#C62828 !important;border:1px dashed #C62828 !important}
.pam-level-row{background:#FAF8F4 !important;border:1px solid #E0DCD6 !important}
.pam-level-num{color:#D4734A !important;font-family:'JetBrains Mono',monospace !important}
.pam-level-input{background:#FFFFFF !important;color:#2A2A2A !important;border:1px solid #E0DCD6 !important}
.pam-level-input:focus{border-color:#D4734A !important;box-shadow:0 0 0 3px rgba(212,115,74,0.12) !important}
.pam-user-chip{background:rgba(46,125,50,0.08) !important;color:#2E7D32 !important}
.pam-del-btn{color:#C62828 !important}
.pam-tbl{background:#FFFFFF !important}
.pam-tbl th{background:#FAF8F4 !important;color:#8A8A8A !important;font-family:'JetBrains Mono',monospace !important;border-bottom:1px solid #E0DCD6 !important}
.pam-tbl td{color:#2A2A2A !important;border-bottom:1px solid #E8E4DE !important}
.pam-pill-dp{background:rgba(212,115,74,0.08) !important;color:#D4734A !important}
.pam-pill-grp{background:rgba(0,105,92,0.08) !important;color:#00695C !important;font-family:'JetBrains Mono',monospace !important}
.pam-pill-live{background:rgba(46,125,50,0.08) !important;color:#2E7D32 !important}
.pam-sel-p1{background:rgba(0,105,92,0.06) !important;color:#00695C !important;border-color:rgba(0,105,92,0.2) !important}
.pam-sel-p2{background:rgba(212,115,74,0.06) !important;color:#D4734A !important;border-color:rgba(212,115,74,0.2) !important}
.pam-sel-none{background:rgba(0,0,0,0.02) !important;color:#8A8A8A !important;border-color:#E0DCD6 !important}
.pam-select{background:#FAF8F4 !important;color:#2A2A2A !important;border:1px solid #E0DCD6 !important}
.pam-select:focus{border-color:#D4734A !important}
.pam-select-p2{border-color:rgba(212,115,74,0.3) !important}
.pam-check{accent-color:#00695C !important}
.pam-empty{color:#B0A89E !important}
.pam-toast{background:#2E7D32 !important}
.pam-toast.err{background:#C62828 !important}
.pam-info{color:#8A8A8A !important}
.pam-legend span{color:#7D7D7D !important}
.pam-add-level{background:#D4734A !important;color:#fff !important}

/* ============================================================
 * BUILD LOGIC + PASTE CODE + SAMPLE OUTPUT POPUPS — warm theme
 * (.pcb-* from custom_build.js, paste_code.js, sample_output.js)
 * v7.6.22z
 * ============================================================ */

/* Modal overlay + container */
.pcb-overlay{background:rgba(0,0,0,0.4) !important}
.pcb-modal{background:#FFFFFF !important;border:1px solid #E0DCD6 !important;color:#2A2A2A !important;box-shadow:0 8px 32px rgba(0,0,0,0.12) !important}

/* Title */
.pcb-modal h2{color:#D4734A !important;font-family:'DM Serif Display',Georgia,serif !important;font-weight:400 !important}
.pcb-sub{color:#7D7D7D !important}
.pcb-close{color:#B0A89E !important}
.pcb-close:hover{color:#C62828 !important}

/* Section titles + numbers */
.pcb-section-title{color:#2A2A2A !important;font-family:'DM Serif Display',Georgia,serif !important}
.pcb-section-num{background:rgba(212,115,74,0.08) !important;color:#D4734A !important}

/* Inputs */
.pcb-modal input,.pcb-modal select,.pcb-modal textarea{
  background:#FAF8F4 !important;
  border:1px solid #E0DCD6 !important;
  color:#2A2A2A !important;
}
.pcb-modal input:focus,.pcb-modal select:focus,.pcb-modal textarea:focus{
  border-color:#D4734A !important;
  box-shadow:0 0 0 3px rgba(212,115,74,0.12) !important;
}
.pcb-modal input::placeholder,.pcb-modal textarea::placeholder{color:#B0A89E !important}
.pcb-modal label{color:#8A8A8A !important}

/* Output rows */
.pcb-output-row{border:1px solid #E0DCD6 !important}
.pcb-out-name,.pcb-out-format{background:#FAF8F4 !important;border:1px solid #E0DCD6 !important;color:#2A2A2A !important}
.pcb-add-output{border:1px dashed #E0DCD6 !important;color:#8A8A8A !important}
.pcb-add-output:hover{border-color:#D4734A !important;color:#D4734A !important}

/* File upload zone */
.pcb-file-zone{background:#FAF8F4 !important;border:1px solid #E0DCD6 !important;color:#7D7D7D !important}
.pcb-file-zone:hover{border-color:#00695C !important;color:#00695C !important}
.pcb-file-zone.has-file{background:rgba(0,105,92,0.04) !important;border-color:rgba(0,105,92,0.3) !important;color:#00695C !important}

/* Buttons */
.pcb-btn-build{background:#D4734A !important;color:#fff !important}
.pcb-btn-build:hover{background:#C96B42 !important}
.pcb-btn-build:disabled{background:#B0A89E !important}
.pcb-btn-cancel{background:transparent !important;border:1px solid #E0DCD6 !important;color:#8A8A8A !important}
.pcb-btn-cancel:hover{border-color:#D4734A !important;color:#D4734A !important}

/* Error box */
.pcb-error{background:#FFF5F5 !important;border:1px solid #FFCDD2 !important;color:#C62828 !important}

/* Info box */
.pcb-info{background:#FFF3E0 !important;border:1px solid #FFE0B2 !important;color:#E65100 !important}

/* Section divider */
.pcb-section-divider{border-top:1px dashed #E0DCD6 !important}

/* Spinner */
.pcb-spinner{border-color:#E0DCD6 !important;border-top-color:#D4734A !important}

/* Row layout */
.pcb-row{border-bottom:none !important}

/* Delete button on outputs */
.pcb-output-row .del{color:#C62828 !important}

/* Paste Code + Sample Output popups share similar patterns */
[id*="pos3Modal"]{background:rgba(0,0,0,0.4) !important}
[id*="pos3Modal"] > div{background:#FFFFFF !important;border:1px solid #E0DCD6 !important;color:#2A2A2A !important}


#pos3Panel .pos3-cell-text {
    font-size: 13px  !important;
    color: #000000  !important;
    }
    .pcb-info {

    display: none  !important;
}

[id^="wz2gr"]:nth-child(odd) {
    background: #f5f9ff !important;
    border: 1px solid #c9dcff !important;
}

[id^="wz2gr"]:nth-child(even) {
    background:#dbfffa !important;
    border: 1px solid #ffd9b3 !important;
}

/* Alternate colors for pos3 group cards */

#pos3GroupsArea .pos3-group-card:nth-child(odd) {
    background: #f5f9ff !important;
    border: 1px solid #c9dcff !important;
}

#pos3GroupsArea .pos3-group-card:nth-child(even) {
    background: #fff8f1 !important;
    border: 1px solid #ffd9b3 !important;
}

/* Optional hover effect */
#pos3GroupsArea .pos3-group-card:hover {
    transform: translateY(-1px);
    transition: all .2s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}


div#wz2MembersOverlay > div {
    width: 90% !important;
        max-width: 90% !important;
}

div#wz2MembersOverlay td {
    font-size: 16px !important;
}

div#wz2AiResults span,div#wz2AiResults button {
    font-size: 16px !important;
}

div#wz2AiDpArea td {
    font-size: 15px !important;
}

div#wz2AiDpArea td span  {
    font-size: 15px !important;
}

div#wz2AiDpArea td span {
    font-size: 15px !important;
    width: 300px !important;
    display: inline-block;
    text-align: center !important;
    background: rgb(255 216 125 / 39%) !important;
}

button#pos3DlValFab {
    position: fixed !important;
    right: 10px !important;
}

div#pos3DlValPopup {
    position: fixed !important;
    background: white !important;
}