/* ============================================================
   Tags Page (tg-)
   ============================================================ */
.tg-page { padding: 0; }
.tg-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 24px 0 20px; gap: 16px; }
.tg-toolbar-left { display: flex; align-items: center; gap: 12px; }
.tg-search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--k-border); border-radius: var(--k-radius-sm); padding: 8px 14px; background: var(--k-surface); min-width: 260px; }
.tg-search .material-symbols-outlined { font-size: 20px; color: var(--k-text-muted); }
.tg-search input { border: none; outline: none; font-size: 14px; color: var(--k-text-strong); background: transparent; width: 100%; }
.tg-add-btn { background: var(--k-cta); color: #fff; border: none; border-radius: var(--k-radius-sm); padding: 10px 20px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s; }
.tg-add-btn:hover { background: var(--k-cta-hover); }
.tg-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.tg-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 1px solid var(--k-border); border-radius: var(--k-radius-xl); background: var(--k-surface); font-size: 14px; font-weight: 500; color: var(--k-text-strong); transition: box-shadow .15s; }
.tg-chip:hover { box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.tg-chip-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.tg-chip-remove { font-size: 16px !important; color: var(--k-text-muted); cursor: pointer; transition: color .15s; margin-left: 2px; }
.tg-chip-remove:hover { color: var(--k-error); }
.tg-section-title { font-size: 16px; font-weight: 700; color: var(--k-text); margin: 0 0 16px; }
.tg-headers { display: grid; grid-template-columns: 3fr 1fr 1fr 1fr; padding: 0 16px 8px; }
.tg-hdr { font-size: 11px; font-weight: 600; color: var(--k-text-secondary); text-transform: uppercase; letter-spacing: .44px; }
.tg-list { display: flex; flex-direction: column; gap: 6px; }
.tg-row { display: grid; grid-template-columns: 3fr 1fr 1fr 1fr; align-items: center; padding: 14px 16px; border: 1px solid var(--k-border); border-radius: var(--k-radius-sm); background: var(--k-surface); transition: box-shadow .15s; }
.tg-row:hover { box-shadow: var(--k-shadow-md); }
.tg-name { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--k-text-strong); }
.tg-color-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.tg-cell { font-size: 14px; color: var(--k-text-secondary); }
.tg-date { font-size: 13px; color: #a0a4ae; }
.tg-empty { text-align: center; padding: 48px 0; color: var(--k-text-secondary); }
.tg-empty p { margin: 8px 0; }
@media (max-width: 768px) {
  .tg-headers, .tg-row { grid-template-columns: 1fr 1fr; }
}

/* ── Email Templates ──────────────────────────────── */
.tpl-page { display: flex; flex-direction: column; gap: 12px; }
.tpl-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.tpl-toolbar-left { display: flex; align-items: center; gap: 12px; }
.tpl-search {
  display: flex; align-items: center; gap: 8px;
  border: 0.8px solid var(--k-border, var(--k-border)); border-radius: var(--k-radius-sm);
  padding: 10px 16px; min-width: 240px; background: var(--k-surface, #fff);
}
.tpl-search .material-symbols-outlined { font-size: 20px; color: var(--k-text-tertiary, #b0b5be); }
.tpl-search input { border: none; outline: none; background: transparent; font-size: 14px; color: var(--k-text, #161c2d); width: 100%; }
.tpl-search input::placeholder { color: var(--k-text-tertiary, #b0b5be); }
.tpl-add-btn {
  background: var(--k-primary, #4580f7); color: #fff; border: none; border-radius: var(--k-radius-sm);
  padding: 10px 20px; font-size: 14px; font-weight: 600; cursor: pointer;
}
.tpl-add-btn:hover { background: var(--k-primary-hover, #3a6fd8); }
.tpl-headers {
  display: grid; grid-template-columns: 2fr 2fr 1fr 1fr 80px;
  padding: 0 16px; gap: 8px;
}
.tpl-hdr { font-size: 11px; font-weight: 600; color: var(--k-text-secondary, #6d727e); text-transform: uppercase; letter-spacing: 0.44px; }
.tpl-list { display: flex; flex-direction: column; gap: 8px; }
.tpl-row {
  display: grid; grid-template-columns: 2fr 2fr 1fr 1fr 80px;
  align-items: center; padding: 14px 16px; gap: 8px;
  border: 0.8px solid var(--k-border, var(--k-border)); border-radius: var(--k-radius-sm);
  background: var(--k-surface, #fff); transition: box-shadow .15s;
}
.tpl-row:hover { box-shadow: 0 4px 12px rgba(0,0,0,.04); }
.tpl-name { font-size: 14px; font-weight: 600; color: var(--k-text, #14171f); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpl-cell { font-size: 14px; color: var(--k-text-secondary, #6d727e); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpl-date { font-size: 13px; color: var(--k-text-tertiary, #a0a4ae); }
.tpl-badge { display: inline-block; padding: 4px 10px; border-radius: var(--k-radius-sm); font-size: 13px; font-weight: 500; background: rgba(69,128,247,.1); color: var(--k-primary, #4580f7); }
.tpl-actions { display: flex; gap: 4px; justify-content: flex-end; }
.tpl-icon-btn {
  width: 32px; height: 32px; border: none; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  color: var(--k-text-secondary, #6d727e); transition: background .15s, color .15s;
}
.tpl-icon-btn:hover { background: rgba(69,128,247,.08); color: var(--k-primary, #4580f7); }
.tpl-icon-btn--danger:hover { background: rgba(239,68,68,.08); color: #ef4444; }
.tpl-icon-btn .material-symbols-outlined { font-size: 20px; }
.tpl-empty { text-align: center; padding: 48px 0; color: var(--k-text-secondary, #6d727e); }
.tpl-empty p { margin: 12px 0 16px; font-size: 15px; }
.tpl-form { display: flex; flex-direction: column; gap: 16px; min-width: 400px; }
@media (max-width: 768px) {
  .tpl-headers, .tpl-row { grid-template-columns: 1fr 1fr; }
  .tpl-form { min-width: auto; }
}

/* ── API Keys page ───────────────────────────────────────── */
.ak-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 0 0 20px; flex-wrap: wrap;
}
.ak-toolbar-left { display: flex; align-items: center; gap: 12px; }
.ak-search {
  display: flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--k-border); border-radius: var(--k-radius-sm);
  padding: 8px 16px; background: var(--k-surface); min-width: 180px; max-width: 260px;
  transition: border-color var(--k-dur-fast) var(--k-ease);
}
.ak-search:focus-within { border-color: var(--k-primary); }
.ak-search .material-symbols-outlined { font-size: 18px; color: var(--k-text-tertiary); }
.ak-search input {
  flex: 1; border: none; background: none; outline: none;
  font: var(--k-text-body); color: var(--k-text); min-width: 80px;
}
.ak-search input::placeholder { color: var(--k-text-tertiary); }
.key-value {
  font-family: 'JetBrains Mono', monospace; background: var(--md-sys-color-surface-variant, var(--k-surface-container));
  padding: 6px 12px; border-radius: var(--k-radius-sm); user-select: all; font-size: 0.85rem;
}
.key-value--full { display: block; word-break: break-all; margin-top: 8px; padding: 12px 16px; }
.key-copy-btn { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }

/* ── Webhooks page ───────────────────────────────────────── */
.wh-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 0 0 20px; flex-wrap: wrap;
}
.wh-toolbar-left { display: flex; align-items: center; gap: 12px; }
.wh-search {
  display: flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--k-border); border-radius: var(--k-radius-sm);
  padding: 8px 16px; background: var(--k-surface); min-width: 180px; max-width: 260px;
  transition: border-color var(--k-dur-fast) var(--k-ease);
}
.wh-search:focus-within { border-color: var(--k-primary); }
.wh-search .material-symbols-outlined { font-size: 18px; color: var(--k-text-tertiary); }
.wh-search input {
  flex: 1; border: none; background: none; outline: none;
  font: var(--k-text-body); color: var(--k-text); min-width: 80px;
}
.wh-search input::placeholder { color: var(--k-text-tertiary); }
.wh-url { word-break: break-all; max-width: 300px; display: inline-block; }
.wh-loading { text-align: center; padding: 24px; color: var(--k-text-tertiary); }

/* ── Empty-state icons ──────────────────────────────────── */
.empty-icon    { font-size: 48px !important; color: var(--k-text-muted); }
.empty-icon--sm { font-size: 40px !important; color: var(--k-text-muted); }

/* ── Dot colour palette (KPI / chart legend) ────────────── */
.dot-blue   { background: var(--k-cta); }
.dot-green  { background: #28d371; }
.dot-red    { background: #ff5252; }
.dot-yellow { background: #f59e0b; }
.dot-purple { background: #be83e4; }
.dot-indigo { background: #2196f3; }
.dot-lime   { background: #4caf50; }
.dot-violet { background: #9c27b0; }
.dot-dark   { background: #333;    }
.dot-orange { background: #ff9800; }
.dot-ylgr   { background: #cddc39; }

/* ── Dashboard health-score colour theming ──────────────── */
.db-health-item.db-health--good  { --hc: #28d371; --hc-a: #28d3711a; }
.db-health-item.db-health--warn  { --hc: #f59e0b; --hc-a: #f59e0b1a; }
.db-health-item.db-health--bad   { --hc: #ff5252; --hc-a: #ff52521a; }
.db-health-item.db-health--none  { --hc: #b0b5be; --hc-a: #b0b5be1a; }
.db-health-avatar { background-color: var(--hc-a, #b0b5be1a); color: var(--hc, #b0b5be); }
.db-health-fill   { background-color: var(--hc, #b0b5be); }
.db-health-score  { color: var(--hc, #b0b5be); }
.wh-events { display: flex; flex-wrap: wrap; gap: 4px; }
.wh-more { font-size: 0.8rem; color: var(--k-text-tertiary); padding: 2px 6px; }
.wh-events-form { display: flex; flex-direction: column; gap: 8px; }

/* ── Audit Log page ──────────────────────────────────────── */
.al-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 0 0 20px; flex-wrap: wrap;
}
.al-toolbar-left { display: flex; align-items: center; gap: 12px; }
.al-search {
  display: flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--k-border); border-radius: var(--k-radius-sm);
  padding: 8px 16px; background: var(--k-surface); min-width: 200px; max-width: 300px;
  transition: border-color var(--k-dur-fast) var(--k-ease);
}
.al-search:focus-within { border-color: var(--k-primary); }
.al-search .material-symbols-outlined { font-size: 18px; color: var(--k-text-tertiary); }
.al-search input {
  flex: 1; border: none; background: none; outline: none;
  font: var(--k-text-body); color: var(--k-text); min-width: 80px;
}
.al-search input::placeholder { color: var(--k-text-tertiary); }
.audit-action { font-weight: 500; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.02em; }
.audit-action.create { color: var(--md-sys-color-primary, var(--k-primary)); }
.audit-action.update { color: var(--md-sys-color-tertiary, var(--k-warning, #f59e0b)); }
.audit-action.delete { color: var(--md-sys-color-error, var(--k-error, #ef4444)); }
.al-load-more { padding: 16px 0; text-align: center; }

/* ── Integrations page ────────────────────────────────────── */
.int-page { max-width: 1200px; }
.int-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 20px; }
.int-card { background: var(--md-sys-color-surface-container, var(--k-surface)); border-radius: var(--k-radius-lg); padding: 24px; border: 1px solid var(--k-border); }
.int-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.int-card-icon { width: 48px; height: 48px; border-radius: var(--k-radius-md); display: flex; align-items: center; justify-content: center; background: var(--md-sys-color-primary-container, var(--k-primary-light)); color: var(--md-sys-color-on-primary-container, var(--k-primary)); flex-shrink: 0; }
.int-card-icon .material-symbols-outlined { font-size: 24px; }
.int-card-status { display: inline-flex; align-items: center; gap: 4px; font-size: 0.75rem; padding: 4px 8px; border-radius: var(--k-radius-sm); white-space: nowrap; flex-shrink: 0; }
.int-card-status.connected { background: var(--md-sys-color-primary-container, rgba(34,197,94,0.12)); color: var(--md-sys-color-on-primary-container, var(--k-success, #22c55e)); }
.int-card-status.disconnected { background: var(--md-sys-color-surface-variant, var(--k-surface-sunken)); color: var(--md-sys-color-on-surface-variant, var(--k-text-tertiary)); }
.int-card-actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.int-map-arrow { font-size: 16px; color: var(--k-text-tertiary); }

/* ── Custom Fields page ──────────────────────────────────── */
.cf-page { max-width: 1000px; }
.cf-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 0 0 20px; flex-wrap: wrap;
}
.cf-toolbar-left { display: flex; align-items: center; gap: 12px; }
.cf-search {
  display: flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--k-border); border-radius: var(--k-radius-sm);
  padding: 8px 16px; background: var(--k-surface); min-width: 200px; max-width: 300px;
  transition: border-color var(--k-dur-fast) var(--k-ease);
}
.cf-search:focus-within { border-color: var(--k-primary); }
.cf-search .material-symbols-outlined { font-size: 18px; color: var(--k-text-tertiary); }
.cf-search input {
  flex: 1; border: none; background: none; outline: none;
  font: var(--k-text-body); color: var(--k-text); min-width: 80px;
}
.cf-search input::placeholder { color: var(--k-text-tertiary); }
.cf-type-badge { font-size: 0.75rem; padding: 2px 8px; border-radius: 4px; background: var(--md-sys-color-secondary-container, var(--k-surface-sunken)); color: var(--md-sys-color-on-secondary-container, var(--k-text-secondary)); text-transform: capitalize; }