/* Starruk-huisstijl over Activepieces (proef 09-10-2026) */
:root{--font-sans:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  --foreground:#050e48;--muted-foreground:#5a6086;--accent-foreground:#050e48;--secondary:#050e48;--secondary-foreground:#f4f1e8;
  --border:rgba(5,14,72,.12);--input:rgba(5,14,72,.18);--ring:rgba(5,14,72,.35);--radius:.375rem;
  --primary-100:232 30% 92%;--primary:232 87% 15%;--primary-300:232 87% 10%;--primary-foreground:44 37% 93%;
  --sidebar-background:#f5f5f5;--sidebar-foreground:#050e48;--sidebar-primary:232 87% 15%;--sidebar-accent:rgba(5,14,72,.06);--sidebar-accent-foreground:#050e48;--sidebar-border:rgba(5,14,72,.12);
  --builder-background:#f0f1f4;--builder-background-pattern:rgba(5,14,72,.16);
  --success-500:146 100% 26%;--destructive-500:351 85% 42%;--warning-500:35 83% 28%;
  --chart-1:20 100% 45%;--chart-2:179 80% 27%;--chart-3:232 87% 15%;--chart-4:252 36% 46%;--chart-5:146 100% 26%}
.dark{--background:#070c29;--foreground:#e9e6da;--popover:#0c1236;--muted:#111a44;--muted-foreground:#a8adc6;--secondary:#111a44;--secondary-foreground:#e9e6da;
  --accent:#2b304d;--accent-foreground:#e9e6da;--border:rgba(233,230,218,.13);--input:rgba(233,230,218,.18);--ring:rgba(233,230,218,.35);
  --primary-100:238 36% 25%;--primary:238 36% 41%;--primary-300:238 50% 80%;--primary-foreground:44 30% 89%;
  --sidebar-background:#0c1236;--sidebar-foreground:#e9e6da;--sidebar-primary:238 36% 60%;--sidebar-accent:#2b304d;--sidebar-accent-foreground:#e9e6da;--sidebar-border:rgba(233,230,218,.13);
  --builder-background:#070c29;--builder-background-pattern:rgba(233,230,218,.16)}
html,body,button,input,textarea,select{font-family:var(--font-sans)!important}
body{-webkit-font-smoothing:antialiased}
a{color:inherit}
/* Inlogschermen zoals het Starruk CRM: kale pagina, logo-balk met navy lijn, links uitgelijnd, mono-labels, rechte hoeken, oranje omlijnde knop */
html[data-sr-auth] body{background:#f5f5f5!important}
html[data-sr-auth] #root .h-dvh{background:#f5f5f5!important}
html[data-sr-auth] #root .h-dvh>.pointer-events-none.absolute.inset-0.flex:not(.z-50),html[data-sr-auth] #root .h-dvh>.absolute.inset-0.z-40{display:none!important}
html[data-sr-auth] #root .h-dvh>.absolute.inset-0.z-50{align-items:flex-start!important;justify-content:flex-start!important;padding:130px 16px 90px max(16px,calc(50vw - 528px))!important;overflow:auto}
html[data-sr-auth] section{max-width:640px!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important}
html[data-sr-auth] section>div>div>div>div{padding:0!important}
html[data-sr-auth] section .mb-5.flex.justify-center{display:none!important}
html[data-sr-auth] section h1{text-align:left!important;font-size:34px!important;font-weight:700!important;letter-spacing:-.01em!important;color:#050e48!important;line-height:1.2!important}
html[data-sr-auth] section .mb-6.text-center{text-align:left!important;margin-bottom:28px!important}
html[data-sr-auth] section label{font-family:"Cascadia Mono",Consolas,ui-monospace,monospace!important;font-size:11.5px!important;font-weight:400!important;text-transform:uppercase;letter-spacing:.08em;color:#2a3160!important}
html[data-sr-auth] section input{height:48px!important;border-radius:0!important;border:1px solid rgba(5,14,72,.3)!important;background:#fff!important;box-shadow:none!important;font-size:15px!important}
html[data-sr-auth] section input:focus{outline:2px solid #050e48!important;outline-offset:-1px}
html[data-sr-auth] section form{gap:18px}
html[data-sr-auth] section form>button:last-child,html[data-sr-auth] section button[type="submit"]{width:auto!important;align-self:flex-start;height:36px!important;padding:0 16px!important;border-radius:0!important;background:transparent!important;color:#b83a00!important;border:1px solid #e84a00!important;font-family:"Cascadia Mono",Consolas,ui-monospace,monospace!important;font-size:11.5px!important;letter-spacing:.1em;text-transform:uppercase;font-weight:400!important;box-shadow:none!important}
html[data-sr-auth] section form>button:last-child:hover,html[data-sr-auth] section button[type="submit"]:hover{background:rgba(232,74,0,.08)!important}
html[data-sr-auth] section a{font-family:"Cascadia Mono",Consolas,ui-monospace,monospace!important;font-size:12px!important;color:#2a3160!important;text-decoration:underline!important}
.sr-kop{position:fixed;top:0;left:0;right:0;z-index:60;height:76px;border-bottom:2px solid #050e48;background:#f5f5f5;display:flex;align-items:center;padding:0 16px 0 max(16px,calc(50vw - 528px))}
.sr-kop a{display:flex;align-items:center;gap:10px;text-decoration:none!important;color:#050e48!important}
.sr-kop img{height:40px;width:auto;display:block}
.sr-voet{position:fixed;left:0;right:0;bottom:0;z-index:60;border-top:1px solid rgba(5,14,72,.12);background:#f5f5f5;padding:14px 16px 18px max(16px,calc(50vw - 528px));font-family:"Cascadia Mono",Consolas,ui-monospace,monospace;font-size:12px;color:#2a3160}

/* logo in de app zelf (zijbalk, bouwer) groot genoeg */
img[src*="starruk-licht-strak"]{min-height:28px;object-fit:contain}

/* Bouwer in n8n-stijl: vierkante stapblokken met dikke rand, trigger met ronde linkerkant, grijze lijnen, plus op de lijn, rustige stippen */
:root{--sr-node:#fff;--sr-node-rand:#c4c8d4;--sr-node-hover:#8f95ad;--sr-lijn:#9ba1b7;--sr-kies:#050e48;--sr-oranje:#e84a00}
.dark{--sr-node:#121a45;--sr-node-rand:#3a4170;--sr-node-hover:#6b7299;--sr-lijn:#5c6390;--sr-kies:#e9e6da}
.react-flow__node [data-step-context-menu]{background:var(--sr-node)!important;border:2px solid var(--sr-node-rand)!important;border-radius:8px!important;box-shadow:0 1px 3px rgba(5,14,72,.08)!important;transition:border-color .12s,box-shadow .12s}
.react-flow__node:hover [data-step-context-menu]{border-color:var(--sr-node-hover)!important}
.react-flow__node.selected [data-step-context-menu],.react-flow__node [data-step-context-menu][data-selected="true"]{border-color:var(--sr-kies)!important;box-shadow:0 0 0 4px rgba(5,14,72,.12)!important}
.react-flow__node [data-step-context-menu="trigger"]{border-radius:40px 8px 8px 40px!important}
.react-flow__node [data-step-context-menu] .absolute.top-full{font-weight:600;font-size:13px;color:var(--foreground);line-height:1.3}
.react-flow__edge-path{stroke:var(--sr-lijn)!important;stroke-width:2px!important}
.react-flow__edge:hover .react-flow__edge-path{stroke:var(--sr-kies)!important}
[data-testid="add-action-button"]{border:1.5px solid var(--sr-lijn)!important;border-radius:4px!important;background:var(--sr-node)!important;color:var(--sr-lijn)!important;transition:border-color .12s,color .12s}
[data-testid="add-action-button"]:hover{border-color:var(--sr-oranje)!important;color:var(--sr-oranje)!important}
.react-flow__node-BIG_ADD_BUTTON>div,.react-flow__node-BIG_ADD_BUTTON button{border:2px dashed var(--sr-lijn)!important;border-radius:8px!important;background:var(--sr-node)!important}
.react-flow__node-BIG_ADD_BUTTON:hover>div,.react-flow__node-BIG_ADD_BUTTON:hover button{border-color:var(--sr-oranje)!important;color:var(--sr-oranje)!important}
#canvas-controls button{border-radius:6px!important}
#canvas-controls>div>div{box-shadow:0 1px 3px rgba(5,14,72,.1)}

/* Inlogschermen in donker thema */
html.dark[data-sr-auth] body,html.dark[data-sr-auth] #root .h-dvh{background:#070c29!important}
html.dark[data-sr-auth] section h1{color:#e9e6da!important}
html.dark[data-sr-auth] section label,html.dark[data-sr-auth] section a,html.dark .sr-onder{color:#a8adc6!important}
html.dark[data-sr-auth] section input{background:#0c1236!important;border-color:rgba(233,230,218,.28)!important;color:#e9e6da!important}
html.dark[data-sr-auth] section input:focus{outline-color:#e9e6da!important}
html.dark[data-sr-auth] section form>button:last-child,html.dark[data-sr-auth] section button[type="submit"]{color:#ff7f3f!important;border-color:#ff7f3f!important}
html.dark .sr-kop{background:#070c29;border-bottom-color:#e9e6da}
html.dark .sr-kop a{color:#e9e6da!important}
html.dark .sr-voet{background:#070c29;border-top-color:rgba(233,230,218,.13);color:#a8adc6}

.sr-onder{font-family:"Cascadia Mono",Consolas,ui-monospace,monospace;font-size:12px;color:#2a3160;margin-top:10px;text-align:left}