/* ============================================================
   v8 component layer — design-system components, defined once.
   Source of truth: docs/v8-theme/design/entire-design-components-foundations/tokens/.
   Naming (Edison's decision): full words, NO prefix (button-primary,
   status-badge) and never a name Bootstrap 3 defines (.btn, .badge,
   .label, .alert).
   NOTHING IS SCOPED. d670a16aa deleted .bsp-v8, so every selector here is
   global on any page that links this sheet — and Header.tpl links it on
   EVERY page, v8 chrome or v7 (the shared ModalFooter renders v8 buttons).
   Component names therefore have to be collision-free by construction, which
   is what the "never a Bootstrap 3 name" rule buys.
   ONE DELIBERATE EXCEPTION: the .dropdown-menu block below restyles markup
   Bootstrap's JS renders (rules §10 layer 3 — DOM v8 does not author). It is
   global too, so v7-chrome pages and ?bootstrap=1 get the v8 menu look.
   ============================================================ */

:root {
  /* Tokens (values verbatim from the design system). :root so body-appended
     widgets (select2-drop, modals) and every layer see them (rules §10 v2).
     SEMANTIC aliases first — the tailwind theme reads these: */
  --accent: #266df0;
  --accent-hover: #1e56dd;
  --accent-ink: #1e56dd;
  --link-ink: #266df0;    /* record links everywhere (lists, related, popups, widgets) */
  --accent-bright: #3d8ffb;
  --accent-soft: #eff5ff;
  --accent-soft-2: #dbeafe;
  --accent-soft-border: #c9defb;
  --primary: var(--accent);            /* semantic aliases — tailwind theme reads these */
  --primary-ink: var(--accent-ink);
  --primary-soft: var(--accent-soft);
  --primary-soft-border: var(--accent-soft-border);
  --ink: #0f172a;
  --ink-1: #1f2937;   /* design tokens/colors.css — headings, primary body */
  --ink-2: #334155;
  --ink-3: #64748b;
  --ink-4: #57534e;
  --muted: #64748b;   /* design tokens/colors.css — muted labels */
  --muted-2: #94a3b8;
  --muted-3: #a3aec2;
  --faint: #cbd5e1;
  --ink-strong: #101112;  /* table headers + filter labels (Attio near-black) */
  --line-soft: #eeeff1;   /* row separators — softer than --line */
  --checkbox-border: rgba(0, 0, 0, 0.22);
  --surface: #ffffff;
  /* Generic control/hover fill is deliberately independent from the page canvas.
     View section headers have their own tokens below, so a background choice no
     longer floods edit/detail/list chrome with the same colour. */
  --fill: #f4f6f8;
  --line: #e5e9ef;
  --list-section-bg: #ffffff;
  --edit-section-bg: #f8fafc;
  --summary-section-bg: #ffffff;
  --detail-section-bg: #ffffff;
  --success: #16a34a; --success-ink: #15803d; --success-soft: #ecfdf5;
  --warning: #d97706; --warning-ink: #b45309; --warning-soft: #fffbeb; --warning-soft-border: #f3d9b1;
  --danger: #dc2626;  --danger-ink: #b91c1c;  --danger-soft: #fef2f2;
  --info: #2563eb;    --info-soft: #eff6ff;
  /* secondary — indigo (Edison), the outlined-button tone one step off the primary */
  --secondary: #4f46e5; --secondary-ink: #4338ca; --secondary-soft: #eef2ff; --secondary-soft-border: #c7cdfa;
  /* the stage funnel's "you are here" fill — a solid marker on a neutral track, a
     different job from a secondary action, so it keeps slate while the buttons don't */
  --stage-current: #475569;

  /* Dashboard chart series — ChartFactory reads these, and so do the widget legends
     that have to match the chart beside them. Changing a series colour is one edit. */
  --chart-1: var(--primary);
  --chart-2: #7c6cf6;
  --chart-3: #00b8a9;
  --chart-4: #f5a623;
  --chart-5: #ef5da8;
  --chart-6: #22c55e;
  --chart-7: #f97316;
  --chart-8: #64748b;
  --chart-9: #0ea5e9;
  --chart-10: #a855f7;
  --purple: #7c3aed;  --purple-ink: #6d28d9;  --purple-soft: #f5f3ff;
  --bg: #f1f0f6;
  --side-bg: #ffffff;
  --side-active: #eff5ff;
  --side-active-ink: #1e56dd;
  --overlay-scrim: rgba(15,23,42,.32);
  --control-h: 34px;    /* compact chrome: toolbar search, filter pills, dashboard footers */
  --input-h: 42px;      /* form + filter controls: inputs, textareas, select2 boxes.
                           ONE knob for every edit form and every advanced-filter row. */
  --topbar-h: 56px;
  --sidebar-w: 248px;
  --sidebar-w-collapsed: 64px;
  --page-max: 1440px;
  --r-xs: 6px;
  --r-sm: 7px;
  --r-md: 8px;
  --r-input: 9px;
  --r-menu: 11px;
  --r-tabs: 13px;
  --r-card-sm: 14px;
  --r-card: 16px; /* D5: Details tab block/Section cards (tokens/radii.css) */
  --r-pill: 999px;
  --sh-card: 0 1px 2px rgba(15,23,42,.03);
  --sh-pop: 0 14px 34px rgba(15,23,42,.15);
  --sh-drawer: -8px 0 30px rgba(15,23,42,.14);
  --sh-modal: 0 24px 60px rgba(15,23,42,.28); /* Round V — dialogs (tokens/shadows.css) */
  --sh-primary: 0 1px 2px rgba(37,99,235,.35);
  --sh-bulk: 0 12px 32px rgba(15,23,42,.30);
  --bulk-chip: #1e293b;      /* selection pill chips (Edison's X1 design) */
  --bulk-chip-ink: #e2e8f0;
  --bulk-danger: #fca5a5;
  --ai-grad: linear-gradient(120deg,#a855f7,#6366f1,#22d3ee); /* Round U — AI action layer (LocalizedTextField.jsx) */
  --ai-match-gradient: linear-gradient(120deg,#8b5cf6,#6366f1,#8b5cf6);
  --ai-ink: #6d4bd8;
  --ai-soft: #f7f6ff;
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ---------- Dropdown menus (Bootstrap-rendered markup — the one restyle, see header) ---------- */

.dropdown-menu {
  border: 1px solid var(--line);
  border-radius: var(--r-menu);
  box-shadow: var(--sh-pop);
  padding: 6px;
}
.dropdown-menu > li > a { border-radius: 8px; padding: 7px 12px; font-size: 13px; color: var(--ink-2); }
.dropdown-menu > li > a:hover { background: var(--fill); color: var(--ink); }

/* ---------- Buttons ---------- */

.button-primary,
.button-ghost,
.button-secondary,
.button-whatsapp,
.button-danger {
  height: var(--control-h);
  display: inline-flex; align-items: center; gap: 7px;
  padding: 0 14px;
  border-radius: var(--r-input);
  border: 1px solid transparent;
  font-family: var(--font-sans);
  font-size: 13px; font-weight: 600; line-height: 1;
  cursor: pointer; white-space: nowrap;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.button-primary { background: var(--accent); color: #fff; box-shadow: var(--sh-primary); }
.button-primary:hover { background: var(--accent-hover); }
.button-ghost { background: var(--surface); border-color: var(--line); color: var(--ink-3); }
.button-ghost:hover { border-color: var(--faint); color: var(--ink-2); }
.button-secondary { background: var(--secondary-soft); border-color: var(--secondary); color: var(--secondary-ink); }
.button-secondary:hover { background: var(--secondary); border-color: var(--secondary); color: var(--surface); }
/* outline-only (Edison): no fill, so it reads as the quietest chip in a row */
.button-whatsapp { background: transparent; border-color: var(--success); color: var(--success-ink); }
.button-whatsapp:hover { background: var(--success-soft); border-color: var(--success); color: var(--success-ink); }

/* Long text clamps to ~12 lines; the checkbox label expands it, pure CSS. */
.clamp-text .clamp-body { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 12; overflow: hidden; }
.clamp-text:has(.clamp-toggle:checked) .clamp-body { display: block; -webkit-line-clamp: unset; }
.clamp-text .clamp-less { display: none; }
.clamp-text:has(.clamp-toggle:checked) .clamp-more { display: none; }
.clamp-text:has(.clamp-toggle:checked) .clamp-less { display: inline; }
.button-danger { background: var(--danger-soft); color: var(--danger-ink); }
.button-danger:hover { background: #fde8e8; }

/* ---------- Status badge (shape; color via modifier or picklist data) ---------- */

.status-badge {
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: var(--r-pill);
  padding: 2px 10px;
  font-size: 12px; font-weight: 600; line-height: 1.5;
  white-space: nowrap;
}
.status-badge-success { background: var(--success-soft); color: var(--success-ink); }
.status-badge-warning { background: var(--warning-soft); color: var(--warning-ink); }
.status-badge-danger  { background: var(--danger-soft);  color: var(--danger-ink); }
.status-badge-info    { background: var(--info-soft);    color: var(--accent-ink); }
.status-badge-purple  { background: var(--purple-soft);  color: var(--purple-ink); }
.status-badge-muted   { background: var(--fill);         color: var(--ink-3); }

/* boolean Yes/No — icon-only soft circle (Edison): green check / red x, label on title */
.bool {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; flex: none;
}
.bool-yes { background: var(--success-soft); color: var(--success-ink); }
.bool-no  { background: var(--danger-soft); color: var(--danger-ink); }

.avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  background: var(--accent); color: #fff; border-radius: 50%;
  font-family: var(--font-sans); font-weight: 700; text-transform: uppercase; line-height: 1;
}
.avatar-15 { width: 15px; height: 15px; font-size: 8px; }
.avatar-24 { width: 24px; height: 24px; font-size: 10px; }
.avatar-32 { width: 32px; height: 32px; font-size: 12px; }
/* photo variant of the initials chip — same rounded-square footprint, image cropped to fill.
   Agent photos are ~1:1.25 portrait with the head high in the frame, so a centered square
   crop decapitates them; bias the crop window toward the top to keep faces in view. */
img.avatar { background: none; object-fit: cover; object-position: center 20%; }
.reflink-icon {
  flex: none; width: 13px; height: 13px; background-color: var(--muted-3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.07 0l2-2a5 5 0 1 0-7.07-7.07l-1.1 1.1'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.07 0l-2 2a5 5 0 1 0 7.07 7.07l1.1-1.1'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.07 0l2-2a5 5 0 1 0-7.07-7.07l-1.1 1.1'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.07 0l-2 2a5 5 0 1 0 7.07 7.07l1.1-1.1'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---------- Shared modal footer (modules/Vtiger/ModalFooter.tpl) ----------
   The legacy footer is included by 78 templates and renders in BOTH chromes, so
   its layout has to be a component rule rather than utilities — Settings pages
   have no main.css. The template supplies the scope element itself. */
.modal-footer-actions {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
}
.modal-footer-actions .cancelLink { text-decoration: none; }
.modal-footer-actions .cancelLink:hover { text-decoration: none; }