/* Kalleo Wit / Kalleo Zwart: the house style (brand/kalleo).
 *
 * Loaded after the other console styles on every page that paints a theme
 * (console, softphone, meeting, kiosk). Everything here is scoped to the two
 * Kalleo presets, so every other ready-made theme keeps its own look.
 * Colours come from the theme tokens (theme-core.js); this file only shapes:
 * a white/ink sidebar with the K mark, soft rounded pills for the active menu
 * item, 22px cards (soft shadow on white, hairline on black), ink pill
 * buttons, a classic green call button, hairline-ring dial keys and
 * message-style chat bubbles. Kalleo Intelligence (AI) is always blue.
 * Strict CSP: tokens only, no inline styles. */

:root[data-preset^="kalleo"] {
  --kalleo-blue: #0A84FF;
  --kalleo-blue-text: var(--info);
  --kalleo-call: #1FA855;
  --kalleo-call-ink: #FFFFFF;
  --kalleo-hangup: #E5342B;
  --kalleo-soft: color-mix(in srgb, var(--text) 6%, var(--surface-solid));
  --kalleo-ring: color-mix(in srgb, var(--text) 16%, transparent);
  --mono: var(--font);
}
:root[data-preset="kalleo-zwart"] {
  --kalleo-hangup: #FF453A;
  --kalleo-soft: #1C1C1E;
  --kalleo-ring: rgba(255, 255, 255, 0.16);
  --border: rgba(255, 255, 255, 0.08);
}

/* ------------------------------------------------------------------ brand */
.brand-mark .kalleo-mark { width: 20px; height: 20px; fill: currentColor; }
:root[data-preset^="kalleo"] .brand-mark,
:root[data-preset^="kalleo"] .sp-mark {
  background: transparent; box-shadow: none; color: var(--side-strong); width: 28px; height: 28px; border-radius: 0;
}
:root[data-preset^="kalleo"] .sp-mark { color: var(--text); }
:root[data-preset^="kalleo"] .sp-mark .kalleo-mark { width: 24px; height: 24px; }
:root[data-preset^="kalleo"] .sp-mark.sm { width: 20px; height: 20px; }
:root[data-preset^="kalleo"] .sp-mark.sm .kalleo-mark { width: 18px; height: 18px; }
:root[data-preset^="kalleo"] .brand-mark .kalleo-mark { width: 26px; height: 26px; }
:root[data-preset^="kalleo"] .login-hero .brand-mark,
:root[data-preset^="kalleo"] .boot-card .brand-mark { color: var(--text); }
:root[data-preset^="kalleo"] .brand-name { font-size: 21px; font-weight: 700; letter-spacing: -0.03em; }
:root[data-preset^="kalleo"] .brand-sub { font-size: 12px; }

/* ---------------------------------------------------------------- sidebar */
:root[data-preset^="kalleo"] .sidebar { backdrop-filter: none; -webkit-backdrop-filter: none; }
:root[data-preset^="kalleo"] .shell:not(.is-collapsed) .nav-section,
:root[data-preset^="kalleo"] .pv-side .nav-section { font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; }
:root[data-preset^="kalleo"] .nav a { border-radius: 10px; border-color: transparent; font-size: 14.5px; }
:root[data-preset^="kalleo"] .nav a[aria-current="page"] {
  background: var(--kalleo-soft); border-color: transparent; color: var(--side-strong); font-weight: 600;
}
:root[data-preset^="kalleo"] .nav a[aria-current="page"] .icon { color: var(--side-strong); }
:root[data-preset^="kalleo"] .nav a[aria-current="page"]::before { display: none; }
:root[data-preset^="kalleo"] .nav-count { background: var(--kalleo-blue); color: #FFFFFF; }
:root[data-preset^="kalleo"] .shell:not(.is-collapsed) .me-card { background: var(--kalleo-soft); border-color: transparent; border-radius: 14px; }
:root[data-preset^="kalleo"] .av-sq { border-radius: 50%; background: var(--surface-solid); box-shadow: none; color: var(--side-strong); }
:root[data-preset^="kalleo"] .shell:not(.is-collapsed) .org-chip { background: var(--kalleo-soft); border-color: transparent; }

/* ------------------------------------------------------------- page + cards */
:root[data-preset^="kalleo"] .topbar h1 { font-size: 32px; font-weight: 700; letter-spacing: -0.025em; }
:root[data-preset^="kalleo"] .card,
:root[data-preset^="kalleo"] .sp-card,
:root[data-preset^="kalleo"] .login-card { border-radius: 22px; backdrop-filter: none; -webkit-backdrop-filter: none; }
:root[data-preset="kalleo-wit"] .card,
:root[data-preset="kalleo-wit"] .wp-tile,
:root[data-preset="kalleo-wit"] .sp-card,
:root[data-preset="kalleo-wit"] .login-card {
  border-color: transparent; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.05);
}
:root[data-preset="kalleo-zwart"] .card,
:root[data-preset="kalleo-zwart"] .wp-tile,
:root[data-preset="kalleo-zwart"] .sp-card,
:root[data-preset="kalleo-zwart"] .login-card { border-color: rgba(255, 255, 255, 0.08); box-shadow: none; }

/* ---------------------------------------------------------------- buttons */
:root[data-preset^="kalleo"] .btn-primary,
:root[data-preset^="kalleo"] button.primary {
  background: var(--btn-bg); color: var(--btn-ink); box-shadow: none;
}
:root[data-preset^="kalleo"] .btn-primary:hover,
:root[data-preset^="kalleo"] button.primary:hover:not(:disabled) { background: color-mix(in srgb, var(--btn-bg) 86%, var(--surface-solid)); }

/* The call button: classic green with a white handset (variant A). */
:root[data-preset^="kalleo"] .btn-call,
:root[data-preset^="kalleo"] button.ok,
:root[data-preset^="kalleo"] button.primary#btn-dial {
  background: var(--kalleo-call); color: var(--kalleo-call-ink); border-color: transparent; box-shadow: none; border-radius: 999px;
}
:root[data-preset^="kalleo"] .btn-call:hover,
:root[data-preset^="kalleo"] button.ok:hover:not(:disabled),
:root[data-preset^="kalleo"] button.primary#btn-dial:hover:not(:disabled) { background: color-mix(in srgb, var(--kalleo-call) 88%, black); }
:root[data-preset^="kalleo"] .btn-call .icon { color: var(--kalleo-call-ink); }

/* Hang up: a solid red pill. */
:root[data-preset^="kalleo"] button.bad.wide { background: var(--kalleo-hangup); color: #FFFFFF; box-shadow: none; }
:root[data-preset^="kalleo"] button.bad.wide:hover:not(:disabled) { background: color-mix(in srgb, var(--kalleo-hangup) 88%, black); }

/* --------------------------------------------------------- dial pad: Ring */
:root[data-preset^="kalleo"] .dialpad { gap: 12px 14px; }
:root[data-preset^="kalleo"] .dial-key,
:root[data-preset^="kalleo"] .keypad button {
  height: 58px; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1.25px var(--kalleo-ring);
  font-family: var(--font); font-weight: 300; font-size: 24px; color: var(--text);
}
:root[data-preset^="kalleo"] .dial-key:hover,
:root[data-preset^="kalleo"] .keypad button:hover:not(:disabled) { background: var(--kalleo-soft); }
:root[data-preset^="kalleo"] .dial-input { font-family: var(--font); font-weight: 300; letter-spacing: -0.01em; }

/* ---------------------------------------------------------- in-call panel */
:root[data-preset^="kalleo"] .ctl { border-radius: 16px; background: var(--kalleo-soft); box-shadow: none; }
:root[data-preset^="kalleo"] .ctl[aria-pressed="true"] { background: var(--text); color: var(--surface-solid); box-shadow: none; }
:root[data-preset^="kalleo"] .pill-live { color: var(--ok); }
:root[data-preset^="kalleo"] .timer { font-family: var(--font); font-weight: 600; font-size: 22px; color: var(--ok); }
:root[data-preset^="kalleo"] .ring-av {
  background: var(--kalleo-soft); color: var(--text); box-shadow: 0 0 0 6px color-mix(in srgb, var(--ok) 14%, transparent);
}
:root[data-preset^="kalleo"] .ring-av::after { border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
:root[data-preset^="kalleo"] .big { font-weight: 700; letter-spacing: -0.025em; }
:root[data-preset^="kalleo"] .incoming { border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
/* Kalleo Intelligence (live assist, warm hand-off): always blue. */
:root[data-preset^="kalleo"] .sp-card.assist,
:root[data-preset^="kalleo"] .handoff { border: 1px solid var(--kalleo-blue); border-left-width: 1px; }
:root[data-preset^="kalleo"] .crm .tag { background: var(--kalleo-soft); color: var(--text); }

/* ------------------------------------------------------------------- chat */
:root[data-preset^="kalleo"] .chat-row { position: relative; padding-left: 22px; border-radius: 12px; }
:root[data-preset^="kalleo"] .chat-row.unread::before {
  content: ""; position: absolute; left: 7px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%;
  background: var(--kalleo-blue);
}
:root[data-preset^="kalleo"] .chat-row[aria-current="page"] { background: var(--kalleo-soft); border-color: transparent; }
:root[data-preset^="kalleo"] .chat-row .nav-count { background: var(--kalleo-blue); color: #FFFFFF; }
:root[data-preset^="kalleo"] .msg:hover { background: transparent; }
:root[data-preset^="kalleo"] .msg-av { border-radius: 50%; }
:root[data-preset^="kalleo"] .msg-text {
  display: inline-block; max-width: min(560px, 100%); padding: 9px 14px; margin-top: 3px; border-radius: 18px 18px 18px 6px;
  background: var(--surface-solid); text-align: left;
}
:root[data-preset="kalleo-wit"] .msg-text { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); }
:root[data-preset="kalleo-wit"] .chat-main { background: var(--bg); }
:root[data-preset="kalleo-zwart"] .msg-text { background: #1C1C1E; }
/* Own messages on the right, ink with white text (white with ink in Kalleo Zwart). */
/* Mirror the row: avatar and hover time stay, on the right. */
:root[data-preset^="kalleo"] .msg.mine { grid-template-columns: minmax(0, 1fr) 40px; }
:root[data-preset^="kalleo"] .msg.mine .msg-av,
:root[data-preset^="kalleo"] .msg.mine .msg-gutter { grid-column: 2; grid-row: 1; }
:root[data-preset^="kalleo"] .msg.mine .msg-body { grid-column: 1; grid-row: 1; text-align: right; }
:root[data-preset^="kalleo"] .msg.mine .msg-meta { justify-content: flex-end; }
:root[data-preset^="kalleo"] .msg.mine .msg-text {
  background: var(--text); color: var(--surface-solid); border-radius: 18px 18px 6px 18px; box-shadow: none;
}
:root[data-preset^="kalleo"] .msg.mine .msg-text a { color: inherit; }
:root[data-preset^="kalleo"] .msg.mentioned { background: transparent; box-shadow: none; }
:root[data-preset^="kalleo"] .msg.mentioned .msg-text { box-shadow: inset 0 0 0 1.5px var(--warn); }

/* --------------------------------------------------------- presence dots */
/* Dots are fills, not text: the bright brand colours (text keeps the darker, readable tones). */
:root[data-preset^="kalleo"] { --kalleo-ok-fill: #1FA855; --kalleo-warn-fill: #D99A00; --kalleo-danger-fill: #E5342B; --kalleo-info-fill: #0A84FF; }
:root[data-preset="kalleo-zwart"] { --kalleo-ok-fill: #30D158; --kalleo-warn-fill: #FFD60A; --kalleo-danger-fill: #FF453A; }
:root[data-preset^="kalleo"] .pdot,
:root[data-preset^="kalleo"] .dot.on,
:root[data-preset^="kalleo"] .presence-dot { box-shadow: none; }
:root[data-preset^="kalleo"] :is(.presence[data-dot="on"] .presence-dot, .presence-dot.dot-on, .presence-dot.dot-ok, .dot.on,
  .pdot.p-beschikbaar) { background: var(--kalleo-ok-fill); }
:root[data-preset^="kalleo"] :is(.presence[data-dot="wait"] .presence-dot, .presence-dot.dot-wait, .presence-dot.dot-warn, .dot.wait,
  .pdot.p-pauze, .pdot.p-nawerk) { background: var(--kalleo-warn-fill); }
:root[data-preset^="kalleo"] :is(.presence[data-dot="off"] .presence-dot, .presence-dot.dot-off, .dot.off) { background: var(--kalleo-danger-fill); }
:root[data-preset^="kalleo"] :is(.presence-dot.dot-info, .pdot.p-in_gesprek) { background: var(--kalleo-info-fill); }
:root[data-preset^="kalleo"] :is(.presence[data-dot="away"] .presence-dot, .presence-dot.dot-away) { background: transparent;
  box-shadow: inset 0 0 0 2px var(--kalleo-warn-fill); }
:root[data-preset^="kalleo"] .pdot.p-online { background: transparent; box-shadow: inset 0 0 0 2px var(--kalleo-ok-fill); }