/* Cliendo Command Center — brand-matched styling, theme-aware. Primary blue #0066CC, clean modern SaaS: rounded cards, soft shadows. All colors are CSS custom properties so the whole UI has a light and a dark palette. Default follows the OS (prefers-color-scheme); an explicit user choice (data-theme="dark"|"light" on ) always wins. */ /* ---------- Light palette (default) ---------- */ :root { color-scheme: light; /* brand */ --blue: #0066cc; --blue-dark: #0052a6; --blue-050: #eaf3fc; --blue-100: #d6e8fa; --link: #0066cc; /* surfaces + text */ --bg: #f5f7fa; --card: #ffffff; --line: #e6e9ef; --ink: #1a1a1a; --muted: #6b7280; /* form controls */ --input-bg: #ffffff; --input-border: #e6e9ef; --code-bg: #eaf3fc; --code-ink: #0052a6; --pre-bg: #0f172a; --pre-ink: #e2e8f0; /* table */ --thead-bg: #f8fafc; --thead-ink: #475569; --row-line: #f1f3f7; --row-hover: #eaf3fc; /* status accents */ --green: #16a34a; --amber: #d97706; --red: #dc2626; /* badges */ --badge-neutral-bg: #eef2f7; --badge-neutral-ink: #475569; --s-getrieerd-bg: #fff4e0; --s-getrieerd-ink: #b45309; --s-goedgekeurd-bg: #eafaf0; --s-goedgekeurd-ink: #15803d; --s-verrijkt-bg: #eaf3fc; --s-verrijkt-ink: #0052a6; --s-afgekeurd-bg: #fdecec; --s-afgekeurd-ink: #b91c1c; --oordeel-bg: #f3e8ff; --oordeel-ink: #7c3aed; --go-bg: #16a34a; --go-ink: #ffffff; /* toasts */ --toast-success-bg: #eafaf0; --toast-success-ink: #15803d; --toast-success-line: #b7e4c7; --toast-error-bg: #fdecec; --toast-error-ink: #b91c1c; --toast-error-line: #f3c2c2; --toast-info-bg: #eaf3fc; --toast-info-ink: #0052a6; --toast-info-line: #bcd9f5; --toast-warning-bg: #fff4e0; --toast-warning-ink: #b45309; --toast-warning-line: #f6d79a; /* sidebar (stays dark navy in both themes) */ --sidebar-bg: #0b1f33; --sidebar-ink: #cbd5e1; --sidebar-ink-dim: #7f9bbb; --sidebar-label: #64748b; --sidebar-hover: rgba(255, 255, 255, 0.06); --sidebar-line: rgba(255, 255, 255, 0.08); /* misc */ --shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 4px 16px rgba(16, 24, 40, 0.05); --shadow-lg: 0 8px 24px rgba(16, 24, 40, 0.10); --card-error-bg: #fdecec; --card-error-line: #f3c2c2; --dot-gray: #cbd5e1; --focus-ring: rgba(0, 102, 204, 0.25); --radius: 12px; --radius-sm: 8px; --font: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; } /* ---------- Dark palette ---------- */ /* Applied when the OS prefers dark AND the user has not forced light. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --blue: #4a9eff; --blue-dark: #78b6ff; --blue-050: #16283d; --blue-100: #1e3550; --link: #6cb0ff; --bg: #0f151c; --card: #1a222c; --line: #2b3540; --ink: #e6edf3; --muted: #9aa7b4; --input-bg: #111a23; --input-border: #33404d; --code-bg: #16283d; --code-ink: #9cc7ff; --pre-bg: #0b1220; --pre-ink: #cbd5e1; --thead-bg: #212b36; --thead-ink: #aeb9c4; --row-line: #232d38; --row-hover: #1f2a36; --green: #3ecf7a; --amber: #f0a742; --red: #f0716b; --badge-neutral-bg: #2a333d; --badge-neutral-ink: #b7c2cd; --s-getrieerd-bg: #3a2c14; --s-getrieerd-ink: #f0b968; --s-goedgekeurd-bg: #14321f; --s-goedgekeurd-ink: #5fd98c; --s-verrijkt-bg: #16283d; --s-verrijkt-ink: #7db4ff; --s-afgekeurd-bg: #3a1c1c; --s-afgekeurd-ink: #ff9a94; --oordeel-bg: #2c2140; --oordeel-ink: #c4a5ff; --go-bg: #2f9e5c; --go-ink: #eafff2; --toast-success-bg: #14321f; --toast-success-ink: #7fe0a3; --toast-success-line: #2f6b45; --toast-error-bg: #3a1c1c; --toast-error-ink: #ff9a94; --toast-error-line: #7a3a37; --toast-info-bg: #16283d; --toast-info-ink: #8cc2ff; --toast-info-line: #2f5680; --toast-warning-bg: #3a2c14; --toast-warning-ink: #f0c37a; --toast-warning-line: #7a5a2a; --sidebar-bg: #0a1620; --shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.35); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.45); --card-error-bg: #3a1c1c; --card-error-line: #7a3a37; --dot-gray: #4a5763; --focus-ring: rgba(74, 158, 255, 0.35); } } /* Explicit dark choice always wins (regardless of OS preference). */ :root[data-theme="dark"] { color-scheme: dark; --blue: #4a9eff; --blue-dark: #78b6ff; --blue-050: #16283d; --blue-100: #1e3550; --link: #6cb0ff; --bg: #0f151c; --card: #1a222c; --line: #2b3540; --ink: #e6edf3; --muted: #9aa7b4; --input-bg: #111a23; --input-border: #33404d; --code-bg: #16283d; --code-ink: #9cc7ff; --pre-bg: #0b1220; --pre-ink: #cbd5e1; --thead-bg: #212b36; --thead-ink: #aeb9c4; --row-line: #232d38; --row-hover: #1f2a36; --green: #3ecf7a; --amber: #f0a742; --red: #f0716b; --badge-neutral-bg: #2a333d; --badge-neutral-ink: #b7c2cd; --s-getrieerd-bg: #3a2c14; --s-getrieerd-ink: #f0b968; --s-goedgekeurd-bg: #14321f; --s-goedgekeurd-ink: #5fd98c; --s-verrijkt-bg: #16283d; --s-verrijkt-ink: #7db4ff; --s-afgekeurd-bg: #3a1c1c; --s-afgekeurd-ink: #ff9a94; --oordeel-bg: #2c2140; --oordeel-ink: #c4a5ff; --go-bg: #2f9e5c; --go-ink: #eafff2; --toast-success-bg: #14321f; --toast-success-ink: #7fe0a3; --toast-success-line: #2f6b45; --toast-error-bg: #3a1c1c; --toast-error-ink: #ff9a94; --toast-error-line: #7a3a37; --toast-info-bg: #16283d; --toast-info-ink: #8cc2ff; --toast-info-line: #2f5680; --toast-warning-bg: #3a2c14; --toast-warning-ink: #f0c37a; --toast-warning-line: #7a5a2a; --sidebar-bg: #0a1620; --shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.35); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.45); --card-error-bg: #3a1c1c; --card-error-line: #7a3a37; --dot-gray: #4a5763; --focus-ring: rgba(74, 158, 255, 0.35); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font); color: var(--ink); background: var(--bg); font-size: 14px; line-height: 1.5; } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; } code { background: var(--code-bg); color: var(--code-ink); padding: 1px 5px; border-radius: 4px; font-size: 12px; } pre { background: var(--pre-bg); color: var(--pre-ink); padding: 12px; border-radius: 8px; overflow: auto; font-size: 12px; } /* ---------- Layout ---------- */ .layout { display: flex; min-height: 100vh; } .sidebar { width: 250px; background: var(--sidebar-bg); color: var(--sidebar-ink); padding: 20px 16px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; } .main { flex: 1; min-width: 0; display: flex; flex-direction: column; } /* ---------- Brand ---------- */ .brand { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; } .brand-mark { width: 34px; height: 34px; border-radius: 9px; background: var(--blue); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 18px; box-shadow: 0 2px 8px rgba(0, 102, 204, 0.4); } .brand-name { font-weight: 700; color: #fff; line-height: 1.15; display: flex; flex-direction: column; } .brand-sub { font-weight: 500; font-size: 11px; color: var(--sidebar-ink-dim); letter-spacing: .3px; text-transform: uppercase; } /* ---------- Nav ---------- */ .nav { display: flex; flex-direction: column; gap: 4px; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--sidebar-ink); font-weight: 500; } .nav-item:hover { background: var(--sidebar-hover); text-decoration: none; color: #fff; } .nav-item.active { background: var(--blue); color: #fff; } .nav-item.small { font-size: 13px; padding: 8px 12px; } .nav-ico { font-size: 15px; } .nav-external { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--sidebar-line); } .nav-label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--sidebar-label); padding: 0 12px; } .logout { margin-top: auto; padding-top: 16px; } /* ---------- Topbar ---------- */ .topbar { display: flex; align-items: center; justify-content: space-between; padding: 18px 28px; background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; } .topbar-title { font-size: 20px; font-weight: 700; margin: 0; } .topbar-right { display: flex; align-items: center; gap: 10px; } .pill { background: var(--blue-050); color: var(--blue-dark); font-weight: 600; padding: 5px 12px; border-radius: 999px; font-size: 13px; } .content { padding: 24px 28px; } /* ---------- Theme toggle ---------- */ .theme-toggle { padding: 8px 10px; line-height: 1; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; min-width: 38px; } .theme-toggle .theme-ico { display: none; } /* Light mode -> show moon (click to go dark). Dark mode -> show sun. */ :root:not([data-theme="dark"]) .theme-toggle .theme-ico-moon { display: inline; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) .theme-toggle .theme-ico-moon { display: none; } :root:not([data-theme="light"]):not([data-theme="dark"]) .theme-toggle .theme-ico-sun { display: inline; } } :root[data-theme="dark"] .theme-toggle .theme-ico-sun { display: inline; } :root[data-theme="dark"] .theme-toggle .theme-ico-moon { display: none; } :root[data-theme="light"] .theme-toggle .theme-ico-moon { display: inline; } :root[data-theme="light"] .theme-toggle .theme-ico-sun { display: none; } /* ---------- Cards ---------- */ .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; margin-bottom: 18px; } .card-error { border-color: var(--card-error-line); background: var(--card-error-bg); } .muted { color: var(--muted); } .center { text-align: center; } .mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 15px; border-radius: var(--radius-sm); font-weight: 600; font-size: 13.5px; border: 1px solid transparent; cursor: pointer; transition: all .15s; white-space: nowrap; } .btn:hover { text-decoration: none; } .btn-primary { background: var(--blue); color: #fff; } .btn-primary:hover { background: var(--blue-dark); color: #fff; } .btn-outline { background: var(--card); color: var(--blue-dark); border-color: var(--blue-100); } .btn-outline:hover { background: var(--blue-050); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); } .btn-ghost:hover { background: var(--bg); } .btn-block { width: 100%; } .btn:disabled, .btn.is-loading { opacity: .7; cursor: progress; pointer-events: none; } /* Spinner shown on a button in its loading state. */ .btn.is-loading::before { content: ""; width: 13px; height: 13px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; display: inline-block; animation: cc-spin .6s linear infinite; } @keyframes cc-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .btn.is-loading::before { animation: none; } } /* ---------- Filters (collapsible) ---------- */ .filters-summary { display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; font-weight: 600; color: var(--ink); user-select: none; } .filters-summary::-webkit-details-marker { display: none; } .filters-summary-label { font-size: 14px; } .filter-count { font-size: 12px; } .filter-reset { font-size: 12.5px; font-weight: 600; } .filters-chevron { margin-left: auto; color: var(--muted); transition: transform .15s; } .filters-details[open] .filters-chevron { transform: rotate(180deg); } .filters { margin-top: 14px; } .filters .filter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; } .filter label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 4px; } .filter input, .filter select, .input { width: 100%; padding: 8px 10px; border: 1px solid var(--input-border); border-radius: var(--radius-sm); font-size: 13.5px; font-family: inherit; background: var(--input-bg); color: var(--ink); } .filter select[multiple] { padding: 4px; height: auto; } .filter input:focus, .filter select:focus, .input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--focus-ring); } .field-hint { display: block; font-size: 10.5px; color: var(--muted); margin-top: 3px; } .filter-actions { margin-top: 14px; display: flex; gap: 8px; } .filter-wide { grid-column: 1 / -1; } /* ---------- Bulk bar ---------- */ .bulkbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .bulkbar-left { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .bulkbar-right { display: flex; gap: 8px; flex-wrap: wrap; } .inline-limit { font-size: 12.5px; color: var(--muted); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; } .limit-input { width: 70px; padding: 6px 8px; border: 1px solid var(--input-border); border-radius: 6px; font-family: inherit; background: var(--input-bg); color: var(--ink); } /* ---------- Table ---------- */ .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); } .data-table { width: 100%; border-collapse: collapse; font-size: 13px; } .data-table thead th { position: sticky; top: 0; background: var(--thead-bg); text-align: left; font-weight: 600; color: var(--thead-ink); padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; z-index: 1; } .data-table tbody td { padding: 9px 12px; border-bottom: 1px solid var(--row-line); vertical-align: middle; } .data-table tbody tr:hover { background: var(--row-hover); } .col-check { width: 34px; text-align: center; } .cell-naam { font-weight: 600; max-width: 260px; } .sort-link { color: var(--thead-ink); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; } .sort-link:hover { color: var(--blue); text-decoration: none; } .sort-link.sorted { color: var(--blue); } .caret { font-size: 10px; } .empty { text-align: center; color: var(--muted); padding: 30px !important; } .empty-state { text-align: center; padding: 36px 20px; color: var(--muted); } .empty-state .empty-ico { font-size: 30px; display: block; margin-bottom: 8px; } /* SBI activity label next to the code */ .cell-sbi .sbi-code { font-weight: 600; } .cell-sbi .sbi-desc { color: var(--muted); font-size: 12px; } /* ---------- Badges / dots ---------- */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; } .badge-status { background: var(--badge-neutral-bg); color: var(--badge-neutral-ink); } .s-nieuw { background: var(--badge-neutral-bg); color: var(--badge-neutral-ink); } .s-getrieerd { background: var(--s-getrieerd-bg); color: var(--s-getrieerd-ink); } .s-goedgekeurd { background: var(--s-goedgekeurd-bg); color: var(--s-goedgekeurd-ink); } .s-verrijkt { background: var(--s-verrijkt-bg); color: var(--s-verrijkt-ink); } .s-afgekeurd { background: var(--s-afgekeurd-bg); color: var(--s-afgekeurd-ink); } .badge-oordeel { background: var(--oordeel-bg); color: var(--oordeel-ink); } .badge-go { background: var(--go-bg); color: var(--go-ink); } .badge-ico { font-size: 11px; line-height: 1; } .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; } .dot-green { background: var(--green); } .dot-gray { background: var(--dot-gray); } .link { font-weight: 600; } /* Status legend */ .status-legend { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-top: 12px; font-size: 12px; color: var(--muted); } .status-legend .legend-title { font-weight: 700; color: var(--ink); } .status-legend .legend-item { display: inline-flex; align-items: center; gap: 5px; } /* ---------- Toewijzen deals ---------- */ .summary-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 18px; } .summary-tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; } .summary-name { font-weight: 700; margin-bottom: 8px; } .summary-stats { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .summary-value { font-weight: 700; color: var(--blue-dark); } .assign-cell { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .assign-select { padding: 6px 8px; border: 1px solid var(--input-border); border-radius: 6px; font-family: inherit; font-size: 13px; background: var(--input-bg); color: var(--ink); max-width: 180px; } .btn-sm { padding: 5px 10px; font-size: 12px; } /* ---------- Rule builder ---------- */ .rule-form { margin-top: 14px; } .rule-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-bottom: 12px; } .cond-group { margin: 10px 0; padding: 12px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); } .cond-label { display: block; font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .3px; } .chk-row { display: flex; flex-wrap: wrap; gap: 10px 16px; } .chk { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 500; } .cond-group select[multiple] { width: 100%; padding: 4px; } .cond-group select, .cond-group input { padding: 8px 10px; border: 1px solid var(--input-border); border-radius: var(--radius-sm); font-family: inherit; font-size: 13.5px; background: var(--input-bg); color: var(--ink); } /* ---------- Pagination ---------- */ .pagination { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; flex-wrap: wrap; gap: 10px; } .pager { display: flex; gap: 6px; } /* ---------- Embed ---------- */ .embed-badge { display: inline-block; margin-bottom: 10px; } .embed-wrap { position: relative; width: 100%; height: calc(100vh - 150px); min-height: 500px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); background: #fff; } .embed-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* ---------- Link cards ---------- */ .link-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; } .link-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; display: flex; flex-direction: column; gap: 4px; transition: transform .15s, box-shadow .15s; } .link-card:hover { transform: translateY(-2px); text-decoration: none; box-shadow: var(--shadow-lg); } .link-ico { font-size: 28px; } .link-title { font-weight: 700; font-size: 16px; color: var(--ink); margin-top: 6px; } .link-desc { color: var(--muted); font-size: 13px; } /* ---------- Toasts ---------- */ #toasts { position: fixed; top: 16px; right: 16px; z-index: 1000; width: min(380px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 10px; pointer-events: none; } .toast { position: relative; padding: 12px 40px 12px 14px; border-radius: var(--radius-sm); font-weight: 500; box-shadow: var(--shadow-lg); border: 1px solid transparent; pointer-events: auto; display: flex; align-items: flex-start; gap: 9px; animation: cc-toast-in .22s ease-out; } @keyframes cc-toast-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .toast { animation: none; } } .toast .toast-ico { flex: none; font-weight: 700; } .toast .toast-msg { flex: 1; min-width: 0; } .toast-success { background: var(--toast-success-bg); color: var(--toast-success-ink); border-color: var(--toast-success-line); } .toast-error { background: var(--toast-error-bg); color: var(--toast-error-ink); border-color: var(--toast-error-line); } .toast-info { background: var(--toast-info-bg); color: var(--toast-info-ink); border-color: var(--toast-info-line); } .toast-warning { background: var(--toast-warning-bg); color: var(--toast-warning-ink); border-color: var(--toast-warning-line); } /* Flask flashes a "message" category by default -> treat like info. */ .toast-message { background: var(--toast-info-bg); color: var(--toast-info-ink); border-color: var(--toast-info-line); } .toast-x { position: absolute; right: 8px; top: 8px; background: none; border: none; font-size: 18px; line-height: 1; cursor: pointer; color: inherit; opacity: .6; } .toast-x:hover { opacity: 1; } /* ---------- Login ---------- */ .login-body { min-height: 100vh; display: grid; place-items: center; background: linear-gradient(135deg, #0b1f33 0%, #0066cc 100%); } .login-card { background: var(--card); color: var(--ink); border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); padding: 34px; width: 360px; max-width: 92vw; } .brand-login { justify-content: center; margin-bottom: 8px; } .login-lead { color: var(--muted); text-align: center; margin: 0 0 20px; } .field-label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 6px; } .login-card .input { margin-bottom: 16px; } .err-code { font-size: 54px; margin: 0 0 6px; color: var(--blue); text-align: center; font-weight: 800; } /* Toasts shown inside the login/error card flow inline, not fixed. */ .login-card #toasts { position: static; width: auto; margin-bottom: 16px; } /* ---------- Responsive ---------- */ @media (max-width: 860px) { .sidebar { position: static; height: auto; width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; } .layout { flex-direction: column; } .nav { flex-direction: row; flex-wrap: wrap; } .nav-external { margin-top: 0; padding-top: 0; border: none; } .logout { margin: 0; padding: 0; } .embed-wrap { height: 70vh; } #toasts { top: auto; bottom: 12px; right: 12px; left: 12px; width: auto; } }