/* =================================================================
   NxM Gateway - main stylesheet
   -----------------------------------------------------------------
   The first part is a copy of NxM.CRM/css/nxm.crm.main.css so the two
   products look identical. Keep it a straight copy: when the CRM
   stylesheet changes, copy it over again and re-append the
   "GATEWAY ADDITIONS" block at the bottom of this file.

   Original header follows.
   -----------------------------------------------------------------
   NxM.CRM - main stylesheet
   Sidebar shell + KPI tiles + tables, modelled on NxM.Project look.
   ================================================================= */

/* ── Reset / base ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; height: 100%; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    color: #1e293b;
    background: #f1f5f9;
}

a { color: inherit; text-decoration: none; }

/* ── Shell layout ───────────────────────────────────────────────── */
.crm-shell {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 100vh;
}

/* ── Sidebar ────────────────────────────────────────────────────── */
.crm-side {
    background: #0a2f4d;        /* teal-900 */
    color: #cbd5e1;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.crm-side__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 18px;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.crm-side__brand:hover { color: #fff; text-decoration: none; }

.crm-side__brand-mark {
    width: 36px; height: 36px;
    border-radius: 8px;
    background: #0866b3;        /* teal-500 */
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.crm-side__brand-text {
    font-weight: 600;
    font-size: 16px;
    letter-spacing: .2px;
}

.crm-side__nav {
    padding: 10px 0;
    flex: 1;
}

.crm-side__group {
    padding: 14px 18px 6px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: #64748b;
    font-weight: 600;
}

.crm-side__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 18px;
    color: #cbd5e1;
    font-size: 13.5px;
    border-left: 3px solid transparent;
    transition: background .15s, color .15s, border-color .15s;
}
.crm-side__item i { width: 16px; text-align: center; }
.crm-side__item:hover { background: rgba(255,255,255,.04); color: #fff; }
.crm-side__item.active {
    background: rgba(8,102,179,.18);
    color: #fff;
    border-left-color: #0866b3;
}
.crm-side__item--ghost { opacity: .85; font-style: normal; }
.crm-side__item--ghost i { color: #0866b3; }

/* ── Collapsible sub-menu (Events, …) ──────────────────────────────── */
.crm-side__item--toggle {
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font: inherit;
}
.crm-side__item--toggle > span { flex: 1; }
.crm-side__chev {
    margin-left: auto;
    font-size: 11px;
    color: #94a3b8;
    transition: transform .15s ease;
}
.crm-side__item--toggle[aria-expanded="true"] .crm-side__chev {
    transform: rotate(90deg);
}
.crm-side__sub {
    background: rgba(0,0,0,.18);
    border-left: 3px solid rgba(20,184,166,.35);
    margin: 2px 0 4px;
}
.crm-side__item--sub {
    padding-left: 36px;           /* indent past the parent icon */
    font-size: 13px;
    border-left: 3px solid transparent;
}

.crm-side__foot {
    padding: 14px 18px;
    font-size: 11px;
    color: #64748b;
    border-top: 1px solid rgba(255,255,255,.07);
}

/* Status colour dots in the sidebar */
.crm-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #94a3b8;
    flex-shrink: 0;
}
.crm-dot--open      { background: #0866b3; }
.crm-dot--won       { background: #16a34a; }
.crm-dot--lost      { background: #dc2626; }
.crm-dot--norespons { background: #f59e0b; }

/* ── Main column ───────────────────────────────────────────────── */
.crm-main {
    background: #f1f5f9;
    min-width: 0;       /* allow tables to shrink */
}

.crm-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 28px;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    position: sticky;
    top: 0;
    z-index: 10;
}
.crm-topbar__title {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    color: #0f172a;
}
.crm-topbar__user { display: flex; align-items: center; gap: 10px; }
.crm-topbar__name { font-size: 13px; color: #475569; }

.crm-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: #0866b3;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}
.crm-avatar--sm { width: 28px; height: 28px; font-size: 11px; }

/* ── Breadcrumb ─────────────────────────────────────────────────── */
.crm-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 28px;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    font-size: 12px;
    color: #64748b;
}
.crm-breadcrumb a       { color: #0866b3; }
.crm-breadcrumb a:hover { text-decoration: underline; }
.crm-breadcrumb .sep    { color: #cbd5e1; }

/* ── Page area ──────────────────────────────────────────────────── */
.crm-page { padding: 24px 28px; }

/* ── Cards ──────────────────────────────────────────────────────── */
.crm-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(15,23,42,.04);
    margin-bottom: 18px;
}
.crm-card__header {
    padding: 16px 20px;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    gap: 12px;
}
.crm-card__title {
    font-weight: 600;
    font-size: 15px;
    margin: 0;
    color: #0f172a;
}
.crm-card__body { padding: 20px; }

/* ── KPI tiles ──────────────────────────────────────────────────── */
.crm-kpi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}
.crm-kpi__tile {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px 18px;
}
.crm-kpi__label {
    font-size: 11px;
    text-transform: uppercase;
    color: #64748b;
    letter-spacing: .5px;
    font-weight: 600;
}
.crm-kpi__value {
    font-size: 30px;
    font-weight: 700;
    color: #0f172a;
    margin-top: 4px;
    line-height: 1.1;
}
.crm-kpi__sub {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 4px;
}

/* coloured variants */
.crm-kpi__tile--open      .crm-kpi__value { color: #0866b3; }
.crm-kpi__tile--progress  .crm-kpi__value { color: #f97316; }
.crm-kpi__tile--waiting   .crm-kpi__value { color: #1e293b; }
.crm-kpi__tile--overdue   .crm-kpi__value { color: #dc2626; }
.crm-kpi__tile--won       .crm-kpi__value { color: #16a34a; }
.crm-kpi__tile--neutral   .crm-kpi__value { color: #0866b3; }

/* ── Tables ─────────────────────────────────────────────────────── */
.crm-list-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 12px;
    margin-bottom: 14px;
}

.crm-table {
    width: 100%;
    font-size: 13px;
    border-collapse: collapse;
}
.crm-table th {
    background: #f8fafc;
    color: #475569;
    font-weight: 600;
    text-align: left;
    padding: 10px 14px;
    border-bottom: 1px solid #e2e8f0;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.crm-table th .sort-arrow {
    display: inline-block;
    width: 10px;
    color: #94a3b8;
    margin-left: 4px;
    font-size: 9px;
}
.crm-table td {
    padding: 11px 14px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    color: #1e293b;
}
.crm-table tr:hover td { background: #f8fafc; cursor: pointer; }
.crm-table tr.selected td { background: #ecfeff; }


/* ── Pills / status badges ──────────────────────────────────────── */
.crm-pill {
    display: inline-block;
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 999px;
    line-height: 16px;
    font-weight: 500;
    background: #e2e8f0;
    color: #475569;
}
.crm-pill.open       { background: #d6eaf6; color: #063e6b; }
.crm-pill.won        { background: #dcfce7; color: #166534; }
.crm-pill.lost       { background: #fee2e2; color: #991b1b; }
.crm-pill.norespons  { background: #fef3c7; color: #854d0e; }
.crm-pill.completed  { background: #d1fae5; color: #065f46; }
.crm-pill.cancelled  { background: #f3f4f6; color: #4b5563; }
.crm-pill.high       { background: #fee2e2; color: #991b1b; }
.crm-pill.urgent     { background: #fecaca; color: #7f1d1d; }
.crm-pill.normal     { background: #e0e7ff; color: #3730a3; }
.crm-pill.low        { background: #f1f5f9; color: #64748b; }

/* ── Buttons (Bootstrap overrides for the teal accent) ─────────── */
.btn-primary {
    background: #0866b3;
    border-color: #0866b3;
}
.btn-primary:hover, .btn-primary:focus {
    background: #075389;
    border-color: #075389;
}
.text-primary { color: #0866b3 !important; }

/* ── Pipeline kanban ────────────────────────────────────────────── */
.crm-pipeline {
    display: grid;
    grid-template-columns: repeat(5, minmax(220px, 1fr));
    gap: 12px;
}
.crm-pipeline__col {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px;
    min-height: 200px;
}
.crm-pipeline__col h6 {
    margin: 0 0 8px 0;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #64748b;
    font-weight: 600;
}
.crm-pipeline__card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
    transition: box-shadow .15s, transform .15s;
    display: block;
    color: inherit;
}
.crm-pipeline__card:hover {
    box-shadow: 0 2px 8px rgba(15,23,42,.08);
    transform: translateY(-1px);
    color: inherit;
    text-decoration: none;
}
.crm-pipeline__title {
    font-weight: 600;
    color: #0f172a;
    font-size: 13px;
    margin-bottom: 4px;
}
.crm-pipeline__meta {
    font-size: 11px;
    color: #64748b;
    display: flex;
    justify-content: space-between;
}

/* ── "Page header" used on edit cards ─────────────────────────── */
.cc-header {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.cc-header__title { display: flex; align-items: center; gap: 12px; flex: 1; }
.cc-header__title h1 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    color: #0f172a;
}
.cc-header__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: #ede9fe;
    color: #7c3aed;
    font-size: 15px;
}
.cc-header__actions { display: flex; gap: 8px; }
.cc-header__actions .btn { font-size: 13px; padding: 6px 14px; }
.btn-back {
    background: #fff;
    border: 1px solid #e2e8f0;
    color: #0f172a;
}
.btn-back:hover { background: #f1f5f9; color: #0f172a; }
.btn-save {
    background: #16a34a;
    border-color: #16a34a;
    color: #fff;
}
.btn-save:hover, .btn-save:focus { background: #15803d; border-color: #15803d; color: #fff; }

.btn-delete {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
}
.btn-delete:hover, .btn-delete:focus { background: #b91c1c; border-color: #b91c1c; color: #fff; }

/* ── Key-strip (top row of important fields) ───────────────────── */
.cc-keystrip {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 14px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 18px;
}
.cc-key-field { display: flex; flex-direction: column; gap: 4px; }
.cc-key-field label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #64748b;
    font-weight: 600;
    margin: 0;
}
.cc-key-field input, .cc-key-field select {
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 7px 10px;
    font-size: 13px;
    background: #fff;
    width: 100%;
}
.cc-key-field input:focus, .cc-key-field select:focus {
    outline: none;
    border-color: #0866b3;
    box-shadow: 0 0 0 3px rgba(8,102,179,.18);
}
.cc-key-field input[readonly] { background: #f1f5f9; color: #64748b; }

/* ── Two-column body ──────────────────────────────────────────── */
.cc-body {
    display: grid;
    grid-template-columns: 1fr 1fr;          /* 50 / 50 split */
    gap: 14px;
    align-items: start;                       /* cards top-aligned */
}
/* Keep the 50/50 split as long as the viewport can fit two cards
   ≥ ~360 px each (sidebar = 240 px, content padding ≈ 56 px). */
@media (max-width: 800px) { .cc-body { grid-template-columns: 1fr; } }

.cc-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
}

.cc-tabs {
    display: flex;
    gap: 4px;
    padding: 8px 12px 0;
    border-bottom: 1px solid #e2e8f0;
}
.cc-tabs button {
    border: 0;
    background: transparent;
    padding: 8px 14px;
    font-size: 13px;
    color: #64748b;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    border-radius: 6px 6px 0 0;
    margin-bottom: -1px;
}
.cc-tabs button.active {
    color: #2563eb;
    border-bottom-color: #2563eb;
    background: transparent;
}
.cc-tabs button:hover { color: #2563eb; }
.cc-tab-pane { display: none; padding: 16px 18px 18px; }
.cc-tab-pane.active { display: block; }

.cc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px 16px;
}
.cc-field { display: flex; flex-direction: column; gap: 4px; }
.cc-field label {
    font-size: 12px;
    color: #1e293b;
    font-weight: 600;
    margin: 0;
}
.cc-field input, .cc-field select, .cc-field textarea {
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 7px 10px;
    font-size: 13px;
    background: #fff;
    width: 100%;
}
.cc-field input:focus, .cc-field select:focus, .cc-field textarea:focus {
    outline: none;
    border-color: #0866b3;
    box-shadow: 0 0 0 3px rgba(8,102,179,.18);
}
.cc-field input[readonly], .cc-field--readonly input { background: #eef2f6; color: #64748b; }
.cc-field--full { grid-column: 1 / -1; }

.cc-checks { display: flex; align-items: center; gap: 8px; }
.cc-checks input[type=checkbox] { width: auto; }

/* ── Section dividers inside a tab pane ─────────────────────────── */
.cc-section { margin-top: 22px; }
.cc-section:first-child { margin-top: 0; }
.cc-section__title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: #64748b;
    font-weight: 700;
    margin: 0 0 10px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid #e2e8f0;
}

/* ── Pill row used in the key-strip (Type / Ownership) ─────────── */
.cc-key-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 4px;
    align-items: center;
    min-height: 32px;
}
.cc-key-pills:empty::before {
    content: '-';
    color: #cbd5e1;
    font-size: 14px;
}

/* ── Empty state inside a tab pane ─────────────────────────────── */
.cc-empty {
    text-align: center;
    padding: 40px 20px;
    color: #94a3b8;
}
.cc-empty i {
    font-size: 36px;
    color: #cbd5e1;
    margin-bottom: 12px;
    display: block;
}
.cc-empty p { margin: 0; font-size: 13px; }

/* ── Activity-editor modal (crmActivities) ────────────────────── */
.crm-aedit { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 24px; }
.crm-aedit.is-open { display: flex; }
.crm-aedit__overlay { position: absolute; inset: 0; background: rgba(15, 23, 42, .55); backdrop-filter: blur(2px); }
.crm-aedit__dialog {
    position: relative;
    width: 640px; max-width: 100%; max-height: 88vh;
    background: #fff; border-radius: 14px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, .35);
    display: flex; flex-direction: column; overflow: hidden;
    animation: crm-picker-in .16s ease;
}
.crm-aedit__head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid #e2e8f0;
}
.crm-aedit__title { margin: 0; font-size: 16px; font-weight: 600; color: #0f172a; }
.crm-aedit__close {
    background: transparent; border: 0; width: 32px; height: 32px; border-radius: 50%;
    color: #64748b; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.crm-aedit__close:hover { background: #f1f5f9; color: #0f172a; }
.crm-aedit__body { padding: 16px 18px; overflow: auto; flex: 1; }

/* Linked-record banner above the editor form */
.crm-aedit__context {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 18px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    font-size: 13px;
}
.crm-aedit__context-body { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.crm-aedit__context-pill { font-size: 11px; }
.crm-aedit__context-title { color: #0f172a; font-weight: 500; }
.crm-aedit__context-sub   { color: #64748b; }
.crm-aedit__context-link  {
    font-size: 12px; color: #2563eb; text-decoration: none;
    padding: 4px 10px; border: 1px solid #cbd5e1; border-radius: 999px;
    background: #fff; white-space: nowrap;
}
.crm-aedit__context-link:hover { background: #eaf3fa; border-color: #2563eb; }
.crm-aedit__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
}
.crm-aedit__sub { margin-top: 14px; padding-top: 12px; border-top: 1px solid #e2e8f0; }
.crm-aedit__sub h6 { margin-bottom: 8px; }
.crm-aedit__foot {
    display: flex; gap: 8px; align-items: center;
    padding: 10px 18px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}
body.crm-aedit-open { overflow: hidden; }

/* Top bar above the timeline: filters (left) + new-activity button (right) */
.cc-timeline__topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-left: -10px;       /* let the chips sit visually in the gutter */
    margin-bottom: 14px;
}

/* "+ New activity" button - used to be its own row, now inline */
.cc-timeline__addrow {
    display: inline-flex;
    margin-left: auto;        /* push to the right when inside the topbar */
}

/* Status-filter chips above the activity list */
.cc-timeline__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.cc-timeline__filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid #cbd5e1;
    background: #fff;
    border-radius: 999px;
    font-size: 12px;
    color: #475569;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}
.cc-timeline__filter:hover {
    border-color: #0866b3;
    color: #063e6b;
}
.cc-timeline__filter.is-active {
    background: #0866b3;
    border-color: #0866b3;
    color: #fff;
    font-weight: 500;
}
.cc-timeline__filter-count {
    background: rgba(255,255,255,.55);
    color: inherit;
    border-radius: 999px;
    padding: 0 7px;
    font-size: 11px;
    line-height: 16px;
    min-width: 18px;
    text-align: center;
}
.cc-timeline__filter:not(.is-active) .cc-timeline__filter-count {
    background: #f1f5f9;
    color: #475569;
}

/* ── Activity timeline (right pane on lead/customer cards) ─────── */
.cc-timeline {
    padding: 14px 16px 18px 36px;            /* left gutter holds the line + dot */
    position: relative;
}
/* The single vertical line, drawn in the gutter so the cards never hide it */
.cc-timeline::before {
    content: '';
    position: absolute;
    left: 22px;
    top: 28px;
    bottom: 18px;
    width: 2px;
    background: #e2e8f0;
    border-radius: 1px;
}

/* Each row: a card-style box. */
.cc-timeline__item {
    position: relative;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

/* Coloured dot - sits on the gutter line */
.cc-timeline__item::before {
    content: '';
    position: absolute;
    left: -20px;                             /* gutter is 36 px, card edge at 36, dot center on line at 22 */
    top: 18px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #0866b3;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #cbd5e1;
    z-index: 1;                              /* sit on top of the line */
}
.cc-timeline__item--meeting::before           { background: #8b5cf6; }
.cc-timeline__item--call::before              { background: #f59e0b; }
.cc-timeline__item--task::before              { background: #0866b3; }
.cc-timeline__item--email::before             { background: #3b82f6; }
.cc-timeline__item--reminder::before          { background: #ec4899; }
.cc-timeline__item--partner-education::before { background: #0ea5e9; }
.cc-timeline__item--demo::before              { background: #f43f5e; }

.cc-timeline__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.cc-tl-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    background: #f1f5f9;
    color: #475569;
}
.cc-tl-pill--meeting           { background: #ede9fe; color: #6d28d9; }
.cc-tl-pill--call              { background: #fef3c7; color: #92400e; }
.cc-tl-pill--task              { background: #d6eaf6; color: #063e6b; }
.cc-tl-pill--email             { background: #dbeafe; color: #1e40af; }
.cc-tl-pill--reminder          { background: #fce7f3; color: #9d174d; }
.cc-tl-pill--partner-education { background: #e0f2fe; color: #075985; }
.cc-tl-pill--demo              { background: #ffe4e6; color: #be123c; }

/* Red flag toggle button shown in the header on the Lead + Opportunity
   cards. .is-on flips the icon + outline to red so users can tell at a
   glance whether the record is flagged. */
.btn-redflag {
    background: #fff;
    border: 1px solid #cbd5e1;
    color: #94a3b8;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn-redflag:hover { color: #dc2626; border-color: #fecaca; }
.btn-redflag.is-on {
    background: #fee2e2;
    border-color: #dc2626;
    color:  #b91c1c;
}
.btn-redflag.is-on:hover { background: #fecaca; }

/* Compact list-page "Red flag" filter chip. */
.crm-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #475569;
    cursor: pointer;
    user-select: none;
}
.crm-filter-chip:hover { color: #dc2626; border-color: #fecaca; }
.crm-filter-chip.is-on {
    background: #fee2e2;
    border-color: #dc2626;
    color: #b91c1c;
}

.cc-timeline__date    { font-size: 11px; color: #94a3b8; flex-shrink: 0; }
.cc-timeline__subject { font-weight: 600; color: #0f172a; margin-bottom: 4px; font-size: 13px; }
.cc-timeline__desc    { font-size: 12px; color: #475569; margin-bottom: 6px; line-height: 1.4; }
.cc-timeline__meta    { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 6px; font-size: 12px; }
.cc-timeline__meta .crm-pill { font-size: 10px; padding: 1px 8px; }

/* Linked entity (customer / partner / etc.) - blue, hover-underlined */
.cc-timeline__entity { color: #2563eb; font-weight: 500; cursor: pointer; }
.cc-timeline__entity:hover { text-decoration: underline; }

/* Person name (assigned to / sales-person) - dark plain text */
.cc-timeline__person { color: #1e293b; }

/* Status / priority - plain dark text, lighter weight, no pill */
.cc-timeline__txt           { color: #334155; font-weight: 400; }
/* Subtle accent for "Open" / "Won" status */
.cc-timeline__txt--status   { color: #075389; font-weight: 500; }
/* Hint accents for high/urgent priority */
.cc-timeline__txt--priority { color: #475569; }

/* Faint extra info - call direction, duration, location */
.cc-timeline__hint { color: #94a3b8; font-size: 11px; }
.cc-timeline__actions {
    display: flex;
    gap: 6px;
}
.cc-timeline__actions .btn {
    padding: 2px 10px;
    font-size: 11px;
    line-height: 1.4;
}

/* Strikethrough completed/cancelled rows */
.cc-timeline__item.is-done .cc-timeline__subject,
.cc-timeline__item.is-done .cc-timeline__desc,
.cc-timeline__item.is-done .cc-timeline__date,
.cc-timeline__item.is-done .cc-tl-pill,
.cc-timeline__item.is-done .crm-pill {
    text-decoration: line-through;
    opacity: .7;
}

/* ── .cc-locked - input locked because a picker linked the record ── */
input.cc-locked,
select.cc-locked {
    background: #f1f5f9 !important;
    color: #475569 !important;
    cursor: not-allowed !important;
    border-color: #cbd5e1 !important;
    /* faint padlock icon on the right */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='14' height='14' fill='%2394a3b8'><path d='M8 1a3 3 0 00-3 3v2H4a1 1 0 00-1 1v7a1 1 0 001 1h8a1 1 0 001-1V7a1 1 0 00-1-1h-1V4a3 3 0 00-3-3zm-2 5V4a2 2 0 114 0v2H6z'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    padding-right: 28px !important;
}

/* ── .cc-pick   - declarative lookup-input combo ──────────────── */
.cc-pick {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 4px;
    align-items: stretch;
}
.cc-pick input { min-width: 0; }
.cc-pick__display {
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 7px 10px;
    font-size: 13px;
    background: #fff;
    color: #1e293b;
    cursor: pointer;
    width: 100%;
}
.cc-pick__display::placeholder { color: #94a3b8; font-style: italic; }
.cc-pick__display:hover    { background: #f8fafc; border-color: #94a3b8; }
.cc-pick__display:focus    { outline: none; border-color: #0866b3; box-shadow: 0 0 0 3px rgba(8,102,179,.18); }
.cc-pick__display[readonly]:hover { background: #eaf3fa; border-color: #0866b3; }
.cc-pick__btn {
    border: 1px solid #cbd5e1;
    background: #fff;
    padding: 0 12px;
    border-radius: 6px;
    color: #64748b;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s, border-color .15s;
}
.cc-pick__btn:hover                { background: #f1f5f9; }
.cc-pick__btn--search:hover        { color: #0866b3; border-color: #0866b3; }
.cc-pick__btn--clear               { color: #94a3b8; }
.cc-pick__btn--clear:hover         { color: #dc2626; border-color: #dc2626; background: #fef2f2; }

/* ── .cc-multi - clickable pill multi-select ──────────────────── */
.cc-multi {
    display: block;
}
.cc-multi__items {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    background: #f8fafc;
    min-height: 38px;
    align-items: center;
}
.cc-multi__items:empty::before {
    content: 'Loading…';
    color: #94a3b8;
    font-size: 12px;
    font-style: italic;
}
.cc-multi__pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    font-size: 12px;
    cursor: pointer;
    background: #fff;
    color: #475569;
    transition: background .12s, border-color .12s, color .12s, transform .08s;
    user-select: none;
}
.cc-multi__pill:hover {
    border-color: #0866b3;
    color: #063e6b;
}
.cc-multi__pill:active { transform: scale(.97); }
.cc-multi__pill.is-selected {
    background: #0866b3;
    border-color: #0866b3;
    color: #fff;
    font-weight: 500;
}
.cc-multi__pill.is-selected::before {
    content: '\2713';
    font-size: 11px;
    margin-right: 2px;
}
.cc-multi__pill.is-selected:hover {
    background: #075389;
    border-color: #075389;
}
.cc-multi__empty {
    font-size: 12px;
    color: #94a3b8;
    font-style: italic;
    padding: 4px 8px;
}

/* ── Stage progress bar (used on Opportunity card) ─────────────── */
/* Slim chevron stepper with a slate border wrapping the whole bar.
   Upcoming stages stay neutral (light slate), the passed -> current
   ramp uses green, red marks a "lost" current. ~26px tall, sentence-
   case label, small font - sits tight under the keystrip without
   dominating the card. */
.cc-stages {
    display: flex;
    margin-bottom: 12px;
    background: #fff;
    border: 1px solid #cbd5e1;        /* slate-300 frame */
    border-radius: 4px;
    overflow: hidden;                 /* keep chevron tips inside the frame */
}
.cc-stage {
    flex: 1;
    min-height: 26px;
    background: #f8fafc;              /* slate-50 - upcoming */
    color: #64748b;                   /* slate-500 */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .15px;
    text-transform: none;
    padding: 0 14px 0 22px;
    margin-right: -8px;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%);
    cursor: default;
    user-select: none;
    transition: background .12s ease, color .12s ease;
}
.cc-stage:first-child {
    padding-left: 14px;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
}
.cc-stage:last-child {
    padding-right: 14px;
    margin-right: 0;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 10px 50%);
}
.cc-stage:only-child { clip-path: none; }

.cc-stage.is-passed  { background: #22c55e; color: #fff; }                                                  /* green-500 */
.cc-stage.is-current { background: #16a34a; color: #fff; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .12); }   /* green-600 + subtle bottom highlight */
.cc-stage--lost.is-current { background: #dc2626; color: #fff; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18); }
.cc-stage.is-clickable { cursor: pointer; }
.cc-stage.is-clickable:hover { background: #e2e8f0; color: #334155; }
.cc-stage.is-passed.is-clickable:hover,
.cc-stage.is-current.is-clickable:hover { background: #15803d; color: #fff; }  /* green-700 */

/* ── Modal picker dialog ──────────────────────────────────────── */
.crm-picker {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.crm-picker.is-open { display: flex; }
.crm-picker__overlay {
    position: absolute; inset: 0;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(2px);
}
.crm-picker__dialog {
    position: relative;
    width: 760px;
    max-width: 100%;
    max-height: 80vh;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, .35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: crm-picker-in .16s ease;
}
@keyframes crm-picker-in {
    from { opacity: 0; transform: translateY(10px) scale(.98); }
}
.crm-picker__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid #e2e8f0;
}
.crm-picker__title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #0f172a;
}
.crm-picker__close {
    background: transparent;
    border: 0;
    width: 32px; height: 32px;
    border-radius: 50%;
    color: #64748b;
    font-size: 16px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.crm-picker__close:hover { background: #f1f5f9; color: #0f172a; }

.crm-picker__search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}
.crm-picker__search > i { color: #94a3b8; }
.crm-picker__input {
    flex: 1;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 14px;
    background: #fff;
}
.crm-picker__input:focus {
    outline: none;
    border-color: #0866b3;
    box-shadow: 0 0 0 3px rgba(8,102,179,.18);
}
.crm-picker__body {
    flex: 1;
    overflow: auto;
    background: #fff;
}
.crm-picker__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.crm-picker__table th {
    text-align: left;
    background: #f1f5f9;
    color: #475569;
    padding: 10px 14px;
    border-bottom: 1px solid #e2e8f0;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .4px;
    position: sticky; top: 0;
    z-index: 1;
}
.crm-picker__table td {
    padding: 10px 14px;
    border-bottom: 1px solid #f1f5f9;
    color: #1e293b;
    cursor: pointer;
}
.crm-picker__table tbody tr:hover td { background: #f0fdfa; }
.crm-picker__empty {
    text-align: center !important;
    padding: 36px !important;
    color: #94a3b8 !important;
    cursor: default !important;
}
.crm-picker__foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 18px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}
.crm-picker__count { font-size: 12px; color: #64748b; }
.crm-picker__cancel {
    background: #fff;
    border: 1px solid #cbd5e1;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    color: #475569;
}
.crm-picker__cancel:hover { background: #f1f5f9; }
body.crm-picker-open { overflow: hidden; }

/* Convert-to-Opportunity button: distinct from Save and from Back */
.btn-convert {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
    font-size: 13px;
    padding: 6px 14px;
}
.btn-convert:hover, .btn-convert:focus { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }

/* ── Card editor form ──────────────────────────────────────────── */
.crm-form-row {
    display: grid;
    grid-template-columns: 180px 1fr;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.crm-form-row label {
    font-size: 12px;
    color: #475569;
    margin: 0;
    text-align: right;
    font-weight: 500;
}
.crm-form-row input,
.crm-form-row select,
.crm-form-row textarea {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 7px 10px;
    font-size: 13px;
    background: #fff;
}
.crm-form-row input:focus,
.crm-form-row select:focus,
.crm-form-row textarea:focus {
    outline: none;
    border-color: #0866b3;
    box-shadow: 0 0 0 3px rgba(8,102,179,.18);
}

.crm-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #f1f5f9;
}

.crm-empty {
    text-align: center;
    padding: 60px 20px;
    color: #94a3b8;
}
.crm-empty i { font-size: 28px; margin-bottom: 12px; display: block; }

/* ── Calendar ──────────────────────────────────────────────────── */
.crm-cal {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}
.crm-cal__head, .crm-cal__row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}
.crm-cal__head > div {
    padding: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    text-align: center;
}
.crm-cal__row > div {
    min-height: 100px;
    border-right: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
    padding: 6px;
    font-size: 11px;
    color: #475569;
    position: relative;
}
.crm-cal__row > div.today { background: #ecfeff; }
.crm-cal__row > div.other { color: #cbd5e1; }
.crm-cal__day { font-weight: 700; font-size: 11px; color: #0f172a; margin-bottom: 4px; }
.crm-cal__evt {
    display: block;
    font-size: 11px;
    background: #d6eaf6;
    color: #063e6b;
    border-radius: 4px;
    padding: 1px 5px;
    margin-bottom: 2px;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.crm-cal__evt.completed { background: #dcfce7; color: #166534; text-decoration: line-through; }
.crm-cal__evt.cancelled { background: #f1f5f9; color: #64748b; text-decoration: line-through; }
.crm-cal__evt.high      { background: #fee2e2; color: #991b1b; }

/* ── Week view: a single, taller row of 7 day cells ───────────── */
.crm-cal--week .crm-cal__row--week > div { min-height: 240px; padding: 8px; }
.crm-cal--week .crm-cal__day { font-size: 12px; }

/* ── Day view: agenda list ────────────────────────────────────── */
.crm-cal__day-head {
    font-size: 16px; font-weight: 600; color: #0f172a;
    padding: 10px 14px; border-bottom: 1px solid #e2e8f0;
    text-transform: capitalize;
}
.crm-cal__agenda { display: flex; flex-direction: column; }
.crm-cal__agenda-row {
    display: flex; gap: 14px; padding: 12px 16px;
    border-bottom: 1px solid #f1f5f9;
}
.crm-cal__agenda-row:hover { background: #f8fafc; }
.crm-cal__agenda-time {
    min-width: 60px; font-variant-numeric: tabular-nums;
    color: #475569; font-size: 13px; padding-top: 1px;
}
.crm-cal__agenda-body  { flex: 1; min-width: 0; }
.crm-cal__agenda-subj  { color: #0f172a; font-size: 14px; }
.crm-cal__agenda-meta  { color: #64748b; font-size: 12px; margin-top: 2px; }
.crm-cal__agenda-meta .sep { margin: 0 6px; opacity: .6; }

/* ── Toasts (unchanged behaviour, refreshed colours) ───────────── */
#crm-toast-container {
    position: fixed;
    bottom: 20px; right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.crm-toast {
    min-width: 220px;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 13px;
    color: #fff;
    background: #1e293b;
    box-shadow: 0 4px 14px rgba(0,0,0,.2);
    animation: crm-toast-in .2s ease;
}
.crm-toast.success { background: #16a34a; }
.crm-toast.error   { background: #dc2626; }
@keyframes crm-toast-in { from { opacity:0; transform:translateY(8px); } }

/* ── Attachments widget ────────────────────────────────────────── */
.crm-att__head {
    display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
}
.crm-att__drop {
    flex: 1;
    border: 2px dashed #cbd5e1; border-radius: 10px;
    padding: 10px 14px; text-align: center;
    color: #64748b; font-size: 13px;
    transition: background .15s, border-color .15s, color .15s;
}
.crm-att__drop.is-over {
    background: #eaf3fa; border-color: #2563eb; color: #2563eb;
}
.crm-att__list { display: flex; flex-direction: column; gap: 6px; }
.crm-att__row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #e2e8f0; border-radius: 8px;
    transition: border-color .15s, background .15s;
}
.crm-att__row:hover { background: #f8fafc; border-color: #cbd5e1; }
.crm-att__icon { font-size: 22px; color: #475569; width: 24px; text-align: center; }
.crm-att__body { flex: 1; min-width: 0; }
.crm-att__name { font-weight: 500; color: #0f172a; text-decoration: none; }
.crm-att__name:hover { color: #2563eb; text-decoration: underline; }
.crm-att__meta { font-size: 12px; color: #64748b; margin-top: 2px;
                 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Reports landing: link card pointing to a sub-report ──────── */
.rep-link-card {
    display: flex; align-items: center; gap: 14px;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
    padding: 18px 20px;
    color: inherit; text-decoration: none;
    transition: box-shadow .15s, border-color .15s;
}
.rep-link-card:hover {
    text-decoration: none; color: inherit;
    box-shadow: 0 2px 8px rgba(15,23,42,.08); border-color: #94a3b8;
}
.rep-link-card__icon {
    width: 44px; height: 44px; border-radius: 10px;
    background: #dbeafe; color: #1d4ed8;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px;
}
.rep-link-card__title { font-size: 16px; color: #0f172a; }
.rep-link-card__sub   { font-size: 12px; color: #64748b; margin-top: 2px; }
.rep-link-card__arrow { margin-left: auto; color: #94a3b8; }
.rep-link-card:hover .rep-link-card__arrow { color: #2563eb; }

/* ── Activities page: two-line table cell (main + subtitle) ───── */
.crm-table td .crm-main { color: #0f172a; }
.crm-table td .crm-sub  {
    color: #64748b;
    font-size: 11.5px;
    margin-top: 2px;
    display: block;
}
.crm-table td .crm-sub .crm-pill { font-size: 10.5px; padding: 1px 8px; }

/* ── Activities page: filter grid + quick-filter chips ─────────── */
.crm-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}
.crm-filter-grid > label {
    display: flex; flex-direction: column; gap: 4px;
    font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
    color: #64748b; font-weight: 600;
}
.crm-filter-grid input,
.crm-filter-grid select { font-size: 13px; }

.crm-chip-row {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-bottom: 12px;
}
.crm-chip {
    background: #fff; border: 1px solid #cbd5e1; color: #334155;
    border-radius: 999px; padding: 5px 12px;
    font-size: 12px; cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.crm-chip:hover { background: #f1f5f9; }
.crm-chip.is-on {
    background: #2563eb; border-color: #2563eb; color: #fff;
}
.crm-chip--ghost { color: #64748b; }
.crm-chip--ghost:hover { color: #0f172a; }

/* ────────────────────────────────────────────────────────────────
   CRM Dashboard – new layout
   ──────────────────────────────────────────────────────────────── */
.dash { display: flex; flex-direction: column; gap: 14px; }

/* Title bar */
.dash-titlebar {
    display: flex; align-items: center; gap: 12px;
    margin: -4px 0 2px;
}
.dash-titlebar__title  { font-size: 20px; font-weight: 600; color: #0f172a; margin: 0; }
.dash-titlebar__actions{ margin-left: auto; display: flex; gap: 8px; }

/* KPI strip */
.dash-kpi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}
.dash-kpi__tile {
    position: relative;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
    padding: 16px 18px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
}
.dash-kpi__total {
    position: absolute; top: 10px; right: 14px;
    font-size: 11px; color: #94a3b8; background: #f1f5f9;
    padding: 2px 8px; border-radius: 12px;
}
.dash-kpi__value { font-size: 34px; font-weight: 400; line-height: 1.05; color: #0f172a; }
.dash-kpi__label { font-size: 13px; color: #475569; margin-top: 6px; }
.dash-kpi__sub   { font-size: 12px; color: #94a3b8; margin-top: 2px; }
.dash-kpi__tile[data-tone="blue"]  .dash-kpi__value { color: #2563eb; }
.dash-kpi__tile[data-tone="green"] .dash-kpi__value { color: #16a34a; }
.dash-kpi__tile[data-tone="red"]   .dash-kpi__value { color: #dc2626; }
.dash-kpi__tile[data-tone="amber"] .dash-kpi__value { color: #d97706; }

/* Clickable variant - used on the list-page tile strips and on the
   dashboard KPI tiles, which now deep-link to the matching list. */
.dash-kpi__tile.is-clickable {
    display: block; text-decoration: none; color: inherit; cursor: pointer;
    transition: box-shadow .15s, border-color .15s, transform .15s;
}
.dash-kpi__tile.is-clickable:hover {
    text-decoration: none; color: inherit;
    box-shadow: 0 2px 8px rgba(15,23,42,.08);
    border-color: #94a3b8;
}
.dash-kpi__tile.is-active {
    border-color: #2563eb;
    box-shadow: inset 0 0 0 2px #2563eb;
}

/* Stage bar */
.dash-stagebar {
    display: flex; align-items: stretch;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
    overflow: hidden; min-height: 92px;
}
.dash-stage {
    color: #fff; padding: 14px 16px;
    display: flex; flex-direction: column; justify-content: center;
    align-items: center; text-align: center; gap: 4px;
    border-right: 1px solid rgba(255,255,255,.18);
    min-width: 0;
}
.dash-stage:last-child { border-right: none; }
.dash-stage__name  { font-size: 12px; opacity: .92; }
.dash-stage__count { font-size: 26px; font-weight: 400; line-height: 1; }
.dash-stage__val   { font-size: 11px; opacity: .85; }
/* Blue ramp - lighter on the left, darker on the right (5 stages). */
.dash-stage:nth-child(1) { background: #3b82f6; }
.dash-stage:nth-child(2) { background: #2563eb; }
.dash-stage:nth-child(3) { background: #1d4ed8; }
.dash-stage:nth-child(4) { background: #1e40af; }
.dash-stage:nth-child(5) { background: #1e3a8a; }

/* Win / Loss */
.dash-winloss {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
    padding: 16px 18px;
}
.dash-winloss__title { font-size: 14px; font-weight: 600; color: #0f172a; margin-bottom: 10px; }
.dash-winloss__row {
    display: flex; align-items: center; gap: 14px;
}
.dash-winloss__num {
    font-size: 22px; font-weight: 400; min-width: 50px;
}
.dash-winloss__num--won  { color: #16a34a; text-align: right; }
.dash-winloss__num--lost { color: #dc2626; }
.dash-winloss__bar {
    flex: 1; display: flex; height: 18px; border-radius: 4px; overflow: hidden;
    background: #e2e8f0;
}
.dash-winloss__seg--won  { background: #22c55e; }
.dash-winloss__seg--lost { background: #ef4444; }
.dash-winloss__rate {
    text-align: center; font-size: 13px; color: #475569; margin-top: 8px;
}
.dash-winloss__rate strong { color: #16a34a; }

/* Section title */
.dash-section__title { font-size: 14px; font-weight: 700; color: #0f172a; margin: 6px 0 -4px; }

/* Activity overview tiles */
.dash-acts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
}
.dash-act__tile {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
    padding: 18px 14px; text-align: center;
    display: block; text-decoration: none; color: inherit;
    transition: box-shadow .15s, transform .15s, border-color .15s;
}
.dash-act__tile:hover {
    text-decoration: none; color: inherit;
    box-shadow: 0 2px 6px rgba(15,23,42,.06);
    border-color: #cbd5e1;
}
.dash-act__icon { font-size: 22px; margin-bottom: 6px; }
.dash-act__icon--task { color: #0f172a; }
.dash-act__icon--meet { color: #2563eb; }
.dash-act__icon--call { color: #db2777; }
.dash-act__icon--mail { color: #16a34a; }
.dash-act__icon--rem  { color: #eab308; }
.dash-act__num { font-size: 28px; font-weight: 400; color: #0f172a; line-height: 1; }
.dash-act__lbl {
    font-size: 11px; color: #64748b; letter-spacing: .8px;
    font-weight: 600; margin-top: 4px; text-transform: uppercase;
}
.dash-act__sub  { font-size: 12px; color: #2563eb; text-decoration: none; display: inline-block; margin-top: 6px; }
.dash-act__sub:hover { text-decoration: underline; }

/* Bottom three-column list section */
.dash-bottom {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.dash-list {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
    overflow: hidden; min-height: 0;
}
.dash-list__head {
    padding: 12px 16px; font-size: 14px; font-weight: 600; color: #0f172a;
    border-bottom: 1px solid #e2e8f0;
}
.dash-list__body { padding: 4px 0; max-height: 480px; overflow: auto; }
.dash-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px; border-bottom: 1px solid #f1f5f9;
    font-size: 13px;
}
.dash-row:last-child { border-bottom: none; }
.dash-row__main { flex: 1; min-width: 0; }
.dash-row__subj {
    color: #0f172a; font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-row__subj a { color: #0f172a; text-decoration: none; }
.dash-row__subj a:hover { color: #2563eb; text-decoration: underline; }
.dash-row__meta {
    font-size: 12px; color: #64748b; margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-row__meta a { color: #2563eb; text-decoration: none; }
.dash-row__meta a:hover { text-decoration: underline; }
.dash-row__sep  { margin: 0 6px; opacity: .5; }
.dash-row__when { font-size: 12px; color: #64748b; white-space: nowrap; }
.dash-row__badge {
    font-size: 11px; padding: 3px 8px; border-radius: 10px;
    font-weight: 600; white-space: nowrap;
}
.dash-row__badge.is-overdue { background: #fee2e2; color: #b91c1c; }
.dash-row__badge.is-today   { background: #fef3c7; color: #92400e; }
.dash-row__badge.is-soon    { background: #dcfce7; color: #166534; }

@media (max-width: 1200px) {
    .dash-bottom { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 780px) {
    .dash-bottom { grid-template-columns: 1fr; }
    .dash-stagebar { flex-wrap: wrap; }
    .dash-stage { flex: 1 1 50% !important; border-right: none; border-bottom: 1px solid rgba(255,255,255,.18); }
}

/* ── Responsive: collapse sidebar on small screens ─────────────── */
@media (max-width: 900px) {
    .crm-shell { grid-template-columns: 1fr; }
    .crm-side  { position: relative; height: auto; flex-direction: row; flex-wrap: wrap; }
    .crm-side__brand { flex: 1 0 100%; }
    .crm-side__nav   { display: flex; flex-wrap: wrap; }
    .crm-side__group { display: none; }
    .crm-side__foot  { display: none; }
}

/* ── "Extra info" popup - dynamic custom fields ─────────────────
   Rendered by js/nxm.crm.customfields.js on the Lead / Opportunity /
   Prospect cards. Shares the visual language of .crm-picker but is
   taller and scrolls, since the number of groups is up to the admin. */
.crm-cf {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.crm-cf.is-open { display: flex; }
.crm-cf__overlay {
    position: absolute; inset: 0;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(2px);
}
.crm-cf__dialog {
    position: relative;
    width: 820px;
    max-width: 100%;
    max-height: 86vh;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, .35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: crm-picker-in .16s ease;
}
.crm-cf__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid #e2e8f0;
}
.crm-cf__title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 8px;
}
.crm-cf__title i { color: #0866b3; }
.crm-cf__close {
    background: transparent;
    border: 0;
    width: 32px; height: 32px;
    border-radius: 50%;
    color: #64748b;
    font-size: 16px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.crm-cf__close:hover { background: #f1f5f9; color: #0f172a; }

.crm-cf__body {
    padding: 4px 18px 18px;
    overflow-y: auto;
    flex: 1 1 auto;
    background: #f8fafc;
}
.crm-cf__loading { padding: 40px 20px; text-align: center; color: #94a3b8; font-size: 13px; }

.crm-cf__group {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px 16px 16px;
    margin-top: 14px;
}
.crm-cf__group-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: #64748b;
    font-weight: 700;
    margin: 0 0 10px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid #e2e8f0;
}
.crm-cf__group-desc { margin: -4px 0 12px; font-size: 12px; color: #94a3b8; }
.crm-cf__grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.crm-cf__field--wide { grid-column: 1 / -1; }
.crm-cf__req { color: #dc2626; }
.crm-cf__check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 400;
    padding-top: 4px;
    margin: 0;
    cursor: pointer;
}
.crm-cf__check input[type=checkbox] { width: 18px; height: 18px; }

.crm-cf__foot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-top: 1px solid #e2e8f0;
    background: #fff;
}
.crm-cf__hint { font-size: 12px; color: #94a3b8; margin-right: auto; }

/* Small counter on the card's "Extra info" button. */
.crm-cf__badge {
    display: inline-block;
    min-width: 18px;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 9px;
    background: #0866b3;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

/* Narrow variant of the popup, used by the group / field editors on
   the setup page - same shell, less width, no long scrolling body. */
.crm-cf--sm .crm-cf__dialog { width: 560px; }
.crm-cf--sm .crm-cf__body   { max-height: 70vh; }
.crm-cf__note {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.4;
    color: #94a3b8;
}

/* ── Custom-fields setup page ──────────────────────────────────── */
.cf-setup { display: grid; grid-template-columns: 340px 1fr; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .cf-setup { grid-template-columns: 1fr; } }

/* Whole row is the click target - it opens the editor popup. */
.cf-row { cursor: pointer; }
.cf-row:hover { background: #f1f5f9; }
.cf-row__name { color: #0866b3; font-weight: 600; }
.cf-row:hover .cf-row__name { text-decoration: underline; }
.cf-row__sub { font-size: 11px; color: #94a3b8; margin-top: 2px; }
/* The inline Active toggle must not feel like part of the row link. */
.cf-row input[type=checkbox] { cursor: pointer; }

/* ── Exchange rates page ───────────────────────────────────────── */
/* Currencies in use with no rate - their amounts are being counted
   1:1 right now, so this reads as a warning, not a hint. */
.cf-warn {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 14px;
    border: 1px solid #fcd34d;
    background: #fffbeb;
    border-radius: 8px;
    font-size: 13px;
    color: #78350f;
}
.cf-warn > i { color: #d97706; font-size: 18px; margin-top: 1px; }
.cf-warn__list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cf-warn__pill {
    border: 1px solid #d97706;
    background: #fff;
    color: #92400e;
    border-radius: 999px;
    padding: 3px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.cf-warn__pill:hover  { background: #d97706; color: #fff; }
.cf-warn__pill span   { font-weight: 400; opacity: .7; }
.cf-warn__pill:hover span { opacity: .85; }

/* Live "1.000 EUR = 7.460 DKK" check under the rate input. */
.cf-preview {
    margin-top: 14px;
    font-size: 13px;
    color: #475569;
    min-height: 20px;
}
.cf-preview strong { color: #0f172a; }

/* "(DKK)" qualifier next to a dashboard list heading. */
.dash-list__note { font-weight: 400; opacity: .65; font-size: 12px; }


/* =================================================================
   GATEWAY ADDITIONS
   -----------------------------------------------------------------
   Everything above is the NxM.CRM stylesheet, unchanged.

   Below is what the Gateway needs on top of it:

     1. the sidebar, because the Gateway builds its menu in C#
        (Master.Master.cs → AddMenu) and emits the old template's
        markup - so it is restyled rather than rewritten
     2. overrides that pull the old admin template's page markup
        (.card, .table, .btn, .form-control …) into the CRM look
     3. Bootstrap 4 → 5 shims, because 111 pages were written for 4

   Keep additions in this block so the copy above stays replaceable.
   ================================================================= */

/* ── 1. Sidebar ───────────────────────────────────────────────────
   AddMenu() emits:
     <li class="nav-label">Group</li>
     <li class="nav-devider"></li>
     <li><a href="x.aspx"><i class="fa fa-x"></i><span class="hide-menu">Label</span></a></li>
     <li><a class="has-arrow" href="#">…</a><ul class="collapse">…</ul></li>
   Those are mapped onto the .crm-side__* look here.                  */

#sidebarnav { list-style: none; margin: 0; padding: 10px 0; }
#sidebarnav li { list-style: none; }

#sidebarnav > li.nav-label,
#sidebarnav li.nav-label {
    padding: 14px 18px 6px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: #64748b;
    font-weight: 600;
}
#sidebarnav li.nav-devider {
    height: 1px;
    margin: 8px 14px;
    background: rgba(255,255,255,.07);
}

#sidebarnav li > a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 18px;
    color: #cbd5e1;
    font-size: 13.5px;
    border-left: 3px solid transparent;
    transition: background .15s, color .15s, border-color .15s;
    text-decoration: none;
}
#sidebarnav li > a > i { width: 16px; text-align: center; flex: none; }
#sidebarnav li > a > .hide-menu { flex: 1; }
#sidebarnav li > a:hover { background: rgba(255,255,255,.04); color: #fff; }
#sidebarnav li > a.is-current {
    background: rgba(8,102,179,.18);
    color: #fff;
    border-left-color: #0866b3;
}

/* the chevron on a group */
#sidebarnav li > a.has-arrow::after {
    content: '\f054';                      /* fa-chevron-right */
    font-family: 'Font Awesome 6 Free', 'FontAwesome';
    font-weight: 900;
    margin-left: auto;
    font-size: 10px;
    color: #94a3b8;
    transition: transform .15s ease;
}
#sidebarnav li.is-open > a.has-arrow::after { transform: rotate(90deg); }

/* Sub-menus are driven only by .is-open, so nothing else - not the old
   template's script, not Bootstrap's collapse - can fight over them. */
#sidebarnav li > ul { display: none !important; list-style: none; margin: 2px 0 4px; padding: 0;
                      background: rgba(0,0,0,.18); border-left: 3px solid rgba(8,102,179,.35); }
#sidebarnav li.is-open > ul { display: block !important; }
#sidebarnav li > ul li > a { padding-left: 40px; font-size: 13px; }

/* the company name the master puts at the top of the menu */
.gw-side__company {
    padding: 12px 18px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}
.gw-side__company small { display: block; color: #64748b; font-weight: 500; font-size: 11px;
                          text-transform: uppercase; letter-spacing: .8px; }

/* ── topbar extras the Gateway has and the CRM does not ─────────── */
.gw-top__flags { display: inline-flex; align-items: center; gap: 6px; }
.gw-top__flags input[type=image] { height: 18px; opacity: .75; transition: opacity .12s; }
.gw-top__flags input[type=image]:hover { opacity: 1; }

.gw-top__link { color: #475569; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.gw-top__link:hover { color: #0866b3; }

.gw-bell { position: relative; color: #475569; font-size: 16px; }
.gw-bell .badge { position: absolute; top: -7px; right: -10px; font-size: 10px; }

.gw-foot {
    padding: 16px 28px 26px;
    color: #94a3b8;
    font-size: 11.5px;
    line-height: 1.6;
}
.gw-foot a { color: #64748b; text-decoration: underline; }

/* ── 2. Old template markup, pulled into the CRM look ───────────── */

/* the pages use Bootstrap cards everywhere */
.crm-page .card,
.crm-page .panel {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: none;
    margin-bottom: 18px;
}
.crm-page .card-body, .crm-page .panel-body { padding: 20px; }
.crm-page .card-header, .crm-page .panel-heading {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 12px 20px;
    font-weight: 600;
    font-size: 13px;
    color: #334155;
}

/* tables - including the ones ASP.NET renders without a class */
.crm-page table.table,
.crm-page .card table,
.crm-page .dataTable { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.crm-page table.table > thead > tr > th,
.crm-page .card table > tbody > tr > th,
.crm-page .dataTable thead th {
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #64748b;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 9px 10px;
}
.crm-page table.table > tbody > tr > td,
.crm-page .card table > tbody > tr > td,
.crm-page .dataTable tbody td {
    padding: 8px 10px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}
.crm-page .card table > tbody > tr:hover > td { background: #f8fafc; }
.crm-page .evenbgcolor > td { background: #fcfdfe; }

/* buttons */
.crm-page .btn {
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 600;
    padding: 7px 13px;
    box-shadow: none;
}
.crm-page .btn-primary { background: #0866b3; border-color: #0866b3; }
.crm-page .btn-primary:hover { background: #075a9e; border-color: #075a9e; }
.crm-page .btn-secondary, .crm-page .btn-default {
    background: #fff; border-color: #e2e8f0; color: #334155;
}
.crm-page .btn-secondary:hover, .crm-page .btn-default:hover { background: #f1f5f9; }

/* inputs */
.crm-page .form-control, .crm-page input[type=text], .crm-page input[type=password],
.crm-page input[type=email], .crm-page select, .crm-page textarea {
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    font-size: 13px;
    padding: 7px 9px;
    box-shadow: none;
    color: #1e293b;
}
.crm-page .form-control:focus, .crm-page input:focus, .crm-page select:focus, .crm-page textarea:focus {
    border-color: #0866b3;
    box-shadow: 0 0 0 3px rgba(8,102,179,.12);
    outline: none;
}
.crm-page label { font-size: 12px; font-weight: 600; color: #475569; margin-bottom: 3px; }

/* the template's own helpers that pages rely on */
.crm-page .IdRow:hover { background: #f8fafc; cursor: pointer; }

/* ── 3. Bootstrap 4 → 5 shims ────────────────────────────────────
   Classes that 111 pages still use but Bootstrap 5 dropped.         */

.pull-right { float: right !important; }
.pull-left  { float: left  !important; }

.ml-auto { margin-left: auto !important; }
.mr-auto { margin-right: auto !important; }
.ml-1 { margin-left: .25rem !important; } .mr-1 { margin-right: .25rem !important; }
.ml-2 { margin-left: .5rem  !important; } .mr-2 { margin-right: .5rem  !important; }
.ml-3 { margin-left: 1rem   !important; } .mr-3 { margin-right: 1rem   !important; }
.pl-1 { padding-left: .25rem !important; } .pr-1 { padding-right: .25rem !important; }
.pl-2 { padding-left: .5rem  !important; } .pr-2 { padding-right: .5rem  !important; }
.pl-3 { padding-left: 1rem   !important; } .pr-3 { padding-right: 1rem   !important; }
.m-l-10 { margin-left: 10px !important; }

.text-left  { text-align: left  !important; }
.text-right { text-align: right !important; }

/* badge-* became text-bg-* / bg-* */
.badge-danger    { background-color: #dc2626 !important; color: #fff !important; }
.badge-success   { background-color: #16a34a !important; color: #fff !important; }
.badge-warning   { background-color: #f59e0b !important; color: #1e293b !important; }
.badge-info      { background-color: #0891b2 !important; color: #fff !important; }
.badge-primary   { background-color: #0866b3 !important; color: #fff !important; }
.badge-secondary { background-color: #64748b !important; color: #fff !important; }

/* form-group and form-row are gone in 5 */
.form-group { margin-bottom: 1rem; }
.form-row { display: flex; flex-wrap: wrap; margin-right: -5px; margin-left: -5px; }
.form-row > [class*="col-"] { padding-right: 5px; padding-left: 5px; }

/* input-group-addon was replaced by input-group-text */
.input-group-addon {
    display: flex; align-items: center; padding: 7px 10px;
    background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 7px;
    font-size: 13px; color: #475569;
}

/* .close became .btn-close */
.close {
    background: transparent; border: 0; font-size: 20px; line-height: 1;
    color: #64748b; opacity: .7; cursor: pointer;
}
.close:hover { opacity: 1; }

/* hidden-* utilities from the template */
.hidden-sm-down, .hidden-md-up { display: none !important; }

/* the old template hides the label text when the sidebar collapses;
   the new sidebar never collapses, so make sure it stays visible */
.hide-menu { display: inline !important; }

/* ── print ───────────────────────────────────────────────────────── */
@media print {
    .crm-side, .crm-topbar, .gw-foot { display: none !important; }
    .crm-shell { display: block; }
    .crm-page { padding: 0; }
}


/* ── 4. Gateway palette - taken from nxm.dk ───────────────────────
   The marketing site is the reference:

     deep navy   headlines and body type
     blue        links, active state, primary buttons
     orange      one call to action per screen, and unread counts
     pale wash   a blue-to-green gradient behind white cards

   So the menu is the pale wash rather than a slab of navy, the type
   is navy, and orange stays rare enough to still mean "do this".

   Kept as an override block rather than edits to the copied CRM part
   above, so that copy stays replaceable.                             */

:root {
    /* ink */
    --gw-ink:         #0B2E4F;   /* headlines, body                  */
    --gw-ink-soft:    #5A7691;   /* labels, meta                     */

    /* interaction */
    --gw-accent:      #1668B3;   /* links, active, primary buttons    */
    --gw-accent-dark: #12558F;
    --gw-accent-wash: #E8F1FA;

    /* the one call to action */
    --gw-cta:         #F2683C;
    --gw-cta-dark:    #DE5527;
    --gw-cta-wash:    #FDEDE7;

    /* surfaces */
    --gw-wash-a:      #F3F8FD;   /* pale blue, top of the gradient    */
    --gw-wash-b:      #F2F9ED;   /* pale green, bottom                */
    --gw-page:        #F6FAFD;
    --gw-line:        #DCE7F2;
    --gw-line-soft:   #EDF3F9;

    --gw-shadow:      0 1px 2px rgba(11,46,79,.04), 0 10px 28px rgba(11,46,79,.055);
    --gw-radius:      14px;
}

/* ---- page ground ------------------------------------------------ */
body {
    background: var(--gw-page);
    color: var(--gw-ink);
}

/* ---- sidebar ----------------------------------------------------- */
.crm-side {
    background: linear-gradient(165deg, var(--gw-wash-a) 0%, var(--gw-wash-b) 100%);
    color: var(--gw-ink);
    border-right: 1px solid var(--gw-line);
}

.crm-side__brand {
    color: var(--gw-ink);
    border-bottom: 1px solid var(--gw-line);
}
.crm-side__brand:hover { color: var(--gw-ink); }
.crm-side__brand-text  { color: var(--gw-ink); letter-spacing: -.2px; }
.crm-side__brand-mark  {
    background: var(--gw-ink);
    color: #fff;
    box-shadow: 0 2px 6px rgba(11,46,79,.18);
}

/* The Gateway logo (images/logo.png, 400x128) in the sidebar brand block.
   Sized by height: 34px tall is 106px wide, about the height of the letter
   badge it replaced, so the brand block keeps its proportion to the menu
   under it. 44px was tried first and read as too big for the column. Block,
   so the anchor has no descender gap under an inline image. */
.crm-side__brand { padding: 16px 18px; }
.crm-side__logo {
    display: block;
    height: 34px;
    width: auto;
    max-width: 100%;
}

.crm-side__group { color: var(--gw-ink-soft); }

.crm-side__item { color: var(--gw-ink); border-radius: 0 8px 8px 0; margin-right: 10px; }
.crm-side__item:hover { background: rgba(22,104,179,.07); color: var(--gw-accent); }
.crm-side__item.active,
.crm-side__item.is-current {
    background: #fff;
    color: var(--gw-accent);
    border-left-color: var(--gw-accent);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(11,46,79,.06);
}
.crm-side__item--ghost i { color: var(--gw-cta); }

.crm-side__chev { color: var(--gw-ink-soft); }
.crm-side__sub {
    background: rgba(11,46,79,.035);
    border-left-color: rgba(22,104,179,.3);
}

.crm-side__foot {
    color: var(--gw-ink-soft);
    border-top: 1px solid var(--gw-line);
}

/* ---- the C#-generated menu (see section 1) ---------------------- */
#sidebarnav li.nav-label   { color: var(--gw-ink-soft); }
#sidebarnav li.nav-devider { background: var(--gw-line); }

#sidebarnav li > a         { color: var(--gw-ink); border-radius: 0 8px 8px 0; margin-right: 10px; }
#sidebarnav li > a:hover   { background: rgba(22,104,179,.07); color: var(--gw-accent); }
#sidebarnav li > a.is-current {
    background: #fff;
    color: var(--gw-accent);
    border-left-color: var(--gw-accent);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(11,46,79,.06);
}
#sidebarnav li > a.has-arrow::after { color: var(--gw-ink-soft); }
#sidebarnav li > ul {
    background: rgba(11,46,79,.035);
    border-left-color: rgba(22,104,179,.3);
    margin-right: 10px;
    border-radius: 0 8px 8px 0;
}

.crm-side::-webkit-scrollbar { width: 8px; }
.crm-side::-webkit-scrollbar-thumb { background: #cddced; border-radius: 4px; }
.crm-side::-webkit-scrollbar-track { background: transparent; }

/* ---- topbar ------------------------------------------------------ */
.crm-topbar {
    background: #fff;
    border-bottom: 1px solid var(--gw-line);
}
.crm-topbar__title {
    color: var(--gw-ink);
    font-weight: 700;
    letter-spacing: -.4px;
}

.gw-top__link { color: var(--gw-ink-soft); }
.gw-top__link:hover { color: var(--gw-accent); }
.gw-bell { color: var(--gw-ink-soft); }
.gw-bell .badge { background: var(--gw-cta) !important; }

/* ---- type -------------------------------------------------------- */
.crm-page h1, .crm-page h2, .crm-page h3,
.crm-page h4, .crm-page h5, .crm-page h6,
.crm-card__title { color: var(--gw-ink); letter-spacing: -.2px; }
.crm-page h1 { font-weight: 700; }
.crm-page a { color: var(--gw-accent); }
.crm-page a:hover { color: var(--gw-accent-dark); }

/* ---- cards: white, soft shadow, generous radius ------------------ */
.crm-card,
.crm-page .card,
.crm-page .panel {
    border: 1px solid var(--gw-line);
    border-radius: var(--gw-radius);
    box-shadow: var(--gw-shadow);
}
.crm-page .card-header,
.crm-page .panel-heading {
    background: #fff;
    border-bottom: 1px solid var(--gw-line-soft);
    color: var(--gw-ink);
    border-radius: var(--gw-radius) var(--gw-radius) 0 0;
}

/* ---- tables ------------------------------------------------------ */
.crm-page table.table > thead > tr > th,
.crm-page .card table > tbody > tr > th,
.crm-page .dataTable thead th {
    background: #fff;
    color: var(--gw-ink-soft);
    border-bottom: 1px solid var(--gw-line);
}
.crm-page table.table > tbody > tr > td,
.crm-page .card table > tbody > tr > td,
.crm-page .dataTable tbody td { border-bottom: 1px solid var(--gw-line-soft); }
.crm-page .card table > tbody > tr:hover > td { background: var(--gw-wash-a); }
.crm-page .evenbgcolor > td { background: #FBFDFF; }

/* ---- buttons -----------------------------------------------------
   Blue is the primary action. Orange is the call to action and is
   deliberately not wired to .btn-primary - 111 pages use that class
   and the portal would turn orange. Add .btn-cta where you want it.  */
.crm-page .btn { border-radius: 9px; }
.crm-page .btn-primary,
.crm-page .btn-primary:focus {
    background: var(--gw-accent); border-color: var(--gw-accent); color: #fff;
}
.crm-page .btn-primary:hover { background: var(--gw-accent-dark); border-color: var(--gw-accent-dark); }

.crm-page .btn-secondary, .crm-page .btn-default {
    background: #fff; border-color: var(--gw-line); color: var(--gw-ink);
}
.crm-page .btn-secondary:hover, .crm-page .btn-default:hover { background: var(--gw-wash-a); }

.btn-cta, .crm-page .btn-cta {
    background: var(--gw-cta); border-color: var(--gw-cta); color: #fff;
    border-radius: 999px; padding: 9px 20px; font-weight: 600;
    box-shadow: 0 3px 10px rgba(242,104,60,.28);
}
.btn-cta:hover, .crm-page .btn-cta:hover {
    background: var(--gw-cta-dark); border-color: var(--gw-cta-dark); color: #fff;
}

/* ---- pills, like the document chips on the site ------------------ */
.crm-page .badge, .gw-pill {
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: .02em;
}
.gw-pill {
    display: inline-block; padding: 5px 13px;
    background: #fff; border: 1px solid var(--gw-line);
    color: var(--gw-accent); font-size: 11.5px; text-transform: uppercase;
}

/* ---- inputs ------------------------------------------------------ */
.crm-page .form-control, .crm-page input[type=text], .crm-page input[type=password],
.crm-page input[type=email], .crm-page select, .crm-page textarea {
    border-color: var(--gw-line);
    border-radius: 9px;
    color: var(--gw-ink);
}
.crm-page .form-control:focus, .crm-page input:focus,
.crm-page select:focus, .crm-page textarea:focus {
    border-color: var(--gw-accent);
    box-shadow: 0 0 0 3px var(--gw-accent-wash);
}
.crm-page label { color: var(--gw-ink-soft); }

/* ---- mobile ------------------------------------------------------ */
@media (max-width: 900px) {
    .crm-side { border-right: 0; border-bottom: 1px solid var(--gw-line); }
    .crm-side__item, #sidebarnav li > a { margin-right: 0; border-radius: 0; }
}

/* ---- topbar: compact ---------------------------------------------
   The first version stacked full-text links, three flags and a user
   button at 18px padding, which made a tall, busy strip. One short
   row, icon-first, with dividers between the groups.                 */
.crm-topbar {
    padding: 0 22px;
    min-height: 52px;
    gap: 16px;
}
.crm-topbar__title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.crm-topbar__user { gap: 6px; }

.gw-top__sep {
    width: 1px;
    height: 20px;
    background: var(--gw-line);
    margin: 0 4px;
    flex: none;
}

/* icon-first action in the topbar */
.gw-top__act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 30px;
    min-width: 30px;
    padding: 0 8px;
    border: 0;
    background: transparent;
    color: var(--gw-ink-soft);
    font-size: 12.5px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
}
.gw-top__act:hover { background: var(--gw-accent-wash); color: var(--gw-accent); }
.gw-top__act i { font-size: 14px; }

/* on a narrow window the labels go, the icons stay */
@media (max-width: 1100px) {
    .gw-top__act .gw-top__label { display: none; }
}

.gw-top__flags {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 4px;
    background: var(--gw-wash-a);
    border: 1px solid var(--gw-line);
    border-radius: 8px;
}
.gw-top__flags input[type=image] {
    height: 14px;
    opacity: .6;
    padding: 3px;
    border-radius: 5px;
    transition: opacity .12s, background .12s;
}
.gw-top__flags input[type=image]:hover { opacity: 1; background: #fff; }

.gw-bell { position: relative; display: inline-flex; }
.gw-bell .badge {
    position: absolute; top: -4px; right: -6px;
    font-size: 9.5px; padding: 2px 5px; line-height: 1.1;
}

.crm-topbar__dropdown .btn {
    border-radius: 8px;
    border-color: var(--gw-line);
    color: var(--gw-ink);
    font-size: 12.5px;
    padding: 5px 11px;
}
.crm-topbar__dropdown .btn:hover { background: var(--gw-wash-a); }

/* ---- sidebar scrolling -------------------------------------------
   The menu list is its own scroll area: logo and footer stay put, and
   the wheel scrolls the menu however long it gets. Old template CSS/JS
   (style.css, slimScroll) could leave the whole sidebar unscrollable. */
@media (min-width: 901px) {
    .crm-side      { height: 100vh; overflow: hidden !important; }
    .crm-side__nav { flex: 1 1 auto; min-height: 0; overflow-y: auto !important;
                     overscroll-behavior: contain; }
    .crm-side__brand, .crm-side__foot { flex: none; }
}