/* ===================================================== Triple Blue CMS — licht admin-thema (sidebar + content) Donker thema via ===================================================== */ :root{ --page-bg:#eef1f8; --surface:#ffffff; --surface-2:#f5f7fc; --surface-3:#eef2f9; --line:#e2e8f3; --ink:#1e293b; --muted:#64748b; --brand:#2456ff; --brand-2:#2f80ff; --cyan:#0aa6cc; --danger:#e11d48; --ok:#0d9f6e; --sb-bg:#ffffff; --sb-ink:#1e293b; --sb-muted:#6b7794; --sb-active-bg:#eef3ff; --sb-active-ink:#2456ff; --sb-line:#eef1f8; --shadow:0 1px 3px rgba(20,30,60,.07),0 1px 2px rgba(20,30,60,.04); --radius:14px; } [data-theme="dark"]{ --page-bg:#0a0e1a; --surface:#11162a; --surface-2:#161d36; --surface-3:#1a2240; --line:#222c4d; --ink:#e8edff; --muted:#8b97bf; --brand:#2456ff; --brand-2:#2f80ff; --cyan:#37d6ff; --danger:#ff4d6d; --ok:#27c08a; --sb-bg:#0d1224; --sb-ink:#e8edff; --sb-muted:#8b97bf; --sb-active-bg:rgba(36,86,255,.18); --sb-active-ink:#9fc0ff; --sb-line:#1c2540; --shadow:none; } *{margin:0;padding:0;box-sizing:border-box} body{background:var(--page-bg);color:var(--ink); font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5} a{color:inherit;text-decoration:none} /* ---------- sidebar ---------- */ .sidebar{position:fixed;left:0;top:0;bottom:0;width:248px;background:var(--sb-bg); border-right:1px solid var(--sb-line);display:flex;flex-direction:column;z-index:40; padding:22px 16px;overflow-y:auto} .sb-brand{display:flex;align-items:center;gap:10px;padding:6px 8px 22px;border-bottom:1px solid var(--sb-line);margin-bottom:16px} .sb-logo{height:30px;width:auto;display:block} .on-dark{display:none} [data-theme="dark"] .on-light{display:none} [data-theme="dark"] .on-dark{display:block} .sb-tag{font-size:.66rem;font-weight:700;letter-spacing:1.5px;color:var(--brand); background:var(--sb-active-bg);padding:3px 8px;border-radius:20px} .sb-nav{display:flex;flex-direction:column;gap:4px} .sb-item{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:10px; color:var(--sb-muted);font-size:.92rem;font-weight:500;border:0;background:none; cursor:pointer;width:100%;text-align:left;font-family:inherit;transition:.15s} .sb-item:hover{background:var(--surface-2);color:var(--ink)} .sb-item.active{background:var(--sb-active-bg);color:var(--sb-active-ink);font-weight:600} .sb-ico{width:20px;height:20px;flex:0 0 20px;display:flex;align-items:center;justify-content:center} .sb-ico svg{width:20px;height:20px} .sb-foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--sb-line);display:flex;flex-direction:column;gap:4px} .sb-user{font-size:.78rem;color:var(--sb-muted);padding:8px 12px} .sb-user strong{color:var(--ink)} .sb-logout{color:var(--danger)} .sb-logout:hover{background:rgba(225,29,72,.08);color:var(--danger)} .sb-toggle{display:none;position:fixed;top:14px;left:14px;z-index:50;width:42px;height:42px; border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink); cursor:pointer;align-items:center;justify-content:center;box-shadow:var(--shadow)} .sb-toggle svg{width:22px;height:22px} .sb-backdrop{display:none;position:fixed;inset:0;background:rgba(10,15,30,.45);z-index:35} /* ---------- content ---------- */ .cms-main{margin-left:248px;padding:32px 40px 80px;max-width:none} .panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); padding:26px;margin-bottom:22px;box-shadow:var(--shadow)} .panel h2{font-size:1.12rem;margin-bottom:6px;display:flex;align-items:center;gap:10px} .panel-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px;flex-wrap:wrap} .panel-head h2{margin:0} .muted{color:var(--muted);font-size:.88rem} .small{font-size:.78rem} .count{background:var(--surface-3);border:1px solid var(--line);border-radius:20px;font-size:.74rem;padding:2px 10px;color:var(--muted)} /* ---------- formulieren ---------- */ label,.field label{display:flex;flex-direction:column;gap:7px;font-size:.84rem;color:var(--muted)} input[type=text],input[type=password],input[type=email],input[type=date],input[type=number], input[type=file],select,textarea{ background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 13px; color:var(--ink);font-size:.94rem;width:100%;font-family:inherit} textarea{resize:vertical} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand-2); box-shadow:0 0 0 3px rgba(47,128,255,.15)} input::placeholder,textarea::placeholder{color:var(--muted);opacity:.7} .btn-primary{background:linear-gradient(120deg,var(--brand),var(--brand-2));color:#fff;border:0; padding:11px 22px;border-radius:10px;font-weight:600;cursor:pointer;font-size:.92rem;transition:.2s} .btn-primary:hover{filter:brightness(1.07);box-shadow:0 4px 14px rgba(36,86,255,.3)} .btn-secondary{background:var(--surface);border:1px solid var(--line);color:var(--ink); padding:10px 18px;border-radius:10px;cursor:pointer;font-size:.88rem;font-weight:500;transition:.2s} .btn-secondary:hover{border-color:var(--brand-2);color:var(--brand)} .btn-danger{background:transparent;border:1px solid rgba(225,29,72,.4);color:var(--danger); padding:8px 14px;border-radius:9px;cursor:pointer;font-size:.82rem;width:100%;transition:.2s} .btn-danger:hover{background:rgba(225,29,72,.08)} .alert{padding:12px 16px;border-radius:10px;font-size:.9rem;margin-bottom:18px} .alert.ok{background:rgba(13,159,110,.1);border:1px solid rgba(13,159,110,.35);color:#0a7d57} .alert.err{background:rgba(225,29,72,.1);border:1px solid rgba(225,29,72,.35);color:#be123c} .alert.info{background:rgba(36,86,255,.08);border:1px solid rgba(36,86,255,.28);color:#2348c9} .alert.info code{background:rgba(36,86,255,.12);padding:1px 6px;border-radius:5px} [data-theme="dark"] .alert.ok{color:#9af0cf} [data-theme="dark"] .alert.err{color:#ffb3c1} [data-theme="dark"] .alert.info{color:#bcd0ff} /* ---------- links / acties ---------- */ .link{color:var(--muted);transition:.2s;cursor:pointer} .link:hover{color:var(--brand)} .link.active{color:var(--brand)} .link.danger,button.link{background:none;border:0;cursor:pointer;font-size:inherit;font-family:inherit;padding:0} .link.danger{color:var(--danger)} /* ---------- media ---------- */ .upload-form{display:grid;grid-template-columns:1fr 1fr auto;gap:16px;align-items:end;margin-top:14px} .field{display:flex;flex-direction:column} .upload-form button{height:44px} .slots{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:16px} .slot{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface-2)} .slot-head{padding:12px 16px;font-weight:600;font-size:.9rem;border-bottom:1px solid var(--line)} .slot-preview{aspect-ratio:16/7;background:var(--surface-3);display:flex;align-items:center;justify-content:center} .slot-preview img{width:100%;height:100%;object-fit:cover} .slot-empty{color:var(--muted);font-size:.85rem} .slot-form{display:flex;gap:10px;padding:14px 16px} .slot-form select{flex:1} .media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-top:16px} .media-card{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface-2);display:flex;flex-direction:column} .media-thumb{aspect-ratio:4/3;background:var(--surface-3)} .media-thumb img{width:100%;height:100%;object-fit:cover} .media-meta{padding:12px 14px 6px;display:flex;flex-direction:column;gap:3px} .media-meta strong{font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .media-meta span{color:var(--muted);font-size:.76rem} .media-tags{padding:0 14px 8px;display:flex;gap:6px;min-height:14px} .tag{background:var(--sb-active-bg);color:var(--brand);border:1px solid rgba(36,86,255,.3); font-size:.7rem;padding:1px 8px;border-radius:20px} .media-card form{padding:0 14px 14px;margin-top:auto} /* ---------- pagina-editor ---------- */ .grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:14px} .grid2 label.full{grid-column:1 / -1} .grid2 small,label small{color:var(--muted);font-weight:400} .pillar-edit{display:flex;flex-direction:column;gap:14px;margin-top:14px} .pe-row{display:grid;grid-template-columns:240px 1fr;gap:14px;align-items:start} .pe-title{font-weight:600} .save-bar{position:sticky;bottom:0;background:linear-gradient(transparent,var(--page-bg) 45%); padding:18px 0 6px;display:flex;gap:12px;justify-content:flex-end} .save-bar .btn-primary{padding:13px 40px} /* ---------- taken ---------- */ .filters{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 18px} .filters input[type=text]{flex:1;min-width:200px} .filters select{width:auto;min-width:150px} .table-wrap{overflow-x:auto} table.tasks{width:100%;border-collapse:collapse;font-size:.9rem} table.tasks th{text-align:left;color:var(--muted);font-weight:600;font-size:.74rem;text-transform:uppercase;letter-spacing:.5px;padding:10px 12px;border-bottom:1px solid var(--line)} table.tasks td{padding:12px;border-bottom:1px solid var(--line);vertical-align:top} table.tasks tr:hover{background:var(--surface-2)} .t-title{font-weight:600;color:var(--ink)} .t-title:hover{color:var(--brand)} .t-prio{display:inline-block;margin-left:8px;font-size:.68rem;padding:1px 7px;border-radius:20px;border:1px solid var(--line);color:var(--muted)} .prio-hoog{color:var(--danger);border-color:rgba(225,29,72,.4)} .prio-laag{color:var(--ok);border-color:rgba(13,159,110,.35)} .status-pill{font-size:.78rem;padding:3px 10px;border-radius:20px;background:var(--surface-3);border:1px solid var(--line)} .badge{font-size:.68rem;padding:1px 7px;border-radius:20px;margin-left:6px} .badge.over{background:rgba(225,29,72,.14);color:var(--danger);border:1px solid rgba(225,29,72,.35)} .badge.due{background:rgba(214,158,0,.16);color:#b88600;border:1px solid rgba(214,158,0,.4)} .row-over{background:rgba(225,29,72,.04)} .row-due{background:rgba(214,158,0,.05)} .actions{white-space:nowrap} .actions form{display:inline;margin-left:10px} /* ---------- instellingen ---------- */ table.opt-table{width:100%;border-collapse:collapse;margin:10px 0} table.opt-table th{text-align:left;color:var(--muted);font-size:.72rem;text-transform:uppercase;padding:6px 8px} table.opt-table td{padding:5px 8px} table.opt-table input{padding:8px 10px} .w-small{max-width:140px}.w-tiny{max-width:80px} .opt-actions{margin:4px 0 14px} .add-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;border-top:1px dashed var(--line);padding-top:14px;margin-top:6px} .add-row input[type=text]{flex:1;min-width:160px} /* ---------- login ---------- */ .login-body{min-height:100vh;display:flex;align-items:center;justify-content:center; background:radial-gradient(60vw 60vw at 30% 0%,rgba(36,86,255,.1),transparent 60%),var(--page-bg)} .login-card{width:min(390px,92vw);background:var(--surface);border:1px solid var(--line); border-radius:18px;padding:38px 34px;display:flex;flex-direction:column;gap:16px;box-shadow:0 10px 40px rgba(20,30,60,.1)} .login-logo{height:38px;width:auto;align-self:flex-start} .login-sub{color:var(--muted);font-size:.9rem;margin-top:-6px} /* ---------- responsive ---------- */ @media(max-width:860px){ .sidebar{transform:translateX(-100%);transition:transform .25s ease;box-shadow:0 0 40px rgba(0,0,0,.25)} .sidebar.open{transform:none} .sidebar.open ~ .sb-backdrop{display:block} .sb-toggle{display:flex} .cms-main{margin-left:0;padding:74px 18px 60px} .upload-form,.slots,.grid2,.pe-row{grid-template-columns:1fr} } /* ---------- dashboard ---------- */ .stat-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px} .stat-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); padding:20px 22px;box-shadow:var(--shadow);transition:.15s;display:block} .stat-card:hover{transform:translateY(-2px);border-color:var(--brand-2)} .sc-num{font-size:2.1rem;font-weight:800;line-height:1;color:var(--ink)} .sc-label{color:var(--muted);font-size:.84rem;margin-top:6px} .stat-card.sc-danger .sc-num{color:var(--danger)} .stat-card.sc-warn .sc-num{color:#c98a00} .stat-card.sc-info .sc-num{color:var(--brand)} .dash-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start} .dash-task{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:11px 0;border-bottom:1px solid var(--line)} .dash-task:last-child{border-bottom:0} .dash-task:hover .dt-title{color:var(--brand)} .dt-title{font-weight:600;font-size:.92rem} .dt-meta{color:var(--muted);font-size:.78rem;grid-column:1} .dt-date{grid-row:1;grid-column:2;color:var(--muted);font-size:.8rem;text-align:right} .dash-task .status-pill{grid-row:2;grid-column:2;justify-self:end;font-size:.7rem} /* ---------- activiteiten / tijdlijn ---------- */ .update-add{margin:6px 0 22px} .update-add textarea{margin-bottom:10px} .update-add-row{display:flex;gap:14px;align-items:end;flex-wrap:wrap} label.inline{flex-direction:column;font-size:.82rem} label.inline select{min-width:200px} .timeline{list-style:none;display:flex;flex-direction:column;gap:0;margin-top:6px} .timeline li{display:flex;gap:14px;padding:0 0 18px;position:relative} .timeline li:not(:last-child)::before{content:"";position:absolute;left:5px;top:14px;bottom:0;width:2px;background:var(--line)} .tl-dot{width:12px;height:12px;border-radius:50%;background:var(--brand);margin-top:3px;flex:0 0 12px;z-index:1;border:2px solid var(--surface)} .tl-body{flex:1} .tl-meta{font-size:.78rem;color:var(--muted);display:flex;gap:6px;align-items:center;flex-wrap:wrap} .tl-meta .status-pill{font-size:.68rem;padding:1px 8px} .tl-note{margin-top:4px;font-size:.92rem;color:var(--ink)} @media(max-width:980px){.stat-cards{grid-template-columns:repeat(2,1fr)}.dash-cols{grid-template-columns:1fr}} /* ---------- status-kleuren + icon-acties ---------- */ .task-cell{display:flex;align-items:center;gap:9px} .st-dot{width:11px;height:11px;border-radius:50%;flex:0 0 11px;display:inline-block;background:var(--muted)} .dt-title .st-dot{margin-right:8px;width:9px;height:9px;flex-basis:9px;vertical-align:middle} /* dot-kleuren */ .st-open{--c:#2456ff} .st-busy{--c:#d68a00} .st-wait{--c:#8b5cf6} .st-done{--c:#0d9f6e} .st-lost{--c:#e11d48} .st-default{--c:#94a3b8} .st-dot.st-open,.st-dot.st-busy,.st-dot.st-wait,.st-dot.st-done,.st-dot.st-lost,.st-dot.st-default{background:var(--c)} /* status-pill ingekleurd per status */ .status-pill.st-open,.status-pill.st-busy,.status-pill.st-wait,.status-pill.st-done,.status-pill.st-lost,.status-pill.st-default{ color:var(--c);border-color:color-mix(in srgb, var(--c) 40%, transparent); background:color-mix(in srgb, var(--c) 12%, transparent)} /* icon-knoppen in de actiekolom */ .actions{white-space:nowrap;display:flex;gap:6px;align-items:center} .actions form{display:inline;margin:0} .icon-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px; border-radius:9px;border:1px solid var(--line);background:var(--surface);color:var(--muted); cursor:pointer;transition:.15s;padding:0} .icon-btn:hover{color:var(--brand);border-color:var(--brand-2);background:var(--surface-2)} .icon-btn svg{width:17px;height:17px} /* ---------- relaties / mail ---------- */ .rel-type{font-size:.72rem;padding:2px 9px;border-radius:20px;border:1px solid var(--line)} .rel-organisatie{color:var(--brand);background:color-mix(in srgb,var(--brand) 10%,transparent);border-color:color-mix(in srgb,var(--brand) 35%,transparent)} .rel-particulier{color:#8b5cf6;background:color-mix(in srgb,#8b5cf6 10%,transparent);border-color:color-mix(in srgb,#8b5cf6 35%,transparent)} .mail-block{margin:4px 0 14px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2)} .mail-block .chk{display:flex;align-items:center;gap:9px;font-size:.9rem;color:var(--ink);cursor:pointer} .mail-block .chk input{width:auto} .mail-fields{margin-top:10px} .mail-fields input{width:100%} .tl-tag{font-size:.68rem;padding:1px 8px;border-radius:20px;border:1px solid var(--line)} .tl-tag.mail{color:var(--brand);border-color:color-mix(in srgb,var(--brand) 35%,transparent)} .tl-tag.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent)} .tl-tag.err{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,transparent)} .tl-dot.tl-mail{background:var(--brand)}