/*
 * Easy Leads — brand tokens
 * "Intelligent Lead Control"
 *
 * Loaded LAST, after tenant-modern-theme.css, glassmorphism-theme.css and
 * saabeq-2026.css. Colour tokens only — no class names, no layout, no spacing,
 * so every existing selector keeps working, including any a customer has copied
 * into their own site.
 *
 * ── Colour policy ──────────────────────────────────────────────────────────
 * The interface is INK ON PAPER with a BRAND ACCENT and SEMANTIC COLOUR.
 * The application uses the logo's aubergine half as its interface colour.
 *
 *   Aubergine       primary actions, active states, charts and structure.
 *   Ink #3E2F5B     type and LARGE surfaces — hero panels, banners,
 *                   full-width CTA slabs. A colour that works at 24px does not
 *                   work at 1200px. (Deep violet, not near-black — this is the
 *                   exact colour of the "EasyLeads" wordmark in the logo.)
 *   Semantic        green/amber/red/blue keep their meaning in status, KPIs and
 *                   category badges. Do NOT flatten these to grey; the variety
 *                   is how a dense CRM stays readable.
 *   Platform        Facebook, LinkedIn, WhatsApp etc. keep their own colours.
 *
 * Two failed passes are worth remembering, from the previous (orange) palette:
 * the first pointed every accent token at orange and every screen went orange;
 * the second pointed them at ink and every screen went black. Both were the
 * same mistake — one token driving everything. Reach for the specific colour
 * the element actually needs. The same discipline applies now that the tokens
 * are violet/coral instead of black/orange.
 *
 * Brand refresh 2026-08-21 — see docs/BRAND-GUIDELINES.md for the full
 * rationale, logo usage rules, and asset inventory.
 */

:root {
    /* ---------- Brand ---------- */
    --el-brand:           62  47  91;  /* #3E2F5B — logo aubergine. */
    --el-brand-hover:     48  37  71;  /* #302547 */
    --el-brand-active:    34  26  50;  /* #221A32 — pressed state */
    --el-brand-soft:     240 238 242;  /* #F0EEF2 — faint aubergine tint */

    /* ---------- Ink & paper: the actual interface palette ---------- */
    --el-ink:             62  47  91;  /* #3E2F5B — primary action + heading */
    --el-ink-hover:       48  37  71;  /* #302547 */
    --el-ink-soft:       240 238 242;  /* #F0EEF2 — hover rows, subtle fills */
    --el-paper:          255 255 255;

    /* ---------- Secondary text & borders — matched to brand-spec.md,
       not the design-system's stale values (see the --sq-* correction
       below: those had drifted to a colder, unrelated grey). ---------- */
    --el-muted:          110 110 110;  /* #6E6E6E — secondary text */
    --el-subtle:         150 150 150;  /* #969696 — tertiary text, placeholders */
    --el-border:         229 229 229;  /* #E5E5E5 — hairlines */
    --el-info:            71  85 105;  /* #475569 — slate, deliberately not blue */

    /* ---------- Shared radii + card elevation, for the .el-* component
       primitives below. One elevation system, not one per screen. ---------- */
    --el-radius-sm: 8px;
    --el-radius-md: 12px;
    --el-radius-lg: 16px;
    --el-shadow-card:
        0 1px 2px rgb(var(--el-ink) / 0.04),
        0 10px 28px -24px rgb(var(--el-ink) / 0.28);
}

/* =========================================================
   Design-system tokens (saabeq-2026.css)
   Accent = ink, not orange.
   ========================================================= */
:root {
    --sq-accent:            var(--el-brand);
    --sq-accent-hover:      var(--el-brand-hover);
    --sq-accent-soft:       var(--el-brand-soft);
    --sq-accent-grad-start: var(--el-brand);
    --sq-accent-grad-end:    48  37  71;

    /* Surfaces */
    --sq-bg:          250 250 250;
    --sq-surface:     255 255 255;
    --sq-surface-2:   250 250 250;
    --sq-sidebar:     255 255 255;
    --sq-overlay:      62  47  91;

    /* Text — these had drifted to a cold, unrelated grey (#71717A/#A1A1AA)
       that doesn't exist anywhere in the approved brand-spec palette.
       Corrected 2026-08-22 to the actual documented muted/subtle values. */
    --sq-fg:           62  47  91;
    --sq-fg-muted:    var(--el-muted);
    --sq-fg-subtle:   var(--el-subtle);

    /* Borders — same correction (#E4E4E7 was never the spec'd #E5E5E5). */
    --sq-border:      var(--el-border);
    --sq-border-strong: 212 212 216;

    /* Status stays semantic — colour here carries meaning in the pipeline.
       Info was silently aliased to the muted-text grey; brand-spec.md calls
       for a real slate so "neutral/info" reads as a colour choice, not a
       missing one. */
    --sq-success:  22 163  74;
    --sq-warning: 217 119   6;
    --sq-danger:  220  38  38;
    --sq-info:    var(--el-info);
}

/* ---------- glassmorphism-theme.css ---------- */
:root {
    --primary:          #3E2F5B;
    --primary-light:    #958DA5;
    --primary-dark:     #221A32;
    --primary-gradient: linear-gradient(135deg, #4D3E6A 0%, #3E2F5B 100%);

    --purple:           #3E2F5B;
    --purple-light:     #958DA5;
    --purple-gradient:  linear-gradient(135deg, #4D3E6A 0%, #221A32 100%);
    --indigo:           #3E2F5B;
    --teal:             #71717A;
    --pink:             #3E2F5B;      /* legacy variable, now aubergine */

    --brand-black:      #000000;
    --brand-charcoal:   #3E2F5B;
    --brand-ink:        #4D3E6A;
}

/* ---------- tenant-modern-theme.css ---------- */
:root {
    --primary-50:  #FAFAFA;
    --primary-100: #F4F4F5;
    --primary-300: #D4D4D8;
    --primary-400: #A1A1AA;
    --primary-500: #3E2F5B;
    --primary-600: #302547;
    --primary-700: #221A32;

    --purple-500: #3E2F5B;
    --purple-600: #302547;
}

/* ---------- Bootstrap 5 (landlord panel) ---------- */
:root {
    --bs-primary:          #3E2F5B;
    --bs-primary-rgb:      62, 47, 91;
    --bs-link-color:       #3E2F5B;
    --bs-link-hover-color: #302547;
}

.btn-primary {
    --bs-btn-bg:                    #3E2F5B;
    --bs-btn-border-color:          #3E2F5B;
    --bs-btn-hover-bg:              #302547;
    --bs-btn-hover-border-color:    #302547;
    --bs-btn-active-bg:             #221A32;
    --bs-btn-active-border-color:   #221A32;
    --bs-btn-disabled-bg:           #958DA5;
    --bs-btn-disabled-border-color: #958DA5;
}

.btn-outline-primary {
    --bs-btn-color:              #3E2F5B;
    --bs-btn-border-color:       #3E2F5B;
    --bs-btn-hover-bg:           #3E2F5B;
    --bs-btn-hover-border-color: #3E2F5B;
}

.text-primary   { color: #3E2F5B !important; }
.bg-primary     { background-color: #3E2F5B !important; }
.border-primary { border-color: #3E2F5B !important; }

/* =========================================================
   Deliberate aubergine accents — opt in, never automatic
   ========================================================= */

/* The wordmark, wherever it is set as live text rather than artwork. */
.el-brand,
.saabeq-brand {          /* legacy alias, kept so old markup still renders */
    color: rgb(var(--el-brand));
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Small brand affordances: badges, pills, the AI marker. */
.el-accent        { color: rgb(var(--el-brand)); }
.el-accent-bg     { background: rgb(var(--el-brand)); color: #fff; }
.el-accent-soft   { background: rgb(var(--el-brand-soft)); color: rgb(var(--el-brand-hover)); }
.el-accent-border { border-color: rgb(var(--el-brand)); }

/* A thin aubergine rule reads as brand without shouting. */
.el-rule {
    height: 3px;
    width: 44px;
    background: rgb(var(--el-brand));
    border-radius: 999px;
}

/* ---------- Logo sizing ---------- */
/* The lockup is ~5:1, so height drives a lot of width. These are deliberately
   restrained: at h-14 the mark is ~350px wide and dominates a header. */
.el-logo    { height: 30px; width: auto; display: block; }
.el-logo-sm { height: 24px; width: auto; display: block; }
.el-logo-lg { height: 38px; width: auto; display: block; }

@media (min-width: 768px) {
    .el-logo    { height: 34px; }
    .el-logo-sm { height: 26px; }
    .el-logo-lg { height: 44px; }
}

/* Focus ring: ink by default, so it reads as UI rather than decoration. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid rgb(var(--el-ink));
    outline-offset: 2px;
}

::selection {
    background: rgb(var(--el-brand) / 0.20);
    color: rgb(var(--el-ink));
}

/* =========================================================
   Tenant app — sidebar corrections
   Loaded after saabeq-2026.css, so these win without editing it.
   ========================================================= */

/* The header carried a bottom border AND a .sidebar-divider sat directly under
   it — two hairlines a few pixels apart. The divider element is gone from the
   markup; this removes the second line for any view still rendering one. */
.sidebar-header,
.sidebar-brand { border-bottom: 0 !important; }
.sidebar-divider { display: none !important; }

/* Give the logo room now that the edition label is gone. */
.sidebar-brand { padding: 1.15rem 1rem !important; }
.sidebar-brand .brand-logo { margin-inline: auto; }

/* Active item runs full-bleed instead of floating inset. The inset version read
   as a detached pill; flush reads as "this is the page you are on". */
.sidebar-nav .nav-item.active,
.sidebar .nav-item.active,
.sidebar .nav-link.active,
.sidebar a.active {
    margin-inline: 0 !important;
    border-radius: 0 !important;
    padding-inline: 1.375rem !important;
    background: rgb(var(--el-brand-soft)) !important;
    color: rgb(var(--el-ink)) !important;
    position: relative;
}

/* One thin coral marker on the active row — the accent doing real work,
   rather than colouring the whole element. */
.sidebar-nav .nav-item.active::before,
.sidebar .nav-item.active::before,
.sidebar .nav-link.active::before,
.sidebar a.active::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 60%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: rgb(var(--el-brand));
}

.sidebar-nav .nav-item.active i,
.sidebar .nav-item.active i,
.sidebar .nav-link.active i,
.sidebar a.active i {
    color: rgb(var(--el-ink)) !important;
}

/* Hover stays a quiet grey — colour is reserved for the selected row. */
.sidebar-nav .nav-item:hover:not(.active),
.sidebar .nav-item:hover:not(.active),
.sidebar .nav-link:hover:not(.active) {
    background: rgb(var(--el-ink-soft)) !important;
    color: rgb(var(--el-ink)) !important;
}

/* The header tagline IS the brand line. It was shrunk to caption size; this
   gives it presence without turning it into a heading. */
.header-tagline {
    color: rgb(var(--sq-fg)) !important;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: -0.01em;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.header-tagline::before {
    content: "";
    width: 3px;
    height: 1.05em;
    border-radius: 999px;
    background: rgb(var(--el-brand));
    flex: none;
}

@media (max-width: 991px) { .header-tagline { display: none; } }

/* Mobile bottom navigation: the selected destination carries the accent, the
   same way the sidebar does on desktop. Without this it inherited --primary,
   which is ink, and the active item was merely darker than the others. */
.bottom-nav-item.active .bottom-nav-icon,
.bottom-nav-item.active .bottom-nav-label {
    color: rgb(var(--el-brand)) !important;
}

.bottom-nav-item.active::before {
    background: rgb(var(--el-brand)) !important;
}

/* Bootstrap's .bg-info is a light cyan; white on it measures 1.96:1. Dark text
   is the only readable option without changing the colour itself. */
.badge.bg-info,
.badge.bg-warning,
.badge.bg-light {
    color: #3E2F5B !important;
}

/* =========================================================
   Shared screen primitives (2026-08-22 UX review)
   Opt-in .el-* component classes so the dashboards, the AI panels and
   the profile page stop maintaining three parallel styling systems
   (.dash-op-*, .ad-*, .ai-*) with their own hardcoded hex. New screens
   reach for these; nothing existing is renamed or removed.
   ========================================================= */

.el-page-shell {
    max-width: 1400px;
    margin-inline: auto;
    padding: 24px 32px;
}
@media (max-width: 768px) {
    .el-page-shell { padding: 16px; }
}

.el-surface {
    background: rgb(var(--el-paper));
    border: 1px solid rgb(var(--el-border));
    border-radius: var(--el-radius-lg);
    box-shadow: var(--el-shadow-card);
}

.el-section-head {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0 0 16px;
    font-size: 1.0625rem;
    font-weight: 700;
    color: rgb(var(--el-ink));
}

/* ---------- KPI cards ---------- */
.el-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}
.el-kpi-card {
    background: rgb(var(--el-paper));
    border: 1px solid rgb(var(--el-border));
    border-radius: var(--el-radius-md);
    padding: 20px;
}
.el-kpi-card .el-kpi-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: rgb(var(--sq-fg-muted));
    margin: 0 0 6px;
}
.el-kpi-card .el-kpi-value {
    font-size: 32px;
    line-height: 1.1;
    font-weight: 700;
    color: rgb(var(--el-ink));
}
.el-kpi-card .el-kpi-trend { font-size: 12px; margin-top: 4px; color: rgb(var(--sq-fg-muted)); }
.el-kpi-card--warning { border-color: rgb(var(--sq-warning) / 0.35); }
.el-kpi-card--warning .el-kpi-value { color: rgb(var(--sq-warning)); }
.el-kpi-card--success { border-color: rgb(var(--sq-success) / 0.35); }
.el-kpi-card--success .el-kpi-value { color: rgb(var(--sq-success)); }

/* ---------- Chips ---------- */
.el-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
    background: rgb(var(--sq-fg-muted) / 0.12);
    color: rgb(var(--sq-fg-muted));
}
.el-chip--brand   { background: rgb(var(--el-brand) / 0.12);   color: rgb(var(--el-brand-hover)); }
.el-chip--success { background: rgb(var(--sq-success) / 0.12); color: rgb(var(--sq-success)); }
.el-chip--warning { background: rgb(var(--sq-warning) / 0.12); color: rgb(var(--sq-warning)); }
.el-chip--danger  { background: rgb(var(--sq-danger)  / 0.12); color: rgb(var(--sq-danger)); }
.el-chip--info    { background: rgb(var(--sq-info)    / 0.12); color: rgb(var(--sq-info)); }

/* ---------- Underline tabs (profile page, and anywhere else tabbed) ---------- */
.el-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid rgb(var(--el-border));
}
.el-tab {
    appearance: none;
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    font-size: 14px;
    color: rgb(var(--sq-fg-muted));
    padding: 11px 14px;
    border-radius: var(--el-radius-sm) var(--el-radius-sm) 0 0;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    transition: background 150ms ease, color 150ms ease;
}
.el-tab:hover { color: rgb(var(--el-ink)); background: rgb(var(--el-ink-soft)); }
.el-tab.is-active { color: rgb(var(--el-ink)); border-bottom-color: rgb(var(--el-brand)); }

/* ---------- List rows (follow-up queues, activity feeds) ---------- */
.el-list-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 10px 0;
    border-bottom: 1px solid rgb(var(--el-border));
}
.el-list-row:last-child { border-bottom: none; }
.el-list-row:hover { background: rgb(var(--el-ink-soft)); }

/* ---------- Empty states ---------- */
.el-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 32px 16px;
    color: rgb(var(--sq-fg-muted));
}
.el-empty-state__icon { font-size: 22px; color: rgb(var(--sq-fg-subtle)); margin-bottom: 4px; }
.el-empty-state__title { font-weight: 700; color: rgb(var(--el-ink)); font-size: 14px; }
.el-empty-state__copy { font-size: 13px; max-width: 32ch; }

/* ---------- AI panel shell (lead-page suggestions, agent daily briefing) ---------- */
.el-ai-shell {
    background: rgb(var(--el-paper));
    border: 1px solid rgb(var(--el-border));
    border-radius: var(--el-radius-lg);
    border-inline-start: 3px solid rgb(var(--el-brand));
    box-shadow: var(--el-shadow-card);
}
.el-ai-marker { color: rgb(var(--el-brand)); }

@keyframes el-skeleton-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
.el-skeleton {
    background: rgb(var(--el-ink-soft));
    border-radius: var(--el-radius-sm);
    animation: el-skeleton-pulse 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .el-skeleton { animation: none; }
}

/* ---------- Tables ---------- */
.el-table-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.el-table-wrap { overflow-x: auto; border: 1px solid rgb(var(--el-border)); border-radius: var(--el-radius-md); }
.el-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.el-table th {
    text-align: start;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: rgb(var(--sq-fg-muted));
    padding: 10px 14px;
    background: rgb(var(--sq-surface-2));
    position: sticky;
    top: 0;
}
.el-table td { padding: 10px 14px; border-top: 1px solid rgb(var(--el-border)); color: rgb(var(--el-ink)); }
.el-table tbody tr:hover { background: rgb(var(--el-ink-soft)); }