/* ==========================================================================
   Worki design system - on top of Bootstrap 5.3 (no build step: CSS variables only)

   Palette
     Iris   (brand)   #5842E8  - evolution of the legacy Worki blue
     Coral  (accent)  #FF6B4A  - used sparingly: logo dot, highlights
     Ink    (neutral) #17172A … #F7F7FA
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------- */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../lib/inter/inter-latin-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../lib/inter/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Tokens --------------------------------------------------------------- */
:root {
    --wk-iris-50: #f2f1ff;
    --wk-iris-100: #e6e3ff;
    --wk-iris-200: #cfc9ff;
    --wk-iris-300: #ada3ff;
    --wk-iris-400: #8b7bff;
    --wk-iris-500: #6d5bf7;
    --wk-iris-600: #5842e8;
    --wk-iris-700: #4733c4;
    --wk-iris-800: #3a2b9c;
    --wk-iris-900: #2f267a;
    --wk-iris-950: #1c1650;

    --wk-coral-400: #ff8a6e;
    --wk-coral-500: #ff6b4a;
    --wk-coral-600: #e8502f;

    --wk-ink-0: #ffffff;
    --wk-ink-25: #fcfcfd;
    --wk-ink-50: #f7f7fa;
    --wk-ink-100: #efeff4;
    --wk-ink-200: #e2e2ea;
    --wk-ink-300: #c9c9d6;
    --wk-ink-400: #9a9ab0;
    --wk-ink-500: #6e6e87;
    --wk-ink-600: #52526a;
    --wk-ink-700: #3c3c52;
    --wk-ink-800: #26263a;
    --wk-ink-850: #1d1d30;
    --wk-ink-900: #17172a;
    --wk-ink-950: #0e0e1c;

    --wk-radius-sm: .5rem;
    --wk-radius: .75rem;
    --wk-radius-lg: 1rem;
    --wk-shadow-sm: 0 1px 2px rgb(23 23 42 / .06);
    --wk-shadow: 0 1px 3px rgb(23 23 42 / .06), 0 4px 16px -4px rgb(23 23 42 / .08);
    --wk-shadow-lg: 0 12px 40px -12px rgb(23 23 42 / .25);
    --wk-sidebar-width: 260px;
    --wk-rail-width: 76px;
    --wk-topbar-height: 64px;
    --wk-ease: cubic-bezier(.2, .8, .2, 1);
}

/* Light theme (default) */
:root,
[data-bs-theme="light"] {
    --wk-surface: var(--wk-ink-0);
    --wk-surface-muted: var(--wk-ink-50);
    --wk-canvas: #f6f6fb;
    --wk-border: var(--wk-ink-200);
    --wk-text: var(--wk-ink-900);
    --wk-text-muted: var(--wk-ink-500);
    --wk-accent-soft: var(--wk-iris-50);
    --wk-accent-text: var(--wk-iris-700);
    --wk-nav-hover: var(--wk-ink-100);

    --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-body-font-size: .9375rem;
    --bs-body-color: var(--wk-text);
    --bs-body-bg: var(--wk-canvas);
    --bs-secondary-color: var(--wk-text-muted);
    --bs-tertiary-bg: var(--wk-surface-muted);
    --bs-border-color: var(--wk-border);
    --bs-border-radius: var(--wk-radius-sm);
    --bs-border-radius-lg: var(--wk-radius);
    --bs-emphasis-color: var(--wk-ink-950);
    --bs-heading-color: var(--wk-ink-950);
    --bs-link-color: var(--wk-iris-600);
    --bs-link-color-rgb: 88, 66, 232;
    --bs-link-hover-color: var(--wk-iris-700);
    --bs-link-hover-color-rgb: 71, 51, 196;
    --bs-primary: var(--wk-iris-600);
    --bs-primary-rgb: 88, 66, 232;
    --bs-primary-text-emphasis: var(--wk-iris-800);
    --bs-primary-bg-subtle: var(--wk-iris-50);
    --bs-primary-border-subtle: var(--wk-iris-200);
    --bs-success: #12b76a;
    --bs-success-rgb: 18, 183, 106;
    --bs-warning: #f79009;
    --bs-warning-rgb: 247, 144, 9;
    --bs-danger: #f04438;
    --bs-danger-rgb: 240, 68, 56;
    --bs-danger-bg-subtle: #fef3f2;
    --bs-danger-border-subtle: #fecdca;
    --bs-danger-text-emphasis: #b42318;
    --bs-info: #2e90fa;
    --bs-info-rgb: 46, 144, 250;
    --bs-focus-ring-color: rgb(88 66 232 / .25);
    --bs-card-bg: var(--wk-surface);
}

[data-bs-theme="dark"] {
    --wk-surface: var(--wk-ink-900);
    --wk-surface-muted: var(--wk-ink-850);
    --wk-canvas: var(--wk-ink-950);
    --wk-border: #2c2c44;
    --wk-text: #ececf3;
    --wk-text-muted: var(--wk-ink-400);
    --wk-accent-soft: rgb(109 91 247 / .16);
    --wk-accent-text: var(--wk-iris-300);
    --wk-nav-hover: rgb(255 255 255 / .05);
    --wk-shadow: 0 1px 3px rgb(0 0 0 / .4), 0 4px 16px -4px rgb(0 0 0 / .4);
    --wk-shadow-lg: 0 12px 40px -12px rgb(0 0 0 / .6);

    --bs-body-color: var(--wk-text);
    --bs-body-bg: var(--wk-canvas);
    --bs-secondary-color: var(--wk-text-muted);
    --bs-tertiary-bg: var(--wk-surface-muted);
    --bs-border-color: var(--wk-border);
    --bs-emphasis-color: #fff;
    --bs-heading-color: #fff;
    --bs-link-color: var(--wk-iris-300);
    --bs-link-color-rgb: 173, 163, 255;
    --bs-link-hover-color: var(--wk-iris-200);
    --bs-link-hover-color-rgb: 207, 201, 255;
    --bs-primary-text-emphasis: var(--wk-iris-200);
    --bs-primary-bg-subtle: rgb(109 91 247 / .16);
    --bs-primary-border-subtle: var(--wk-iris-800);
    --bs-danger-bg-subtle: rgb(240 68 56 / .12);
    --bs-danger-border-subtle: rgb(240 68 56 / .35);
    --bs-danger-text-emphasis: #fda29b;
    --bs-card-bg: var(--wk-surface);
}

body {
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "cv11", "ss01";
    letter-spacing: -.005em;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 650;
    letter-spacing: -.02em;
}

::selection { background: var(--wk-iris-200); color: var(--wk-ink-950); }

/* --- Bootstrap component overrides --------------------------------------- */
.btn {
    --bs-btn-font-weight: 550;
    --bs-btn-padding-y: .5rem;
    --bs-btn-padding-x: 1rem;
    --bs-btn-border-radius: var(--wk-radius-sm);
    transition: background-color .15s var(--wk-ease), border-color .15s var(--wk-ease), box-shadow .15s var(--wk-ease), transform .05s;
}
.btn:active { transform: translateY(1px); }
.btn-lg { --bs-btn-padding-y: .7rem; --bs-btn-font-size: 1rem; }

.btn-primary {
    --bs-btn-bg: var(--wk-iris-600);
    --bs-btn-border-color: var(--wk-iris-600);
    --bs-btn-hover-bg: var(--wk-iris-700);
    --bs-btn-hover-border-color: var(--wk-iris-700);
    --bs-btn-active-bg: var(--wk-iris-800);
    --bs-btn-active-border-color: var(--wk-iris-800);
    --bs-btn-disabled-bg: var(--wk-iris-300);
    --bs-btn-disabled-border-color: var(--wk-iris-300);
    --bs-btn-focus-shadow-rgb: 88, 66, 232;
    box-shadow: 0 1px 2px rgb(71 51 196 / .3), inset 0 1px 0 rgb(255 255 255 / .12);
}

/* Secondary actions: soft Iris. One solid .btn-primary per page; everything else is soft or ghost. */
.btn-soft {
    --bs-btn-color: var(--wk-accent-text);
    --bs-btn-bg: var(--wk-accent-soft);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--wk-iris-800);
    --bs-btn-hover-bg: var(--wk-iris-100);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--wk-iris-800);
    --bs-btn-active-bg: var(--wk-iris-200);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: var(--wk-accent-text);
    --bs-btn-disabled-bg: var(--wk-accent-soft);
    --bs-btn-disabled-border-color: transparent;
}
[data-bs-theme="dark"] .btn-soft {
    --bs-btn-hover-color: var(--wk-iris-200);
    --bs-btn-hover-bg: rgb(109 91 247 / .26);
    --bs-btn-active-color: var(--wk-iris-100);
    --bs-btn-active-bg: rgb(109 91 247 / .34);
}

/* Destructive actions on pages: soft red. Solid red only inside the confirmation dialog. */
.btn-soft-danger {
    --bs-btn-color: #b42318;
    --bs-btn-bg: #fef3f2;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #912018;
    --bs-btn-hover-bg: #fee4e2;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: #7a271a;
    --bs-btn-active-bg: #fecdca;
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: #b42318;
    --bs-btn-disabled-bg: #fef3f2;
    --bs-btn-disabled-border-color: transparent;
}
[data-bs-theme="dark"] .btn-soft-danger {
    --bs-btn-color: #fda29b;
    --bs-btn-bg: rgb(240 68 56 / .12);
    --bs-btn-hover-color: #fecdca;
    --bs-btn-hover-bg: rgb(240 68 56 / .2);
    --bs-btn-active-color: #fee4e2;
    --bs-btn-active-bg: rgb(240 68 56 / .28);
    --bs-btn-disabled-color: #fda29b;
    --bs-btn-disabled-bg: rgb(240 68 56 / .12);
}
.btn-danger {
    --bs-btn-bg: #c4320a;
    --bs-btn-border-color: #c4320a;
    --bs-btn-hover-bg: #a3280a;
    --bs-btn-hover-border-color: #a3280a;
    --bs-btn-active-bg: #86200d;
    --bs-btn-active-border-color: #86200d;
    --bs-btn-focus-shadow-rgb: 196, 50, 10;
    box-shadow: 0 1px 2px rgb(134 32 13 / .3), inset 0 1px 0 rgb(255 255 255 / .12);
}
.btn-icon { --bs-btn-padding-x: .55rem; }

.btn-ghost {
    --bs-btn-color: var(--wk-text-muted);
    --bs-btn-hover-color: var(--wk-text);
    --bs-btn-hover-bg: var(--wk-nav-hover);
    --bs-btn-active-bg: var(--wk-nav-hover);
    --bs-btn-padding-x: .6rem;
    --bs-btn-padding-y: .45rem;
}

.form-control, .form-select {
    --bs-border-radius: var(--wk-radius-sm);
    padding: .6rem .8rem;
    background-color: var(--wk-surface);
    border-color: var(--wk-border);
    transition: border-color .15s var(--wk-ease), box-shadow .15s var(--wk-ease);
}
.form-control:focus, .form-select:focus {
    border-color: var(--wk-iris-400);
    box-shadow: 0 0 0 4px rgb(88 66 232 / .15);
}
.form-label { font-weight: 550; font-size: .875rem; margin-bottom: .35rem; }
.form-check-input:checked { background-color: var(--wk-iris-600); border-color: var(--wk-iris-600); }
.form-check-input:focus { box-shadow: 0 0 0 4px rgb(88 66 232 / .15); border-color: var(--wk-iris-400); }

.card {
    --bs-card-border-color: var(--wk-border);
    --bs-card-border-radius: var(--wk-radius);
    --bs-card-cap-bg: transparent;
    box-shadow: var(--wk-shadow-sm);
}

.dropdown-menu {
    --bs-dropdown-border-color: var(--wk-border);
    --bs-dropdown-border-radius: var(--wk-radius);
    --bs-dropdown-bg: var(--wk-surface);
    --bs-dropdown-link-hover-bg: var(--wk-nav-hover);
    --bs-dropdown-link-active-bg: var(--wk-accent-soft);
    --bs-dropdown-link-active-color: var(--wk-accent-text);
    --bs-dropdown-item-padding-y: .45rem;
    --bs-dropdown-padding-x: .35rem;
    --bs-dropdown-item-border-radius: var(--wk-radius-sm);
    box-shadow: var(--wk-shadow-lg);
}
.dropdown-item { border-radius: var(--wk-radius-sm); display: flex; align-items: center; gap: .6rem; }
.dropdown-item.disabled { opacity: .6; }
.dropdown-item .wk-soon {
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .1rem .4rem;
    border-radius: 999px;
    border: 1px solid var(--wk-border);
}

.alert { --bs-alert-border-radius: var(--wk-radius-sm); }

/* --- Logo ----------------------------------------------------------------- */
.wk-logo { display: block; height: 32px; width: auto; color: var(--wk-text); }

/* --- App shell ------------------------------------------------------------- */
.wk-app { min-height: 100vh; }

.wk-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--wk-sidebar-width);
    display: flex;
    flex-direction: column;
    background: var(--wk-surface);
    border-right: 1px solid var(--wk-border);
    z-index: 1040;
    transition: transform .25s var(--wk-ease), width .2s var(--wk-ease);
}

.wk-sidebar-brand {
    height: var(--wk-topbar-height);
    display: flex;
    align-items: center;
    padding: 0 1.25rem;
    flex-shrink: 0;
}
.wk-sidebar-brand .wk-logo { height: 30px; }

.wk-nav {
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
    padding: .5rem .75rem 1rem;
    /* Scrollable, but the bar only appears while hovering the menu. */
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}
.wk-nav:hover { scrollbar-color: var(--wk-ink-300) transparent; }
[data-bs-theme="dark"] .wk-nav:hover { scrollbar-color: var(--wk-ink-700) transparent; }
.wk-nav::-webkit-scrollbar { width: 6px; }
.wk-nav::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; }
.wk-nav:hover::-webkit-scrollbar-thumb { background: var(--wk-ink-300); }

.wk-nav-label { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.wk-brand-mark { display: none; }
.wk-brand-mark .wk-logo { height: 34px; }

.wk-nav-section {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--wk-text-muted);
    padding: 1.1rem .75rem .4rem;
}

.wk-nav-link {
    display: flex;
    white-space: nowrap;
    align-items: center;
    gap: .75rem;
    padding: .55rem .75rem;
    border-radius: var(--wk-radius-sm);
    color: var(--wk-text-muted);
    font-weight: 500;
    text-decoration: none;
    transition: background-color .15s var(--wk-ease), color .15s var(--wk-ease);
}
.wk-nav-link .bi { font-size: 1.1rem; width: 1.25rem; text-align: center; }
.wk-nav-link:hover { background: var(--wk-nav-hover); color: var(--wk-text); }
.wk-nav-link.active {
    background: var(--wk-accent-soft);
    color: var(--wk-accent-text);
    font-weight: 600;
}
.wk-nav-link.disabled { opacity: .55; cursor: default; } /* no href: hovering still shows its name when collapsed */
.wk-nav-link.disabled:hover { background: none; color: var(--wk-text-muted); }

/* Collapsed sidebar: the name (or, for an entry with a submenu, its links) beside the hovered icon (worki.js). */
.wk-rail-tip { position: fixed; z-index: 1085; min-width: 0; max-width: 280px; padding: .4rem .7rem; border-radius: var(--wk-radius-sm);
    background: var(--wk-surface); color: var(--wk-text); border: 1px solid var(--wk-border); box-shadow: var(--wk-shadow-lg);
    font-size: .85rem; font-weight: 600; opacity: 0; transform: translateX(-4px); pointer-events: none;
    transition: opacity .12s var(--wk-ease), transform .12s var(--wk-ease); }
.wk-rail-tip.is-shown { opacity: 1; transform: none; }
.wk-rail-tip.has-menu { pointer-events: auto; min-width: 200px; padding: .5rem; }
.wk-rail-tip::before { content: ""; position: absolute; left: -5px; top: var(--wk-tip-arrow, 50%); width: 9px; height: 9px; margin-top: -4.5px;
    background: inherit; border-left: 1px solid var(--wk-border); border-bottom: 1px solid var(--wk-border); transform: rotate(45deg); }
.wk-rail-tip-title { display: flex; align-items: center; gap: .5rem; white-space: nowrap; }
.wk-rail-tip.has-menu .wk-rail-tip-title { padding: .1rem .35rem .35rem; border-bottom: 1px solid var(--wk-border); margin-bottom: .35rem; }
.wk-rail-tip-soon { font-size: .6rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: .1rem .4rem; border-radius: 999px;
    color: var(--wk-text-muted); background: var(--wk-surface-muted); border: 1px solid var(--wk-border); }
.wk-rail-tip-menu { display: grid; gap: 1px; max-height: min(60vh, 420px); overflow-y: auto; font-weight: 500; }
.wk-rail-tip-menu .wk-subnav { margin: 0 0 .2rem .5rem; }
@media (prefers-reduced-motion: reduce) { .wk-rail-tip { transition: none; transform: none; } }
.wk-nav-link .wk-soon {
    margin-left: auto;
    white-space: nowrap;
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .15rem .45rem;
    border-radius: 999px;
    background: var(--wk-surface-muted);
    border: 1px solid var(--wk-border);
}

.wk-sidebar-footer {
    border-top: 1px solid var(--wk-border);
    padding: .75rem;
}

.wk-tenant {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem .6rem;
    border-radius: var(--wk-radius-sm);
    background: var(--wk-surface-muted);
}
.wk-tenant-name { font-weight: 600; font-size: .875rem; line-height: 1.2; }
.wk-tenant-logo {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: .5rem;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--wk-border);
}
.wk-tenant-code { font-size: .75rem; color: var(--wk-text-muted); }

.wk-main {
    margin-left: var(--wk-sidebar-width);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: margin-left .2s var(--wk-ease);
}

/* Collapsed (desktop): icon rail. Labels become native tooltips via title="". */
@media (min-width: 992px) {
    .wk-collapsed .wk-sidebar { width: var(--wk-rail-width); }
    .wk-collapsed .wk-main { margin-left: var(--wk-rail-width); }
    .wk-collapsed .wk-sidebar-brand { justify-content: center; padding: 0; }
    .wk-collapsed .wk-brand-full { display: none; }
    .wk-collapsed .wk-brand-mark { display: block; }
    .wk-collapsed .wk-nav { padding-inline: .6rem; }
    .wk-collapsed .wk-nav-section { padding: .6rem 0 .3rem; }
    .wk-collapsed .wk-nav-section .wk-nav-label { display: none; }
    .wk-collapsed .wk-nav-section::after {
        content: "";
        display: block;
        height: 1px;
        margin: 0 .6rem;
        background: var(--wk-border);
    }
    .wk-collapsed .wk-nav-link { justify-content: center; padding: .6rem 0; }
    .wk-collapsed .wk-nav-link .wk-nav-label,
    .wk-collapsed .wk-nav-link .wk-soon { display: none; }
    .wk-collapsed .wk-sidebar-footer { padding: .75rem .6rem; }
    .wk-collapsed .wk-tenant { justify-content: center; padding: .5rem 0; }
    .wk-collapsed .wk-tenant .wk-nav-label { display: none; }
}

.wk-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    height: var(--wk-topbar-height);
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 0 1.5rem;
    background: color-mix(in srgb, var(--wk-canvas) 82%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--wk-border);
}

.wk-search {
    position: relative;
    flex: 1;
    max-width: 420px;
}
.wk-search .bi {
    position: absolute;
    left: .8rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--wk-text-muted);
    pointer-events: none;
}
.wk-search input {
    padding-left: 2.3rem;
    background: var(--wk-surface);
    border-radius: 999px;
}
.wk-kbd {
    position: absolute;
    right: .6rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: .6875rem;
    color: var(--wk-text-muted);
    border: 1px solid var(--wk-border);
    border-radius: .35rem;
    padding: .05rem .35rem;
    background: var(--wk-surface-muted);
}

.wk-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    font-size: .8125rem;
    font-weight: 650;
    color: #fff;
    background: linear-gradient(135deg, var(--wk-iris-400), var(--wk-iris-700));
    flex-shrink: 0;
}
.wk-avatar-sm { width: 30px; height: 30px; font-size: .75rem; border-radius: .5rem; }

.wk-content {
    flex: 1;
    padding: 2rem 1.5rem 3rem;
    width: 100%;
    max-width: 1400px;
}

.wk-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.75rem;
}
.wk-page-title { font-size: 1.625rem; margin: 0; }
/* Phones: the header's buttons go under the title rather than off the screen. */
@media (max-width: 575.98px) { .wk-page-header { flex-wrap: wrap; align-items: flex-start; } .wk-page-header > .min-w-0, .wk-page-header > div:first-child { min-width: 0; max-width: 100%; } }
.wk-page-subtitle { color: var(--wk-text-muted); margin: .25rem 0 0; }

.wk-backdrop { display: none; }

@media (max-width: 991.98px) {
    .wk-sidebar { transform: translateX(-100%); }
    .wk-app.nav-open .wk-sidebar { transform: none; box-shadow: var(--wk-shadow-lg); }
    .wk-app.nav-open .wk-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgb(14 14 28 / .45);
        z-index: 1035;
    }
    .wk-main { margin-left: 0; }
    .wk-topbar { padding: 0 1rem; }
    .wk-content { padding: 1.5rem 1rem 2.5rem; }
}

/* --- Stat cards (home) ---------------------------------------------------- */
.wk-stat {
    padding: 1.25rem;
    display: flex;
    flex-direction: row;
    gap: 1rem;
    align-items: flex-start;
}
.wk-stat-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--wk-radius-sm);
    display: grid;
    place-items: center;
    font-size: 1.2rem;
    background: var(--wk-accent-soft);
    color: var(--wk-accent-text);
    flex-shrink: 0;
}
.wk-stat-label { color: var(--wk-text-muted); font-size: .8125rem; font-weight: 500; }
.wk-stat-value { font-size: 1.125rem; font-weight: 650; }

.wk-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .7rem;
    border-radius: 999px;
    font-size: .8125rem;
    font-weight: 550;
    background: var(--wk-accent-soft);
    color: var(--wk-accent-text);
}

/* --- Auth (login) ---------------------------------------------------------- */
.wk-auth {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    background: var(--wk-surface);
}

.wk-auth-brand {
    position: relative;
    overflow: hidden;
    color: #fff;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background:
        radial-gradient(1200px 600px at 110% -10%, rgb(255 107 74 / .35), transparent 60%),
        radial-gradient(900px 700px at -20% 120%, rgb(139 123 255 / .55), transparent 55%),
        linear-gradient(145deg, var(--wk-iris-700), var(--wk-iris-950));
}
.wk-auth-brand::after {
    /* subtle dot grid */
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgb(255 255 255 / .09) 1px, transparent 1px);
    background-size: 22px 22px;
    mask-image: linear-gradient(to bottom, #000 30%, transparent 90%);
    pointer-events: none;
}
.wk-auth-brand > * { position: relative; z-index: 1; }
.wk-auth-brand .wk-logo { height: 36px; color: #fff; align-self: flex-start; }
.wk-auth-headline {
    font-size: clamp(2rem, 3.2vw, 2.9rem);
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -.035em;
    color: #fff;
    max-width: 14ch;
    margin-bottom: 1rem;
}
.wk-auth-headline em { font-style: normal; color: var(--wk-coral-400); }
.wk-auth-lead { color: rgb(255 255 255 / .75); font-size: 1.0625rem; max-width: 38ch; }
.wk-auth-modules { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }
.wk-auth-modules span {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .4rem .8rem;
    border-radius: 999px;
    font-size: .8125rem;
    font-weight: 550;
    background: rgb(255 255 255 / .1);
    border: 1px solid rgb(255 255 255 / .16);
    backdrop-filter: blur(6px);
}
.wk-auth-foot { font-size: .8125rem; color: rgb(255 255 255 / .55); }

.wk-auth-panel {
    display: flex;
    flex-direction: column;
    padding: 1.5rem 2rem;
}
.wk-auth-panel-top { display: flex; justify-content: flex-end; gap: .25rem; }
.wk-auth-form {
    width: 100%;
    max-width: 400px;
    margin: auto;
    padding: 2rem 0;
}
.wk-auth-form h1 { font-size: 1.75rem; margin-bottom: .35rem; }
.wk-auth-form .lead { font-size: .9375rem; color: var(--wk-text-muted); margin-bottom: 2rem; }
.wk-auth-mobile-logo { display: none; margin-bottom: 2rem; }
.wk-auth-mobile-logo .wk-logo { height: 34px; }

.wk-input-icon { position: relative; }
.wk-input-icon > .bi {
    position: absolute;
    left: .85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--wk-text-muted);
    pointer-events: none;
}
.wk-input-icon > .form-control { padding-left: 2.5rem; }

/* Dark login: one violet-tinted canvas so the form side belongs with the brand panel. */
[data-bs-theme="dark"] .wk-auth { background: #0d0b1f; }
[data-bs-theme="dark"] .wk-auth-brand {
    background:
        radial-gradient(1200px 600px at 110% -10%, rgb(255 107 74 / .2), transparent 60%),
        radial-gradient(900px 700px at -20% 120%, rgb(139 123 255 / .3), transparent 55%),
        linear-gradient(145deg, var(--wk-iris-800), #120e33);
    box-shadow: inset -1px 0 0 rgb(255 255 255 / .06);
}
[data-bs-theme="dark"] .wk-auth-panel {
    background:
        radial-gradient(700px 520px at 0% 50%, rgb(88 66 232 / .16), transparent 65%),
        radial-gradient(500px 400px at 100% 0%, rgb(255 107 74 / .05), transparent 60%);
}
[data-bs-theme="dark"] .wk-auth .form-control {
    background-color: rgb(255 255 255 / .04);
    border-color: rgb(255 255 255 / .1);
}
[data-bs-theme="dark"] .wk-auth .form-control:focus {
    background-color: rgb(255 255 255 / .06);
    border-color: var(--wk-iris-400);
}
[data-bs-theme="dark"] .wk-auth .form-check-input:not(:checked) {
    background-color: rgb(255 255 255 / .04);
    border-color: rgb(255 255 255 / .18);
}
[data-bs-theme="dark"] .wk-auth .btn-ghost:hover { background: rgb(255 255 255 / .06); }

@media (max-width: 991.98px) {
    .wk-auth { grid-template-columns: 1fr; }
    .wk-auth-brand { display: none; }
    .wk-auth-mobile-logo { display: block; }
    .wk-auth-panel { padding: 1rem 1.25rem; }
}

/* --- Toast ----------------------------------------------------------------- */
/* Top right, just under the top bar. */
.wk-toasts {
    position: fixed;
    top: calc(var(--wk-topbar-height) + .75rem);
    right: 1rem;
    z-index: 1090;
}
.wk-toast.showing, .wk-toast.show { animation: wk-toast-in .2s var(--wk-ease); }
@keyframes wk-toast-in { from { opacity: 0; transform: translateY(-6px); } }
.wk-toast {
    --bs-toast-bg: var(--wk-surface);
    --bs-toast-border-color: var(--wk-border);
    --bs-toast-border-radius: var(--wk-radius);
    --bs-toast-color: var(--wk-text);
    box-shadow: var(--wk-shadow-lg);
    font-weight: 500;
}

/* --- Forms / settings -------------------------------------------------------- */
.wk-form-card .card-header {
    padding: 1.1rem 1.25rem .25rem;
    border: 0;
}
.wk-form-card .card-header h2 { font-size: 1rem; margin: 0; }
.wk-form-card .card-header p { margin: .2rem 0 0; font-size: .8125rem; color: var(--wk-text-muted); }
.wk-form-card .card-body { padding: 1rem 1.25rem 1.25rem; }
.wk-stack { display: flex; flex-direction: column; gap: 1.5rem; }
.wk-stack > div.card:last-of-type { flex-grow: 1; }

.wk-form-actions {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    padding: 1rem 0;
    background: linear-gradient(to top, var(--wk-canvas) 70%, transparent);
}

.wk-sortable { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.wk-sortable li {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .55rem .75rem;
    border: 1px solid var(--wk-border);
    border-radius: var(--wk-radius-sm);
    background: var(--wk-surface);
}
.wk-sortable .wk-rank {
    width: 1.6rem;
    height: 1.6rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: .75rem;
    font-weight: 650;
    background: var(--wk-accent-soft);
    color: var(--wk-accent-text);
}
.wk-sortable li:first-child [data-move="-1"],
.wk-sortable li:last-child [data-move="1"] { visibility: hidden; }

/* --- Smooth page changes ------------------------------------------------------------------ */
/* Cross-document view transitions (Chrome, Edge, Safari 18+): navigations fade instead of flashing. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .15s; }

/* --- Global loading bar --------------------------------------------------------------------- */
.wk-progress {
    position: fixed;
    inset: 0 0 auto 0;
    height: 3px;
    z-index: 2000;
    pointer-events: none;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left;
    background: linear-gradient(90deg, var(--wk-iris-500), var(--wk-coral-500));
    box-shadow: 0 0 8px rgb(88 66 232 / .5);
}
.wk-progress.active {
    opacity: 1;
    /* creeps towards the end while waiting; jumps to full when done */
    animation: wk-progress 8s cubic-bezier(.1, .8, .2, 1) forwards;
}
.wk-progress.active.done {
    animation: none;
    transform: scaleX(1);
    opacity: 0;
    transition: transform .2s ease-out, opacity .3s ease .15s;
}
@keyframes wk-progress {
    0% { transform: scaleX(0); }
    20% { transform: scaleX(.45); }
    100% { transform: scaleX(.92); }
}

/* Button busy state (enhanced forms) */
.btn.wk-busy { position: relative; color: transparent !important; }
.btn.wk-busy::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    border: 2px solid rgb(255 255 255 / .45);
    border-top-color: #fff;
    animation: wk-spin .7s linear infinite;
}
.btn-ghost.wk-busy::after, .btn-outline-secondary.wk-busy::after { border-color: var(--wk-border); border-top-color: var(--wk-iris-600); }
@keyframes wk-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .wk-progress.active { animation: none; transform: scaleX(.6); }
    @view-transition { navigation: none; }
}

/* --- Logo upload (drag & drop) -------------------------------------------------------------- */
.wk-dropzone {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    margin: 0;
    border: 1.5px dashed var(--wk-ink-300);
    border-radius: var(--wk-radius);
    background: var(--wk-surface-muted);
    cursor: pointer;
    transition: border-color .15s var(--wk-ease), background-color .15s var(--wk-ease);
}
[data-bs-theme="dark"] .wk-dropzone { border-color: var(--wk-ink-700); }
.wk-dropzone:hover, .wk-dropzone:focus-within, .wk-dropzone.dragging {
    border-color: var(--wk-iris-400);
    background: var(--wk-accent-soft);
}
.wk-dropzone.busy { opacity: .6; pointer-events: none; }
.wk-logo-preview {
    width: 88px;
    height: 88px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: var(--wk-radius-sm);
    background: var(--wk-surface);
    border: 1px solid var(--wk-border);
    color: var(--wk-text-muted);
    font-size: 1.6rem;
    overflow: hidden;
}
.wk-logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.wk-logo-preview-wide { width: 150px; } /* a statement logo is usually wide (the mark with the name) */
.wk-logo-preview-wide img { width: 148px; height: 86px; padding: .4rem; object-fit: contain; } /* fixed: a % height has nothing to refer to in this grid */

/* --- Map ------------------------------------------------------------------------------------- */
.wk-map {
    height: 260px;
    border-radius: var(--wk-radius-sm);
    border: 1px solid var(--wk-border);
    overflow: hidden;
    background: var(--wk-surface-muted);
}
.wk-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.wk-map-empty {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    color: var(--wk-text-muted);
    font-size: .875rem;
}
.wk-map-empty .bi { font-size: 1.5rem; }

/* --- Tables ------------------------------------------------------------------------------------ */
.wk-table { --bs-table-bg: transparent; margin: 0; }
.wk-table > thead th {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--wk-text-muted);
    border-bottom-color: var(--wk-border);
    padding: .85rem 1rem;
    white-space: nowrap;
}
.wk-table > tbody td { padding: .8rem 1rem; border-color: var(--wk-border); }
.wk-table > tbody tr:last-child td { border-bottom: 0; }
.wk-table > tbody tr:hover { background: var(--wk-surface-muted); }
.wk-muted-row { opacity: .6; }
.wk-chip-sm { font-size: .72rem; padding: .15rem .5rem; }

/* --- Platform admin ---------------------------------------------------------------------------- */
.wk-staff-list { display: grid; gap: .25rem; }
.wk-staff-list li {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem .5rem;
    border-radius: var(--wk-radius-sm);
}
.wk-staff-list li:hover { background: var(--wk-surface-muted); }

/* Shown on every page while a platform admin is inside another company. */
.wk-impersonation {
    position: sticky;
    top: 0;
    z-index: 1031;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem 1.5rem;
    font-size: .875rem;
    font-weight: 550;
    color: #fff;
    background: linear-gradient(90deg, var(--wk-coral-600), var(--wk-coral-500));
}
.wk-impersonation + .wk-topbar { top: 44px; }

/* --- Status pill, modal ------------------------------------------------------------------------ */
.wk-status {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .75rem;
    border-radius: 999px;
    font-size: .8125rem;
    font-weight: 600;
}
.wk-status.on { background: rgb(18 183 106 / .12); color: #067647; }
.wk-status.off { background: var(--wk-surface-muted); color: var(--wk-text-muted); border: 1px solid var(--wk-border); }
[data-bs-theme="dark"] .wk-status.on { color: #6ce9a6; }

.wk-modal {
    --bs-modal-bg: var(--wk-surface);
    --bs-modal-border-color: var(--wk-border);
    --bs-modal-border-radius: var(--wk-radius-lg);
    box-shadow: var(--wk-shadow-lg);
}
.wk-modal .modal-body { padding: 1.5rem 1.5rem .5rem; }
.wk-confirm-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    margin-bottom: 1rem;
    font-size: 1.25rem;
    background: var(--wk-accent-soft);
    color: var(--wk-accent-text);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--wk-accent-soft) 50%, transparent);
}
.wk-confirm-icon.danger { background: #fef3f2; color: #c4320a; box-shadow: 0 0 0 6px rgb(254 243 242 / .5); }
[data-bs-theme="dark"] .wk-confirm-icon.danger { background: rgb(240 68 56 / .14); color: #fda29b; box-shadow: 0 0 0 6px rgb(240 68 56 / .06); }
.wk-modal .modal-footer { border: 0; padding: 1rem 1.5rem 1.25rem; }
/* The confirmation is a small card: it keeps clear of the screen's edges on phones, also over a full-screen dialog. */
#wk-confirm .modal-dialog { max-width: 26rem; width: calc(100% - 2.5rem); margin-inline: auto; }

/* --- Lookup pages (CRM settings) ------------------------------------------------------------ */
.wk-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.wk-tile {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1rem 1.1rem;
    text-decoration: none;
    transition: border-color .15s var(--wk-ease), box-shadow .15s var(--wk-ease), transform .15s var(--wk-ease);
}
.wk-tile:hover { border-color: var(--wk-iris-300); box-shadow: var(--wk-shadow); transform: translateY(-1px); }
.wk-swatch {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: var(--wk-radius-sm);
    border: 1px solid rgb(0 0 0 / .08);
}
.wk-swatch-sm { width: 14px; height: 14px; border-radius: 4px; }
.wk-thumb {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: var(--wk-radius-sm);
    background: var(--wk-accent-soft);
    color: var(--wk-accent-text);
    overflow: hidden;
}
.wk-thumb img { width: 100%; height: 100%; object-fit: cover; }
.wk-empty { padding: 2.5rem; text-align: center; color: var(--wk-text-muted); margin-bottom: 1rem; }
.wk-empty .bi { font-size: 1.8rem; display: block; margin-bottom: .5rem; }
.wk-empty p { margin: 0; }
.wk-link-list { display: grid; gap: .15rem; }
.wk-link-list a {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .6rem;
    border-radius: var(--wk-radius-sm);
    color: var(--wk-text);
    text-decoration: none;
}
.wk-link-list a:hover { background: var(--wk-surface-muted); }
.wk-edit-list { display: grid; gap: .35rem; }
.wk-edit-list li { display: flex; align-items: center; gap: .25rem; }
.wk-inline-input { border-color: transparent; background: transparent; font-weight: 500; }
.wk-inline-input:hover { border-color: var(--wk-border); }
.wk-inline-input:focus { background: var(--wk-surface); }
.wk-locale {
    border: 1px solid var(--wk-border);
    border-radius: var(--wk-radius-sm);
    padding: .75rem .9rem 1rem;
}
.wk-locale legend { float: none; width: auto; font-size: .875rem; font-weight: 600; padding: 0 .35rem; margin: 0 0 .25rem -.35rem; }
.form-control-color { height: calc(2.5rem + 2px); padding: .3rem; }
.wk-color { width: 4.5rem; }

/* Cards that stretch to match their column: keep their fields at the top, not spread out. */
.wk-form-card > .card-body.row { align-content: flex-start; }

/* --- Tabs (e.g. texts per language) ------------------------------------------------------------ */
.wk-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .25rem;
    padding: .25rem;
    border-radius: var(--wk-radius-sm);
    background: var(--wk-surface-muted);
    border: 1px solid var(--wk-border);
}
.wk-tab {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    border: 0;
    background: transparent;
    padding: .4rem .8rem;
    border-radius: .4rem;
    font-size: .875rem;
    font-weight: 550;
    color: var(--wk-text-muted);
    transition: background-color .15s var(--wk-ease), color .15s var(--wk-ease);
}
.wk-tab:hover { color: var(--wk-text); }
a.wk-tab { text-decoration: none; }
.wk-tab.active { background: var(--wk-surface); color: var(--wk-text); box-shadow: var(--wk-shadow-sm); }
.wk-tab-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--wk-ink-300); }
.wk-tab-dot.filled { background: var(--wk-iris-500); }
.wk-tab.has-error .wk-tab-dot { background: #d92d20; }
[data-bs-theme="dark"] .wk-tab-dot { background: var(--wk-ink-600); }
[data-bs-theme="dark"] .wk-tab-dot.filled { background: var(--wk-iris-400); }

/* --- CRM lists and detail -------------------------------------------------------------------- */
.wk-filters { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; }
.wk-filters .wk-search { max-width: none; min-width: 240px; }
.wk-filters .form-select { width: auto; min-width: 150px; padding-right: 2.25rem; border-radius: 999px; }
.wk-row-link td { cursor: default; }
.wk-entity-avatar { position: relative; overflow: hidden; }
.wk-entity-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wk-avatar-lg { width: 56px; height: 56px; font-size: 1.1rem; border-radius: 16px; }
.wk-new-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--wk-coral-500); flex-shrink: 0; }
.wk-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .6rem 1rem;
    border-top: 1px solid var(--wk-border);
}
.wk-lead {
    display: inline-flex;
    align-items: center;
    padding: .15rem .55rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
    background: var(--wk-surface-muted);
    color: var(--wk-text-muted);
    border: 1px solid var(--wk-border);
}
.wk-lead-new, .wk-lead-attemptedtocontact, .wk-lead-connected { background: var(--wk-accent-soft); color: var(--wk-accent-text); border-color: transparent; }
.wk-lead-opendeal { background: #fff6ed; color: #c4320a; border-color: transparent; }
.wk-lead-qualified { background: rgb(18 183 106 / .12); color: #067647; border-color: transparent; }
[data-bs-theme="dark"] .wk-lead-opendeal { background: rgb(247 144 9 / .14); color: #fdb022; }
[data-bs-theme="dark"] .wk-lead-qualified { color: #6ce9a6; }
/* Contact people: summary rows, edited in a dialog */
.wk-person-list { display: flex; flex-direction: column; }
.wk-person-list:has(.wk-person) { border: 1px solid var(--wk-border); border-radius: var(--wk-radius-sm); }
.wk-person {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem;
    padding: .35rem .5rem .35rem .35rem;
}
.wk-person + .wk-person { border-top: 1px solid var(--wk-border); }
.wk-person.has-error { background: rgb(217 45 32 / .05); }
.wk-person-main {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .35rem .4rem;
    border: 0;
    border-radius: var(--wk-radius-sm);
    background: none;
    color: var(--wk-text);
    text-align: left;
}
.wk-person-main:hover { background: var(--wk-nav-hover); }
.wk-person-main:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgb(88 66 232 / .25); }
.wk-person-cols { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) {
    .wk-person-cols { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) minmax(0, 1fr); gap: 1rem; align-items: center; }
}
.wk-person-error { flex-basis: 100%; padding: 0 .4rem .25rem 3.25rem; }

/* Searchable select (worki.js [data-wk-combobox]) */
.wk-combo-native { display: none !important; }
.wk-combo { position: relative; min-width: 0; }
.wk-combo-toggle { display: flex; align-items: center; gap: .5rem; width: 100%; min-width: 0; text-align: left; }
.wk-combo-toggle:disabled { opacity: 1; background-color: var(--bs-secondary-bg); }
.wk-combo-toggle.input-validation-error { border-color: #d92d20; }
.wk-combo-menu {
    position: absolute;
    z-index: 1060;
    top: calc(100% + .3rem);
    left: 0;
    min-width: max(100%, 17rem);
    max-width: min(26rem, calc(100vw - 2rem));
    padding: .4rem;
    background: var(--wk-surface);
    border: 1px solid var(--wk-border);
    border-radius: var(--wk-radius);
    box-shadow: var(--wk-shadow-lg);
}
.wk-combo-search { position: relative; margin-bottom: .3rem; }
.wk-combo-search .bi { position: absolute; left: .65rem; top: 50%; transform: translateY(-50%); color: var(--wk-text-muted); font-size: .8rem; pointer-events: none; }
.wk-combo-search input { padding-left: 1.9rem; }
.wk-combo-list { list-style: none; margin: 0; padding: 0; max-height: 16rem; overflow-y: auto; }
.wk-combo-list li {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem .55rem;
    border-radius: var(--wk-radius-sm);
    font-size: .875rem;
    cursor: pointer;
}
.wk-combo-list li.active { background: var(--wk-nav-hover); }
.wk-combo-list li.selected { color: var(--wk-accent-text); font-weight: 600; }
.wk-combo-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-combo-hint { color: var(--wk-text-muted); font-size: .8125rem; font-variant-numeric: tabular-nums; }
.wk-combo-empty { padding: .5rem .55rem; font-size: .875rem; color: var(--wk-text-muted); }
.wk-flag { width: 1.35rem; height: 1rem; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgb(0 0 0 / .08); flex-shrink: 0; }
.wk-avatar-xs { width: 22px; height: 22px; font-size: .625rem; }
.wk-filters .wk-combo-toggle { width: auto; min-width: 150px; padding-right: 2.25rem; border-radius: 999px; }
/* Inside an .input-group (country code + number): the box joins the field next to it. */
.input-group > .wk-combo { flex: 0 0 auto; margin-left: 0; }
.input-group > .wk-combo .wk-combo-toggle { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > .wk-combo + .form-control { margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group > .wk-combo.open, .input-group > .wk-combo:focus-within { z-index: 5; }
.wk-doc-list { display: grid; gap: .15rem; }
.wk-doc-list li { display: flex; align-items: center; gap: .5rem; padding: .3rem .25rem; border-radius: var(--wk-radius-sm); font-size: .875rem; }
.wk-doc-list li:hover { background: var(--wk-surface-muted); }
.wk-doc-list a { color: var(--wk-text); text-decoration: none; min-width: 0; }
.wk-doc-list a:hover { color: var(--wk-accent-text); }
.wk-dropzone-compact { padding: .75rem 1rem; }
.wk-prewrap { white-space: pre-wrap; }
.wk-country { max-width: 7.5rem; }
.wk-combo-flag .wk-combo-toggle { width: 7.5rem; }

/* --- Access permissions and users ------------------------------------------------------------- */
.wk-chip-accent { background: var(--wk-accent-soft); color: var(--wk-accent-text); border-color: transparent; }
.wk-thumb-admin { background: rgb(255 107 74 / .12); color: var(--wk-coral-600); }
.wk-profile-tile { align-items: flex-start; }
.wk-rights { display: flex; flex-direction: column; }
.wk-right {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .85rem 0;
    border-top: 1px solid var(--wk-border);
    cursor: pointer;
}
.wk-rights > .wk-right:first-child { border-top: 0; }
.wk-right-text { flex: 1; min-width: 0; }
.wk-right .form-switch .form-check-input { width: 2.4em; height: 1.3em; cursor: pointer; }
.wk-right-sub { padding: 0 0 .85rem 3.4rem; border-top: 0; margin-top: -.3rem; }
.wk-right-disabled { opacity: .5; cursor: default; }
.wk-right-off .wk-thumb { background: var(--wk-surface-muted); color: var(--wk-text-muted); }
.wk-staff-avatar { box-shadow: 0 0 0 2px var(--wk-surface), 0 0 0 4px var(--wk-staff-color, transparent); }

/* --- Notifications ------------------------------------------------------------------------------ */
.wk-bell-btn { position: relative; }
.wk-bell-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--wk-coral-500);
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--wk-surface);
}
.wk-bell-menu { width: min(360px, calc(100vw - 1.5rem)); overflow: hidden; }
.wk-bell-head { padding: .75rem 1rem; border-bottom: 1px solid var(--wk-border); }
.wk-bell-list { max-height: min(420px, 60vh); overflow-y: auto; }
.wk-bell-foot { display: block; padding: .65rem 1rem; text-align: center; font-size: .875rem; font-weight: 600; border-top: 1px solid var(--wk-border); text-decoration: none; }
.wk-bell-foot:hover { background: var(--wk-nav-hover); }
.wk-bell-empty { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: 1.75rem 1rem; color: var(--wk-text-muted); font-size: .875rem; }
.wk-bell-empty .bi { font-size: 1.4rem; }
.wk-note { display: flex; align-items: flex-start; gap: .7rem; padding: .7rem 1rem; color: var(--wk-text); text-decoration: none; }
.wk-note + .wk-note { border-top: 1px solid var(--wk-border); }
.wk-note:hover { background: var(--wk-nav-hover); color: var(--wk-text); }
.wk-note.unread { background: var(--wk-accent-soft); }
.wk-note.unread:hover { background: color-mix(in srgb, var(--wk-accent-soft) 70%, var(--wk-nav-hover)); }
.wk-note .wk-new-dot { margin-top: .4rem; }
.wk-note-time { font-size: .75rem; color: var(--wk-text-muted); margin-top: .1rem; }
.wk-note-system { background: var(--wk-surface-muted); color: var(--wk-iris-600); border: 1px solid var(--wk-border); }
.wk-note-system svg { width: 70%; height: auto; }
.wk-note-list .wk-note { padding: .9rem 1.1rem; }
.wk-filter-date { display: flex; align-items: center; gap: .5rem; font-size: .875rem; color: var(--wk-text-muted); }
.wk-filter-date .form-control { width: auto; border-radius: 999px; }

/* --- Platform admin: errors and activity ---------------------------------------------------------- */
.wk-admin-tabs { width: fit-content; max-width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
.wk-admin-tabs .wk-tab { gap: .45rem; white-space: nowrap; text-decoration: none; }
.wk-count-badge {
    display: inline-grid;
    place-items: center;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--wk-coral-500);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1;
}
.wk-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8em; }
.wk-error-cell { max-width: 0; width: 60%; }
.wk-error-status { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--wk-ink-300); }
.wk-error-open { background: var(--wk-coral-500); box-shadow: 0 0 0 3px rgb(255 107 74 / .18); }
.wk-error-resolved { background: #12b76a; }
.wk-error-chip-open { background: rgb(255 107 74 / .14); color: var(--wk-coral-600); border-color: transparent; }
.wk-error-chip-resolved { background: rgb(18 183 106 / .12); color: #067647; border-color: transparent; }
[data-bs-theme="dark"] .wk-error-chip-resolved { color: #6ce9a6; }
.wk-error-title { white-space: normal; overflow-wrap: anywhere; font-size: 1.45rem; line-height: 1.3; }
.wk-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; }
.wk-stat { padding: .9rem 1.1rem; display: flex; flex-direction: column; gap: .2rem; }
.wk-stat-label { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--wk-text-muted); }
.wk-stat-value { font-size: 1.05rem; font-weight: 650; }
.wk-occurrence { border-top: 1px solid var(--wk-border); }
.wk-occurrence:first-child { border-top: 0; }
.wk-occurrence summary { display: flex; align-items: center; gap: .9rem; padding: .7rem 0; cursor: pointer; list-style: none; min-width: 0; }
.wk-occurrence summary::-webkit-details-marker { display: none; }
.wk-occurrence summary::before { content: "\F285"; font-family: bootstrap-icons; font-size: .7rem; color: var(--wk-text-muted); transition: transform .15s var(--wk-ease); }
.wk-occurrence[open] summary::before { transform: rotate(90deg); }
.wk-occurrence-meta { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; margin: 0 0 .75rem 1.3rem; }
.wk-occurrence-meta dt { font-weight: 500; color: var(--wk-text-muted); }
.wk-occurrence-meta dd { margin: 0; min-width: 0; }
.wk-stack-trace {
    margin: 0 0 1rem;
    padding: .9rem 1rem;
    max-height: 420px;
    overflow: auto;
    border-radius: var(--wk-radius-sm);
    background: var(--wk-surface-muted);
    border: 1px solid var(--wk-border);
    font-size: .75rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

/* --- Agenda settings ----------------------------------------------------------------------------- */
.wk-lookup-add { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.wk-lookup-row { display: flex; align-items: center; gap: .5rem; flex: 1; min-width: 0; margin: 0; }
.wk-lookup-row .wk-inline-input { min-width: 6rem; }
.wk-color-sm { width: 2rem; height: 2rem; padding: .2rem; flex-shrink: 0; }
@media (max-width: 575.98px) {
    .wk-lookup-row { flex-wrap: wrap; }
    .wk-lookup-row .wk-inline-input { flex: 1 1 60%; }
}

/* --- Agenda: calendar and event editor ------------------------------------------------------------ */
.d-contents { display: contents; }
.min-w-0 { min-width: 0 !important; } /* Bootstrap has none: lets a flex item shrink so its text truncates */
.wk-calendar-card { padding: 1rem; }
.wk-calendar-card .fc {
    --fc-border-color: var(--wk-border);
    --fc-page-bg-color: var(--wk-surface);
    --fc-neutral-bg-color: var(--wk-surface-muted);
    --fc-list-event-hover-bg-color: var(--wk-nav-hover);
    --fc-today-bg-color: var(--wk-accent-soft);
    --fc-now-indicator-color: var(--wk-coral-500);
    --fc-highlight-color: rgb(88 66 232 / .12);
    --fc-button-bg-color: var(--wk-surface);
    --fc-button-border-color: var(--wk-border);
    --fc-button-text-color: var(--wk-text);
    --fc-button-hover-bg-color: var(--wk-nav-hover);
    --fc-button-hover-border-color: var(--wk-border);
    --fc-button-active-bg-color: var(--wk-accent-soft);
    --fc-button-active-border-color: var(--wk-iris-300);
    --fc-event-border-color: transparent;
    font-size: .875rem;
}
.wk-calendar-card .fc .fc-toolbar-title { font-size: 1.2rem; font-weight: 650; text-transform: capitalize; }
.wk-calendar-card .fc .fc-button { font-size: .8125rem; font-weight: 600; padding: .4rem .75rem; border-radius: var(--wk-radius-sm); box-shadow: none; text-transform: capitalize; }
.wk-calendar-card .fc .fc-button-primary:not(:disabled).fc-button-active { color: var(--wk-accent-text); }
.wk-calendar-card .fc .fc-button:focus { box-shadow: 0 0 0 3px rgb(88 66 232 / .2); }
.wk-calendar-card .fc .fc-col-header-cell-cushion, .wk-calendar-card .fc .fc-daygrid-day-number { color: var(--wk-text); text-decoration: none; font-weight: 550; }
.wk-calendar-card .fc .fc-event { border-radius: 6px; cursor: pointer; }
.wk-calendar-loading { opacity: .6; transition: opacity .2s; }
.wk-cal-event { display: flex; align-items: flex-start; gap: .35rem; padding: .1rem .2rem; overflow: hidden; min-width: 0; }
.wk-cal-event .wk-avatar-xs { width: 18px; height: 18px; font-size: .55rem; flex-shrink: 0; margin-top: .05rem; box-shadow: 0 0 0 1.5px rgb(255 255 255 / .7); }
.wk-cal-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.wk-cal-time { font-size: .72rem; opacity: .85; }
.wk-cal-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-cal-who { font-size: .72rem; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-daygrid-event .wk-cal-text { flex-direction: row; gap: .3rem; }
/* In the time grid an event is as tall as it is long: what doesn't fit is cut at its edge, never drawn outside it.
   One too short for two lines (half an hour) puts the time and the title on one line, so the title still shows. */
.wk-calendar-card .fc .fc-timegrid-event .fc-event-main { overflow: hidden; container-type: size; }
@container (max-height: 36px) {
    .wk-cal-text { flex-direction: row; align-items: baseline; gap: .35rem; }
    .wk-cal-time { flex-shrink: 0; }
    .wk-cal-who { display: none; }
}
.fc-list-event .wk-cal-event { color: var(--wk-text); }
@media (max-width: 767.98px) {
    .wk-calendar-card { padding: .5rem; }
    .wk-calendar-card .fc .fc-toolbar { flex-wrap: wrap; gap: .5rem; }
    .wk-calendar-card .fc .fc-header-toolbar .fc-toolbar-chunk:nth-child(2) { order: -1; flex-basis: 100%; text-align: center; }
    .wk-calendar-card .fc .fc-footer-toolbar .fc-button { padding: .4rem .6rem; }
    .wk-calendar-card .fc .fc-toolbar-title { font-size: 1rem; }
}
/* Event card (hover on the calendar; a bottom sheet on touch screens). */
.wk-cal-card { position: fixed; z-index: 1080; width: 320px; max-width: calc(100vw - 24px); pointer-events: none;
    opacity: 0; transform: translateY(4px); transition: opacity .15s var(--wk-ease), transform .15s var(--wk-ease); }
.wk-cal-card.is-shown { opacity: 1; transform: none; }
.wk-cal-card-body { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: .7rem; padding: .95rem 1rem 1rem 1.15rem;
    background: var(--wk-surface); color: var(--wk-text); border: 1px solid var(--wk-border); border-radius: var(--wk-radius); box-shadow: var(--wk-shadow-lg); }
.wk-cal-card-body::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--wk-event-color); }
.wk-cal-card-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.wk-cal-card-type { display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; font-weight: 650; letter-spacing: .03em; text-transform: uppercase; color: var(--wk-text-muted); min-width: 0; }
.wk-cal-card-dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--wk-event-color); flex-shrink: 0; }
.wk-cal-card-repeat { color: var(--wk-text-muted); }
.wk-cal-card-title { font-size: 1rem; font-weight: 650; line-height: 1.3; margin-top: -.35rem; overflow-wrap: anywhere; }
.wk-cal-card-facts { display: flex; flex-direction: column; gap: .3rem; font-size: .8125rem; }
.wk-cal-card-fact { display: flex; gap: .5rem; align-items: baseline; }
.wk-cal-card-fact .bi { color: var(--wk-text-muted); }
.wk-cal-card-group { display: flex; flex-direction: column; gap: .4rem; padding-top: .6rem; border-top: 1px solid var(--wk-border); }
.wk-cal-card-label { font-size: .68rem; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--wk-text-muted); }
.wk-cal-card-person { display: flex; align-items: center; gap: .55rem; font-size: .8125rem; min-width: 0; }
.wk-cal-card-person .wk-avatar-sm { width: 26px; height: 26px; font-size: .65rem; border-radius: 50%; flex-shrink: 0; }
.wk-cal-card-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 550; }
.wk-cal-card-status { display: inline-flex; align-items: center; gap: .25rem; font-size: .68rem; font-weight: 600; padding: .1rem .45rem; border-radius: 999px; white-space: nowrap; }
.wk-cal-card-status.is-confirmed { color: var(--bs-success-text-emphasis); background: var(--bs-success-bg-subtle); }
.wk-cal-card-status.is-waiting { color: var(--bs-warning-text-emphasis); background: var(--bs-warning-bg-subtle); }
.wk-cal-card-status.is-declined { color: var(--bs-danger-text-emphasis); background: var(--bs-danger-bg-subtle); }
.wk-cal-card-more { display: flex; align-items: center; font-size: .75rem; color: var(--wk-text-muted); font-weight: 600; }
.wk-cal-card-more .wk-avatar { border-radius: 50%; box-shadow: 0 0 0 2px var(--wk-surface); margin-right: -6px; }
.wk-cal-card-more > span:last-child { margin-left: .7rem; }
.wk-cal-card-notes { font-size: .8125rem; color: var(--wk-text-muted); white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    padding-top: .6rem; border-top: 1px solid var(--wk-border); }
.wk-cal-card-actions { display: flex; justify-content: flex-end; gap: .5rem; padding-top: .25rem; }
.wk-cal-card.is-sheet { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); top: auto; width: auto; max-width: none; pointer-events: auto; transform: translateY(16px); }
.wk-cal-card.is-sheet.is-shown { transform: none; }
.wk-cal-card.is-sheet .wk-cal-card-body { max-height: 70vh; overflow-y: auto; padding: 1.1rem 1.1rem 1rem 1.3rem; }
@media (min-width: 576px) { .wk-cal-card.is-sheet { left: 50%; right: auto; width: 400px; margin-left: -200px; } }
@media (prefers-reduced-motion: reduce) { .wk-cal-card { transition: none; transform: none; } }
.wk-calendar-card .fc .fc-footer-toolbar { margin-top: .75rem; justify-content: center; }
.wk-event-title { font-weight: 600; }
/* Event editor: one muted panel per group (when, details, people, reminders, notes). */
.wk-event-section { display: flex; flex-direction: column; gap: .75rem; padding: .85rem 1rem 1rem; border: 1px solid var(--wk-border); border-radius: var(--wk-radius-sm); background: var(--wk-surface-muted); }
.wk-event-section-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 1.5rem; }
.wk-event-section-head h3 { margin: 0; font-size: .75rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--wk-text-muted); display: flex; align-items: center; }
.wk-event-section-head h3 label { font: inherit; color: inherit; cursor: pointer; }
.wk-event-section-head h3 .bi { font-size: .95rem; margin-right: .45rem; color: var(--wk-accent-text); }
.wk-event-section .form-label { margin-bottom: .3rem; color: var(--wk-text-muted); font-weight: 550; }
.wk-event-dates { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: .5rem .75rem; align-items: end; }
.wk-event-dates .wk-event-date[hidden] { display: none; }
.wk-event-arrow { color: var(--wk-text-muted); padding-bottom: .55rem; }
.wk-event-arrow[hidden] { display: none; }
.wk-date-time { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: .4rem; }
.wk-date-time:has(> .wk-time[hidden]) { grid-template-columns: 1fr; }
.wk-date-time .wk-time[hidden] { display: none; }
/* Label and select on one centred row; the help under the select. */
.wk-event-inline { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .3rem .75rem; align-items: center; }
.wk-event-inline > label { display: flex; align-items: center; }
.wk-event-inline-help { grid-column: 2; }
.wk-event-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: .75rem; }
.wk-reminder-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.1fr); gap: .5rem; align-items: center; }
@media (max-width: 575.98px) {
    .wk-event-section { padding: .75rem; }
    .wk-event-dates { grid-template-columns: 1fr; }
    .wk-event-arrow { display: none; }
    .wk-event-grid { grid-template-columns: 1fr 1fr; }
    .wk-event-grid .wk-event-type { grid-column: 1 / -1; }
    .wk-event-inline { grid-template-columns: 1fr; gap: .3rem; }
    .wk-event-inline-help { grid-column: 1; }
    .wk-reminder-row { grid-template-columns: 1fr 1fr; }
    .wk-reminder-row > span { grid-column: 1 / -1; }
    .wk-reminder-row .form-select-sm { padding-left: .6rem; padding-right: 1.6rem; background-position: right .45rem center; }
    .wk-participants .wk-tabs { width: 100%; }
}
.wk-confirmations:empty { display: none; }
.wk-combo-faces { display: inline-flex; flex-shrink: 0; }
.wk-combo-faces > * + * { margin-left: -6px; box-shadow: 0 0 0 2px var(--wk-surface); }
.wk-combo-multi .wk-combo-list li.selected::after { content: "\F26E"; font-family: bootstrap-icons; margin-left: auto; color: var(--wk-accent-text); }
.wk-combo-multi .wk-combo-list li.selected { font-weight: 600; }
.wk-participants .wk-combo { flex: 1; }

/* Choices inside the confirm dialog (e.g. which events of a series to delete). */
.wk-confirm-choices { display: flex; flex-direction: column; gap: .4rem; margin-top: 1rem; text-align: left; }
.wk-confirm-choice { display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem; border: 1px solid var(--wk-border); border-radius: var(--wk-radius-sm); cursor: pointer; font-weight: 550; }
.wk-confirm-choice .form-check-input { margin: 0; flex-shrink: 0; }
.wk-confirm-choice:has(input:checked) { border-color: var(--wk-iris-300); background: var(--wk-accent-soft); }

/* Public pages outside the app (event confirmation link). */
.wk-public { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 2rem 1rem; background: var(--wk-canvas); }
.wk-public-card { width: 100%; max-width: 480px; background: var(--wk-surface); border: 1px solid var(--wk-border); border-radius: var(--wk-radius-lg); box-shadow: var(--wk-shadow); padding: 1.75rem; display: flex; flex-direction: column; gap: 1rem; }
.wk-public-brand { display: flex; align-items: center; gap: .6rem; font-weight: 650; color: var(--wk-text-muted); }
.wk-public-brand .wk-logo { height: 28px; width: auto; }
.wk-public-state { text-align: center; padding: 1rem 0; }
.wk-public-icon { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; font-size: 1.6rem; margin: 0 auto 1rem; background: var(--wk-accent-soft); color: var(--wk-accent-text); }
.wk-public-icon.is-muted { background: var(--wk-surface-muted); color: var(--wk-text-muted); }
.wk-public-event { display: flex; flex-direction: column; gap: .45rem; padding: 1rem 1.1rem; background: var(--wk-surface-muted); border: 1px solid var(--wk-border); border-radius: var(--wk-radius); }
.wk-public-event-title { font-weight: 700; font-size: 1.1rem; overflow-wrap: anywhere; }
.wk-public-fact { display: flex; gap: .55rem; align-items: baseline; font-size: .9375rem; }
.wk-public-fact .bi { color: var(--wk-text-muted); }
.wk-public-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
@media (max-width: 400px) { .wk-public-actions { grid-template-columns: 1fr; } }
.wk-public-note { display: flex; gap: .5rem; align-items: baseline; margin: 0; font-size: .875rem; color: var(--wk-text-muted); }
.wk-public-done { display: flex; gap: .75rem; align-items: flex-start; padding: .9rem 1rem; border-radius: var(--wk-radius); font-size: .9375rem; }
.wk-public-done .bi { font-size: 1.35rem; line-height: 1.2; }
.wk-public-done.is-yes { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); }
.wk-public-done.is-no { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); }
.wk-public-foot { margin: 0; font-size: .8125rem; color: var(--wk-text-muted); }

/* Editor: the person editing is asked to confirm. */
.wk-answer-banner { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem;
    padding: .7rem .85rem; border-radius: var(--wk-radius-sm); background: var(--wk-accent-soft); color: var(--wk-accent-text); font-weight: 550; font-size: .875rem; }
.wk-answer-text { display: flex; gap: .5rem; align-items: center; }
.wk-answer-buttons { display: flex; gap: .4rem; }
.wk-answer-buttons .btn.active { box-shadow: inset 0 0 0 1.5px currentColor; }
.wk-declined-badge { margin-left: .4rem; padding: .05rem .45rem; border-radius: 999px; font-size: .7rem; font-weight: 600;
    color: var(--bs-danger-text-emphasis); background: var(--bs-danger-bg-subtle); }

/* Events list */
.wk-date-range { display: flex; align-items: center; gap: .4rem; }
.wk-date-range .form-control { width: auto; border-radius: 999px; }
.wk-date-range .bi { color: var(--wk-text-muted); }
.wk-event-when { white-space: nowrap; width: 1%; }
/* Each row carries the event's colour (the person's "agenda colours" setting), as on the calendar. */
.wk-event-table tbody tr > td:first-child { box-shadow: inset 4px 0 0 var(--wk-event-color, transparent); padding-left: 1.1rem; }
.wk-event-day { font-weight: 600; text-transform: capitalize; }
.wk-event-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: .25rem; max-width: 60ch; white-space: normal; }
.wk-faces { display: inline-flex; vertical-align: middle; }
.wk-faces .wk-avatar { border-radius: 50%; box-shadow: 0 0 0 2px var(--wk-surface); }
.wk-faces .wk-avatar + .wk-avatar { margin-left: -6px; }
@media (max-width: 575.98px) {
    .wk-event-filters > * { flex: 1 1 100%; min-width: 0; }
    .wk-date-range .form-control { flex: 1 1 0; width: 0; min-width: 0; }
    .wk-filters > .wk-date-range { flex: 1 1 100%; }
    .wk-event-filters .form-select { width: 100%; }
    /* One stacked block per event: when, then what. */
    .wk-event-table thead { display: none; }
    .wk-event-table tbody tr { display: flex; flex-direction: column; gap: .35rem; padding: .8rem 1rem .8rem 1.15rem; box-shadow: inset 4px 0 0 var(--wk-event-color, transparent); }
    .wk-event-table tbody tr > td:first-child { box-shadow: none; padding-left: 0; }
    .wk-event-table tbody tr + tr { border-top: 1px solid var(--wk-border); }
    .wk-event-table tbody td { display: block; padding: 0; border: 0; width: auto; white-space: normal; }
    .wk-event-table tbody td.d-none { display: none !important; }
    .wk-event-table .wk-event-when a { display: flex !important; gap: .5rem; align-items: baseline; }
}

/* Boards */
.wk-board-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.wk-board-card { position: relative; display: flex; flex-direction: column; gap: .6rem; padding: 1.1rem 1.15rem 1rem; overflow: hidden;
    transition: box-shadow .15s var(--wk-ease), transform .15s var(--wk-ease); }
.wk-board-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--wk-board-color); }
.wk-board-card:hover { box-shadow: var(--wk-shadow); transform: translateY(-1px); }
.wk-board-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.wk-board-name { margin: 0; font-size: 1.05rem; font-weight: 650; overflow-wrap: anywhere; }
.wk-board-edit { position: relative; z-index: 2; margin: -.25rem -.4rem 0 0; }
.wk-board-progress { height: 6px; border-radius: 999px; background: var(--wk-surface-muted); overflow: hidden; }
.wk-board-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--wk-board-color); }
@media (prefers-reduced-motion: reduce) { .wk-board-card { transition: none; } .wk-board-card:hover { transform: none; } }

/* A board: lists side by side, scrolling sideways; on phones one list per screen, snapping. */
/* Every list has the same height (its tasks scroll inside, the "add" box stays at the bottom): side by side they fill
   the window's height; wrapped down the page (.is-grid) they're a fixed height. */
.wk-kanban { --wk-list-height: max(24rem, calc(100vh - 230px)); display: flex; align-items: stretch; gap: 1rem; overflow-x: auto;
    padding: .25rem .25rem 1rem; margin: 0 -.25rem; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.wk-kanban.is-grid { --wk-list-height: 30rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); overflow-x: visible; }
.wk-kanban-list { flex: 0 0 300px; display: flex; flex-direction: column; gap: .6rem; height: var(--wk-list-height); min-width: 0;
    padding: .8rem; border-radius: var(--wk-radius); background: var(--wk-surface-muted); border: 1px solid var(--wk-border); scroll-snap-align: start; }
.wk-kanban-list:target { box-shadow: 0 0 0 3px rgb(88 66 232 / .35); }
.wk-kanban-new { background: transparent; border-style: dashed; height: auto; align-self: flex-start; } /* not a list: just its form */
.wk-kanban-head { display: flex; align-items: center; gap: .35rem; min-width: 0; }
.wk-kanban-handle { cursor: grab; color: var(--wk-text-muted); padding: .1rem; margin-left: -.3rem; touch-action: none; }
.wk-kanban-title { flex: 1; min-width: 0; text-align: left; border: 0; background: none; padding: .15rem .25rem; border-radius: var(--wk-radius-sm);
    font-weight: 650; color: var(--wk-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-kanban-title:hover, .wk-kanban-title:focus-visible { background: var(--wk-nav-hover); }
.wk-kanban-count { font-size: .75rem; font-weight: 600; color: var(--wk-text-muted); background: var(--wk-surface); border: 1px solid var(--wk-border); border-radius: 999px; padding: 0 .5rem; }
.wk-kanban-meta { display: flex; align-items: center; gap: .5rem; min-height: 22px; }
.wk-kanban-tasks { flex: 1 1 auto; display: flex; flex-direction: column; gap: .5rem; min-height: 2.5rem; overflow-y: auto; margin: 0 -.2rem; padding: .1rem .2rem; }
.wk-kanban-add { display: flex; gap: .4rem; }
.wk-task { display: flex; gap: .5rem; align-items: flex-start; padding: .6rem .65rem; background: var(--wk-surface); border: 1px solid var(--wk-border);
    border-radius: var(--wk-radius-sm); box-shadow: var(--wk-shadow-sm); cursor: grab; }
.wk-task:hover { border-color: var(--wk-iris-300); }
.wk-task-check { margin: 0; flex-shrink: 0; }
.wk-check { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--wk-border); background: var(--wk-surface); color: transparent;
    display: grid; place-items: center; padding: 0; margin-top: .05rem; font-size: .8rem; }
.wk-check:hover { border-color: var(--wk-iris-300); }
.wk-check.is-on { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
.wk-task-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .3rem; text-align: left; border: 0; background: none; padding: 0; color: var(--wk-text); cursor: pointer; }
.wk-task-title { font-size: .875rem; font-weight: 550; line-height: 1.35; overflow-wrap: anywhere; }
.wk-task.is-done .wk-task-title { text-decoration: line-through; color: var(--wk-text-muted); }
.wk-task-label { align-self: flex-start; font-size: .68rem; font-weight: 650; padding: .05rem .5rem; border-radius: 999px;
    color: var(--wk-label); background: color-mix(in srgb, var(--wk-label) 16%, transparent); }
.wk-task-meta { display: flex; align-items: center; gap: .5rem; font-size: .75rem; min-height: 22px; }
.wk-due { display: inline-flex; align-items: center; gap: .25rem; font-size: .75rem; color: var(--wk-text-muted); white-space: nowrap; }
.wk-due.is-late { color: var(--bs-danger-text-emphasis); font-weight: 600; }
.wk-drag-ghost { opacity: .45; }
.wk-drag-chosen { box-shadow: var(--wk-shadow-lg); cursor: grabbing; }
/* With a mouse the wheel scrolls the board sideways (worki.js); snapping would pull it back to a list's edge. */
@media (hover: hover) and (pointer: fine) { .wk-kanban { scroll-snap-type: none; } }
@media (max-width: 575.98px) {
    .wk-kanban { --wk-list-height: max(22rem, calc(100dvh - 240px)); scroll-snap-type: x mandatory; gap: .75rem; }
    .wk-kanban.is-grid { --wk-list-height: 26rem; }
    .wk-kanban-list { flex-basis: 86vw; }
}
.wk-board-dot { width: 12px; height: 12px; border-radius: 4px; flex-shrink: 0; }

/* A board's scrollbars behave like the sidebar's: hidden until hovered, then thin and rounded. */
.wk-kanban, .wk-kanban-tasks, .wk-home-tasks-scroll { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.wk-kanban:hover, .wk-kanban-tasks:hover, .wk-home-tasks-scroll:hover { scrollbar-color: var(--wk-ink-300) transparent; }
[data-bs-theme="dark"] :is(.wk-kanban, .wk-kanban-tasks, .wk-home-tasks-scroll):hover { scrollbar-color: var(--wk-ink-700) transparent; }
.wk-kanban::-webkit-scrollbar { height: 6px; }
.wk-kanban-tasks::-webkit-scrollbar, .wk-home-tasks-scroll::-webkit-scrollbar { width: 6px; }
:is(.wk-kanban, .wk-kanban-tasks, .wk-home-tasks-scroll)::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; }
:is(.wk-kanban, .wk-kanban-tasks, .wk-home-tasks-scroll):hover::-webkit-scrollbar-thumb { background: var(--wk-ink-300); }
[data-bs-theme="dark"] :is(.wk-kanban, .wk-kanban-tasks, .wk-home-tasks-scroll):hover::-webkit-scrollbar-thumb { background: var(--wk-ink-700); }

/* Finance settings: subcategories sit under their main category. */
.wk-sub-row { padding-left: 1.25rem; }
.wk-parent-select { width: auto; max-width: 12rem; }

/* Money: owed (negative) and in credit (positive). */
.wk-money-neg { color: var(--bs-danger-text-emphasis); }
.wk-money-pos { color: var(--bs-success-text-emphasis); }
.wk-ledger-table td.wk-num, .wk-ledger-table th.wk-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wk-ledger-table tfoot td { font-weight: 650; border-top: 2px solid var(--wk-border); }
.wk-ledger-opening td { color: var(--wk-text-muted); font-style: italic; }
.wk-ledger-table tbody td { vertical-align: top; }
.wk-ledger-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .85rem; margin-top: .15rem; font-size: .8rem; color: var(--wk-text-muted); }
.wk-ledger-meta > span { display: inline-flex; align-items: center; gap: .3rem; }
.wk-ledger-state { display: flex; justify-content: flex-end; align-items: center; gap: .2rem; margin-top: .1rem; font-size: .75rem; font-weight: 500; color: var(--wk-text-muted); }
.wk-ledger-state.is-settled { color: var(--bs-success-text-emphasis); }
.wk-ledger-state.is-open { color: var(--bs-warning-text-emphasis); }
.wk-ledger-state.is-late { color: var(--bs-danger-text-emphasis); font-weight: 600; }
@media (max-width: 575.98px) { .wk-ledger-table tfoot { display: none; } } /* the stats above carry the totals */
.wk-settle-list { display: flex; flex-direction: column; gap: .35rem; max-height: 220px; overflow-y: auto; }
.wk-settle-item { display: flex; align-items: center; gap: .6rem; padding: .45rem .6rem; border: 1px solid var(--wk-border); border-radius: var(--wk-radius-sm); background: var(--wk-surface); cursor: pointer; }
.wk-settle-item:has(input:checked) { border-color: var(--wk-iris-300); background: var(--wk-accent-soft); }
.wk-settle-item .wk-settle-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* A customer's/supplier's account on their page: balance, and owed vs paid per month (validated pair: coral/iris). */
:root { --wk-chart-charged: #e8553a; --wk-chart-paid: #5842e8; }
[data-bs-theme="dark"] { --wk-chart-charged: #f0603f; --wk-chart-paid: #8b7bff; }
.wk-account-balance { display: flex; flex-direction: column; gap: .1rem; }
.wk-account-balance-value { font-size: 1.6rem; font-weight: 650; font-variant-numeric: tabular-nums; line-height: 1.2; }
.wk-chart-legend { display: flex; gap: .8rem; font-size: .8rem; color: var(--wk-text-muted); white-space: nowrap; }
.wk-chart-legend > span { display: inline-flex; align-items: center; gap: .35rem; }
.wk-chart-key { width: 10px; height: 10px; border-radius: 3px; background: var(--wk-chart-paid); }
.wk-chart-key.is-charged { background: var(--wk-chart-charged); }
.wk-month-chart { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2px; height: 180px; padding-top: 1.1rem; border-bottom: 1px solid var(--wk-border); }
.wk-month-chart-max { position: absolute; top: 0; left: 0; right: 0; border-bottom: 1px dashed var(--wk-border); font-size: .7rem; line-height: 1.1rem; color: var(--wk-text-muted); pointer-events: none; }
.wk-month { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; border-radius: var(--wk-radius-sm) var(--wk-radius-sm) 0 0; outline: none; cursor: default; }
.wk-month:hover, .wk-month:focus-visible { background: var(--wk-surface-muted); }
.wk-month-bars { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 2px; padding: 0 12%; }
.wk-bar { flex: 1; max-width: 14px; border-radius: 4px 4px 0 0; background: var(--wk-chart-paid); }
.wk-bar.is-charged { background: var(--wk-chart-charged); }
.wk-month-label { text-align: center; font-size: .7rem; color: var(--wk-text-muted); padding: .3rem 0 .15rem; text-transform: capitalize; overflow: hidden; }
.wk-mini-ledger li { display: flex; align-items: baseline; gap: .75rem; padding: .45rem 0; border-top: 1px solid var(--wk-border); font-variant-numeric: tabular-nums; min-width: 0; }
.wk-mini-ledger li:first-child { border-top: 0; }
@media (max-width: 575.98px) { .wk-month-chart { height: 140px; } .wk-month-bars { padding: 0 4%; gap: 1px; } }
.wk-balance-strip { flex-direction: row; align-items: center; gap: .75rem; padding: .85rem 1.1rem; color: inherit; }
.wk-balance-strip > .d-flex { flex: 1; }
.wk-balance-strip .wk-account-balance-value { font-size: 1.35rem; white-space: nowrap; }
/* data-wk-combobox="stacked": the hint goes under the label (long hints in narrow columns, e.g. a plan's amount and schedule). */
.wk-combo-stacked .wk-combo-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: .5rem; align-items: center; }
.wk-combo-stacked .wk-combo-label { grid-column: 1; white-space: normal; }
.wk-combo-stacked .wk-combo-hint { grid-column: 1; grid-row: 2; }
.wk-combo-stacked .wk-combo-list li.selected::after { grid-column: 2; grid-row: 1 / span 2; margin-left: 0; }

/* A person's agenda on their page: one row per event, with the event's colour on the left (as the events list). */
.wk-activity-list { display: flex; flex-direction: column; gap: .4rem; }
.wk-activity-item { display: flex; align-items: center; gap: .75rem; padding: .55rem .75rem .55rem .9rem; border: 1px solid var(--wk-border); border-radius: var(--wk-radius-sm);
    box-shadow: inset 4px 0 0 var(--wk-event-color, var(--wk-border)); color: inherit; text-decoration: none; min-width: 0; }
.wk-activity-item:hover, .wk-activity-item:focus-visible { background: var(--wk-surface-muted); color: inherit; }

/* --- CMS ------------------------------------------------------------------------------------ */
/* Sidebar: the company's CMS menu under "Content". */
.wk-subnav { display: grid; gap: 1px; margin: .15rem 0 .35rem 1.6rem; padding-left: .6rem; border-left: 1px solid var(--wk-border); }
.wk-subnav .wk-subnav { margin: 0 0 .2rem .35rem; }
.wk-subnav-link,
.wk-subnav-group > summary {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .32rem .6rem;
    border-radius: var(--wk-radius-sm);
    color: var(--wk-text-muted);
    font-size: .8125rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}
.wk-subnav-group > summary { list-style: none; }
.wk-subnav-group > summary::-webkit-details-marker { display: none; }
.wk-subnav-group > summary .bi { margin-left: auto; font-size: .7rem; transition: transform .15s var(--wk-ease); }
.wk-subnav-group[open] > summary .bi { transform: rotate(180deg); }
.wk-subnav-group > .wk-subnav-link,
.wk-subnav-group > .wk-subnav-group { margin-left: .75rem; }
.wk-subnav-link:hover, .wk-subnav-group > summary:hover { background: var(--wk-nav-hover); color: var(--wk-text); }
.wk-subnav-link.active { background: var(--wk-accent-soft); color: var(--wk-accent-text); font-weight: 600; }
.wk-collapsed .wk-sidebar .wk-subnav { display: none; }

.wk-cms-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; align-items: start; }
.wk-link-list-heading { display: block; padding: .6rem .6rem .2rem; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--wk-text-muted); }

/* A type's list: drag handle, photo, title and details, visible switch, delete. */
.wk-content-list { list-style: none; margin: 0; padding: .35rem; }
.wk-content-list > li {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .5rem;
    border-radius: var(--wk-radius-sm);
    background: var(--wk-surface);
}
.wk-content-list > li + li { border-top: 1px solid var(--wk-border); border-radius: 0; }
.wk-content-list > li.is-hidden .wk-content-row-main { opacity: .6; }
.wk-content-row-main { display: flex; align-items: center; gap: .8rem; min-width: 0; flex: 1; text-decoration: none; padding: .15rem .25rem; border-radius: var(--wk-radius-sm); }
.wk-content-row-main:hover { background: var(--wk-surface-muted); }
.wk-content-row-main .wk-thumb { width: 52px; height: 52px; }
.wk-content-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .8rem; font-size: .78rem; color: var(--wk-text-muted); margin-top: .15rem; }
.wk-content-meta .bi { margin-right: .25rem; }
.wk-content-meta .wk-chip .bi { margin-right: .2rem; }
.wk-drag-handle { color: var(--wk-text-muted); cursor: grab; padding: .35rem .15rem; touch-action: none; }
.wk-drag-handle:hover { color: var(--wk-text); }

/* The editor's photos: a grid of squares, the first is the main one. */
.wk-photo-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .75rem; }
.wk-photo-grid > li { position: relative; border: 1px solid var(--wk-border); border-radius: var(--wk-radius-sm); overflow: hidden; background: var(--wk-surface); }
.wk-photo-grid > li.is-hidden .wk-photo { opacity: .45; }
.wk-photo { display: grid; place-items: center; aspect-ratio: 1; background: var(--wk-surface-muted); color: var(--wk-text-muted); font-size: 1.5rem; }
.wk-photo img { width: 100%; height: 100%; object-fit: cover; }
.wk-photo-bar { display: flex; align-items: center; gap: .35rem; padding: .3rem .35rem; border-top: 1px solid var(--wk-border); }
.wk-photo-badge {
    position: absolute;
    top: .4rem;
    left: .4rem;
    padding: .1rem .45rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 600;
    background: var(--wk-surface);
    color: var(--wk-accent-text);
    box-shadow: var(--wk-shadow-sm);
}

/* Rich text (Quill, snow theme) in Worki's colours. The textarea shows only in the HTML view. */
.wk-richtext:has(> .wk-richtext-box:not(.is-html)) > textarea { display: none; }
.wk-richtext { display: flex; flex-direction: column; }
.wk-richtext > .wk-richtext-box { order: -1; } /* toolbar above the HTML view */
.wk-richtext > textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8125rem; min-height: 16rem; margin-top: .5rem; }
.wk-richtext-box { border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); background: var(--bs-body-bg); }
.wk-richtext-box:focus-within { border-color: var(--wk-iris-400); box-shadow: 0 0 0 .2rem rgb(109 91 247 / .15); }
.wk-richtext-box.is-html .ql-container { display: none; }
.wk-richtext-box.is-html .ql-formats > :not(.ql-html) { opacity: .35; pointer-events: none; }
.wk-richtext-box .ql-toolbar.ql-snow { border: 0; border-bottom: 1px solid var(--bs-border-color); font-family: inherit; padding: .4rem .5rem; }
.wk-richtext-box .ql-container.ql-snow { border: 0; font-family: inherit; font-size: .9375rem; }
.wk-richtext-box .ql-editor { min-height: 12rem; max-height: 32rem; overflow-y: auto; line-height: 1.6; color: var(--wk-text); }
.wk-richtext-box .ql-editor.ql-blank::before { color: var(--wk-text-muted); font-style: normal; }
.wk-richtext-box .ql-snow .ql-stroke { stroke: var(--wk-text-muted); }
.wk-richtext-box .ql-snow .ql-fill { fill: var(--wk-text-muted); }
.wk-richtext-box .ql-snow .ql-picker { color: var(--wk-text-muted); }
.wk-richtext-box .ql-snow button:hover .ql-stroke, .wk-richtext-box .ql-snow button.ql-active .ql-stroke,
.wk-richtext-box .ql-snow .ql-picker-label:hover .ql-stroke, .wk-richtext-box .ql-snow .ql-picker-label.ql-active .ql-stroke { stroke: var(--wk-accent-text); }
.wk-richtext-box .ql-snow button:hover .ql-fill, .wk-richtext-box .ql-snow button.ql-active .ql-fill { fill: var(--wk-accent-text); }
.wk-richtext-box .ql-snow button:hover, .wk-richtext-box .ql-snow button.ql-active,
.wk-richtext-box .ql-snow .ql-picker-label:hover, .wk-richtext-box .ql-snow .ql-picker-label.ql-active { color: var(--wk-accent-text); }
.wk-richtext-box .ql-snow .ql-picker-options { background: var(--wk-surface); border-color: var(--wk-border) !important; border-radius: var(--wk-radius-sm); box-shadow: var(--wk-shadow); }
.wk-richtext-box .ql-snow.ql-toolbar button .bi { font-size: 1rem; line-height: 1; color: var(--wk-text-muted); }
.wk-richtext-box .ql-snow.ql-toolbar button:hover .bi, .wk-richtext-box .ql-snow.ql-toolbar button.ql-active .bi { color: var(--wk-accent-text); }
.wk-richtext-box .ql-unlink { position: relative; }
.wk-richtext-box .ql-unlink .wk-rte-slash { position: absolute; inset: 0; display: grid; place-items: center; }
.wk-richtext-box .ql-snow .ql-tooltip { background: var(--wk-surface); color: var(--wk-text); border-color: var(--wk-border); border-radius: var(--wk-radius-sm); box-shadow: var(--wk-shadow); z-index: 5; }
.wk-richtext-box .ql-snow .ql-tooltip input[type=text] { background: var(--wk-surface); color: var(--wk-text); border-color: var(--wk-border); }
.wk-richtext-box .ql-snow .ql-tooltip::before { content: attr(data-visit); }
.wk-richtext-box .ql-snow .ql-tooltip[data-mode=link]::before { content: attr(data-enter); }
.wk-richtext-box .ql-snow .ql-tooltip a.ql-action::after { content: attr(data-edit); }
.wk-richtext-box .ql-snow .ql-tooltip.ql-editing a.ql-action::after { content: attr(data-save); }
.wk-richtext-box .ql-snow .ql-tooltip a.ql-remove::before { content: attr(data-remove); }
.wk-richtext-box .ql-snow a { color: var(--wk-accent-text); }

/* Platform admin: the menu editor and the fields of a content type. */
/* minmax(0, 1fr): a grid column otherwise grows to fit its longest unbroken text, pushing rows out of the card. */
.wk-menu-tree { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .35rem; }
.wk-menu-tree > li { min-width: 0; }
.wk-menu-tree .wk-menu-tree { margin: .35rem 0 .15rem 1.6rem; }
.wk-menu-row {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem .6rem;
    border: 1px solid var(--wk-border);
    border-radius: var(--wk-radius-sm);
    background: var(--wk-surface);
}
.wk-menu-row.is-missing { border-style: dashed; }
.wk-switch-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.wk-callout {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem .9rem;
    border-radius: var(--wk-radius-sm);
    background: var(--wk-accent-soft);
    color: var(--wk-text);
}
.wk-callout > .bi { font-size: 1.25rem; color: var(--wk-accent-text); }
.wk-tab.disabled { opacity: .5; pointer-events: none; }

/* Keywords as pills (input[data-wk-tags]). */
.wk-tags { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; min-height: calc(2.5rem + 2px); padding: .3rem .45rem; cursor: text; height: auto; }
.wk-tags:focus-within { border-color: var(--wk-iris-400); box-shadow: 0 0 0 .2rem rgb(109 91 247 / .15); }
.wk-tags.is-full { border-color: var(--bs-danger); }
.wk-tag { padding: .2rem .3rem .2rem .65rem; gap: .15rem; }
.wk-tag-remove {
    display: grid;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    opacity: .7;
}
.wk-tag-remove:hover, .wk-tag-remove:focus-visible { opacity: 1; background: rgb(0 0 0 / .08); }
[data-bs-theme="dark"] .wk-tag-remove:hover { background: rgb(255 255 255 / .12); }
.wk-tags-entry { flex: 1; min-width: 8rem; border: 0; outline: 0; background: transparent; color: var(--wk-text); padding: .15rem .2rem; }

/* --- Shop ------------------------------------------------------------------------------------ */
.wk-rate-input { width: 7rem; flex-shrink: 0; }
/* Shipping rates: one row of inputs per weight band. Every row (the "add" one too) has the same grid, padding and border
   width, so the columns line up under the headings; the actions have their own column. Two per line when the card is narrow. */
.wk-rates { container-type: inline-size; }
.wk-rate-head, .wk-rate-row {
    display: grid;
    grid-template-columns: 6.5rem 6.5rem 6.5rem minmax(7rem, 1fr) 2.75rem 8rem 5.75rem;
    gap: .5rem;
    align-items: center;
    padding: .45rem .55rem;
    border: 1px solid transparent;
}
.wk-rate-head { padding-block: 0; }
.wk-rate-row { margin: 0; border-radius: var(--wk-radius-sm); }
.wk-rate-row.is-new { border-style: dashed; border-color: var(--wk-border); background: var(--wk-surface-muted); }
.wk-rate-actions { display: flex; align-items: center; justify-content: flex-end; gap: .25rem; }
.wk-rate-inline-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } /* read, not shown, beside the column heading */
@container (max-width: 760px) {
    .wk-rate-inline-label { position: static; width: auto; height: auto; clip-path: none; }
    .wk-rate-head { display: none; }
    .wk-rate-row { grid-template-columns: 1fr 1fr; border-color: var(--wk-border); }
    .wk-rate-actions { grid-column: 1 / -1; }
}
/* The list's quick switches (new, promotion, on focus): chips that light up when on. */
.wk-switch-chips { align-items: center; gap: .3rem; flex-shrink: 0; }
.wk-switch-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .55rem;
    border: 1px solid var(--wk-border);
    border-radius: 999px;
    background: transparent;
    color: var(--wk-text-muted);
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
}
.wk-switch-chip:hover { border-color: var(--wk-iris-300); color: var(--wk-text); }
.wk-switch-chip.on { background: var(--wk-accent-soft); border-color: transparent; color: var(--wk-accent-text); }

/* --- Home (dashboard) ------------------------------------------------------------------------ */
.wk-dash-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem; }
.wk-stat-link { text-decoration: none; color: inherit; transition: border-color .15s var(--wk-ease), box-shadow .15s var(--wk-ease), transform .15s var(--wk-ease); }
.wk-stat-link:hover { border-color: var(--wk-iris-300); box-shadow: var(--wk-shadow); transform: translateY(-1px); color: inherit; }
.wk-stat-icon.is-accent { background: rgb(255 107 74 / .14); color: var(--wk-coral-600); }
.wk-stat-value { font-variant-numeric: tabular-nums; }
.wk-home-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.wk-home-list { border: 1px solid var(--wk-border); border-radius: var(--wk-radius-sm); padding: .6rem .75rem .75rem .9rem; min-width: 0;
    box-shadow: inset 3px 0 0 var(--wk-list-color, var(--wk-border)); display: flex; flex-direction: column; }
.wk-home-list-name { border: 0; background: none; padding: 0; font-weight: 600; color: var(--bs-body-color); text-align: left; min-width: 0; }
.wk-home-list-name:hover, .wk-home-list-name:focus-visible { color: var(--bs-primary); text-decoration: underline; }
.wk-home-progress { height: 4px; border-radius: 2px; background: var(--wk-surface-muted); overflow: hidden; margin-bottom: .35rem; }
.wk-home-progress > span { display: block; height: 100%; background: var(--bs-success); border-radius: inherit; }
/* All of a list's tasks, scrolling inside it past about eight rows. */
.wk-home-tasks-scroll { max-height: 17rem; overflow-y: auto; margin-right: -.5rem; padding-right: .5rem; overscroll-behavior: contain; }
.wk-home-tasks li { display: flex; align-items: center; gap: .55rem; padding: .3rem 0; min-width: 0; }
.wk-home-tasks li + li { border-top: 1px solid var(--wk-border-subtle, var(--wk-border)); }
.wk-home-tasks .form-check-input { margin: 0; cursor: pointer; flex-shrink: 0; }
.wk-home-task-title { display: flex; align-items: center; gap: .35rem; flex: 1 1 auto; min-width: 0; border: 0; background: none; padding: 0;
    color: var(--bs-body-color); text-align: left; }
.wk-home-task-title:hover > span, .wk-home-task-title:focus-visible > span { color: var(--bs-primary); text-decoration: underline; }
.wk-home-tasks li.is-done .wk-home-task-title { color: var(--bs-secondary-color); }
.wk-home-tasks li.is-done .wk-home-task-title > span { text-decoration: line-through; }
.wk-home-task-people { display: inline-flex; flex-shrink: 0; }
.wk-home-task-people .wk-avatar + .wk-avatar { margin-left: -.35rem; box-shadow: 0 0 0 2px var(--bs-body-bg); }
.wk-home-done { margin-top: .35rem; }
.wk-home-done > summary { cursor: pointer; padding: .2rem 0; }
.wk-home-leads li { padding: .6rem 0; border-top: 1px solid var(--wk-border); }
.wk-home-leads li:first-child { border-top: 0; padding-top: 0; }
.wk-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* --- Chart hover cards ([data-wk-tip]) ---------------------------------------------------------- */
.wk-month { cursor: pointer; transition: opacity .15s var(--wk-ease), background-color .15s var(--wk-ease); }
.wk-month .wk-bar { transition: filter .15s var(--wk-ease), transform .15s var(--wk-ease); transform-origin: bottom; }
.wk-month-chart.has-active .wk-month:not(.is-active) { opacity: .45; }
.wk-month.is-active { background: var(--wk-surface-muted); }
.wk-month.is-active .wk-bar { filter: saturate(1.15) brightness(1.05); transform: scaleY(1.02); }
.wk-month.is-active .wk-month-label { color: var(--wk-text); font-weight: 600; }

.wk-tip {
    --wk-tip-arrow: 50%;
    position: absolute;
    z-index: 1080;
    width: max-content;
    max-width: min(280px, calc(100vw - 16px));
    min-width: 220px;
    padding: .8rem .9rem .75rem;
    border: 1px solid var(--wk-border);
    border-radius: var(--wk-radius);
    background: var(--wk-surface);
    color: var(--wk-text);
    box-shadow: var(--wk-shadow-lg);
    font-size: .8125rem;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px) scale(.98);
    transition: opacity .12s var(--wk-ease), transform .12s var(--wk-ease);
}
.wk-tip.show { opacity: 1; transform: none; }
.wk-tip.is-below { transform: translateY(-4px) scale(.98); }
.wk-tip.is-below.show { transform: none; }
/* The little arrow towards the month. */
.wk-tip::after {
    content: "";
    position: absolute;
    left: var(--wk-tip-arrow);
    bottom: -6px;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    background: var(--wk-surface);
    border-right: 1px solid var(--wk-border);
    border-bottom: 1px solid var(--wk-border);
    transform: rotate(45deg);
}
.wk-tip.is-below::after { bottom: auto; top: -6px; transform: rotate(225deg); }
.wk-tip-head { display: flex; flex-direction: column; margin-bottom: .55rem; }
.wk-tip-title { font-weight: 650; font-size: .875rem; }
.wk-tip-sub { color: var(--wk-text-muted); font-size: .72rem; }
.wk-tip-rows { margin: 0; display: grid; gap: .3rem; }
.wk-tip-rows > div { display: flex; align-items: center; gap: .75rem; }
.wk-tip-rows dt { display: flex; align-items: center; gap: .45rem; font-weight: 500; color: var(--wk-text-muted); margin: 0; }
.wk-tip-rows dd { margin: 0 0 0 auto; font-weight: 650; font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: .4rem; white-space: nowrap; }
.wk-tip-total { margin-top: .2rem; padding-top: .4rem; border-top: 1px solid var(--wk-border); }
.wk-tip-total dt { color: var(--wk-text); }
.wk-tip .is-up { color: #067647; }
.wk-tip .is-down { color: var(--wk-coral-600); }
[data-bs-theme="dark"] .wk-tip .is-up { color: #6ce9a6; }
[data-bs-theme="dark"] .wk-tip .is-down { color: var(--wk-coral-400); }
.wk-tip-trend { display: inline-flex; align-items: center; gap: .1rem; font-size: .68rem; font-weight: 600; padding: .05rem .35rem; border-radius: 999px; background: var(--wk-surface-muted); }
.wk-tip-meter { height: 6px; margin-top: .65rem; border-radius: 999px; background: var(--wk-surface-muted); overflow: hidden; }
.wk-tip-meter > span { display: block; height: 100%; border-radius: inherit; background: var(--wk-chart-paid); }
.wk-tip-foot { margin-top: .35rem; color: var(--wk-text-muted); font-size: .72rem; }
@media (prefers-reduced-motion: reduce) { .wk-tip, .wk-month, .wk-month .wk-bar { transition: none; } }

/* --- Analytics (cash flow) ------------------------------------------------------------------------ */
/* Money in wears the "paid" hue and money out the "charged" one, the same two the month charts use (checked for
   colour-blind separation and contrast on both themes). Text stays in text colours; a key beside it says which is which. */
:root { --wk-flow-in: var(--wk-chart-paid); --wk-flow-out: var(--wk-chart-charged); --wk-good: #067647; --wk-bad: #b42318; }
[data-bs-theme="dark"] { --wk-good: #6ce9a6; --wk-bad: #fda29b; }
.wk-chart-key.is-in { background: var(--wk-flow-in); }
.wk-chart-key.is-out { background: var(--wk-flow-out); }
.wk-flow-stats { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }
.wk-flow-stats .wk-stat-label { display: flex; align-items: center; gap: .4rem; }
.wk-flow-stats .wk-stat-value { font-size: 1.3rem; }
.wk-stat-lead { border-color: var(--wk-iris-300); }
.wk-delta { display: inline-flex; align-items: center; gap: .2rem; font-weight: 600; color: var(--wk-text-muted); }
.wk-delta.is-good { color: var(--wk-good); }
.wk-delta.is-bad { color: var(--wk-bad); }
.wk-delta-note { color: var(--wk-text-muted); }

/* Columns per slice: money in and out on one scale, the difference below on its own (two plots, never two scales on
   one). Gridlines are solid hairlines; each column is the hover and focus target for both plots. */
.wk-flow { --wk-flow-h: 190px; --wk-net-h: 76px; --wk-flow-gap: 30px; --wk-flow-gutter: 2.75rem; position: relative; display: grid;
    grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding: 1rem 0 0 var(--wk-flow-gutter); }
.wk-flow-axis { position: absolute; left: var(--wk-flow-gutter); right: 0; top: 1rem; height: var(--wk-flow-h); pointer-events: none; }
.wk-flow-axis.is-net { top: calc(1rem + var(--wk-flow-h) + var(--wk-flow-gap)); height: var(--wk-net-h); }
.wk-flow-tick { position: absolute; left: calc(-1 * var(--wk-flow-gutter)); right: 0; border-bottom: 1px solid var(--wk-border); padding-bottom: 1px;
    font-size: .68rem; line-height: 1; color: var(--wk-text-muted); font-variant-numeric: tabular-nums; }
.wk-flow-axis.is-net .wk-flow-tick { border-bottom-color: transparent; }
.wk-flow-caption { position: absolute; right: 0; top: -1.15rem; font-size: .68rem; font-weight: 600; color: var(--wk-text-muted); }
.wk-flow-axis.is-net .wk-flow-tick.is-zero { border-bottom-color: var(--wk-border); }
.wk-flow-col { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: var(--wk-radius-sm); outline: none; cursor: default;
    transition: opacity .15s var(--wk-ease), background-color .15s var(--wk-ease); }
.wk-flow-col:hover, .wk-flow-col:focus-visible, .wk-flow-col.is-active { background: var(--wk-surface-muted); }
.wk-flow.has-active .wk-flow-col:not(.is-active) { opacity: .45; }
.wk-flow-bars { height: var(--wk-flow-h); display: flex; align-items: flex-end; justify-content: center; gap: 2px; padding: 0 12%; }
.wk-bar.is-in { background: var(--wk-flow-in); }
.wk-bar.is-out { background: var(--wk-flow-out); }
.wk-flow-net { position: relative; height: var(--wk-net-h); margin-top: var(--wk-flow-gap); }
.wk-net-bar { position: absolute; left: 50%; width: min(52%, 14px); transform: translateX(-50%); }
.wk-net-bar.is-pos { bottom: 50%; background: var(--wk-flow-in); border-radius: 4px 4px 0 0; }
.wk-net-bar.is-neg { top: 50%; background: var(--wk-flow-out); border-radius: 0 0 4px 4px; }
.wk-flow-label { height: 1.5rem; padding-top: .35rem; text-align: center; font-size: .68rem; color: var(--wk-text-muted); white-space: nowrap; overflow: visible; }
.wk-flow-col.is-active .wk-flow-label { color: var(--wk-text); font-weight: 600; }
@media (max-width: 575.98px) { .wk-flow { --wk-flow-h: 150px; --wk-net-h: 64px; } .wk-flow-bars { padding: 0 4%; gap: 1px; } }

/* A list of names with a bar each: one hue per list (the bars compare sizes; the names say who). */
.wk-hbars li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "name note value" "track track track";
    align-items: baseline; gap: .3rem .75rem; padding: .45rem 0; }
.wk-hbars li + li { border-top: 1px solid var(--wk-border); }
.wk-hbar-name { grid-area: name; display: flex; align-items: center; gap: .45rem; min-width: 0; font-weight: 500; }
.wk-hbar-name a { color: inherit; text-decoration: none; }
.wk-hbar-name a:hover, .wk-hbar-name a:focus-visible { color: var(--bs-primary); text-decoration: underline; }
.wk-hbar-note { grid-area: note; font-size: .75rem; color: var(--wk-text-muted); white-space: nowrap; }
.wk-hbar-value { grid-area: value; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.wk-hbar-track { grid-area: track; height: 6px; border-radius: 0 3px 3px 0; background: var(--wk-surface-muted); overflow: hidden; }
.wk-hbar-track > span { display: block; height: 100%; border-radius: 0 3px 3px 0; background: var(--wk-flow-in); }
.wk-hbars.is-out .wk-hbar-track > span { background: var(--wk-flow-out); }
.wk-flow-subhead { font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--wk-text-muted); margin: 0 0 .25rem; }
.wk-flow-top li { display: flex; align-items: baseline; gap: .75rem; padding: .25rem 0; font-variant-numeric: tabular-nums; }
.wk-flow-top li > :first-child { flex: 1; min-width: 0; }
.wk-flow-top li > :last-child { font-weight: 600; white-space: nowrap; }
.wk-flow-table { max-height: 30rem; overflow: auto; }
.wk-flow-table thead th { position: sticky; top: 0; background: var(--wk-surface); z-index: 1; white-space: nowrap; }
.wk-flow-table td { font-variant-numeric: tabular-nums; white-space: nowrap; }
.wk-flow-table a { text-decoration: none; }
.wk-flow-table a:hover, .wk-flow-table a:focus-visible { text-decoration: underline; }
.wk-flow-table tfoot td { position: sticky; bottom: 0; background: var(--wk-surface); border-top: 1px solid var(--wk-border); }

/* The statement dialog: the outstanding charges to include, and the statements made before. */
.wk-statement-rows { max-height: 14rem; overflow-y: auto; border: 1px solid var(--wk-border); border-radius: var(--wk-radius-sm); }
.wk-statement-rows li { padding: .5rem .75rem; }
.wk-statement-rows li + li { border-top: 1px solid var(--wk-border); }
.wk-statement-rows label { cursor: pointer; font-variant-numeric: tabular-nums; }
.wk-statement-recent li { display: flex; align-items: baseline; gap: .75rem; padding: .2rem 0; }
.wk-statement-recent li > :nth-child(2) { flex: 1; min-width: 0; }
.wk-statement-recipients { max-height: 22rem; }
.wk-statement-own { margin: .25rem 0 0 1.75rem; }
.wk-statement-own > summary { cursor: pointer; color: var(--wk-text-muted); width: fit-content; }
.wk-statement-own > summary:hover { color: var(--bs-primary); }

/* Archived boards and lists: put away, kept as they were. */
.wk-board-card.is-archived { opacity: .8; border-style: dashed; }
.wk-archived-lists > summary { cursor: pointer; list-style: none; }
.wk-archived-lists > summary::-webkit-details-marker { display: none; }
.wk-archived-lists > summary h2 { display: flex; align-items: center; gap: .4rem; margin: 0; }
.wk-archived-lists > ul > li { display: flex; align-items: flex-start; gap: .75rem; padding: .7rem 1.25rem; border-top: 1px solid var(--wk-border); }
.wk-archived-lists li details > summary { cursor: pointer; }

/* Help: a person's own requests, and the platform admin's list. */
.wk-help-mine li { display: flex; flex-direction: column; gap: .1rem; padding: .55rem 0; }
.wk-help-mine li + li { border-top: 1px solid var(--wk-border); }
.wk-help-message { white-space: pre-line; overflow-wrap: anywhere; }
.wk-help-request.is-resolved { opacity: .75; }

/* Two-step sign-in: the code box, the setup steps, the QR code (always black on white: phones read it) and the codes. */
.wk-code-input { max-width: 11rem; font-size: 1.35rem; font-weight: 600; letter-spacing: .3em; font-variant-numeric: tabular-nums; text-align: center; }
.wk-auth .wk-code-input { max-width: none; }
.wk-steps { padding-left: 1.25rem; display: flex; flex-direction: column; gap: 1.5rem; }
.wk-steps > li::marker { font-weight: 700; color: var(--bs-primary); }
.wk-steps h2 { font-size: 1rem; font-weight: 650; margin: 0 0 .35rem; }
.wk-qr { width: 190px; height: 190px; flex-shrink: 0; padding: 8px; background: #fff; border: 1px solid var(--wk-border); border-radius: var(--wk-radius-sm); }
.wk-qr svg { display: block; width: 100%; height: 100%; }
.wk-twostep-key { display: inline-block; font-size: .95rem; letter-spacing: .06em; padding: .4rem .6rem; border-radius: var(--wk-radius-sm);
    background: var(--wk-surface-muted); color: var(--wk-text); overflow-wrap: anywhere; }
.wk-recovery-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
.wk-recovery-codes code { display: block; text-align: center; font-size: 1rem; letter-spacing: .08em; padding: .5rem; border-radius: var(--wk-radius-sm);
    background: var(--wk-surface-muted); color: var(--wk-text); }
/* Printing the recovery codes: just the card, black on white whatever the theme (paper has no dark mode). */
@media print {
    body:has(.wk-recovery-codes) :is(.wk-sidebar, .wk-topbar, .wk-page-header, .wk-impersonation, .wk-progress, .btn, .alert) { display: none !important; }
    body:has(.wk-recovery-codes) .wk-main { margin: 0 !important; }
    body:has(.wk-recovery-codes), body:has(.wk-recovery-codes) * { color: #000 !important; background: transparent !important; box-shadow: none !important; }
    body:has(.wk-recovery-codes) .wk-recovery-codes code { border: 1px solid #000; }
}

/* Settling details in a hover card ([data-wk-tip]): the dotted line says there is more to see. */
.wk-ledger-tip { cursor: help; text-decoration: underline dotted; text-underline-offset: 3px; border-radius: 4px; }
.wk-ledger-tip:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; }
.wk-ledger-tip.is-active { color: var(--wk-text); }
.wk-tip-links > div { align-items: flex-start; }
.wk-tip-links dt { flex-direction: column; align-items: flex-start; gap: 0; min-width: 0; color: var(--wk-text); }
.wk-tip-links dt > span { max-width: 150px; }
.wk-tip-links dt > small { color: var(--wk-text-muted); font-size: .72rem; font-weight: 400; }

/* --- Search everything (top bar) ------------------------------------------------------------------ */
.wk-global-search .wk-search-close { display: none; }
.wk-search-panel {
    position: absolute; top: calc(100% + .5rem); left: 0; right: 0; z-index: 1050;
    min-width: min(460px, calc(100vw - 2rem)); max-height: min(70vh, 560px); overflow-y: auto;
    padding: .35rem; background: var(--wk-surface); border: 1px solid var(--wk-border); border-radius: var(--wk-radius);
    box-shadow: var(--wk-shadow-lg);
}
.wk-search-group + .wk-search-group { margin-top: .25rem; padding-top: .25rem; border-top: 1px solid var(--wk-border); }
.wk-search-group-head { display: flex; justify-content: space-between; align-items: center; padding: .4rem .6rem .25rem;
    font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--wk-text-muted); }
.wk-search-group-head a { text-transform: none; letter-spacing: 0; font-weight: 500; text-decoration: none; }
.wk-search-hit { display: flex; align-items: center; gap: .65rem; padding: .45rem .6rem; border-radius: var(--wk-radius-sm);
    color: var(--wk-text); text-decoration: none; }
.wk-search-hit:hover, .wk-search-hit.is-current, .wk-search-hit:focus-visible { background: var(--wk-nav-hover); color: var(--wk-text); outline: none; }
.wk-search-hit.is-muted .wk-search-title { color: var(--wk-text-muted); }
.wk-search-icon { flex-shrink: 0; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; font-size: .7rem; }
.wk-search-icon:not(.wk-avatar) { background: var(--wk-surface-muted); color: var(--wk-text-muted); }
.wk-search-title, .wk-search-detail { display: block; }
.wk-search-title { font-weight: 500; font-size: .9rem; }
.wk-search-title mark { padding: 0; background: none; color: var(--bs-primary); font-weight: 700; }
.wk-search-detail { font-size: .78rem; color: var(--wk-text-muted); }
.wk-search-enter { visibility: hidden; color: var(--wk-text-muted); font-size: .8rem; }
.wk-search-hit.is-current .wk-search-enter { visibility: visible; }
.wk-search-empty { margin: 0; padding: 1rem .75rem; color: var(--wk-text-muted); font-size: .875rem; }
.wk-search-page { padding: .5rem; }
.wk-search-page .wk-search-enter { display: none; }
.wk-global-search input::-webkit-search-cancel-button { display: none; }
@media (max-width: 767.98px) {
    /* Closed: only the button shows. Open: the box covers the bar. */
    .wk-global-search { display: none; }
    .wk-global-search.is-open { display: block; position: absolute; inset: 0 .75rem; z-index: 5; max-width: none; align-self: center;
        height: fit-content; margin: auto 0; }
    .wk-global-search.is-open input { padding-right: 2.6rem; background: var(--wk-surface); }
    .wk-global-search.is-open .wk-search-close { display: grid; position: absolute; right: .2rem; top: 50%; transform: translateY(-50%); }
    .wk-global-search .wk-kbd { display: none; }
    .wk-search-panel { min-width: 0; max-height: calc(100vh - var(--wk-topbar-height) - 1.5rem); }
}
/* The box's own magnifier is placed absolutely (.wk-search .bi): icons inside the panel and the close button aren't. */
.wk-search-panel .bi, .wk-search-close .bi { position: static; transform: none; color: inherit; pointer-events: auto; }
.wk-search-icon .bi { font-size: .95rem; }

/* --- Who is online (platform admin) --------------------------------------------------------------- */
.wk-live-dot { display: inline-block; width: 10px; height: 10px; margin-right: .5rem; border-radius: 50%; background: var(--wk-good);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--wk-good) 55%, transparent); animation: wk-live 2s ease-out infinite; vertical-align: middle; }
@keyframes wk-live { to { box-shadow: 0 0 0 9px transparent; } }
@media (prefers-reduced-motion: reduce) { .wk-live-dot { animation: none; } }
.wk-count-badge.is-live { background: var(--wk-good); color: #fff; }
[data-bs-theme="dark"] .wk-count-badge.is-live { color: #0b1f14; }
.wk-online-page { font-size: .8rem; padding: .15rem .4rem; border-radius: 6px; background: var(--wk-surface-muted); color: var(--wk-text); overflow-wrap: anywhere; }
.wk-online-acting { color: var(--bs-warning-text-emphasis); }

/* One-column grid lists: a grid column grows to fit its longest unbroken text (a long file name, a title) unless told
   it may shrink, which pushed rows out of their card. With this, `.text-truncate` inside a row works. */
.wk-doc-list, .wk-staff-list, .wk-link-list, .wk-edit-list, .wk-sortable, .wk-subnav { grid-template-columns: minmax(0, 1fr); }
.wk-doc-list > li, .wk-staff-list > *, .wk-link-list > *, .wk-edit-list > *, .wk-sortable > * { min-width: 0; }

/* A record's page (customer, contact, supplier, staff member) below the two-column width: the two columns' cards become one list,
   in the order that reads best on a phone (the side column no longer simply follows the main one). */
@media (max-width: 1199.98px) {
    .wk-record-layout { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 1.5rem; --bs-gutter-x: 0; --bs-gutter-y: 0; }
    .wk-record-layout > .wk-stack { display: contents; }
    .wk-record-layout [data-wk-section] { order: 50; flex-grow: 0; }
    .wk-record-layout [data-wk-section="balance"] { order: 1; }
    .wk-record-layout [data-wk-section="details"] { order: 2; }
    .wk-record-layout [data-wk-section="classification"] { order: 3; }
    .wk-record-layout [data-wk-section="access"] { order: 3; }        /* a staff member's page */
    .wk-record-layout [data-wk-section="sign-in"], .wk-record-layout [data-wk-section="password"] { order: 4; }
    .wk-record-layout [data-wk-section="account"] { order: 4; }
    .wk-record-layout [data-wk-section="account-activity"] { order: 5; }
    .wk-record-layout [data-wk-section="activity"] { order: 6; }
    .wk-record-layout [data-wk-section="photo"] { order: 7; }
    .wk-record-layout [data-wk-section="documents"] { order: 8; }
    .wk-record-layout [data-wk-section="contacts"] { order: 9; }
    .wk-record-layout [data-wk-section="notes"] { order: 10; }
    .wk-record-layout [data-wk-section="website-contact"] { order: 11; }
    .wk-record-layout [data-wk-section="website-login"] { order: 12; }
    .wk-record-layout [data-wk-section="location"] { order: 13; }
}