/* 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: 36px; display: block; background: white; border-radius: 8px; padding: 5px 10px; /* Logo is donker/kleur — witte pill maakt hem leesbaar op donkere sidebar */ } [data-thema="donker"] .sidebar-logo img { background: rgba(255,255,255,.1); } .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: 28px; background: white; border-radius: 6px; padding: 3px 8px; } /* 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; }