/* =============================================================================
AGENT GOLD — DESIGN SYSTEM
Single source of truth. Loads after tabler.css and overrides everything.
Aesthetic: ClickUp-inspired structure (spacing, radii, typography, layout)
with Agent Gold (#c9a84c) as brand accent. Dark mode via tokens only.
============================================================================= */
/* =============================================================================
1. DESIGN TOKENS
============================================================================= */
:root,
[data-bs-theme='light'] {
/* ── Brand (per Agent Gold BSS 2025) ──
Primary gold #C69C6D (warm copper), light champagne #E8D0A8,
cream #F3E8D7, ink-brown #281F16 (NOT pure black). */
--ag-gold: #c69c6d;
--ag-gold-mid: #e8d0a8;
--ag-gold-soft: #f3e8d7;
--ag-gold-hover: #b3895a;
--ag-gold-deep: #8a6a47;
--ag-gold-rgb: 198, 156, 109;
--ag-ink: #281f16; /* brand dark — warm brown */
--ag-ink-rgb: 40, 31, 22;
/* ── Neutral surfaces ── */
--ag-bg: #ffffff;
--ag-bg-elev: #ffffff;
--ag-bg-subtle: #f7f8fa;
--ag-bg-muted: #eff0f3;
--ag-bg-hover: rgba(15, 18, 24, 0.04);
--ag-bg-active: rgba(15, 18, 24, 0.06);
/* Sidebars / chrome — uses brand ink-brown (#281F16) per BSS,
NOT pure black. Warmer, more luxurious feel. */
--ag-sidebar-bg: var(--ag-ink);
--ag-sidebar-fg: rgba(243, 232, 215, 0.6); /* gold-soft @ 60% */
--ag-sidebar-fg-active: var(--ag-gold-soft);
--ag-sidebar-hover: rgba(243, 232, 215, 0.06);
--ag-sidebar-active: rgba(var(--ag-gold-rgb), 0.18); /* gold tint on active */
--ag-sidebar-border: rgba(243, 232, 215, 0.06);
--ag-panel-bg: #ffffff;
/* ── Foreground / text ── */
--ag-fg: #1d2025;
--ag-fg-secondary: #4b5159;
--ag-fg-muted: #7a808b;
--ag-fg-disabled: #c0c4cb;
/* ── Borders ── */
--ag-border: #e6e8ec;
--ag-border-strong: #d4d7dd;
--ag-border-subtle: #eef0f3;
/* ── Status ── */
--ag-success: #16a34a;
--ag-success-soft: #dcfce7;
--ag-success-fg: #166534;
--ag-danger: #e5484d;
--ag-danger-soft: #fee4e2;
--ag-danger-fg: #b42318;
--ag-warning: #f59e0b;
--ag-warning-soft: #fef3c7;
--ag-warning-fg: #92400e;
--ag-info: #3b82f6;
--ag-info-soft: #dbeafe;
--ag-info-fg: #1e40af;
/* ── Focus ring ── */
--ag-ring: rgba(201, 168, 76, 0.45);
--ag-ring-shadow: 0 0 0 3px rgba(201, 168, 76, 0.18);
/* ── Radii ── */
--ag-radius-xs: 4px;
--ag-radius-sm: 6px;
--ag-radius: 8px;
--ag-radius-lg: 10px;
--ag-radius-xl: 14px;
--ag-radius-pill: 9999px;
/* ── Spacing scale (4px base) ── */
--ag-space-1: 4px;
--ag-space-2: 8px;
--ag-space-3: 12px;
--ag-space-4: 16px;
--ag-space-5: 20px;
--ag-space-6: 24px;
--ag-space-8: 32px;
/* ── Control heights (tight Linear/Notion scale) ── */
--ag-h-xs: 22px;
--ag-h-sm: 26px;
--ag-h: 30px;
--ag-h-lg: 34px;
/* ── Typography ──
Geist for everything (slim, modern). Geist Mono for numbers, codes,
kbd shortcuts and detail labels via the `.font-mono` utility. */
--ag-font-sans:
'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--ag-font-display: var(--ag-font-sans);
--ag-font-mono:
'Geist Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', 'Menlo', monospace;
/* Scale — body 13px, no UI element above 17px except hero numbers.
NOTE: base scale escalated +5% from original (11/12/13/14/15/17/20). */
--ag-fz-xs: 11.55px; /* badges, micro-labels */
--ag-fz-sm: 12.6px; /* h5, small, hints, meta */
--ag-fz: 13.65px; /* body, nav, buttons, inputs, h4 */
--ag-fz-md: 14.7px; /* h3, page-title (only when needed) */
--ag-fz-lg: 15.75px; /* h2 */
--ag-fz-xl: 17.85px; /* h1 */
--ag-fz-2xl: 21px; /* hero numbers, rarely used */
--ag-lh: 1.45;
--ag-lh-tight: 1.2;
/* Geist looks slimmer with slightly tighter tracking */
--ag-tracking-tight: -0.014em;
--ag-tracking-tighter: -0.026em;
--ag-tracking-mono: -0.014em;
/* Font weights — Geist renders crisp at lighter weights vs Inter */
--ag-fw-light: 300;
--ag-fw-normal: 400;
--ag-fw-medium: 500;
--ag-fw-semibold: 600;
--ag-fw-bold: 700;
/* Icon sizes (Tabler icons / SVG) — semantic tokens */
--ag-icon-xs: 11px; /* badges, micro */
--ag-icon-sm: 13px; /* in buttons, dropdown items */
--ag-icon: 14px; /* default in nav-link, body text */
--ag-icon-md: 15px; /* pre-sidebar, .ti default */
--ag-icon-lg: 18px; /* prominent UI icons */
--ag-icon-xl: 22px; /* hero icons */
/* ── Shadows (subtle, ClickUp-like) ── */
--ag-shadow-xs: 0 1px 2px rgba(15, 18, 24, 0.04);
--ag-shadow-sm: 0 1px 2px rgba(15, 18, 24, 0.06), 0 1px 3px rgba(15, 18, 24, 0.04);
--ag-shadow: 0 4px 12px rgba(15, 18, 24, 0.08), 0 2px 4px rgba(15, 18, 24, 0.04);
--ag-shadow-lg: 0 12px 32px rgba(15, 18, 24, 0.12), 0 4px 8px rgba(15, 18, 24, 0.06);
/* ── Layout sizing ── */
--ag-pre-sidebar-w: 44px; /* icon-only rail (no labels) */
--ag-sidebar-w: 196px; /* tighter ClickUp-style panel */
--ag-topbar-h: 40px; /* matches `height: 2.5rem` in views */
--ag-layout-gap: 5px;
/* ── Map to Tabler tokens so Tabler components inherit our system ── */
--tblr-font-sans-serif: var(--ag-font-sans);
--tblr-body-font-size: var(--ag-fz);
--tblr-body-font-weight: 400;
--tblr-body-line-height: var(--ag-lh);
--tblr-body-bg: var(--ag-bg);
--tblr-body-color: var(--ag-fg);
--tblr-border-color: var(--ag-border);
--tblr-border-color-translucent: var(--ag-border);
--tblr-border-radius: var(--ag-radius-sm);
--tblr-border-radius-sm: var(--ag-radius-xs);
--tblr-border-radius-lg: var(--ag-radius);
--tblr-border-radius-xl: var(--ag-radius-lg);
--tblr-border-radius-xxl: var(--ag-radius-xl);
--tblr-border-radius-2xl: var(--ag-radius-xl);
--tblr-bg-surface: var(--ag-bg);
--tblr-bg-surface-secondary: var(--ag-bg-subtle);
--tblr-bg-surface-tertiary: var(--ag-bg-muted);
--tblr-secondary-color: var(--ag-fg-secondary);
--tblr-muted: var(--ag-fg-muted);
--tblr-primary: var(--ag-gold);
--tblr-primary-rgb: var(--ag-gold-rgb);
--tblr-github: var(--ag-fg);
--tblr-headings-font-family: var(--ag-font-sans);
--tblr-headings-font-weight: 600;
--tblr-headings-color: var(--ag-fg);
--tblr-headings-line-height: 1.25;
--tblr-font-size-h1: 16.8px;
--tblr-font-size-h2: 14.7px;
--tblr-font-size-h3: 13.65px;
--tblr-font-size-h4: 12.6px; /* = body */
--tblr-font-size-h5: 11.55px;
--tblr-font-size-h6: 10.5px;
--tblr-line-height-h1: 1.25;
--tblr-line-height-h2: 1.3;
--tblr-line-height-h3: 1.35;
--tblr-line-height-h4: 1.35;
--tblr-line-height-h5: 1.35;
--tblr-line-height-h6: 1.4;
}
[data-bs-theme='dark'] {
--ag-gold: #d6b85e;
--ag-gold-soft: rgba(214, 184, 94, 0.12);
--ag-gold-hover: #e3c876;
--ag-gold-rgb: 214, 184, 94;
--ag-bg: #0f1115;
--ag-bg-elev: #16191e;
--ag-bg-subtle: #1a1d23;
--ag-bg-muted: #21252b;
--ag-bg-hover: rgba(255, 255, 255, 0.04);
--ag-bg-active: rgba(255, 255, 255, 0.07);
--ag-sidebar-bg: #0b0d10;
--ag-sidebar-fg: #9498a1;
--ag-sidebar-fg-active: #ffffff;
--ag-sidebar-hover: rgba(255, 255, 255, 0.05);
--ag-sidebar-active: rgba(255, 255, 255, 0.09);
--ag-sidebar-border: rgba(255, 255, 255, 0.05);
--ag-panel-bg: #14171c;
--ag-fg: #ebecf0;
--ag-fg-secondary: #b5b9c1;
--ag-fg-muted: #7f8590;
--ag-fg-disabled: #4d525a;
--ag-border: #2a2e35;
--ag-border-strong: #3a3f47;
--ag-border-subtle: #1f232a;
--ag-success: #22c55e;
--ag-success-soft: rgba(34, 197, 94, 0.15);
--ag-success-fg: #86efac;
--ag-danger: #f87171;
--ag-danger-soft: rgba(239, 68, 68, 0.15);
--ag-danger-fg: #fca5a5;
--ag-warning: #fbbf24;
--ag-warning-soft: rgba(251, 191, 36, 0.15);
--ag-warning-fg: #fcd34d;
--ag-info: #60a5fa;
--ag-info-soft: rgba(59, 130, 246, 0.18);
--ag-info-fg: #93c5fd;
--ag-ring: rgba(214, 184, 94, 0.55);
--ag-ring-shadow: 0 0 0 3px rgba(214, 184, 94, 0.22);
--ag-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
--ag-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.25);
--ag-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3);
--ag-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6), 0 4px 8px rgba(0, 0, 0, 0.4);
}
/* =============================================================================
2. BASE / RESET
============================================================================= */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
font-size: 16px;
font-family: var(--ag-font-sans);
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--ag-font-sans);
font-size: var(--ag-fz);
font-weight: var(--ag-fw-normal);
line-height: var(--ag-lh);
color: var(--ag-fg);
background-color: var(--ag-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
letter-spacing: var(--ag-tracking-tight);
/* Geist features: contextual alternates + stylistic sets for slim look */
font-feature-settings: 'ss01', 'ss02', 'ss04';
font-variant-numeric: tabular-nums;
}
/* =============================================================================
LEGACY INLINE FONT-SIZE NEUTRALIZER
─────────────────────────────────────────────────────────────────────────────
We have ~170 occurrences of `style="font-size:0.875rem"` / `:0.75rem` /
`:0.65rem` etc. across legacy JS templates (components.js, inbox/main.js,
pipeline, contacts…). Inline styles beat any selector except `!important`.
This block remaps the most common hardcoded values back to design tokens
so the cascade stays honest. Migrate the JS to classes when touching the
file; once a pattern is gone, the rule here becomes a no-op safely.
============================================================================= */
[style*="font-size:0.875rem"],
[style*="font-size: 0.875rem"],
[style*="font-size:14px"] { font-size: var(--ag-fz) !important; } /* 14→12 */
[style*="font-size:0.8125rem"],
[style*="font-size: 0.8125rem"],
[style*="font-size:13px"] { font-size: var(--ag-fz) !important; } /* 13→12 */
[style*="font-size:0.75rem"],
[style*="font-size: 0.75rem"],
[style*="font-size:12px"] { font-size: var(--ag-fz) !important; } /* 12 */
[style*="font-size:0.6875rem"],
[style*="font-size: 0.6875rem"],
[style*="font-size:11px"] { font-size: var(--ag-fz-sm) !important; } /* 11 */
[style*="font-size:0.65rem"],
[style*="font-size: 0.65rem"],
[style*="font-size:0.625rem"],
[style*="font-size: 0.625rem"],
[style*="font-size:10px"] { font-size: var(--ag-fz-xs) !important; } /* 10 */
[style*="font-size:1rem"],
[style*="font-size: 1rem"],
[style*="font-size:16px"] { font-size: var(--ag-fz-md) !important; } /* 16→13 */
[style*="font-size:1.25rem"],
[style*="font-size: 1.25rem"],
[style*="font-size:20px"] { font-size: var(--ag-fz-lg) !important; } /* 20→14 */
[style*="font-size:1.5rem"],
[style*="font-size: 1.5rem"],
[style*="font-size:24px"] { font-size: var(--ag-fz-xl) !important; } /* 24→16 */
/* Exception: icons (.ti) are sized via their own scale — don't blanket-remap */
.ti[style*="font-size:1rem"],
.ti[style*="font-size: 1rem"] { font-size: var(--ag-icon) !important; }
.ti[style*="font-size:1.5rem"],
.ti[style*="font-size: 1.5rem"] { font-size: var(--ag-icon-lg) !important; }
.ti[style*="font-size:2rem"],
.ti[style*="font-size: 2rem"] { font-size: var(--ag-icon-xl) !important; }
.ti[style*="font-size:3rem"],
.ti[style*="font-size: 3rem"] { font-size: 24px !important; }
/* Force Geist on all interactive/text elements — vendor libs ship their own
font-family declarations. Without this, controls drop to system fonts. */
button, input, select, textarea, optgroup,
.btn, .form-control, .form-select, .form-label,
.dropdown-menu, .dropdown-item, .nav-link, .nav-link-title,
.modal-title, .modal-body, .modal-header, .modal-footer,
.card, .card-title, .card-header, .card-body, .card-footer,
.badge, .tooltip-inner, .popover, .alert,
.table, .table th, .table td,
.ts-control, .ts-control input, .ts-dropdown, .ts-dropdown .option,
.flatpickr-calendar, .flatpickr-day, .flatpickr-weekday,
.dataTables_wrapper, .dataTables_filter input, .dataTables_length select {
font-family: var(--ag-font-sans);
}
/* ── Mono utility — Geist Mono for numbers, codes, kbd, IDs, dates, timers ──
Used selectively to add a "tech" feel. Apply via `.font-mono` or the
`[data-mono]` attribute. Inherits all other styles. */
.font-mono,
[data-mono],
code, kbd, pre, samp,
.tabular {
font-family: var(--ag-font-mono);
font-feature-settings: 'ss01', 'ss02', 'ss03', 'zero';
font-variant-numeric: tabular-nums slashed-zero;
letter-spacing: -0.01em;
}
::selection {
background-color: rgba(var(--ag-gold-rgb), 0.25);
color: inherit;
}
/* =============================================================================
2b. BRAND DECORATION UTILITIES (per Agent Gold BSS 2025)
─────────────────────────────────────────────────────────────────────────────
Use sparingly — these are accents for hero/empty/auth/AI/onboarding moments,
NOT for chrome or dense list/table screens.
Available utilities:
.ag-gradient-gold — solid brand gradient (cream → gold)
.ag-gradient-gold-soft — subtle cream tint for sections (gold-soft → bg)
.ag-gradient-gold-deep — gold → deep gold (for primary CTAs / hero)
.ag-gradient-ink — ink-brown vertical gradient (dark sections)
.ag-text-gradient — gold gradient applied to text (.ag-text-gradient h1)
.ag-dots — concentric gold dot pattern background (Puntos)
.ag-halo — defocused gold glow (Halo dorado)
.ag-halo-corner — single corner halo (subtle decoration)
============================================================================= */
.ag-gradient-gold {
background: linear-gradient(135deg, var(--ag-gold-soft) 0%, var(--ag-gold-mid) 45%, var(--ag-gold) 100%);
}
.ag-gradient-gold-soft {
background: linear-gradient(180deg, var(--ag-gold-soft) 0%, var(--ag-bg) 100%);
}
.ag-gradient-gold-deep {
background: linear-gradient(135deg, var(--ag-gold) 0%, var(--ag-gold-hover) 60%, var(--ag-gold-deep) 100%);
color: #fff;
}
.ag-gradient-ink {
background: linear-gradient(180deg, var(--ag-ink) 0%, #18120c 100%);
color: var(--ag-gold-soft);
}
.ag-text-gradient {
background: linear-gradient(135deg, var(--ag-gold-mid) 0%, var(--ag-gold) 50%, var(--ag-gold-deep) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
/* Puntos concéntricos — radial dot pattern fading from center.
Tile-based using `background-image` (single radial-gradient repeated). */
.ag-dots {
background-image:
radial-gradient(circle at center,
rgba(var(--ag-gold-rgb), 0.18) 0%,
rgba(var(--ag-gold-rgb), 0.10) 28%,
transparent 60%),
radial-gradient(circle 1px,
rgba(var(--ag-gold-rgb), 0.32) 1px,
transparent 1.5px);
background-size: 100% 100%, 14px 14px;
background-position: center, 0 0;
background-repeat: no-repeat, repeat;
}
.ag-dots-subtle {
background-image: radial-gradient(circle 1px,
rgba(var(--ag-gold-rgb), 0.18) 1px,
transparent 1.5px);
background-size: 14px 14px;
background-repeat: repeat;
}
/* Halo dorado — soft defocused glow */
.ag-halo {
position: relative;
isolation: isolate;
}
.ag-halo::before {
content: '';
position: absolute;
inset: -20%;
background: radial-gradient(circle at 50% 35%,
rgba(var(--ag-gold-rgb), 0.28) 0%,
rgba(var(--ag-gold-rgb), 0.12) 25%,
transparent 60%);
filter: blur(28px);
z-index: -1;
pointer-events: none;
}
/* Single corner glow (top-left by default) — even subtler decoration */
.ag-halo-corner {
position: relative;
isolation: isolate;
}
.ag-halo-corner::before {
content: '';
position: absolute;
width: 320px;
height: 320px;
top: -120px;
left: -120px;
background: radial-gradient(circle,
rgba(var(--ag-gold-rgb), 0.22) 0%,
rgba(var(--ag-gold-rgb), 0.08) 30%,
transparent 65%);
filter: blur(16px);
z-index: -1;
pointer-events: none;
}
.ag-halo-corner.ag-halo-corner-tr::before { left: auto; right: -120px; }
.ag-halo-corner.ag-halo-corner-bl::before { top: auto; bottom: -120px; }
.ag-halo-corner.ag-halo-corner-br::before { top: auto; bottom: -120px; left: auto; right: -120px; }
[data-bs-theme='dark'] .ag-halo::before,
[data-bs-theme='dark'] .ag-halo-corner::before {
background: radial-gradient(circle at 50% 35%,
rgba(var(--ag-gold-rgb), 0.18) 0%,
rgba(var(--ag-gold-rgb), 0.06) 30%,
transparent 60%);
}
/* Text color utility on brand surfaces */
.ag-on-ink { color: var(--ag-gold-soft); }
.ag-on-ink-muted { color: rgba(243, 232, 215, 0.55); }
/* =============================================================================
3. TYPOGRAPHY
============================================================================= */
h1, .h1 { font-family: var(--ag-font-sans); font-size: var(--ag-fz-xl); font-weight: var(--ag-fw-semibold); line-height: 1.25; letter-spacing: var(--ag-tracking-tighter); margin: 0 0 var(--ag-space-2) 0; color: var(--ag-fg); }
h2, .h2 { font-family: var(--ag-font-sans); font-size: var(--ag-fz-lg); font-weight: var(--ag-fw-semibold); line-height: 1.3; letter-spacing: var(--ag-tracking-tight); margin: 0 0 var(--ag-space-2) 0; color: var(--ag-fg); }
h3, .h3 { font-family: var(--ag-font-sans); font-size: var(--ag-fz-md); font-weight: var(--ag-fw-semibold); line-height: 1.3; letter-spacing: var(--ag-tracking-tight); margin: 0 0 var(--ag-space-1) 0; color: var(--ag-fg); }
h4, .h4 { font-family: var(--ag-font-sans); font-size: var(--ag-fz); font-weight: var(--ag-fw-semibold); line-height: 1.35; letter-spacing: var(--ag-tracking-tight); margin: 0 0 var(--ag-space-1) 0; color: var(--ag-fg); }
h5, .h5 { font-family: var(--ag-font-sans); font-size: var(--ag-fz-sm); font-weight: var(--ag-fw-semibold); line-height: 1.35; margin: 0; color: var(--ag-fg); }
h6, .h6 { font-family: var(--ag-font-sans); font-size: var(--ag-fz-sm); font-weight: var(--ag-fw-semibold); line-height: 1.4; color: var(--ag-fg-muted); margin: 0; }
p { margin: 0 0 var(--ag-space-2) 0; line-height: var(--ag-lh); }
small, .small, .text-sm { font-size: var(--ag-fz-sm); }
.text-xs { font-size: var(--ag-fz-xs); }
.text-muted,
.text-secondary { color: var(--ag-fg-muted) !important; }
a {
color: var(--ag-fg);
text-decoration: none;
transition: color 0.12s ease;
}
a:hover { color: var(--ag-gold-hover); }
code, kbd, pre, samp { font-family: var(--ag-font-mono); font-size: 0.9em; }
/* Page titles */
.page-title {
font-size: var(--ag-fz);
font-weight: var(--ag-fw-semibold);
letter-spacing: var(--ag-tracking-tight);
line-height: 1.3;
color: var(--ag-fg);
margin: 0;
}
.page-pretitle {
font-size: var(--ag-fz-sm);
font-weight: 500;
color: var(--ag-fg-muted);
margin: 0 0 4px 0;
}
/* =============================================================================
4. LAYOUT — Page, sidebars, top bar
============================================================================= */
/* ── Page "stage" — light gray background shows through gaps between cards.
Fixed to viewport height to prevent the content card from overflowing past
the viewport (Tabler defaults to min-height:100% + flex:1 which expands). */
.page {
height: 100dvh;
max-height: 100dvh;
min-height: 0;
overflow: hidden;
background-color: var(--ag-bg-subtle);
}
/* ── Main content "card" ──
Cuando la sidebar está cerrada: card completa con todas las esquinas redondeadas.
Cuando la sidebar está abierta: pegada a la sidebar (sin gap), esquinas izquierdas
rectas (la sidebar pone las suyas) y borde izquierdo eliminado para no doblar. */
body .page-wrapper {
margin-top: calc(var(--ag-topbar-h) + var(--ag-layout-gap)) !important;
margin-left: calc(var(--ag-pre-sidebar-w) + var(--ag-layout-gap) * 2) !important;
margin-right: var(--ag-layout-gap) !important;
margin-bottom: var(--ag-layout-gap) !important;
padding: 0 !important;
min-height: 0 !important;
max-height: calc(100dvh - var(--ag-topbar-h) - var(--ag-layout-gap) * 2);
height: calc(100dvh - var(--ag-topbar-h) - var(--ag-layout-gap) * 2);
/* No scroll on the wrapper — inner panels handle their own overflow.
Avoids the "double scrollbar" effect when a view's root sets its own height. */
overflow: hidden;
background-color: var(--ag-bg);
border: 1px solid var(--ag-border);
border-radius: var(--ag-radius-lg);
box-shadow: var(--ag-shadow-xs);
transition: margin-left 0.22s ease;
box-sizing: border-box;
}
/* Sidebar abierta: el content se pega a ella */
body .page-wrapper.sidebar-open {
margin-left: calc(var(--ag-pre-sidebar-w) + var(--ag-sidebar-w) + var(--ag-layout-gap) * 2) !important;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.page-body { padding-top: 0; margin-bottom: 0; }
.page-header { margin-bottom: var(--ag-space-3); }
/* ── Pre-sidebar (icon + label rail, ClickUp-style) ──
Floats as a card with margin from edges; rounded corners. */
.pre-sidebar {
position: fixed;
left: var(--ag-layout-gap);
top: calc(var(--ag-topbar-h) + var(--ag-layout-gap));
bottom: var(--ag-layout-gap);
width: var(--ag-pre-sidebar-w);
background-color: var(--ag-sidebar-bg);
border: 1px solid var(--ag-sidebar-border);
border-radius: var(--ag-radius-lg);
z-index: 1040;
display: flex;
flex-direction: column;
align-items: center;
padding: 6px 4px;
gap: 2px;
overflow-y: auto;
overflow-x: hidden;
box-shadow: var(--ag-shadow-xs);
}
.pre-sidebar::-webkit-scrollbar { width: 0; }
/* Icon-only square buttons — label appears via hover-panel flyout (data-hover-title). */
.pre-sidebar-btn {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: calc(var(--ag-pre-sidebar-w) - 8px);
height: calc(var(--ag-pre-sidebar-w) - 8px);
padding: 0;
border: none;
background: transparent;
color: var(--ag-sidebar-fg);
border-radius: var(--ag-radius);
cursor: pointer;
overflow: hidden;
isolation: isolate;
transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
text-decoration: none;
}
.pre-sidebar-btn .ti {
font-size: var(--ag-icon-md);
line-height: 1;
position: relative;
z-index: 2;
transition: filter 0.2s ease;
}
.pre-sidebar-btn:hover {
background: var(--ag-sidebar-hover);
color: var(--ag-sidebar-fg-active);
}
/* ── Active state: diffused mesh-gradient halo — soft, blurred multicolor
blob that fades to nothing at the edges (no hard ring). Achieved with a
blurred ::before layered behind the icon. Button background stays clear. */
.pre-sidebar-btn.active {
background: transparent;
color: #fff;
box-shadow: none;
overflow: visible;
}
.pre-sidebar-btn.active::before {
content: '';
position: absolute;
inset: 3px;
background:
radial-gradient(circle at 26% 20%, rgba(255, 244, 205, 0.98) 0%, transparent 42%), /* bright champagne */
radial-gradient(circle at 78% 22%, rgba(255, 140, 105, 0.95) 0%, transparent 46%), /* coral peach */
radial-gradient(circle at 84% 80%, rgba(95, 50, 25, 0.92) 0%, transparent 48%), /* deep mahogany */
radial-gradient(circle at 18% 82%, rgba(255, 170, 55, 0.96) 0%, transparent 48%), /* vivid amber */
radial-gradient(circle at 55% 50%, rgba(230, 100, 80, 0.55) 0%, transparent 60%), /* warm rose haze */
radial-gradient(circle at 50% 55%, rgba(255, 220, 165, 0.50) 0%, transparent 72%); /* cream core */
filter: blur(4px);
border-radius: 50%;
z-index: 0;
pointer-events: none;
opacity: 0.97;
}
.pre-sidebar-btn.active .ti {
color: #fff;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}
@media (prefers-reduced-motion: reduce) {
.pre-sidebar-btn { transition: none; }
.pre-sidebar-btn.active .ti { filter: none; }
}
/* ── Main sidebar (panel) — pegado al content, forma una sola card con él.
Solo se redondean las esquinas izquierdas (las derechas tocan el content). */
.main-sidebar {
position: fixed !important;
left: calc(var(--ag-pre-sidebar-w) + var(--ag-layout-gap) * 2) !important;
top: calc(var(--ag-topbar-h) + var(--ag-layout-gap)) !important;
bottom: var(--ag-layout-gap) !important;
width: var(--ag-sidebar-w) !important;
background-color: var(--ag-bg-subtle) !important;
border: 1px solid var(--ag-border) !important;
border-right: 0 !important;
border-top-left-radius: var(--ag-radius-lg);
border-bottom-left-radius: var(--ag-radius-lg);
border-top-right-radius: 0;
border-bottom-right-radius: 0;
/* Kill Tabler's inset box-shadow on `.navbar-vertical` which mimics a right border */
box-shadow: none !important;
transition: transform 0.22s ease, opacity 0.22s ease;
z-index: 1030 !important;
transform: translateX(calc(-100% - var(--ag-layout-gap)));
opacity: 0;
padding: 0;
overflow: hidden;
}
.main-sidebar.show { transform: translateX(0); opacity: 1; }
.sidebar-section {
height: 100%;
overflow-y: auto;
padding: 0;
display: flex;
flex-direction: column;
}
/* Top section title row — aligned with topbar height */
.sidebar-section > div:first-child {
padding: 0 var(--ag-space-3);
height: var(--ag-topbar-h);
min-height: var(--ag-topbar-h);
display: flex;
align-items: center;
border-bottom: 1px solid var(--ag-border);
}
.main-sidebar .sidebar-section > div:first-child h4 {
font-size: var(--ag-fz) !important;
font-weight: var(--ag-fw-medium) !important;
color: var(--ag-fg) !important;
letter-spacing: var(--ag-tracking-tight);
line-height: 1.2;
margin: 0 !important;
}
/* Nav list — overrides Tabler's `.navbar-vertical.navbar-expand-lg
.navbar-collapse .navbar-nav .nav-link` (5-class) with matching specificity. */
.main-sidebar .navbar-nav {
padding: var(--ag-space-2);
margin: 0;
list-style: none;
flex-direction: column;
gap: 1px;
}
.main-sidebar.navbar-vertical.navbar-expand-lg .navbar-collapse .navbar-nav .nav-link,
.main-sidebar.navbar-vertical.navbar-expand-lg .navbar-nav .nav-link {
padding: 4px var(--ag-space-2);
min-height: 0;
border-radius: var(--ag-radius-sm);
justify-content: flex-start;
color: var(--ag-fg-secondary);
font-size: var(--ag-fz-sm);
font-weight: var(--ag-fw-normal);
}
.main-sidebar.navbar-vertical.navbar-expand-lg .navbar-nav .nav-link .nav-link-title {
font-size: inherit;
font-weight: inherit;
}
.main-sidebar.navbar-vertical.navbar-expand-lg .navbar-nav .nav-link.current,
.main-sidebar.navbar-vertical.navbar-expand-lg .navbar-nav .nav-item.current > .nav-link {
font-weight: var(--ag-fw-medium);
}
.main-sidebar .navbar-nav .nav-link:hover {
background: var(--ag-bg-hover);
color: var(--ag-fg);
}
/* In-list group label — `WHATSAPP
`.
Styled like ClickUp section headers: small, uppercase, muted, with a hair of
top spacing to separate groups visually. */
.main-sidebar .navbar-nav > .nav-item > div.nav-link {
padding: var(--ag-space-3) var(--ag-space-2) 2px;
margin: 0;
background: transparent;
cursor: default;
pointer-events: none;
}
.main-sidebar .navbar-nav > .nav-item > div.nav-link:hover { background: transparent; }
.main-sidebar .navbar-nav > .nav-item > div.nav-link small {
font-family: var(--ag-font-mono);
font-size: 10px;
font-weight: var(--ag-fw-medium);
color: var(--ag-fg-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
line-height: 1;
}
/* ── Top bar — FULL WIDTH like ClickUp, spans across pre-sidebar + content ── */
.fixed-top-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: var(--ag-topbar-h);
background-color: var(--ag-bg);
border-bottom: 1px solid var(--ag-border);
z-index: 1050; /* above pre-sidebar and main-sidebar */
display: grid;
grid-template-columns: 1fr auto 1fr; /* left | center search | right */
align-items: center;
gap: var(--ag-space-3);
/* Logo aligned with the left edge of the pre-sidebar, avatar aligned
with the right edge of the content panel — both use --ag-layout-gap. */
padding: 0 var(--ag-layout-gap);
}
/* Backward compat for the old `.sidebar-open` shift — now a no-op.
Topbar content stays aligned to the same edges regardless of sidebar state. */
.fixed-top-bar.sidebar-open { left: 0; }
/* Top bar sections */
.topbar-left {
display: flex;
align-items: center;
gap: var(--ag-space-2);
justify-self: start;
min-width: 0;
}
.topbar-center {
display: flex;
align-items: center;
justify-content: center;
width: min(540px, 60vw);
justify-self: center;
display: flex;
align-items: center;
gap: var(--ag-space-2);
}
.topbar-right {
display: flex;
align-items: center;
gap: var(--ag-space-2);
justify-self: end;
}
/* Workspace brand (top-left) — plain link to home */
.topbar-brand {
display: flex;
align-items: center;
gap: var(--ag-space-2);
height: var(--ag-h-sm);
padding: 0 8px;
border-radius: var(--ag-radius-sm);
color: var(--ag-fg);
font-size: var(--ag-fz);
font-weight: var(--ag-fw-medium);
letter-spacing: var(--ag-tracking-tight);
transition: background-color 0.12s ease;
min-width: 0;
max-width: 100%;
text-decoration: none;
}
.topbar-brand:hover { background: var(--ag-bg-hover); color: var(--ag-fg); }
.topbar-brand__logo {
width: 18px;
height: 18px;
border-radius: var(--ag-radius-xs);
object-fit: contain;
flex-shrink: 0;
}
.topbar-brand__name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
/* Global search (top-center) — now a button that opens the search palette */
.topbar-search {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
height: var(--ag-h-sm);
padding: 0 6px 0 10px;
background: var(--ag-bg-subtle);
border: 1px solid var(--ag-border);
border-radius: var(--ag-radius-sm);
color: var(--ag-fg-muted);
font-size: var(--ag-fz);
font-family: var(--ag-font-sans);
font-weight: var(--ag-fw-normal);
cursor: pointer;
text-align: left;
transition: background-color 0.12s, border-color 0.12s;
}
.topbar-search:hover {
background: var(--ag-bg-muted);
border-color: var(--ag-border-strong);
}
.topbar-search__placeholder {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--ag-fg-muted);
}
.topbar-search-icon {
color: var(--ag-fg-muted);
flex-shrink: 0;
font-size: var(--ag-icon-sm);
}
.topbar-search-kbd {
font-family: var(--ag-font-mono);
font-size: 10px;
font-weight: var(--ag-fw-medium);
color: var(--ag-fg-muted);
background: var(--ag-bg-elev);
border: 1px solid var(--ag-border);
border-radius: var(--ag-radius-xs);
padding: 1px 5px;
line-height: 1.3;
flex-shrink: 0;
}
.fixed-top-bar .dropdown {
display: flex;
align-items: center;
position: relative;
}
/* Topbar sidebar toggle — shows/hides the open sidebar section */
#sidebar-toggle-btn,
.topbar-sidebar-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
padding: 0;
background: transparent;
border: 1px solid transparent;
color: var(--ag-fg-muted);
cursor: pointer;
border-radius: var(--ag-radius-xs);
transition: background 0.12s, color 0.12s, border-color 0.12s;
}
#sidebar-toggle-btn .ti,
.topbar-sidebar-toggle .ti { font-size: var(--ag-icon-sm); line-height: 1; }
#sidebar-toggle-btn:hover,
.topbar-sidebar-toggle:hover { background: var(--ag-bg-hover); color: var(--ag-fg); }
#sidebar-toggle-btn[disabled],
.topbar-sidebar-toggle[disabled] { display: none; }
/* Hover panel (Supabase-style flyout from rail) */
.pre-sidebar-hover-panel {
position: fixed;
z-index: 1050;
background: var(--ag-bg-elev);
border: 1px solid var(--ag-border);
border-radius: var(--ag-radius-lg);
box-shadow:
0 0 0 1px rgba(15, 18, 24, 0.02),
0 16px 40px -8px rgba(15, 18, 24, 0.18),
0 4px 12px -2px rgba(15, 18, 24, 0.08);
padding: var(--ag-space-2);
min-width: 220px;
opacity: 0;
transform: translateX(-8px) scale(0.985);
transform-origin: left center;
transition:
opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
pointer-events: none;
backdrop-filter: saturate(180%) blur(12px);
-webkit-backdrop-filter: saturate(180%) blur(12px);
}
.pre-sidebar-hover-panel.visible {
opacity: 1;
transform: translateX(0) scale(1);
pointer-events: auto;
}
.hover-panel-header {
font-weight: var(--ag-fw-semibold);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ag-gold-deep);
padding: 4px 10px 6px;
}
.hover-panel-label {
display: flex;
align-items: center;
gap: var(--ag-space-2);
font-weight: var(--ag-fw-medium);
font-size: var(--ag-fz-sm);
padding: 6px 10px;
color: var(--ag-fg);
}
.hover-panel-label .ti {
font-size: var(--ag-icon);
width: 16px;
height: 16px;
flex-shrink: 0;
text-align: center;
color: var(--ag-gold);
opacity: 0.9;
}
.hover-panel-link {
position: relative;
display: flex;
align-items: center;
gap: var(--ag-space-2);
padding: 6px 10px;
border-radius: var(--ag-radius-sm);
color: var(--ag-fg-secondary);
font-size: var(--ag-fz-sm);
text-decoration: none !important;
transition:
background 0.14s ease,
color 0.14s ease,
transform 0.14s cubic-bezier(0.16, 1, 0.3, 1);
white-space: nowrap;
}
.hover-panel-link:hover {
background: linear-gradient(90deg,
rgba(var(--ag-gold-rgb), 0.12) 0%,
rgba(var(--ag-gold-rgb), 0.04) 100%);
color: var(--ag-fg);
transform: translateX(2px);
}
.hover-panel-link:hover .ti {
opacity: 1;
color: var(--ag-gold);
}
.hover-panel-link .ti {
font-size: var(--ag-icon);
opacity: 0.55;
width: 16px;
height: 16px;
flex-shrink: 0;
text-align: center;
transition: opacity 0.14s ease, color 0.14s ease;
}
.hover-panel-link-disabled {
opacity: 0.42;
cursor: not-allowed;
pointer-events: none;
}
.hover-panel-group {
font-weight: var(--ag-fw-semibold);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ag-fg-muted);
padding: 10px 10px 4px;
}
.hover-panel-group:first-child {
padding-top: 4px;
}
.hover-panel-divider {
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
var(--ag-border) 20%,
var(--ag-border) 80%,
transparent 100%);
margin: 6px 8px;
border: 0;
}
@media (prefers-reduced-motion: reduce) {
.pre-sidebar-hover-panel,
.hover-panel-link,
.hover-panel-link .ti {
transition: none;
}
.pre-sidebar-hover-panel { transform: none; }
.hover-panel-link:hover { transform: none; }
}
/* Responsive layout — shrink dimensions slightly on smaller screens */
@media (max-width: 991px) {
:root { --ag-pre-sidebar-w: 40px; --ag-sidebar-w: 216px; --ag-layout-gap: 4px; }
.topbar-center { width: min(320px, 40vw); }
}
@media (max-width: 576px) {
:root { --ag-pre-sidebar-w: 38px; --ag-sidebar-w: 192px; --ag-layout-gap: 3px; }
.fixed-top-bar {
padding: 0 var(--ag-space-3);
grid-template-columns: auto 1fr auto;
}
.topbar-center { display: none; }
.topbar-brand__name { display: none; }
}
/* =============================================================================
5. NAVIGATION — .nav-link base (applies everywhere: sidebar, dropdowns, tabs)
============================================================================= */
.navbar-nav {
font-weight: 500;
gap: 1px;
list-style: none;
margin: 0;
padding-left: 0;
}
.nav-link {
position: relative;
font-size: var(--ag-fz);
font-weight: 500;
line-height: 1.3;
color: var(--ag-fg-secondary);
padding: 5px var(--ag-space-2);
border-radius: var(--ag-radius-sm);
display: flex;
align-items: center;
gap: var(--ag-space-2);
text-decoration: none;
transition: background 0.1s ease, color 0.1s ease;
}
.nav-link:hover,
.nav-link:focus {
background: var(--ag-bg-hover);
color: var(--ag-fg);
text-decoration: none;
}
.nav-link > * { position: relative; z-index: 1; }
.nav-link-icon,
.nav-link .ti {
font-size: var(--ag-icon);
width: 14px;
flex-shrink: 0;
color: currentColor;
opacity: 0.7;
margin: 0;
text-align: center;
line-height: 1;
}
.nav-link-title {
font-size: var(--ag-fz);
font-weight: 500;
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Active item — horizontal mesh-gradient beam in brand gold palette.
Multi-stop radial mesh (champagne → coral → amber → mahogany) distributed
along the width of the link, with a blurred halo layer and a crisp left
accent. Opacities tuned to keep the text legible on top. */
.nav-link.current,
.nav-item.current > .nav-link {
color: var(--ag-fg);
font-weight: 600;
background:
radial-gradient(ellipse 35% 130% at 8% 50%, rgba(255, 240, 195, 0.55) 0%, transparent 65%), /* champagne */
radial-gradient(ellipse 35% 130% at 32% 50%, rgba(255, 170, 60, 0.28) 0%, transparent 70%), /* amber */
radial-gradient(ellipse 35% 130% at 60% 50%, rgba(255, 140, 105, 0.22) 0%, transparent 70%), /* coral */
radial-gradient(ellipse 50% 160% at 95% 50%, rgba(95, 50, 25, 0.12) 0%, transparent 80%), /* mahogany */
linear-gradient(90deg,
rgba(var(--ag-gold-rgb), 0.12) 0%,
rgba(var(--ag-gold-rgb), 0.02) 100%);
box-shadow: none;
}
/* Blurred halo behind the link — soft multicolor haze that fades at edges */
.nav-link.current::before {
content: '';
position: absolute;
inset: -4px -8px -4px -2px;
background:
radial-gradient(ellipse 50% 100% at 12% 50%, rgba(255, 220, 170, 0.55) 0%, transparent 60%),
radial-gradient(ellipse 45% 90% at 45% 50%, rgba(255, 150, 100, 0.28) 0%, transparent 65%),
radial-gradient(ellipse 40% 80% at 80% 50%, rgba(140, 70, 40, 0.10) 0%, transparent 70%);
filter: blur(7px);
pointer-events: none;
z-index: 0;
border-radius: var(--ag-radius);
opacity: 0.9;
}
.nav-link.current .ti { opacity: 1; color: var(--ag-gold); }
.current * { color: var(--ag-fg) !important; }
[data-bs-theme='dark'] .nav-link.current,
[data-bs-theme='dark'] .nav-item.current > .nav-link {
background:
radial-gradient(ellipse 35% 130% at 8% 50%, rgba(255, 240, 195, 0.40) 0%, transparent 65%),
radial-gradient(ellipse 35% 130% at 32% 50%, rgba(255, 170, 60, 0.35) 0%, transparent 70%),
radial-gradient(ellipse 35% 130% at 60% 50%, rgba(255, 140, 105, 0.28) 0%, transparent 70%),
radial-gradient(ellipse 50% 160% at 95% 50%, rgba(95, 50, 25, 0.22) 0%, transparent 80%),
linear-gradient(90deg,
rgba(var(--ag-gold-rgb), 0.18) 0%,
rgba(var(--ag-gold-rgb), 0.04) 100%);
box-shadow: none;
}
[data-bs-theme='dark'] .nav-link.current::before {
background:
radial-gradient(ellipse 50% 100% at 12% 50%, rgba(255, 220, 170, 0.50) 0%, transparent 60%),
radial-gradient(ellipse 45% 90% at 45% 50%, rgba(255, 150, 100, 0.35) 0%, transparent 65%),
radial-gradient(ellipse 40% 80% at 80% 50%, rgba(140, 70, 40, 0.18) 0%, transparent 70%);
}
[data-bs-theme='dark'] .nav-link.current .ti { color: var(--ag-gold); }
/* =============================================================================
6. BUTTONS
============================================================================= */
.btn {
/* Override Tabler's internal --tblr-btn-* vars (set ON .btn with same
specificity as ours — mine win by source order). */
--tblr-btn-font-size: var(--ag-fz-sm);
--tblr-btn-padding-x: 10px;
--tblr-btn-padding-y: 0;
--tblr-btn-line-height: 1;
--tblr-btn-font-weight: var(--ag-fw-medium);
--btn-h: var(--ag-h-sm);
--btn-px: 10px;
--btn-gap: 5px;
font-family: var(--ag-font-sans);
font-weight: var(--ag-fw-medium);
font-size: var(--ag-fz-sm) !important; /* 11px — beats any Tabler hardcoded */
line-height: 1;
letter-spacing: var(--ag-tracking-tight);
height: var(--btn-h);
min-height: var(--btn-h);
padding: 0 var(--btn-px) !important;
border: 1px solid transparent;
border-radius: var(--ag-radius-sm);
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--btn-gap);
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
box-shadow: none;
text-decoration: none;
user-select: none;
}
.btn:focus-visible { outline: none; box-shadow: var(--ag-ring-shadow); }
.btn:disabled, .btn.disabled { opacity: 0.5; pointer-events: none; }
/* ── Loading state ──
Used by LoadingButton (public/scripts/global.js). The spinner inherits the
button's text color via `currentColor`, so it works on dark, light, ghost,
and outline variants without per-variant tweaks. A disabled-but-not-faded
look so the button keeps its identity while showing progress. */
.btn.is-loading {
opacity: 1 !important;
pointer-events: none;
cursor: progress;
}
.btn-spinner {
display: inline-block;
width: 14px;
height: 14px;
border-radius: 50%;
border: 1.6px solid currentColor;
border-right-color: transparent;
border-bottom-color: transparent;
animation: btn-spin 0.7s linear infinite;
opacity: 0.95;
flex-shrink: 0;
}
.btn-sm .btn-spinner { width: 12px; height: 12px; border-width: 1.5px; }
@keyframes btn-spin {
to { transform: rotate(360deg); }
}
.btn-loading-content {
display: inline-flex;
align-items: center;
gap: 8px;
line-height: 1;
}
/* Icons inside buttons: kill the legacy `me-2` margin so flex gap is the
single source of truth for icon↔text spacing. */
.btn .ti,
.btn > i {
font-size: var(--ag-icon);
line-height: 1;
margin: 0 !important;
opacity: 0.85;
}
.btn .me-1, .btn .me-2, .btn .me-3,
.btn .ms-1, .btn .ms-2, .btn .ms-3 { margin: 0 !important; }
/* Sizes — only override the three tokens (px/gap/h/font), inherit everything else */
.btn-xs { --btn-h: var(--ag-h-xs); --btn-px: 6px; --btn-gap: 4px; font-size: var(--ag-fz-xs) !important; border-radius: var(--ag-radius-xs); }
.btn-sm { --btn-h: var(--ag-h-sm); --btn-px: 8px; --btn-gap: 4px; font-size: var(--ag-fz-xs) !important; }
.btn-lg { --btn-h: var(--ag-h); --btn-px: 12px; --btn-gap: 6px; font-size: var(--ag-fz) !important; border-radius: var(--ag-radius); }
/* Icon-only button (square, no horizontal padding) */
.btn-icon { width: var(--btn-h); padding: 0 !important; --btn-gap: 0; }
.btn-icon .ti { font-size: var(--ag-icon-md); }
.btn-icon.btn-sm .ti { font-size: var(--ag-icon); }
.btn-icon.btn-xs .ti { font-size: var(--ag-icon-sm); }
/* ── Primary CTA: dark with subtle gradient + inset highlight (premium) ── */
.btn-primary,
.btn-github,
.btn-dark {
background: linear-gradient(180deg, #2a2e35 0%, var(--ag-fg) 100%) !important;
border-color: var(--ag-fg) !important;
color: #ffffff !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.btn-primary:hover,
.btn-github:hover,
.btn-dark:hover,
.btn-primary:focus,
.btn-github:focus,
.btn-dark:focus {
background: linear-gradient(180deg, #383c44 0%, #2a2e35 100%) !important;
border-color: #2a2e35 !important;
color: #ffffff !important;
}
.btn-primary:active,
.btn-github:active,
.btn-dark:active {
background: var(--ag-fg) !important;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}
[data-bs-theme='dark'] .btn-primary,
[data-bs-theme='dark'] .btn-github,
[data-bs-theme='dark'] .btn-dark {
background: linear-gradient(180deg, #ffffff 0%, #e5e7eb 100%) !important;
border-color: #e5e7eb !important;
color: #0f1115 !important;
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.08);
}
[data-bs-theme='dark'] .btn-primary:hover,
[data-bs-theme='dark'] .btn-github:hover,
[data-bs-theme='dark'] .btn-dark:hover {
background: linear-gradient(180deg, #f9fafb 0%, #d1d5db 100%) !important;
border-color: #d1d5db !important;
color: #0f1115 !important;
}
/* ── Brand gold CTA (uses brand gradient per BSS) ── */
.btn-gold,
.btn-brand {
background: linear-gradient(135deg, var(--ag-gold-mid) 0%, var(--ag-gold) 60%, var(--ag-gold-hover) 100%) !important;
border-color: var(--ag-gold-hover) !important;
color: #ffffff !important;
text-shadow: 0 1px 0 rgba(var(--ag-ink-rgb), 0.15);
box-shadow: 0 1px 2px rgba(var(--ag-ink-rgb), 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.btn-gold:hover,
.btn-brand:hover {
background: linear-gradient(135deg, var(--ag-gold) 0%, var(--ag-gold-hover) 60%, var(--ag-gold-deep) 100%) !important;
border-color: var(--ag-gold-deep) !important;
color: #ffffff !important;
}
/* ── Secondary (muted, neutral with subtle depth) ── */
.btn-secondary,
.btn-default {
background: linear-gradient(180deg, var(--ag-bg) 0%, var(--ag-bg-subtle) 100%) !important;
border-color: var(--ag-border) !important;
color: var(--ag-fg) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.btn-secondary:hover,
.btn-default:hover {
background: linear-gradient(180deg, var(--ag-bg-subtle) 0%, var(--ag-bg-muted) 100%) !important;
border-color: var(--ag-border-strong) !important;
color: var(--ag-fg) !important;
}
.btn-secondary:active,
.btn-default:active {
background: var(--ag-bg-muted) !important;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}
/* ── Success / Danger / Warning / Info ── */
.btn-success {
background-color: var(--ag-success) !important;
border-color: var(--ag-success) !important;
color: #ffffff !important;
}
.btn-success:hover { background-color: #15803d !important; border-color: #15803d !important; }
.btn-danger {
background-color: var(--ag-danger) !important;
border-color: var(--ag-danger) !important;
color: #ffffff !important;
}
.btn-danger:hover { background-color: #c1121f !important; border-color: #c1121f !important; }
.btn-warning {
background-color: var(--ag-warning) !important;
border-color: var(--ag-warning) !important;
color: #ffffff !important;
}
.btn-warning:hover { background-color: #d97706 !important; border-color: #d97706 !important; }
.btn-info {
background-color: var(--ag-info) !important;
border-color: var(--ag-info) !important;
color: #ffffff !important;
}
.btn-info:hover { background-color: #2563eb !important; border-color: #2563eb !important; }
/* ── Outline variants ── */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-default,
.btn-primary-outlined,
.btn-github-outlined {
background-color: transparent !important;
border: 1px solid var(--ag-border) !important;
color: var(--ag-fg) !important;
}
.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-default:hover,
.btn-primary-outlined:hover,
.btn-github-outlined:hover {
background-color: var(--ag-bg-hover) !important;
border-color: var(--ag-border-strong) !important;
color: var(--ag-fg) !important;
}
.btn-outline-success {
background-color: transparent !important;
border: 1px solid var(--ag-success) !important;
color: var(--ag-success) !important;
}
.btn-outline-success:hover {
background-color: var(--ag-success) !important;
color: #ffffff !important;
}
.btn-outline-danger {
background-color: transparent !important;
border: 1px solid var(--ag-danger) !important;
color: var(--ag-danger) !important;
}
.btn-outline-danger:hover {
background-color: var(--ag-danger) !important;
color: #ffffff !important;
}
/* ── Ghost (transparent, sidebar-like) ── */
.btn-ghost,
.btn-ghost-secondary,
.btn-ghost-primary {
background-color: transparent !important;
border-color: transparent !important;
color: var(--ag-fg-secondary) !important;
}
.btn-ghost:hover,
.btn-ghost-secondary:hover,
.btn-ghost-primary:hover {
background-color: var(--ag-bg-hover) !important;
color: var(--ag-fg) !important;
}
/* ── Link variant ── */
.btn-link,
.btn.link-secondary {
color: var(--ag-fg-muted) !important;
text-decoration: none !important;
border: none !important;
background: transparent !important;
padding: 0 var(--ag-space-1) !important;
height: auto;
}
.btn-link:hover,
.btn.link-secondary:hover {
color: var(--ag-fg) !important;
text-decoration: underline !important;
text-underline-offset: 3px;
}
/* ── Transparent legacy class ── */
.btn-transparent {
background-color: transparent;
border-color: transparent;
box-shadow: none;
color: var(--ag-fg-secondary);
}
.btn-transparent:hover {
background-color: var(--ag-bg-hover);
color: var(--ag-fg);
}
/* ── Soft (light tint) buttons used in tables / icons ── */
.btn.bg-warning-lt { background-color: var(--ag-warning-soft) !important; color: var(--ag-warning-fg) !important; border: none !important; }
.btn.bg-warning-lt:hover { background-color: #fde68a !important; }
.btn.bg-success-lt { background-color: var(--ag-success-soft) !important; color: var(--ag-success-fg) !important; border: none !important; }
.btn.bg-success-lt:hover { background-color: #bbf7d0 !important; }
.btn.bg-info-lt,
.btn.bg-blue-lt { background-color: var(--ag-info-soft) !important; color: var(--ag-info-fg) !important; border: none !important; }
.btn.bg-info-lt:hover, .btn.bg-blue-lt:hover { background-color: #bfdbfe !important; }
.btn.bg-purple-lt { background-color: #f3e8ff !important; color: #6b21a8 !important; border: none !important; }
.btn.bg-purple-lt:hover { background-color: #e9d5ff !important; }
.btn.bg-danger-lt,
.btn.bg-red-lt { background-color: var(--ag-danger-soft) !important; color: var(--ag-danger-fg) !important; border: none !important; }
[data-bs-theme='dark'] .btn.bg-warning-lt { background-color: var(--ag-warning-soft) !important; color: var(--ag-warning-fg) !important; }
[data-bs-theme='dark'] .btn.bg-success-lt { background-color: var(--ag-success-soft) !important; color: var(--ag-success-fg) !important; }
[data-bs-theme='dark'] .btn.bg-info-lt,
[data-bs-theme='dark'] .btn.bg-blue-lt { background-color: var(--ag-info-soft) !important; color: var(--ag-info-fg) !important; }
[data-bs-theme='dark'] .btn.bg-danger-lt,
[data-bs-theme='dark'] .btn.bg-red-lt { background-color: var(--ag-danger-soft) !important; color: var(--ag-danger-fg) !important; }
[data-bs-theme='dark'] .btn.bg-purple-lt { background-color: rgba(168, 85, 247, 0.15) !important; color: #c084fc !important; }
/* Close button — globally consistent across modals, offcanvas, popovers, toasts.
Circular, currentColor-masked X via pseudo-element so it adapts to color tokens.
Neutralizes Tabler defaults: oversized 3.5rem dimensions, absolute positioning,
content-box sizing, SVG bg, blue focus ring. */
.btn-close,
.btn-close:not(:disabled):not(.disabled),
.modal-content .btn-close,
.modal-header .btn-close,
.offcanvas-header .btn-close,
.toast-header .btn-close {
--close-size: 32px;
--close-icon: 14px;
box-sizing: border-box !important;
width: var(--close-size) !important;
height: var(--close-size) !important;
min-width: var(--close-size) !important;
min-height: var(--close-size) !important;
padding: 0 !important;
margin: 0 !important;
position: static !important;
top: auto !important;
right: auto !important;
left: auto !important;
z-index: auto !important;
background: var(--ag-bg-subtle) !important;
background-image: none !important;
border: 1px solid transparent !important;
border-radius: 50% !important;
color: var(--ag-fg-muted) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer;
opacity: 1 !important;
box-shadow: none !important;
filter: none !important;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
flex-shrink: 0;
align-self: center;
}
.btn-close::before,
.modal-content .btn-close::before,
.modal-header .btn-close::before,
.offcanvas-header .btn-close::before,
.toast-header .btn-close::before {
content: '';
display: block;
width: var(--close-icon);
height: var(--close-icon);
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M5.3 5.3a1 1 0 0 1 1.4 0L12 10.6l5.3-5.3a1 1 0 0 1 1.4 1.4L13.4 12l5.3 5.3a1 1 0 0 1-1.4 1.4L12 13.4l-5.3 5.3a1 1 0 0 1-1.4-1.4L10.6 12 5.3 6.7a1 1 0 0 1 0-1.4z'/%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='%23fff'%3E%3Cpath d='M5.3 5.3a1 1 0 0 1 1.4 0L12 10.6l5.3-5.3a1 1 0 0 1 1.4 1.4L13.4 12l5.3 5.3a1 1 0 0 1-1.4 1.4L12 13.4l-5.3 5.3a1 1 0 0 1-1.4-1.4L10.6 12 5.3 6.7a1 1 0 0 1 0-1.4z'/%3E%3C/svg%3E") no-repeat center / contain;
transition: transform 0.15s ease;
}
.btn-close:hover,
.modal-content .btn-close:hover,
.modal-header .btn-close:hover,
.offcanvas-header .btn-close:hover,
.toast-header .btn-close:hover {
background: var(--ag-bg-hover) !important;
color: var(--ag-fg) !important;
border-color: var(--ag-border) !important;
}
.btn-close:hover::before { transform: scale(1.08); }
.btn-close:active,
.modal-content .btn-close:active {
background: var(--ag-bg-muted) !important;
}
.btn-close:focus,
.btn-close:focus-visible {
outline: none;
background: var(--ag-bg-hover) !important;
color: var(--ag-fg) !important;
border-color: var(--ag-border) !important;
box-shadow: 0 0 0 3px var(--ag-gold-soft) !important;
}
.btn-close.position-absolute {
box-shadow: none !important;
}
/* Ensure modal/offcanvas headers always vertically center the close button */
.modal-header,
.offcanvas-header {
align-items: center !important;
}
/* Link-button (used in custom UI) */
.link-button {
background: none;
border: none;
color: var(--ag-info);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 4px;
font-size: var(--ag-fz);
padding: 0;
}
.link-button:hover .link-text { text-decoration: underline; text-underline-offset: 3px; }
.link-button .ti { font-size: var(--ag-icon-md); }
/* =============================================================================
7. CARDS & SURFACES
============================================================================= */
.card {
background-color: var(--ag-bg-elev);
border: 1px solid var(--ag-border);
border-radius: var(--ag-radius);
box-shadow: var(--ag-shadow-xs);
overflow: visible;
}
.card-header {
background-color: transparent;
border-bottom: 1px solid var(--ag-border);
padding: var(--ag-space-2) var(--ag-space-3);
font-weight: 500;
font-size: var(--ag-fz);
min-height: 0;
}
.card-footer {
background-color: transparent;
border-top: 1px solid var(--ag-border);
padding: var(--ag-space-2) var(--ag-space-3);
}
.card-title {
font-weight: 600;
font-size: var(--ag-fz-md);
letter-spacing: -0.008em;
margin-bottom: 2px;
}
.card-body { padding: var(--ag-space-3); }
[data-bs-theme='dark'] .card { background-color: var(--ag-bg-elev); border-color: var(--ag-border); box-shadow: none; }
[data-bs-theme='dark'] .card-header,
[data-bs-theme='dark'] .card-footer { background-color: transparent; border-color: var(--ag-border); }
/* Generic surfaces */
.bg-surface { background-color: var(--ag-bg-elev) !important; }
.bg-surface-secondary { background-color: var(--ag-bg-subtle) !important; }
.bg-surface-tertiary { background-color: var(--ag-bg-muted) !important; }
/* =============================================================================
8. FORMS — input, select, textarea
============================================================================= */
.form-control,
.form-select {
height: var(--ag-h-sm);
min-height: var(--ag-h-sm);
padding: 0 var(--ag-space-2) !important;
background-color: var(--ag-bg-elev);
border: 1px solid var(--ag-border);
border-radius: var(--ag-radius-sm);
font-size: var(--ag-fz-sm) !important; /* 11px — beats Tabler hardcoded .875rem */
line-height: 1;
color: var(--ag-fg);
transition: border-color 0.12s ease, box-shadow 0.12s ease;
box-shadow: none;
}
.form-control:hover,
.form-select:hover { border-color: var(--ag-border-strong); }
.form-control:focus,
.form-select:focus {
border-color: var(--ag-gold);
box-shadow: var(--ag-ring-shadow);
outline: none;
background-color: var(--ag-bg-elev);
color: var(--ag-fg);
}
.form-control::placeholder,
.form-select::placeholder {
color: var(--ag-fg-muted);
font-size: var(--ag-fz-sm);
}
.form-control:disabled,
.form-control[readonly] { background-color: var(--ag-bg-subtle); color: var(--ag-fg-muted); cursor: not-allowed; }
/* `.form-control-sm` / `.form-select-sm` neutralized to match the default
`.form-control` size (--ag-h-sm = 24px, --ag-fz-sm = 11px) so the entire
system stays consistent. Saves having to refactor every markup that uses -sm. */
.form-control-sm,
.form-select-sm { height: var(--ag-h-sm); min-height: var(--ag-h-sm); padding: 0 var(--ag-space-2) !important; font-size: var(--ag-fz-sm) !important; }
.form-control-lg,
.form-select-lg { height: var(--ag-h); min-height: var(--ag-h); padding: 0 var(--ag-space-3) !important; font-size: var(--ag-fz) !important; }
textarea.form-control {
height: auto;
min-height: 72px;
padding: var(--ag-space-2) var(--ag-space-3) !important;
line-height: var(--ag-lh);
resize: vertical;
}
.form-label,
label {
font-size: var(--ag-fz);
font-weight: 500;
color: var(--ag-fg);
margin-bottom: 3px;
letter-spacing: -0.003em;
}
.form-text,
.form-hint { font-size: var(--ag-fz-xs); color: var(--ag-fg-muted); margin-top: 4px; }
.form-group,
.mb-3 { margin-bottom: var(--ag-space-3) !important; }
/* Input group */
.input-group {
flex-wrap: nowrap;
}
.input-group-text {
height: var(--ag-h);
padding: 0 var(--ag-space-2);
background-color: var(--ag-bg-subtle);
border: 1px solid var(--ag-border);
color: var(--ag-fg-muted);
font-size: var(--ag-fz-sm);
border-radius: var(--ag-radius-sm);
display: inline-flex;
align-items: center;
}
.input-group .form-control,
.input-group .form-select,
.input-group .btn { height: var(--ag-h); }
/* Checkboxes & radios — Tabler ships with multiple conflicting size rules
(.form-check-input { height/width: 1rem }, plus a heavier one at 1.5rem
used by .form-check-lg). To win against all of them we need !important. */
.form-check {
display: flex;
align-items: center;
gap: var(--ag-space-2);
padding-left: 0 !important;
margin-bottom: 4px;
min-height: 18px;
}
.form-check .form-check-input { float: none !important; margin: 0 !important; }
.form-check-input,
input.form-check-input[type='checkbox'],
input.form-check-input[type='radio'] {
width: 14px !important;
height: 14px !important;
min-width: 14px;
background-color: var(--ag-bg-elev) !important;
background-size: 11px !important;
border: 1.5px solid var(--ag-border-strong) !important;
border-radius: var(--ag-radius-xs) !important;
cursor: pointer;
margin: 0 !important;
flex-shrink: 0;
vertical-align: middle;
transition: background 0.12s ease, border-color 0.12s ease;
appearance: none;
-webkit-appearance: none;
}
.form-check-input[type='radio'],
input.form-check-input[type='radio'] { border-radius: 50% !important; }
.form-check-input:hover { border-color: var(--ag-fg-muted) !important; }
.form-check-input:focus {
border-color: var(--ag-gold) !important;
box-shadow: var(--ag-ring-shadow) !important;
outline: none;
}
.form-check-input:checked,
input.form-check-input:checked {
background-color: var(--ag-gold) !important;
border-color: var(--ag-gold) !important;
background-repeat: no-repeat !important;
background-position: center !important;
}
.form-check-input[type='checkbox']:checked {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M4 8.5l2.5 2.5l5.5 -5.5'/%3e%3c/svg%3e") !important;
}
.form-check-input[type='radio']:checked {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3ccircle r='3.5' fill='%23ffffff' cx='8' cy='8'/%3e%3c/svg%3e") !important;
background-size: 14px !important;
}
/* Default checkbox/switch label — sm matches the density of adjacent helper
text (`.form-text`) so toggles don't visually dominate their context. */
.form-check-label { font-size: var(--ag-fz-sm); color: var(--ag-fg); cursor: pointer; }
/* Switch labels are tighter — pair often with a hint underneath, so the
label should read as a control caption (xs, medium) not as body text. */
.form-switch .form-check-label,
.form-switch > .form-check-label {
font-size: var(--ag-fz-xs);
font-weight: var(--ag-fw-medium);
color: var(--ag-fg);
line-height: 1.3;
letter-spacing: var(--ag-tracking-tight);
}
/* Switch — Tabler default is 32×18; we want a smaller pill */
.form-switch { padding-left: 0; gap: var(--ag-space-2); }
.form-switch .form-check-input,
.form-switch input.form-check-input[type='checkbox'] {
width: 24px !important;
height: 13px !important;
min-width: 24px;
background-color: var(--ag-border-strong) !important;
background-size: 9px 9px !important;
background-position: 2px center !important;
background-repeat: no-repeat !important;
border: none !important;
border-radius: var(--ag-radius-pill) !important;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e") !important;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
transition: background-color 0.15s ease, background-position 0.15s ease;
cursor: pointer;
margin: 0 !important;
flex-shrink: 0;
appearance: none;
-webkit-appearance: none;
}
.form-switch .form-check-input:hover {
background-color: var(--ag-fg-muted) !important;
}
.form-switch .form-check-input:checked {
background-color: var(--ag-gold) !important;
background-position: calc(100% - 2px) center !important;
border: none !important;
box-shadow: none;
}
.form-switch .form-check-input:checked:hover {
background-color: var(--ag-gold) !important;
filter: brightness(0.97);
}
/* Form selectgroup */
.form-selectgroup-label {
background-color: var(--ag-bg-elev);
border: 1px solid var(--ag-border);
color: var(--ag-fg);
border-radius: var(--ag-radius-sm);
padding: 6px var(--ag-space-3);
font-size: var(--ag-fz);
transition: all 0.12s ease;
}
.form-selectgroup-label:hover { background-color: var(--ag-bg-hover); color: var(--ag-fg); border-color: var(--ag-border-strong); }
.form-selectgroup-input:checked + .form-selectgroup-label {
background-color: var(--ag-gold-soft);
border-color: var(--ag-gold);
color: var(--ag-fg);
}
.form-selectgroup-input:checked + .form-selectgroup-label .form-selectgroup-check {
background-color: var(--ag-gold);
border-color: var(--ag-gold);
}
/* =============================================================================
9. TOM SELECT — match form-control parity
============================================================================= */
.ts-wrapper,
.ts-wrapper.single,
.ts-wrapper.multi,
.ts-wrapper.form-control,
.ts-wrapper.form-select {
min-height: 0 !important;
padding: 0 !important;
border: none !important;
background: transparent !important;
box-shadow: none !important;
}
.ts-control,
.ts-wrapper .ts-control,
.ts-wrapper.single .ts-control,
.ts-wrapper.multi .ts-control {
background-color: var(--ag-bg-elev) !important;
border: 1px solid var(--ag-border) !important;
border-radius: var(--ag-radius-sm) !important;
height: var(--ag-h-sm) !important;
min-height: var(--ag-h-sm) !important;
padding: 0 var(--ag-space-2) !important;
font-size: var(--ag-fz-sm) !important;
color: var(--ag-fg) !important;
line-height: 1 !important;
display: flex !important;
align-items: center !important;
flex-wrap: nowrap !important;
overflow: hidden !important;
transition: border-color 0.12s ease, box-shadow 0.12s ease !important;
}
.ts-wrapper.multi .ts-control {
max-height: none !important;
flex-wrap: wrap !important;
padding: 2px 6px !important;
height: auto !important;
min-height: var(--ag-h-sm) !important;
gap: 3px;
}
.ts-wrapper .ts-control:hover { border-color: var(--ag-border-strong) !important; }
.ts-wrapper.focus .ts-control {
border-color: var(--ag-gold) !important;
box-shadow: var(--ag-ring-shadow) !important;
}
.ts-control input,
.ts-wrapper .ts-control input {
height: auto !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
line-height: 1 !important;
font-size: var(--ag-fz-sm) !important;
color: var(--ag-fg) !important;
border: none !important;
box-shadow: none !important;
background: transparent !important;
}
.ts-control input::placeholder { color: var(--ag-fg-muted) !important; font-size: var(--ag-fz-sm) !important; }
.ts-wrapper.multi .ts-control > div {
background-color: var(--ag-bg-muted) !important;
border: 1px solid var(--ag-border) !important;
color: var(--ag-fg) !important;
border-radius: var(--ag-radius-xs) !important;
padding: 0 6px !important;
font-size: var(--ag-fz-xs) !important;
line-height: 18px !important;
height: 18px !important;
margin: 0 !important;
display: inline-flex !important;
align-items: center;
}
.ts-wrapper.multi .ts-control > div .remove {
color: var(--ag-fg-muted) !important;
border-color: transparent !important;
padding: 0 0 0 4px !important;
}
.ts-wrapper.multi .ts-control > div .remove:hover { color: var(--ag-fg) !important; background: transparent !important; }
.ts-wrapper.single .ts-control:after {
border-color: var(--ag-fg-muted) transparent transparent transparent;
}
/* Single-select item rendering — clamp to one line + ellipsis. Without this,
long option text (e.g. "Inversores Lima 02 Mayo") wraps inside the
fixed-height control because TomSelect's default .item has no overflow
handling. Multi-select wraps as chips and is unaffected. */
.ts-wrapper.single .ts-control > .item {
flex: 0 1 auto !important;
min-width: 0 !important;
max-width: 100% !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
line-height: 1.2 !important;
padding: 0 !important;
margin: 0 !important;
}
/* Single-select search input — collapse to width 0 ONLY when there's a
selected item AND the dropdown is closed. This way:
- No selection → input visible at full width → placeholder shows ("Selecciona…")
- Selection + closed → input collapsed → .item gets full row with ellipsis
- Selection + open → input expanded, .item hidden → search replaces value visually
The `.has-items` class is added by TomSelect whenever a value is selected. */
.ts-wrapper.single.has-items:not(.dropdown-active) .ts-control > input {
width: 0 !important;
min-width: 0 !important;
flex: 0 0 0 !important;
}
.ts-wrapper.single.dropdown-active .ts-control > input {
flex: 1 1 auto !important;
min-width: 30px !important;
}
.ts-wrapper.single.has-items.dropdown-active .ts-control > .item {
display: none !important;
}
.ts-dropdown {
background-color: var(--ag-bg-elev) !important;
border: 1px solid var(--ag-border) !important;
border-radius: var(--ag-radius) !important;
box-shadow: var(--ag-shadow) !important;
padding: var(--ag-space-1) !important;
margin-top: 4px !important;
}
.ts-dropdown .option {
border-radius: var(--ag-radius-xs) !important;
font-size: var(--ag-fz) !important;
padding: 6px var(--ag-space-2) !important;
color: var(--ag-fg) !important;
}
.ts-dropdown .option:hover,
.ts-dropdown .option.active {
background-color: var(--ag-bg-hover) !important;
color: var(--ag-fg) !important;
}
.ts-dropdown .option.selected { background-color: var(--ag-gold-soft) !important; color: var(--ag-fg) !important; }
.ts-dropdown .optgroup-header { background-color: transparent !important; color: var(--ag-fg-muted) !important; font-size: var(--ag-fz-sm); font-weight: var(--ag-fw-semibold); padding: 6px var(--ag-space-2) 2px !important; }
.ts-dropdown .no-results { color: var(--ag-fg-muted) !important; font-size: var(--ag-fz-sm); padding: var(--ag-space-2); }
/* =============================================================================
10. BADGES & STATUS PILLS
============================================================================= */
/* =============================================================================
BADGES — modern, semantic, with status-dot pattern
─────────────────────────────────────────────────────────────────────────────
Variants:
• Default (soft): .badge.bg-{color}-lt → subtle tint + matching text
• Solid: .badge.bg-{color} → solid fill + white text
• Outline: .badge-outline + color → 1px border, transparent bg
• Status dot: .badge-dot → leading dot ● (auto-color)
• Counter: .badge-counter → tabular nums, mono
Colors: primary (info), success, danger, warning, info, secondary, gold
============================================================================= */
.badge {
font-family: var(--ag-font-sans);
font-weight: var(--ag-fw-medium);
font-size: var(--ag-fz-xs);
line-height: 1;
padding: 3px 7px;
height: 18px;
border-radius: var(--ag-radius-pill);
letter-spacing: 0;
display: inline-flex;
align-items: center;
gap: 4px;
border: 1px solid transparent;
white-space: nowrap;
transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
/* ── Soft variants — subtle tint background + matching foreground.
Border is a very subtle tinted line for definition (not pure border). */
.badge.bg-primary-lt,
.badge.bg-blue-lt {
background-color: var(--ag-info-soft) !important;
color: var(--ag-info-fg) !important;
border-color: rgba(59, 130, 246, 0.18);
}
.badge.bg-success-lt,
.badge.bg-green-lt {
background-color: var(--ag-success-soft) !important;
color: var(--ag-success-fg) !important;
border-color: rgba(22, 163, 74, 0.18);
}
.badge.bg-danger-lt,
.badge.bg-red-lt {
background-color: var(--ag-danger-soft) !important;
color: var(--ag-danger-fg) !important;
border-color: rgba(229, 72, 77, 0.18);
}
.badge.bg-warning-lt,
.badge.bg-orange-lt,
.badge.bg-yellow-lt {
background-color: var(--ag-warning-soft) !important;
color: var(--ag-warning-fg) !important;
border-color: rgba(245, 158, 11, 0.22);
}
.badge.bg-secondary-lt {
background-color: var(--ag-bg-muted) !important;
color: var(--ag-fg-secondary) !important;
border-color: var(--ag-border);
}
.badge.bg-gold-lt {
background-color: var(--ag-gold-soft) !important;
color: var(--ag-gold-deep) !important;
border-color: rgba(var(--ag-gold-rgb), 0.28);
}
.badge.bg-purple-lt {
background-color: rgba(168, 85, 247, 0.12) !important;
color: #7c3aed !important;
border-color: rgba(168, 85, 247, 0.20);
}
/* ── Solid variants — slight gradient for premium feel */
.badge.bg-primary {
background: linear-gradient(180deg, var(--ag-fg) 0%, #2a2e35 100%) !important;
color: #fff !important;
border-color: transparent;
}
.badge.bg-success {
background: linear-gradient(180deg, var(--ag-success) 0%, #15803d 100%) !important;
color: #fff !important;
border-color: transparent;
}
.badge.bg-danger {
background: linear-gradient(180deg, var(--ag-danger) 0%, #c1121f 100%) !important;
color: #fff !important;
border-color: transparent;
}
.badge.bg-warning {
background: linear-gradient(180deg, var(--ag-warning) 0%, #d97706 100%) !important;
color: #fff !important;
border-color: transparent;
}
.badge.bg-info {
background: linear-gradient(180deg, var(--ag-info) 0%, #2563eb 100%) !important;
color: #fff !important;
border-color: transparent;
}
.badge.bg-gold {
background: linear-gradient(180deg, var(--ag-gold-mid) 0%, var(--ag-gold) 60%, var(--ag-gold-hover) 100%) !important;
color: #fff !important;
border-color: rgba(var(--ag-gold-rgb), 0.4);
text-shadow: 0 1px 0 rgba(var(--ag-ink-rgb), 0.18);
}
/* ── Outline variant — border only, transparent bg */
.badge-outline { background: transparent !important; border-width: 1px; }
.badge-outline.bg-success-lt,
.badge-outline.bg-green-lt { border-color: var(--ag-success) !important; color: var(--ag-success) !important; }
.badge-outline.bg-danger-lt,
.badge-outline.bg-red-lt { border-color: var(--ag-danger) !important; color: var(--ag-danger) !important; }
.badge-outline.bg-warning-lt { border-color: var(--ag-warning) !important; color: var(--ag-warning) !important; }
.badge-outline.bg-info-lt,
.badge-outline.bg-blue-lt,
.badge-outline.bg-primary-lt { border-color: var(--ag-info) !important; color: var(--ag-info) !important; }
.badge-outline.bg-gold-lt { border-color: var(--ag-gold) !important; color: var(--ag-gold-deep) !important; }
/* ── Status dot — leading colored circle, like Linear/GitHub */
.badge-dot::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
flex-shrink: 0;
background: currentColor;
box-shadow: 0 0 0 2px rgba(var(--ag-gold-rgb), 0); /* placeholder, no ring */
}
.badge-dot.bg-success-lt::before,
.badge-dot.bg-green-lt::before { background: var(--ag-success); }
.badge-dot.bg-danger-lt::before,
.badge-dot.bg-red-lt::before { background: var(--ag-danger); }
.badge-dot.bg-warning-lt::before { background: var(--ag-warning); }
.badge-dot.bg-info-lt::before,
.badge-dot.bg-blue-lt::before,
.badge-dot.bg-primary-lt::before { background: var(--ag-info); }
.badge-dot.bg-secondary-lt::before { background: var(--ag-fg-muted); }
.badge-dot.bg-gold-lt::before { background: var(--ag-gold); }
/* Animated pulsing dot for live status (use with .badge-dot.is-live) */
.badge-dot.is-live::before {
box-shadow: 0 0 0 0 currentColor;
animation: ag-badge-pulse 1.6s ease-out infinite;
}
@keyframes ag-badge-pulse {
0% { box-shadow: 0 0 0 0 rgba(var(--ag-gold-rgb), 0.45); }
70% { box-shadow: 0 0 0 5px rgba(var(--ag-gold-rgb), 0); }
100% { box-shadow: 0 0 0 0 rgba(var(--ag-gold-rgb), 0); }
}
@media (prefers-reduced-motion: reduce) {
.badge-dot.is-live::before { animation: none; }
}
/* ── Counter — for numeric counts (e.g. unread, leads count) */
.badge-counter {
font-family: var(--ag-font-mono);
font-variant-numeric: tabular-nums slashed-zero;
letter-spacing: -0.01em;
min-width: 18px;
justify-content: center;
}
/* Dark mode adjustments */
[data-bs-theme='dark'] .badge { border-color: rgba(255, 255, 255, 0.06); }
[data-bs-theme='dark'] .badge.bg-gold-lt { color: var(--ag-gold-mid) !important; }
/* Legacy aliases — keep for backwards compat */
.gold-badge {
background: linear-gradient(180deg, var(--ag-gold-mid) 0%, var(--ag-gold) 60%, var(--ag-gold-hover) 100%);
color: #fff;
border: 1px solid rgba(var(--ag-gold-rgb), 0.4);
border-radius: var(--ag-radius-pill);
padding: 3px 8px;
font-size: var(--ag-fz-xs);
font-weight: var(--ag-fw-medium);
text-shadow: 0 1px 0 rgba(var(--ag-ink-rgb), 0.18);
display: inline-flex;
align-items: center;
gap: 4px;
height: 18px;
}
.blue-badge {
background-color: var(--ag-info-soft);
color: var(--ag-info-fg);
border: 1px solid rgba(59, 130, 246, 0.18);
border-radius: var(--ag-radius-pill);
padding: 3px 7px;
font-size: var(--ag-fz-xs);
height: 18px;
display: inline-flex;
align-items: center;
}
.wine-badge {
background-color: var(--ag-danger-soft);
color: var(--ag-danger-fg);
border: 1px solid rgba(229, 72, 77, 0.18);
border-radius: var(--ag-radius-pill);
padding: 3px 7px;
font-size: var(--ag-fz-xs);
height: 18px;
display: inline-flex;
align-items: center;
}
/* =============================================================================
11. DROPDOWNS & MENUS
============================================================================= */
.dropdown-menu {
background-color: var(--ag-bg-elev);
border: 1px solid var(--ag-border);
border-radius: var(--ag-radius);
box-shadow: var(--ag-shadow);
padding: var(--ag-space-1);
font-size: var(--ag-fz-sm) !important;
color: var(--ag-fg);
min-width: 180px;
animation: ag-dropdown-in 0.12s ease-out;
}
@keyframes ag-dropdown-in {
from { opacity: 0; translate: 0 -4px; }
to { opacity: 1; translate: 0 0; }
}
.dropdown-item {
border-radius: var(--ag-radius-xs);
padding: 4px var(--ag-space-2);
font-size: var(--ag-fz-sm);
color: var(--ag-fg);
transition: background 0.1s ease;
display: flex;
align-items: center;
gap: 6px;
line-height: 1.4;
}
.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active,
.dropdown-item:active {
background-color: var(--ag-bg-hover);
color: var(--ag-fg);
}
.dropdown-item .ti { font-size: var(--ag-icon-sm); opacity: 0.75; width: 14px; }
.dropdown-divider {
border-top: 1px solid var(--ag-border);
margin: var(--ag-space-1) 0;
opacity: 1;
}
.dropdown-header {
font-size: var(--ag-fz-sm);
font-weight: var(--ag-fw-semibold);
color: var(--ag-fg-muted);
padding: var(--ag-space-2) var(--ag-space-2) 4px;
}
.dropdown-toggle:after { margin-top: -0.2em !important; }
/* Animate dropdown chevron */
[data-bs-toggle='dropdown'] .chevron {
transition: transform 0.18s ease;
transform-origin: center;
}
[data-bs-toggle='dropdown'][aria-expanded='true'] .chevron {
transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
[data-bs-toggle='dropdown'] .chevron { transition: none; }
.dropdown-menu { animation: none; }
}
/* =============================================================================
12. MODALS
============================================================================= */
.modal-content {
background-color: var(--ag-bg-elev);
border: 1px solid var(--ag-border);
border-radius: var(--ag-radius-lg);
box-shadow: var(--ag-shadow-lg);
}
.modal-header {
padding: var(--ag-space-3) var(--ag-space-4);
border-bottom: 1px solid var(--ag-border);
}
.modal-header .modal-title {
font-weight: 600;
font-size: var(--ag-fz-md);
letter-spacing: -0.008em;
}
.modal-body { padding: var(--ag-space-4); }
.modal-footer {
padding: var(--ag-space-2) var(--ag-space-4);
border-top: 1px solid var(--ag-border);
gap: var(--ag-space-2);
}
.modal-footer > * { margin: 0; }
.modal-backdrop.show { opacity: 0.5; }
[data-bs-theme='dark'] .modal-backdrop.show { opacity: 0.7; }
/* =============================================================================
13. TABLES & DATATABLES
============================================================================= */
/* Data tables read better at sm — base body fz (--ag-fz, ~14px) felt
oversized for dense rows. Headers drop one more notch to xs.
`!important` is needed because Tabler ships `.table-bordered` /
`.card-table` variants with explicit font-sizes that win specificity
ties. Applied to every cell flavor so DT-rendered tables (which
sometimes use higher-specificity selectors via dataTables.bootstrap5)
inherit too. */
.table,
.table > thead > tr > th,
.table > thead > tr > td,
.table > tbody > tr > th,
.table > tbody > tr > td,
.table > tfoot > tr > th,
.table > tfoot > tr > td,
.dataTables_wrapper table.dataTable,
.dataTables_wrapper table.dataTable th,
.dataTables_wrapper table.dataTable td {
font-size: var(--ag-fz-sm) !important;
}
.table thead th,
.dataTables_wrapper table.dataTable thead th {
font-size: var(--ag-fz-xs) !important;
font-weight: var(--ag-fw-semibold) !important;
color: var(--ag-fg-muted) !important;
text-transform: uppercase !important;
letter-spacing: 0.04em !important;
}
.table {
color: var(--ag-fg);
margin-bottom: 0;
--tblr-table-bg: transparent;
}
.table > :not(caption) > * > * {
padding: 5px var(--ag-space-3);
border-bottom: 1px solid var(--ag-border);
}
.table thead th {
background-color: transparent;
border-bottom: 1px solid var(--ag-border) !important;
padding: 6px var(--ag-space-3) !important;
white-space: nowrap;
}
.table tbody tr { transition: background 0.1s ease; }
.table tbody tr:hover { cursor: pointer; }
.table-hover > tbody > tr:hover > * {
background-color: var(--ag-bg-hover);
}
.table.table-borderless tbody tr td,
.table.table-borderless tbody tr th { border: 0; }
td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Bordered inside card — no double */
.card > .table-bordered,
.card > .card-body > .table-bordered { border: 0; }
.card > .table-bordered > :not(caption) > *:last-child > * { border-bottom: 0; }
/* DataTables wrapper styling (extracted from ~6 views) */
/* Match the .table density bump above — sm body font, consistent with
how we read data-tables. */
.dataTables_wrapper { flex: 1; font-size: var(--ag-fz-sm); }
.dataTables_wrapper .dataTable {
table-layout: fixed;
width: 100% !important;
overflow-x: auto;
}
.dataTables_wrapper .bottom-table { display: none; }
.dataTables_filter input,
.dataTables_length select {
height: var(--ag-h-sm);
padding: 0 var(--ag-space-2);
font-size: var(--ag-fz-sm);
background-color: var(--ag-bg-elev);
border: 1px solid var(--ag-border);
border-radius: var(--ag-radius-sm);
color: var(--ag-fg);
}
.dataTables_info { font-size: var(--ag-fz-xs); color: var(--ag-fg-muted); }
.dataTables_scrollHead tr { border-bottom: 0 !important; }
/* Kill the default vertical gap DataTables leaves between the sticky header
container and the body container when `scrollX: true` is enabled. Without
this every table-in-modal (stats, leads, contacts, free-inbox, etc.) had
a 12–16px dead zone right under the header. Applied globally so all tables
render consistently. */
.dataTables_wrapper .dataTables_scrollHead,
.dataTables_wrapper div.dt-scroll-head {
margin-bottom: 0 !important;
border-bottom: 0 !important;
}
.dataTables_wrapper .dataTables_scrollBody,
.dataTables_wrapper div.dt-scroll-body {
margin-top: 0 !important;
border-top: 0 !important;
}
/* When scrollX is enabled, DataTables duplicates the inside
the scroll body for column-width alignment, and hides it via
`visibility: hidden`. That hidden row still occupies vertical space
— visible as a dead ~30-40px strip below the real header. Collapse
its row height to zero so the first data row sits flush against the
sticky header. Column widths stay aligned because the cell elements
are still in the table flow (just zero-height). */
.dataTables_wrapper .dataTables_scrollBody > table > thead,
.dataTables_wrapper div.dt-scroll-body > table > thead {
visibility: hidden;
line-height: 0;
}
.dataTables_wrapper .dataTables_scrollBody > table > thead > tr,
.dataTables_wrapper div.dt-scroll-body > table > thead > tr {
height: 0 !important;
}
.dataTables_wrapper .dataTables_scrollBody > table > thead > tr > th,
.dataTables_wrapper .dataTables_scrollBody > table > thead > tr > td,
.dataTables_wrapper div.dt-scroll-body > table > thead > tr > th,
.dataTables_wrapper div.dt-scroll-body > table > thead > tr > td {
padding: 0 !important;
border: 0 !important;
height: 0 !important;
line-height: 0 !important;
font-size: 0 !important;
}
.dataTables_paginate { padding-top: var(--ag-space-2) !important; }
.dataTables_paginate .pagination {
margin-bottom: 0;
justify-content: flex-end;
}
.dataTables_length { display: flex; align-items: center; gap: 6px; }
.dt-checkboxes-select-all > input { opacity: 0; }
.bottom-table {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--ag-space-2) var(--ag-space-3) 0;
}
.bottom-table .form-select {
height: var(--ag-h-sm);
border-radius: var(--ag-radius-sm) !important;
}
div.dts div.dt-scroll-body,
div.dts div.dataTables_scrollBody { background: none !important; }
div.dts div.dt-scroll-body table,
div.dts div.dataTables_scrollBody table { background-color: transparent !important; }
/* Progress column ellipsis (extracted from views) */
.progress_col {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.progressbg { padding: 3px var(--ag-space-2) !important; }
/* =============================================================================
14. PAGINATION
============================================================================= */
.pagination { gap: 2px; }
.page-link {
background-color: transparent;
border: 1px solid var(--ag-border);
color: var(--ag-fg);
border-radius: var(--ag-radius-sm);
font-size: var(--ag-fz-sm);
height: var(--ag-h-sm);
min-width: var(--ag-h-sm);
padding: 0 var(--ag-space-2);
display: inline-flex;
align-items: center;
justify-content: center;
}
.page-link:hover {
background-color: var(--ag-bg-hover);
color: var(--ag-fg);
border-color: var(--ag-border-strong);
}
.page-item.active .page-link,
.page-link.active {
background-color: var(--ag-fg);
border-color: var(--ag-fg);
color: #ffffff;
}
[data-bs-theme='dark'] .page-item.active .page-link {
background-color: #ffffff;
border-color: #ffffff;
color: var(--ag-bg);
}
.page-item.disabled .page-link { color: var(--ag-fg-disabled); }
/* =============================================================================
15. TABS
============================================================================= */
.nav-tabs {
border-bottom: 1px solid var(--ag-border);
gap: var(--ag-space-1);
}
.nav-tabs .nav-link {
font-weight: 500;
font-size: var(--ag-fz);
color: var(--ag-fg-secondary);
border: none;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
padding: 6px var(--ag-space-3);
border-radius: 0;
background: transparent;
transition: color 0.12s ease, border-color 0.12s ease;
}
.nav-tabs .nav-link:hover {
color: var(--ag-fg);
background: transparent;
border-color: transparent;
border-bottom-color: var(--ag-border-strong);
}
.nav-tabs .nav-link.active {
color: var(--ag-fg);
background: transparent;
border-color: transparent;
border-bottom-color: var(--ag-gold);
font-weight: 600;
}
/* Vertical tabs */
.nav-tabs.flex-column {
border-bottom: 0;
gap: 1px;
}
.nav-tabs.flex-column .nav-link {
width: 100%;
text-align: left;
border-radius: var(--ag-radius-sm);
border-bottom: none;
padding: 6px var(--ag-space-2);
margin-bottom: 0;
background-color: transparent;
}
.nav-tabs.flex-column .nav-link:hover { background-color: var(--ag-bg-hover); border: none; }
.nav-tabs.flex-column .nav-link.active {
background-color: var(--ag-gold-soft);
border-bottom: none;
color: var(--ag-fg);
}
.nav-tabs.flex-column .nav-link::before { content: none !important; }
/* Card header tabs */
.card-header-tabs {
background-color: transparent;
font-weight: 500;
}
.card-header-tabs .nav-link.active {
background-color: transparent !important;
border-width: 0 0 2px 0 !important;
border-bottom-color: var(--ag-gold) !important;
}
.card-header-tabs .nav-link:hover {
background-color: transparent !important;
border-width: 0 0 2px 0 !important;
border-bottom-color: rgba(var(--ag-gold-rgb), 0.5) !important;
}
/* ── "new-tabs" — global pill style (gold soft when active) ──
Single source of truth for tab styling across the system. */
ul.new-tabs[data-bs-toggle='tabs'] {
border: 0 !important;
gap: var(--ag-space-1) !important;
padding: 0;
}
ul.new-tabs[data-bs-toggle='tabs'] .nav-link {
position: relative;
z-index: 0;
display: inline-flex;
align-items: center;
height: var(--ag-h-sm);
padding: 0 var(--ag-space-3) !important;
border: none !important;
border-radius: var(--ag-radius-sm) !important;
background: transparent !important;
color: var(--ag-fg-muted) !important;
font-size: var(--ag-fz-sm) !important;
font-weight: var(--ag-fw-medium) !important;
line-height: 1;
transition:
background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
color 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
ul.new-tabs[data-bs-toggle='tabs'] .nav-link .ti {
font-size: var(--ag-icon-sm) !important;
opacity: 0.7;
margin-right: var(--ag-space-1) !important;
}
ul.new-tabs[data-bs-toggle='tabs'] .nav-link:hover {
background: var(--ag-bg-hover) !important;
color: var(--ag-fg) !important;
}
ul.new-tabs[data-bs-toggle='tabs'] .nav-link:hover .ti { opacity: 0.9; }
ul.new-tabs[data-bs-toggle='tabs'] .nav-link.active {
background: var(--ag-gold-soft) !important;
color: var(--ag-gold-deep) !important;
font-weight: var(--ag-fw-semibold) !important;
box-shadow: none !important;
}
ul.new-tabs[data-bs-toggle='tabs'] .nav-link.active .ti {
color: var(--ag-gold) !important;
opacity: 1;
}
ul.new-tabs[data-bs-toggle='tabs'] .nav-link.active::before { content: none; }
/* Tab icons inherit text color but stay stroke-only (Lucide).
`fill: currentColor` would break stroke icons by filling them solid. */
ul.new-tabs[data-bs-toggle='tabs'] .nav-link svg { color: currentColor; }
ul.new-tabs.flex-column[data-bs-toggle='tabs'] .nav-link {
width: 100%;
text-align: left;
justify-content: flex-start;
}
[data-bs-theme='dark'] ul.new-tabs[data-bs-toggle='tabs'] .nav-link.active {
background: rgba(var(--ag-gold-rgb), 0.16) !important;
color: var(--ag-gold) !important;
}
/* ─────────────────────────────────────────────────────────────────────
TYPE-PICKER MODAL & OFFCANVAS CHIP / EMPTY-STATE
Reusable building blocks for the "choose a type" interaction pattern
(trigger types, path-condition types, future node-type pickers, etc.).
Three components:
- .choose-type-modal / .choose-type-grid / .choose-type-card
The modal grid where the user picks among rich, descriptive options
- .oc-type-chip
A horizontal pill in the offcanvas header showing the current
choice + a "Change" button that re-opens the picker
- .oc-empty-card
The "no choice yet — pick one" placeholder shown when a node has
no type set (forces the user to deliberately choose via modal)
──────────────────────────────────────────────────────────────────── */
/* Modal shell */
.choose-type-modal .modal-dialog { max-width: 760px; }
.choose-type-modal .modal-header {
padding: var(--ag-space-3) var(--ag-space-4);
border-bottom: 1px solid var(--ag-border);
gap: var(--ag-space-3);
align-items: flex-start;
}
.choose-type-modal .modal-body {
padding: var(--ag-space-4);
background: var(--ag-bg);
}
.choose-type-modal .modal-footer {
padding: var(--ag-space-2) var(--ag-space-4);
border-top: 1px solid var(--ag-border);
}
.choose-type-modal__icon {
width: 40px; height: 40px;
flex-shrink: 0;
border-radius: 10px;
background: var(--ag-gold-soft);
color: var(--ag-gold-deep);
display: flex; align-items: center; justify-content: center;
font-size: var(--ag-fz-xl);
}
/* Grid of option cards — responsive: more columns when there's room. The min
width is small enough that 3 cards fit on a tablet and 4 on a wide modal.
`grid-auto-rows: 1fr` makes every row the same height (driven by the row
with the tallest card). Combined with the description line-clamp below,
this gives visually uniform cards regardless of copy length. */
.choose-type-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-auto-rows: 1fr;
align-items: stretch;
gap: var(--ag-space-2);
}
/* Individual option card — compact, low-density. Icon + title share a row to
save vertical space; description is a short paragraph below. Pull-up on
hover replaced by a subtle bg + border shift (no transform — less jarring
when scanning a grid). */
.choose-type-card {
position: relative;
background: var(--ag-bg-elev);
border: 1px solid var(--ag-border);
border-radius: var(--ag-radius);
padding: var(--ag-space-3);
text-align: left;
display: flex;
flex-direction: column;
gap: 6px;
cursor: pointer;
transition: border-color 0.12s ease, background-color 0.12s ease;
color: var(--ag-fg);
font-family: inherit;
}
.choose-type-card:hover {
border-color: var(--ag-gold);
background: color-mix(in srgb, var(--ag-gold-soft) 35%, var(--ag-bg-elev));
}
.choose-type-card:focus-visible {
outline: 2px solid var(--ag-gold);
outline-offset: 2px;
}
.choose-type-card.is-selected {
border-color: var(--ag-gold);
background: var(--ag-gold-soft);
}
.choose-type-card.is-disabled {
opacity: 0.6;
cursor: not-allowed;
pointer-events: none;
background: var(--ag-bg);
}
/* `is-incompat` is a stronger flavor of `is-disabled` used when the card
doesn't match the current funnel's channel. Minimalist: no busy dashed
background — just dimmed + dashed border. The constraint copy below the
description carries the message. */
.choose-type-card.is-incompat {
background: var(--ag-bg);
border-style: dashed;
}
.choose-type-card.is-incompat .choose-type-card__icon {
background: var(--ag-bg);
color: var(--ag-fg-muted);
}
.choose-type-card.is-incompat .choose-type-card__title {
color: var(--ag-fg-muted);
}
.choose-type-card__incompat {
display: flex;
align-items: flex-start;
gap: 5px;
padding: 5px 7px;
margin-top: auto;
border-radius: var(--ag-radius-sm);
background: rgba(225, 105, 50, 0.08);
color: #b25419;
font-size: 10.5px;
font-weight: var(--ag-fw-semibold);
line-height: 1.35;
}
.choose-type-card__incompat .ti {
font-size: 12px;
flex-shrink: 0;
margin-top: 1px;
}
[data-bs-theme='dark'] .choose-type-card__incompat {
background: rgba(225, 105, 50, 0.14);
color: #ff9c66;
}
/* Header row: icon + title side by side. Saves the ~28px of vertical
stack the old design used. */
.choose-type-card__header {
display: flex;
align-items: center;
gap: 8px;
}
.choose-type-card__icon {
width: 28px; height: 28px;
border-radius: 7px;
background: var(--ag-gold-soft);
color: var(--ag-gold-deep);
display: flex; align-items: center; justify-content: center;
font-size: 15px;
flex-shrink: 0;
}
.choose-type-card__title {
font-weight: var(--ag-fw-semibold);
font-size: var(--ag-fz-sm);
color: var(--ag-fg);
line-height: 1.25;
}
.choose-type-card__desc {
font-size: var(--ag-fz-xs);
color: var(--ag-fg-muted);
line-height: 1.4;
/* Clamp to 3 lines globally so cards have a predictable description box
* regardless of copy length. The add-node modal overrides this to 2
* lines because its cards are smaller and denser.
*/
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Example collapses to a single italic line with no decorative box — the
"EJ" label is gone, the muted italic style is enough to signal "this is
an example" without a chrome wrapper. */
.choose-type-card__example {
font-size: 11px;
line-height: 1.35;
color: var(--ag-fg-muted);
font-style: italic;
padding-left: 8px;
border-left: 2px solid var(--ag-border);
}
.choose-type-card__example-label { display: none; }
.choose-type-card__example-text { font-style: italic; }
/* Meta row sits at the bottom; no top border (was visual noise). */
.choose-type-card__meta {
display: flex; gap: 4px; flex-wrap: wrap;
margin-top: 2px;
}
.choose-type-card__channel {
display: inline-flex; align-items: center; gap: 3px;
font-size: 10px;
padding: 1px 5px;
border-radius: 3px;
background: var(--ag-bg);
color: var(--ag-fg-muted);
font-weight: var(--ag-fw-semibold);
line-height: 1.5;
}
.choose-type-card__channel .ti { font-size: 11px; }
/* Brand-tinted channel pills — match the sidebar block channel badge so the
visual vocabulary is consistent across the editor. */
.choose-type-card__channel.ch-whatsapp { color: #1ea456; background: rgba(37, 211, 102, 0.12); }
.choose-type-card__channel.ch-instagram { color: #c52a5c; background: rgba(225, 48, 108, 0.12); }
.choose-type-card__channel.ch-email { color: #1f86d1; background: rgba(51, 168, 252, 0.13); }
[data-bs-theme='dark'] .choose-type-card__channel.ch-whatsapp { color: #4ee08a; background: rgba(37, 211, 102, 0.16); }
[data-bs-theme='dark'] .choose-type-card__channel.ch-instagram { color: #ff5d8d; background: rgba(225, 48, 108, 0.18); }
[data-bs-theme='dark'] .choose-type-card__channel.ch-email { color: #5dbcff; background: rgba(51, 168, 252, 0.18); }
/* Funnel-context badge in the modal header — tells the user up-front which
channel they're configuring, so the disabled cards downstream make sense.
Same brand color system as the per-card channel pills. */
.choose-type-modal__funnel-context {
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 9px;
border-radius: 999px;
font-size: 11px;
font-weight: var(--ag-fw-semibold);
letter-spacing: 0.01em;
background: var(--ag-bg);
color: var(--ag-fg-muted);
white-space: nowrap;
}
.choose-type-modal__funnel-context .ti { font-size: 12px; }
.choose-type-modal__funnel-context.ch-whatsapp { color: #1ea456; background: rgba(37, 211, 102, 0.12); }
.choose-type-modal__funnel-context.ch-instagram { color: #c52a5c; background: rgba(225, 48, 108, 0.12); }
.choose-type-modal__funnel-context.ch-email { color: #1f86d1; background: rgba(51, 168, 252, 0.13); }
[data-bs-theme='dark'] .choose-type-modal__funnel-context.ch-whatsapp { color: #4ee08a; background: rgba(37, 211, 102, 0.16); }
[data-bs-theme='dark'] .choose-type-modal__funnel-context.ch-instagram { color: #ff5d8d; background: rgba(225, 48, 108, 0.18); }
[data-bs-theme='dark'] .choose-type-modal__funnel-context.ch-email { color: #5dbcff; background: rgba(51, 168, 252, 0.18); }
.choose-type-card__selected-badge {
position: absolute;
top: 8px; right: 8px;
width: 18px; height: 18px;
border-radius: 50%;
background: var(--ag-gold);
color: #fff;
display: none;
align-items: center; justify-content: center;
font-size: 11px;
}
.choose-type-card.is-selected .choose-type-card__selected-badge { display: flex; }
/* ── Choose-type LIST variant ───────────────────────────────────────
Horizontal row layout used by small pickers with N options where a
2-D grid leaves visual gaps (last row uneven). Each row: icon +
title/description stack + channel pills / lock on the right.
Scales linearly with vertical scroll, no orphan cells.
──────────────────────────────────────────────────────────────────── */
.choose-type-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.choose-type-list__item {
display: flex;
align-items: center;
gap: var(--ag-space-3);
padding: 10px var(--ag-space-3);
background: var(--ag-bg-elev);
border: 1px solid var(--ag-border);
border-radius: var(--ag-radius);
cursor: pointer;
transition: border-color 0.12s ease, background-color 0.12s ease;
text-align: left;
color: var(--ag-fg);
font-family: inherit;
position: relative;
}
.choose-type-list__item:hover {
border-color: var(--ag-gold);
background: color-mix(in srgb, var(--ag-gold-soft) 35%, var(--ag-bg-elev));
}
.choose-type-list__item:focus-visible {
outline: 2px solid var(--ag-gold);
outline-offset: 2px;
}
.choose-type-list__item.is-selected {
border-color: var(--ag-gold);
background: var(--ag-gold-soft);
}
.choose-type-list__item.is-disabled,
.choose-type-list__item.is-incompat {
cursor: not-allowed;
pointer-events: none;
border-style: dashed;
background: var(--ag-bg);
}
.choose-type-list__item.is-incompat .choose-type-list__icon {
background: var(--ag-bg);
color: var(--ag-fg-muted);
}
.choose-type-list__item.is-incompat .choose-type-list__title,
.choose-type-list__item.is-disabled .choose-type-list__title {
color: var(--ag-fg-muted);
}
.choose-type-list__item.is-incompat .choose-type-list__desc {
color: color-mix(in srgb, var(--ag-fg-muted) 70%, transparent);
}
.choose-type-list__icon {
width: 36px; height: 36px;
border-radius: 9px;
background: var(--ag-gold-soft);
color: var(--ag-gold-deep);
display: flex; align-items: center; justify-content: center;
font-size: 17px;
flex-shrink: 0;
}
.choose-type-list__body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 1px;
}
.choose-type-list__title {
font-size: var(--ag-fz-sm);
font-weight: var(--ag-fw-semibold);
color: var(--ag-fg);
line-height: 1.3;
}
.choose-type-list__desc {
font-size: var(--ag-fz-xs);
color: var(--ag-fg-muted);
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.choose-type-list__aside {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.choose-type-list__chevron {
color: var(--ag-fg-muted);
font-size: 14px;
opacity: 0;
transition: opacity 0.15s ease, transform 0.15s ease;
}
.choose-type-list__item:hover .choose-type-list__chevron {
opacity: 0.7;
transform: translateX(2px);
}
/* Lock chip replaces the channel pills when the option is incompatible
with the current funnel — keeps the row layout intact, just swaps the
right-side content. */
.choose-type-list__lock {
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 8px;
border-radius: 999px;
font-size: 10.5px;
font-weight: var(--ag-fw-semibold);
line-height: 1.3;
background: rgba(225, 105, 50, 0.10);
color: #b25419;
white-space: nowrap;
}
.choose-type-list__lock .ti { font-size: 12px; }
[data-bs-theme='dark'] .choose-type-list__lock {
background: rgba(225, 105, 50, 0.18);
color: #ff9c66;
}
/* ─────────────────────────────────────────────────────────────────────
STATS DETAIL MODAL (#see-messages-modal)
Wider layout for the rich detail view: summary cards on top, filter
tabs + search in the middle, table fills the rest. The summary
reuses the same mini-funnel visual vocabulary from the canvas card
footer so the stats feel consistent across surfaces.
──────────────────────────────────────────────────────────────────── */
/* Funnel-context banner — sits at the very top of the modal body and
shows drop-off context: "X of Y funnel leads reached this step".
Different scale from the per-message metrics below, so it gets its
own visual treatment (gold accent, full-width, larger numbers). */
.stats-funnel-context {
display: flex;
align-items: center;
gap: var(--ag-space-3);
padding: var(--ag-space-3) var(--ag-space-4);
background: color-mix(in srgb, var(--ag-gold-soft) 50%, transparent);
border-bottom: 1px solid var(--ag-border);
}
.stats-funnel-context > .ti {
font-size: var(--ag-fz-xl);
color: var(--ag-gold-deep);
flex-shrink: 0;
}
.stats-funnel-context__text {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.stats-funnel-context__line {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--ag-space-2);
font-family: var(--ag-font-sans);
}
.stats-funnel-context__label {
font-size: var(--ag-fz-xs);
font-weight: var(--ag-fw-semibold);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--ag-gold-deep);
}
.stats-funnel-context__count {
font-size: var(--ag-fz-sm);
color: var(--ag-fg);
font-variant-numeric: tabular-nums;
}
.stats-funnel-context__count strong {
font-size: var(--ag-fz-md);
font-weight: var(--ag-fw-semibold);
}
.stats-funnel-context__hint {
color: var(--ag-fg-muted);
font-size: var(--ag-fz-xs);
margin-left: 4px;
}
.stats-funnel-context__bar {
height: 5px;
background: rgba(255, 255, 255, 0.5);
border-radius: 999px;
overflow: hidden;
}
.stats-funnel-context__bar-fill {
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, var(--ag-gold), var(--ag-gold-deep));
transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.stats-funnel-context__pct {
font-size: var(--ag-fz-lg);
font-weight: var(--ag-fw-semibold);
color: var(--ag-gold-deep);
font-variant-numeric: tabular-nums;
flex-shrink: 0;
}
[data-bs-theme='dark'] .stats-funnel-context {
background: rgba(212, 175, 55, 0.15);
}
[data-bs-theme='dark'] .stats-funnel-context > .ti,
[data-bs-theme='dark'] .stats-funnel-context__label,
[data-bs-theme='dark'] .stats-funnel-context__pct {
color: var(--ag-gold);
}
[data-bs-theme='dark'] .stats-funnel-context__bar {
background: rgba(0, 0, 0, 0.25);
}
/* Summary grid — 4 metric cards in a row */
.stats-summary-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--ag-space-2);
padding: var(--ag-space-3) var(--ag-space-4) 0;
}
.stats-summary-card {
padding: var(--ag-space-2) var(--ag-space-3);
background: var(--ag-bg);
border: 1px solid var(--ag-border);
border-radius: var(--ag-radius);
display: flex;
flex-direction: column;
gap: 6px;
cursor: pointer;
transition: border-color 0.12s ease, background-color 0.12s ease;
}
.stats-summary-card:hover {
border-color: color-mix(in srgb, var(--ag-gold) 60%, var(--ag-border));
background: var(--ag-bg-elev);
}
.stats-summary-card.is-active {
border-color: var(--ag-gold);
background: color-mix(in srgb, var(--ag-gold-soft) 50%, var(--ag-bg-elev));
}
.stats-summary-card__head {
display: flex;
align-items: center;
gap: 6px;
font-family: var(--ag-font-sans);
font-size: var(--ag-fz-xs);
font-weight: var(--ag-fw-semibold);
color: var(--ag-fg-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.stats-summary-card__head .ti {
font-size: var(--ag-fz-sm);
opacity: 0.85;
}
.stats-summary-card__count {
font-size: var(--ag-fz-lg);
font-weight: var(--ag-fw-semibold);
color: var(--ag-fg);
line-height: 1.15;
font-variant-numeric: tabular-nums;
}
.stats-summary-card__pct {
font-size: var(--ag-fz-xs);
font-weight: var(--ag-fw-medium);
color: var(--ag-fg-muted);
margin-left: 4px;
}
.stats-summary-card__bar {
height: 4px;
background: color-mix(in srgb, var(--ag-fg-muted) 14%, transparent);
border-radius: 999px;
overflow: hidden;
}
.stats-summary-card__bar-fill {
height: 100%;
border-radius: 999px;
transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.stats-summary-card--sent .stats-summary-card__bar-fill { background: #94a3b8; }
.stats-summary-card--sent .stats-summary-card__head { color: #6c7a8a; }
.stats-summary-card--delivered .stats-summary-card__bar-fill { background: #25d366; }
.stats-summary-card--delivered .stats-summary-card__head { color: #1ea456; }
.stats-summary-card--seen .stats-summary-card__bar-fill { background: #3b82f6; }
.stats-summary-card--seen .stats-summary-card__head { color: #2563eb; }
.stats-summary-card--error .stats-summary-card__bar-fill { background: #dc6532; }
.stats-summary-card--error .stats-summary-card__head { color: #b25419; }
/* ─────────────────────────────────────────────────────────────────────
APP-EDITOR TOOLBAR — primary save + segmented history group
Shared visual language between the funnel flow editor and the
email-builder editor. The "Guardar" CTA is a brand-green gradient
primary button; "Deshacer / Rehacer" live in a segmented icon-only
pill. Both apps render identically by using these classes.
──────────────────────────────────────────────────────────────────── */
/* Primary save button — brand-green gradient, with states for
saving / saved / error driven by classes the host app can toggle.
Uses --ag-h-sm (26px) / --ag-fz-sm tokens so it matches the
surrounding `.btn` elements in flow editor toolbars (which all
sit at the default 26px). Email-builder ships its own slightly
larger override in its bundled CSS for its standalone UI. */
.primary-btn {
height: var(--ag-h-sm);
min-height: var(--ag-h-sm);
padding: 0 10px;
border-radius: var(--ag-radius-sm);
border: 1px solid var(--ag-success, #2fb344);
background: linear-gradient(180deg,
color-mix(in srgb, var(--ag-success, #2fb344) 85%, #fff) 0%,
var(--ag-success, #2fb344) 100%);
color: #fff;
font-family: var(--ag-font-sans);
font-size: var(--ag-fz-sm);
font-weight: var(--ag-fw-medium);
line-height: 1;
letter-spacing: var(--ag-tracking-tight);
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
transition: background 0.12s, border-color 0.12s, box-shadow 0.12s, opacity 0.12s;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
white-space: nowrap;
}
.primary-btn:hover:not(:disabled) {
background: linear-gradient(180deg,
var(--ag-success, #2fb344) 0%,
color-mix(in srgb, var(--ag-success, #2fb344) 80%, #000) 100%);
border-color: color-mix(in srgb, var(--ag-success, #2fb344) 80%, #000);
}
.primary-btn:active:not(:disabled) {
background: color-mix(in srgb, var(--ag-success, #2fb344) 80%, #000);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18);
}
.primary-btn:disabled {
opacity: 0.6;
cursor: progress;
}
.primary-btn svg,
.primary-btn .ti {
width: var(--ag-icon);
height: var(--ag-icon);
font-size: var(--ag-icon);
}
.primary-btn.is-error {
background: linear-gradient(180deg, #f87171 0%, var(--ag-danger, #d63939) 100%);
border-color: var(--ag-danger, #d63939);
}
.primary-btn.is-error:hover:not(:disabled) {
background: linear-gradient(180deg, var(--ag-danger, #d63939) 0%, #c1121f 100%);
}
.primary-btn__spinner {
width: var(--ag-icon);
height: var(--ag-icon);
border-radius: 50%;
border: 1.5px solid rgba(255, 255, 255, 0.45);
border-top-color: #fff;
animation: primary-btn-spin 0.7s linear infinite;
flex-shrink: 0;
}
@keyframes primary-btn-spin {
to { transform: rotate(360deg); }
}
/* Segmented icon-button group — used for Undo/Redo histories. Rounded
pill with subtle bg, individual buttons are icon-only with hover +
disabled states.
Sizing: outer height matches `.primary-btn` (--ag-h-sm = 26px)
thanks to 2px padding + 22px (--ag-h-xs) inner buttons. Square by
default for icon-only; expand naturally when content has a label. */
.segmented {
display: inline-flex;
background: var(--ag-bg-subtle, var(--ag-bg));
border: 1px solid var(--ag-border);
border-radius: var(--ag-radius-sm);
padding: 2px;
gap: 1px;
height: var(--ag-h-sm);
box-sizing: border-box;
}
.segmented > button,
.segmented > a {
height: var(--ag-h-xs);
min-width: var(--ag-h-xs);
padding: 0 8px;
border-radius: var(--ag-radius-xs);
border: 0;
background: transparent;
color: var(--ag-fg-muted);
font-family: var(--ag-font-sans);
font-size: var(--ag-fz-xs);
font-weight: var(--ag-fw-medium);
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
cursor: pointer;
letter-spacing: var(--ag-tracking-tight);
transition: background 0.12s, color 0.12s, box-shadow 0.12s;
}
.segmented > button:hover:not(:disabled),
.segmented > a:hover {
color: var(--ag-fg);
background: color-mix(in srgb, var(--ag-fg-muted) 8%, transparent);
}
.segmented > button:disabled {
color: var(--ag-fg-disabled, color-mix(in srgb, var(--ag-fg-muted) 50%, transparent));
cursor: not-allowed;
}
.segmented > button.is-active,
.segmented > a.is-active {
background: var(--ag-bg-elev);
color: var(--ag-fg);
box-shadow: 0 0 0 1px var(--ag-border);
}
.segmented > button svg,
.segmented > button .ti,
.segmented > a svg,
.segmented > a .ti {
width: var(--ag-icon);
height: var(--ag-icon);
font-size: var(--ag-icon);
}
/* Footnote under the summary cards — privacy disclaimer for "Vistos"
(depends on the lead's WhatsApp read-receipt setting). Subtle but
visible so users don't misread a low number as low engagement. */
.stats-summary-note {
display: flex;
align-items: flex-start;
gap: 8px;
padding: var(--ag-space-2) var(--ag-space-4) 0;
color: var(--ag-fg-muted);
font-size: var(--ag-fz-xs);
line-height: 1.45;
}
.stats-summary-note .ti {
font-size: var(--ag-fz-sm);
flex-shrink: 0;
margin-top: 1px;
opacity: 0.7;
}
.stats-summary-note strong {
color: var(--ag-fg);
font-weight: var(--ag-fw-semibold);
}
/* Filter bar — context label on the left, search on the right. Tabs were
removed in favor of toggling via the summary cards above; this bar just
communicates the current filter and offers a clear button. */
.stats-filter-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--ag-space-3);
padding: var(--ag-space-2) var(--ag-space-4);
border-bottom: 1px solid var(--ag-border);
flex-wrap: wrap;
}
.stats-filter-bar__context {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: var(--ag-fz-sm);
color: var(--ag-fg);
flex: 1;
min-width: 0;
flex-wrap: wrap;
}
.stats-filter-bar__context strong { color: var(--ag-fg); font-weight: var(--ag-fw-semibold); }
.stats-filter-bar__clear {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px; height: 22px;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--ag-fg-muted);
cursor: pointer;
transition: background-color 0.12s ease, color 0.12s ease;
margin-left: 2px;
}
.stats-filter-bar__clear:hover {
background: var(--ag-bg-hover);
color: var(--ag-fg);
}
.stats-filter-bar__clear .ti { font-size: var(--ag-fz-md); }
.stats-filter-bar .stats-search {
width: 240px;
max-width: 100%;
flex-shrink: 0;
}
/* Table wrapper — scrolls vertically inside the modal. Horizontal scroll
is handled by DataTables' own scrollX container (we don't need our own
sticky-header CSS because scrollX gives a native scrollHead container).
Data rows use the smaller `--ag-fz-sm` so the list feels denser without
sacrificing legibility. */
.stats-table-wrap {
flex: 1;
overflow-y: auto;
padding: 0 var(--ag-space-4) var(--ag-space-3);
}
.stats-table-wrap #see-messages-table tbody td {
font-size: var(--ag-fz-sm);
}
/* Date columns shouldn't truncate at default widths — let them breathe
so "21/04/26, 10:32" stays readable. The horizontal scroll is there
for the rare case when many columns combined exceed modal width. */
.stats-table-wrap #see-messages-table tbody td {
white-space: nowrap;
}
/* Status pill in the table */
.stats-status-pill {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: 999px;
font-size: var(--ag-fz-xs);
font-weight: var(--ag-fw-semibold);
line-height: 1.4;
white-space: nowrap;
}
.stats-status-pill .ti { font-size: var(--ag-fz-sm); }
.stats-status-pill--seen { background: rgba(59, 130, 246, 0.12); color: #2563eb; }
.stats-status-pill--delivered { background: rgba(37, 211, 102, 0.12); color: #1ea456; }
.stats-status-pill--sent { background: rgba(148, 163, 184, 0.16); color: #475569; }
.stats-status-pill--error { background: rgba(220, 101, 50, 0.12); color: #b25419; }
[data-bs-theme='dark'] .stats-status-pill--seen { background: rgba(59, 130, 246, 0.2); color: #5dbcff; }
[data-bs-theme='dark'] .stats-status-pill--delivered { background: rgba(37, 211, 102, 0.18); color: #4ee08a; }
[data-bs-theme='dark'] .stats-status-pill--sent { background: rgba(148, 163, 184, 0.22); color: #c8d2dc; }
[data-bs-theme='dark'] .stats-status-pill--error { background: rgba(220, 101, 50, 0.2); color: #ff9c66; }
/* Wait-remaining pill — shown in the wait modal table per lead. Three
semantic buckets:
• waiting (default) → neutral grey, lead is comfortably ahead
• soon (< 1h left) → amber, getting close
• ready (≤ 0) → gold, queue should have already advanced */
.wait-remaining-pill {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 999px;
font-size: var(--ag-fz-xs);
font-weight: var(--ag-fw-semibold);
line-height: 1.4;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.wait-remaining-pill--waiting {
background: rgba(148, 163, 184, 0.16);
color: #475569;
}
.wait-remaining-pill--soon {
background: rgba(254, 134, 15, 0.12);
color: #b25419;
}
.wait-remaining-pill--ready {
background: var(--ag-gold-soft);
color: var(--ag-gold-deep);
}
[data-bs-theme='dark'] .wait-remaining-pill--waiting { background: rgba(148, 163, 184, 0.22); color: #c8d2dc; }
[data-bs-theme='dark'] .wait-remaining-pill--soon { background: rgba(254, 134, 15, 0.22); color: #ffb27a; }
[data-bs-theme='dark'] .wait-remaining-pill--ready { background: rgba(212, 175, 55, 0.22); color: var(--ag-gold); }
@media (max-width: 720px) {
.stats-summary-grid { grid-template-columns: repeat(2, 1fr); }
.stats-filter-bar .stats-search { width: 100%; }
}
.choose-type-list__selected-badge {
width: 18px; height: 18px;
border-radius: 50%;
background: var(--ag-gold);
color: #fff;
display: none;
align-items: center; justify-content: center;
font-size: 11px;
flex-shrink: 0;
}
.choose-type-list__item.is-selected .choose-type-list__selected-badge { display: flex; }
.choose-type-list__item.is-selected .choose-type-list__chevron { display: none; }
/* Offcanvas: horizontal type chip with "Change" affordance */
.oc-type-chip {
display: flex;
align-items: center;
gap: var(--ag-space-3);
padding: var(--ag-space-2) var(--ag-space-3);
background: var(--ag-bg-elev);
border: 1px solid var(--ag-border);
border-radius: var(--ag-radius);
}
.oc-type-chip__icon {
width: 36px; height: 36px;
flex-shrink: 0;
border-radius: 9px;
background: var(--ag-gold-soft);
color: var(--ag-gold-deep);
display: flex; align-items: center; justify-content: center;
font-size: 18px;
}
.oc-type-chip__text { flex: 1; min-width: 0; }
.oc-type-chip__label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ag-fg-muted);
font-weight: var(--ag-fw-semibold);
line-height: 1.2;
}
.oc-type-chip__name {
font-size: var(--ag-fz-md);
font-weight: var(--ag-fw-semibold);
color: var(--ag-fg);
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ── Add-node modal: split layout (vertical nav + uniform grid) ─────
The add-node picker has many cards across multiple categories (Mensajería,
Inteligencia, Lógica, CRM). Instead of stacking category headers inline,
we split the modal into a left vertical nav (categories) and a right
content area (cards). Benefits:
• All cards are the same size (3-col uniform grid)
• User filters by category with one click — less scrolling
• Search composes with category filter
• Familiar pattern: Notion / Linear / Figma plugin picker
──────────────────────────────────────────────────────────────────── */
/* Search bar pinned at the top of the modal body. Un-scoped so it works
for both the add-node modal and the wait-stats modal — both pin a
search at the top of a stats-table-wrap, and they need the same
padding (var(--ag-space-4) lateral) so the input edge lines up with
the table cell padding below. */
.add-node-search-bar {
padding: var(--ag-space-3) var(--ag-space-4);
border-bottom: 1px solid var(--ag-border);
background: var(--ag-bg-elev);
}
/* Split container — fills the remaining body height */
.add-node-modal .add-node-split {
display: flex;
flex: 1;
min-height: 0; /* allows children to scroll */
}
/* Left nav — vertical category list */
.add-node-modal .add-node-nav {
flex: 0 0 184px;
border-right: 1px solid var(--ag-border);
padding: var(--ag-space-2);
background: var(--ag-bg);
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 2px;
}
.add-node-modal .add-node-nav__item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border: 0;
background: transparent;
border-radius: var(--ag-radius-sm);
color: var(--ag-fg-muted);
font-family: inherit;
font-size: var(--ag-fz-sm);
font-weight: var(--ag-fw-medium);
text-align: left;
cursor: pointer;
transition: background-color 0.12s ease, color 0.12s ease;
line-height: 1.2;
}
.add-node-modal .add-node-nav__item .ti {
font-size: 16px;
flex-shrink: 0;
opacity: 0.75;
}
.add-node-modal .add-node-nav__item__label {
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.add-node-modal .add-node-nav__item__count {
flex-shrink: 0;
font-size: 10.5px;
font-weight: var(--ag-fw-semibold);
color: var(--ag-fg-muted);
background: var(--ag-bg-elev);
border-radius: 999px;
padding: 1px 7px;
min-width: 22px;
text-align: center;
line-height: 1.4;
}
.add-node-modal .add-node-nav__item:hover {
background: var(--ag-bg-hover);
color: var(--ag-fg);
}
.add-node-modal .add-node-nav__item.active {
background: var(--ag-gold-soft);
color: var(--ag-gold-deep);
font-weight: var(--ag-fw-semibold);
}
.add-node-modal .add-node-nav__item.active .ti { opacity: 1; color: var(--ag-gold); }
.add-node-modal .add-node-nav__item.active .add-node-nav__item__count {
background: rgba(255, 255, 255, 0.6);
color: var(--ag-gold-deep);
}
/* Right content area — scrollable card grid */
.add-node-modal .add-node-content {
flex: 1;
min-width: 0;
padding: var(--ag-space-3) var(--ag-space-4);
overflow-y: auto;
}
/* Uniform grid: always 3 columns, all rows same height. `grid-auto-rows: 1fr`
makes every row equal-height; the cards stretch to fill. Combined with the
line-clamp on description below, all cards look identical. */
.add-node-modal .add-node-content .choose-type-grid {
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 1fr;
align-items: stretch;
}
.add-node-modal .add-node-content .choose-type-card {
min-height: 118px;
}
/* Clamp description to 2 lines so cards don't grow vertically based on copy
length — uniformity wins over showing every word. */
.add-node-modal .add-node-content .choose-type-card__desc {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Responsive: drop to 2 cols on narrow modals, 1 col on phones */
@media (max-width: 768px) {
.add-node-modal .add-node-content .choose-type-grid {
grid-template-columns: repeat(2, 1fr);
}
.add-node-modal .add-node-nav {
flex: 0 0 140px;
}
}
@media (max-width: 560px) {
.add-node-modal .add-node-split { flex-direction: column; }
.add-node-modal .add-node-nav {
flex: 0 0 auto;
border-right: 0;
border-bottom: 1px solid var(--ag-border);
flex-direction: row;
overflow-x: auto;
gap: 4px;
}
.add-node-modal .add-node-nav__item { flex-shrink: 0; }
.add-node-modal .add-node-content .choose-type-grid {
grid-template-columns: 1fr;
}
}
/* Legacy category header from the previous design — kept as no-op so old
call sites that might still render it (none should after the refactor)
don't pollute the layout. */
.add-node-category-header { display: none; }
/* Offcanvas: empty card prompting user to pick a type via the modal */
.oc-empty-card {
text-align: center;
padding: var(--ag-space-5) var(--ag-space-4);
background: var(--ag-bg-elev);
border: 1px dashed var(--ag-border);
border-radius: var(--ag-radius);
}
.oc-empty-card__icon {
width: 56px; height: 56px;
margin: 0 auto var(--ag-space-3);
border-radius: 50%;
background: var(--ag-gold-soft);
color: var(--ag-gold-deep);
display: flex; align-items: center; justify-content: center;
font-size: 28px;
}
.oc-empty-card__title {
font-weight: var(--ag-fw-semibold);
font-size: var(--ag-fz-md);
color: var(--ag-fg);
margin-bottom: var(--ag-space-1);
}
.oc-empty-card__desc {
font-size: var(--ag-fz-sm);
color: var(--ag-fg-muted);
line-height: 1.45;
max-width: 360px;
margin: 0 auto;
}
/* ── "custom-tabs" — top border indicator (used in whatsapp templates) ── */
.custom-tabs.card-header-tabs {
gap: var(--ag-space-6);
border: 0;
}
.custom-tabs.card-header-tabs .nav-link {
border-bottom: 0;
border-width: 3px 0 0 0 !important;
border-style: solid;
border-top-color: rgba(0, 0, 0, 0.15);
border-radius: 0;
padding-top: var(--ag-space-3);
color: var(--ag-fg-secondary);
}
.custom-tabs.card-header-tabs .nav-link.active {
border-top-color: var(--ag-gold);
color: var(--ag-fg);
font-weight: 600;
}
.custom-tabs.card-header-tabs .nav-link:not(.active):hover {
border-top-color: rgba(var(--ag-gold-rgb), 0.5);
color: var(--ag-fg);
}
.custom-tabs .nav-fill > .nav-link,
.custom-tabs .nav-fill .nav-item { text-align: left; }
.nav-fill .custom-tabs.nav-item .nav-link { justify-content: flex-start; }
[data-bs-theme='dark'] .custom-tabs.card-header-tabs .nav-link { border-top-color: rgba(255, 255, 255, 0.1); }
[data-bs-theme='dark'] .custom-tabs.card-header-tabs .nav-link.active { border-top-color: var(--ag-gold); }
/* =============================================================================
16. ALERTS
============================================================================= */
.alert {
border-radius: var(--ag-radius);
font-size: var(--ag-fz);
border: 1px solid;
padding: var(--ag-space-2) var(--ag-space-3);
}
.alert-primary { background-color: var(--ag-gold-soft); border-color: rgba(var(--ag-gold-rgb), 0.3); color: #806523; }
.alert-success { background-color: var(--ag-success-soft); border-color: rgba(22, 163, 74, 0.25); color: var(--ag-success-fg); }
.alert-danger { background-color: var(--ag-danger-soft); border-color: rgba(229, 72, 77, 0.25); color: var(--ag-danger-fg); }
.alert-warning { background-color: var(--ag-warning-soft); border-color: rgba(245, 158, 11, 0.3); color: var(--ag-warning-fg); }
.alert-info { background-color: var(--ag-info-soft); border-color: rgba(59, 130, 246, 0.25); color: var(--ag-info-fg); }
[data-bs-theme='dark'] .alert { background-color: var(--ag-bg-subtle); }
/* =============================================================================
17. TOOLTIPS & POPOVERS
============================================================================= */
.tooltip-inner {
background-color: var(--ag-fg);
color: var(--ag-bg);
border-radius: var(--ag-radius-sm);
font-size: var(--ag-fz-sm);
padding: 4px var(--ag-space-2);
box-shadow: var(--ag-shadow);
}
.popover {
background-color: var(--ag-bg-elev);
border: 1px solid var(--ag-border);
border-radius: var(--ag-radius);
box-shadow: var(--ag-shadow);
}
.popover-header {
background-color: transparent;
border-bottom: 1px solid var(--ag-border);
font-weight: 600;
font-size: var(--ag-fz);
padding: var(--ag-space-2) var(--ag-space-3);
border-radius: var(--ag-radius) var(--ag-radius) 0 0;
}
.popover-body { padding: var(--ag-space-3); font-size: var(--ag-fz); color: var(--ag-fg); }
/* =============================================================================
18. AVATARS, PROGRESS, BREADCRUMB, LIST GROUPS
============================================================================= */
.avatar {
border-radius: var(--ag-radius-pill);
background-color: var(--ag-bg-muted);
color: var(--ag-fg-secondary);
font-weight: 500;
font-size: var(--ag-fz-xs);
}
.avatar-rounded { border-radius: var(--ag-radius-pill); }
.progress {
height: 6px;
border-radius: var(--ag-radius-pill);
background-color: var(--ag-bg-muted);
overflow: hidden;
}
.progress-bar { background-color: var(--ag-gold); border-radius: inherit; }
.breadcrumb {
font-size: var(--ag-fz-sm);
gap: 4px;
background: transparent;
}
.breadcrumb-item + .breadcrumb-item::before { color: var(--ag-fg-muted); padding: 0 6px; }
.breadcrumb-item a { color: var(--ag-fg-secondary); text-decoration: none; }
.breadcrumb-item a:hover { color: var(--ag-fg); text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb-item.active { color: var(--ag-fg-muted); }
.list-group {
border-radius: var(--ag-radius);
}
.list-group-item {
background-color: var(--ag-bg-elev);
border-color: var(--ag-border);
color: var(--ag-fg);
font-size: var(--ag-fz);
padding: var(--ag-space-2) var(--ag-space-3);
}
.list-group-item:first-child {
border-top-left-radius: var(--ag-radius);
border-top-right-radius: var(--ag-radius);
}
.list-group-item:last-child {
border-bottom-left-radius: var(--ag-radius);
border-bottom-right-radius: var(--ag-radius);
}
.list-group-item:hover { background-color: var(--ag-bg-hover); }
/* =============================================================================
19. ACCORDION
============================================================================= */
.accordion-item {
background-color: var(--ag-bg-elev);
border: 1px solid var(--ag-border);
}
.accordion-item:not(:first-of-type) { border-top: 0; }
.accordion-item:first-of-type { border-radius: var(--ag-radius) var(--ag-radius) 0 0; }
.accordion-item:last-of-type { border-radius: 0 0 var(--ag-radius) var(--ag-radius); }
.accordion-button {
font-weight: 500;
font-size: var(--ag-fz);
color: var(--ag-fg);
background-color: transparent;
padding: var(--ag-space-2) var(--ag-space-3);
box-shadow: none;
}
.accordion-button:not(.collapsed) {
background-color: var(--ag-bg-subtle);
color: var(--ag-fg);
box-shadow: none;
}
.accordion-button:focus { box-shadow: var(--ag-ring-shadow); border-color: var(--ag-gold); }
/* =============================================================================
20. OFFCANVAS / TOASTS
============================================================================= */
.offcanvas {
background-color: var(--ag-bg-elev) !important;
border-color: var(--ag-border) !important;
box-shadow: var(--ag-shadow-lg);
}
.offcanvas-header { padding: var(--ag-space-4); border-bottom: 1px solid var(--ag-border); }
.offcanvas-body { padding: var(--ag-space-4); }
.toast {
background-color: var(--ag-bg-elev);
border: 1px solid var(--ag-border);
border-radius: var(--ag-radius);
box-shadow: var(--ag-shadow);
}
#toast-container .toast {
padding: 0 !important;
background-position: 1em center;
box-shadow: var(--ag-shadow);
}
#toast-container .toast:hover { box-shadow: var(--ag-shadow); }
#toast-container .toast .toast-body {
padding-left: 3.5em;
color: var(--ag-fg);
font-size: var(--ag-fz);
}
/* =============================================================================
21. SCROLLBAR (minimal)
============================================================================= */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: var(--ag-border-strong);
border-radius: var(--ag-radius-pill);
border: 2px solid transparent;
background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--ag-fg-muted); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }
/* =============================================================================
22. SEPARATORS & DIVIDERS
============================================================================= */
hr {
border: 0;
border-top: 1px solid var(--ag-border);
opacity: 1;
margin: var(--ag-space-3) 0;
}
.horizontal-divider {
width: 1px;
height: 1.5rem;
background-color: var(--ag-border);
}
.border { border-color: var(--ag-border) !important; }
.border-top { border-top-color: var(--ag-border) !important; }
.border-bottom { border-bottom-color: var(--ag-border) !important; }
.border-start, .border-left { border-left-color: var(--ag-border) !important; }
.border-end, .border-right { border-right-color: var(--ag-border) !important; }
.border-x { border-left-color: var(--ag-border) !important; border-right-color: var(--ag-border) !important; }
.border-y { border-top-color: var(--ag-border) !important; border-bottom-color: var(--ag-border) !important; }
/* Responsive borders */
.border-bottom-sm { border-bottom: 1px solid var(--ag-border); }
@media (min-width: 768px) {
.border-bottom-sm { border-bottom: 0; }
.border-bottom-md { border-bottom: 1px solid var(--ag-border); }
.border-end-md { border-right: 1px solid var(--ag-border); }
}
.border-bottom-md { border-bottom: 0; }
.border-end-sm { border-right: 1px solid var(--ag-border); }
@media (min-width: 768px) {
.border-end-sm { border-right: 0; }
}
.border-end-md { border-right: 0; }
/* =============================================================================
23. LAYOUT UTILITIES
============================================================================= */
.layout-fullheight {
height: calc(100dvh - var(--ag-topbar-h));
display: flex;
flex-direction: column;
overflow: hidden;
}
.footer {
padding: var(--ag-space-2) 0 !important;
margin-top: auto;
color: var(--ag-fg-muted);
font-size: var(--ag-fz-sm);
}
.row { --bs-gutter-x: var(--ag-space-4); --bs-gutter-y: var(--ag-space-3); }
/* =============================================================================
24. ICONS — Tabler webfont sizing + Lucide SVG runtime overrides
============================================================================= */
/* Tabler font sizes (still used for ti-brand-* and Lucide-unmapped fallbacks) */
.ti { font-size: var(--ag-icon); line-height: 1; vertical-align: middle; flex-shrink: 0; }
i.ti-xs { font-size: var(--ag-icon-xs); }
i.ti-sm { font-size: var(--ag-icon-sm); }
i.ti-md { font-size: var(--ag-icon-md); }
i.ti-lg { font-size: var(--ag-icon-lg); }
i.ti-xl { font-size: var(--ag-icon-xl); }
/* Lucide SVG (converted by icons.js OR markup-native via data-lucide).
Lucide already emits `fill="none"` and `stroke="currentColor"` as SVG
attributes — we just normalize sizing and vertical alignment. */
svg.ti,
svg[data-lucide] {
width: 1em;
height: 1em;
line-height: 1;
vertical-align: -0.125em;
flex-shrink: 0;
font-size: var(--ag-icon);
}
svg.ti.ti-xs, svg[data-lucide].ti-xs { font-size: var(--ag-icon-xs); }
svg.ti.ti-sm, svg[data-lucide].ti-sm { font-size: var(--ag-icon-sm); }
svg.ti.ti-md, svg[data-lucide].ti-md { font-size: var(--ag-icon-md); }
svg.ti.ti-lg { font-size: var(--ag-icon-lg); }
svg.ti.ti-xl { font-size: var(--ag-icon-xl); }
/* Hairline variant — even thinner stroke for refined UI surfaces */
svg.ti.ti--hairline { stroke-width: 1 !important; }
/* =============================================================================
25. SHARED VIEW PATTERNS (extracted from duplicated