/* ============================================================
   AudienceLens — Design System
   Minimal & sleek (Linear / Vercel direction)
   Near-monochrome neutral palette, one restrained indigo accent,
   generous whitespace, sharp Inter typography, hairline borders,
   very soft shadows, flat surfaces (no gradient blocks).

   This stylesheet is authoritative. It is loaded LAST on every page
   and intentionally uses !important on aesthetic properties so it
   overrides Bulma and legacy inline styles WITHOUT touching layout
   (display/flex/grid/positioning are left alone).
   ============================================================ */

:root {
  /* Surfaces */
  --al-bg: #fafafa;          /* app background */
  --al-surface: #ffffff;     /* cards, panels */
  --al-subtle: #f4f4f5;      /* hover / secondary fills */
  --al-subtle-2: #fafafa;

  /* Ink */
  --al-ink: #18181b;         /* headings / near-black */
  --al-ink-2: #3f3f46;       /* body text */
  --al-muted: #71717a;       /* secondary text */
  --al-faint: #a1a1aa;       /* tertiary / icons */

  /* Borders */
  --al-border: #e7e7ea;      /* hairline */
  --al-border-strong: #d8d8dd;

  /* Accent — restrained indigo */
  --al-accent: #4f46e5;
  --al-accent-hover: #4338ca;
  --al-accent-weak: #eef2ff;
  --al-accent-ink: #4338ca;
  --al-ring: rgba(79, 70, 229, 0.30);

  /* Status (muted, used sparingly) */
  --al-success: #15803d;
  --al-success-weak: #f0fdf4;
  --al-danger: #dc2626;
  --al-danger-weak: #fef2f2;
  --al-warning: #b45309;
  --al-warning-weak: #fffbeb;

  /* Radius */
  --al-r-sm: 6px;
  --al-r: 8px;
  --al-r-lg: 12px;
  --al-r-pill: 999px;

  /* Shadows — barely there */
  --al-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04);
  --al-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
  --al-shadow-lg: 0 4px 12px rgba(16, 24, 40, 0.08), 0 2px 4px rgba(16, 24, 40, 0.04);

  /* Type */
  --al-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ----------------------------------------------------------------
   Base & typography
   ---------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--al-font) !important;
  background-color: var(--al-bg) !important;
  background-image: none !important;
  color: var(--al-ink-2) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  letter-spacing: -0.006em;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6,
.title, .subtitle {
  font-family: var(--al-font) !important;
  color: var(--al-ink) !important;
}

.title, h1, h2, h3 {
  letter-spacing: -0.022em !important;
  font-weight: 650 !important;
}
.title { font-weight: 680 !important; }

.subtitle {
  color: var(--al-muted) !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
}

a {
  color: var(--al-accent-ink);
  text-decoration: none;
  transition: color 0.15s ease;
}
a:hover { color: var(--al-accent); }

code, pre, .code {
  font-family: "SF Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
}
code {
  background: var(--al-subtle) !important;
  color: var(--al-ink) !important;
  border: 1px solid var(--al-border);
  border-radius: var(--al-r-sm);
  padding: 0.12em 0.4em;
}

::selection { background: var(--al-accent-weak); color: var(--al-accent-ink); }

/* Custom scrollbars — quiet */
* { scrollbar-width: thin; scrollbar-color: #d4d4d8 transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #d4d4d8; border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: #b4b4bb; background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ----------------------------------------------------------------
   Buttons
   ---------------------------------------------------------------- */
.button,
.btn,
button.button {
  font-family: var(--al-font) !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  letter-spacing: -0.01em !important;
  border-radius: var(--al-r) !important;
  border: 1px solid var(--al-border-strong) !important;
  background-color: var(--al-surface) !important;
  color: var(--al-ink) !important;
  box-shadow: var(--al-shadow-sm) !important;
  height: auto !important;
  padding: 0.5rem 0.9rem !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease !important;
}
.button:hover,
.btn:hover {
  background-color: var(--al-subtle) !important;
  border-color: var(--al-border-strong) !important;
  color: var(--al-ink) !important;
}
.button:active, .btn:active { transform: translateY(0.5px); }
.button:focus-visible, .btn:focus-visible,
.input:focus-visible, .textarea:focus-visible, select:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px var(--al-ring) !important;
  border-color: var(--al-accent) !important;
}

/* Primary = the accent */
.button.is-primary,
.btn.is-primary,
.button.is-link,
.add-client-btn,
.button.is-info {
  background-color: var(--al-accent) !important;
  border-color: var(--al-accent) !important;
  color: #ffffff !important;
  box-shadow: var(--al-shadow-sm) !important;
}
.button.is-primary:hover,
.btn.is-primary:hover,
.button.is-link:hover,
.add-client-btn:hover,
.button.is-info:hover {
  background-color: var(--al-accent-hover) !important;
  border-color: var(--al-accent-hover) !important;
  color: #ffffff !important;
}

/* Success / Danger / Warning — solid but muted */
.button.is-success, .btn.is-success, .btn-success {
  background-color: var(--al-success) !important;
  border-color: var(--al-success) !important;
  color: #fff !important;
}
.button.is-success:hover, .btn.is-success:hover, .btn-success:hover { filter: brightness(0.94); color: #fff !important; }

.button.is-danger, .btn.is-danger {
  background-color: var(--al-danger) !important;
  border-color: var(--al-danger) !important;
  color: #fff !important;
}
.button.is-danger:hover, .btn.is-danger:hover { filter: brightness(0.94); color: #fff !important; }

.button.is-warning, .btn.is-warning {
  background-color: var(--al-warning) !important;
  border-color: var(--al-warning) !important;
  color: #fff !important;
}

/* Light / ghost buttons → neutral subtle */
.button.is-light, .button.is-white, .button.is-text {
  background-color: var(--al-surface) !important;
  border-color: var(--al-border-strong) !important;
  color: var(--al-ink) !important;
}
.button.is-light:hover { background-color: var(--al-subtle) !important; }

/* Outlined → keep flat hairline */
.button.is-outlined {
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Sizes */
.button.is-small, .btn.is-small { font-size: 0.8rem !important; padding: 0.35rem 0.7rem !important; }
.button.is-medium { font-size: 0.95rem !important; padding: 0.6rem 1.1rem !important; }
.button.is-large { font-size: 1.05rem !important; padding: 0.75rem 1.4rem !important; }
.button[disabled], .btn[disabled], .button.is-loading { opacity: 0.55 !important; }

/* ----------------------------------------------------------------
   Cards, boxes, panels
   ---------------------------------------------------------------- */
.box,
.card,
.modal-card {
  background-color: var(--al-surface) !important;
  color: var(--al-ink-2) !important;
  border: 1px solid var(--al-border) !important;
  border-radius: var(--al-r-lg) !important;
  box-shadow: var(--al-shadow-sm) !important;
}
.box { padding: 1.5rem !important; }
.card { overflow: hidden; }
.card-header { box-shadow: none !important; border-bottom: 1px solid var(--al-border) !important; }
.card-header-title { color: var(--al-ink) !important; font-weight: 600 !important; }
.card-content { color: var(--al-ink-2) !important; }
.card-footer { border-top: 1px solid var(--al-border) !important; }
.card-footer-item { border-right: 1px solid var(--al-border) !important; color: var(--al-accent-ink) !important; font-weight: 500; }
.card-footer-item:last-child { border-right: 0 !important; }

/* ----------------------------------------------------------------
   Forms
   ---------------------------------------------------------------- */
.label { color: var(--al-ink) !important; font-weight: 550 !important; font-size: 0.85rem !important; margin-bottom: 0.4rem !important; }
.input, .textarea, .select select {
  font-family: var(--al-font) !important;
  background-color: var(--al-surface) !important;
  border: 1px solid var(--al-border-strong) !important;
  border-radius: var(--al-r) !important;
  color: var(--al-ink) !important;
  box-shadow: none !important;
  font-size: 0.9rem !important;
  height: auto !important;
  padding: 0.55rem 0.75rem !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.input::placeholder, .textarea::placeholder { color: var(--al-faint) !important; }
.input:focus, .textarea:focus, .select select:focus {
  border-color: var(--al-accent) !important;
  box-shadow: 0 0 0 3px var(--al-ring) !important;
}
.help { color: var(--al-muted) !important; }
.checkbox:hover, .radio:hover { color: var(--al-accent-ink) !important; }

/* ----------------------------------------------------------------
   Tables
   ---------------------------------------------------------------- */
.table {
  background-color: transparent !important;
  color: var(--al-ink-2) !important;
}
.table th { color: var(--al-muted) !important; font-weight: 600 !important; font-size: 0.78rem !important; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--al-border) !important; }
.table td { border-bottom: 1px solid var(--al-border) !important; border-top: 0 !important; vertical-align: middle; }
.table.is-hoverable tbody tr:hover { background-color: var(--al-subtle) !important; }

/* ----------------------------------------------------------------
   Tags / badges
   ---------------------------------------------------------------- */
.tag {
  font-family: var(--al-font) !important;
  font-weight: 500 !important;
  border-radius: var(--al-r-pill) !important;
  background-color: var(--al-subtle) !important;
  color: var(--al-ink-2) !important;
  border: 1px solid var(--al-border) !important;
  font-size: 0.75rem !important;
}
.tag.is-light { background-color: var(--al-subtle) !important; color: var(--al-ink-2) !important; }
.tag.is-primary, .tag.is-link, .tag.is-info { background-color: var(--al-accent-weak) !important; color: var(--al-accent-ink) !important; border-color: transparent !important; }
.tag.is-success { background-color: var(--al-success-weak) !important; color: var(--al-success) !important; border-color: transparent !important; }
.tag.is-danger { background-color: var(--al-danger-weak) !important; color: var(--al-danger) !important; border-color: transparent !important; }
.tag.is-warning { background-color: var(--al-warning-weak) !important; color: var(--al-warning) !important; border-color: transparent !important; }

/* ----------------------------------------------------------------
   Notifications
   ---------------------------------------------------------------- */
.notification {
  border-radius: var(--al-r-lg) !important;
  border: 1px solid var(--al-border) !important;
  background-color: var(--al-surface) !important;
  color: var(--al-ink-2) !important;
  box-shadow: var(--al-shadow-sm) !important;
}
.notification.is-info, .notification.is-info.is-light, .notification.is-primary, .notification.is-link {
  background-color: var(--al-accent-weak) !important; color: var(--al-accent-ink) !important; border-color: transparent !important;
}
.notification.is-success, .notification.is-success.is-light { background-color: var(--al-success-weak) !important; color: var(--al-success) !important; border-color: transparent !important; }
.notification.is-danger, .notification.is-danger.is-light { background-color: var(--al-danger-weak) !important; color: var(--al-danger) !important; border-color: transparent !important; }
.notification.is-warning, .notification.is-warning.is-light { background-color: var(--al-warning-weak) !important; color: var(--al-warning) !important; border-color: transparent !important; }

/* ----------------------------------------------------------------
   Tabs
   ---------------------------------------------------------------- */
.tabs { font-family: var(--al-font) !important; }
.tabs ul { border-bottom-color: var(--al-border) !important; }
.tabs a { border-bottom-width: 2px !important; color: var(--al-muted) !important; font-weight: 500 !important; transition: color 0.15s ease, border-color 0.15s ease; }
.tabs a:hover { color: var(--al-ink) !important; border-bottom-color: var(--al-border-strong) !important; }
.tabs li.is-active a { color: var(--al-ink) !important; border-bottom-color: var(--al-accent) !important; }
.tabs.is-boxed a { border: 1px solid transparent !important; border-radius: var(--al-r) var(--al-r) 0 0 !important; }
.tabs.is-boxed li.is-active a { background-color: var(--al-surface) !important; border-color: var(--al-border) !important; border-bottom-color: transparent !important; color: var(--al-ink) !important; }

/* ----------------------------------------------------------------
   Modals
   ---------------------------------------------------------------- */
.modal-background { background-color: rgba(24, 24, 27, 0.45) !important; backdrop-filter: blur(2px); }
.modal-card { border-radius: var(--al-r-lg) !important; box-shadow: var(--al-shadow-lg) !important; overflow: hidden; }
.modal-card-head, .modal-card-foot { background-color: var(--al-surface) !important; border-color: var(--al-border) !important; }
.modal-card-title { color: var(--al-ink) !important; font-weight: 600 !important; }
.modal-card-body { background-color: var(--al-surface) !important; color: var(--al-ink-2) !important; }

/* ----------------------------------------------------------------
   Menus / dropdowns
   ---------------------------------------------------------------- */
.menu-label { color: var(--al-faint) !important; letter-spacing: 0.06em !important; font-weight: 600 !important; }
.menu-list a { color: var(--al-ink-2) !important; border-radius: var(--al-r-sm) !important; transition: background-color 0.15s ease; }
.menu-list a:hover { background-color: var(--al-subtle) !important; color: var(--al-ink) !important; }
.menu-list a.is-active { background-color: var(--al-accent-weak) !important; color: var(--al-accent-ink) !important; }
.dropdown-content { border: 1px solid var(--al-border) !important; border-radius: var(--al-r) !important; box-shadow: var(--al-shadow-lg) !important; }
.dropdown-item { color: var(--al-ink-2) !important; }
.dropdown-item:hover, a.dropdown-item.is-active { background-color: var(--al-subtle) !important; color: var(--al-ink) !important; }

/* ----------------------------------------------------------------
   Progress / spinner
   ---------------------------------------------------------------- */
.progress::-webkit-progress-value { background-color: var(--al-accent) !important; }
.progress::-moz-progress-bar { background-color: var(--al-accent) !important; }
.progress.is-success::-webkit-progress-value { background-color: var(--al-success) !important; }

/* ----------------------------------------------------------------
   Kill gradient / glass "hero" + legacy header blocks
   (flat, minimal surfaces instead)
   ---------------------------------------------------------------- */
.hero.is-primary,
.hero.is-info,
.hero.is-link {
  background: var(--al-bg) !important;
  background-image: none !important;
  color: var(--al-ink) !important;
}
.hero.is-primary .title,
.hero.is-primary .subtitle { color: var(--al-ink) !important; }
.hero.is-primary .subtitle { color: var(--al-muted) !important; }

/* Generic legacy gradient header used by dashboard / detail pages */
.header,
.page-header,
.app-header,
.dashboard-header {
  background: var(--al-surface) !important;
  background-image: none !important;
  color: var(--al-ink) !important;
  border-bottom: 1px solid var(--al-border) !important;
  box-shadow: none !important;
}
.header h1, .header h2, .header .title,
.page-header h1, .page-header .title { color: var(--al-ink) !important; }
.header p, .header .subtitle,
.page-header p, .page-header .subtitle { color: var(--al-muted) !important; }

/* ----------------------------------------------------------------
   App shell — layout_base (sidebar / topbar / tab content)
   ---------------------------------------------------------------- */
.sidebar {
  background-color: var(--al-surface) !important;
  border-right: 1px solid var(--al-border) !important;
  color: var(--al-ink-2) !important;
}
.topbar {
  background-color: rgba(255, 255, 255, 0.85) !important;
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--al-border) !important;
  color: var(--al-ink-2) !important;
  box-shadow: none !important;
}
.tab-content { background-color: var(--al-bg) !important; color: var(--al-ink-2) !important; }

/* Persona cards in sidebar */
.persona-card {
  background-color: var(--al-surface) !important;
  border: 1px solid var(--al-border) !important;
  border-radius: var(--al-r) !important;
  transition: background-color 0.15s ease, border-color 0.15s ease !important;
}
.persona-card:hover { background-color: var(--al-subtle) !important; border-color: var(--al-border-strong) !important; }
.persona-card.is-active {
  background-color: var(--al-accent-weak) !important;
  border-color: var(--al-accent) !important;
  color: var(--al-accent-ink) !important;
}
.persona-card.is-active .title,
.persona-card.is-active .subtitle { color: var(--al-accent-ink) !important; }

/* Sidebar action buttons → quiet, uniform nav rows (no rainbow of fills) */
.sidebar .button,
.sidebar .buttons .button {
  background-color: var(--al-surface) !important;
  background-image: none !important;
  border: 1px solid var(--al-border) !important;
  color: var(--al-ink-2) !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  justify-content: flex-start !important;
}
.sidebar .buttons.is-fullwidth .button { justify-content: flex-start !important; }
.sidebar .button .icon { color: var(--al-muted) !important; }
.sidebar .button:hover {
  background-color: var(--al-subtle) !important;
  border-color: var(--al-border-strong) !important;
  color: var(--al-ink) !important;
}
.sidebar .button:hover .icon { color: var(--al-accent-ink) !important; }

/* ----------------------------------------------------------------
   Custom top navbar (dashboard / standalone pages)
   ---------------------------------------------------------------- */
.navbar {
  background-color: rgba(255, 255, 255, 0.85) !important;
  background-image: none !important;
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--al-border) !important;
  box-shadow: none !important;
}
.navbar-item, .navbar-link { color: var(--al-ink-2) !important; font-weight: 500 !important; }
.navbar-item:hover, .navbar-item.is-active { color: var(--al-ink) !important; background-color: transparent !important; }
.navbar.is-primary, .navbar.is-link, .navbar.is-info { background-color: rgba(255,255,255,0.85) !important; }
.navbar.is-primary .navbar-item, .navbar.is-primary .navbar-brand .navbar-item { color: var(--al-ink-2) !important; }

/* ----------------------------------------------------------------
   Stat tiles (dashboard)
   ---------------------------------------------------------------- */
.stat-box, .stat-card, .metric-box {
  background-color: var(--al-surface) !important;
  background-image: none !important;
  border: 1px solid var(--al-border) !important;
  border-radius: var(--al-r-lg) !important;
  box-shadow: var(--al-shadow-sm) !important;
  color: var(--al-ink) !important;
}
/* One restrained accent across all stat icon chips (no rainbow) */
.stat-icon,
.stat-box:nth-child(1) .stat-icon,
.stat-box:nth-child(2) .stat-icon,
.stat-box:nth-child(3) .stat-icon {
  background: var(--al-accent-weak) !important;
  background-image: none !important;
  color: var(--al-accent-ink) !important;
  box-shadow: none !important;
  border-radius: var(--al-r) !important;
}

/* Icon-only action buttons stay quiet */
.delete-icon-btn {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--al-faint) !important;
  box-shadow: none !important;
}
.delete-icon-btn:hover { background: var(--al-danger-weak) !important; color: var(--al-danger) !important; }

/* Bulma helper colour overrides so accents stay on-system */
.has-text-primary, .has-text-link, .has-text-info { color: var(--al-accent-ink) !important; }
.has-background-primary, .is-primary.hero-body { background-color: var(--al-accent) !important; }
.has-text-success { color: var(--al-success) !important; }
.has-text-danger { color: var(--al-danger) !important; }
.has-text-grey, .has-text-grey-light { color: var(--al-muted) !important; }