/* =====================================================================
   MK3 CRM — design system
   Bootstrap 5.3 base; dark mode rides on [data-bs-theme="dark"];
   RTL rides on [dir="rtl"] and CSS logical properties.
   ===================================================================== */

/* ---------------------------------------------------------- tokens */
:root {
    /* Brand */
    --mk-red:        #d0121b;
    --mk-red-dark:   #780000;
    --mk-navy:       #003049;
    --mk-steel:      #669bbc;
    --mk-mist:       #eaeaea;

    --brand:         var(--mk-red);
    --brand-ink:     #ffffff;
    --brand-soft:    rgba(208, 18, 27, .10);
    --brand-softer:  rgba(208, 18, 27, .05);
    --accent:        var(--mk-navy);
    --accent-soft:   rgba(0, 48, 73, .10);

    /* Semantic */
    --ok:            #1f9d55;
    --ok-soft:       rgba(31, 157, 85, .12);
    --warn:          #d98200;
    --warn-soft:     rgba(217, 130, 0, .13);
    --danger:        var(--mk-red);
    --danger-soft:   rgba(208, 18, 27, .12);
    --info:          var(--mk-steel);
    --info-soft:     rgba(102, 155, 188, .16);

    /* Surfaces — the page sits on the brand grey (#eaeaea), lightened so white panels
       still lift off it; the sidebar is the brand navy. */
    --page-bg:       #f2f2f2;
    --panel-bg:      #ffffff;
    --panel-alt:     #f8f8f8;
    --panel-border:  #e4e4e4;
    --sidebar-bg:    #003049;
    --sidebar-deep:  #00253a;
    --sidebar-border:rgba(255, 255, 255, .08);
    --sidebar-text:  rgba(255, 255, 255, .80);
    --sidebar-muted: #669bbc;
    --topbar-bg:     rgba(255, 255, 255, .88);

    /* Text */
    --text:          #111820;
    --text-soft:     #5d6670;
    --text-faint:    #97a0a9;

    --shadow-xs:     0 1px 2px rgba(16, 24, 40, .04);
    --shadow-sm:     0 2px 6px rgba(16, 24, 40, .06);
    --shadow-md:     0 8px 24px rgba(16, 24, 40, .08);
    --shadow-lg:     0 18px 48px rgba(16, 24, 40, .12);

    --radius-sm:     8px;
    --radius:        14px;
    --radius-lg:     20px;

    --sidebar-w:     264px;

    /* Alexandria for everything (Thin 100 … Black 900, Latin + Arabic);
       Montserrat Bold for Latin headings and figures. */
    --font-sans:     "Alexandria", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-display:  "Montserrat", "Alexandria", system-ui, sans-serif;

    /* Brand pattern (public/img/brand/*.svg, traced from /visuals), used as CSS masks so
       one file can be drawn in any brand colour. */
    --pattern-solid:   url("../img/brand/chevrons.svg");
    --pattern-outline: url("../img/brand/chevrons-outline.svg");
    --pattern-single:  url("../img/brand/chevron.svg");
}

[data-bs-theme="dark"] {
    --page-bg:       #0b0f13;
    --panel-bg:      #141a20;
    --panel-alt:     #19212a;
    --panel-border:  #25303a;
    --sidebar-bg:    #06202f;
    --sidebar-deep:  #041822;
    --sidebar-border:rgba(255, 255, 255, .06);
    --topbar-bg:     rgba(20, 26, 32, .88);

    --text:          #e8eaed;
    --text-soft:     #98a0aa;
    --text-faint:    #6b7480;

    --brand-soft:    rgba(208, 18, 27, .18);
    --brand-softer:  rgba(208, 18, 27, .09);
    --accent-soft:   rgba(102, 155, 188, .14);
    --mk-mist:       #232830;

    --shadow-sm:     0 2px 6px rgba(0, 0, 0, .4);
    --shadow-md:     0 8px 24px rgba(0, 0, 0, .45);
    --shadow-lg:     0 18px 48px rgba(0, 0, 0, .55);
}

/* ---------------------------------------------------------- base */
* { scrollbar-width: thin; }

body {
    background: var(--page-bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: .9rem;
    font-weight: 400;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .display-font {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--text);
}

/* Arabic reads better with slightly more line height and no tight tracking */
[dir="rtl"] body { line-height: 1.75; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 {
    font-family: var(--font-sans);
    font-weight: 800;
    letter-spacing: 0;
}

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--mk-red-dark); }

.xsmall { font-size: .72rem; }
.min-w-0 { min-width: 0; }
.text-soft { color: var(--text-soft) !important; }
.text-faint { color: var(--text-faint) !important; }
.fw-black { font-weight: 900; }

::selection { background: var(--brand-soft); }

/* Bootstrap colour overrides so buttons/badges follow the brand */
.btn-primary {
    --bs-btn-bg: var(--mk-red);
    --bs-btn-border-color: var(--mk-red);
    --bs-btn-hover-bg: var(--mk-red-dark);
    --bs-btn-hover-border-color: var(--mk-red-dark);
    --bs-btn-active-bg: var(--mk-red-dark);
    --bs-btn-active-border-color: var(--mk-red-dark);
    --bs-btn-disabled-bg: var(--mk-red);
    --bs-btn-disabled-border-color: var(--mk-red);
    font-weight: 600;
}
.btn-outline-primary {
    --bs-btn-color: var(--mk-red);
    --bs-btn-border-color: var(--mk-red);
    --bs-btn-hover-bg: var(--mk-red);
    --bs-btn-hover-border-color: var(--mk-red);
    --bs-btn-active-bg: var(--mk-red);
    --bs-btn-active-border-color: var(--mk-red);
    font-weight: 600;
}
.btn-secondary {
    --bs-btn-bg: var(--mk-navy);
    --bs-btn-border-color: var(--mk-navy);
    --bs-btn-hover-bg: #00253a;
    --bs-btn-hover-border-color: #00253a;
}
.btn { border-radius: var(--radius-sm); }
.text-bg-primary { background: var(--mk-red) !important; }
.form-control, .form-select {
    border-radius: var(--radius-sm);
    border-color: var(--panel-border);
    background: var(--panel-bg);
    color: var(--text);
    font-size: .875rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--mk-red);
    box-shadow: 0 0 0 3px var(--brand-soft);
}
.input-group-text {
    background: var(--panel-alt);
    border-color: var(--panel-border);
    color: var(--text-soft);
}
.form-check-input:checked { background-color: var(--mk-red); border-color: var(--mk-red); }
.form-check-input:focus { box-shadow: 0 0 0 3px var(--brand-soft); border-color: var(--mk-red); }
.page-link { color: var(--brand); }
.page-item.active .page-link { background: var(--mk-red); border-color: var(--mk-red); }
.progress { background: var(--mk-mist); }

/* ---------------------------------------------------------- shell */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--sidebar-w);
    flex: 0 0 var(--sidebar-w);
    background: var(--sidebar-bg);
    border-inline-end: 1px solid var(--sidebar-border);
    display: flex;
    flex-direction: column;
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 1045;
    transition: transform .25s ease;
}

/* Brand chevrons, low in the sidebar, in steel. The pattern is never mirrored — in
   Arabic too the MK3 chevrons point the way the brand draws them. */
.sidebar::after {
    content: "";
    position: absolute;
    inset-inline-start: -18%;
    inset-block-end: 64px;
    width: 118%;   /* ends exactly at the sidebar's edge, so nothing shows when it is off-canvas */
    height: 170px;
    background: var(--mk-steel);
    -webkit-mask: var(--pattern-outline) no-repeat center / contain;
            mask: var(--pattern-outline) no-repeat center / contain;
    opacity: .16;
    pointer-events: none;
}

.sidebar-brand {
    display: flex; align-items: center; gap: .75rem;
    padding: 1.25rem 1.3rem 1.1rem;
    border-bottom: 1px solid var(--sidebar-border);
    position: relative;
}
.sidebar-brand .brand-logo { height: 26px; width: auto; flex: 0 0 auto; align-self: center; }
.brand-text { line-height: 1.2; min-width: 0; }
.brand-text small {
    display: block;
    color: var(--sidebar-muted);
    font-size: .66rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding-inline-start: .75rem;
    border-inline-start: 1px solid rgba(255, 255, 255, .18);
}
[dir="rtl"] .brand-text small { letter-spacing: 0; font-size: .74rem; }
.sidebar-close { margin-inline-start: auto; color: #fff; }

.sidebar-nav { flex: 1 1 auto; overflow-y: auto; padding: .7rem .8rem 1rem; position: relative; z-index: 1; scrollbar-color: rgba(255,255,255,.18) transparent; }

.nav-section {
    font-size: .64rem; font-weight: 600; letter-spacing: .16em;
    text-transform: uppercase; color: var(--sidebar-muted);
    padding: 1rem .7rem .4rem;
}
[dir="rtl"] .nav-section { letter-spacing: 0; font-size: .72rem; }

.nav-link-item {
    display: flex; align-items: center; gap: .75rem;
    padding: .58rem .75rem;
    border-radius: 10px;
    color: var(--sidebar-text); text-decoration: none;
    font-weight: 400; font-size: .86rem;
    margin-bottom: 2px;
    position: relative;
    transition: background .15s, color .15s;
}
.nav-link-item i { font-size: 1.02rem; width: 1.25rem; text-align: center; color: var(--sidebar-muted); transition: color .15s; }
.nav-link-item:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.nav-link-item:hover i { color: #fff; }
.nav-link-item.active {
    background: var(--mk-red);
    color: #fff;
    font-weight: 500;
    box-shadow: 0 6px 16px rgba(208, 18, 27, .35);
}
.nav-link-item.active i { color: #fff; }
.nav-link-item:focus-visible { outline: 2px solid var(--mk-steel); outline-offset: 1px; }
.nav-link-item .nav-count {
    margin-inline-start: auto;
    background: rgba(255,255,255,.14); color: #fff;
    border-radius: 999px; font-size: .68rem; font-weight: 700;
    padding: .05rem .4rem; min-width: 1.25rem; text-align: center;
}
.nav-link-item.active .nav-count { background: rgba(255,255,255,.25); color: #fff; }

.sidebar-footer {
    display: flex; align-items: center; gap: .65rem;
    padding: .85rem 1rem;
    border-top: 1px solid var(--sidebar-border);
    background: var(--sidebar-deep);
    color: #fff;
    position: relative; z-index: 1;
}
.sidebar-footer .text-soft { color: var(--sidebar-muted) !important; }
.sidebar-footer .btn-icon {
    background: transparent; color: #fff; border-color: rgba(255, 255, 255, .18);
}
.sidebar-footer .btn-icon:hover { background: var(--mk-red); border-color: var(--mk-red); color: #fff; }

.sidebar-backdrop {
    position: fixed; inset: 0; background: rgba(0, 0, 0, .5);
    z-index: 1040; display: none;
}
body.sidebar-open .sidebar-backdrop { display: block; }

.app-main {
    flex: 1 1 auto;
    margin-inline-start: var(--sidebar-w);
    min-width: 0;
    display: flex; flex-direction: column;
}

.topbar {
    position: sticky; top: 0; z-index: 1030;
    display: flex; align-items: center; gap: .75rem;
    padding: .8rem 1.6rem;
    background: var(--topbar-bg);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--panel-border);
}
.topbar-title { flex: 1 1 auto; min-width: 0; }
.topbar-title h1 { font-size: 1.12rem; margin: 0; font-weight: 700; }
.topbar-title p { margin: 0; font-size: .78rem; color: var(--text-soft); }
.topbar-actions { display: flex; align-items: center; gap: .45rem; }

.app-content { padding: 1.6rem; max-width: 1560px; width: 100%; }
.app-content.content-wide { max-width: none; }

@media (max-width: 991.98px) {
    .sidebar { transform: translateX(-100%); }
    [dir="rtl"] .sidebar { transform: translateX(100%); }
    body.sidebar-open .sidebar { transform: translateX(0); }
    .app-main { margin-inline-start: 0; }
    .app-content { padding: 1rem; }
    .topbar { padding: .7rem 1rem; }
}

/* ---------------------------------------------------------- pieces */
.btn-icon {
    width: 38px; height: 38px;
    display: inline-grid; place-items: center;
    border-radius: var(--radius-sm);
    border: 1px solid var(--panel-border);
    background: var(--panel-bg);
    color: var(--text);
    padding: 0;
}
.btn-icon:hover { background: var(--brand-soft); color: var(--brand); border-color: var(--brand); }

.avatar {
    display: inline-grid; place-items: center;
    border-radius: 50%; color: #fff; font-weight: 700;
    width: 36px; height: 36px; font-size: .75rem;
    flex: 0 0 auto; letter-spacing: .02em;
    font-family: var(--font-display);
}
.avatar-sm { width: 28px; height: 28px; font-size: .64rem; }
.avatar-lg { width: 52px; height: 52px; font-size: 1rem; }

.card, .panel {
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xs);
}
.panel { padding: 1.25rem; }
.panel-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: .75rem; margin-bottom: 1.1rem;
}
.panel-head h6 {
    margin: 0; font-weight: 700; font-size: .97rem;
    font-family: var(--font-display);
}
[dir="rtl"] .panel-head h6 { font-family: var(--font-sans); font-weight: 800; }
.panel-head .subtitle { font-size: .77rem; color: var(--text-soft); margin: .15rem 0 0; }

/* Accent panel: a short red rule over the title — the brand's one loud colour, used once. */
.panel.accent { position: relative; overflow: hidden; }
.panel.accent::before {
    content: ""; position: absolute; inset-block-start: 0;
    inset-inline-start: 1.25rem; width: 44px; height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--mk-red);
}

/* ---- stat cards ---------------------------------------------------
   Label and icon on top, the figure large, the context line under it.
   Tones stay inside the brand palette (red, dark red, navy, steel);
   green is kept only where it means "won". */
.stat-grid {
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    margin-bottom: 1.25rem;
}
.stat-card {
    --tone: var(--mk-red);
    --tone-soft: var(--brand-soft);
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius);
    padding: 1rem 1.1rem 1.05rem;
    display: flex; flex-direction: column; gap: .2rem;
    box-shadow: var(--shadow-xs);
    position: relative; overflow: hidden;
    min-width: 0;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: transparent; }
.stat-top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.stat-icon {
    width: 34px; height: 34px; flex: 0 0 34px;
    border-radius: 10px; display: grid; place-items: center;
    font-size: 1rem; background: var(--tone-soft); color: var(--tone);
}
.stat-body { min-width: 0; }
.stat-label {
    font-size: .7rem; text-transform: uppercase; letter-spacing: .08em;
    color: var(--text-soft); font-weight: 500;
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
[dir="rtl"] .stat-label { letter-spacing: 0; text-transform: none; font-size: .78rem; }
.stat-value {
    font-size: 1.62rem; font-weight: 700; line-height: 1.15;
    letter-spacing: -.02em; font-family: var(--font-display);
    color: var(--text); margin-top: .35rem;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}
[dir="rtl"] .stat-value { font-family: var(--font-sans); font-weight: 800; letter-spacing: 0; }
.stat-hint { font-size: .74rem; font-weight: 300; color: var(--text-soft); }

.tone-primary { --tone: var(--mk-red);      --tone-soft: var(--brand-soft); }
.tone-danger,
.tone-warning { --tone: var(--mk-red-dark); --tone-soft: rgba(120, 0, 0, .10); }
.tone-navy,
.tone-purple  { --tone: var(--mk-navy);     --tone-soft: rgba(0, 48, 73, .09); }
.tone-info    { --tone: #3f7ea6;            --tone-soft: rgba(102, 155, 188, .18); }
.tone-success { --tone: var(--ok);          --tone-soft: var(--ok-soft); }
[data-bs-theme="dark"] .tone-navy,
[data-bs-theme="dark"] .tone-purple { --tone: #8fc0dd; --tone-soft: rgba(102, 155, 188, .16); }
[data-bs-theme="dark"] .tone-danger,
[data-bs-theme="dark"] .tone-warning { --tone: #f2848a; --tone-soft: rgba(208, 18, 27, .16); }
[data-bs-theme="dark"] .tone-info { --tone: var(--mk-steel); }

/* The one figure that matters most on a dashboard: brand red, with the chevrons. */
.stat-card.stat-featured {
    background: linear-gradient(135deg, var(--mk-red) 0%, #a80f17 100%);
    border-color: transparent; color: #fff;
    box-shadow: 0 10px 24px rgba(208, 18, 27, .25);
}
.stat-card.stat-featured::after {
    content: ""; position: absolute;
    inset-inline-end: -26px; inset-block-end: -14px;
    width: 150px; height: 70px;
    background: #fff; opacity: .14;
    -webkit-mask: var(--pattern-solid) no-repeat center / contain;
            mask: var(--pattern-solid) no-repeat center / contain;
    pointer-events: none;
}
.stat-featured .stat-label, .stat-featured .stat-hint, .stat-featured .stat-value { color: #fff; }
.stat-featured .stat-label, .stat-featured .stat-hint { opacity: .86; }
.stat-featured .stat-icon { background: rgba(255, 255, 255, .18); color: #fff; }

/* ---- dashboard hero -------------------------------------------------
   Navy band with the greeting, the period and the page's main actions;
   the brand chevrons run off its far edge. */
.dash-hero {
    position: relative; overflow: hidden; isolation: isolate;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem;
    background: radial-gradient(120% 140% at 0% 0%, #0a4466 0%, var(--mk-navy) 46%, #001e2e 100%);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 1.6rem 1.8rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 14px 34px rgba(0, 48, 73, .20);
}
.dash-hero::before, .dash-hero::after {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-size: contain; mask-size: contain;
    -webkit-mask-position: center; mask-position: center;
}
/* A solid red run of chevrons… */
.dash-hero::after {
    inset-inline-end: -40px; inset-block: 18%;
    width: 260px;
    background: var(--mk-red);
    -webkit-mask-image: var(--pattern-solid); mask-image: var(--pattern-solid);
    opacity: .92;
}
/* …echoed by the outline, larger and quieter, behind it. */
.dash-hero::before {
    inset-inline-end: 120px; inset-block: -30%;
    width: 380px;
    background: var(--mk-steel);
    -webkit-mask-image: var(--pattern-outline); mask-image: var(--pattern-outline);
    opacity: .28;
}
.dash-hero-body { min-width: 0; max-width: 720px; }
.dash-hero-eyebrow {
    margin: 0 0 .35rem; font-size: .72rem; font-weight: 500;
    letter-spacing: .14em; text-transform: uppercase; color: var(--mk-steel);
}
[dir="rtl"] .dash-hero-eyebrow { letter-spacing: 0; font-size: .8rem; }
.dash-hero-title {
    margin: 0; color: #fff;
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem); letter-spacing: -.02em;
}
[dir="rtl"] .dash-hero-title { font-family: var(--font-sans); font-weight: 900; letter-spacing: 0; }
.dash-hero-sub { margin: .35rem 0 0; font-weight: 300; color: rgba(255, 255, 255, .78); font-size: .9rem; }
.dash-hero-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }
.dash-hero-actions .btn { font-weight: 500; }
.btn-hero-ghost {
    --bs-btn-color: #fff; --bs-btn-border-color: rgba(255, 255, 255, .32);
    --bs-btn-hover-color: var(--mk-navy); --bs-btn-hover-bg: #fff; --bs-btn-hover-border-color: #fff;
    --bs-btn-active-color: var(--mk-navy); --bs-btn-active-bg: #fff;
    background: rgba(255, 255, 255, .06);
}
@media (max-width: 767.98px) {
    .dash-hero { padding: 1.3rem 1.2rem; }
    .dash-hero::before { display: none; }
    .dash-hero::after { width: 150px; opacity: .5; inset-inline-end: -50px; }
}

/* Phones: two figures per row, the featured one across both. */
@media (max-width: 575.98px) {
    .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
    .stat-grid > .stat-featured { grid-column: 1 / -1; }
    .stat-card { padding: .85rem .9rem; }
    .stat-value { font-size: 1.28rem; }
    .stat-icon { width: 28px; height: 28px; flex-basis: 28px; font-size: .88rem; }
}

/* ---- dashboard layout helpers ---------------------------------------- */
.grid-wide { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1rem; }
@media (max-width: 1099.98px) { .grid-wide { grid-template-columns: minmax(0, 1fr); } }
.dash-section { margin-bottom: 1rem; }

/* Rows inside a panel (tasks, posts, campaigns): one line each, quiet dividers. */
.list-row {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    padding: .62rem 0; border-bottom: 1px solid var(--panel-border); font-size: .85rem;
}
.list-row:last-child { border-bottom: 0; padding-bottom: 0; }
.list-row:first-child { padding-top: 0; }

/* "Needs attention": what someone should do next, each line a link. */
.attention { display: grid; gap: .5rem; }
.attention-item {
    display: flex; align-items: center; gap: .75rem;
    padding: .65rem .8rem; border-radius: 10px;
    background: var(--panel-alt); border: 1px solid var(--panel-border);
    color: var(--text); text-decoration: none; font-size: .85rem;
    transition: border-color .15s, background .15s;
}
a.attention-item:hover { border-color: var(--mk-red); background: var(--brand-softer); color: var(--text); }
.attention-item i { color: var(--mk-red); font-size: 1.05rem; }
.attention-item .attention-count {
    margin-inline-start: auto; font-family: var(--font-display); font-weight: 700; font-size: 1rem;
    font-variant-numeric: tabular-nums;
}
[dir="rtl"] .attention-item .attention-count { font-family: var(--font-sans); }
.attention-item.is-clear i { color: var(--ok); }

/* Rank bar: a thin share-of-total bar under a table cell. */
.rank-bar { height: 4px; border-radius: 999px; background: var(--mk-mist); margin-top: .3rem; overflow: hidden; }
.rank-bar > span { display: block; height: 100%; background: var(--mk-navy); border-radius: inherit; }
[data-bs-theme="dark"] .rank-bar > span { background: var(--mk-steel); }

/* ---- status colours: the one place ---------------------------------
   Every status draws from six hues: the MK3 navy, steel and red, plus green,
   amber and slate for done, waiting and inactive. A status class only sets
   --hue (an "r g b" triple) and
   --hue-text; .status-pill, the lead status dropdown and the task board all
   paint from those two. The same hexes are in App\Enums\*::color() for the
   charts, and tests/Feature/StatusColorsTest.php keeps the three in step:
   every stored value has a colour, and no two values of one kind share one. */
:root {
    --hue-navy: 0 48 73;      --hue-navy-text: #003049;
    --hue-steel: 102 155 188; --hue-steel-text: #2b6c8f;
    --hue-amber: 217 130 0;   --hue-amber-text: #8a5200;
    --hue-green: 31 157 85;   --hue-green-text: #14733d;
    --hue-red: 208 18 27;     --hue-red-text: #b0101a;
    --hue-slate: 107 118 128; --hue-slate-text: #4a535c;
}
[data-bs-theme="dark"] {
    --hue-navy-text: #9cc8e6;
    --hue-steel-text: #a9d0e6;
    --hue-amber-text: #f3b350;
    --hue-green-text: #62d69b;
    --hue-red-text: #f2848a;
    --hue-slate-text: #b8c1c9;
}
[data-bs-theme="dark"] { --hue-navy: 143 190 222; }

/* The pill itself; the classes below only choose its hue (later rules of the same weight win). */
.status-pill {
    --hue: var(--hue-slate); --hue-text: var(--hue-slate-text);
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .24rem .62rem;
    border-radius: 999px; font-size: .72rem; font-weight: 600;
    white-space: nowrap; text-decoration: none;
    background: rgb(var(--hue) / .13);
    color: var(--hue-text);
    border: 1px solid rgb(var(--hue) / .32);
}
.status-pill.status-new { background: rgb(var(--hue)); color: #ffffff; border-color: rgb(var(--hue)); }
[data-bs-theme="dark"] .status-pill.status-new { color: #0c1a24; }

.tone-navy  { --hue: var(--hue-navy);  --hue-text: var(--hue-navy-text); }
.tone-steel { --hue: var(--hue-steel); --hue-text: var(--hue-steel-text); }
.tone-amber { --hue: var(--hue-amber); --hue-text: var(--hue-amber-text); }
.tone-green { --hue: var(--hue-green); --hue-text: var(--hue-green-text); }
.tone-red   { --hue: var(--hue-red);   --hue-text: var(--hue-red-text); }
.tone-slate { --hue: var(--hue-slate); --hue-text: var(--hue-slate-text); }

/* Leads: six statuses, six hues. "New" is the one solid pill: untouched leads are the to-do list. */
.status-new            { --hue: var(--hue-navy);  --hue-text: var(--hue-navy-text); }
.status-call_later     { --hue: var(--hue-amber); --hue-text: var(--hue-amber-text); }
.status-in_progress    { --hue: var(--hue-steel); --hue-text: var(--hue-steel-text); }
.status-sold           { --hue: var(--hue-green); --hue-text: var(--hue-green-text); }
.status-failed         { --hue: var(--hue-red);   --hue-text: var(--hue-red-text); }
.status-not_responding { --hue: var(--hue-slate); --hue-text: var(--hue-slate-text); }

.task-todo        { --hue: var(--hue-navy);  --hue-text: var(--hue-navy-text); }
.task-in_progress { --hue: var(--hue-steel); --hue-text: var(--hue-steel-text); }
.task-completed   { --hue: var(--hue-green); --hue-text: var(--hue-green-text); }
.task-blocked     { --hue: var(--hue-red);   --hue-text: var(--hue-red-text); }

.prio-low    { --hue: var(--hue-steel); --hue-text: var(--hue-steel-text); }
.prio-medium { --hue: var(--hue-amber); --hue-text: var(--hue-amber-text); }
.prio-high   { --hue: var(--hue-red);   --hue-text: var(--hue-red-text); }

.pub-not_published { --hue: var(--hue-navy);  --hue-text: var(--hue-navy-text); }
.pub-scheduled     { --hue: var(--hue-amber); --hue-text: var(--hue-amber-text); }
.pub-published     { --hue: var(--hue-green); --hue-text: var(--hue-green-text); }
.pub-cancelled     { --hue: var(--hue-slate); --hue-text: var(--hue-slate-text); }

.appr-pending     { --hue: var(--hue-steel); --hue-text: var(--hue-steel-text); }
.appr-approved    { --hue: var(--hue-green); --hue-text: var(--hue-green-text); }
.appr-needs_edits { --hue: var(--hue-amber); --hue-text: var(--hue-amber-text); }
.appr-rejected    { --hue: var(--hue-red);   --hue-text: var(--hue-red-text); }

.meet-scheduled { --hue: var(--hue-steel); --hue-text: var(--hue-steel-text); }
.meet-completed { --hue: var(--hue-green); --hue-text: var(--hue-green-text); }
.meet-cancelled { --hue: var(--hue-slate); --hue-text: var(--hue-slate-text); }

.camp-active   { --hue: var(--hue-green); --hue-text: var(--hue-green-text); }
.camp-paused   { --hue: var(--hue-amber); --hue-text: var(--hue-amber-text); }
.camp-finished { --hue: var(--hue-slate); --hue-text: var(--hue-slate-text); }


/* Inline approve / decline strip on a calendar row. Set apart from the edit
   and delete controls beside it with a rule and a little air, so a review
   decision is never one pixel away from deleting the entry. */
.review-actions {
    display: inline-flex; align-items: center; gap: .55rem;
    padding-inline-end: .6rem; margin-inline-end: .5rem;
    border-inline-end: 1px solid var(--panel-border);
}
.review-actions .bi { font-size: 1.05rem; }

/* ---- platform / country chips ------------------------------------- */
.platform-chip {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .75rem; font-weight: 600;
    padding: .2rem .55rem; border-radius: 999px;
    background: var(--mk-mist); color: var(--text-soft);
    white-space: nowrap;
}
.platform-chip i { font-size: .88rem; }

/* In the leads table the icon carries it on its own — the word "Facebook"
   beside a Facebook mark is a column of width spent saying nothing. The name
   stays in the DOM for screen readers and as a tooltip. */
.platform-chip-compact {
    gap: 0;
    padding: .26rem .42rem;
}
.platform-chip-compact i { font-size: 1rem; }
.platform-fb  { background: rgba(24, 119, 242, .12); color: #1877f2; }
.platform-ig  { background: rgba(214, 41, 118, .12); color: #d62976; }
.platform-msg { background: rgba(0, 132, 255, .12);  color: #0084ff; }
.platform-wa  { background: rgba(37, 211, 102, .14); color: #128c7e; }

.country-cell { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.country-cell .flag { font-size: 1rem; line-height: 1; }

/* ---- meeting type chips ------------------------------------------- */
.meeting-chip {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .75rem; font-weight: 600;
    padding: .2rem .55rem; border-radius: 999px;
    background: var(--mk-mist); color: var(--text-soft);
    white-space: nowrap;
}
.meeting-chip i { font-size: .88rem; }
.meeting-zoom        { background: rgba(45, 140, 255, .12);  color: #2d8cff; }
.meeting-google_meet { background: rgba(0, 172, 71, .12);    color: #00913c; }
.meeting-teams       { background: rgba(98, 100, 167, .14);  color: #6264a7; }
.meeting-face2face   { background: rgba(0, 48, 73, .10);     color: var(--mk-navy); }
.meeting-phone       { background: rgba(217, 130, 0, .12);   color: #8a5200; }
.meeting-other       { background: var(--mk-mist);           color: var(--text-soft); }

[data-bs-theme="dark"] .meeting-face2face { color: var(--mk-steel); }
[data-bs-theme="dark"] .meeting-phone     { color: #f3b350; }
[data-bs-theme="dark"] .meeting-teams     { color: #9698d6; }

/* The attendee picker in the meeting editor. */
.attendee-option {
    display: flex; align-items: center;
    width: 100%; margin: 0; cursor: pointer;
    padding: .5rem .65rem;
    border: 1px solid var(--panel-border); border-radius: var(--radius-sm, .6rem);
    background: var(--panel-alt);
    transition: border-color .15s ease, background .15s ease;
}
.attendee-option:hover { border-color: var(--mk-steel); }
.attendee-option:has(input:checked) {
    border-color: var(--mk-red);
    background: var(--brand-soft);
}

/* ---- tables ------------------------------------------------------- */
.table-wrap {
    overflow-x: auto;
    border-radius: var(--radius);
    border: 1px solid var(--panel-border);
    background: var(--panel-bg);
}
.panel > .table-wrap { border: 0; }
.table {
    margin: 0; --bs-table-bg: transparent;
    font-size: .855rem; vertical-align: middle;
    color: var(--text);
}
.table > thead th {
    font-size: .69rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--text-soft); font-weight: 700;
    background: var(--panel-alt);
    border-bottom: 1px solid var(--panel-border);
    white-space: nowrap; padding: .72rem .8rem;
}
[dir="rtl"] .table > thead th { letter-spacing: 0; text-transform: none; font-size: .76rem; }
.table > tbody td { padding: .72rem .8rem; border-color: var(--panel-border); }
.table > tbody tr:last-child td { border-bottom: 0; }
.table-hover > tbody > tr:hover > * { background: var(--brand-softer); }
.table tfoot td { background: var(--panel-alt); font-weight: 700; }

.lead-name { font-weight: 600; color: var(--text); }
.cell-muted { color: var(--text-soft); font-size: .8rem; }

/* ---- charts ------------------------------------------------------- */
.chart-box { position: relative; height: 300px; }
.chart-box.sm { height: 232px; }
.chart-box.lg { height: 360px; }

/* ---- notifications ------------------------------------------------ */
.notif-menu {
    width: 340px; max-height: 420px; overflow-y: auto; padding: 0;
    border-radius: var(--radius); border-color: var(--panel-border);
    box-shadow: var(--shadow-lg);
}
.notif-item {
    display: flex; gap: .65rem; padding: .7rem .9rem;
    text-decoration: none; color: var(--text);
    border-bottom: 1px solid var(--panel-border);
}
.notif-item:hover { background: var(--brand-softer); }
.notif-item.unread { background: var(--brand-softer); }
.notif-item i { color: var(--brand); font-size: 1.05rem; }
.notif-dot {
    position: absolute; inset-block-start: -4px; inset-inline-end: -4px;
    background: var(--mk-red); color: #fff;
    border-radius: 999px; font-size: .62rem; font-weight: 700;
    min-width: 18px; height: 18px; display: grid; place-items: center; padding: 0 4px;
}
.dropdown-menu {
    border-radius: var(--radius); border-color: var(--panel-border);
    box-shadow: var(--shadow-lg); background: var(--panel-bg);
    font-size: .87rem;
}
.dropdown-item { color: var(--text); border-radius: 6px; }
.dropdown-item:hover { background: var(--brand-softer); color: var(--brand); }
.dropdown-item.active { background: var(--mk-red); color: #fff; }

/* ---- empty state -------------------------------------------------- */
.empty-state { text-align: center; padding: 2.75rem 1rem; color: var(--text-soft); }
.empty-state > i { font-size: 2.3rem; opacity: .35; display: block; margin-bottom: .6rem; color: var(--brand); }
.empty-state h6 { color: var(--text); font-weight: 700; margin-bottom: .25rem; }
.empty-state p { margin-bottom: .9rem; font-size: .85rem; }

/* ---- timeline ----------------------------------------------------- */
.timeline { position: relative; padding-inline-start: 1.6rem; }
.timeline::before {
    content: ""; position: absolute; inset-inline-start: .48rem;
    inset-block: .3rem; width: 2px; background: var(--panel-border);
}
.timeline-item { position: relative; padding-bottom: 1.1rem; }
.timeline-item::before {
    content: ""; position: absolute; inset-inline-start: -1.28rem; top: .35rem;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft);
}
.timeline-item.type-note::before { background: var(--mk-steel); box-shadow: 0 0 0 3px var(--info-soft); }

/* ---- kanban ------------------------------------------------------- */
.kanban { display: grid; grid-template-columns: repeat(4, minmax(230px, 1fr)); gap: 1rem; }
.kanban-col {
    background: var(--panel-bg); border: 1px solid var(--panel-border);
    border-radius: var(--radius); padding: .85rem;
}
.kanban-col h6 {
    font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--text-soft); font-family: var(--font-sans); font-weight: 700;
}
/* Each column wears its status colour: a top rule and a dot before the name. */
.kanban-col[class*="task-"] { border-top: 3px solid rgb(var(--hue)); }
.kanban-col[class*="task-"] h6 { color: var(--hue-text); display: flex; align-items: center; gap: .45rem; }
.kanban-col[class*="task-"] h6::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: rgb(var(--hue)); flex: none; }
[dir="rtl"] .kanban-col h6 { letter-spacing: 0; text-transform: none; font-size: .85rem; }
.task-card {
    background: var(--panel-alt); border: 1px solid var(--panel-border);
    border-radius: var(--radius-sm); padding: .75rem .8rem; margin-bottom: .65rem;
    cursor: grab; transition: box-shadow .15s, transform .15s;
}
.task-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.task-card:last-child { margin-bottom: 0; }
.task-card.dragging { opacity: .45; }
.kanban-col.drop-target { outline: 2px dashed var(--mk-red); outline-offset: 3px; }
.task-title { font-weight: 600; font-size: .86rem; color: var(--text); }
@media (max-width: 1200px) { .kanban { grid-template-columns: repeat(2, minmax(220px, 1fr)); } }
@media (max-width: 700px)  { .kanban { grid-template-columns: 1fr; } }

/* ---- publishing calendar: one line per day ------------------------- */
.cal-lines { font-size: .85rem; }
.cal-lines > thead th {
    position: sticky; top: 0; z-index: 2;
    background: var(--panel-alt);
}
.cal-lines td { padding: .5rem .75rem; border-color: var(--panel-border); }

/* The date/day pair reads as the spine of the list */
.cal-lines .cal-date {
    font-weight: 700; color: var(--text); white-space: nowrap;
    border-inline-start: 3px solid transparent;
}
.cal-lines .cal-day { color: var(--text-soft); white-space: nowrap; }

/* A new day starts a visible band; extra entries hang under it */
.cal-lines tr.day-start > td { border-top: 1px solid var(--panel-border); }
.cal-lines tr.cal-line:hover > td { background: var(--brand-softer); }

.cal-lines tr.is-empty > td { padding-block: .3rem; opacity: .75; }
.cal-lines tr.is-weekend > td { background: var(--panel-alt); }
.cal-lines tr.is-weekend .cal-day { font-style: italic; }

.cal-lines tr.is-today > td { background: var(--brand-soft); }
.cal-lines tr.is-today .cal-date {
    color: var(--mk-red);
    border-inline-start-color: var(--mk-red);
}

/* ---- leads table: inline editing --------------------------------- */

/* Copy the phone number. Sits quietly next to the WhatsApp button and only
   colours up on hover or right after a successful copy. */
.copy-btn {
    border: 0; background: none; padding: 0 .15rem; line-height: 1;
    color: var(--text-faint); cursor: pointer; transition: color .15s ease;
}
.copy-btn:hover  { color: var(--brand); }
.copy-btn.copied { color: var(--ok); }

/* The status dropdown carries the same colour as the badge it replaced, so a
   glance down the column still reads as a pipeline. */
select.lead-status {
    /* ~30% narrower than it was (it auto-sized to about 144px, the width of
       "Not Responding"). Every label but that one still fits whole; that one
       ellipsises, which is why the full text is also on the title attribute.
       The colour says which status this is long before the word does. */
    width: 100px; min-width: 100px; max-width: 100%;
    font-size: .72rem; padding-inline: .45rem 1.35rem;
    text-overflow: ellipsis;
    border-color: var(--panel-border); font-weight: 600;
}
select.lead-status[class*="status-"] {
    background-color: rgb(var(--hue) / .13);
    border-color: rgb(var(--hue) / .38);
    color: var(--hue-text);
}

/* Click-to-edit note cell. */
.lead-note {
    /* 50% taller than it was (1.6rem), so a note wraps onto a second line
       instead of being cut off after a handful of words — this column is where
       the sales side keeps what was actually said on the call. */
    display: flex; align-items: flex-start; gap: .35rem; cursor: text;
    min-height: 2.4rem; border-radius: 6px; padding: .22rem .25rem;
    margin-inline-start: -.25rem;
}
.lead-note [data-note-text] {
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
    line-height: 1.3; white-space: normal; word-break: break-word;
}
.lead-note-pencil { margin-top: .12rem; }
.lead-note:hover, .lead-note:focus-visible { background: var(--brand-softer); outline: none; }
.lead-note-pencil { opacity: 0; font-size: .75rem; transition: opacity .15s ease; }
/* A note kept on the device because the server did not get it (leads.js): red until it is sent. */
.lead-note.note-unsaved { flex-wrap: wrap; box-shadow: inset 0 0 0 1px var(--bs-danger); }
.lead-note.note-unsaved [data-note-text] { color: var(--bs-danger); }
.note-unsaved-hint { flex-basis: 100%; color: var(--bs-danger); font-size: .72rem; font-weight: 600; }
[data-lead-status-form].note-unsaved textarea { border-color: var(--bs-danger); }
[data-lead-status-form] .note-unsaved-hint { display: block; margin-top: .4rem; }
.lead-note:hover .lead-note-pencil,
.lead-note:focus-visible .lead-note-pencil { opacity: .6; }
.lead-note.is-editing { background: transparent; padding: 0; margin-inline-start: 0; }

/* A selected row in a bulk assignment. */
tr.is-selected > td { background: var(--brand-soft) !important; }

/* An archived campaign is still readable, but stops competing for attention
   with the campaigns the team is actually working. */
.campaign-archived > td { opacity: .6; }
.campaign-archived:hover > td { opacity: 1; }

/* ---- meeting calendar: past / live states -------------------------- */

/* A meeting that has already finished stays readable but stops competing
   with the ones still to come. */
.meeting-past > td            { opacity: .58; }
.meeting-past:hover > td      { opacity: 1; }

/* Happening right now: a quiet pulse on the leading edge of the row. */
.meeting-live > td:first-child { border-inline-start: 3px solid var(--mk-red); }
.meeting-live > td             { background: var(--brand-soft); }
.meeting-live .badge           { animation: mk-live-pulse 2.4s ease-in-out infinite; }

@keyframes mk-live-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
    .meeting-live .badge { animation: none; }
}

/* ---- login --------------------------------------------------------
   The brand panel: navy, the white logo, the red chevrons running in from
   the edge and the outline echo behind them. */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.05fr .95fr; }
.auth-side {
    background: radial-gradient(120% 120% at 0% 0%, #0a4466 0%, var(--mk-navy) 45%, #001a28 100%);
    color: #fff; padding: 3.4rem; display: flex; flex-direction: column; justify-content: center;
    position: relative; overflow: hidden; isolation: isolate;
}
.auth-side::before, .auth-side::after {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-size: contain; mask-size: contain;
    -webkit-mask-position: center; mask-position: center;
}
.auth-side::after {
    inset-inline-end: -12%; inset-block-end: 5%;
    width: 54%; height: 22%;
    background: var(--mk-red);
    -webkit-mask-image: var(--pattern-solid); mask-image: var(--pattern-solid);
}
.auth-side::before {
    inset-inline-end: -4%; inset-block-end: -6%;
    width: 86%; height: 56%;
    background: var(--mk-steel); opacity: .25;
    -webkit-mask-image: var(--pattern-outline); mask-image: var(--pattern-outline);
}
/* align-self is required: .auth-side is a column flexbox, and the default
   align-items:stretch would widen the logo to the panel and squash it. */
.auth-side .auth-logo { height: 46px; width: auto; align-self: flex-start; margin-bottom: 2rem; }
.auth-side h2 { color: #fff; font-weight: 700; letter-spacing: -.02em; max-width: 30rem; }
[dir="rtl"] .auth-side h2 { font-weight: 900; letter-spacing: 0; }
.auth-feature { display: flex; gap: .9rem; margin-top: 1.5rem; align-items: flex-start; position: relative; z-index: 1; max-width: 26rem; }
.auth-feature i {
    font-size: 1.1rem; width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center;
    border-radius: 10px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); color: #fff;
}
.auth-feature .small { font-weight: 300; }
.auth-form-col { display: grid; place-items: center; padding: 2rem; background: var(--panel-bg); }
.auth-card { width: 100%; max-width: 410px; }
.auth-card .auth-mark { height: 30px; width: auto; align-self: center; margin-bottom: 0; }
.auth-card h1 { font-weight: 700; }
@media (max-width: 900px) { .auth-wrap { grid-template-columns: 1fr; } .auth-side { display: none; } }
.error-label { width: 88px; height: auto; border-radius: 6px; box-shadow: var(--shadow-md); }

/* ---- misc --------------------------------------------------------- */
.form-label { font-size: .81rem; font-weight: 600; margin-bottom: .3rem; color: var(--text); }
.form-text { font-size: .75rem; color: var(--text-soft); }
.filter-bar {
    display: flex; flex-wrap: wrap; gap: .65rem; align-items: flex-end;
    background: var(--panel-bg); border: 1px solid var(--panel-border);
    border-radius: var(--radius); padding: .95rem 1.05rem; margin-bottom: 1rem;
}
.progress-thin { height: 6px; border-radius: 999px; }
.progress-thin .progress-bar { background: var(--mk-red); }
.wa-btn { color: #25d366; }
.wa-btn:hover { color: #128c7e; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1rem; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.alert { border-radius: var(--radius); border: 1px solid var(--panel-border); font-size: .87rem; }
.alert-info    { background: var(--accent-soft); color: var(--mk-navy); border-color: rgba(0,48,73,.2); }
.alert-success { background: var(--ok-soft); color: #14733d; border-color: rgba(31,157,85,.3); }
.alert-warning { background: var(--warn-soft); color: #8a5200; border-color: rgba(217,130,0,.3); }
.alert-danger  { background: var(--danger-soft); color: var(--mk-red-dark); border-color: rgba(208,18,27,.3); }
[data-bs-theme="dark"] .alert-info    { color: #9ccbe4; }
[data-bs-theme="dark"] .alert-success { color: #62d69b; }
[data-bs-theme="dark"] .alert-warning { color: #f3b350; }
[data-bs-theme="dark"] .alert-danger  { color: #f2848a; }

.modal-content {
    border-radius: var(--radius-lg); border-color: var(--panel-border);
    background: var(--panel-bg); box-shadow: var(--shadow-lg);
}
.modal-header, .modal-footer { border-color: var(--panel-border); }
.badge { font-weight: 600; border-radius: 6px; }
.text-bg-light { background: var(--mk-mist) !important; color: var(--text-soft) !important; }
hr { border-color: var(--panel-border); opacity: 1; }

/* Report / print surface */
.report-sheet { background: #fff; color: #14181d; padding: 2rem; border-radius: var(--radius); }
.report-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
               border-bottom: 3px solid var(--mk-red); padding-bottom: 1rem; margin-bottom: 1.5rem; }
.report-head img { height: 32px; width: auto; flex: 0 0 auto; }

@media print {
    .sidebar, .topbar, .no-print, .filter-bar { display: none !important; }
    .app-main { margin: 0 !important; }
    .app-content { padding: 0 !important; max-width: none !important; }
    body { background: #fff; font-size: 11pt; }
    .panel, .table-wrap { box-shadow: none; border-color: #ccc; break-inside: avoid; }
    .report-sheet { padding: 0; }
    a { color: inherit; text-decoration: none; }
}

/* Inline lead assignment straight from the table row */
.lead-assign {
    min-width: 158px;
    font-size: .8rem;
    padding-block: .25rem;
    border-color: var(--panel-border);
}
.lead-assign.is-unassigned {
    border-color: var(--mk-red);
    color: var(--mk-red);
    background: var(--brand-softer);
    font-weight: 600;
}
.lead-assign:disabled { opacity: .6; }

/* ---- Laravel additions (not in the legacy stylesheet) ------------------ */

/* The calendar line a notification deep link points at (?meeting= / ?entry=). */
.cal-lines tr.cal-focus > td { background: var(--warn-soft); }
.cal-lines tr.cal-focus > td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
[dir="rtl"] .cal-lines tr.cal-focus > td:first-child { box-shadow: inset -3px 0 0 var(--warn); }

/* Profile avatar colour picker (legacy profile.php swatches). */
.swatch-pick label { cursor: pointer; }
.swatch-pick .swatch { display: inline-block; width: 28px; height: 28px; border-radius: 50%; outline-offset: 2px; }
.swatch-pick input:checked + .swatch { outline: 3px solid var(--brand); }
.swatch-pick input:focus-visible + .swatch { outline: 3px dashed var(--brand); }

/* Newsletter / form sign-ups (Brevo) — same chip family as the ad platforms. */
.platform-email { background: rgba(0, 48, 73, .12); color: #003049; }
[data-bs-theme="dark"] .platform-email { background: rgba(102, 155, 188, .18); color: #9ec5de; }

/* Tabs and pills follow the brand (Bootstrap's default is blue). */
.nav-pills { --bs-nav-pills-link-active-bg: var(--mk-red); --bs-nav-link-color: var(--text); --bs-nav-link-hover-color: var(--mk-red); }
.nav-pills .nav-link { border-radius: 999px; font-weight: 500; }
.nav-tabs { --bs-nav-link-color: var(--text-soft); --bs-nav-link-hover-color: var(--mk-red); --bs-nav-tabs-link-active-color: var(--mk-red); }

/* ---- Marketing report ---------------------------------------------- */
.mr-more > summary { cursor: pointer; list-style-position: inside; }
.mr-kpi { padding-inline-start: 1rem; }
.mr-kpi .stat-value { font-size: 1.35rem; }
.mr-delta { font-weight: 600; white-space: nowrap; }
.mr-delta .bi { margin-inline-end: .15rem; }
.mr-delta-good { color: var(--ok); }
.mr-delta-bad { color: var(--mk-red); }
.mr-delta-flat { color: var(--text-soft); }
[dir="rtl"] .mr-delta .bi-arrow-up-right::before,
[dir="rtl"] .mr-delta .bi-arrow-down-right::before { display: inline-block; transform: scaleX(-1); }
.mr-table tfoot td { border-top: 2px solid var(--mk-red); }
.mr-collapsible > summary { cursor: pointer; list-style-position: inside; }
.mr-notes li + li { margin-top: .2rem; }
.mr-tabs .nav-link { white-space: nowrap; }
@media (max-width: 575.98px) { .mr-tabs { flex-wrap: nowrap; overflow-x: auto; } }
.mr-table td.mr-long { min-width: 16rem; max-width: 28rem; }
.mr-table td.text-nowrap { max-width: 22rem; overflow: hidden; text-overflow: ellipsis; }

/* ---- lead forms: the marketing leader's list and editor ------------ */
.lform-list { display: grid; gap: 1rem; }
.lform-card { margin: 0; }
.lform-card-new { outline: 2px solid var(--mk-red); outline-offset: 2px; }
.lform-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 1rem; align-items: flex-start; }
.lform-name { font-size: 1.05rem; margin: 0; }
.lform-actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.lform-figures {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem;
    margin: 1rem 0; padding: .8rem 1rem; border-radius: var(--radius-sm); background: var(--panel-alt);
}
.lform-figures > div { display: grid; gap: .1rem; min-width: 0; }
.lform-fig { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--text); font-variant-numeric: tabular-nums; }
.lform-fig-sm { font-family: var(--font-sans); font-size: .9rem; font-weight: 600; padding-top: .3rem; }
.lform-fig-label { font-size: .72rem; color: var(--text-soft); text-transform: uppercase; letter-spacing: .05em; }
[dir="rtl"] .lform-fig-label { text-transform: none; letter-spacing: 0; }
@media (max-width: 575.98px) { .lform-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lform-links details > summary { cursor: pointer; }
.lform-section { font-size: .95rem; margin: .5rem 0 0; padding-top: .75rem; border-top: 1px solid var(--panel-border); }
.lform-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .6rem; }
.lform-field {
    display: flex; justify-content: space-between; align-items: center; gap: .6rem;
    padding: .55rem .75rem; border: 1px solid var(--panel-border); border-radius: var(--radius-sm); background: var(--panel-alt);
}
.lform-field select { width: auto; min-width: 7.5rem; }

/* ---- lead forms: the public page (/f/{slug}), always light ----------- */
.lf-page { background: var(--mk-mist); min-height: 100vh; }
.lf-wrap { max-width: 520px; margin: 0 auto; padding: 2.5rem 1rem 2rem; }
.lf-card { background: #ffffff; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.lf-brand { background: var(--mk-navy); padding: 1.1rem 1.5rem; border-bottom: 4px solid var(--mk-red); }
.lf-brand img { height: 34px; width: auto; }
.lf-inner { padding: 1.6rem 1.5rem 1.5rem; }
.lf-title { font-size: 1.45rem; line-height: 1.25; color: var(--mk-navy); margin: 0 0 .5rem; text-wrap: balance; }
[dir="rtl"] .lf-title { font-family: var(--font-sans); font-weight: 800; }
.lf-intro { color: var(--text-soft); margin-bottom: 1.25rem; }
.lf-form { display: grid; gap: .9rem; }
.lf-form .form-control { padding: .6rem .8rem; }
.lf-req { color: var(--mk-red); }
.lf-privacy { font-size: .78rem; color: var(--text-soft); text-align: center; margin: 0; }
.lf-foot { text-align: center; font-size: .75rem; color: var(--text-soft); margin: 1rem 0 0; }
/* The honeypot: out of sight and out of the tab order, but still in the form for robots. Clipped in
   place, not pushed off screen: an offset widens the page, and in Arabic (RTL) that opened on empty space. */
.lf-form { position: relative; }
.lf-hp { position: absolute; inset-inline-start: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lf-done {
    width: 64px; height: 64px; border-radius: 50%; margin: .25rem auto 1rem; display: grid; place-items: center;
    background: var(--ok-soft); color: var(--ok); font-size: 2rem;
}

/* ---- reports: the type chooser above every report ------------------- */
.report-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .6rem; }
.report-type {
    display: grid; gap: .15rem; padding: .75rem .95rem; text-decoration: none;
    background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: var(--radius);
    transition: border-color .15s, box-shadow .15s;
}
.report-type:hover { border-color: rgba(208, 18, 27, .35); box-shadow: var(--shadow-xs); }
.report-type.is-active { border-color: var(--mk-red); box-shadow: inset 0 3px 0 var(--mk-red); }
.report-type-title { font-weight: 700; color: var(--text); }
.report-type.is-active .report-type-title { color: var(--mk-red); }
.report-type-desc { font-size: .78rem; color: var(--text-soft); line-height: 1.4; }
/* Lead form editor: a sales leader who does not lead the chosen campaign cannot own its leads. */
.lform-leader-off { display: none; }
#lfLeaders .is-off { opacity: .55; }
#lfLeaders .is-off .lform-leader-off { display: block; }

/* ---- publishing calendar: status colours --------------------------------
   Cards on top (count per status, each a filter link), a coloured edge on every
   entry line and a tinted status dropdown, all from the .pub-* hues above. */
.pub-status-cards {
    display: grid; gap: .75rem; margin-bottom: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.pub-status-card {
    --hue: var(--hue-slate); --hue-text: var(--hue-slate-text);
    display: flex; align-items: center; gap: .75rem;
    padding: .75rem .9rem; border-radius: var(--radius);
    background: var(--panel-bg); color: var(--text); text-decoration: none;
    border: 1px solid rgb(var(--hue) / .30);
    border-inline-start: 4px solid rgb(var(--hue));
    box-shadow: var(--shadow-xs);
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.pub-status-card.is-all { --hue: var(--hue-steel); --hue-text: var(--hue-steel-text); }
.pub-status-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: var(--text); }
.pub-status-card:focus-visible { outline: 2px solid rgb(var(--hue)); outline-offset: 2px; }
.pub-status-card.is-active { background: rgb(var(--hue) / .13); border-color: rgb(var(--hue) / .55); }
.pub-status-icon {
    width: 36px; height: 36px; flex: 0 0 36px; border-radius: 10px;
    display: grid; place-items: center; font-size: 1.05rem;
    background: rgb(var(--hue) / .15); color: var(--hue-text);
}
.pub-status-card.is-active .pub-status-icon { background: rgb(var(--hue)); color: #fff; }
/* The selected card wears its status colour (the card's own slate default above would win otherwise). */
.pub-status-card.is-active.pub-not_published { --hue: var(--hue-red);   --hue-text: var(--hue-red-text); }
.pub-status-card.is-active.pub-scheduled     { --hue: var(--hue-amber); --hue-text: var(--hue-amber-text); }
.pub-status-card.is-active.pub-published     { --hue: var(--hue-green); --hue-text: var(--hue-green-text); }
.pub-status-card.is-active.pub-cancelled     { --hue: var(--hue-slate); --hue-text: var(--hue-slate-text); }
.pub-status-card.is-active.appr-pending      { --hue: var(--hue-amber); --hue-text: var(--hue-amber-text); }
.pub-status-card.is-active { background: rgb(var(--hue) / .2); border-color: rgb(var(--hue)); }
.pub-status-card.is-active .pub-status-count { color: var(--hue-text); }
.pub-status-text { display: flex; flex-direction: column; min-width: 0; }
.pub-status-label {
    font-size: .72rem; font-weight: 600; color: var(--hue-text);
    text-transform: uppercase; letter-spacing: .06em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
[dir="rtl"] .pub-status-label { text-transform: none; letter-spacing: 0; font-size: .8rem; }
.pub-status-count { font-size: 1.4rem; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
@media (max-width: 575.98px) {
    .pub-status-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
    .pub-status-cards > .is-all { grid-column: 1 / -1; }
}

.cal-lines tr.has-entry:not(.cal-focus) > td:first-child { box-shadow: inset 3px 0 0 rgb(var(--hue)); }
[dir="rtl"] .cal-lines tr.has-entry:not(.cal-focus) > td:first-child { box-shadow: inset -3px 0 0 rgb(var(--hue)); }
.cal-lines tr.has-entry.pub-cancelled > td:nth-child(5) { opacity: .6; text-decoration: line-through; }
select.pub-status {
    font-size: .75rem; font-weight: 600; min-width: 130px;
    background-color: rgb(var(--hue) / .13);
    border-color: rgb(var(--hue) / .38);
    color: var(--hue-text);
}

/* ---- ad performance: one heading per channel (Meta, email, web push) ---- */
.ads-section {
    display: flex; align-items: center; gap: .6rem;
    font-size: 1rem; font-weight: 700; margin: 1.5rem 0 .85rem;
}
.ads-channel { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--text); }
.ads-channel > i {
    width: 28px; height: 28px; flex: 0 0 28px; border-radius: 8px;
    display: grid; place-items: center; font-size: .9rem;
    background: rgb(var(--hue) / .14); color: var(--hue-text);
}
.ads-section .ads-channel > i { width: 32px; height: 32px; flex-basis: 32px; font-size: 1rem; }

/* ---- logo intro (partials/intro, js/intro.js) ----------------------------
   Navy stage, the brand's red chevrons streaking across, the three letters of
   the logo rising into place one by one, a red glint over them, then a navy and
   a red curtain lifting off the page. --s scales every time: 1 for the full intro
   on the login page, .55 for the short one after signing in. */
html.intro-playing { overflow: hidden; }
.intro {
    --s: 1;
    position: fixed; inset: 0; z-index: 9999; cursor: pointer;
    animation: intro-done 1ms linear calc(3s * var(--s)) forwards;
}
.intro.intro-short { --s: .55; }
.intro.is-skipped { opacity: 0; transition: opacity .35s ease; }
.intro-curtain { position: absolute; inset: 0; will-change: clip-path; }
.intro-curtain-red { background: var(--mk-red); animation: intro-lift .65s cubic-bezier(.76, 0, .24, 1) calc(2.35s * var(--s)) both; }
.intro-curtain-navy {
    background: radial-gradient(120% 90% at 50% 45%, #0a4566 0%, #003049 55%, #001b2b 100%);
    display: grid; place-items: center; overflow: hidden;
    animation: intro-lift .65s cubic-bezier(.76, 0, .24, 1) calc(2.2s * var(--s)) both;
}
.intro-glow {
    position: absolute; width: 70vmin; height: 70vmin; border-radius: 50%;
    background: radial-gradient(circle, rgba(208, 18, 27, .35) 0%, rgba(208, 18, 27, 0) 65%);
    animation: intro-glow calc(2.2s * var(--s)) ease-out both;
}
/* The brand chevron (img/brand/chevron.svg) as a clip-path, three of them running in from the edge. */
.intro-streaks { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.intro-streaks > span {
    grid-area: 1 / 1; width: 24vmin; height: 30vmin; background: var(--mk-red);
    clip-path: polygon(56.5% 0, 100% 0, 43% 50%, 100% 100%, 58.5% 100%, 0 50%);
    opacity: 0; animation: intro-streak calc(1.25s * var(--s)) cubic-bezier(.5, 0, .2, 1) both;
}
.intro-streaks > span:nth-child(2) { animation-delay: calc(.12s * var(--s)); opacity: 0; }
.intro-streaks > span:nth-child(3) { animation-delay: calc(.24s * var(--s)); }
.intro-stage {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.1rem;
    animation: intro-stage-out .5s cubic-bezier(.6, 0, .4, 1) calc(2.05s * var(--s)) both;
}
.intro-logo { position: relative; width: min(58vw, 300px); aspect-ratio: 520 / 181; }
.intro-part {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; animation: intro-rise calc(.85s * var(--s)) cubic-bezier(.16, 1, .3, 1) both;
}
/* Letter edges measured on the 520 px logo: M 0–219, K 224–367, 3 373–519. */
.intro-part-m { clip-path: inset(0 57.3% 0 0);        animation-delay: calc(.35s * var(--s)); }
.intro-part-k { clip-path: inset(0 28.85% 0 42.7%);   animation-delay: calc(.47s * var(--s)); }
.intro-part-3 { clip-path: inset(0 0 0 71.15%);       animation-delay: calc(.59s * var(--s)); }
.intro-sheen {
    position: absolute; inset: 0;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 90, 98, .95) 50%, transparent 62%) no-repeat;
    background-size: 250% 100%; background-position: 160% 0;
    -webkit-mask: url("../img/mk3-logo-white.png") no-repeat center / 100% 100%;
            mask: url("../img/mk3-logo-white.png") no-repeat center / 100% 100%;
    animation: intro-sheen calc(.9s * var(--s)) ease-in-out calc(1.15s * var(--s)) both;
}
.intro-line {
    display: block; height: 3px; width: 0; border-radius: 3px; background: var(--mk-red);
    box-shadow: 0 0 18px rgba(208, 18, 27, .8);
    animation: intro-line calc(.7s * var(--s)) cubic-bezier(.16, 1, .3, 1) calc(1s * var(--s)) both;
}
.intro-tag {
    color: rgba(255, 255, 255, .8); font-size: .78rem; font-weight: 500;
    text-transform: uppercase; letter-spacing: .35em; text-align: center; padding-inline: 1rem;
    animation: intro-tag calc(.8s * var(--s)) ease-out calc(1.2s * var(--s)) both;
}
[dir="rtl"] .intro-tag { text-transform: none; letter-spacing: 0; font-size: .95rem; }
.intro-short .intro-tag { display: none; }

@keyframes intro-rise {
    from { opacity: 0; transform: translateY(42%) scale(.94); filter: blur(12px); }
    to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes intro-streak {
    0%   { opacity: 0;   transform: translateX(70vw) scaleX(1.6); }
    35%  { opacity: .95; }
    100% { opacity: 0;   transform: translateX(-70vw) scaleX(.8); }
}
@keyframes intro-glow {
    0%   { opacity: 0; transform: scale(.4); }
    50%  { opacity: 1; }
    100% { opacity: .55; transform: scale(1.15); }
}
@keyframes intro-sheen { from { background-position: 160% 0; } to { background-position: -60% 0; } }
@keyframes intro-line { from { width: 0; opacity: 0; } to { width: min(40vw, 140px); opacity: 1; } }
@keyframes intro-tag {
    from { opacity: 0; transform: translateY(8px); letter-spacing: .7em; }
    to   { opacity: 1; transform: none; }
}
[dir="rtl"] .intro-tag { animation-name: intro-fade-up; }
@keyframes intro-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes intro-stage-out { to { opacity: 0; transform: scale(.92); filter: blur(4px); } }
@keyframes intro-lift { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 100% 0); } }
@keyframes intro-done { to { visibility: hidden; pointer-events: none; } }

/* No motion wanted: the logo simply shows and the screen fades away. */
@media (prefers-reduced-motion: reduce) {
    .intro { animation: intro-fade-out .4s ease calc(.9s * var(--s)) forwards; }
    .intro-curtain-red, .intro-streaks, .intro-sheen, .intro-glow { display: none; }
    .intro-curtain, .intro-stage, .intro-part, .intro-line, .intro-tag { animation: none; opacity: 1; }
    .intro-line { width: min(40vw, 140px); }
}
@keyframes intro-fade-out { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* ---- task board ----------------------------------------------------------
   Tabs with counts, quick filters, cards edged in their priority colour, the
   side panel (status bar, people, comments, history) and the person picker. */
.task-tabs {
    display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: thin;
    margin-bottom: 1rem; padding-bottom: .15rem;
}
.task-tab {
    display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap;
    padding: .45rem .85rem; border-radius: 999px; font-size: .84rem; font-weight: 600;
    color: var(--text-soft); text-decoration: none;
    background: var(--panel-bg); border: 1px solid var(--panel-border);
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.task-tab:hover { color: var(--text); border-color: var(--mk-steel); }
.task-tab.active { background: var(--mk-navy); border-color: var(--mk-navy); color: #fff; }
[data-bs-theme="dark"] .task-tab.active { background: var(--mk-steel); border-color: var(--mk-steel); color: #0c1a24; }
.task-tab-count {
    min-width: 1.4rem; padding: .05rem .4rem; border-radius: 999px; text-align: center;
    font-size: .72rem; font-weight: 700; background: var(--panel-alt); color: var(--text-soft);
    font-variant-numeric: tabular-nums;
}
.task-tab.active .task-tab-count { background: rgba(255, 255, 255, .2); color: inherit; }

.task-quick { display: flex; flex-wrap: wrap; gap: .4rem; margin: -.35rem 0 1rem; }
.task-quick-chip {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .28rem .7rem; border-radius: 999px; font-size: .78rem; font-weight: 500;
    color: var(--text-soft); text-decoration: none; border: 1px dashed var(--panel-border);
}
.task-quick-chip:hover { color: var(--text); border-style: solid; }
.task-quick-chip.active { border-style: solid; border-color: var(--mk-red); background: var(--brand-soft); color: var(--mk-red); }
.task-quick-chip.quick-overdue:not(.active) i { color: rgb(var(--hue-red)); }

/* Columns */
.kanban { align-items: start; }
.kanban-col { background: var(--panel-alt); padding: .75rem; min-height: 180px; }
.kanban-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .75rem; padding: 0 .15rem; }
.kanban-count {
    min-width: 1.6rem; padding: .08rem .45rem; border-radius: 999px; text-align: center;
    font-size: .74rem; font-weight: 700; background: rgb(var(--hue) / .14); color: var(--hue-text);
}
.kanban-empty {
    display: flex; flex-direction: column; align-items: center; gap: .3rem;
    padding: 1.4rem .5rem; border: 1px dashed var(--panel-border); border-radius: var(--radius-sm, .6rem);
    color: var(--text-faint); font-size: .8rem;
}
.kanban-empty i { font-size: 1.2rem; }
.kanban-col.drop-target { outline: 2px dashed rgb(var(--hue)); background: rgb(var(--hue) / .06); }

/* Cards */
.task-card {
    position: relative; background: var(--panel-bg); cursor: pointer;
    border: 1px solid var(--panel-border); border-inline-start: 3px solid rgb(var(--hue));
    padding: .7rem .8rem .65rem; box-shadow: var(--shadow-xs);
}
.task-card:hover { box-shadow: var(--shadow-md); border-color: rgb(var(--hue) / .5); border-inline-start-color: rgb(var(--hue)); }
.task-card:focus-visible { outline: 2px solid var(--mk-steel); outline-offset: 2px; }
.task-card:active { cursor: grabbing; }
.task-card-top { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .35rem; }
.task-card .task-title, .task-table .task-title {
    display: block; font-weight: 600; font-size: .9rem; line-height: 1.35; color: var(--text); text-decoration: none;
    overflow-wrap: anywhere;
}
.task-card .task-title:hover, .task-table .task-title:hover { color: var(--mk-red); }
.task-card-desc {
    margin: .25rem 0 0; font-size: .78rem; color: var(--text-soft); line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.task-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: .55rem 0 .6rem; }
.task-card-foot {
    display: flex; justify-content: space-between; align-items: center; gap: .5rem;
    padding-top: .55rem; border-top: 1px solid var(--panel-border);
}
.task-card-counts { display: inline-flex; gap: .6rem; font-size: .74rem; color: var(--text-soft); white-space: nowrap; }
.task-card-counts span { display: inline-flex; align-items: center; gap: .25rem; }
.task-card.is-overdue { background: linear-gradient(0deg, rgb(var(--hue-red) / .04), rgb(var(--hue-red) / .04)), var(--panel-bg); }
.task-row { cursor: pointer; }

/* What kind of task, who it is for, when it is due */
.task-kind {
    display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap;
    font-size: .68rem; font-weight: 600; padding: .12rem .5rem; border-radius: 999px;
    background: rgb(var(--hue) / .12); color: var(--hue-text);
}
.task-people { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; min-width: 0; }
.task-people > i { font-size: .85rem; }
.avatar-stack { display: inline-flex; }
.avatar-stack > .avatar { box-shadow: 0 0 0 2px var(--panel-bg); }
.avatar-stack > .avatar + .avatar { margin-inline-start: -8px; }
.avatar-more { background: var(--panel-alt) !important; color: var(--text-soft); font-family: var(--font-sans); }
.task-due {
    display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap;
    font-size: .72rem; font-weight: 500; padding: .12rem .45rem; border-radius: 6px; color: var(--text-soft);
}
.task-due.is-soon    { background: rgb(var(--hue-amber) / .14); color: var(--hue-amber-text); }
.task-due.is-overdue { background: rgb(var(--hue-red) / .12);   color: var(--hue-red-text); font-weight: 600; }
.task-due.is-done    { text-decoration: line-through; }

/* Side panel */
.task-panel { width: min(600px, 100vw) !important; }
.task-panel .offcanvas-header { padding-bottom: .25rem; }
.task-detail-title { font-size: 1.3rem; font-weight: 700; line-height: 1.3; margin-bottom: 1rem; overflow-wrap: anywhere; }
.task-status-bar {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: .35rem;
    padding: .3rem; border-radius: 12px; background: var(--panel-alt); margin-bottom: 1.1rem;
}
.task-status-bar button {
    display: flex; align-items: center; justify-content: center; gap: .35rem;
    border: 0; border-radius: 9px; padding: .5rem .35rem; background: transparent;
    font-size: .78rem; font-weight: 600; color: var(--text-soft);
    transition: background .15s ease, color .15s ease;
}
.task-status-bar button:hover { background: rgb(var(--hue) / .12); color: var(--hue-text); }
.task-status-bar button.active { background: rgb(var(--hue)); color: #fff; box-shadow: var(--shadow-sm); cursor: default; }
[data-bs-theme="dark"] .task-status-bar button.active { color: #0c1a24; }
@media (max-width: 480px) { .task-status-bar { grid-template-columns: repeat(2, 1fr); } }

.task-facts {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem 1rem;
    padding: .9rem 1rem; margin-bottom: 1rem; border: 1px solid var(--panel-border); border-radius: var(--radius);
}
.task-fact.wide { grid-column: 1 / -1; }
.task-fact dt { font-size: .7rem; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--text-soft); margin-bottom: .25rem; }
[dir="rtl"] .task-fact dt { text-transform: none; letter-spacing: 0; font-size: .78rem; }
.task-fact dd { margin: 0; font-size: .86rem; }
.task-people-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.task-person {
    display: inline-flex; align-items: center; gap: .5rem; font-size: .82rem; line-height: 1.2;
    padding-block: .3rem; padding-inline: .3rem .65rem; border-radius: 999px; background: var(--panel-alt);
}
.task-description {
    white-space: pre-line; font-size: .88rem; line-height: 1.55; margin-bottom: 1rem;
    padding: .85rem 1rem; border-radius: var(--radius-sm, .6rem); background: var(--panel-alt);
    overflow-wrap: anywhere;
}
.task-detail-tabs { margin-top: .5rem; }
.task-detail-tabs .nav-link { font-size: .85rem; font-weight: 600; color: var(--text-soft); display: inline-flex; align-items: center; gap: .2rem; }
.task-detail-tabs .nav-link.active { color: var(--text); }
.task-detail-tabs .task-tab-count { margin-inline-start: .25rem; }
.task-detail .tab-content > .tab-pane { padding-top: 1rem; }

.task-comments { display: flex; flex-direction: column; gap: .75rem; max-height: 46vh; overflow-y: auto; padding: .1rem .1rem .5rem; }
.task-comment { display: flex; gap: .6rem; align-items: flex-start; }
.task-comment-body {
    min-width: 0; flex: 1; padding: .55rem .8rem; border-radius: 14px; border-start-start-radius: 4px;
    background: var(--panel-alt); border: 1px solid var(--panel-border);
}
.task-comment.is-mine { flex-direction: row-reverse; }
.task-comment.is-mine .task-comment-body { background: var(--brand-soft); border-color: transparent; border-start-start-radius: 14px; border-start-end-radius: 4px; }
.task-comment-head { display: flex; justify-content: space-between; gap: .5rem; font-size: .76rem; margin-bottom: .15rem; }
.task-comment-head span { color: var(--text-faint); white-space: nowrap; }
.task-comment-text { font-size: .86rem; white-space: pre-line; overflow-wrap: anywhere; }
.task-composer {
    margin-top: .75rem; padding: .6rem; border-radius: var(--radius); border: 1px solid var(--panel-border);
    background: var(--panel-bg); position: sticky; bottom: 0;
}
.task-composer textarea { border: 0; box-shadow: none; resize: vertical; min-height: 3rem; padding: .25rem .35rem; }
.task-composer textarea:focus { box-shadow: none; }
.task-composer:focus-within { border-color: var(--mk-steel); }
.task-empty { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: 1.5rem; color: var(--text-faint); font-size: .85rem; }
.task-empty i { font-size: 1.5rem; }

.task-history { list-style: none; margin: 0; padding: 0; position: relative; }
.task-history::before {
    content: ""; position: absolute; inset-block: .5rem; inset-inline-start: 13px;
    width: 2px; background: var(--panel-border);
}
.task-history li { display: flex; gap: .75rem; padding-bottom: 1rem; position: relative; }
.task-history-icon {
    flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
    background: var(--panel-bg); border: 2px solid var(--panel-border); color: var(--text-soft); font-size: .8rem; z-index: 1;
}
.task-history-details { overflow-wrap: anywhere; }

/* Dialog: title, the person picker, priority as a switch */
.task-form .task-title-input { font-weight: 600; }
.people-picker { border: 0; padding: 0; margin: 0; min-width: 0; }
.people-picker legend { font-size: .875rem; float: none; width: auto; }
.people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .5rem; }
.people-group { margin-top: .75rem; }
.people-group-title { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--text-soft); margin-bottom: .4rem; }
[dir="rtl"] .people-group-title { text-transform: none; letter-spacing: 0; font-size: .8rem; }
.person-option {
    position: relative; display: flex; align-items: center; gap: .55rem; margin: 0; cursor: pointer;
    padding: .45rem .6rem; border-radius: var(--radius-sm, .6rem);
    border: 1px solid var(--panel-border); background: var(--panel-bg);
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.person-option > input { position: absolute; opacity: 0; pointer-events: none; }
.person-option:hover { border-color: var(--mk-steel); }
.person-option:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(102, 155, 188, .35); }
.person-option:has(input:checked) { border-color: var(--mk-red); background: var(--brand-soft); }
.person-option[data-kind="me"] { border-style: dashed; }
.person-option[data-kind="me"]:has(input:checked) { border-style: solid; }
.person-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; flex: 1; }
.person-name { font-size: .84rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-sub { font-size: .72rem; color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-check { color: var(--mk-red); opacity: 0; transform: scale(.6); transition: opacity .15s ease, transform .15s ease; }
.person-option:has(input:checked) .person-check { opacity: 1; transform: none; }
.people-summary {
    display: flex; align-items: center; gap: .45rem; margin-top: .75rem;
    padding: .55rem .8rem; border-radius: var(--radius-sm, .6rem); font-size: .82rem;
    --hue: var(--hue-slate); --hue-text: var(--hue-slate-text);
    background: rgb(var(--hue) / .1); color: var(--hue-text);
}
.people-summary:empty { display: none; }
.people-summary.is-one    { --hue: var(--hue-navy);  --hue-text: var(--hue-navy-text); }
.people-summary.is-shared { --hue: var(--hue-steel); --hue-text: var(--hue-steel-text); }
.people-summary.is-nobody { --hue: var(--hue-amber); --hue-text: var(--hue-amber-text); }
.prio-switch .btn { font-size: .85rem; }
.prio-switch .btn-check:checked + .btn { background: rgb(var(--hue)); border-color: rgb(var(--hue)); color: #fff; }

/* ---- reports: the simple period choice, side-by-side figures -----------------
   Period A wears the brand red, B the MK3 navy (steel in dark mode). */
.report-simple {
    display: grid; gap: .85rem; margin-bottom: 1rem; padding: 1rem 1.05rem;
    background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: var(--radius); box-shadow: var(--shadow-xs);
}
.rs-campaign { max-width: 360px; }
.rs-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; padding: .3rem; border-radius: 12px; background: var(--panel-alt); }
.rs-choice {
    display: flex; align-items: center; justify-content: center; gap: .45rem; padding: .6rem .5rem; border-radius: 9px;
    font-size: .9rem; font-weight: 600; color: var(--text-soft); text-decoration: none; text-align: center;
    transition: background .15s ease, color .15s ease;
}
.rs-choice:hover { color: var(--text); background: var(--panel-bg); }
.rs-choice.active { background: var(--mk-red); color: #fff; box-shadow: var(--shadow-sm); }
.rs-months { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .55rem .7rem; border-radius: 10px; border: 1px dashed var(--panel-border); }
.rs-months.active { border-style: solid; border-color: var(--mk-red); background: var(--brand-soft); }
.rs-months .form-select { width: auto; min-width: 150px; }
.rs-label { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 600; margin-inline-end: .25rem; }
.rs-vs { font-size: .75rem; font-weight: 700; text-transform: uppercase; color: var(--text-soft); }
.rs-summary { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; font-size: .85rem; }
.rs-period { padding: .2rem .6rem; border-radius: 999px; font-weight: 600; }
.rs-period.is-a { background: var(--brand-soft); color: var(--mk-red); }
.rs-period.is-b { background: rgba(0, 48, 73, .09); color: var(--mk-navy); }
[data-bs-theme="dark"] .rs-period.is-b { background: rgba(102, 155, 188, .16); color: var(--mk-steel); }
.rs-against { color: var(--text-soft); }
@media (max-width: 575.98px) { .rs-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.rp-badge {
    flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; display: inline-grid; place-items: center;
    font-weight: 800; font-size: .85rem; color: #fff; background: var(--rp-a);
    font-family: var(--font-display);
}
.mr-view-switch {
    display: inline-flex; gap: .25rem; padding: .25rem; margin-bottom: .85rem;
    border-radius: 10px; background: var(--panel-alt); border: 1px solid var(--panel-border);
}
.mr-view-switch button {
    display: inline-flex; align-items: center; gap: .4rem; border: 0; background: transparent;
    padding: .35rem .8rem; border-radius: 7px; font-size: .8rem; font-weight: 600; color: var(--text-soft);
}
.mr-view-switch button:hover { color: var(--text); }
.mr-view-switch button.active { background: var(--panel-bg); color: var(--text); box-shadow: var(--shadow-xs); }

.mr-compare { --rp-a: var(--mk-red); --rp-b: var(--mk-navy); padding: .35rem .5rem; }
[data-bs-theme="dark"] .mr-compare { --rp-b: var(--mk-steel); }
.mr-compare th { font-size: .74rem; font-weight: 600; color: var(--text-soft); white-space: nowrap; }
.mr-compare td { font-size: .88rem; }
.mr-compare-a { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.mr-compare-b { color: var(--text-soft); font-variant-numeric: tabular-nums; }
.rp-badge-sm { width: 20px; height: 20px; font-size: .66rem; border-radius: 6px; margin-inline-end: .25rem; vertical-align: middle; }
.rp-badge-sm.is-b { background: var(--rp-b); }
.mr-compare-bars-col { width: 26%; min-width: 120px; }
.mr-bars { display: grid; gap: 3px; }
.mr-bar { display: block; height: 7px; border-radius: 4px; min-width: 2px; }
.mr-bar.is-a { background: var(--rp-a); }
.mr-bar.is-b { background: var(--rp-b); opacity: .55; }
@media (max-width: 575.98px) { .mr-compare-bars-col { display: none; } }
@media print { .report-simple, .mr-view-switch { display: none !important; } }

/* ---- publishing calendar (legacy layout) ------------------------------------
   Channel chips in each brand's colour, the entry lines (click for the viewer),
   a quiet "+" to plan on any day, and the viewer's facts and status switch. */
.platform-website    { background: rgba(102, 155, 188, .16); color: #2b6c8f; }
.platform-meta       { background: rgba(8, 102, 255, .12);   color: #0866ff; }
.platform-tiktok     { background: rgba(0, 0, 0, .08);       color: #111; }
.platform-pushengage { background: rgba(217, 130, 0, .14);   color: #8a5200; }
.platform-youtube    { background: rgba(255, 0, 0, .10);     color: #d40000; }
.platform-linkedin   { background: rgba(10, 102, 194, .12);  color: #0a66c2; }
.platform-google     { background: rgba(66, 133, 244, .12);  color: #1a5fd0; }
.platform-chatgpt    { background: rgba(16, 163, 127, .12);  color: #0b7a5f; }
[data-bs-theme="dark"] .platform-website    { color: #a9d0e6; }
[data-bs-theme="dark"] .platform-meta       { color: #6aa5ff; }
[data-bs-theme="dark"] .platform-tiktok     { background: rgba(255, 255, 255, .1); color: #f1f1f1; }
[data-bs-theme="dark"] .platform-pushengage { color: #f3b350; }
[data-bs-theme="dark"] .platform-youtube    { color: #ff6b6b; }
[data-bs-theme="dark"] .platform-linkedin   { color: #6fb3ff; }
[data-bs-theme="dark"] .platform-google     { color: #8ab4f8; }
[data-bs-theme="dark"] .platform-chatgpt    { color: #4fd1ad; }

.pub-calendar { overflow: hidden; }
.pub-calendar .cal-lines > thead th { white-space: nowrap; }
.pub-col-date { width: 92px; }
.pub-col-day { width: 96px; }
.pub-col-desc { min-width: 240px; }
.pub-desc { display: block; line-height: 1.4; }
.pub-assignee { display: inline-flex; align-items: center; gap: .35rem; margin-top: .35rem; font-size: .75rem; color: var(--text-soft); }
.pub-assignee .avatar { width: 20px; height: 20px; font-size: .55rem; }
.cal-lines tr.has-entry { cursor: pointer; }
.cal-lines tr.has-entry td[data-entry-open] { transition: background-color .12s ease; }
.pub-actions .btn-link { margin-inline-start: .35rem; }
.pub-actions form { display: inline; }
.pub-add-day { color: var(--text-faint); opacity: .55; transition: opacity .15s ease, color .15s ease; }
.cal-lines tr:hover .pub-add-day, .pub-add-day:focus-visible { opacity: 1; color: var(--mk-red); }
.cal-date .pub-add-day { margin-top: .25rem; font-size: .9rem; }

.pub-view-desc { white-space: pre-line; font-size: .92rem; line-height: 1.55; margin-bottom: .9rem; overflow-wrap: anywhere; }
.pub-view-facts { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; margin: 0; padding: .75rem .9rem; border-radius: var(--radius-sm, .6rem); background: var(--panel-alt); font-size: .85rem; }
.pub-view-facts dt { font-weight: 500; color: var(--text-soft); }
.pub-view-facts dd { margin: 0; overflow-wrap: anywhere; }
.pub-status-switch { display: grid; grid-template-columns: repeat(4, 1fr); gap: .3rem; padding: .3rem; border-radius: 12px; background: var(--panel-alt); }
.pub-status-switch button {
    display: flex; align-items: center; justify-content: center; gap: .3rem; border: 0; border-radius: 9px;
    padding: .45rem .3rem; background: transparent; font-size: .76rem; font-weight: 600; color: var(--text-soft);
}
.pub-status-switch button:hover { background: rgb(var(--hue) / .12); color: var(--hue-text); }
.pub-status-switch button.active { background: rgb(var(--hue)); color: #fff; cursor: default; }
@media (max-width: 480px) { .pub-status-switch { grid-template-columns: repeat(2, 1fr); } }

/* ---- sales groups (legacy layout): cards per group, chips for the unassigned ---- */
.groups-alert .btn { white-space: nowrap; }
.groups-search { max-width: 420px; }
.group-card { display: flex; flex-direction: column; }
.group-card-head { display: flex; align-items: flex-start; gap: .85rem; margin-bottom: .9rem; }
.group-card-title { font-size: 1.02rem; font-weight: 700; margin: 0 0 .1rem; }
.group-figures {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: .9rem;
    padding: .6rem .5rem; border-radius: var(--radius-sm, .6rem); background: var(--panel-alt); text-align: center;
}
.group-figure { display: block; font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.group-figure-label { display: block; font-size: .7rem; color: var(--text-soft); text-transform: uppercase; letter-spacing: .05em; }
[dir="rtl"] .group-figure-label { text-transform: none; letter-spacing: 0; font-size: .78rem; }
.group-members td { font-size: .85rem; }
.group-members .rank-bar { width: 64px; margin-inline-start: auto; }
.group-members tr.is-match > td { background: var(--warn-soft); }
.group-add { margin-top: auto; }
.group-free-chip {
    display: inline-flex; align-items: center; gap: .45rem; padding: .25rem .6rem .25rem .25rem; border-radius: 999px;
    border: 1px solid var(--panel-border); background: var(--panel-bg); color: var(--text); font-size: .82rem;
    transition: border-color .15s ease, background .15s ease;
}
[dir="rtl"] .group-free-chip { padding: .25rem .25rem .25rem .6rem; }
.group-free-chip:hover:not(:disabled) { border-color: var(--mk-red); background: var(--brand-soft); }
.group-free-chip .bi-chevron-down { font-size: .7rem; color: var(--text-soft); }

/* ---- lead forms, 2026-10: colour themes, banner, icons in the fields -----
   One accent per form (LeadForm::THEMES): the button, the brand stripe, the focus ring and the stars. */
.lf-theme-red    { --lf-accent: #d0121b; --lf-accent-dark: #a50e16; --lf-accent-soft: rgba(208, 18, 27, .14); }
.lf-theme-navy   { --lf-accent: #003049; --lf-accent-dark: #001d2c; --lf-accent-soft: rgba(0, 48, 73, .16); }
.lf-theme-steel  { --lf-accent: #3f7ea6; --lf-accent-dark: #2f6487; --lf-accent-soft: rgba(63, 126, 166, .18); }
.lf-theme-green  { --lf-accent: #18794e; --lf-accent-dark: #11603d; --lf-accent-soft: rgba(24, 121, 78, .16); }
.lf-theme-orange { --lf-accent: #d9620b; --lf-accent-dark: #b04f08; --lf-accent-soft: rgba(217, 98, 11, .16); }
.lf-theme-purple { --lf-accent: #6941c6; --lf-accent-dark: #53389e; --lf-accent-soft: rgba(105, 65, 198, .16); }
.lf-page { background: linear-gradient(180deg, var(--lf-accent-soft, rgba(208, 18, 27, .1)) 0, var(--mk-mist) 320px); }
.lf-brand { border-bottom-color: var(--lf-accent, var(--mk-red)); }
.lf-banner { display: block; width: 100%; height: auto; max-height: 320px; object-fit: cover; background: #f2f4f7; }
.lf-title { position: relative; padding-bottom: .55rem; }
.lf-title::after { content: ""; position: absolute; inset-inline-start: 0; bottom: 0; width: 44px; height: 3px; border-radius: 3px; background: var(--lf-accent, var(--mk-red)); }
.text-center .lf-title::after { inset-inline-start: calc(50% - 22px); }
.lf-intro { white-space: pre-line; line-height: 1.55; }
.lf-req { color: var(--lf-accent, var(--mk-red)); }
.lf-field { display: grid; gap: .3rem; }
.lf-label { font-weight: 600; font-size: .88rem; color: #344054; }
.lf-control { position: relative; }
.lf-control > .bi { position: absolute; inset-inline-start: .85rem; top: .85rem; color: #98a2b3; pointer-events: none; font-size: 1rem; line-height: 1; }
.lf-control > .form-control { padding-inline-start: 2.5rem; min-height: 48px; border-radius: 10px; border-color: #d0d5dd; font-size: 1rem; }
.lf-control > .form-control:focus { border-color: var(--lf-accent, var(--mk-red)); box-shadow: 0 0 0 .22rem var(--lf-accent-soft, var(--brand-soft)); }
.lf-control > .form-control.is-valid { border-color: #12b76a; background-image: none; }
.lf-control:focus-within > .bi { color: var(--lf-accent, var(--mk-red)); }
.lf-submit, .lf-submit:hover, .lf-submit:focus, .lf-submit:disabled {
    background: var(--lf-accent, var(--mk-red)); border-color: var(--lf-accent, var(--mk-red)); color: #fff;
    min-height: 52px; border-radius: 10px; font-weight: 700; letter-spacing: .01em;
}
.lf-submit:hover { background: var(--lf-accent-dark, var(--mk-red-dark)); border-color: var(--lf-accent-dark, var(--mk-red-dark)); }
.lf-submit:focus-visible { box-shadow: 0 0 0 .25rem var(--lf-accent-soft, var(--brand-soft)); }
.lf-submit:disabled { opacity: .8; }
.lf-submit-outline { border: 1px solid var(--lf-accent, var(--mk-red)); color: var(--lf-accent, var(--mk-red)); }
.lf-submit-outline:hover { background: var(--lf-accent, var(--mk-red)); color: #fff; }
.lf-closed { display: flex; gap: .6rem; align-items: center; padding: .9rem 1rem; border-radius: 10px; background: #f2f4f7; color: #475467; }
.lf-closed .bi { font-size: 1.4rem; }
.lf-done { animation: lf-pop .45s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes lf-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lf-done { animation: none; } }
@media (max-width: 575.98px) {
    .lf-wrap { padding: 0 0 1.5rem; }
    .lf-card { border-radius: 0; box-shadow: none; }
    .lf-inner { padding: 1.4rem 1.1rem; }
    .lf-title { font-size: 1.3rem; }
}

/* ---- lead form editor: numbered steps, choices, banner drop zone, live preview ---- */
.lfe-step-title { display: flex; align-items: center; gap: .6rem; font-size: 1rem; font-weight: 700; margin: 0 0 1rem; }
.lfe-num { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--brand-soft); color: var(--mk-red); font-size: .8rem; font-weight: 800; flex: none; }
.lfe-choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .6rem; }
.lfe-choice {
    display: flex; gap: .7rem; align-items: flex-start; padding: .75rem .9rem; cursor: pointer;
    border: 1px solid var(--panel-border); border-radius: var(--radius-sm); background: var(--panel-alt); transition: border-color .15s, box-shadow .15s;
}
.lfe-choice > .bi { font-size: 1.3rem; color: var(--text-soft); }
.lfe-choice span { display: grid; gap: .1rem; }
.lfe-choice small { color: var(--text-soft); font-size: .76rem; line-height: 1.35; }
.btn-check:checked + .lfe-choice { border-color: var(--mk-red); box-shadow: inset 0 0 0 1px var(--mk-red); }
.btn-check:checked + .lfe-choice > .bi { color: var(--mk-red); }
.btn-check:focus-visible + .lfe-choice { box-shadow: 0 0 0 .2rem var(--brand-soft); }
.lfe-drop {
    position: relative; display: grid; place-items: center; min-height: 130px; overflow: hidden; cursor: pointer; margin: 0;
    border: 2px dashed var(--panel-border); border-radius: var(--radius-sm); background: var(--panel-alt); text-align: center; transition: border-color .15s;
}
.lfe-drop:hover, .lfe-drop.is-over { border-color: var(--mk-red); }
.lfe-drop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lfe-drop-text { position: relative; display: grid; gap: .2rem; padding: 1rem; justify-items: center; }
.lfe-drop-text .bi { font-size: 1.6rem; color: var(--text-soft); }
.lfe-drop-text small { color: var(--text-soft); }
.lfe-drop.has-image .lfe-drop-text { background: rgba(0, 0, 0, .55); color: #fff; border-radius: 10px; opacity: 0; transition: opacity .15s; }
.lfe-drop.has-image .lfe-drop-text .bi, .lfe-drop.has-image .lfe-drop-text small { color: #fff; }
.lfe-drop.has-image:hover .lfe-drop-text { opacity: 1; }
#lfBanner:focus-visible ~ .lfe-drop, .lfe-drop:focus-within { box-shadow: 0 0 0 .2rem var(--brand-soft); }
.lfe-swatches { display: flex; flex-wrap: wrap; gap: .5rem; }
.lfe-swatch { width: 36px; height: 36px; border-radius: 50%; cursor: pointer; background: var(--lf-accent); border: 3px solid var(--panel-bg); box-shadow: 0 0 0 1px var(--panel-border); transition: transform .12s; }
.lfe-swatch:hover { transform: scale(1.08); }
.btn-check:checked + .lfe-swatch { box-shadow: 0 0 0 2px var(--lf-accent); }
.btn-check:focus-visible + .lfe-swatch { outline: 2px solid var(--text); outline-offset: 2px; }
.lfe-fields { display: grid; gap: .5rem; }
.lfe-field {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem;
    padding: .55rem .75rem; border: 1px solid var(--panel-border); border-radius: var(--radius-sm); background: var(--panel-alt);
}
.lfe-field > span:first-child { font-weight: 600; display: flex; gap: .5rem; align-items: center; }
.lfe-field > span:first-child .bi { color: var(--text-soft); }
.lfe-savebar { display: flex; gap: .5rem; }
.lfe-preview-wrap { position: sticky; top: 1rem; }
.lfe-preview { color: #1d2939; box-shadow: var(--shadow-md); border: 1px solid #e4e7ec; }
.lfe-preview .lf-intro, .lfe-preview .lf-privacy { color: #5d6670; }
.lfe-preview .lf-title { font-size: 1.2rem; color: var(--mk-navy); }
.lfe-preview .lf-inner { padding: 1.2rem 1.2rem 1.1rem; }
.lfe-preview .lf-form { gap: .65rem; }
.lfe-preview .lf-label { color: #344054; }
.lf-fake { display: flex; align-items: center; height: 40px; padding-inline-start: .8rem; border: 1px solid #d0d5dd; border-radius: 10px; background: #fff; color: #98a2b3; }
.lf-fake.is-tall { height: 70px; align-items: flex-start; padding-top: .6rem; }
.lfe-preview .lf-submit { min-height: 44px; display: grid; place-items: center; cursor: default; font-size: 1rem; }
.lform-thumb { width: 72px; height: 48px; flex: none; border-radius: 8px; object-fit: cover; background: var(--panel-alt); }
.lform-thumb-empty { display: grid; place-items: center; background: var(--lf-accent-soft); color: var(--lf-accent); font-size: 1.3rem; }
@media (max-width: 1199.98px) { .lfe-preview-wrap { position: static; } }

/* ---- customer dataset, segments, tags ------------------------------------- */
.ds-check { width: 2.2rem; }
.ds-bulk { align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; padding: .55rem .75rem; border-radius: var(--radius-sm); background: var(--brand-soft); }
#dsTable tr.is-selected > td { background: var(--brand-softer); }
.ds-tags { display: flex; flex-wrap: wrap; gap: .25rem; }
.ds-tags .status-pill { text-decoration: none; }
.ds-segment-name { font-size: 1.05rem; font-weight: 700; margin: 0; }
.ds-segment-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.ds-segment-grid > .panel { margin: 0; }
.ds-segment-card { border-top: 3px solid var(--mk-steel); }
.ds-segment-card.is-dynamic { border-top-color: #7a5af8; }
.ds-segment-count { text-align: end; line-height: 1.1; flex: none; }
.ds-segment-count span { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.ds-segment-count small { color: var(--text-soft); font-size: .72rem; }
.ds-rules-text { overflow-wrap: anywhere; }
.ds-tag-row { padding: .45rem 0; border-top: 1px solid var(--panel-border); }
.ds-tag-row > summary { display: flex; align-items: center; gap: .5rem; cursor: pointer; list-style: none; }
.ds-tag-row > summary::-webkit-details-marker { display: none; }
.ds-chip-group { display: flex; flex-wrap: wrap; gap: .4rem; }
.ds-chip {
    display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .7rem; border-radius: 999px; cursor: pointer; font-size: .82rem; font-weight: 600;
    border: 1px solid var(--panel-border); background: var(--panel-alt); color: var(--text-soft); transition: background .12s, border-color .12s;
}
.ds-chip .bi { display: none; }
.btn-check:checked + .ds-chip { border-color: currentColor; color: var(--text); background: var(--brand-softer); }
.btn-check:checked + .ds-chip .bi { display: inline; }
.btn-check:focus-visible + .ds-chip { box-shadow: 0 0 0 .2rem var(--brand-soft); }
.ds-chip.is-locked { cursor: default; color: var(--text); }
.ds-chip.is-locked .bi { display: inline; }
.ds-facts { display: grid; grid-template-columns: auto 1fr; gap: .35rem .9rem; margin: 0; font-size: .85rem; }
.ds-facts dt { color: var(--text-soft); font-weight: 500; }
.ds-facts dd { margin: 0; overflow-wrap: anywhere; }
.ds-lead-list li { padding: .45rem 0; border-top: 1px solid var(--panel-border); }
.ds-lead-list li:first-child { border-top: 0; padding-top: 0; }
.ds-rules { display: grid; gap: .5rem; }
.ds-rule {
    display: grid; grid-template-columns: minmax(130px, 1fr) minmax(120px, 1fr) minmax(140px, 1.3fr) auto; gap: .4rem; align-items: center;
    padding: .5rem; border: 1px solid var(--panel-border); border-radius: var(--radius-sm); background: var(--panel-alt);
}
@media (max-width: 575.98px) { .ds-rule { grid-template-columns: 1fr 1fr; } .ds-rule-value { grid-column: 1 / -1; } }
.ds-preview { padding: .7rem .9rem; border-radius: var(--radius-sm); background: rgba(122, 90, 248, .08); border: 1px solid rgba(122, 90, 248, .25); font-weight: 600; }
.ds-preview.is-empty { background: var(--panel-alt); border-color: var(--panel-border); }
.ds-lead-save { padding: .6rem .7rem; border-radius: var(--radius-sm); background: var(--panel-alt); border: 1px solid var(--panel-border); }
.ds-shown-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem .75rem; border-radius: var(--radius-sm); border: 1px dashed var(--panel-border); background: var(--panel-alt); }
.ds-pull { padding: .6rem .8rem; border-radius: var(--radius-sm); background: var(--brand-softer); border: 1px solid var(--brand-soft); }
.ds-send-who { padding: .55rem .75rem; border-radius: var(--radius-sm); background: var(--panel-alt); border: 1px solid var(--panel-border); font-weight: 600; }

/* Web addresses typed into a task comment, a task description or a lead note (Format::linkify). */
.task-comment-text a, .task-description a, .note-text a { text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; unicode-bidi: isolate; }
.note-text { overflow-wrap: anywhere; }

/* Tracked links: one line per link (hundreds of them, never deleted); the chart and the edit form open underneath. */
.tlink-table { margin-bottom: 0; }
.tlink-table td, .tlink-table th { vertical-align: middle; white-space: nowrap; }
.tlink-table .tlink-name { white-space: normal; min-width: 12rem; max-width: 22rem; }
.tlink-table .tlink-name b { display: block; overflow-wrap: anywhere; }
.tlink-dest { display: block; max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; color: var(--text-soft); }
.tlink-short { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; }
.tlink-num { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; }
.tlink-row-open > td { background: var(--brand-soft); }
.tlink-more > td { white-space: normal; background: transparent; }

/* Lead form: the marketing-consent tick box and the privacy link under the button. */
.lf-consent { display: grid; grid-template-columns: auto 1fr; gap: .15rem .6rem; align-items: start; font-size: .86rem; color: #344054; }
.lf-consent .form-check-input { margin-top: .2rem; width: 1.1rem; height: 1.1rem; flex: none; }
.lf-consent label { cursor: pointer; }
.lf-consent .invalid-feedback { grid-column: 2; }
.lf-privacy a { color: inherit; text-decoration: underline; white-space: nowrap; }

/* ---- leads board on a phone ---------------------------------------
   The same table, laid out as one card per lead below 768 px: name and channel on top, campaign and
   date, the phone with a big Call button, status (and agent for a leader), the latest note. The
   desktop table is untouched; every control keeps its own class, so leads.js works the same. */
@media (max-width: 767.98px) {
    .lead-chips { flex-wrap: nowrap !important; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: none; }
    .lead-chips > * { flex: none; }
    #leadFilters.show, #leadFilters.collapsing { display: flex; }
    #leadFilters > div { flex: 1 1 100%; min-width: 0 !important; }

    .table-wrap:has(#leadsTable) { border: 0; background: transparent; overflow: visible; }
    #leadsTable, #leadsTable tbody { display: block; width: 100%; }
    #leadsTable thead { display: none; }
    #leadsTable tbody tr {
        display: grid; gap: .45rem .6rem; align-items: center;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "check name platform"
            "campaign campaign date"
            "phone phone phone"
            "status status status"
            "note note note"
            "actions actions actions";
        margin-bottom: .75rem; padding: .85rem .9rem;
        background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: var(--radius);
        box-shadow: var(--shadow-xs);
    }
    #leadsTable.is-leader tbody tr {
        grid-template-areas:
            "check name platform"
            "campaign campaign date"
            "phone phone phone"
            "status status status"
            "agent agent agent"
            "note note note"
            "actions actions actions";
    }
    #leadsTable tbody td { display: block; padding: 0; border: 0; background: transparent !important; min-width: 0 !important; max-width: none !important; }
    #leadsTable tr.is-selected { outline: 2px solid var(--mk-red); outline-offset: -1px; }
    #leadsTable .lc-check { grid-area: check; }
    #leadsTable .lc-check .form-check-input { width: 1.25rem; height: 1.25rem; margin: 0; }
    #leadsTable .lc-name { grid-area: name; }
    #leadsTable .lc-name .lead-name { font-size: 1.02rem; font-weight: 700; }
    #leadsTable .lc-platform { grid-area: platform; }
    #leadsTable .lc-campaign { grid-area: campaign; }
    #leadsTable .lc-date { grid-area: date; text-align: end; }
    #leadsTable .lc-country { display: none; }
    #leadsTable .lc-phone { grid-area: phone; }
    #leadsTable .lc-phone-row { flex-wrap: wrap; }
    #leadsTable .lc-phone .wa-btn { font-size: 1.35rem; line-height: 1; padding: .2rem .35rem; }
    #leadsTable .lc-phone .copy-btn { font-size: 1.05rem; padding: .25rem .4rem; }
    #leadsTable .lc-call { margin-inline-start: auto; padding: .45rem .9rem; font-weight: 600; }
    #leadsTable .lc-status { grid-area: status; }
    #leadsTable .lc-status select.lead-status { flex: 1 1 auto; width: 100%; min-height: 40px; font-size: .9rem; }
    #leadsTable .lc-agent { grid-area: agent; }
    #leadsTable .lc-agent select.lead-assign { width: 100%; min-height: 40px; font-size: .9rem; }
    #leadsTable .lc-note { grid-area: note; }
    #leadsTable .lc-note .lead-note { padding: .4rem .5rem; border-radius: 8px; background: var(--brand-softer); }
    #leadsTable .lc-note .lead-note-pencil { opacity: .6; }
    #leadsTable .lc-actions { grid-area: actions; display: flex; gap: .5rem; justify-content: flex-end; }
    #leadsTable .lc-actions .btn { min-width: 44px; min-height: 40px; }

    /* Ticked leads: the bulk actions sit at the bottom of the screen, within thumb reach. */
    #bulkBar.d-flex {
        position: fixed; z-index: 1030; inset-inline: 0; bottom: 0; margin: 0 !important;
        border-radius: 14px 14px 0 0 !important; box-shadow: 0 -6px 24px rgba(0, 0, 0, .18);
        padding: .75rem .9rem calc(.75rem + env(safe-area-inset-bottom, 0px)) !important;
        max-height: 55vh; overflow-y: auto; background: var(--panel-bg) !important; border-top: 2px solid var(--mk-red);
    }
    #bulkBar.d-flex select, #bulkBar.d-flex input { flex: 1 1 100%; width: 100% !important; min-height: 40px; }
    #bulkBar.d-flex .btn { min-height: 40px; }
    body:has(#bulkBar.d-flex) .main-content, body:has(#bulkBar.d-flex) main { padding-bottom: 45vh; }

    /* The lead's panel fills the screen. */
    #leadPanel { width: 100vw !important; }
}

/* Phones: the page's own header buttons shrink to their icons (the text stays for screen readers) and
   the title keeps one line, so the header never squeezes the title into a column of words. */
@media (max-width: 575.98px) {
    .topbar { gap: .5rem; flex-wrap: wrap; }
    .topbar-title { flex: 1 1 calc(100% - 60px); }
    .topbar-title h1, .topbar-title p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .topbar-actions { flex: 1 1 100%; justify-content: flex-end; }
    .topbar-actions { gap: .3rem; }
    .topbar-actions > .btn:not(.btn-icon) { font-size: 0; padding: .45rem .6rem; line-height: 1; }
    .topbar-actions > .btn:not(.btn-icon) > i { font-size: 1.05rem; margin: 0 !important; }
}