/* style.css — Adficom webapp (modern redesign met dark mode) Alle kleuren via CSS-variabelen, zodat dark mode overal werkt. */ @font-face { font-family: "Gotham"; src: url("/static/fonts/Gotham-Book.otf") format("opentype"); font-weight: 400; } @font-face { font-family: "Gotham"; src: url("/static/fonts/Gotham-Medium.otf") format("opentype"); font-weight: 500; } @font-face { font-family: "Gotham"; src: url("/static/fonts/Gotham-Bold.otf") format("opentype"); font-weight: 700; } /* ── KLEURTHEMA'S ────────────────────────────────────────── */ :root, [data-thema="licht"] { /* Huisstijl (standaardmerk: Adficom energiebelasting) */ --geel: #fab519; --geel-hover: #e0a400; --groen: #31aa51; --blauw: #4873b8; --merk-accent: #4873b8; --donker: #21274b; --donker-2: #2e3566; /* Pagina */ --bg: #f0f2f7; --kaart-bg: #ffffff; --kaart-rand: #e5e7ef; --schaduw: 0 2px 12px rgba(33,39,75,.08); /* Tekst */ --tekst: #21274b; --tekst-zacht: #6b7280; --tekst-zachter: #9ca3af; /* Invoer */ --invoer-bg: #fafafa; --invoer-rand: #d1d5db; --invoer-focus: rgba(250,182,21,.18); /* Tabel */ --rij-even: #f9fafb; --rij-hover: #f3f4f8; /* Sidebar */ --sidebar-bg: #21274b; --sidebar-bg-2: #2e3566; --sidebar-tekst: #c8ccdf; --sidebar-rand: rgba(255,255,255,.08); --sidebar-hover: rgba(255,255,255,.07); --sidebar-label: rgba(255,255,255,.35); } [data-thema="donker"] { --bg: #0f1117; --kaart-bg: #1a1d27; --kaart-rand: #2a2d3e; --schaduw: 0 2px 16px rgba(0,0,0,.3); --tekst: #e8eaf2; --tekst-zacht: #8b8fa8; --tekst-zachter: #5a5f7a; --invoer-bg: #13151f; --invoer-rand: #2e3148; --invoer-focus: rgba(250,182,21,.15); --rij-even: #1e2131; --rij-hover: #232638; --sidebar-bg: #0d0f18; --sidebar-bg-2: #1a1d33; --sidebar-tekst: #b0b5cc; --sidebar-rand: rgba(255,255,255,.06); --sidebar-hover: rgba(255,255,255,.05); --sidebar-label: rgba(255,255,255,.25); } /* ── MERKEN: Adficom energielabels heeft een eigen kleurenpalet (rood/oranje-accent i.p.v. blauw, net iets andere geel/groen-tint). Werkt via het data-merk-attribuut op , gezet vanuit de server op basis van het merk van de ingelogde gebruiker. Grote donkere vlakken (sidebar, welkomstbanner) blijven bewust HETZELFDE voor beide merken -- zie de gedeelde blauw/rood-vervaging verderop, net als op de inlogpagina. ─────────────────────────────────────── */ [data-merk="energielabels"] { --geel: #fbb821; --geel-hover: #e0a30f; --groen: #2aaa4d; --merk-accent: #ea433b; --donker: #21274b; --donker-2: #2e3566; } /* De "Beschikkingen"-tegel op het dashboard gebruikt standaard een blauwe badge (zie .tool-kaart-icoon.blauw) -- energielabels heeft geen blauw in de huisstijl (groen/geel/rood), dus die badge volgt hier de merk-accentkleur (rood) in plaats van vast blauw. */ [data-merk="energielabels"] .tool-kaart-icoon.blauw { background: rgba(234,67,59,.12); } [data-merk="energielabels"] .tool-kaart-icoon.blauw svg { color: var(--merk-accent); } /* Automatisch dark mode als geen handmatige keuze en systeem donker */ @media (prefers-color-scheme: dark) { :root:not([data-thema]) { --bg: #0f1117; --kaart-bg: #1a1d27; --kaart-rand: #2a2d3e; --schaduw: 0 2px 16px rgba(0,0,0,.3); --tekst: #e8eaf2; --tekst-zacht: #8b8fa8; --tekst-zachter: #5a5f7a; --invoer-bg: #13151f; --invoer-rand: #2e3148; --invoer-focus: rgba(250,182,21,.15); --rij-even: #1e2131; --rij-hover: #232638; --sidebar-bg: #0d0f18; --sidebar-tekst: #b0b5cc; --sidebar-rand: rgba(255,255,255,.06); --sidebar-hover: rgba(255,255,255,.05); --sidebar-label: rgba(255,255,255,.25); } } /* ── RESET ───────────────────────────────────────────────── */ * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: "Gotham", system-ui, Arial, sans-serif; color: var(--tekst); background: var(--bg); min-height: 100vh; transition: background .2s, color .2s; } /* ── LAYOUT ──────────────────────────────────────────────── */ .app-shell { display: flex; min-height: 100vh; } /* ── SIDEBAR ─────────────────────────────────────────────── */ .sidebar { width: 240px; background: linear-gradient(180deg, rgba(72,115,184,.30) 0%, rgba(72,115,184,0) 35%), linear-gradient(180deg, rgba(234,67,59,0) 65%, rgba(234,67,59,.30) 100%), linear-gradient(165deg, var(--sidebar-bg) 0%, var(--sidebar-bg-2) 100%); color: var(--sidebar-tekst); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; height: 100vh; z-index: 100; transition: background .2s; } .sidebar-logo { padding: 24px 20px 18px; border-bottom: 1px solid var(--sidebar-rand); } .sidebar-logo img { height: 34px; display: block; /* Altijd de witte logovariant (balk is altijd donker) -- geen witte pill meer nodig. */ } .sidebar-nav { flex: 1; padding: 12px 0; overflow-y: auto; } .sidebar-label { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sidebar-label); padding: 14px 20px 5px; } .sidebar-nav a { display: flex; align-items: center; gap: 10px; padding: 9px 20px; font-size: 13.5px; font-weight: 500; color: var(--sidebar-tekst); text-decoration: none; transition: background .12s, color .12s; border-right: 3px solid transparent; } .sidebar-nav a:hover { background: var(--sidebar-hover); color: #fff; text-decoration: none; } .sidebar-nav a.actief { background: rgba(250,182,21,.12); color: var(--geel); border-right-color: var(--geel); } .sidebar-nav a svg { width: 16px; height: 16px; opacity: .65; flex-shrink: 0; } .sidebar-nav a:hover svg, .sidebar-nav a.actief svg { opacity: 1; } /* ── DARK MODE TOGGLE ────────────────────────────────────── */ .sidebar-bottom { border-top: 1px solid var(--sidebar-rand); padding: 12px 16px 16px; } .thema-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; cursor: pointer; font-size: 13.5px; font-weight: 500; color: var(--sidebar-tekst); background: none; border: none; border-radius: 8px; font-family: inherit; width: 100%; text-align: left; transition: background .15s, color .15s; } .thema-toggle-links { display: flex; align-items: center; gap: 10px; } .thema-toggle:hover { background: var(--sidebar-hover); color: #fff; } .thema-toggle svg { width: 16px; height: 16px; opacity: .65; flex-shrink: 0; } /* Echte toggle-switch i.p.v. platte tekst */ .thema-switch { position: relative; width: 34px; height: 20px; flex-shrink: 0; border-radius: 999px; background: rgba(255,255,255,.15); transition: background .18s ease; } .thema-switch-bol { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .18s ease; } .thema-switch.aan { background: var(--geel); } .thema-switch.aan .thema-switch-bol { transform: translateX(14px); } /* Moderne profielkaart onderaan de sidebar, i.p.v. kale tekst */ .profiel-kaart { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px; border-radius: 10px; background: rgba(255,255,255,.05); } .profiel-avatar { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; background: linear-gradient(135deg, var(--geel), #e0952e); color: var(--donker); font-size: 13px; font-weight: 700; } .profiel-tekst { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; } .profiel-naam { font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .profiel-sub { font-size: 11px; color: rgba(255,255,255,.4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── HOOFDINHOUD ─────────────────────────────────────────── */ .main { margin-left: 240px; flex: 1; display: flex; flex-direction: column; min-width: 0; } .main-inner { padding: 40px 48px; max-width: 960px; width: 100%; } /* ── PAGINAHEADER ────────────────────────────────────────── */ .pagina-header { margin-bottom: 28px; } .pagina-header h1 { font-size: 26px; font-weight: 700; color: var(--tekst); letter-spacing: -.3px; margin-bottom: 4px; } .pagina-header .subtitel { font-size: 14px; color: var(--tekst-zacht); } h1 { font-size: 22px; font-weight: 700; color: var(--tekst); margin-bottom: 8px; } h2 { font-size: 17px; font-weight: 700; color: var(--tekst); margin: 24px 0 12px; } /* ── KAART ───────────────────────────────────────────────── */ .kaart { background: var(--kaart-bg); border-radius: 12px; box-shadow: var(--schaduw); border: 1px solid var(--kaart-rand); padding: 32px 36px; margin-bottom: 24px; transition: background .2s, border-color .2s; } /* ── DASHBOARD KAARTEN ───────────────────────────────────── */ .keuze-rij { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; margin-top: 4px; } .keuze-kaart { background: var(--kaart-bg); border: 1px solid var(--kaart-rand); border-radius: 12px; padding: 22px; display: flex; flex-direction: column; transition: box-shadow .15s, transform .15s, border-color .15s, background .2s; } .keuze-kaart:hover { box-shadow: 0 4px 20px rgba(33,39,75,.12); transform: translateY(-2px); border-color: var(--geel); } .keuze-icoon { width: 40px; height: 40px; background: rgba(250,182,21,.12); border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; } .keuze-icoon svg { width: 20px; height: 20px; color: var(--geel-hover); } .keuze-titel { font-size: 15px; font-weight: 700; margin-bottom: 6px; color: var(--tekst); } .keuze-uitleg { font-size: 13px; color: var(--tekst-zacht); line-height: 1.5; flex: 1; margin-bottom: 16px; } /* ── FORMULIEREN ─────────────────────────────────────────── */ form { width: 100%; } .veld-label { display: block; font-size: 13px; font-weight: 600; margin: 18px 0 6px; color: var(--tekst); } .veld { width: 100%; padding: 11px 14px; border: 1.5px solid var(--invoer-rand); border-radius: 7px; font-size: 14px; font-family: inherit; color: var(--tekst); background: var(--invoer-bg); transition: border-color .15s, box-shadow .15s, background .2s; } .veld:focus { outline: none; border-color: var(--geel); box-shadow: 0 0 0 3px var(--invoer-focus); background: var(--kaart-bg); } textarea.veld { resize: vertical; min-height: 120px; } /* ── KNOPPEN ─────────────────────────────────────────────── */ .knop { display: inline-flex; align-items: center; gap: 8px; background: var(--geel); color: var(--donker); border: none; padding: 12px 24px; border-radius: 7px; font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer; transition: background .15s, transform .1s; text-decoration: none; margin-top: 8px; } .knop:hover { background: var(--geel-hover); transform: translateY(-1px); text-decoration: none; color: var(--donker); } .knop:active { transform: none; } .knop.secundair { background: var(--donker); color: white; } .knop.secundair:hover { background: var(--donker-2); color: white; } .knop.klein { padding: 7px 14px; font-size: 12px; margin-top: 0; } /* ── SLEEPVAK ────────────────────────────────────────────── */ .vak { display: flex; flex-direction: column; align-items: center; justify-content: center; border: 2px dashed var(--invoer-rand); border-radius: 9px; padding: 36px 20px; text-align: center; margin: 12px 0 20px; background: var(--invoer-bg); transition: border-color .15s, background .15s; cursor: pointer; width: 100%; } .vak.sleep-actief { border-color: var(--geel); background: rgba(250,182,21,.06); } .vak .vak-tekst { color: var(--tekst-zacht); font-size: 14px; margin-bottom: 14px; } .vak .bestandslijst { margin-top: 12px; font-size: 13px; color: var(--groen); font-weight: 500; text-align: left; width: 100%; max-width: 360px; } .vak .bestandslijst div { padding: 3px 0; } .vak input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; } .vak .kies-knop { display: inline-block; background: var(--donker); color: white; padding: 9px 18px; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; transition: background .12s; } .vak .kies-knop:hover { background: var(--donker-2); } .vak.vak-compact { padding: 18px 16px; margin: 6px 0 14px; } .vak.vak-compact .vak-tekst { margin-bottom: 10px; } /* ── CHECKBOXES ──────────────────────────────────────────── */ .checkbox-rij { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0; font-size: 14px; color: var(--tekst); line-height: 1.5; } .checkbox-rij input[type="checkbox"], .checkbox-rij input[type="radio"] { margin-top: 3px; accent-color: var(--geel); flex-shrink: 0; } /* ── TABELLEN ────────────────────────────────────────────── */ .tabel-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 12px; border-radius: 8px; } .tabel-wrapper table { margin-top: 0; } @media (max-width: 768px) { /* Op een telefoon worden kolommen anders onleesbaar smal -- geef de tabel een minimumbreedte zodat je 'm horizontaal kunt scrollen in plaats van dat de tekst dichtgeknepen wordt. */ .tabel-wrapper table { min-width: 560px; } } table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 13px; } th, td { border: 1px solid var(--kaart-rand); padding: 11px 14px; text-align: left; vertical-align: top; color: var(--tekst); } th { background: var(--donker); color: white; font-weight: 600; font-size: 12px; letter-spacing: .03em; border-color: var(--donker); } tr:nth-child(even) td { background: var(--rij-even); } tr:hover td { background: var(--rij-hover); } /* ── LINKS ───────────────────────────────────────────────── */ a { color: var(--merk-accent); text-decoration: none; } a:hover { text-decoration: underline; } /* ── FLASH MELDINGEN ─────────────────────────────────────── */ .meldingen { margin-bottom: 24px; } .melding { padding: 13px 18px; border-radius: 8px; font-size: 14px; margin-bottom: 10px; } .melding-succes { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; } .melding-fout { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; } .melding-info { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; } [data-thema="donker"] .melding-succes { background: #052e16; color: #86efac; border-color: #166534; } [data-thema="donker"] .melding-fout { background: #2d0a0a; color: #fca5a5; border-color: #7f1d1d; } [data-thema="donker"] .melding-info { background: #0c1a3a; color: #93c5fd; border-color: #1e3a6e; } /* ── STATUSINDICATOREN ───────────────────────────────────── */ .ok { color: var(--groen); font-weight: 600; } .fout { color: #dc2626; font-weight: 600; } /* ── HULPKLASSEN ─────────────────────────────────────────── */ .uitleg { color: var(--tekst-zacht); font-size: 14px; line-height: 1.6; } .onderschrift { margin-top: 20px; font-size: 13px; color: var(--tekst-zachter); } .acties { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; gap: 12px; } /* ── TERUGGAAF-ZEKERHEID ─────────────────────────────────── */ .zekerheid-hoog { font-size: 12px; color: #15803d; font-weight: 500; } .zekerheid-middel { font-size: 12px; color: #92400e; font-weight: 500; } .zekerheid-laag { font-size: 12px; color: #dc2626; font-weight: 500; } [data-thema="donker"] .zekerheid-hoog { color: #4ade80; } [data-thema="donker"] .zekerheid-middel { color: #fbbf24; } [data-thema="donker"] .zekerheid-laag { color: #f87171; } .melding-waarschuwing { background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 14px 18px; margin-bottom: 20px; font-size: 14px; color: #92400e; } [data-thema="donker"] .melding-waarschuwing { background: #2a1a00; border-color: #78350f; color: #fbbf24; } .melding-waarschuwing ul { margin: 8px 0 0 18px; } /* ── TOPBALK (mobiel) ────────────────────────────────────── */ .topbalk { display: none; } /* ── INLOGPAGINA ─────────────────────────────────────────── */ .login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; /* Links een vleug blauw (energiebelasting), rechts een vleug rood (energielabels), beide vloeiend overlopend in de gedeelde navy -- symbolisch voor de 2 merken die deze inlogpagina samen bedienen. */ background: linear-gradient(90deg, rgba(72,115,184,.55) 0%, rgba(72,115,184,0) 38%), linear-gradient(90deg, rgba(234,67,59,0) 62%, rgba(234,67,59,.55) 100%), linear-gradient(135deg, #21274b 0%, #2e3566 100%); padding: 24px; } .login-kaart { background: var(--kaart-bg); border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.25); padding: 44px 48px; width: 100%; max-width: 420px; border: 1px solid var(--kaart-rand); transition: background .2s; } .login-logo { display: block; height: 40px; margin: 0 auto 28px; } .login-merken-intro { text-align: center; margin-bottom: 30px; } .login-merken-naam { font-family: "Gotham", Arial, sans-serif; font-weight: 700; font-size: 22px; letter-spacing: -.01em; color: var(--tekst); margin: 0 0 20px; } .login-merken-rij { display: flex; align-items: center; justify-content: center; gap: 28px; } .login-merk-item { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 12px; transition: background .15s; } .login-merk-item:hover { background: var(--rij-hover); } .login-merk-item img { height: 40px; width: auto; display: block; } .login-merk-item span { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--tekst-zacht); } .login-merken-scheiding { width: 1px; height: 44px; background: var(--kaart-rand); flex-shrink: 0; } .login-kaart h1 { text-align: center; margin-bottom: 24px; } /* ── RESPONSIVE ──────────────────────────────────────────── */ @media (max-width: 768px) { .app-shell { flex-direction: column; } .main { margin-left: 0; } .main-inner { padding: 20px 18px; } /* Sidebar wordt op mobiel een uitschuifbaar menu (drawer) in plaats van volledig verborgen, zodat alle tools en beheerfuncties bereikbaar blijven -- niet alleen de 3 links in de topbalk. */ .sidebar { transform: translateX(-100%); transition: transform .22s ease; box-shadow: 2px 0 24px rgba(0,0,0,.35); width: 270px; } .sidebar.mobiel-open { transform: translateX(0); } .mobiel-overlay { display: none; position: fixed; inset: 0; background: rgba(15,17,23,.5); z-index: 99; } .mobiel-overlay.zichtbaar { display: block; } .topbalk { display: flex; align-items: center; gap: 14px; background: var(--donker); padding: 13px 18px; position: sticky; top: 0; z-index: 50; } .hamburger-knop { background: none; border: none; color: #fff; padding: 4px; display: flex; align-items: center; cursor: pointer; flex-shrink: 0; } .topbalk img { height: 26px; background: none; border-radius: 0; padding: 0; /* Witte logovariant op de donkere topbalk -- pill weg. */ } /* De oude 3-links-menu in de topbalk vervalt -- alle navigatie loopt nu via het hamburgermenu (dezelfde sidebar als desktop). */ .topbalk-menu { display: none; } .topbalk-menu a { color: #c8ccdf; font-size: 13px; font-weight: 500; text-decoration: none; } .keuze-rij { grid-template-columns: 1fr 1fr; } .kaart { padding: 20px 18px; } } @media (max-width: 480px) { .keuze-rij { grid-template-columns: 1fr; } .login-kaart { padding: 28px 20px; } .main-inner { padding: 16px 14px; } } /* ═══════════════════════════════════════════════════════════ LOGO — via JS gewisseld tussen logo.png en logo_wit.png ═══════════════════════════════════════════════════════════ */ .sidebar-logo img { height: 34px; display: block; padding: 0; background: none; border-radius: 0; filter: none; } /* ═══════════════════════════════════════════════════════════ DASHBOARD — volledig brede grid + uitgebreider design ═══════════════════════════════════════════════════════════ */ /* Kaart zonder max-width beperking */ .kaart-breed { background: var(--kaart-bg); border-radius: 14px; box-shadow: var(--schaduw); border: 1px solid var(--kaart-rand); padding: 32px 36px; margin-bottom: 24px; transition: background .2s, border-color .2s; } /* Welkomstbanner bovenaan dashboard */ .dashboard-banner { background: linear-gradient(90deg, rgba(72,115,184,.35) 0%, rgba(72,115,184,0) 40%), linear-gradient(90deg, rgba(234,67,59,0) 60%, rgba(234,67,59,.35) 100%), linear-gradient(135deg, var(--donker) 0%, var(--sidebar-bg-2) 100%); border-radius: 14px; padding: 28px 36px; margin-bottom: 24px; position: relative; overflow: hidden; } .dashboard-banner::after { content: ''; position: absolute; top: -40px; right: -40px; width: 200px; height: 200px; background: rgba(250,182,21,.08); border-radius: 50%; } .dashboard-banner::before { content: ''; position: absolute; bottom: -60px; right: 80px; width: 160px; height: 160px; background: rgba(250,182,21,.05); border-radius: 50%; } .dashboard-banner h1 { color: white; font-size: 24px; margin-bottom: 4px; position: relative; z-index: 1; } .dashboard-banner .subtitel { color: rgba(255,255,255,.6); font-size: 14px; position: relative; z-index: 1; } .dashboard-banner .actiebalk { display: flex; gap: 12px; margin-top: 20px; position: relative; z-index: 1; } .dashboard-banner .accent-pill { display: inline-flex; align-items: center; gap: 6px; background: rgba(250,182,21,.2); border: 1px solid rgba(250,182,21,.3); color: var(--geel); padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 600; text-decoration: none; } .dashboard-banner .accent-pill:hover { background: rgba(250,182,21,.3); text-decoration: none; color: var(--geel); } /* Tools grid — volledig breed, 4 kolommen op desktop */ .tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; } .tool-kaart { background: var(--kaart-bg); border: 1px solid var(--kaart-rand); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; transition: box-shadow .15s, transform .15s, border-color .15s, background .2s; text-decoration: none; color: inherit; cursor: pointer; } .tool-kaart:hover { box-shadow: 0 6px 24px rgba(33,39,75,.14); transform: translateY(-3px); border-color: var(--geel); text-decoration: none; } .tool-kaart-icoon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; transition: transform .15s; } .tool-kaart:hover .tool-kaart-icoon { transform: scale(1.08); } .tool-kaart-icoon.geel { background: rgba(250,182,21,.15); } .tool-kaart-icoon.groen { background: rgba(36,168,76,.12); } .tool-kaart-icoon.blauw { background: rgba(72,115,184,.12); } .tool-kaart-icoon.paars { background: rgba(139,92,246,.12); } .tool-kaart-icoon.rood { background: rgba(239,68,68,.1); } .tool-kaart-icoon svg { width: 22px; height: 22px; } .tool-kaart-icoon.geel svg { color: #d97706; } .tool-kaart-icoon.groen svg { color: var(--groen); } .tool-kaart-icoon.blauw svg { color: var(--blauw); } .tool-kaart-icoon.paars svg { color: #7c3aed; } .tool-kaart-icoon.rood svg { color: #dc2626; } .tool-kaart-naam { font-size: 14px; font-weight: 700; color: var(--tekst); margin-bottom: 5px; } .tool-kaart-uitleg { font-size: 12px; color: var(--tekst-zacht); line-height: 1.5; flex: 1; margin-bottom: 14px; } .tool-kaart-link { font-size: 12px; font-weight: 600; color: var(--geel-hover); display: flex; align-items: center; gap: 4px; } /* Snelkoppelingen balk */ .snelkoppelingen { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; } .snelkoppeling { display: flex; align-items: center; gap: 8px; background: var(--kaart-bg); border: 1px solid var(--kaart-rand); border-radius: 8px; padding: 10px 16px; font-size: 13px; font-weight: 500; color: var(--tekst); text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .12s; } .snelkoppeling:hover { border-color: var(--geel); box-shadow: 0 2px 8px rgba(250,182,21,.2); transform: translateY(-1px); text-decoration: none; color: var(--tekst); } .snelkoppeling svg { width: 16px; height: 16px; color: var(--tekst-zacht); flex-shrink: 0; } .snelkoppeling:hover svg { color: var(--geel-hover); } /* ═══════════════════════════════════════════════════════════ MAIN zonder max-width beperking (voor dashboard) ═══════════════════════════════════════════════════════════ */ .main-inner-breed { padding: 36px 48px; width: 100%; } @media (max-width: 768px) { .main-inner-breed { padding: 20px 18px; } .tools-grid { grid-template-columns: 1fr 1fr; } .dashboard-banner { padding: 20px 20px; } .snelkoppelingen { gap: 8px; } } @media (max-width: 480px) { .tools-grid { grid-template-columns: 1fr; } } /* ── MONDAY LOGO ICOON ───────────────────────────────────── */ .sidebar-nav a .monday-icon, .snelkoppeling .monday-icon { width: 16px; height: 16px; border-radius: 3px; flex-shrink: 0; opacity: .85; transition: opacity .12s; } .sidebar-nav a:hover .monday-icon, .snelkoppeling:hover .monday-icon { opacity: 1; } /* ── ONLINE TELLER BADGE ─────────────────────────────────── */ .online-badge { margin-left: auto; background: var(--geel); color: var(--donker); font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 10px; line-height: 1.4; } /* ===================================================================== Zijbalk en meldingen — geldt op alle pagina's, dus hier en niet in friday.css (die alleen op de bordpagina's wordt geladen). ===================================================================== */ /* --- Zijbalk in-/uitklappen ----------------------------------------- De breedte staat in een variabele, zodat de zijbalk en het werkgebied altijd op elkaar aansluiten. Ingeklapt blijft alleen een smalle strook met pictogrammen over en krijgt het bord de volle breedte. */ .app-shell { --zijbalk-breedte: 240px; } .app-shell .sidebar { width: var(--zijbalk-breedte); transition: width .18s ease; } .app-shell .main { margin-left: var(--zijbalk-breedte); transition: margin-left .18s ease; } .app-shell.zijbalk-dicht { --zijbalk-breedte: 64px; } /* Wat lucht tussen de zijbalk en de inhoud: 'Nieuw item' stond er tegenaan. */ .app-shell .main > * { padding-left: 8px; } .zijbalk-knop { position: absolute; top: 18px; right: -12px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--kaart-rand, #d0d4e4); background: var(--kaart-bg, #fff); color: var(--tekst-zacht, #676879); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 120; box-shadow: 0 1px 4px rgba(23, 26, 64, .18); padding: 0; } .zijbalk-knop:hover { color: var(--merk-accent, #0073ea); } .zijbalk-knop svg { transition: transform .18s ease; } .app-shell.zijbalk-dicht .zijbalk-knop svg { transform: rotate(180deg); } .sidebar { position: fixed; } /* --- Ingeklapte weergave ------------------------------------------- */ /* Standaard tonen we het brede woordmerk; het beeldmerk alleen ingeklapt. */ .sidebar-logo .merk-beeldmerk { display: none; } .app-shell.zijbalk-dicht .sidebar-label, .app-shell.zijbalk-dicht .profiel-tekst, .app-shell.zijbalk-dicht #thema-tekst, .app-shell.zijbalk-dicht .thema-switch, .app-shell.zijbalk-dicht .sidebar-logo .merk-logo-img { display: none; } .app-shell.zijbalk-dicht .sidebar-logo .merk-beeldmerk { display: block; width: 30px; height: auto; } .app-shell.zijbalk-dicht .thema-toggle { justify-content: center; padding: 11px 0; } .app-shell.zijbalk-dicht .thema-toggle-links { gap: 0; } .app-shell.zijbalk-dicht .thema-toggle svg { width: 19px; height: 19px; min-width: 19px; margin: 0; } .app-shell.zijbalk-dicht .sidebar-logo { padding: 16px 0; display: flex; justify-content: center; } /* De tekst in de links is losse tekst, geen element; die verbergen we door de letters op nul te zetten en het pictogram terug te zetten. */ .app-shell.zijbalk-dicht .sidebar-nav a { font-size: 0; gap: 0; padding: 11px 0; justify-content: center; } .app-shell.zijbalk-dicht .sidebar-nav a svg { width: 19px; height: 19px; min-width: 19px; margin: 0; } .app-shell.zijbalk-dicht .sidebar-badge { position: absolute; margin: -12px 0 0 14px; font-size: 9.5px; padding: 0 4px; line-height: 15px; } .app-shell.zijbalk-dicht .sidebar-nav a { position: relative; } .app-shell.zijbalk-dicht .profiel-kaart { justify-content: center; padding-left: 0; padding-right: 0; } .app-shell.zijbalk-dicht .sidebar-bottom { padding-left: 0; padding-right: 0; } /* --- Meldingen over het werk heen ----------------------------------- Schuift als paneel over de pagina, zoals de updatefeed op Monday, in plaats van naar een aparte pagina te springen. */ .meldingen-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(23, 26, 64, .38); display: flex; justify-content: flex-end; } .meldingen-overlay[hidden] { display: none; } .meldingen-scherm { width: min(560px, 100%); height: 100%; background: var(--kaart-bg, #fff); border-left: 1px solid var(--kaart-rand, #d0d4e4); box-shadow: -14px 0 40px rgba(23, 26, 64, .16); display: flex; flex-direction: column; animation: meldingen-in .18s ease; } @keyframes meldingen-in { from { transform: translateX(24px); opacity: .6; } } .meldingen-kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px 10px; border-bottom: 1px solid var(--kaart-rand, #e6e9ef); } .meldingen-kop h2 { margin: 0; font-size: 19px; } .meldingen-kop-acties { display: flex; align-items: center; gap: 6px; } .meldingen-sluit { border: none; background: none; font-size: 24px; line-height: 1; cursor: pointer; color: var(--tekst-zacht, #676879); padding: 0 4px; } .meldingen-sluit:hover { color: var(--tekst, #21274b); } .meldingen-scherm .meldingen-tabs { display: flex; gap: 4px; padding: 0 18px; border-bottom: 1px solid var(--kaart-rand, #e6e9ef); } .meldingen-scherm .meldingen-tab { border: none; background: none; cursor: pointer; font: inherit; padding: 10px 4px; color: var(--tekst-zacht, #676879); border-bottom: 2px solid transparent; margin-right: 14px; } .meldingen-inhoud { flex: 1; overflow-y: auto; padding: 8px 18px 20px; }