/*
  KAMFR CRM Design System
  Spacing, typography, and component tokens — extends material-tokens.css.
  Use these classes instead of one-off margin/padding values in views.
*/

:root {
  /* Spacing scale (4px base) */
  --kam-space-1: 0.25rem;   /* 4px */
  --kam-space-2: 0.5rem;    /* 8px */
  --kam-space-3: 0.75rem;   /* 12px */
  --kam-space-4: 1rem;      /* 16px */
  --kam-space-5: 1.25rem;   /* 20px */
  --kam-space-6: 1.5rem;    /* 24px */
  --kam-space-8: 2rem;      /* 32px */
  --kam-space-10: 2.5rem;   /* 40px */
  --kam-space-12: 3rem;     /* 48px */
  --kam-space-16: 4rem;     /* 64px */

  /* Typography scale */
  --kam-text-page-title: 1.5rem;
  --kam-text-section-title: 1.125rem;
  --kam-text-card-title: 1rem;
  --kam-text-body: 0.9375rem;
  --kam-text-small: 0.875rem;
  --kam-text-caption: 0.75rem;
  --kam-text-label: 0.7rem;

  --kam-weight-normal: 400;
  --kam-weight-medium: 500;
  --kam-weight-semibold: 600;
  --kam-weight-bold: 700;

  --kam-line-tight: 1.25;
  --kam-line-body: 1.5;
  --kam-line-relaxed: 1.65;

  --kam-letter-tight: -0.035em;
  --kam-letter-label: 0.06em;

  /* Layout */
  --kam-page-max-width: 90rem;
  --kam-form-max-width: 52rem;
  --kam-narrow-max-width: 28rem;
  --kam-card-radius: 0.65rem;
  --kam-control-radius: 0.375rem;
  --kam-btn-radius: 0.35rem;

  /* Surfaces */
  --kam-border-subtle: rgba(0, 0, 0, 0.06);
  --kam-filter-bg: rgba(var(--md-primary-rgb), 0.04);
  --kam-filter-border: rgba(var(--md-primary-rgb), 0.14);
}

[data-bs-theme="dark"] {
  --kam-border-subtle: rgba(255, 255, 255, 0.08);
  --kam-filter-bg: rgba(255, 255, 255, 0.04);
  --kam-filter-border: rgba(255, 255, 255, 0.1);
}

/* ── Page shell ─────────────────────────────────────────────── */

.md-page {
  max-width: var(--kam-page-max-width);
  margin-left: auto;
  margin-right: auto;
}

.md-page > * + * {
  margin-top: var(--kam-space-6);
}

.md-page > .md-breadcrumb + *,
.md-page > nav[aria-label="breadcrumb"] + * {
  margin-top: 0;
}

/* ── Breadcrumbs ──────────────────────────────────────────────── */

.md-breadcrumb,
nav[aria-label="breadcrumb"].md-breadcrumb {
  margin-bottom: var(--kam-space-6);
}

.md-breadcrumb .breadcrumb {
  margin-bottom: 0;
  font-size: var(--kam-text-small);
}

/* ── Page header ────────────────────────────────────────────── */

.md-page-header {
  margin-bottom: var(--kam-space-6);
}

.md-page-header .h2,
.md-page-header h1 {
  font-size: var(--kam-text-page-title);
  font-weight: var(--kam-weight-semibold);
  letter-spacing: var(--kam-letter-tight);
  line-height: var(--kam-line-tight);
  margin-bottom: var(--kam-space-1);
}

.md-page-header .text-secondary {
  font-size: var(--kam-text-small);
}

/* ── Alerts & flash messages ──────────────────────────────────── */

.md-page-alerts {
  display: flex;
  flex-direction: column;
  gap: var(--kam-space-3);
  margin-bottom: var(--kam-space-6);
}

.md-page-alert {
  margin-bottom: 0;
  font-size: var(--kam-text-small);
  border-radius: var(--kam-control-radius);
}

/* ── Cards ───────────────────────────────────────────────────── */

.md-surface-card,
.card.md-surface-card {
  background: var(--md-card-bg);
  box-shadow: var(--md-card-shadow);
  border-radius: var(--kam-card-radius);
  border: 0;
}

.md-surface-card > .card-body {
  padding: var(--kam-space-6);
}

.md-surface-card > .card-header {
  padding: var(--kam-space-4) var(--kam-space-6);
  background: transparent;
  border-bottom: 1px solid var(--kam-border-subtle);
}

.md-surface-card > .card-header h5,
.md-surface-card > .card-header h6,
.md-surface-card > .card-header .h5,
.md-surface-card > .card-header .h6 {
  font-size: var(--kam-text-card-title);
  font-weight: var(--kam-weight-semibold);
  letter-spacing: var(--kam-letter-tight);
  margin-bottom: 0;
}

.md-surface-card > .card-header + .card-body {
  padding-top: var(--kam-space-4);
}

.md-surface-card.mb-section {
  margin-bottom: var(--kam-space-6);
}

/* ── Filter / toolbar bars ────────────────────────────────────── */

.md-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kam-space-2);
  margin-bottom: var(--kam-space-6);
}

.md-filter-card {
  margin-bottom: var(--kam-space-6);
}

.md-filter-card .card-body {
  padding: var(--kam-space-4) var(--kam-space-6);
}

.md-filter-card .form-label {
  font-size: var(--kam-text-caption);
  font-weight: var(--kam-weight-medium);
  margin-bottom: var(--kam-space-1);
  color: var(--bs-secondary-color);
}

/* ── Form sections ────────────────────────────────────────────── */

.md-form-section-title {
  font-size: var(--kam-text-caption);
  font-weight: var(--kam-weight-semibold);
  letter-spacing: var(--kam-letter-label);
  text-transform: uppercase;
  color: var(--bs-secondary-color);
  margin-top: var(--kam-space-6);
  margin-bottom: var(--kam-space-2);
}

.md-form-section-title:first-child,
form > .md-form-section-title:first-of-type {
  margin-top: 0;
}

.md-form-panel {
  max-width: var(--kam-form-max-width);
  margin-left: auto;
  margin-right: auto;
}

.md-form-panel--narrow {
  max-width: var(--kam-narrow-max-width);
}

.app-body .form-label {
  font-size: var(--kam-text-small);
  font-weight: var(--kam-weight-medium);
  margin-bottom: var(--kam-space-1);
}

.app-body .text-danger,
.app-body .field-validation-error {
  font-size: var(--kam-text-caption);
  margin-top: var(--kam-space-1);
  display: block;
}

.app-body .validation-summary-errors {
  font-size: var(--kam-text-small);
  margin-bottom: var(--kam-space-4);
}

/* ── Detail / preview panels ──────────────────────────────────── */

.md-detail-panel {
  max-width: var(--kam-form-max-width);
}

.md-detail-panel .md-admin-preview-body dt {
  padding-top: var(--kam-space-1);
}

.md-detail-panel .md-admin-preview-body dd {
  margin-bottom: var(--kam-space-3);
}

.md-detail-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kam-space-2);
  margin-top: var(--kam-space-6);
  padding-top: var(--kam-space-4);
  border-top: 1px solid var(--kam-border-subtle);
}

/* ── Buttons ──────────────────────────────────────────────────── */

.app-body .btn {
  border-radius: var(--kam-btn-radius);
  font-size: var(--kam-text-small);
  font-weight: var(--kam-weight-medium);
  letter-spacing: 0.01em;
  padding: 0.45rem 0.85rem;
  line-height: var(--kam-line-tight);
}

.app-body .btn-sm {
  padding: 0.35rem 0.65rem;
  font-size: var(--kam-text-caption);
}

.app-body .btn-lg {
  padding: 0.55rem 1rem;
  font-size: var(--kam-text-body);
}

.app-body .btn .fa-solid,
.app-body .btn .fa-regular {
  line-height: 1;
}

.app-body .btn .fa-solid:first-child,
.app-body .btn .fa-regular:first-child {
  margin-right: var(--kam-space-1);
}

.app-body .btn.bg-gradient-dark,
.app-body .btn.md-btn-gradient-dark {
  min-height: 2.125rem;
}

/* ── Tables & grids ───────────────────────────────────────────── */

.md-empty-cell {
  padding: var(--kam-space-8) var(--kam-space-4) !important;
  text-align: center;
  color: var(--bs-secondary-color);
  font-size: var(--kam-text-small);
}

.md-empty-state {
  padding: var(--kam-space-8) var(--kam-space-6);
  text-align: center;
  color: var(--bs-secondary-color);
  font-size: var(--kam-text-small);
}

.md-empty-state__icon {
  font-size: 2.5rem;
  margin-bottom: var(--kam-space-4);
  line-height: 1;
}

.md-empty-state__title {
  font-size: var(--kam-text-section-title);
  font-weight: var(--kam-weight-semibold);
  color: var(--bs-body-color);
  margin-bottom: var(--kam-space-2);
}

.md-empty-state__text {
  margin-bottom: var(--kam-space-4);
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
}

.dataTable-wrapper .admin-table-head th {
  font-size: var(--kam-text-caption);
  text-transform: uppercase;
  letter-spacing: var(--kam-letter-label);
  font-weight: var(--kam-weight-semibold);
  vertical-align: middle;
}

.dataTable-wrapper .dataTable-table.admin-data-grid thead.admin-table-head th {
  padding: 0.3rem 0.45rem;
}

.dataTable-wrapper .table tbody td {
  font-size: var(--kam-text-small);
  vertical-align: middle;
}

/* ── Progress bars ────────────────────────────────────────────── */

.md-progress {
  height: 0.5rem;
  border-radius: var(--kam-btn-radius);
  overflow: hidden;
}

.md-progress--sm {
  height: 0.375rem;
}

.md-progress-chart {
  height: 16.25rem;
}

/* ── Modals ───────────────────────────────────────────────────── */

.modal-content.md-content-card {
  border-radius: var(--kam-card-radius);
}

.modal-header {
  padding: var(--kam-space-4) var(--kam-space-6);
  border-bottom: 1px solid var(--kam-border-subtle);
}

.modal-body {
  padding: var(--kam-space-6);
}

.modal-footer {
  padding: var(--kam-space-4) var(--kam-space-6);
  border-top: 1px solid var(--kam-border-subtle);
  gap: var(--kam-space-2);
}

.modal-title {
  font-size: var(--kam-text-section-title);
  font-weight: var(--kam-weight-semibold);
  letter-spacing: var(--kam-letter-tight);
}

/* ── Tabs (workspace & wizard) ───────────────────────────────── */

.md-tab-nav .nav-link {
  font-size: var(--kam-text-small);
  font-weight: var(--kam-weight-medium);
  padding: var(--kam-space-2) var(--kam-space-4);
  border-radius: var(--kam-btn-radius);
}

.md-tab-content {
  padding-top: var(--kam-space-6);
}

/* ── Status tags ──────────────────────────────────────────────── */

.leads-grid-status-tag {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  border-radius: var(--kam-btn-radius);
  font-size: var(--kam-text-caption);
  font-weight: var(--kam-weight-medium);
  line-height: var(--kam-line-tight);
  color: #fff;
  white-space: nowrap;
}

/* ── Icons ────────────────────────────────────────────────────── */

.md-icon-xl {
  font-size: 2.5rem;
  line-height: 1;
}

.md-icon-lg {
  font-size: 1.75rem;
  line-height: 1;
}

/* ── Stat cards ───────────────────────────────────────────────── */

.md-stat-card .text-uppercase.small {
  font-size: var(--kam-text-label) !important;
  letter-spacing: var(--kam-letter-label);
}

.md-stat-card .h4 {
  font-size: var(--kam-text-section-title);
  font-weight: var(--kam-weight-semibold);
}

.md-stat-card .card-body {
  padding: var(--kam-space-4) !important;
}

/* ── Sidebar section labels ───────────────────────────────────── */

.md-nav-section-label {
  font-size: var(--kam-text-label);
  letter-spacing: var(--kam-letter-label);
}

/* ── Login status truncate ────────────────────────────────────── */

.md-login-username {
  max-width: min(16rem, 42vw);
}

/* ── Token palette (campaign templates) ───────────────────────── */

.token-palette {
  gap: var(--kam-space-1) !important;
}

.token-palette .btn {
  font-size: var(--kam-text-caption);
  padding: 0.2rem 0.45rem;
}

.md-template-preview-frame {
  min-height: 31.25rem;
  border: 0;
}


.md-collapsible-summary {
  cursor: pointer;
  font-size: var(--kam-text-small);
  color: var(--bs-secondary-color);
}

/* ── Inline filter / search bars (full-width) ─────────────────── */

.md-filter-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--kam-space-3);
  width: 100%;
}

.md-filter-inline__field {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.md-filter-inline__field--grow {
  flex: 1 1 14rem;
}

.md-filter-inline__field .form-label {
  margin-bottom: var(--kam-space-1);
}

.md-filter-inline__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kam-space-2);
  flex-shrink: 0;
}

.md-filter-inline__actions .btn {
  min-height: 2.125rem;
  white-space: nowrap;
}

.md-filter-card > .card-body {
  padding: var(--kam-space-4) var(--kam-space-6);
}

/* ── Themed grid empty state (replaces blue alert-info boxes) ─ */

.md-grid-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--kam-space-8) var(--kam-space-6);
  background: var(--md-card-bg);
  border: 1px dashed rgba(var(--md-primary-rgb), 0.22);
  border-radius: var(--kam-card-radius);
  color: var(--bs-secondary-color);
}

.md-grid-empty-state__icon {
  font-size: 1.75rem;
  color: rgba(var(--md-primary-rgb), 0.45);
  margin-bottom: var(--kam-space-3);
  line-height: 1;
}

.md-grid-empty-state__text {
  font-size: var(--kam-text-small);
  max-width: 28rem;
  line-height: var(--kam-line-body);
}

[data-bs-theme="dark"] .md-grid-empty-state {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
}

/* ── Embedded history / detail tables ───────────────────────── */

.md-embed-table-wrap {
  border-radius: var(--kam-control-radius);
  overflow: hidden;
  border: 1px solid var(--kam-border-subtle);
}

.md-embed-table {
  width: 100%;
  margin-bottom: 0;
  font-size: var(--kam-text-small);
}

.md-embed-table thead th {
  font-size: var(--kam-text-caption);
  text-transform: uppercase;
  letter-spacing: var(--kam-letter-label);
  font-weight: var(--kam-weight-semibold);
  color: var(--bs-secondary-color);
  background: rgba(var(--md-primary-rgb), 0.06);
  border-bottom: 1px solid var(--kam-border-subtle);
  padding: var(--kam-space-3) var(--kam-space-4);
  vertical-align: middle;
  white-space: nowrap;
}

.md-embed-table tbody td {
  padding: var(--kam-space-3) var(--kam-space-4);
  vertical-align: top;
  border-bottom: 1px solid var(--kam-border-subtle);
  color: var(--bs-body-color);
  line-height: var(--kam-line-body);
  word-break: break-word;
}

.md-embed-table tbody tr:last-child td {
  border-bottom: 0;
}

.md-embed-table tbody tr:hover {
  background: rgba(var(--md-primary-rgb), 0.03);
}

[data-bs-theme="dark"] .md-embed-table thead th {
  background: rgba(255, 255, 255, 0.05);
}

.md-history-card > .card-header {
  padding: var(--kam-space-4) var(--kam-space-6);
  background: transparent;
  border-bottom: 1px solid var(--kam-border-subtle);
}

.md-history-card > .card-header h6 {
  font-size: var(--kam-text-card-title);
  font-weight: var(--kam-weight-semibold);
  margin-bottom: 0;
}

.md-history-card > .card-body {
  padding: 0;
}

/* ── Topbar chrome alignment ──────────────────────────────────── */

.app-topbar .d-flex.align-items-center {
  align-items: center !important;
}

.app-topbar .md-theme-switcher {
  align-items: center;
}

.app-topbar .md-theme-switcher .md-theme-opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.65rem;
  line-height: 1.2;
}

.app-topbar .md-login-username {
  line-height: 1.65rem;
}

.app-topbar .md-header-signout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  min-width: 2rem;
}

.app-topbar-actions {
  align-items: center;
}

@media (max-width: 767.98px) {
  .app-main {
    padding: var(--kam-space-4) !important;
  }

  .md-surface-card > .card-body {
    padding: var(--kam-space-4);
  }

  .md-filter-bar {
    gap: var(--kam-space-1);
  }

  .md-filter-inline {
    flex-direction: column;
    align-items: stretch;
  }

  .md-filter-inline__field--grow {
    flex: 1 1 auto;
    width: 100%;
  }

  .md-filter-inline__actions {
    width: 100%;
  }

  .md-filter-inline__actions .btn {
    flex: 1 1 auto;
  }

  .md-filter-card > .card-body {
    padding: var(--kam-space-4);
  }

  .md-form-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .md-form-actions .btn {
    width: 100%;
  }
}