/* =========================================================================
   Mediums Hemel — day-sky theme (light only)
   Built on top of the plugin's Bootstrap 5.3. Loaded after bootstrap.min.css
   so these rules win ties. See docs/mediumshemel-theming.md.
   ========================================================================= */

:root {
    --sky: #EAF3FC;
    --sky-2: #DCEBF8;
    --mist: #EAF2FB;
    --card: #FFFFFF;
    --card-veil: rgba(255, 255, 255, .74);
    --ink: #26374A;
    --ink-soft: #3E5468;
    --muted: #647B92;
    --line: rgba(63, 109, 181, .16);
    --line-soft: rgba(63, 109, 181, .09);
    --blue: #3F6DB5;
    --blue-lift: #5B8AD6;
    --blue-deep: #2E568F;
    --pink: #D06A9F;
    --pink-soft: #E79EC3;
    --pink-tint: rgba(208, 106, 159, .12);
    --gold: #C9992F;
    --gold-soft: #E9C46A;
    --grad: linear-gradient(135deg, #5B8AD6, #3F6DB5 55%, #2E568F);
    --grad-soft: linear-gradient(135deg, #6FA0E0, #4A7CC0);
    --grad-pink: linear-gradient(135deg, #E48BB8, #D06A9F);
    --glow: rgba(63, 109, 181, .26);
    --glow-pink: rgba(208, 106, 159, .3);
    --shadow-sm: 0 2px 12px -5px rgba(38, 55, 74, .2);
    --shadow-md: 0 20px 50px -30px rgba(46, 86, 143, .4);
    --shadow-lg: 0 34px 70px -32px rgba(46, 86, 143, .5);
    --serif: 'Hoefler Text', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
    --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --nav-veil: rgba(234, 243, 252, .72);

    /* Map a few Bootstrap variables to the palette */
    --bs-body-bg: var(--sky);
    --bs-body-color: var(--ink);
    --bs-link-color: var(--blue);
    --bs-link-hover-color: var(--blue-deep);
    --bs-border-color: var(--line);
}

/* -------------------------------------------------------------------------
   Base
   ------------------------------------------------------------------------- */
html { scroll-behavior: smooth; }

body {
    font-family: var(--sans);
    color: var(--ink);
    background-color: var(--sky);
    background-image:
        radial-gradient(1100px 620px at 12% -8%, rgba(91, 138, 214, .16), transparent 62%),
        radial-gradient(900px 560px at 100% 0%, rgba(233, 158, 195, .12), transparent 58%),
        radial-gradient(1000px 820px at 50% 118%, rgba(63, 109, 181, .08), transparent 60%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    line-height: 1.65;
    min-height: 100vh;
}

main { display: block; }

a { text-decoration: none; }

h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--serif);
    font-weight: 600;
    letter-spacing: .2px;
    text-wrap: balance;
}

.text-body-secondary, .text-muted { color: var(--muted) !important; }

/* uniform icon size (Bootstrap Icons) */
.btn i.bi, .navbar i.bi, .ctb-callbox i.bi { font-size: 1em; line-height: 1; vertical-align: -.125em; }

/* -------------------------------------------------------------------------
   Brand (global — also used by the [mediumshemel_logo] shortcode)
   ------------------------------------------------------------------------- */
.ctb-brand { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--serif); font-size: 1.55rem; font-weight: 600; letter-spacing: .2px; line-height: 1; }
.ctb-lotus { display: block; width: 40px; height: 34px; flex: none; filter: drop-shadow(0 2px 6px var(--glow-pink)); }
.ctb-wordmark { display: inline-flex; align-items: center; line-height: 1; }
.ctb-mediums { color: var(--pink); }
.ctb-hemel { color: var(--blue); }
.ctb-brand-payoff { max-width: 32ch; }

/* -------------------------------------------------------------------------
   Header / navbar — frosted day-sky pill
   ------------------------------------------------------------------------- */
header { position: sticky; top: 0; z-index: 1030; }

.navbar {
    margin-top: .7rem;
    padding: .4rem 1.1rem;
    background: var(--nav-veil) !important;
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    border: 1px solid var(--line);
    border-radius: 100px !important;
    box-shadow: var(--shadow-sm);
}
.navbar .container-fluid { padding: 0; }
.navbar .navbar-nav { gap: 1.1rem; align-items: center; }

.navbar-brand { padding: 0; }
.navbar-brand img { height: 40px; width: auto; }

.navbar .nav-link {
    font-family: var(--sans) !important;
    color: var(--ink-soft) !important;
    font-weight: 600 !important;
    font-size: .82rem !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    padding: .35rem .15rem;
    position: relative;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active { color: var(--blue) !important; }

.navbar .nav-link:not(.dropdown-toggle)::after {
    content: "";
    position: absolute;
    left: 0; right: 100%;
    bottom: -1px; height: 2px;
    background: var(--grad);
    border-radius: 2px;
    transition: right .25s ease;
}
.navbar .nav-link:not(.dropdown-toggle):hover::after,
.navbar .nav-link.active:not(.dropdown-toggle)::after { right: 0; }

/* light hamburger */
.navbar-toggler { border: 0; }
.navbar-toggler:focus { box-shadow: none; }
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%233F6DB5' stroke-linecap='round' stroke-width='2.2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* collapsed mobile menu surface */
@media (max-width: 991.98px) {
    /* a moderate rounded-rect, NOT the 100px pill (which becomes a tall blob when open) */
    .navbar { border-radius: 1.5rem !important; padding: .5rem .65rem; flex-wrap: nowrap; }
    /* brand + login + hamburger stay on one row; only the collapse drops below */
    .navbar > .container-fluid { flex-wrap: wrap; row-gap: 0; }
    .navbar-brand { margin-right: auto; min-width: 0; }
    .ctb-brand { font-size: 1.1rem; gap: .35rem; white-space: nowrap; }
    .ctb-lotus { width: 32px; height: 27px; }
    .navbar .generalMenuGroup { flex: none; }
    .navbar .generalMenuGroup .btn { padding: .38rem .78rem; font-size: .85rem; }
    .navbar-toggler { margin-left: .1rem; padding: .25rem .4rem; }
    .navbar-collapse {
        flex-basis: 100%;
        margin-top: .5rem;
        padding: .35rem .25rem;
        border-top: 1px solid var(--line-soft);
    }
    .navbar .navbar-nav { gap: .1rem; align-items: center; }
    .navbar .navbar-nav .nav-link { padding: .55rem .5rem; }
    .navbar .dropdown-menu { box-shadow: none; margin-left: 0; margin-top: .25rem; }
}
@media (max-width: 400px) {
    .navbar { padding: .45rem .55rem; }
    .ctb-brand { font-size: .98rem; gap: .3rem; }
    .ctb-lotus { width: 28px; height: 24px; }
    .navbar .generalMenuGroup .btn { padding: .32rem .62rem; font-size: .78rem; }
    .navbar-toggler { padding: .2rem .3rem; }
}

/* account/notification dropdown buttons in the nav (plugin markup) */
.navbar .btn-dark {
    background: transparent !important;
    border: 0;
    color: var(--blue) !important;
}
.navbar .btn-dark:hover { color: var(--blue-deep) !important; }
.navbar .badge { background: var(--pink); }
/* the plugin's account/menu icons are text-white — recolour for the light navbar */
.navbar .text-white { color: var(--blue) !important; }
.navbar .text-white:hover { color: var(--blue-deep) !important; }

/* logged-in visitor menu: pill icon buttons + corner notification badge */
.navbar .visitorMenuGroup .btn { position: relative; padding: .35rem .55rem; border-radius: 100px !important; color: var(--blue) !important; }
.navbar .visitorMenuGroup .btn:hover { background: var(--mist) !important; color: var(--blue-deep) !important; }
.navbar .visitorMenuGroup .bi { font-size: 1.2rem; line-height: 1; }
.navbar .visitorNotificationCounter {
    position: absolute; top: .05rem; right: -.15rem;
    background: var(--pink) !important; color: #fff !important;
    font-size: .58rem; font-weight: 700; line-height: 1.25;
    min-width: 1.05em; padding: .05rem .28rem; border-radius: 100px;
    box-shadow: 0 0 0 2px var(--nav-veil);
}
.navbar .visitorNotificationCounter[data-amount-of-notifications="0"] { display: none; }

/* account dropdown items: left-align the label */
.navbar .dropdown-menu .isLink > div,
.navbar .dropdown-menu .noLink > div { justify-content: flex-start !important; }
.navbar .dropdown-menu .dropdown-item { text-align: left; }

/* account / notification icon buttons: no border, no focus ring, no caret */
.navbar .btn { border: 0; }
.navbar .btn:focus,
.navbar .btn:active,
.navbar .btn.show,
.navbar .btn-group.show > .btn,
.navbar .navbar-toggler:focus { box-shadow: none !important; outline: 0; }
.navbar .btn.dropdown-toggle::after { display: none; }

/* nav submenu parent: clean chevron aligned to the label */
.navbar .nav-link.dropdown-toggle::after {
    margin-left: .35em;
    vertical-align: .12em;
    border-top-color: currentColor;
    opacity: .75;
}

/* keep the hamburger to the far right on tablet/mobile */
.navbar-toggler { margin-left: .25rem; padding: .25rem .5rem; }

/* dropdown menus (nav submenu + account menus) */
.navbar .navbar-nav .dropdown-menu,
.navbar .sub-menu,
.navbar .dropdown-menu,
.dropdown-menu {
    background-color: #FFFFFF !important;
    background-image: none !important;
    border: 1px solid var(--line) !important;
    border-radius: 16px !important;
    box-shadow: var(--shadow-md) !important;
    padding: .5rem !important;
    margin-top: .4rem;
    min-width: 12rem;
}
.navbar .sub-menu .dropdown-item,
.navbar .dropdown-item,
.dropdown-item {
    font-family: var(--sans) !important;
    font-size: .92rem !important;
    color: var(--ink) !important;
    border-radius: 8px !important;
    padding: .5rem .85rem !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.navbar .sub-menu .dropdown-item:hover,
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus,
.dropdown-item:hover, .dropdown-item:focus { background-color: var(--mist) !important; color: var(--blue-deep) !important; }
.dropdown-item.active, .dropdown-item:active { background-color: var(--mist) !important; color: var(--blue-deep) !important; }
/* no hover underline on dropdown / sub-menu links (kills text-decoration + the animated ::after) */
.navbar .dropdown-menu a,
.navbar .dropdown-menu .dropdown-item,
.navbar .sub-menu a,
.navbar .dropdown-menu a:hover, .navbar .dropdown-menu a:focus,
.navbar .dropdown-menu .dropdown-item:hover, .navbar .dropdown-menu .dropdown-item:focus { text-decoration: none !important; }
.navbar .dropdown-menu a::after,
.navbar .dropdown-menu .dropdown-item::after { content: none !important; display: none !important; }

/* -------------------------------------------------------------------------
   Buttons — blue gradient primaries; keep semantic colours (success/danger)
   ------------------------------------------------------------------------- */
.btn { font-weight: 600; border-radius: 100px; white-space: nowrap; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease; }

.btn-primary, .btn-dark {
    background: var(--grad);
    border: none;
    color: #fff;
    box-shadow: 0 10px 24px -12px var(--glow);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-dark:hover, .btn-dark:focus, .btn-dark:active {
    background: var(--grad-soft);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 16px 30px -12px var(--glow), 0 0 0 1px rgba(91, 138, 214, .25);
}
.btn-primary:disabled, .btn-primary.disabled { background: var(--grad); border: none; opacity: .5; }

.btn-outline-primary { color: var(--blue); border-color: var(--line); }
.btn-outline-primary:hover { background: var(--mist); border-color: var(--blue-lift); color: var(--blue-deep); }

.btn-outline-secondary { color: var(--ink-soft); border-color: var(--line); }
.btn-outline-secondary:hover, .btn-outline-secondary:active { background: var(--grad) !important; border-color: transparent; color: #fff !important; }

/* pink accent button (Login) */
.btn-pink, .btn-pink:visited { background: var(--grad-pink); border: none; color: #fff; box-shadow: 0 10px 24px -12px var(--glow-pink); }
.btn-pink:hover, .btn-pink:focus { background: var(--grad-pink); color: #fff; transform: translateY(-2px); box-shadow: 0 16px 30px -12px var(--glow-pink); }

/* -------------------------------------------------------------------------
   Hero (homepage)
   ------------------------------------------------------------------------- */
.ctb-hero {
    position: relative;
    text-align: center;
    padding: 5.4rem 0 3rem;
    overflow: visible;
    background:
        radial-gradient(58% 42% at 72% 24%, rgba(255, 255, 255, .72), transparent 60%),
        radial-gradient(50% 40% at 24% 74%, rgba(255, 255, 255, .56), transparent 62%),
        radial-gradient(42% 34% at 86% 70%, rgba(255, 255, 255, .5), transparent 62%);
    background-repeat: no-repeat;
}
.ctb-hero .ctb-halo {
    position: absolute; top: 4%; left: 50%; transform: translateX(-50%);
    width: 460px; height: 380px; max-width: 92vw; border-radius: 50%;
    background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .85), rgba(233, 196, 106, .22) 32%, transparent 66%);
    filter: blur(6px); pointer-events: none; z-index: 0;
}
.ctb-hero > * { position: relative; z-index: 1; }
.ctb-eyebrow { font-size: .74rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--blue-deep); }
.ctb-hero .display-3 { color: #22364d; max-width: 15ch; margin-inline: auto; }
.ctb-led { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: #2E9E6B; box-shadow: 0 0 8px #2E9E6B; }
.mediumsOnlineCount { font-variant-numeric: tabular-nums; }

/* constellation divider */
.ctb-divider { display: flex; align-items: center; justify-content: center; gap: 1rem; color: var(--pink); margin: 1.4rem 0; }
.ctb-divider::before, .ctb-divider::after { content: ""; height: 1px; width: min(160px, 22vw); background: linear-gradient(90deg, transparent, var(--line)); }
.ctb-divider .bi { color: var(--gold); font-size: 1.15rem; line-height: 1; }

/* sections + heads */
.ctb-section { padding: 3rem 0; }
.ctb-section-head { max-width: 42rem; margin-inline: auto; }
.ctb-section-head h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }

/* how-it-works steps */
.ctb-step { background: var(--card-veil); border: 1px solid var(--line); border-radius: 20px; padding: 1.6rem; box-shadow: var(--shadow-sm); }
.ctb-step-num { font-family: var(--serif); font-size: 2.2rem; font-weight: 600; color: var(--blue-lift); line-height: 1; }
.ctb-step-num .bi { font-size: .85rem; color: var(--gold); vertical-align: super; margin-left: 2px; }

/* filter chips */
.ctb-filters { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; margin-top: 1.5rem; margin-bottom: 1.6rem; }
.chip { font-family: var(--sans); font-size: .85rem; font-weight: 600; cursor: pointer; border: 1px solid var(--line); background: var(--card-veil); color: var(--ink-soft); border-radius: 100px; padding: .5rem 1.1rem; display: inline-flex; align-items: center; gap: .45rem; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease; }
.chip:hover { border-color: var(--blue-lift); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--grad); color: #fff; border-color: transparent; box-shadow: 0 8px 20px -12px var(--glow); }
.chip .count { font-variant-numeric: tabular-nums; opacity: .7; font-weight: 500; }
.chip[aria-pressed="true"] .count { opacity: .85; }
.led-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }

/* -------------------------------------------------------------------------
   Cards + status (mediums grid via Ui::profileMarkup)
   ------------------------------------------------------------------------- */
.profiles { padding-block: 1rem 2rem; }

.card {
    background: var(--card);
    border: 1px solid var(--line) !important;
    border-radius: 22px;
    color: var(--ink);
    box-shadow: var(--shadow-md);
}
.card-title { font-family: var(--serif); color: var(--ink); }
.card-img-top { aspect-ratio: 4 / 3.2; object-fit: cover; }

.profileContainer .card,
.whatsAppProfileContainer .card { transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; overflow: hidden; }
.profileContainer .card:hover,
.whatsAppProfileContainer .card:hover {
    transform: translateY(-7px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(91, 138, 214, .4) !important;
}

/* status pills (translucent + LED dot) — shared by homepage cards + profile; JS rewrites .channelStatus each poll */
.channelStatus .ctb-status, .channelStatus .badge {
    font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    padding: .34rem .7rem; border-radius: 100px;
    display: inline-flex; align-items: center; gap: .42rem;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    box-shadow: none;
}
.channelStatus .ctb-status::before, .channelStatus .badge::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;
    background: currentColor; box-shadow: 0 0 8px currentColor;
}
.channelStatus .statusOnline .ctb-status, .channelStatus .statusOnline .badge { background: var(--ok-bg) !important; color: var(--ok) !important; }
.channelStatus .statusInConversation .ctb-status, .channelStatus .statusPause .ctb-status,
.channelStatus .statusInConversation .badge, .channelStatus .statusPause .badge { background: var(--busy-bg) !important; color: var(--busy) !important; }
.channelStatus .statusOffline .ctb-status, .channelStatus .statusOffline .badge { background: var(--off-bg) !important; color: var(--off) !important; }

.whatsAppProfiles .languages img, .profiles .languages img { width: 20px; height: 20px; border-radius: 50% !important; }

/* call box on the card */
.ctb-callbox { background: var(--mist); border: 1px solid var(--line-soft); border-radius: 14px; padding: .7rem .85rem; display: flex; flex-direction: column; gap: .2rem; }
.ctb-callbox .ctb-num { font-family: var(--serif); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.ctb-callbox .ctb-code b { color: var(--blue); }
.ctb-callbox .ctb-cpm { font-size: .76rem; color: var(--muted); }

/* -------------------------------------------------------------------------
   Prose (.entry-content) — content pages
   ------------------------------------------------------------------------- */
.entry-content { color: var(--ink-soft); font-size: 1.06rem; }
.entry-content > * + * { margin-top: 1.1rem; }
.entry-content h2 { font-size: 1.9rem; color: var(--ink); margin-top: 2.2rem; }
.entry-content h3 { font-size: 1.4rem; color: var(--ink); margin-top: 1.7rem; }
.entry-content a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--pink-soft); }
.entry-content a:hover { color: var(--blue-deep); }
.entry-content ul, .entry-content ol { padding-left: 1.3rem; }
.entry-content li::marker { color: var(--pink); }
.entry-content blockquote { padding: 1rem 1.4rem; border-left: 3px solid var(--pink); background: var(--mist); border-radius: 0 14px 14px 0; font-family: var(--serif); font-style: italic; font-size: 1.3rem; color: var(--blue-deep); }
.entry-content img { border-radius: 16px; max-width: 100%; height: auto; box-shadow: var(--shadow-sm); }

/* -------------------------------------------------------------------------
   404
   ------------------------------------------------------------------------- */
.page404 { text-align: center; max-width: 640px; margin: 2rem auto; padding: 3.5rem 1rem 4rem; }
.page404 .headerTitle,
.page404 .jumbotron-heading { font-size: clamp(1.8rem, 4vw, 2.6rem); }

/* -------------------------------------------------------------------------
   Footer — light day-sky base
   ------------------------------------------------------------------------- */
footer {
    position: relative;
    margin-top: 4rem;
    background: linear-gradient(180deg, transparent, var(--sky-2));
    border-top: 1px solid var(--line);
    color: var(--ink);
}
footer::before {
    content: ""; position: absolute; top: -1px; left: 15%; right: 15%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--pink-soft), transparent);
}
footer a { color: var(--ink-soft); }
footer a:hover { color: var(--pink); }

/* -------------------------------------------------------------------------
   Consulenten Control — agent panel (templateConsulentenControl.php)
   Server-rendered; buttons/accordions wired by Chattabai/Assets/Js/employee.js
   ------------------------------------------------------------------------- */
/* let the day-sky body show through; drop the stock bg-light / bg-white bars */
.employeeControl { background: transparent !important; border: 0 !important; font-family: var(--sans); }
.employeeControl .fw-bolder:not(.badge) { color: var(--ink); font-family: var(--serif); }

/* top bar: box ref + realtime earnings */
.employeeControl .realTimeEarnings.badge {
    background: var(--grad-pink) !important; color: #fff !important;
    border-radius: 100px; padding: .5rem .9rem; font-weight: 700;
    box-shadow: 0 10px 24px -12px var(--glow-pink);
}

/* left column blocks + accordion items -> theme cards */
.employeeControl .rounded-2.border,
.employeeControl .accordion-item {
    background: var(--card) !important;
    border: 1px solid var(--line) !important;
    border-radius: 18px !important;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.employeeControl .accordion { display: flex; flex-direction: column; gap: 1rem; }

/* card header strips */
.employeeControl .employeeStatusChild,
.employeeControl .messageOfTheDay {
    background: var(--mist) !important; color: var(--ink) !important;
    font-family: var(--serif); border-bottom: 1px solid var(--line);
}
.employeeControl .employeeChannelStatusChild { color: var(--blue-deep); }

/* status + logout buttons -> theme-colored pills */
.employeeControl .btn { border-radius: 100px !important; font-weight: 600; border: 0 !important; }
.employeeControl .employeeUpdateStatusInDatabaseChild.btn-success   { background: #2E9E6B !important; color: #fff !important; }
.employeeControl .employeeUpdateStatusInDatabaseChild.btn-danger    { background: #C93733 !important; color: #fff !important; }
.employeeControl .employeeUpdateStatusInDatabaseChild.btn-secondary { background: #5D6D7E !important; color: #fff !important; }
.employeeControl .logoutEmployee.btn-dark { background: var(--grad) !important; color: #fff !important; }
.employeeControl .btn:hover { filter: brightness(1.05); transform: translateY(-1px); }

/* accordion */
.employeeControl .accordion-button {
    font-family: var(--serif); font-size: 1.05rem;
    color: var(--ink) !important; background: var(--card) !important;
    box-shadow: none !important;
}
/* open/active header: mist fill, blue-deep serif, left accent bar + clean bottom separator */
.employeeControl .accordion-button:not(.collapsed) {
    color: var(--blue-deep) !important;
    background: var(--mist) !important;
    box-shadow: inset 3px 0 0 var(--pink), inset 0 -1px 0 var(--line) !important;
}
/* no pink glow ring on mouse click; keyboard focus gets a subtle inset outline instead */
.employeeControl .accordion-button:focus { outline: none; }
.employeeControl .accordion-button:focus-visible { outline: 2px solid var(--pink-soft); outline-offset: -3px; }
/* theme the caret so it matches (blue chevron) */
.employeeControl .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%233F6DB5' stroke-width='2'%3e%3cpath d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
}
.employeeControl .accordion-body { background: var(--card); color: var(--ink); }

/* statistieken tables -> rounded cards */
.employeeControl .table {
    --bs-table-color: var(--ink);
    margin-bottom: 0; width: 100%;
    border-collapse: separate; border-spacing: 0;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px; overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.employeeControl .table thead th {
    background: var(--mist) !important; color: var(--blue-deep) !important;
    font-family: var(--serif); font-weight: 600;
    border-bottom: 1px solid var(--line) !important;
    padding: .7rem .9rem;
}
.employeeControl .table tbody th,
.employeeControl .table tbody td {
    background: transparent; border-top: 0;
    border-bottom: 1px solid var(--line-soft) !important;
    padding: .6rem .9rem;
}
.employeeControl .table tbody th { font-weight: 600; color: var(--ink-soft); }
.employeeControl .table tbody td { color: var(--blue-deep); font-weight: 600; font-variant-numeric: tabular-nums; }
.employeeControl .table tbody tr:last-child th,
.employeeControl .table tbody tr:last-child td { border-bottom: 0 !important; }
.employeeControl .table tbody tr:hover th,
.employeeControl .table tbody tr:hover td { background: var(--mist); }

/* -------------------------------------------------------------------------
   gridjs tables inside the agent accordions
   (Online tijd / Gesprekken / Financiele overzichten) — day-sky theme
   ------------------------------------------------------------------------- */
.employeeControl .gridjs,
.employeeControl .gridjs-container { font-family: var(--sans); width: 100%; }

/* search box -> pill */
.employeeControl .gridjs-head { padding-bottom: .75rem; }
.employeeControl .gridjs-search-input {
    background: var(--card) !important;
    border: 1px solid var(--line) !important;
    border-radius: 100px !important;
    color: var(--ink) !important;
    padding: .5rem .95rem !important;
    width: 100%; max-width: 340px;
}
.employeeControl .gridjs-search-input:focus {
    outline: 0; border-color: var(--blue) !important;
    box-shadow: 0 0 0 .2rem var(--pink-tint) !important;
}

/* table shell */
.employeeControl .gridjs-wrapper {
    border: 1px solid var(--line) !important;
    border-radius: 16px !important;
    box-shadow: var(--shadow-sm) !important;
    overflow: hidden;
}
.employeeControl .gridjs-table { width: 100%; }

/* head */
.employeeControl .gridjs-th {
    background: var(--mist) !important;
    color: var(--blue-deep) !important;
    font-family: var(--serif) !important;
    font-weight: 600 !important;
    border-bottom: 1px solid var(--line) !important;
    padding: .7rem .9rem !important;
}
.employeeControl .gridjs-th-content { text-transform: none; }
.employeeControl .gridjs-th.gridjs-th-sort:hover { background: var(--sky-2) !important; }

/* body */
.employeeControl .gridjs-td {
    background: var(--card) !important;
    color: var(--ink) !important;
    border-bottom: 1px solid var(--line-soft) !important;
    padding: .65rem .9rem !important;
}
.employeeControl .gridjs-tr:hover .gridjs-td { background: var(--mist) !important; }
.employeeControl .gridjs-tbody .gridjs-tr:last-child .gridjs-td { border-bottom: 0 !important; }

/* footer / pagination */
.employeeControl .gridjs-footer {
    background: transparent !important; border: 0 !important;
    box-shadow: none !important; padding-top: .85rem;
}
.employeeControl .gridjs-summary { color: var(--muted) !important; }
.employeeControl .gridjs-pagination .gridjs-pages button {
    background: var(--card) !important;
    border: 1px solid var(--line) !important;
    color: var(--ink-soft) !important;
    padding: .4rem .8rem !important;
}
.employeeControl .gridjs-pagination .gridjs-pages button:hover:not(:disabled) { background: var(--mist) !important; color: var(--blue-deep) !important; }
.employeeControl .gridjs-pagination .gridjs-pages button.gridjs-currentPage {
    background: var(--grad) !important; color: #fff !important; border-color: var(--blue) !important;
}
.employeeControl .gridjs-pagination .gridjs-pages button:first-child { border-radius: 100px 0 0 100px !important; }
.employeeControl .gridjs-pagination .gridjs-pages button:last-child { border-radius: 0 100px 100px 0 !important; }

/* -------------------------------------------------------------------------
   Logged-out agent portal — homepage hero treatment + frosted auth card
   ------------------------------------------------------------------------- */
.ctb-portal { min-height: 74vh; display: grid; place-items: center; padding: 3rem 0; }
.ctb-portal .container { width: 100%; }
.ctb-portal .ctb-eyebrow { display: block; }
.ctb-portal .display-5 { font-family: var(--serif); color: #22364d; }

.ctb-auth-card {
    background: var(--card-veil);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid var(--line);
    border-radius: 22px;
    box-shadow: var(--shadow-md);
    padding: 1.5rem;
}
/* segmented pill tabs */
.ctb-auth-card .nav-pills { background: var(--mist); border-radius: 100px; padding: .28rem; gap: .2rem; }
.ctb-auth-card .nav-pills .nav-link {
    border-radius: 100px !important; color: var(--ink-soft) !important;
    font-weight: 600; font-size: .88rem; padding: .5rem .8rem;
}
.ctb-auth-card .nav-pills .nav-link:hover { color: var(--blue-deep) !important; }
.ctb-auth-card .nav-pills .nav-link.active {
    background: var(--grad) !important; color: #fff !important;
    box-shadow: 0 8px 20px -10px var(--glow);
}

/* shared form controls + primary buttons across the whole agent panel */
.employeeControl .input-group-text {
    background: var(--mist) !important; border: 1px solid var(--line) !important;
    color: var(--ink-soft) !important; font-weight: 600;
}
.employeeControl .form-control,
.employeeControl .form-select {
    background: var(--card) !important; border: 1px solid var(--line) !important; color: var(--ink) !important;
}
.employeeControl .form-control:focus,
.employeeControl .form-select:focus {
    border-color: var(--blue) !important; box-shadow: 0 0 0 .2rem var(--pink-tint) !important;
}
.employeeControl .btn-dark {
    background: var(--grad) !important; border: 0 !important; color: #fff !important;
}
.employeeControl .btn-dark:hover { filter: brightness(1.05); }

/* forgot-password link in the portal auth card (opens plugin reset modal) */
.ctb-forgot { color: var(--blue); font-weight: 600; font-size: .9rem; cursor: pointer; text-decoration: none; }
.ctb-forgot:hover { color: var(--pink); text-decoration: underline; text-underline-offset: 3px; }

/* statistieken tables: vertical spacing when they stack on mobile/tablet (< lg) */
@media (max-width: 991.98px) {
    .employeeControl .table { margin-bottom: 1.25rem; }
    .employeeControl #collapseOne .accordion-body,
    .employeeControl .accordion-body { padding: 1rem; }
}

/* =========================================================================
   Profile page (templateProfile.php) — day-sky, calling only
   ========================================================================= */
:root {
    --ok: #2E9E6B;  --ok-bg: rgba(46,158,107,.14);
    --busy: #C93733; --busy-bg: rgba(201,55,51,.14);
    --off: #5D6D7E;  --off-bg: rgba(93,109,126,.14);
}
.ctb-profile-wrap { position: relative; z-index: 1; }

/* breadcrumb */
.ctb-crumb { display:flex; gap:.5rem; align-items:center; color:var(--muted); font-size:.86rem; padding:1.6rem 0 .4rem; flex-wrap:wrap; }
.ctb-crumb a:hover { color:var(--blue); }
.ctb-crumb .sep { opacity:.5; }
.ctb-crumb .here { color:var(--ink); font-weight:600; }

/* layout */
.ctb-profile { display:grid; grid-template-columns:372px 1fr; gap:1.6rem; padding:.6rem 0 2rem; align-items:start; }
.ctb-profile .col-left { position:sticky; top:84px; display:flex; flex-direction:column; gap:1.1rem; }
.ctb-profile .col-right { display:flex; flex-direction:column; gap:1.3rem; min-width:0; }

/* call card */
.pcard { background:var(--card); border:1px solid var(--line); border-radius:24px; overflow:hidden; box-shadow:var(--shadow-md); }
.pcard .portrait { position:relative; aspect-ratio:1/1.02; }
.pcard .portrait .portrait-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.pcard .portrait .aura { position:absolute; inset:0; background:radial-gradient(120% 120% at 30% 18%, #7FAAE6, #3F6DB5 92%); }
.pcard .portrait .mono { position:absolute; inset:0; display:grid; place-items:center; font-family:var(--serif); font-size:5rem; color:rgba(255,255,255,.95); font-weight:600; text-shadow:0 3px 20px rgba(0,0,0,.25); }
.pcard .portrait .sheen { position:absolute; inset:0; background:linear-gradient(180deg, transparent 50%, rgba(0,0,0,.34)); }

/* status pill positioning over the portrait (appearance is the shared .channelStatus set above) */
.pcard .channelStatus { position:absolute; top:.8rem; left:.8rem; z-index:2; }

.pcard .namebar { position:absolute; left:0; right:0; bottom:0; padding:1rem 1.2rem; color:#fff; display:flex; align-items:flex-end; justify-content:space-between; gap:.5rem; z-index:2; }
.pcard .namebar h1 { font-family:var(--serif); font-weight:600; font-size:2.1rem; line-height:1.05; color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.4); margin:0; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pcard .namebar .rate { flex:none; font-size:.86rem; font-weight:600; display:flex; align-items:center; gap:.3rem; background:rgba(255,255,255,.16); padding:.25rem .55rem; border-radius:100px; backdrop-filter:blur(4px); }
.pcard .namebar .rate .s { color:var(--gold-soft); }

.pcard .pbody { padding:1.15rem 1.25rem 1.3rem; display:flex; flex-direction:column; gap:.9rem; }
.pcard .ref { font-size:.78rem; color:var(--muted); font-style:italic; }
.pcard .ref b { color:var(--blue); font-style:normal; letter-spacing:.04em; }
.pcard .short { font-size:.94rem; color:var(--ink-soft); margin:0; }


.pcard .secondary-actions { display:flex; gap:.5rem; }
.pcard .secondary-actions .btn { flex:1; }
/* call button greyed state when not online (poll toggles .disabled) */
.pcard .ctb-call.disabled, .pcard .ctb-call[disabled] { background:var(--muted) !important; box-shadow:none !important; pointer-events:none; opacity:.6; }

/* the ghost + primary buttons already exist globally; local sizing helpers */
.ctb-profile .btn-ghost { background:transparent; color:var(--blue); border:1px solid var(--line); }
.ctb-profile .btn-ghost:hover { border-color:var(--blue-lift); background:var(--mist); color:var(--blue-deep); }
.ctb-profile .btn.btn-sm { padding:.5rem .95rem; font-size:.84rem; }
.ctb-profile .btn.auto { width:auto; }

/* right column panels */
.ctb-profile .panel { background:var(--card); border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow-sm); padding:1.6rem 1.7rem; }
.ctb-profile .panel h2 { font-family:var(--serif); font-weight:600; font-size:1.8rem; margin:.3rem 0 .7rem; line-height:1.1; }
.ctb-profile .panel h2 .g { color:var(--blue); }
.ctb-profile .eyebrow { font-size:.72rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--blue); }
.ctb-profile .ctb-werkwijze-lbl { display:block; margin:1.4rem 0 .7rem; }
.ctb-profile .prose { color:var(--ink-soft); }
.ctb-profile .prose p { margin:0 0 .9rem; }
.ctb-profile .prose p:last-child { margin-bottom:0; }

.ctb-profile .tags { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.9rem; }
.ctb-profile .tag { font-size:.82rem; font-weight:600; color:var(--blue-deep); background:var(--mist); border:1px solid var(--line); border-radius:100px; padding:.4rem .9rem; display:inline-flex; align-items:center; gap:.4rem; }
.ctb-profile .tag .d { color:var(--pink); }

.ctb-profile .facts { display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; }
.ctb-profile .fact { border:1px solid var(--line-soft); background:var(--mist); border-radius:14px; padding:.8rem .9rem; }
.ctb-profile .fact .k { font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); font-weight:700; }
.ctb-profile .fact .v { font-size:1rem; font-weight:600; color:var(--ink); margin-top:.15rem; }

/* reviews */
.ctb-profile .rev-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.1rem; }
.ctb-profile .rev-score { display:flex; align-items:center; gap:.9rem; }
.ctb-profile .rev-score .big { font-family:var(--serif); font-size:3rem; line-height:1; color:var(--ink); font-weight:600; }
.ctb-profile .rev-score .stars { color:var(--gold); font-size:1.05rem; letter-spacing:2px; }
.ctb-profile .rev-score .cnt { color:var(--muted); font-size:.86rem; }
.ctb-profile .rev-empty { color:var(--muted); margin:0; }
.ctb-profile .review { border-top:1px solid var(--line-soft); padding:1.1rem 0; display:flex; gap:1rem; }
.ctb-profile .review:first-of-type { border-top:none; padding-top:0; }
.ctb-profile .rev-av { width:44px; height:44px; border-radius:50%; flex:none; display:grid; place-items:center; color:#fff; font-weight:700; font-family:var(--serif); font-size:1.2rem; background:var(--grad-soft); }
.ctb-profile .rev-main { flex:1; min-width:0; }
.ctb-profile .rev-name { font-weight:700; color:var(--ink); }
.ctb-profile .rev-date { font-size:.78rem; color:var(--muted); }
.ctb-profile .rev-stars { color:var(--gold); font-size:.85rem; letter-spacing:1px; margin:.1rem 0 .3rem; }
.ctb-profile .rev-text { color:var(--ink-soft); font-size:.94rem; margin:0; }

@media (max-width: 991.98px) {
    .ctb-profile { grid-template-columns:1fr; }
    .ctb-profile .col-left { position:static; }
    .ctb-profile .facts { grid-template-columns:1fr 1fr; }
}
@media (max-width: 560px) {
    .ctb-profile .facts { grid-template-columns:1fr; }
    .ctb-profile .panel { padding:1.3rem 1.2rem; }
}

/* =========================================================================
   Content pages — single.php / page.php (day-sky article) + 404.php
   Prose itself is styled by .entry-content (above); this adds the chrome.
   ========================================================================= */
.ctb-article-wrap { position: relative; z-index: 1; padding-bottom: 3rem; }
.ctb-article { padding-top: .4rem; }
.ctb-article-title { font-family: var(--serif); font-weight: 600; font-size: clamp(1.9rem, 4vw, 2.8rem); line-height: 1.1; color: var(--ink); margin: .5rem 0 .8rem; text-wrap: balance; }
.ctb-featured { margin: 0 0 1.7rem; }
.ctb-featured img { display: block; border-radius: 18px; box-shadow: var(--shadow-md); }

.ctb-tags { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.ctb-tags .tag-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-weight: 700; }
.ctb-tags a { font-size: .82rem; font-weight: 600; color: var(--blue-deep); background: var(--mist); border: 1px solid var(--line); border-radius: 100px; padding: .35rem .85rem; text-decoration: none; }
.ctb-tags a:hover { background: var(--pink-tint); color: var(--pink); border-color: var(--pink-soft); }

.ctb-postnav { margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem; }

/* 404 (sits inside .ctb-hero for the glow background) */
.ctb-404 { min-height: 66vh; display: grid; place-items: center; }
.ctb-404 .ctb-404-lotus { width: 62px; height: auto; margin: 0 auto .4rem; display: block; }
.ctb-404-num { font-family: var(--serif); font-weight: 600; font-size: clamp(5rem, 17vw, 9.5rem); line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ctb-404-title { font-family: var(--serif); font-weight: 600; color: var(--ink); font-size: 1.8rem; margin: .2rem 0 .6rem; }
.ctb-404-text { max-width: 46ch; margin-bottom: 1.7rem; }