/* ==========================================================================
   LeadAPI Admin — theme (v2, premium)
   A clean, modern CRM-grade layer on top of Bootstrap 5.
   Design language: 8px grid · soft layered shadows · 10–14px radii ·
   200–300ms transitions · restrained accent · accessible focus.
   ========================================================================== */

/* ---- Design tokens ----------------------------------------------------- */
:root {
  /* Surfaces */
  --bg:          #f6f7f9;
  --bg-soft:     #eef0f4;
  --surface:     #ffffff;
  --surface-2:   #fbfbfd;
  --border:      #e7e9ee;
  --border-soft: #eef0f3;

  /* Text */
  --text:        #171b23;
  --text-2:      #454b57;
  --muted:       #737b8a;
  --muted-2:     #9aa1af;

  /* Accent (indigo) */
  --accent:      #5b5bf0;
  --accent-600:  #4f46e5;
  --accent-700:  #4338ca;
  --accent-050:  #eef1ff;
  --accent-100:  #e0e4ff;
  --accent-grad: linear-gradient(135deg, #6366f1 0%, #7c6cf0 100%);

  /* Semantic */
  --green:       #12a150; --green-bg:#e7f7ee; --green-bd:#bfe9cf;
  --amber:       #b7791f; --amber-bg:#fdf4e3; --amber-bd:#f2ddb0;
  --red:         #d1293d; --red-bg:#fdecee; --red-bd:#f5c8ce;
  --gray:        #6b7280; --gray-bg:#f0f1f4; --gray-bd:#e2e5ea;
  --blue:        #1f6feb; --blue-bg:#e8f1fe; --blue-bd:#c6ddfb;

  /* Sidebar */
  --sidebar:       #12151d;
  --sidebar-2:     #171b26;
  --sidebar-muted: #8b93a4;
  --sidebar-line:  rgba(255,255,255,.07);

  /* Shape */
  --radius:     12px;
  --radius-sm:  9px;
  --radius-lg:  16px;
  --radius-pill:999px;

  /* Elevation */
  --shadow-xs: 0 1px 2px rgba(16,24,40,.05);
  --shadow-sm: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
  --shadow:    0 2px 4px rgba(16,24,40,.05), 0 4px 12px rgba(16,24,40,.06);
  --shadow-md: 0 6px 20px rgba(16,24,40,.10);
  --shadow-lg: 0 16px 44px rgba(16,24,40,.16);
  --ring:      0 0 0 3px var(--accent-100);

  /* Motion */
  --t-fast: 140ms cubic-bezier(.4,0,.2,1);
  --t:      220ms cubic-bezier(.4,0,.2,1);

  --topbar-h: 66px;
}

/* ---- Base -------------------------------------------------------------- */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  min-height: 100vh;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv02","cv03","cv04","cv11";
}

a { color: var(--accent-600); text-decoration: none; }
a:hover { color: var(--accent-700); text-decoration: underline; }

code {
  color: var(--accent-700);
  background: var(--accent-050);
  padding: 1.5px 6px; border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .84em; font-weight: 500;
}

::selection { background: var(--accent-100); }

/* Focus visibility everywhere (accessibility) */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible { outline: none; }

/* Slim, modern scrollbars */
* { scrollbar-width: thin; scrollbar-color: #c9ccd4 transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #cdd1da; border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: #b4b9c4; background-clip: content-box; }

/* ==========================================================================
   App shell
   ========================================================================== */
.app { display: flex; min-height: 100vh; }

.sidebar {
  width: 248px;
  flex: 0 0 248px;
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(99,102,241,.16), transparent 60%),
    var(--sidebar);
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: 18px 14px;
  position: sticky;
  top: 0;
  height: 100vh;
  border-right: 1px solid rgba(255,255,255,.04);
}
.sidebar__brand {
  display: flex; align-items: center; gap: 11px;
  font-weight: 700; font-size: 1.06rem; letter-spacing: -.01em;
  color: #fff; text-decoration: none;
  padding: 6px 10px 16px;
}
.sidebar__brand:hover { color: #fff; text-decoration: none; }
.sidebar__brand .dot {
  width: 30px; height: 30px; border-radius: 9px;
  background: linear-gradient(135deg, #6d6df5, #8b7cff);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; color: #fff;
  box-shadow: 0 4px 12px rgba(99,102,241,.45);
}

.sidebar__section {
  color: var(--sidebar-muted);
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; padding: 14px 12px 6px;
}
.sidebar__nav { display: flex; flex-direction: column; gap: 3px; }
.sidebar__link {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  color: var(--sidebar-muted); text-decoration: none;
  padding: 9px 12px; border-radius: 10px; font-weight: 500; font-size: .9rem;
  transition: background var(--t-fast), color var(--t-fast);
}
.sidebar__link:hover { background: rgba(255,255,255,.06); color: #fff; text-decoration: none; }
.sidebar__link.active {
  background: linear-gradient(135deg, rgba(99,102,241,.95), rgba(124,108,255,.9));
  color: #fff; box-shadow: 0 6px 16px rgba(79,70,229,.35);
}
.sidebar__link.active::before {
  content: ""; position: absolute; left: -14px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: #fff;
}
.sidebar__link svg { width: 18px; height: 18px; flex: 0 0 18px; opacity: .95; }

.sidebar__foot { margin-top: auto; padding: 12px 8px 4px; border-top: 1px solid var(--sidebar-line); }
.sidebar__user {
  display: flex; align-items: center; gap: 10px;
  color: var(--sidebar-muted); font-size: .78rem; margin-bottom: 10px; padding: 4px;
}
.sidebar__user .ava {
  width: 32px; height: 32px; border-radius: 50%; flex: 0 0 32px;
  background: linear-gradient(135deg, #6d6df5, #8b7cff);
  color: #fff; font-weight: 700; font-size: .8rem;
  display: inline-flex; align-items: center; justify-content: center;
}
.sidebar__user .meta { min-width: 0; }
.sidebar__user .meta span { display: block; color: var(--sidebar-muted); font-size: .72rem; }
.sidebar__user strong { color: #fff; display: block; font-size: .82rem; font-weight: 600; word-break: break-all; }
.sidebar .btn-outline-light {
  --bs-btn-color:#cfd4de; --bs-btn-border-color:rgba(255,255,255,.16);
  --bs-btn-hover-bg:rgba(255,255,255,.08); --bs-btn-hover-border-color:rgba(255,255,255,.22); --bs-btn-hover-color:#fff;
  border-radius: 9px; font-weight: 550; font-size: .82rem;
}

/* ---- Body / topbar ----------------------------------------------------- */
.app-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--border);
  padding: 0 30px;
  min-height: var(--topbar-h);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  position: sticky; top: 0; z-index: 20;
}
.topbar h1 { font-size: 1.22rem; font-weight: 680; letter-spacing: -.02em; margin: 0; }
.topbar .subtitle { color: var(--muted); font-size: .82rem; margin-top: 1px; }
.app-content { padding: 26px 30px 72px; max-width: none; width: 100%; }

.section-title { font-size: 1.02rem; font-weight: 670; letter-spacing: -.01em; margin: 0 0 4px; }
.muted { color: var(--muted); }
.hint  { color: var(--muted); font-size: .82rem; }

/* ==========================================================================
   Stat tiles
   ========================================================================== */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px; margin-bottom: 24px;
}
.stat {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 18px 16px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t), transform var(--t), border-color var(--t);
  overflow: hidden;
}
.stat:hover { box-shadow: var(--shadow); transform: translateY(-2px); border-color: #dcdfe6; }
.stat .stat__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.stat .label { color: var(--muted); font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.stat .value { font-size: 1.85rem; font-weight: 750; letter-spacing: -.02em; line-height: 1.05; }
.stat .sub { color: var(--muted); font-size: .78rem; margin-top: 4px; }
.stat__icon {
  width: 38px; height: 38px; border-radius: 11px; flex: 0 0 38px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-050); color: var(--accent-600);
}
.stat__icon svg { width: 19px; height: 19px; }
.stat__icon.is-green { background: var(--green-bg); color: var(--green); }
.stat__icon.is-amber { background: var(--amber-bg); color: var(--amber); }
.stat__icon.is-red   { background: var(--red-bg);   color: var(--red); }
.stat__icon.is-gray  { background: var(--gray-bg);  color: var(--gray); }
.stat__icon.is-blue  { background: var(--blue-bg);  color: var(--blue); }
.trend { display: inline-flex; align-items: center; gap: 3px; font-size: .74rem; font-weight: 600; }
.trend.up { color: var(--green); } .trend.down { color: var(--red); } .trend.flat { color: var(--muted); }

/* ==========================================================================
   Cards
   ========================================================================== */
.card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  background: var(--surface);
}
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--border-soft);
  font-weight: 640; font-size: .95rem;
  padding: 15px 18px;
  display: flex; align-items: center; gap: 9px;
}
.card-header .hicon { color: var(--muted); display: inline-flex; }
.card-header .hicon svg { width: 17px; height: 17px; }
.card-body { padding: 18px; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  border-radius: var(--radius-sm); font-weight: 560; font-size: .9rem;
  padding: .5rem .9rem; letter-spacing: -.005em;
  transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast), color var(--t-fast);
}
.btn:active { transform: translateY(.5px); }
.btn-sm { padding: .34rem .68rem; font-size: .82rem; border-radius: 8px; }
.btn-primary {
  background: var(--accent-600); border-color: var(--accent-600);
  box-shadow: 0 1px 2px rgba(79,70,229,.25), 0 4px 12px rgba(79,70,229,.22);
}
.btn-primary:hover { background: var(--accent-700); border-color: var(--accent-700); box-shadow: 0 2px 6px rgba(67,56,202,.3), 0 8px 20px rgba(67,56,202,.28); }
.btn-primary:focus-visible { box-shadow: var(--ring); }
.btn-outline-secondary { color: var(--text-2); border-color: var(--border); background: var(--surface); }
.btn-outline-secondary:hover { background: var(--bg-soft); color: var(--text); border-color: #d7dae1; }
.btn-outline-danger { color: var(--red); border-color: var(--red-bd); }
.btn-outline-danger:hover { background: var(--red-bg); color: var(--red); border-color: var(--red); }

/* ==========================================================================
   Forms
   ========================================================================== */
.form-label { font-weight: 570; font-size: .84rem; margin-bottom: 6px; color: var(--text-2); }
.form-label.req::after { content: "*"; color: var(--red); margin-left: 3px; font-weight: 700; }
.form-control, .form-select {
  border-radius: var(--radius-sm); border-color: var(--border);
  font-size: .9rem; padding: .5rem .7rem; color: var(--text);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  background-color: var(--surface);
}
.form-control::placeholder { color: var(--muted-2); }
.form-control:hover, .form-select:hover { border-color: #d5d8e0; }
.form-control:focus, .form-select:focus {
  border-color: var(--accent); box-shadow: var(--ring); background-color: var(--surface);
}
.form-control:disabled, .form-select:disabled { background: var(--bg-soft); }
.form-text { font-size: .77rem; color: var(--muted); }
.form-check-input { border-color: #cfd3dc; }
.form-check-input:checked { background-color: var(--accent-600); border-color: var(--accent-600); }
.form-check-input:focus { box-shadow: var(--ring); border-color: var(--accent); }
.was-validated .form-control:invalid, .form-control.is-invalid { border-color: var(--red); }
.invalid-feedback { color: var(--red); font-size: .78rem; }

/* Filter/toolbar row */
.toolbar-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); padding: 14px 16px; margin-bottom: 18px; }

/* Search box (icon + input + clear) */
.search-box { position: relative; max-width: 460px; }
.search-box > svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; color: var(--muted); pointer-events: none;
}
.search-box .form-control { padding-left: 38px; padding-right: 36px; }
.search-box input[type="search"]::-webkit-search-decoration,
.search-box input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.search-clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; border: 0; border-radius: 6px; background: transparent;
  color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; transition: background var(--t-fast), color var(--t-fast);
}
.search-clear:hover { background: var(--bg-soft); color: var(--text); }

/* ==========================================================================
   Tables
   ========================================================================== */
.table-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background: var(--surface);
}
.table { --bs-table-bg: transparent; margin: 0; font-size: .88rem; }
.table thead th {
  background: var(--surface-2);
  font-size: .7rem; text-transform: uppercase; letter-spacing: .045em;
  color: var(--muted); font-weight: 680;
  border-bottom: 1px solid var(--border);
  white-space: nowrap; padding: 11px 14px;
}
.table tbody td { vertical-align: middle; border-color: var(--border-soft); padding: 11px 14px; color: var(--text-2); }
.table tbody tr { transition: background var(--t-fast); }
.table.table-hover tbody tr:hover { background: var(--accent-050); }
.table tbody tr:last-child td { border-bottom: 0; }
.table td .fw-strong { color: var(--text); font-weight: 600; }
.lead-row { cursor: pointer; }
.text-nowrap { white-space: nowrap; }

/* Sticky first column helper (opt-in) */
.table.sticky-1st thead th:first-child,
.table.sticky-1st tbody td:first-child { position: sticky; left: 0; background: var(--surface); z-index: 1; }
.table.sticky-1st thead th:first-child { background: var(--surface-2); z-index: 2; }

/* Avatars in rows */
.avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: 0 0 32px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .76rem; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #6366f1, #8b7cff);
  text-transform: uppercase; letter-spacing: .01em;
}
.avatar.a1{background:linear-gradient(135deg,#6366f1,#8b7cff)}
.avatar.a2{background:linear-gradient(135deg,#0ea5e9,#38bdf8)}
.avatar.a3{background:linear-gradient(135deg,#10b981,#34d399)}
.avatar.a4{background:linear-gradient(135deg,#f59e0b,#fbbf24)}
.avatar.a5{background:linear-gradient(135deg,#ec4899,#f472b6)}
.avatar.a6{background:linear-gradient(135deg,#8b5cf6,#a78bfa)}
.cell-id { display: flex; align-items: center; gap: 10px; }
.cell-id .who { min-width: 0; }
.cell-id .who .nm { font-weight: 600; color: var(--text); line-height: 1.2; }
.cell-id .who .sub { color: var(--muted); font-size: .78rem; line-height: 1.2; }

/* ==========================================================================
   Badges / pills / chips
   ========================================================================== */
.badge { font-weight: 620; border-radius: 7px; padding: .36em .6em; font-size: .74rem; letter-spacing: .01em; }

/* Status pill: colored dot + label */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 8px; border-radius: var(--radius-pill);
  font-size: .76rem; font-weight: 620; line-height: 1;
  border: 1px solid transparent; white-space: nowrap;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9; }
.pill.is-green { color: var(--green); background: var(--green-bg); border-color: var(--green-bd); }
.pill.is-amber { color: var(--amber); background: var(--amber-bg); border-color: var(--amber-bd); }
.pill.is-red   { color: var(--red);   background: var(--red-bg);   border-color: var(--red-bd); }
.pill.is-gray  { color: var(--gray);  background: var(--gray-bg);  border-color: var(--gray-bd); }
.pill.is-blue  { color: var(--blue);  background: var(--blue-bg);  border-color: var(--blue-bd); }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--accent-050); color: var(--accent-700);
  border: 1px solid var(--accent-100);
  border-radius: var(--radius-pill); padding: 2.5px 10px; font-size: .76rem; font-weight: 620;
}
.chip.chip-gray { background: var(--gray-bg); color: var(--text-2); border-color: var(--gray-bd); }

.dot-status { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 7px; }
.dot-status.on  { background: var(--green); box-shadow: 0 0 0 3px var(--green-bg); }
.dot-status.off { background: var(--muted-2); box-shadow: 0 0 0 3px var(--gray-bg); }

/* ==========================================================================
   Modals
   ========================================================================== */
.modal-content { border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.modal-header { border-bottom: 1px solid var(--border-soft); padding: 18px 22px; }
.modal-title { font-weight: 680; letter-spacing: -.01em; font-size: 1.05rem; }
.modal-body { padding: 20px 22px; }
.modal-footer { border-top: 1px solid var(--border-soft); padding: 14px 22px; }
.modal-backdrop.show { opacity: .38; }
.modal.fade .modal-dialog { transition: transform .26s cubic-bezier(.4,0,.2,1), opacity .26s; transform: translateY(12px) scale(.99); }
.modal.show .modal-dialog { transform: none; }

/* ==========================================================================
   Alerts
   ========================================================================== */
.alert { border-radius: var(--radius); border: 1px solid transparent; padding: 12px 16px; font-size: .9rem; box-shadow: var(--shadow-xs); }
.alert-success { background: var(--green-bg); border-color: var(--green-bd); color: #0b7a3b; }
.alert-danger  { background: var(--red-bg);  border-color: var(--red-bd);  color: #b0212f; }

/* ==========================================================================
   Empty states
   ========================================================================== */
.empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 54px 24px; color: var(--muted);
}
.empty__art {
  width: 76px; height: 76px; border-radius: 20px; margin-bottom: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 120% at 30% 20%, var(--accent-050), var(--bg-soft));
  border: 1px solid var(--border); color: var(--accent-600);
  box-shadow: var(--shadow-sm);
}
.empty__art svg { width: 34px; height: 34px; }
.empty h3 { font-size: 1.02rem; font-weight: 660; color: var(--text); margin: 0 0 6px; }
.empty p { max-width: 420px; margin: 0 0 4px; font-size: .88rem; }

/* ==========================================================================
   Custom-field editor  (Clients page)
   ========================================================================== */
.cf-editor, .forms-editor { background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 14px; }
.cf-row { display: grid; grid-template-columns: 1fr 150px 130px 40px; gap: 8px; margin-bottom: 8px; align-items: center; }
.cf-row .btn-remove, .form-card-head .btn-remove {
  border: 1px solid var(--border); background: var(--surface); color: var(--red);
  border-radius: 8px; width: 38px; height: 38px; line-height: 1; font-size: 18px;
  display: inline-flex; align-items: center; justify-content: center; transition: background var(--t-fast), border-color var(--t-fast);
}
.cf-row .btn-remove:hover, .form-card-head .btn-remove:hover { background: var(--red-bg); border-color: var(--red-bd); }
.cf-empty, .forms-editor .forms-empty { color: var(--muted); font-size: .84rem; margin-bottom: 8px; }
.cf-keyhint { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .72rem; color: var(--muted); }
.form-card { border: 1px solid var(--border); border-radius: 10px; padding: 12px; margin-bottom: 12px; background: var(--surface); box-shadow: var(--shadow-xs); }
.form-card-head { display: grid; grid-template-columns: 1fr 200px 40px; gap: 8px; align-items: center; margin-bottom: 10px; }
.body-block { margin-bottom: 14px; }
.masked-secret { font-family: monospace; letter-spacing: 1px; }

/* JSON viewer */
.json-view {
  background: #0e1220; color: #dfe3ee;
  border-radius: 12px; padding: 15px 16px; margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .82rem; line-height: 1.55; white-space: pre-wrap; word-break: break-word;
  max-height: 60vh; overflow: auto;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}

/* ==========================================================================
   Auth (login) & standalone pages
   ========================================================================== */
.auth-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(99,102,241,.12), transparent 70%),
    radial-gradient(40% 40% at 90% 100%, rgba(14,165,233,.10), transparent 70%),
    var(--bg);
}
.auth-card { width: 100%; max-width: 400px; }
.auth-brand { display: flex; align-items: center; justify-content: center; gap: 11px; font-weight: 700; font-size: 1.2rem; margin-bottom: 20px; letter-spacing: -.01em; }
.auth-brand .dot { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, #6d6df5, #8b7cff); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; box-shadow: 0 6px 16px rgba(99,102,241,.4); }
.auth-card .card { box-shadow: var(--shadow-md); border-radius: var(--radius-lg); }

/* ==========================================================================
   DataTables integration
   ========================================================================== */
.dataTables_wrapper { padding-top: 2px; }
.dataTables_wrapper .row:first-child { padding: 12px 14px 4px; }
.dataTables_wrapper .dataTables_filter { text-align: right; }
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label { font-size: .82rem; color: var(--muted); font-weight: 500; }
.dataTables_wrapper .dataTables_filter input {
  border-radius: 8px; border: 1px solid var(--border); padding: .38rem .7rem .38rem 2rem;
  min-width: 220px; margin-left: 8px; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23737b8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat 9px center;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.dataTables_wrapper .dataTables_filter input:focus { border-color: var(--accent); box-shadow: var(--ring); outline: none; }
.dataTables_wrapper .dataTables_length select { border-radius: 8px; border: 1px solid var(--border); padding: .3rem 1.6rem .3rem .6rem; }
.dataTables_wrapper .dataTables_info { font-size: .8rem; color: var(--muted); padding: 8px 14px 12px; }
.dataTables_wrapper .dataTables_paginate { padding: 6px 14px 12px; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: 8px !important; border: 1px solid transparent !important; padding: .3rem .65rem !important;
  color: var(--text-2) !important; font-size: .82rem; margin: 0 1px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--bg-soft) !important; border-color: var(--border) !important; color: var(--text) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--accent-600) !important; border-color: var(--accent-600) !important; color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled { opacity: .45; }
table.dataTable thead th.sorting:after, table.dataTable thead th.sorting_asc:after, table.dataTable thead th.sorting_desc:after { opacity: .5; }

/* FixedHeader floating clone */
table.dataTable.fixedHeader-floating { box-shadow: var(--shadow-md); }
.fixedHeader-floating thead th, table.fixedHeader-floating thead th { background: var(--surface); }
.dtfh-floatingparent { box-shadow: 0 6px 14px rgba(16,24,40,.08); z-index: 15 !important; }

/* Legacy DataTables row-warning highlight for leads with errors */
.table-warning, .table-warning > td { background: var(--amber-bg) !important; }

/* ==========================================================================
   Responsive / mobile
   ========================================================================== */
@media (max-width: 860px) {
  .app { flex-direction: column; }
  .sidebar {
    width: 100%; flex-basis: auto; height: auto; position: sticky; top: 0; z-index: 30;
    flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 14px;
  }
  .sidebar__brand { padding: 4px 8px; }
  .sidebar__section { display: none; }
  .sidebar__nav { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .sidebar__link { padding: 7px 11px; font-size: .84rem; }
  .sidebar__link.active::before { display: none; }
  .sidebar__foot { margin: 0 0 0 auto; padding: 4px; border: 0; }
  .sidebar__user { display: none; }
  .topbar { padding: 0 18px; }
  .app-content { padding: 20px 16px 64px; }
  .cf-row { grid-template-columns: 1fr 1fr 40px; }
  .cf-row [name="cfName"], .cf-row .cf-name { grid-column: 1 / -1; }
  .form-card-head { grid-template-columns: 1fr 1fr 40px; }
  .dataTables_wrapper .dataTables_filter input { min-width: 150px; }
}

@media (max-width: 575.98px) {
  .stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .stat .value { font-size: 1.5rem; }
  .cf-row .cf-name { grid-column: 1 / -1; }
  .form-card-head { grid-template-columns: 1fr 1fr 40px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}