@import url("sysimple-typography.css?v=20260927");
@import url("sysimple-surfaces.css?v=20260920");
@import url("sysimple-actions.css?v=20260910-global");

:root{
  --adm-font:var(--sys-ui-font);

  /* fallback theme = Sysimple */
  --adm-bg:#0b1830;
  --adm-bg-2:#0f2244;
  --adm-surface:#12284d;
  --adm-surface-2:#173257;
  --adm-panel:#102344;
  --adm-panel-2:#142b52;
  --adm-border:#284a79;
  --adm-border-soft:#1f3d66;
  --adm-text:#ebf4ff;
  --adm-text-soft:#9eb4d0;
  --adm-text-dim:#7189aa;
  --adm-primary:#158bff;
  --adm-primary-2:#0f6fda;
  --adm-primary-soft:rgba(21,139,255,.14);
  --adm-success:#2fb171;
  --adm-warning:#e0a54d;
  --adm-danger:#e15b6d;
  --adm-shadow:0 18px 44px rgba(0,0,0,.26);
  --adm-shadow-soft:0 10px 24px rgba(0,0,0,.18);
  --adm-radius:12px;
  --adm-header-bg:#ffffff;
  --adm-header-text:#162235;
  --adm-header-muted:#6f819b;
  --adm-header-border:#d9e3ef;
  --adm-input-bg:#0f2137;
}

html,body{font-family:var(--adm-font);}

body[data-theme="sysimple"]{
  --adm-bg:#0b1830;
  --adm-bg-2:#0f2244;
  --adm-surface:#12284d;
  --adm-surface-2:#173257;
  --adm-panel:#102344;
  --adm-panel-2:#142b52;
  --adm-border:#284a79;
  --adm-border-soft:#1f3d66;
  --adm-text:#ebf4ff;
  --adm-text-soft:#9eb4d0;
  --adm-text-dim:#7189aa;
  --adm-primary:#158bff;
  --adm-primary-2:#0f6fda;
  --adm-primary-soft:rgba(21,139,255,.14);
  --adm-success:#2fb171;
  --adm-warning:#e0a54d;
  --adm-danger:#e15b6d;
  --adm-shadow:0 18px 44px rgba(0,0,0,.26);
  --adm-shadow-soft:0 10px 24px rgba(0,0,0,.18);
  --adm-header-bg:#ffffff;
  --adm-header-text:#162235;
  --adm-header-muted:#6f819b;
  --adm-header-border:#d9e3ef;
  --adm-input-bg:#0f2137;
  background:
    radial-gradient(circle at top right, rgba(21,139,255,.12), transparent 22%),
    linear-gradient(180deg,#081423 0%, #0b1830 100%);
  color:var(--adm-text);
}

body[data-theme="vscode"],
body[data-theme="dark"]{
  --adm-bg:#1e1e1e;
  --adm-bg-2:#252526;
  --adm-surface:#252526;
  --adm-surface-2:#2d2d30;
  --adm-panel:#252526;
  --adm-panel-2:#2d2d30;
  --adm-border:#3c3c3c;
  --adm-border-soft:#333333;
  --adm-text:#d4d4d4;
  --adm-text-soft:#a8b0ba;
  --adm-text-dim:#808892;
  --adm-primary:#0e639c;
  --adm-primary-2:#1177bb;
  --adm-primary-soft:rgba(14,99,156,.16);
  --adm-success:#89ca78;
  --adm-warning:#d7ba7d;
  --adm-danger:#f48771;
  --adm-shadow:0 0 0 1px rgba(60,60,60,.9);
  --adm-shadow-soft:0 0 0 1px rgba(60,60,60,.8);
  --adm-header-bg:#252526;
  --adm-header-text:#d4d4d4;
  --adm-header-muted:#a8b0ba;
  --adm-header-border:#3c3c3c;
  --adm-input-bg:#1e1e1e;
  background:#1e1e1e;
  color:var(--adm-text);
}

body[data-theme="light"]{
  --adm-bg:#f3f5f8;
  --adm-bg-2:#ffffff;
  --adm-surface:#ffffff;
  --adm-surface-2:#f8fafc;
  --adm-panel:#ffffff;
  --adm-panel-2:#f8fafc;
  --adm-border:#d9e0e8;
  --adm-border-soft:#e7edf3;
  --adm-text:#162235;
  --adm-text-soft:#73849a;
  --adm-text-dim:#8a99ac;
  --adm-primary:#2563eb;
  --adm-primary-2:#1d4ed8;
  --adm-primary-soft:#eef4ff;
  --adm-success:#16a34a;
  --adm-warning:#d97706;
  --adm-danger:#dc2626;
  --adm-shadow:0 10px 28px rgba(15,23,42,.06);
  --adm-shadow-soft:0 8px 20px rgba(15,23,42,.05);
  --adm-header-bg:#ffffff;
  --adm-header-text:#162235;
  --adm-header-muted:#6f819b;
  --adm-header-border:#d9e3ef;
  --adm-input-bg:#ffffff;
  background:linear-gradient(180deg,#ffffff 0%, #f2f5f9 100%);
  color:var(--adm-text);
}

/* generic central overrides */
body[data-theme] .app-topbar,
body[data-theme] .topbar,
body[data-theme] header.topbar,
body[data-theme] #header.fixed-top{
  background:var(--adm-header-bg)!important;
  color:var(--adm-header-text)!important;
  border-bottom:1px solid var(--adm-header-border)!important;
  box-shadow:none!important;
}
body[data-theme] .topbar-theme-picker,
body[data-theme] .brand-subtitle,
body[data-theme] .topbar-right .meta{
  color:var(--adm-header-muted)!important;
}
body[data-theme] .topbar-theme-select,
body[data-theme] .input-control,
body[data-theme] select,
body[data-theme] input,
body[data-theme] textarea,
body[data-theme] .control,
body[data-theme] .input{
  background:var(--adm-input-bg)!important;
  color:var(--adm-text)!important;
  border:1px solid var(--adm-border)!important;
  box-shadow:none!important;
}
body[data-theme="light"] .topbar-theme-select,
body[data-theme="light"] .input-control,
body[data-theme="light"] select,
body[data-theme="light"] input,
body[data-theme="light"] textarea,
body[data-theme="light"] .control,
body[data-theme="light"] .input{
  background:#ffffff!important;
}
body[data-theme] .panel,
body[data-theme] .card,
body[data-theme] .surface-panel,
body[data-theme] .surface-card,
body[data-theme] .pane,
body[data-theme] .editor-zone,
body[data-theme] .right-zone,
body[data-theme] .sidebar,
body[data-theme] .sidebar-list,
body[data-theme] .response-pane,
body[data-theme] .published-page-card,
body[data-theme] .properties-panel,
body[data-theme] .ocr-panel,
body[data-theme] .ocr-form-card,
body[data-theme] .ocr-map-wrap,
body[data-theme] .ocr-json-wrap,
body[data-theme] .hero-main,
body[data-theme] .hero-side-panel,
body[data-theme] .panel-card{
  background:var(--adm-panel)!important;
  color:var(--adm-text)!important;
  border:1px solid var(--adm-border)!important;
  box-shadow:var(--adm-shadow-soft)!important;
}
body[data-theme="light"] .panel,
body[data-theme="light"] .card,
body[data-theme="light"] .surface-panel,
body[data-theme="light"] .surface-card,
body[data-theme="light"] .pane,
body[data-theme="light"] .editor-zone,
body[data-theme="light"] .right-zone,
body[data-theme="light"] .sidebar,
body[data-theme="light"] .sidebar-list,
body[data-theme="light"] .response-pane,
body[data-theme="light"] .published-page-card,
body[data-theme="light"] .properties-panel,
body[data-theme="light"] .ocr-panel,
body[data-theme="light"] .ocr-form-card,
body[data-theme="light"] .ocr-map-wrap,
body[data-theme="light"] .ocr-json-wrap,
body[data-theme="light"] .hero-main,
body[data-theme="light"] .hero-side-panel,
body[data-theme="light"] .panel-card{
  background:#ffffff!important;
}
body[data-theme] .btn:not(.btn-primary):not(.primary):not(.danger):not(.warn),
body[data-theme] .btn-mini,
body[data-theme] button:not(.btn-primary):not(.primary):not(.danger):not(.warn):not(.main-tab):not(.nav-item){
  background:var(--adm-surface)!important;
  color:var(--adm-text)!important;
  border:1px solid var(--adm-border)!important;
  box-shadow:none!important;
}
body[data-theme] .btn-primary,
body[data-theme] .primary,
body[data-theme] #header .get-started-btn{
  background:var(--adm-primary)!important;
  border:1px solid var(--adm-primary)!important;
  color:#fff!important;
}
body[data-theme] .btn.danger,
body[data-theme] .danger{
  background:color-mix(in srgb, var(--adm-danger) 12%, transparent)!important;
  color:var(--adm-danger)!important;
  border:1px solid color-mix(in srgb, var(--adm-danger) 28%, transparent)!important;
}
body[data-theme] .btn.warn,
body[data-theme] .warn{
  background:color-mix(in srgb, var(--adm-warning) 12%, transparent)!important;
  color:var(--adm-warning)!important;
  border:1px solid color-mix(in srgb, var(--adm-warning) 28%, transparent)!important;
}
body[data-theme] .status-pill,
body[data-theme] .file-tab,
body[data-theme] .right-tab,
body[data-theme] .tool-tab,
body[data-theme] .badge,
body[data-theme] .chip,
body[data-theme] .pill{
  background:var(--adm-surface-2)!important;
  color:var(--adm-text-soft)!important;
  border:1px solid var(--adm-border)!important;
}
body[data-theme] .right-tab.active,
body[data-theme] .tool-tab.active,
body[data-theme] .file-tab.active,
body[data-theme] .nav-item.active{
  background:var(--adm-primary-soft)!important;
  color:var(--adm-primary)!important;
  border-color:color-mix(in srgb, var(--adm-primary) 24%, transparent)!important;
}
body[data-theme] .brand-title,
body[data-theme] .page-title,
body[data-theme] h1, body[data-theme] h2, body[data-theme] h3{
  color:var(--adm-text)!important;
}
body[data-theme] .subtitle,
body[data-theme] .page-subtitle,
body[data-theme] .panel-subtitle,
body[data-theme] p,
body[data-theme] .muted{
  color:var(--adm-text-soft)!important;
}
body[data-theme="vscode"] .brand-logo,
body[data-theme="dark"] .brand-logo{
  background:linear-gradient(135deg,#0e639c,#1177bb)!important;
}
body[data-theme="light"] .brand-logo{
  background:linear-gradient(135deg,#2563eb,#1d4ed8)!important;
  color:#fff!important;
}
body[data-theme="sysimple"] .brand-logo{
  background:linear-gradient(135deg,#158bff,#0f6fda)!important;
  color:#fff!important;
}


/* ===== html/body sync aliases ===== */
html[data-theme="dark"], body[data-theme="dark"]{ color-scheme:dark; }
html[data-theme="light"], body[data-theme="light"]{ color-scheme:light; }
html[data-theme="sysimple"], body[data-theme="sysimple"]{ color-scheme:dark; }

/* ===== DocBuilder explicit themes ===== */
body[data-theme="light"]{
  --bg:#f3f5f8;
  --bg2:#ffffff;
  --panel:#ffffff;
  --panel2:#f8fafc;
  --line:rgba(17,33,61,.12);
  --text:#162235;
  --muted:#73849a;
  --accent:#2563eb;
  --accent2:#16a34a;
  --doc-bg:#f4f7fb;
  --doc-card:#ffffff;
  --doc-text:#162235;
  --doc-muted:#637391;
  --doc-line:#e3eaf2;
  --doc-soft:#f8fbff;
}
body[data-theme="sysimple"]{
  --bg:#0b1830;
  --bg2:#0f2244;
  --panel:#102344;
  --panel2:#142b52;
  --line:rgba(255,255,255,.09);
  --text:#ebf4ff;
  --muted:#9eb4d0;
  --accent:#158bff;
  --accent2:#22c55e;
  --doc-bg:#eaf2fb;
  --doc-card:#ffffff;
  --doc-text:#162235;
  --doc-muted:#637391;
  --doc-line:#dfe8f2;
  --doc-soft:#f7faff;
}
html[data-theme="dark"], body[data-theme="dark"]{
  --bg:#1e1e1e;
  --bg2:#252526;
  --panel:#252526;
  --panel2:#2d2d30;
  --line:#3c3c3c;
  --text:#d4d4d4;
  --muted:#9da5b4;
  --accent:#0e639c;
  --accent2:#3794ff;
}
body[data-theme="dark"] .app,
body[data-theme="sysimple"] .app,
body[data-theme="light"] .app{
  color:var(--text);
}

/* DocBuilder page-specific */
body[data-theme] .shell,
body[data-theme] .left-pane,
body[data-theme] .right-pane,
body[data-theme] .center-root,
body[data-theme] .pages-list,
body[data-theme] .inspector-card{
  color:inherit;
}
body[data-theme="light"] .left-pane,
body[data-theme="light"] .right-pane,
body[data-theme="light"] .center-root{ background:#f4f7fb!important; }
body[data-theme="sysimple"] .left-pane,
body[data-theme="sysimple"] .right-pane,
body[data-theme="sysimple"] .center-root{ background:#0f2244!important; }
body[data-theme="dark"] .left-pane,
body[data-theme="dark"] .right-pane,
body[data-theme="dark"] .center-root{ background:#252526!important; }

body[data-theme="light"] .topbar .brand .title,
body[data-theme="light"] .mode-buttons button,
body[data-theme="light"] .toolbar button,
body[data-theme="light"] .panel-title,
body[data-theme="light"] .field label{ color:#162235!important; }
body[data-theme="light"] .left-pane .panel-card,
body[data-theme="light"] .right-pane .panel-card,
body[data-theme="light"] .canvas-page,
body[data-theme="light"] .doc-card,
body[data-theme="light"] .block-card{
  background:#fff!important; border-color:#e3eaf2!important; color:#162235!important;
}
body[data-theme="light"] .document-frame,
body[data-theme="light"] .page-preview-surface{
  background:#ffffff!important;
  box-shadow:0 10px 28px rgba(15,23,42,.06)!important;
}

/* ===== StudioAdmin / Dashboard explicit body sync ===== */
html[data-theme="sysimple"] body, body[data-theme="sysimple"]{
  background:
    radial-gradient(1200px 700px at 20% 10%, rgba(21,139,255,.18), transparent 55%),
    radial-gradient(900px 600px at 80% 20%, rgba(11,34,68,.16), transparent 55%),
    var(--adm-bg)!important;
}
html[data-theme="dark"] body, body[data-theme="dark"]{
  background:var(--adm-bg)!important;
}

/* ===== FormBuilder explicit aliases ===== */
html[data-theme="dark"] body .topbar,
html[data-theme="dark"] body .schema-bar,
html[data-theme="dark"] body .ocr-panel,
html[data-theme="dark"] body .section,
html[data-theme="dark"] body .pane,
html[data-theme="dark"] body .stage,
body[data-theme="dark"] .topbar,
body[data-theme="dark"] .schema-bar,
body[data-theme="dark"] .ocr-panel,
body[data-theme="dark"] .section,
body[data-theme="dark"] .pane,
body[data-theme="dark"] .stage{
  background:#252526!important;
  border-color:#3c3c3c!important;
  color:#d4d4d4!important;
}
html[data-theme="sysimple"] body .topbar,
html[data-theme="sysimple"] body .schema-bar,
html[data-theme="sysimple"] body .ocr-panel,
html[data-theme="sysimple"] body .section,
html[data-theme="sysimple"] body .pane,
html[data-theme="sysimple"] body .stage,
body[data-theme="sysimple"] .topbar,
body[data-theme="sysimple"] .schema-bar,
body[data-theme="sysimple"] .ocr-panel,
body[data-theme="sysimple"] .section,
body[data-theme="sysimple"] .pane,
body[data-theme="sysimple"] .stage{
  background:#0f1730!important;
  border-color:#1e2f66!important;
  color:#eaf0ff!important;
}

/* ===== Workflow / Dashboard common dark/sysimple polish ===== */
html[data-theme="dark"] body .topbar,
body[data-theme="dark"] .topbar{ background:#252526!important; }
html[data-theme="sysimple"] body .topbar,
body[data-theme="sysimple"] .topbar{ background:#0f1730!important; }
html[data-theme="dark"] body #palette,
html[data-theme="dark"] body #rightbar,
body[data-theme="dark"] #palette,
body[data-theme="dark"] #rightbar{ background:#252526!important; border-color:#3c3c3c!important; }
html[data-theme="sysimple"] body #palette,
html[data-theme="sysimple"] body #rightbar,
body[data-theme="sysimple"] #palette,
body[data-theme="sysimple"] #rightbar{ background:#0f1730!important; border-color:#1e2f66!important; }

/* ===== AI Builder fixes ===== */
body[data-theme] .topbar-right{
  flex-wrap:wrap;
  gap:8px!important;
}
body[data-theme] .topbar-right .btn-mini,
body[data-theme] .topbar-right .select-mini{
  min-height:36px;
}
body[data-theme] .wrap{
  color:inherit;
}
body[data-theme="sysimple"] #sysimpleAIBuilder{ background:#0b1830!important; }
body[data-theme="dark"] #sysimpleAIBuilder{ background:#1e1e1e!important; }
body[data-theme="light"] #sysimpleAIBuilder{ background:#f3f5f8!important; }
body[data-theme="sysimple"] .card,
body[data-theme="sysimple"] .pane,
body[data-theme="sysimple"] #center,
body[data-theme="sysimple"] #stageIA,
body[data-theme="sysimple"] #aiOutput{
  background:#102344!important;
  border-color:#284a79!important;
  color:#ebf4ff!important;
}
body[data-theme="dark"] .card,
body[data-theme="dark"] .pane,
body[data-theme="dark"] #center,
body[data-theme="dark"] #stageIA,
body[data-theme="dark"] #aiOutput{
  background:#252526!important;
  border-color:#3c3c3c!important;
  color:#d4d4d4!important;
}
body[data-theme="light"] .card,
body[data-theme="light"] .pane,
body[data-theme="light"] #center,
body[data-theme="light"] #stageIA,
body[data-theme="light"] #aiOutput{
  background:#ffffff!important;
  border-color:#d9e0e8!important;
  color:#162235!important;
}


/* ===== Sysimple UX Foundation compatibility patch ===== */
:root{--adm-radius:7px;--sys-radius:7px;--radius:10px;--radius-sm:7px;}

/* Shared panel depth, including pages without the studio shell. */
body[data-theme]{--adm-shadow-soft:var(--sys-surface-shadow);}
body[data-theme] :is(.panel,.card,.surface-panel,.surface-card,.pane,.panel-card){border-radius:var(--sys-surface-radius)!important;}

/* The appearance picker follows the active theme, including its native popup.
   Keep these rules shared by Home, the Studio shell and standalone modules. */
body[data-theme] :is(#themePicker,#officialThemeSelect,#ocrThemePicker,.sys-studio-theme-select,[data-admin-theme-select],[data-app-theme-select]) {
  color-scheme:dark !important;
  background:var(--adm-input-bg) !important;
  color:var(--adm-text) !important;
  border-color:var(--adm-border) !important;
}
body[data-theme] select:is(#themePicker,#officialThemeSelect,#ocrThemePicker,.sys-studio-theme-select,[data-admin-theme-select],[data-app-theme-select]) {
  box-sizing:border-box;
  width:112px !important;
  min-width:112px !important;
  max-width:112px !important;
  padding:0 18px 0 8px !important;
  font-size:12px !important;
  flex:0 0 auto;
}
body[data-theme] .sys-studio-header .sys-studio-theme-wrap .sys-studio-appearance-label {
  display:none !important;
}
body[data-theme="light"] :is(#themePicker,#officialThemeSelect,#ocrThemePicker,.sys-studio-theme-select,[data-admin-theme-select],[data-app-theme-select]) {
  color-scheme:light !important;
}
body[data-theme] :is(#themePicker,#officialThemeSelect,#ocrThemePicker,.sys-studio-theme-select,[data-admin-theme-select],[data-app-theme-select]) option {
  background:var(--adm-surface) !important;
  color:var(--adm-text) !important;
}
body[data-theme] :is(#themePicker,#officialThemeSelect,#ocrThemePicker,.sys-studio-theme-select,[data-admin-theme-select],[data-app-theme-select]):focus-visible {
  outline:2px solid var(--adm-primary);
  outline-offset:2px;
}