/* ============================================================================
   Industry design system — CRM adaptation
   ----------------------------------------------------------------------------
   Source of truth: fonts/industry-Design-System/styles.css + readme.md, with
   the type scale, sidebar and status-tone convention below retuned to match
   the concrete values used in fonts/Own-Industry-Design-ON-CRM/Campaign
   Engine.dc.html — an actual applied mockup of this system on this app.
   Steel-blue on a light technical ground. Barlow Condensed headings over
   Barlow. Modular grid. Cards, figures and buttons framed as blueprint
   objects: square-cornered, hairline-bordered, with "+" registration marks.
   The primary button is the one solid object on the board.

   Loaded from Views/Shared/_Layout.cshtml's <head>, so every authenticated
   page in the app gets this foundation (Auth/Login and Auth/Index run
   Layout = null and are the one deliberate exception). It is linked after
   Bootstrap and the CDN component CSS, which is what lets the component
   overrides below win without !important. A page's own local <style> block
   (most of the larger dashboards have one) still renders later inside
   RenderBody and keeps overriding this until that page gets its own pass —
   so linking this globally does not instantly rewrite every page's fine
   detail, only the pages/components that had no local override of their own.

   Two deviations from the upstream system, both deliberate:
     1. Industry's component layer names (.btn .card .table .input .nav .tag)
        collide with Bootstrap's. Copying them verbatim would fight Bootstrap,
        so Bootstrap's own classes are restyled to the Industry look instead.
        Only the non-colliding primitives (.blueprint .corner .duotone) are
        taken as-is.
     2. Industry is a mono palette ("no decorative color beyond the steel
        accent"). A CRM cannot encode overdue / won / lost that way, so a
        --status-* family is added below, desaturated to sit with the steel.
   ========================================================================== */

/* ── Tokens — verbatim from the system's styles.css ─────────────────────── */
:root {
  --color-bg: #f2f2f3;
  --color-surface: #e9e9ea;
  --color-text: #1d1f20;
  /* Primary/main color, set by the user 2026-09-07 to #1d2d3d -- the same
     value already used as --color-accent-900, the ramp's darkest step (see
     07/09). The --color-accent-100..800 tint/shade steps below are NOT
     regenerated around this new base; they still derive from the original
     #5980a6 seed and remain a usable, complete ramp on their own, but no
     longer relate to --color-accent by the original smooth OKLCH math.
     Revisit once this is visually confirmed live. */
  --color-accent: #1d2d3d;
  --color-accent-2: #728fab;
  --color-divider: color-mix(in srgb, #1d1f20 16%, transparent);

  /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
  --color-neutral-100: #f5f5f8;
  --color-neutral-200: #e7e7ea;
  --color-neutral-300: #d4d4d7;
  --color-neutral-400: #b7b7ba;
  --color-neutral-500: #98989b;
  --color-neutral-600: #7a7a7d;
  --color-neutral-700: #5d5d60;
  --color-neutral-800: #424244;
  --color-neutral-900: #2b2b2d;

  --color-accent-100: #eef6ff;
  --color-accent-200: #d6ebff;
  --color-accent-300: #b5d9fd;
  --color-accent-400: #94bce3;
  --color-accent-500: #749dc4;
  --color-accent-600: #597ea3;
  --color-accent-700: #416180;
  --color-accent-800: #2c455d;
  --color-accent-900: #1d2d3d;

  --color-accent-2-100: #eef6ff;
  --color-accent-2-200: #d6ebff;
  --color-accent-2-300: #bdd8f2;
  --color-accent-2-400: #9ebbd8;
  --color-accent-2-500: #7e9cb8;
  --color-accent-2-600: #627d98;
  --color-accent-2-700: #486077;
  --color-accent-2-800: #314457;
  --color-accent-2-900: #1f2d3a;

  --font-heading: "Barlow Condensed", system-ui, sans-serif;
  --font-heading-weight: 600;
  --font-body: "Barlow", system-ui, sans-serif;

  --space-1: 3.4px;
  --space-2: 6.8px;
  --space-3: 10.2px;
  --space-4: 13.6px;
  --space-6: 20.4px;
  --space-8: 27.2px;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 7px;

  /* Elevation — derived from the ground: soft ink-tinted shadows on a
     light theme, a hairline edge + ambient darkness on a dark one. */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2b2b2d 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2b2b2d 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2b2b2d 22%, transparent);
}

/* ── Status extension — the one role the mono system does not carry ───────
   Hues kept recognisable but pulled toward the steel so they read as members
   of the palette rather than stickers on it. Each carries a -bg tint for
   badge fills and a -fg deep step for text sitting on that tint (the tint is
   too light to take the base color as body-size text). ───────────────────── */
:root {
  --status-win: #3f7d5a;
  --status-win-bg: #e4eee8;
  --status-win-fg: #2a5540;

  --status-lose: #a04f4a;
  --status-lose-bg: #f3e7e6;
  --status-lose-fg: #6f3633;

  --status-warning: #a8783c;
  --status-warning-bg: #f4ece0;
  --status-warning-fg: #6f4e24;

  --status-new: var(--color-accent-500);
  --status-new-bg: var(--color-accent-100);
  --status-new-fg: var(--color-accent-800);

  --status-qualified: var(--status-win);
  --status-proposal: var(--color-accent);
  --status-contracted: var(--color-accent-700);

  /* Muted ink, used constantly by the sweep for secondary/tertiary copy. */
  --ink-70: color-mix(in srgb, var(--color-text) 70%, transparent);
  --ink-55: color-mix(in srgb, var(--color-text) 55%, transparent);
  --ink-40: color-mix(in srgb, var(--color-text) 40%, transparent);
  /* Wash tints used for hovers and pressed states on neutral surfaces. */
  --wash-4: color-mix(in srgb, var(--color-text) 4%, transparent);
  --wash-7: color-mix(in srgb, var(--color-text) 7%, transparent);
  --wash-14: color-mix(in srgb, var(--color-text) 14%, transparent);
}

/* ── Bootstrap variable bridge ───────────────────────────────────────────
   _Layout.cshtml's own :root block (in its <head> <style>) now sets these to
   the SAME tokens, redundantly — that block runs after this stylesheet in
   document order, so it would win regardless, but both being correct means
   neither can drift from the other by editing just one. */
:root {
  --bs-font-sans-serif: var(--font-body);
  --bs-body-font-family: var(--font-body);
  --bs-primary: var(--color-accent);
  --bs-primary-rgb: 89, 128, 166;
  --bs-body-bg: var(--color-bg);
  --bs-body-color: var(--color-text);
  --bs-card-bg: transparent;
  --bs-text-muted: var(--ink-55);
  --bs-heading-color: var(--color-text);
  --bs-border-color: var(--color-divider);
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --bs-link-color: var(--color-accent-700);
  --bs-link-hover-color: var(--color-accent-800);
}

/* ── Base type ───────────────────────────────────────────────────────────
   This scale is NOT the generic Industry readme's (h1 42/h2 32/h3 25/h4 20)
   — it's retuned to the concrete sizes used throughout
   fonts/Own-Industry-Design-ON-CRM/Campaign Engine.dc.html, a real applied
   mockup of this system on this app: body text runs 12-13px almost
   everywhere, h2 (30px) is the largest heading actually used — there is no
   h1 in that reference, so h1 here is extrapolated one step up. Loaded
   globally (see _Layout.cshtml's <head>), so this is the default for every
   page; a page with its own heavier local CSS (the admin dashboard, SDR,
   Manager, ...) keeps overriding it there until that page gets its own pass. */
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.55;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  color: var(--color-text);
  line-height: 1.12;
  letter-spacing: -0.015em;
}
h1 { font-size: 34px; }
h2 { font-size: 30px; }
h3 { font-size: 24px; }
h4 { font-size: 19px; }
h5 { font-size: 15px; }
h6 { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }

a { color: var(--color-accent-700); text-underline-offset: 3px; }

/* Interaction states are themed, never browser defaults. */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* ── Blueprint frame — taken verbatim; these names do not collide ───────── */
.blueprint {
  position: relative;
  border: 1px solid var(--color-divider);
  border-radius: 0;
}
.blueprint.duotone { overflow: visible; }
.blueprint > .corner {
  position: absolute; width: 11px; height: 11px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.blueprint > .corner::before, .blueprint > .corner::after {
  content: ""; position: absolute; background: currentColor;
}
.blueprint > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.blueprint > .corner::after  { top: 5px; left: 0; width: 100%; height: 1px; }
.blueprint > .corner.tl { top: -6px; left: -6px; }
.blueprint > .corner.tr { top: -6px; right: -6px; }
.blueprint > .corner.bl { bottom: -6px; left: -6px; }
.blueprint > .corner.br { bottom: -6px; right: -6px; }

.duotone { position: relative; overflow: hidden; }
.duotone::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--color-accent); mix-blend-mode: color;
}

/* ── Registration marks ──────────────────────────────────────────────────
   The "+" marks every framed object wears. Drawn CSS-only: two pseudo-
   elements, each painting two marks with gradients. The markup route (four
   <i class="corner"> per card) would mean touching ~40 static cards AND every
   JS template that builds one; this themes both for free.

   FIXED 2026-09-07: an earlier version of this rule drew the marks 5px
   INSET, entirely inside the border box. That doesn't match the reference
   system (fonts/industry-Design-System/styles.css:83-95), which centers each
   11x11 mark ON the corner itself via a -6px offset -- half outside the box,
   half inside, the actual "registration mark straddling an edge" look. The
   inset version read as a "+" floating inside the content rather than
   framing the box, confirmed against live screenshots. This block now
   matches the reference's offset exactly (see 07/09 for the finding). */
.ind-marks, .crm-card { position: relative; }
.ind-marks::before, .ind-marks::after,
.crm-card::before, .crm-card::after {
  content: "";
  position: absolute;
  left: -6px; right: -6px;
  height: 11px;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--ind-mark) 0 0), linear-gradient(var(--ind-mark) 0 0),
    linear-gradient(var(--ind-mark) 0 0), linear-gradient(var(--ind-mark) 0 0);
  background-size: 1px 11px, 11px 1px, 1px 11px, 11px 1px;
  /* Right-edge marks anchored with the 4-value right/top syntax rather than
     calc(100% - 5px)/100% -- equivalent math, but on very wide containers
     (e.g. a full-bleed header card) calc() mixing % and px in
     background-position can round against a slightly stale layout width and
     silently drop the right-side mark. Edge keywords don't have that
     failure mode. See 07/09 for the finding (Lead/Pipeline.cshtml header
     card was missing its right-side "+"). */
  background-position: 5px 0, 0 5px, right 5px top 0, right 0 top 5px;
  --ind-mark: color-mix(in srgb, var(--color-text) 45%, transparent);
}
.ind-marks::before, .crm-card::before { top: -6px; }
.ind-marks::after,  .crm-card::after  { bottom: -6px; }

/* Known exception: a handful of scroll/collapse containers on
   Dashboard/Index.cshtml clip anything drawn outside their own box
   (#activitiesPane, #nextActionPane, #activitiesCollapseBody,
   .collapsible-body ...). A card framed by one of those needs its marks
   pulled back inside so they aren't silently cropped -- add `.ind-marks-inset`
   alongside `.crm-card`/`.ind-marks` on any card inside such a container. */
.ind-marks-inset::before, .ind-marks-inset::after {
  left: 0; right: 0;
}
.ind-marks-inset::before { top: 0; }
.ind-marks-inset::after  { bottom: 0; }

/* ── Tags / chips — prefixed, since .tag is already taken on this page ──── */
.ind-tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px; border-radius: 0;
}
.ind-tag-accent  { background: var(--color-accent-100); color: var(--color-accent-800); }
.ind-tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.ind-tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent-700); }
.ind-tag-win     { background: var(--status-win-bg); color: var(--status-win-fg); }
.ind-tag-lose    { background: var(--status-lose-bg); color: var(--status-lose-fg); }
.ind-tag-warning { background: var(--status-warning-bg); color: var(--status-warning-fg); }

/* ── Bootstrap components, restyled to the Industry look ────────────────── */

/* Square everything the system frames as a blueprint object. Avatars and
   count badges keep their circle: they are conventional affordances, and
   squaring them reads as a bug rather than as blueprint. */
.btn, .card, .modal-content, .dropdown-menu, .offcanvas,
.form-control, .form-select, .input-group-text, .alert, .list-group,
.list-group-item, .accordion-item, .progress, .toast, .popover {
  border-radius: 0;
}

.btn {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 14px;
  line-height: 1.2;
  border: 1px solid var(--color-divider);
  color: var(--color-text);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn:disabled, .btn.disabled { opacity: 0.45; }

/* The primary button is the one solid object on the board. */
.btn-primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
}
/* Hover/active use color-mix() off --color-accent itself, not the
   accent-600/700 ramp steps -- those are now LIGHTER than the new #1d2d3d
   base, which read as an odd "hover lightens dramatically" jump rather than
   the usual subtle emphasis shift. */
.btn-primary:hover  { background: color-mix(in srgb, var(--color-accent) 85%, white); border-color: color-mix(in srgb, var(--color-accent) 85%, white); color: var(--color-bg); }
.btn-primary:active,
.btn-primary:focus  { background: color-mix(in srgb, var(--color-accent) 85%, black); border-color: color-mix(in srgb, var(--color-accent) 85%, black); color: var(--color-bg); }

.btn-secondary, .btn-light, .btn-outline-secondary {
  background: transparent;
  border-color: var(--color-divider);
  color: var(--color-text);
}
.btn-secondary:hover, .btn-light:hover, .btn-outline-secondary:hover  { background: var(--wash-7); color: var(--color-text); border-color: var(--color-divider); }
.btn-secondary:active, .btn-light:active, .btn-outline-secondary:active { background: var(--wash-14); color: var(--color-text); }

.btn-outline-primary { border-color: var(--color-accent); color: var(--color-accent-700); background: transparent; }
.btn-outline-primary:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); color: var(--color-accent-800); border-color: var(--color-accent); }

.btn-link { color: var(--color-accent-700); border-color: transparent; }

.btn-danger  { background: var(--status-lose); border-color: var(--status-lose); color: var(--color-bg); }
.btn-success { background: var(--status-win); border-color: var(--status-win); color: var(--color-bg); }
.btn-warning { background: var(--status-warning); border-color: var(--status-warning); color: var(--color-bg); }

/* Cards are transparent line drawings, never soft filled rounded blocks. */
.card {
  background: transparent;
  border: 1px solid var(--color-divider);
  box-shadow: none;
}
.card-header, .card-footer {
  background: transparent;
  border-color: var(--color-divider);
}

/* Form controls sit on the surface tone with a hairline edge. */
.form-control, .form-select {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 14px;
}
.form-control:hover, .form-select:hover { border-color: var(--ink-40); }
.form-control:focus, .form-select:focus {
  background: var(--color-surface);
  border-color: var(--color-accent);
  color: var(--color-text);
  box-shadow: none;
}
.form-control::placeholder { color: var(--ink-40); }
.form-check-input:checked { background-color: var(--color-accent); border-color: var(--color-accent); }
.form-check-input:focus { border-color: var(--color-accent); box-shadow: none; }

/* Tables: themed header rule and row rules, no zebra fill. */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--color-text);
  color: var(--color-text);
  font-size: 14px;
  border-color: var(--color-divider);
}
.table > thead > tr > th {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  background: transparent;
  border-bottom: 1px solid var(--color-divider);
}
.table > tbody > tr > td {
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}
.table > tbody > tr:hover > * { background: var(--wash-4); }

/* Overlays sit at the top elevation on the ground, not on white. */
.modal-content, .offcanvas {
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  box-shadow: var(--shadow-lg);
}
.modal-header, .modal-footer, .offcanvas-header {
  border-color: var(--color-divider);
}
.modal-title, .offcanvas-title {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
}
.modal-backdrop.show { background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent); opacity: 1; }

.dropdown-menu {
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  box-shadow: var(--shadow-md);
  padding: var(--space-1);
}
.dropdown-item { border-radius: 0; color: var(--color-text); font-size: 14px; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--wash-7); color: var(--color-text); }
.dropdown-item.active, .dropdown-item:active { background: var(--color-accent); color: var(--color-bg); }
.dropdown-divider { border-color: var(--color-divider); }

/* Badges: square like tags, but count pills stay round. */
.badge { border-radius: 0; font-weight: 500; letter-spacing: 0.02em; }
.badge.rounded-pill { border-radius: 999px; }
.bg-primary { background-color: var(--color-accent) !important; }
.bg-success { background-color: var(--status-win) !important; }
.bg-danger  { background-color: var(--status-lose) !important; }
.bg-warning { background-color: var(--status-warning) !important; }
.text-primary   { color: var(--color-accent-700) !important; }
.text-success   { color: var(--status-win-fg) !important; }
.text-danger    { color: var(--status-lose-fg) !important; }
.text-warning   { color: var(--status-warning-fg) !important; }
.text-info      { color: var(--color-accent-2-700) !important; }
.text-secondary { color: var(--ink-70) !important; }
.text-muted     { color: var(--ink-55) !important; }

.spinner-border { border-color: var(--color-accent); border-right-color: transparent; }

/* ══════════════════════════════════════════════════════════════════════════
   _Layout.cshtml chrome — navbar, search, dropdowns, avatar.
   Overridden only while the dashboard is open, because this sheet is only
   linked from Views/Dashboard/Index.cshtml. Every selector below mirrors one
   in _Layout.cshtml's inline <style> (:36-736) and wins on document order.
   ══════════════════════════════════════════════════════════════════════ */

.layout-navbar {
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-divider);
}
.layout-navbar a { color: var(--color-text); }

.search-input-group {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: 0;
  color: var(--ink-55);
  transition: border-color 0.15s ease;
}
.search-input-group:hover { border-color: var(--ink-40); }
.search-input-group i { color: var(--ink-40); }
.search-input { color: var(--color-text); font-family: var(--font-body); }
.search-input::placeholder { color: var(--ink-40); }

.quick-add-btn {
  border: 1px solid var(--color-divider);
  border-radius: 0;
  background: transparent;
  color: var(--color-text);
}
.quick-add-btn:hover {
  color: var(--color-accent-700);
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
}

.nav-link-icon { color: var(--color-neutral-800); border-radius: 0; }
.nav-link-icon:hover { color: var(--color-text); background-color: var(--wash-7); }

/* Avatar keeps its circle — a conventional affordance, not a blueprint box. */
.avatar-initials {
  background-color: var(--color-accent);
  color: var(--color-bg);
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
}
.avatar-online::after { background-color: var(--status-win); border-color: var(--color-bg); }

/* Global search overlay */
#globalSearchDropdown {
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  border-radius: 0;
  box-shadow: var(--shadow-lg);
}
.search-overlay { background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent); }
.search-header { border-bottom: 1px solid var(--color-divider); }
.search-header i { color: var(--ink-55); }
#innerSearchInput { color: var(--color-text); font-family: var(--font-body); }
#innerSearchInput::placeholder { color: var(--ink-40); }
.section-label { color: var(--color-text); letter-spacing: 0.08em; }
.quick-access-btn, .filter-btn {
  border: 1px solid var(--color-divider);
  border-radius: 0;
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-body);
}
.quick-access-btn:hover, .filter-btn:hover {
  border-color: var(--ink-40);
  background: var(--wash-7);
  color: var(--color-text);
}
.search-result-item { border-radius: 0; }
.search-result-item:hover, .search-result-item.active { background: var(--wash-7); }
.search-result-icon { border-radius: 0; }
.search-result-icon.type-Lead,     .search-result-badge.type-Lead     { background: var(--color-accent-100); color: var(--color-accent-800); }
.search-result-icon.type-Contact,  .search-result-badge.type-Contact  { background: var(--status-win-bg); color: var(--status-win-fg); }
.search-result-icon.type-Activity, .search-result-badge.type-Activity { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.search-result-icon.type-Page,     .search-result-badge.type-Page     { background: var(--color-neutral-200); color: var(--color-neutral-800); }
.search-result-badge { border-radius: 0; letter-spacing: 0.08em; }
.search-result-title { color: var(--color-text); }
.search-result-desc  { color: var(--ink-55); }
.search-empty-state, .search-loading { color: var(--ink-40); }

/* Notification / inbox / company dropdowns */
.notification-item, .company-item { border-bottom: 1px solid var(--color-divider); }
.notification-item:hover, .company-item:hover { background-color: var(--wash-4); }
.notification-item.unread { background-color: var(--color-accent-100); }
.notification-item.deadline-missed {
  background-color: var(--status-lose-bg) !important;
  border-left: 4px solid var(--status-lose);
}
.notification-item.deadline-missed .notification-title { color: var(--status-lose-fg) !important; }
.notif-cross { color: var(--status-lose); }
.notification-title, .company-name { color: var(--color-text); font-family: var(--font-heading); font-weight: var(--font-heading-weight); }
.notification-message, .company-role { color: var(--ink-55); }
.notification-time { color: var(--ink-40); }
.company-item.active { background-color: var(--color-accent-100); border-left: 3px solid var(--color-accent); }
.default-badge { background-color: var(--color-accent); color: var(--color-bg); border-radius: 0; }
.set-default-btn:hover { color: var(--color-accent); }
.company-logo { border-radius: 0; background-color: var(--color-surface); }

/* Push toasts */
.push-toast {
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  border-left: 4px solid var(--color-accent);
  border-radius: 0;
  box-shadow: var(--shadow-md);
}
.push-toast.toast-critical, .push-toast.toast-high {
  border-left-color: var(--status-lose);
  background: var(--status-lose-bg);
}
.push-toast.toast-medium { border-left-color: var(--color-accent); }
.push-toast-title { color: var(--color-text); font-family: var(--font-heading); font-weight: var(--font-heading-weight); }
.push-toast-message { color: var(--ink-55); }
.push-toast-close { color: var(--ink-40); }
.push-toast-close:hover { color: var(--status-lose); }
.push-toast.toast-critical .push-toast-close { color: var(--status-lose); }

/* Mobile nav chips */
.mobile-nav-links { background: var(--color-bg); border-bottom: 1px solid var(--color-divider); }
.mobile-nav-link {
  border: 1px solid var(--color-divider);
  border-radius: 0;
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
}
.mobile-nav-link:hover, .mobile-nav-link:focus {
  color: var(--color-text);
  border-color: var(--ink-40);
  background: var(--wash-7);
}

/* The Industry left-rail sidebar (.ind-sidebar/.ind-side-*) was removed
   entirely, per request — desktop navigation now goes through the search
   bar's Quick Access panel in _Layout.cshtml (#quickAccessPanel), which
   already lists every link the rail used to. */

/* ══════════════════════════════════════════════════════════════════════════
   Status tone — the reference's convention for naming a status's color, used
   for STATUS_TONE / MEMBER_TONE in Campaign Engine.dc.html: a bg/fg pair per
   named status, badge-shaped (uppercase, tracked, square, 2px/8-9px pad).
   This is the SHARED CONVENTION, not yet wired to any specific module's
   status field — a later per-module pass adds the ind-tone-* modifier that
   matches that module's actual status names (Lead stage, Deal stage,
   Campaign status, ...). Kept here so every module reaches for the same
   handful of tones instead of inventing its own per screen. ══════════════ */
.ind-status {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 9px;
  border: 1px solid transparent;
  white-space: nowrap;
}
/* Solid — the record is in its active/leading state (Running, In Progress). */
.ind-tone-solid    { background: var(--color-accent); color: var(--color-bg); border-color: var(--color-accent); }
/* Tinted — a settled positive/neutral state (Scheduled, Engaged, Qualified). */
.ind-tone-tint      { background: var(--color-accent-200); color: var(--color-accent-800); border-color: var(--color-accent-200); }
/* Muted fill — closed/completed, no action needed (Completed, Converted). */
.ind-tone-muted     { background: var(--color-neutral-300); color: var(--color-neutral-900); border-color: var(--color-neutral-300); }
/* Outline — inactive/waiting, nothing to react to yet (Draft, Paused, New). */
.ind-tone-outline   { background: transparent; color: var(--ink-70); border-color: var(--color-divider); }
/* Semantic — the three outcomes a CRM cannot afford to lose to the mono
   palette: won, lost, needs-attention. */
.ind-tone-win       { background: var(--status-win-bg); color: var(--status-win-fg); border-color: var(--status-win-bg); }
.ind-tone-lose      { background: var(--status-lose-bg); color: var(--status-lose-fg); border-color: var(--status-lose-bg); }
.ind-tone-warning   { background: var(--status-warning-bg); color: var(--status-warning-fg); border-color: var(--status-warning-bg); }

/* ══════════ SweetAlert2 — base theme ═══════════════════════════════════
   Promoted here (rather than re-authored per page) because it is shared by
   37 files (see Frontend-Industry-Design-Specs/04). Closes the "unreviewed
   vendor default" gap flagged in 07-known-issues-and-exceptions-register.md
   -- confirmed via direct search that no theme override existed anywhere in
   the codebase before this. Each affected page keeps its own
   `.swal-on-top { z-index: 99999 !important; }` stacking fix; only the
   *theme* moves here, since z-index needs are page-specific. */
.swal2-popup {
  background: var(--color-bg) !important;
  border: 1px solid var(--color-divider) !important;
  border-radius: 0 !important;
  box-shadow: var(--shadow-lg) !important;
  font-family: var(--font-body) !important;
}
.swal2-title { font-family: var(--font-heading) !important; font-weight: var(--font-heading-weight) !important; color: var(--color-text) !important; }
.swal2-html-container { color: var(--color-text) !important; }
.swal2-actions .swal2-confirm {
  background: var(--color-accent) !important;
  border: 1px solid var(--color-accent) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--font-heading) !important;
}
.swal2-actions .swal2-confirm:focus { box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 30%, transparent) !important; }
.swal2-actions .swal2-cancel, .swal2-actions .swal2-deny {
  background: transparent !important;
  border: 1px solid var(--color-divider) !important;
  border-radius: 0 !important;
  color: var(--color-text) !important;
  box-shadow: none !important;
  font-family: var(--font-heading) !important;
}
.swal2-icon.swal2-success { border-color: var(--status-win) !important; color: var(--status-win) !important; }
.swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: var(--status-win) !important; }
.swal2-icon.swal2-success .swal2-success-ring { border-color: color-mix(in srgb, var(--status-win) 30%, transparent) !important; }
.swal2-icon.swal2-error { border-color: var(--status-lose) !important; color: var(--status-lose) !important; }
.swal2-icon.swal2-error [class^='swal2-x-mark-line'] { background-color: var(--status-lose) !important; }
.swal2-icon.swal2-warning { border-color: var(--status-warning) !important; color: var(--status-warning) !important; }

/* ══════════ toastr — base theme ═════════════════════════════════════════
   Promoted here for the same reason SweetAlert2's theme was: confirmed via
   direct search that no override existed anywhere in the codebase before
   this, despite the vendor stylesheet being loaded on 20+ pages. Toastr's
   own CSS is typically linked from inside each page's own markup (not
   _Layout.cshtml's <head>), so it loads AFTER industry.css in document
   order -- `!important` is required to win regardless of that. */
.toast-top-right, .toast-bottom-right, .toast-top-left, .toast-bottom-left,
.toast-top-center, .toast-bottom-center, .toast-top-full-width, .toast-bottom-full-width {
  font-family: var(--font-body) !important;
}
#toast-container > div {
  border-radius: 0 !important;
  box-shadow: var(--shadow-md) !important;
  opacity: 1 !important;
}
#toast-container > div:hover { box-shadow: var(--shadow-lg) !important; }
.toast-title { font-family: var(--font-heading) !important; font-weight: var(--font-heading-weight) !important; }
.toast-message { font-family: var(--font-body) !important; }
.toast-success { background-color: var(--status-win) !important; color: var(--color-bg) !important; }
.toast-error   { background-color: var(--status-lose) !important; color: var(--color-bg) !important; }
.toast-warning { background-color: var(--status-warning) !important; color: var(--color-bg) !important; }
.toast-info    { background-color: var(--color-accent) !important; color: var(--color-bg) !important; }

/* ══════════ .ind-field / .ind-hover-danger — themed control states ═════════
   Promoted from Dashboard/Index.cshtml (its own page-local copy, written to
   replace hand-rolled onfocus/onblur/onmouseover hex assignments) into the
   shared sheet during Lead/Index.cshtml's migration, which hit the same
   need: several compact form inputs had `outline: none` with zero
   replacement focus indicator at all -- a real rule-10 violation, not the
   documented compact-input exception (which always pairs the suppression
   with a border-color change). Apply `.ind-field` to any bare <input>/
   <textarea> a migration finds in that state instead of re-deriving this
   per page. */
.ind-field {
  border: 1px solid var(--color-divider);
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.ind-field:hover { border-color: var(--ink-40); }
.ind-field:focus {
  border-color: var(--color-accent);
  background: var(--color-bg);
  outline: none;
}
.ind-field:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.ind-hover-danger { transition: background 0.15s ease; }
.ind-hover-danger:hover  { background: var(--status-lose-fg) !important; }
.ind-hover-danger:active { background: var(--status-lose-fg) !important; }

/* ══════════ Campaign Engine primitives ═══════════════════════════════════
   Shared utility primitives promoted from Resources/campaign-crm/Campaign
   Engine.dc.html's per-screen <style> blocks so their Razor ports can stop
   re-declaring identical rules on every page. Values are taken verbatim
   from the mockup helmet (36px field target height, 6-col KPI grid, the
   chip/tab/status pill conventions) and fill in the gaps industry.css's own
   primitives already covered (blueprint frames, buttons, status tones). */
.vfield { display: flex; align-items: center; min-height: 36px; padding: 6px 10px; font-size: 14px; background: var(--color-surface); border: 1px solid var(--color-divider); }
.vfield.sel { cursor: pointer; }
.vfield.sel::after { content: ""; margin-left: auto; margin-right: -4px; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid color-mix(in srgb, var(--color-text) 45%, transparent); }
.lbl  { display: block; font-size: 12px; margin-bottom: 5px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.g2   { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.note { margin-top: 14px; font-size: 11px; line-height: 1.6; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.chip  { font-size: 12px; padding: 4px 11px; cursor: pointer; border: 1px solid var(--color-divider); color: color-mix(in srgb, var(--color-text) 70%, transparent); background: transparent; }
.chip:hover { color: var(--color-text); }
.chip.on { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-bg); }
.chiprow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.seg { display: inline-flex; align-items: stretch; overflow: hidden; border: 1px solid var(--color-divider); background: var(--color-surface); }
.seg-opt { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 13px; cursor: pointer; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:hover { color: var(--color-text); }
/* 6-col KPI grid — border-left on every cell except the first of each row,
   border-top on the second row onward (matches the mockup's s_list/
   s_detail metric strip). */
.kpi-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.kpi-grid > * { padding: 12px 13px 14px; border-left: 1px solid color-mix(in srgb, var(--color-text) 9%, transparent); }
.kpi-grid > *:nth-child(6n+1) { border-left: none; }
.kpi-grid > *:nth-child(n+7)  { border-top: 1px solid color-mix(in srgb, var(--color-text) 9%, transparent); }
.kpi-grid .kpi-num { font-family: var(--font-heading); font-size: 26px; line-height: 1.1; }
.kpi-grid .kpi-lbl { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 2px; }
.kpi-grid .kpi-sub { font-size: 11px; color: color-mix(in srgb, var(--color-text) 50%, transparent); margin-top: 2px; }

/* Blueprint "eyebrow" label above h1/h2 (prototype's s_list header: small
   uppercase code stamp left of the heading). */
.eyebrow { display: block; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 55%, transparent); margin-bottom: 6px; font-family: var(--font-heading); }