/* ═══════════════════════════════════════════════════════════════════════════
   Data Navigator — Design System v2
   ───────────────────────────────────────────────────────────────────────────
   Loaded LAST on every page (front + admin), after dn-polish.css and every
   other stylesheet. dn-polish.css has 8000+ lines with many internally
   conflicting !important rules built up across many past hotfixes — rather
   than risk surgically editing that file again, this file is the new single
   source of truth for the core visual language: colors, spacing, and the
   handful of components (headings, cards, buttons, tables, badges, forms)
   that appear on nearly every page. Because it loads last with matching
   specificity + !important, its values consistently win regardless of what
   order the old rules happen to sit in.

   Going forward, visual changes to these core pieces should be made HERE,
   not in dn-polish.css, so the app doesn't drift back into conflicting
   layers again.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* Brand */
  --dn2-brand:        #159001;
  --dn2-brand-dark:   #0e6b01;
  --dn2-brand-darker: #0a2e06;
  --dn2-brand-light:  #1ecc00;
  --dn2-brand-tint:   #eaf7e6;   /* pale green background tint */
  --dn2-brand-tint-2: #f4faf2;

  /* Neutrals */
  --dn2-ink-1: #16241a;   /* headings */
  --dn2-ink-2: #4a5648;   /* body text */
  --dn2-ink-3: #7c877a;   /* muted / labels */
  --dn2-ink-4: #a7b0a5;   /* placeholders */
  --dn2-border: #e3e9e1;
  --dn2-border-soft: #edf2ec;
  --dn2-surface: #ffffff;
  --dn2-surface-muted: #f7f9f6;
  --dn2-bg: #f3f6f1;

  /* Semantic */
  --dn2-danger: #d13c3c;
  --dn2-danger-tint: #fdecec;
  --dn2-warn: #b8860b;
  --dn2-warn-tint: #fbf3e0;

  /* Scale */
  --dn2-radius-sm: 6px;
  --dn2-radius: 10px;
  --dn2-radius-lg: 14px;
  --dn2-shadow-sm: 0 1px 2px rgba(16,36,20,.06);
  --dn2-shadow: 0 4px 16px rgba(16,36,20,.08);
  --dn2-space-1: 4px;
  --dn2-space-2: 8px;
  --dn2-space-3: 12px;
  --dn2-space-4: 16px;
  --dn2-space-5: 20px;
  --dn2-space-6: 24px;
}

/* ── Page heading ─────────────────────────────────────────────────────── */
.content_heading,
body.dn-has-sidebar .content_heading{
  padding: var(--dn2-space-5) var(--dn2-space-6) !important;
  border-bottom: 1px solid var(--dn2-border) !important;
  background: var(--dn2-surface) !important;
}
.content_heading h1, .content_heading h2, .content_heading h3, .content_heading h4{
  color: var(--dn2-ink-1) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

/* ── Cards ────────────────────────────────────────────────────────────── */
.card_block{
  background: var(--dn2-surface) !important;
  border: 1px solid var(--dn2-border) !important;
  border-radius: var(--dn2-radius) !important;
  box-shadow: var(--dn2-shadow-sm) !important;
}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.cstm_btn,
.btn-primary{
  border-radius: var(--dn2-radius-sm) !important;
  font-weight: 500 !important;
  padding: 9px 16px !important;
  transition: transform .12s ease, box-shadow .12s ease !important;
  border: 1px solid transparent !important;
}
.cstm_btn:hover,
.btn-primary:hover{
  transform: translateY(-1px) !important;
  box-shadow: var(--dn2-shadow) !important;
}
a.cstm_btn, button.cstm_btn,
.btn-primary{
  background: var(--dn2-brand) !important;
  color: #fff !important;
}
.cstm_btn.outline, .btn-outline-primary{
  background: transparent !important;
  color: var(--dn2-brand) !important;
  border-color: var(--dn2-brand) !important;
}

/* ── Tables (leads grid, admin tables, DataTables) ───────────────────── */
.home_table, table.dataTable{
  border-collapse: collapse !important;
  font-size: 13px !important;
}
.home_table thead th, table.dataTable thead th{
  background: var(--dn2-surface) !important;
  color: var(--dn2-ink-3) !important;
  font-weight: 600 !important;
  font-size: 11.5px !important;
  text-transform: uppercase !important;
  letter-spacing: .03em !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--dn2-border) !important;
}
.home_table tbody td, table.dataTable tbody td{
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--dn2-border-soft) !important;
  color: var(--dn2-ink-2) !important;
  vertical-align: middle !important;
}
.home_table tbody tr:hover td, table.dataTable tbody tr:hover td{
  background: var(--dn2-surface-muted) !important;
}

/* ── Filter tabs / links ─────────────────────────────────────────────── */
.filter_tabs_header{
  padding: 8px var(--dn2-space-4) !important;
  border-bottom: 1px solid var(--dn2-border) !important;
}
.filter_link{
  padding: 8px var(--dn2-space-4) !important;
  border-radius: var(--dn2-radius-sm) !important;
  color: var(--dn2-ink-3) !important;
  font-weight: 500 !important;
}
.filter_link.active{
  color: var(--dn2-brand-dark) !important;
}

/* ── Badges / pills ───────────────────────────────────────────────────── */
.green_label, .dn-badge{
  background: var(--dn2-brand-tint) !important;
  color: var(--dn2-brand-dark) !important;
  border-radius: 20px !important;
  padding: 3px 10px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

/* ── Forms ────────────────────────────────────────────────────────────── */
input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="number"], textarea, select{
  border: 1px solid var(--dn2-border) !important;
  border-radius: var(--dn2-radius-sm) !important;
  padding: 9px 12px !important;
  color: var(--dn2-ink-1) !important;
  transition: border-color .12s ease, box-shadow .12s ease !important;
}
input:focus, textarea:focus, select:focus{
  border-color: var(--dn2-brand) !important;
  box-shadow: 0 0 0 3px var(--dn2-brand-tint) !important;
  outline: none !important;
}

/* ── Pagination ───────────────────────────────────────────────────────── */
.dataTables_paginate .paginate_button{
  border-radius: var(--dn2-radius-sm) !important;
  padding: 0 10px !important;
  margin: 0 2px !important;
}
.dataTables_paginate .paginate_button.current{
  background: var(--dn2-brand) !important;
  color: #fff !important;
  border-color: var(--dn2-brand) !important;
}

.dn-app-sidebar{
  background: linear-gradient(180deg, #0e6b01 0%, #0a2e06 100%) !important;
  border-right: none !important;
}
.dn-sb-brand-name{ color: #fff !important; }
.dn-sb-brand-tag{ color: rgba(255,255,255,.65) !important; }
.dn-sb-userlabel{ color: rgba(255,255,255,.5) !important; }
.dn-sb-cta{
  background: rgba(255,255,255,.14) !important;
  color: #fff !important;
  border: none !important;
}
.dn-sb-cta.is-active, .dn-sb-cta:hover{
  background: rgba(255,255,255,.22) !important;
  color: #fff !important;
}
.dn-sb-link{ color: rgba(255,255,255,.82) !important; }
.dn-sb-link:hover{
  background: rgba(255,255,255,.10) !important;
  color: #fff !important;
}
.dn-sb-link.is-active{
  background: rgba(255,255,255,.16) !important;
  color: #fff !important;
}
.dn-sb-link.is-active::before{ background: #fff !important; }
.dn-sb-credits{
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.18) !important;
}
.dn-sb-credits-label{ color: rgba(255,255,255,.65) !important; }
.dn-sb-credits-num{ color: #fff !important; }
.dn-sb-account{
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.16) !important;
}
.dn-sb-account:hover{ background: rgba(255,255,255,.14) !important; border-color: rgba(255,255,255,.3) !important; }
.dn-sb-account-label{ color: rgba(255,255,255,.6) !important; }
.dn-sb-account-name{ color: #fff !important; }
.dn-sb-logout{ color: #ffd7d7 !important; }
.dn-app-sidebar::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.25) !important; }

.dashboard .content_wrapper{
  width: auto !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  border-left: none !important;
  padding-left: 0 !important;
}
.dashboard{
  display: flex !important;
  align-items: flex-start !important;
  gap: 24px !important;
}
.container, .container-fluid{
  max-width: 1480px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

.main-sidebar{
  background: linear-gradient(180deg, #0e6b01 0%, #0a2e06 100%) !important;
  border: none !important;
}
.main-sidebar .user_panel{
  border-bottom: 1px solid rgba(255,255,255,.14) !important;
}
.main-sidebar .user_name{ color: #fff !important; }
.main-sidebar .user_email{ color: rgba(255,255,255,.6) !important; }
.main-sidebar .info a{ color: rgba(255,255,255,.75) !important; }
.main-sidebar .nav_link{
  color: rgba(255,255,255,.82) !important;
  border-radius: 8px !important;
}
.main-sidebar .nav_link:hover{
  background: rgba(255,255,255,.10) !important;
  color: #fff !important;
}
.main-sidebar .nav_link.active{
  background: rgba(255,255,255,.16) !important;
  color: #fff !important;
}
.main-sidebar .nav_link img{
  filter: brightness(0) invert(1);
  opacity: .85;
}
.main-sidebar .nav_link:hover img,
.main-sidebar .nav_link.active img{
  opacity: 1;
}

.main-sidebar .nav_list > div[style]{
  color: rgba(255,255,255,.55) !important;
}

.home_blocks .right{
  width: auto !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.home_blocks .left{
  flex: 0 0 260px !important;
  width: 260px !important;
  max-width: 260px !important;
}
@media (max-width: 1024px){
  .home_blocks{ flex-direction: column !important; }
  .home_blocks .left, .home_blocks .right{
    width: 100% !important;
    flex: 1 1 auto !important;
    max-width: none !important;
    border-left: none !important;
    padding-left: 0 !important;
  }
}

.stiky_sidebar{
  background: var(--dn2-surface) !important;
  border: 1px solid var(--dn2-border) !important;
  border-radius: var(--dn2-radius) !important;
}
.input_select_filter{
  padding: 12px 14px !important;
  border-bottom: 1px solid var(--dn2-border-soft) !important;
}
.input_select_filter:last-child{ border-bottom: none !important; }
.input_select_filter > label,
.input_select_filter .sidefilter_title{
  color: var(--dn2-ink-1) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  display: block !important;
  margin-bottom: 6px !important;
}
.input_box.data_serch_filter{
  padding: 12px 14px !important;
  border-bottom: 1px solid var(--dn2-border) !important;
}
.input_box.data_serch_filter .input_text{
  border: 1px solid var(--dn2-border) !important;
  border-radius: var(--dn2-radius-sm) !important;
  height: 38px !important;
}
.select2-container .select2-selection--multiple{
  border: 1px solid var(--dn2-border) !important;
  border-radius: var(--dn2-radius-sm) !important;
  min-height: 38px !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice{
  background: var(--dn2-brand-tint) !important;
  border: none !important;
  color: var(--dn2-brand-dark) !important;
  border-radius: 20px !important;
  padding: 2px 8px !important;
}

/* Fix regression: a previous hotfix tried to hide the redundant "Credit
   Balance / View Plans" header row (already shown in the sidebar) using a
   fragile :has(.actions:only-child) selector that likely doesn't match the
   actual markup. Its inner content correctly hides, but the outer
   .content_heading container stays visible — and now that this design
   system gives .content_heading a background/border everywhere, that empty
   container shows up as a blank box. Force it closed directly instead of
   relying on the fragile selector. */
body.dn-has-sidebar .right .card_block > .content_heading:first-child{
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
}