/* Rentari modern components: searchable dropdown, fast date picker, toast.
   Namespaced with .sl- prefix. Brand vars fall back to literal hex so this
   works in every shell (dashboard, public, tenant, vendor) regardless of
   whether the parent template declares --sl-brand-* vars. */

/* =========================================================
   Semantic callouts

   A filled surface is intentional: an icon or a thin border alone is too
   easy to miss while completing a form. `data-tone` is the single source of
   truth for both colour and meaning across Add/Edit and listing flows:
   info = guidance, warning = action worth reviewing, danger = blocked/error,
   success = confirmed. Colours come exclusively from tokens.css.
   ========================================================= */
.sl-callout {
  --sl-callout-color: var(--info);
  --sl-callout-bg: var(--info-bg);
  --sl-callout-border: var(--info-border);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--sl-callout-border);
  border-radius: var(--radius-lg);
  background: var(--sl-callout-bg);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  line-height: 1.5;
}
.sl-callout[hidden], .sl-callout.hidden { display: none; }
.sl-callout[data-tone="info"] {
  --sl-callout-color: var(--info);
  --sl-callout-bg: var(--info-bg);
  --sl-callout-border: var(--info-border);
}
.sl-callout[data-tone="warning"] {
  --sl-callout-color:var(--warning-ink);
  --sl-callout-bg: var(--warning-bg);
  --sl-callout-border: var(--warning-border);
}
.sl-callout[data-tone="danger"] {
  --sl-callout-color: var(--danger);
  --sl-callout-bg: var(--danger-bg);
  --sl-callout-border: var(--danger-border);
}
.sl-callout[data-tone="success"] {
  --sl-callout-color: var(--success-ink);
  --sl-callout-bg: var(--success-bg);
  --sl-callout-border: var(--success-border);
}
.sl-callout__icon {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--sl-callout-color);
}
.sl-callout__content { min-width: 0; flex: 1 1 auto; }
.sl-callout__title {
  display: block;
  color: var(--text);
  font-weight: 600;
}
.sl-callout__body { color: var(--text-secondary); }
.sl-callout a { color: var(--sl-callout-color); font-weight: 600; text-decoration: underline; }
.sl-callout :focus-visible { outline: 2px solid var(--sl-callout-color); outline-offset: 2px; }

.sl-kbd {
  display: inline-flex; align-items: center;
  padding: 1px 6px; border-radius: 5px;
  background: white; border: 1px solid #e2e8f0;
  border-bottom-width: 2px;
  font-size: 11px; font-weight: 600;
  color: #293649;
  font-family: 'SF Mono', ui-monospace, Monaco, Consolas, monospace;
  line-height: 1.4;
}

/* =========================================================
   Combobox (searchable dropdown)
   ========================================================= */
.sl-cb { position: relative; width: 100%; }
.sl-cb__trigger {
  font-family: inherit; font-size: 14px;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  padding: 12px 16px;
  color: #0f172a;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  outline: none; width: 100%;
  text-align: left; cursor: pointer;
  display: flex; align-items: center; gap: 12px;
}
.sl-cb__trigger:hover {
  border-color: var(--sl-brand-blue, #6A9EFF);
  box-shadow: 0 0 0 4px rgba(106, 158, 255, 0.10);
}
.sl-cb__trigger:focus,
.sl-cb__trigger.is-open {
  border-color: var(--sl-brand-blue, #6A9EFF);
  box-shadow:
    0 0 0 3px rgba(140, 108, 255, 0.18),
    0 0 0 6px rgba(72, 226, 217, 0.12);
}
.sl-cb__trigger[disabled] {
  opacity: 0.6; cursor: not-allowed;
}
.sl-cb__value {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sl-cb__trigger.is-empty .sl-cb__value {
  color: #576478; font-weight: 500;
}
.sl-cb__chev {
  color: #354358; flex-shrink: 0;
  transition: transform 0.18s cubic-bezier(0.23, 1, 0.32, 1);
}
.sl-cb__trigger.is-open .sl-cb__chev {
  transform: rotate(180deg);
  color: var(--sl-brand-blue, #6A9EFF);
}
.sl-cb__panel {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 24px 50px -15px rgba(15, 23, 42, 0.22);
  padding: 8px; z-index: 1000;
  display: none; max-height: 380px; flex-direction: column;
}
.sl-cb.is-open .sl-cb__panel {
  display: flex;
  animation: sl-cb-in 0.18s cubic-bezier(0.23, 1, 0.32, 1);
}
@keyframes sl-cb-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.sl-cb__search { position: relative; margin-bottom: 6px; }
.sl-cb__search input {
  font-family: inherit; font-size: 14px;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 10px 12px 10px 38px;
  color: #0f172a;
  outline: none; width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.sl-cb__search input:focus {
  border-color: var(--sl-brand-blue, #6A9EFF);
  box-shadow:
    0 0 0 3px rgba(140, 108, 255, 0.18),
    0 0 0 6px rgba(72, 226, 217, 0.12);
}
.sl-cb__search svg {
  position: absolute; left: 12px; top: 50%;
  transform: translateY(-50%);
  color: #354358; pointer-events: none;
}
.sl-cb__list {
  overflow-y: auto; max-height: 280px; padding: 4px 0;
}
.sl-cb__opt {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px;
  cursor: pointer; color: #0f172a;
  font-size: 14px;
}
.sl-cb__opt.is-active,
.sl-cb__opt:hover { background: rgba(106, 158, 255, 0.10); }
.sl-cb__opt .sl-cb__check {
  opacity: 0; color: var(--sl-brand-blue, #6A9EFF); flex-shrink: 0;
}
.sl-cb__opt.is-selected .sl-cb__check { opacity: 1; }
.sl-cb__empty {
  padding: 28px 16px; text-align: center;
  color: #576478; font-size: 13px;
}
.sl-cb__loading {
  padding: 28px 16px; text-align: center;
  color: #354358; font-size: 13px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.sl-cb__spinner {
  width: 14px; height: 14px;
  border: 2px solid #e2e8f0;
  border-top-color: var(--sl-brand-blue, #6A9EFF);
  border-radius: 50%;
  animation: sl-spin 0.7s linear infinite;
}
@keyframes sl-spin { to { transform: rotate(360deg); } }
.sl-cb__avatar {
  width: 34px; height: 34px; border-radius: 9px;
  background: linear-gradient(135deg,
    var(--sl-brand-purple, #8C6CFF),
    var(--sl-brand-blue, #6A9EFF));
  display: flex; align-items: center; justify-content: center;
  color: white; font-weight: 700; font-size: 12px;
  flex-shrink: 0; letter-spacing: 0.02em;
  overflow: hidden;
}
.sl-cb__avatar img { width: 100%; height: 100%; object-fit: cover; }
.sl-cb__detail {
  display: flex; flex-direction: column; gap: 1px;
  min-width: 0; flex: 1;
}
.sl-cb__ttl {
  font-weight: 600; font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sl-cb__sub {
  font-size: 12px; color: #354358;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* =========================================================
   Date picker
   ========================================================= */
.sl-dp__inputwrap { position: relative; display: inline-block; width: 100%; }
.sl-dp__icon {
  position: absolute; right: 14px; top: 50%;
  transform: translateY(-50%);
  color: #354358; pointer-events: none;
}
.sl-dp__pop {
  position: absolute;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  box-shadow: 0 24px 60px -20px rgba(15, 23, 42, 0.28);
  z-index: 1000;
  display: none;
  overflow: hidden;
  animation: sl-dp-in 0.16s cubic-bezier(0.23, 1, 0.32, 1);
}
.sl-dp__pop.is-open { display: block; }
@keyframes sl-dp-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.sl-dp__shell {
  display: grid;
  grid-template-columns: 200px 1fr;
}
.sl-dp__shell.is-single { grid-template-columns: 200px 1fr; }
.sl-dp__presets {
  background: #f8fafc;
  border-right: 1px solid #e2e8f0;
  padding: 14px 10px;
  display: flex; flex-direction: column; gap: 2px;
  min-width: 200px;
}
.sl-dp__presets-label {
  font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.22em; color: #354358;
  font-weight: 700; padding: 4px 10px 10px;
}
.sl-dp__preset {
  background: transparent; border: none; box-shadow: none;
  width: 100%; text-align: left; padding: 8px 10px;
  border-radius: 8px; font-size: 13px; font-weight: 500;
  color: #0f172a; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  font-family: inherit;
  transition: background 0.10s ease, color 0.10s ease;
}
.sl-dp__preset:hover {
  background: rgba(106, 158, 255, 0.12);
  color: var(--sl-brand-blue, #6A9EFF);
}
.sl-dp__preset-sub {
  margin-left: auto; font-size: 11px;
  color: #576478; font-weight: 500;
}
.sl-dp__preset:hover .sl-dp__preset-sub {
  color: var(--sl-brand-blue, #6A9EFF); opacity: 0.7;
}
.sl-dp__months {
  padding: 18px;
  display: grid;
  gap: 28px;
}
.sl-dp__months.is-range { grid-template-columns: 1fr 1fr; min-width: 580px; }
.sl-dp__months.is-single { grid-template-columns: 1fr; min-width: 280px; }
.sl-dp__month { user-select: none; position: relative; }
.sl-dp__month-header {
  display: flex; align-items: center; gap: 4px;
  margin-bottom: 14px;
}
.sl-dp__nav {
  background: transparent; border: 1px solid transparent;
  box-shadow: none; color: #354358;
  width: 30px; height: 30px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; border-radius: 8px;
  font-family: inherit;
  transition: background 0.10s ease, color 0.10s ease;
}
.sl-dp__nav:hover {
  background: rgba(106, 158, 255, 0.14);
  color: var(--sl-brand-blue, #6A9EFF);
}
.sl-dp__nav:active { transform: scale(0.94); }
.sl-dp__title {
  flex: 1; background: transparent; border: none; box-shadow: none;
  padding: 6px 10px; border-radius: 8px;
  font-weight: 700; font-size: 14px; cursor: pointer;
  color: #0f172a; font-family: inherit;
  transition: background 0.10s ease;
}
.sl-dp__title:hover { background: rgba(106, 158, 255, 0.10); }
.sl-dp__nav-spacer { width: 30px; height: 30px; }
.sl-dp__weekdays {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 2px; margin-bottom: 4px;
}
.sl-dp__wd {
  text-align: center; font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: #576478; font-weight: 700;
  padding: 6px 0;
}
.sl-dp__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.sl-dp__day {
  aspect-ratio: 1; display: flex;
  align-items: center; justify-content: center;
  font-size: 13px; font-weight: 500;
  border: 1px solid transparent; border-radius: 8px;
  cursor: pointer; background: transparent;
  color: #0f172a; width: 100%; padding: 0;
  box-shadow: none; font-family: inherit;
  position: relative;
  transition: background 0.08s ease, color 0.08s ease, transform 0.08s ease;
}
.sl-dp__day:hover { background: rgba(106, 158, 255, 0.14); }
.sl-dp__day.is-other { color: #cbd5e1; }
.sl-dp__day.is-today { font-weight: 700; color: var(--sl-brand-blue, #6A9EFF); }
.sl-dp__day.is-today::after {
  content: ''; position: absolute; bottom: 4px;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--sl-brand-blue, #6A9EFF);
}
.sl-dp__day.is-disabled {
  color: #cbd5e1; cursor: not-allowed;
}
.sl-dp__day.is-disabled:hover { background: transparent; }
.sl-dp__day.is-inrange {
  background: rgba(106, 158, 255, 0.14);
  border-radius: 0;
}
.sl-dp__day.is-edge {
  background: linear-gradient(135deg,
    var(--sl-brand-purple, #8C6CFF),
    var(--sl-brand-blue, #6A9EFF));
  color: white; font-weight: 700;
}
.sl-dp__day.is-start { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.sl-dp__day.is-end { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.sl-dp__day.is-start.is-end { border-radius: 8px; }
.sl-dp__day.is-edge.is-today::after { background: white; }
.sl-dp__day.is-focused {
  outline: 2px solid var(--sl-brand-blue, #6A9EFF);
  outline-offset: -2px;
}
.sl-dp__mp {
  display: none; position: absolute; inset: 0;
  background: white; border-radius: 12px;
  padding: 12px;
  grid-template-rows: auto 1fr; gap: 8px;
  z-index: 5;
  animation: sl-dp-mp-in 0.15s cubic-bezier(0.23, 1, 0.32, 1);
}
.sl-dp__month.is-picking .sl-dp__mp { display: grid; }
@keyframes sl-dp-mp-in {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}
.sl-dp__yrow {
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.sl-dp__ynum {
  font-weight: 700; font-size: 15px;
  min-width: 70px; text-align: center;
}
.sl-dp__mp-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 6px; align-content: center;
}
.sl-dp__mp-cell {
  padding: 14px 8px; border-radius: 10px; text-align: center;
  cursor: pointer; font-size: 13px; font-weight: 600;
  background: transparent; border: 1px solid transparent;
  box-shadow: none; color: #0f172a;
  width: 100%; font-family: inherit;
  transition: background 0.10s ease, color 0.10s ease;
}
.sl-dp__mp-cell:hover {
  background: rgba(106, 158, 255, 0.14);
  color: var(--sl-brand-blue, #6A9EFF);
}
.sl-dp__mp-cell.is-current {
  background: linear-gradient(135deg,
    var(--sl-brand-purple, #8C6CFF),
    var(--sl-brand-blue, #6A9EFF));
  color: white;
}
.sl-dp__footer {
  display: flex; flex-wrap: wrap; gap: 14px 22px;
  padding: 12px 18px;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
  font-size: 11px; color: #354358;
}
.sl-dp__footer > span {
  display: inline-flex; align-items: center; gap: 6px;
}

/* =========================================================
   Toast system
   ========================================================= */
.sl-toast-stack {
  position: fixed; bottom: 24px; right: 24px;
  display: flex; flex-direction: column; gap: 10px;
  /* Above the free-tier upgrade/trial modals (--z-upgrade, 100000/100001) so a toast
     fired while one of those is open stays visible instead of hiding behind the dim
     backdrop. Shared scale: /css/z-scale.css. */
  z-index: var(--z-toast, 100002); max-width: 380px; pointer-events: none;
}
.sl-toast {
  pointer-events: auto;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 18px 44px -14px rgba(15, 23, 42, 0.22);
  display: flex; gap: 12px; align-items: flex-start;
  animation: sl-toast-in 0.30s cubic-bezier(0.23, 1, 0.32, 1);
  transform-origin: bottom right;
  font-family: inherit;
}
@keyframes sl-toast-in {
  from { opacity: 0; transform: translateY(24px) scale(0.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.sl-toast.is-leaving { animation: sl-toast-out 0.22s cubic-bezier(0.4, 0, 1, 1) forwards; }
@keyframes sl-toast-out {
  to { opacity: 0; transform: translateX(24px) scale(0.94); }
}
.sl-toast__icon {
  width: 34px; height: 34px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sl-toast.is-success .sl-toast__icon { background: rgba(71,174,114, 0.12); color: #287a4a; }
.sl-toast.is-info .sl-toast__icon { background: rgba(106, 158, 255, 0.14); color: var(--sl-brand-blue, #6A9EFF); }
.sl-toast.is-warning .sl-toast__icon { background: var(--warning-bg); color: var(--warning-ink); }
.sl-toast.is-error .sl-toast__icon { background: rgba(216,41,62, 0.12); color: #d8293e; }
.sl-toast.is-ai .sl-toast__icon {
  background: linear-gradient(135deg,
    var(--sl-brand-purple, #8C6CFF),
    var(--sl-brand-blue, #6A9EFF),
    var(--sl-brand-teal, #48E2D9));
  color: white;
}
.sl-toast.is-loading .sl-toast__icon { background: #f1f5f9; color: #354358; }
.sl-toast.is-loading .sl-toast__icon::after {
  content: '';
  width: 16px; height: 16px;
  border: 2px solid #e2e8f0;
  border-top-color: var(--sl-brand-blue, #6A9EFF);
  border-radius: 50%;
  animation: sl-spin 0.7s linear infinite;
}
.sl-toast__body { flex: 1; min-width: 0; }
.sl-toast__title {
  font-weight: 700; font-size: 14px;
  margin-bottom: 2px; letter-spacing: -0.01em;
  color: #0f172a;
}
.sl-toast__desc {
  font-size: 13px; color: #354358; line-height: 1.4;
}
.sl-toast__actions {
  display: flex; gap: 8px; margin-top: 10px;
}
.sl-toast__btn {
  font-family: inherit; font-size: 12px; font-weight: 600;
  background: white; border: 1px solid #e2e8f0;
  border-radius: 8px; padding: 6px 12px;
  color: #0f172a; cursor: pointer;
  transition: transform 0.10s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.sl-toast__btn:hover {
  border-color: var(--sl-brand-blue, #6A9EFF);
  box-shadow: 0 0 0 3px rgba(106, 158, 255, 0.10);
}
.sl-toast__btn:active { transform: scale(0.97); }
.sl-toast__btn--primary {
  background: linear-gradient(135deg,
    var(--sl-brand-purple, #8C6CFF) 0%,
    var(--sl-brand-blue, #6A9EFF) 50%,
    var(--sl-brand-teal, #48E2D9) 100%);
  color: white; border: 1px solid transparent;
  box-shadow: 0 6px 18px -6px rgba(106, 158, 255, 0.45);
}
.sl-toast__btn--primary:hover {
  box-shadow: 0 10px 24px -6px rgba(106, 158, 255, 0.55);
  border: 1px solid transparent;
}
.sl-toast__close {
  background: transparent; border: none; box-shadow: none;
  color: #576478; cursor: pointer;
  padding: 4px; width: auto; border-radius: 6px;
  font-family: inherit;
}
.sl-toast__close:hover {
  background: #f1f5f9; color: #0f172a;
}

@media (prefers-reduced-motion: reduce) {
  .sl-cb__panel, .sl-dp__pop, .sl-dp__mp,
  .sl-toast, .sl-cb__chev, .sl-dp__day {
    animation: none !important;
    transition: none !important;
  }
}

@media (max-width: 720px) {
  .sl-dp__shell { grid-template-columns: 1fr; }
  .sl-dp__presets {
    border-right: none; border-bottom: 1px solid #e2e8f0;
    flex-direction: row; overflow-x: auto;
    padding: 8px; gap: 4px; min-width: 0;
  }
  .sl-dp__presets-label { display: none; }
  .sl-dp__preset { white-space: nowrap; }
  .sl-dp__preset-sub { display: none; }
  .sl-dp__months.is-range {
    grid-template-columns: 1fr; min-width: 0;
  }
  .sl-toast-stack {
    /* bottom:88px lifts the full-width mobile toast above the 56px bottom-right
       Help/Concierge FAB so it never covers or intercepts taps on it. */
    left: 16px; right: 16px; bottom: 88px; max-width: none;
  }
}

/* =========================================================
   Responsive table -> labeled cards (Wave 3).
   Add class="sl-rtable" to a <table> and data-label="Header" to each <td>.
   Below 640px every row reflows into a card with its column labels, so wide
   tables stop scrolling off the side of a phone. Cells with an empty
   data-label (e.g. an action button column) render with no label.
   ========================================================= */
@media (max-width: 640px) {
  table.sl-rtable thead { display: none; }
  table.sl-rtable, table.sl-rtable tbody, table.sl-rtable tr, table.sl-rtable td { display: block; width: 100%; }
  table.sl-rtable tr {
    border: 1px solid #e2e8f0; border-radius: 14px;
    background: #fff; padding: 4px 14px; margin-bottom: 10px;
  }
  table.sl-rtable td {
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    border: 0; padding: 9px 0; text-align: right;
  }
  table.sl-rtable td + td { border-top: 1px solid #f1f5f9; }
  table.sl-rtable td::before {
    content: attr(data-label);
    font-weight: 600; color: #576478; font-size: 12px;
    text-align: left; flex: 0 0 auto;
  }
  table.sl-rtable td:empty { display: none; }
}

/* =========================================================
   Strategic gradient polish utilities
   Approved YES variants from _gradient_polish_preview.html.
   Use additively, do not stack with the Gradient Halo on inputs.
   ========================================================= */

.sl-grad-text {
  background: linear-gradient(135deg,
    var(--sl-brand-purple, #8C6CFF) 0%,
    var(--sl-brand-blue, #6A9EFF) 50%,
    var(--sl-brand-teal, #48E2D9) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.sl-section-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 700;
  background: linear-gradient(135deg,
    var(--sl-brand-purple, #8C6CFF) 0%,
    var(--sl-brand-blue, #6A9EFF) 50%,
    var(--sl-brand-teal, #48E2D9) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  display: inline-block;
}

/* Card variants */
.sl-card-accent-top { position: relative; overflow: hidden; }
.sl-card-accent-top::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(135deg,
    var(--sl-brand-purple, #8C6CFF) 0%,
    var(--sl-brand-blue, #6A9EFF) 50%,
    var(--sl-brand-teal, #48E2D9) 100%);
}

.sl-card-ai {
  border-left: 3px solid transparent;
  background-image:
    linear-gradient(white, white),
    linear-gradient(135deg,
      var(--sl-brand-purple, #8C6CFF) 0%,
      var(--sl-brand-blue, #6A9EFF) 50%,
      var(--sl-brand-teal, #48E2D9) 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

.sl-card-corner-glow { position: relative; overflow: hidden; }
.sl-card-corner-glow::before {
  content: '';
  position: absolute; top: -40px; right: -40px;
  width: 100px; height: 100px;
  background: linear-gradient(135deg,
    var(--sl-brand-purple, #8C6CFF),
    var(--sl-brand-blue, #6A9EFF),
    var(--sl-brand-teal, #48E2D9));
  filter: blur(30px); opacity: 0.55;
  border-radius: 50%;
  pointer-events: none;
}

.sl-card-featured {
  border: 2px solid transparent;
  background-image:
    linear-gradient(white, white),
    linear-gradient(135deg,
      var(--sl-brand-purple, #8C6CFF) 0%,
      var(--sl-brand-blue, #6A9EFF) 50%,
      var(--sl-brand-teal, #48E2D9) 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 20px 50px -20px rgba(106, 158, 255, 0.35);
}

/* Pills */
.sl-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px; border-radius: 999px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  white-space: nowrap;
}
.sl-pill .sl-pill-dot {
  width: 6px; height: 6px; border-radius: 50%;
  flex-shrink: 0;
}
.sl-pill-ai {
  background: linear-gradient(135deg,
    rgba(140, 108, 255, 0.10),
    rgba(106, 158, 255, 0.10),
    rgba(72, 226, 217, 0.10));
  color: #0f172a;
}
.sl-pill-ai .sl-pill-dot {
  background: linear-gradient(135deg,
    var(--sl-brand-purple, #8C6CFF),
    var(--sl-brand-blue, #6A9EFF),
    var(--sl-brand-teal, #48E2D9));
}
.sl-pill-live {
  background: linear-gradient(135deg,
    var(--sl-brand-purple, #8C6CFF),
    var(--sl-brand-blue, #6A9EFF),
    var(--sl-brand-teal, #48E2D9));
  color: white;
}
.sl-pill-live .sl-pill-dot { background: rgba(255, 255, 255, 0.85); }
.sl-pill-streak {
  background: linear-gradient(135deg,
    rgba(140, 108, 255, 0.10),
    rgba(106, 158, 255, 0.10),
    rgba(72, 226, 217, 0.10));
  font-size: 12px; padding: 6px 14px;
  color: #0f172a;
}
.sl-pill-streak .sl-pill-dot {
  background: linear-gradient(135deg,
    var(--sl-brand-purple, #8C6CFF),
    var(--sl-brand-blue, #6A9EFF),
    var(--sl-brand-teal, #48E2D9));
}

/* Avatars (gradient fallback) */
.sl-avatar {
  width: 40px; height: 40px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  color: white; font-weight: 700; font-size: 13px;
  background: linear-gradient(135deg,
    var(--sl-brand-purple, #8C6CFF),
    var(--sl-brand-blue, #6A9EFF),
    var(--sl-brand-teal, #48E2D9));
  flex-shrink: 0;
}
.sl-avatar--pb {
  background: linear-gradient(135deg,
    var(--sl-brand-purple, #8C6CFF),
    var(--sl-brand-blue, #6A9EFF));
}
.sl-avatar--bt {
  background: linear-gradient(135deg,
    var(--sl-brand-blue, #6A9EFF),
    var(--sl-brand-teal, #48E2D9));
}

/* Notification dot */
.sl-notif-dot {
  position: absolute;
  width: 10px; height: 10px; border-radius: 50%;
  background: linear-gradient(135deg,
    var(--sl-brand-purple, #8C6CFF),
    var(--sl-brand-blue, #6A9EFF),
    var(--sl-brand-teal, #48E2D9));
  border: 2px solid white;
}

/* KPI numbers */
.sl-kpi-num {
  font-size: 36px; font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.05;
  background: linear-gradient(135deg,
    var(--sl-brand-purple, #8C6CFF) 0%,
    var(--sl-brand-blue, #6A9EFF) 50%,
    var(--sl-brand-teal, #48E2D9) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  display: inline-block;
}

/* Progress bar */
.sl-bar {
  width: 100%; height: 10px; border-radius: 999px;
  background: #f1f5f9; overflow: hidden;
}
.sl-bar > .sl-bar-fill {
  height: 100%; border-radius: 999px;
  transition: width 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.sl-bar-grad > .sl-bar-fill {
  background: linear-gradient(135deg,
    var(--sl-brand-purple, #8C6CFF) 0%,
    var(--sl-brand-blue, #6A9EFF) 50%,
    var(--sl-brand-teal, #48E2D9) 100%);
}
.sl-bar--thin { height: 6px; }

/* Dividers */
.sl-divider-grad {
  height: 1px; width: 100%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(140, 108, 255, 0.35) 20%,
    rgba(106, 158, 255, 0.45) 50%,
    rgba(72, 226, 217, 0.35) 80%,
    transparent 100%);
  border: 0; margin: 0;
}

/* Buttons */
.sl-btn {
  font-family: inherit; font-weight: 600;
  cursor: pointer; outline: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 12px;
  transition: transform 0.10s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.sl-btn:active { transform: scale(0.97); }
.sl-btn-primary {
  font-size: 14px; padding: 12px 24px;
  background: linear-gradient(135deg,
    var(--sl-brand-purple, #8C6CFF) 0%,
    var(--sl-brand-blue, #6A9EFF) 50%,
    var(--sl-brand-teal, #48E2D9) 100%);
  color: white; border: 1px solid transparent;
  box-shadow: 0 8px 24px -8px rgba(106, 158, 255, 0.45);
}
.sl-btn-primary:hover {
  box-shadow: 0 12px 30px -8px rgba(106, 158, 255, 0.55);
}
.sl-btn-pill {
  font-size: 14px; padding: 12px 28px;
  border-radius: 999px;
  background: linear-gradient(135deg,
    var(--sl-brand-purple, #8C6CFF) 0%,
    var(--sl-brand-blue, #6A9EFF) 50%,
    var(--sl-brand-teal, #48E2D9) 100%);
  color: white; border: 1px solid transparent;
  box-shadow: 0 8px 24px -8px rgba(106, 158, 255, 0.45);
}
.sl-btn-pill:hover {
  box-shadow: 0 12px 30px -8px rgba(106, 158, 255, 0.55);
}
.sl-btn-outline-grad {
  font-size: 14px; padding: 11px 22px;
  background: white; color: #0f172a;
  border: 2px solid transparent;
  background-image:
    linear-gradient(white, white),
    linear-gradient(135deg,
      var(--sl-brand-purple, #8C6CFF) 0%,
      var(--sl-brand-blue, #6A9EFF) 50%,
      var(--sl-brand-teal, #48E2D9) 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
.sl-btn-outline-grad:hover {
  box-shadow: 0 0 0 4px rgba(106, 158, 255, 0.10);
}
.sl-btn-outline-grad > .sl-grad-text { font-weight: 700; }
.sl-btn-icon-grad {
  width: 44px; height: 44px; padding: 0;
  border-radius: 12px;
  background: linear-gradient(135deg,
    var(--sl-brand-purple, #8C6CFF) 0%,
    var(--sl-brand-blue, #6A9EFF) 50%,
    var(--sl-brand-teal, #48E2D9) 100%);
  color: white; border: 1px solid transparent;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px -8px rgba(106, 158, 255, 0.45);
}
.sl-btn-icon-grad:hover {
  box-shadow: 0 12px 30px -8px rgba(106, 158, 255, 0.55);
}

/* Sidebar nav active (gradient left bar, soft tinted bg) */
.sl-nav-active {
  position: relative;
  background: linear-gradient(135deg,
    rgba(140, 108, 255, 0.10),
    rgba(106, 158, 255, 0.10),
    rgba(72, 226, 217, 0.10)) !important;
  font-weight: 700 !important;
}
.sl-nav-active::before {
  content: '';
  position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 3px; border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg,
    var(--sl-brand-purple, #8C6CFF),
    var(--sl-brand-blue, #6A9EFF),
    var(--sl-brand-teal, #48E2D9));
}

/* Tabs underline indicator */
.sl-tab-grad { position: relative; }
.sl-tab-grad::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg,
    var(--sl-brand-purple, #8C6CFF),
    var(--sl-brand-blue, #6A9EFF),
    var(--sl-brand-teal, #48E2D9));
  border-radius: 2px 2px 0 0;
}

/* Compact KPI label */
.sl-kpi-label {
  font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.18em; color: #354358;
  font-weight: 700; margin-bottom: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .sl-bar > .sl-bar-fill { transition: none !important; }
}

/* =========================================================
   Overlay dialog panel
   ========================================================= */
/* The one thing a centred overlay dialog needs that the Tailwind scale has no
   name for: a height ceiling, so a long dialog scrolls its own body instead of
   running off the viewport. A flex item centred with `items-center` overflows
   BOTH ways when it is taller than its container, which puts the dialog's
   header and its close control off the top of the screen with no way to reach
   them.

   It lives here rather than in the template as `max-h-[90vh]` because that is
   an arbitrary value and fails the ratchet in
   tests/buildgate/test_design_scale_standard.py, and rather than as a Tailwind
   `maxHeight` token because a new utility only reaches a page once
   tailwind-output.css is rebuilt, and that artifact is hand-committed.

   Pair with `flex flex-col` on the panel and `overflow-y-auto` on the section
   that should scroll. */
.sl-modal-panel { max-height: 90vh; }