/* Loes theming + white-label for Open WebUI */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    --color-primary: #4f46e5;
    --color-primary-500: #4f46e5;
}

html, body, button, input, textarea, select {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

code, pre, kbd, samp {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
}

/* Hide every link back to Open WebUI (about / footer / community / socials) */
a[href*="openwebui.com"],
a[href*="github.com/open-webui"],
a[href*="docs.openwebui.com"],
a[href*="discord.gg/"],
a[href*="github.com/sponsors"] {
    display: none !important;
}

/* Brand logo → Loes wordmark, applied at first paint (no flash of the round "L").
   This rule owns the auth / splash-hero #logo only; loader.js skips #logo so the two
   don't fight. The favicon tab icon and the in-app sidebar wordmark are untouched here. */
#logo,
img[alt$="logo" i] {
    content: url("/static/loes-logo-white.svg?v=loes35") !important; /* white wordmark (dark bg) */
    width: auto !important;
    height: 1.5rem !important;
    max-width: 130px !important;
    border-radius: 0 !important;
    object-fit: contain !important;
    filter: none !important;
    padding: 0 !important;
}
/* Dark "Loes" wordmark on a light background so it stays visible. */
html.light #logo,
html.light img[alt$="logo" i] {
    content: url("/static/loes-logo-dark.svg?v=loes35") !important;
}
/* The brief loading splash logo stays a proper hero size (it's centered, on its own). */
#splash-screen #logo {
    height: 4rem !important;
    max-width: 240px !important;
}
/* Centered sign-in hero variant (size-24), if ever enabled via auth_logo_position. */
#logo.size-24 {
    height: 2.25rem !important;
    max-width: 200px !important;
    margin-bottom: 0.5rem;
}

/* Prettier sign-in: give the bare email/password fields a real box. */
input[type="email"],
input[type="password"] {
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border-radius: 12px !important;
    padding: 0.7rem 0.9rem !important;
    transition: border-color .15s, background .15s;
}
input[type="email"]:focus,
input[type="password"]:focus {
    border-color: var(--color-primary) !important;
    background: rgba(255, 255, 255, 0.06) !important;
}
/* ============================================================
   Huisstijl-demo: "Meridiaan & Partners, advocaten en adviseurs"
   (FICTIEF kantoor, alleen voor salesdemo van Get your own Loes).
   Palet: petrol met amber. Wordt bij uitrol eenmalig ACHTER
   branding/custom.css geplakt; de Loes-basisbranding blijft staan.
   Zie README, kopje "Huisstijl van de klant".
   ============================================================ */

:root {
    --color-primary: #147078;      /* petrol: knoppen, links, accenten */
    --color-primary-500: #147078;
    --color-primary-600: #0f565c;  /* petrol donker: hover/focus */
}

/* Dun huisstijllint bovenlangs, in elk scherm zichtbaar: het simpelste
   bewijs in de demo dat dit "hun" omgeving is en niet de publieke Loes. */
body::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #147078 0%, #d18f2c 100%);
    z-index: 9999;
    pointer-events: none;
}

/* Invoervelden op het inlogscherm volgen de petrol accentkleur. */
input[type="email"]:focus,
input[type="password"]:focus {
    border-color: #147078 !important;
}