/* CybeXplorer Modern Dashboard (extract from demo) */
/* ------------------------------------------------------------------
   Tokens
------------------------------------------------------------------- */
:root {
  --brand-700: #065f46;
  --brand-600: #047857;
  --brand-500: #10b981;
  --brand-400: #34d399;
  --brand-50:  #ecfdf5;

  --bg:        #f6f7f9;
  --surface:   #ffffff;
  --line:      #e9edf3;
  --text:      #0f172a;
  --muted:     #667085;
  --muted-200: #e6eaf1;

  --radius-lg: 16px;
  --radius-sm: 12px;
  --shadow-1:  0 1px 2px rgba(16, 24, 40, .06), 0 8px 24px rgba(16, 24, 40, .06);

  --gap:       16px;
  --pill:      999px;

  --h1: clamp(22px, 2.2vw, 34px);
  --h2: clamp(18px, 1.6vw, 22px);
  --fs: 15px;

  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:       #0b0f14;
    --surface:  #0f151c;
    --line:     #18202a;
    --text:     #e8eef6;
    --muted:    #9aa5b1;
    --muted-200:#1d2733;
    --shadow-1: 0 1px 2px rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.4);
  }
}

/* ------------------------------------------------------------------
   Base
------------------------------------------------------------------- */
* { box-sizing: border-box; }
body { background: var(--bg); color: var(--text); font: var(--fs)/1.5 var(--font-sans); }
a   { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ------------------------------------------------------------------
   Layout primitives
------------------------------------------------------------------- */
.content { padding: clamp(14px, 2.2vw, 24px); }
.grid    { display: grid; gap: var(--gap); grid-template-columns: repeat(12, minmax(0, 1fr)); }
.row     { display: flex; gap: 10px; align-items: center; }
.right   { margin-left: auto; }
.scroll-x { overflow-x: auto; }

/* ------------------------------------------------------------------
   Card
------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  border: 1px solid var(--line);
  padding: 18px;
}
.card-title {
  font-size: var(--h3);
  font-weight: 600;
  margin: 0 0 8px;
}

/* ------------------------------------------------------------------
   Buttons / Badges
------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--pill);
  background: var(--surface);
  border: 1px solid var(--line);
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, box-shadow .2s, transform .06s;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-1); }
.btn.primary {
  border: none;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-600), var(--brand-500));
  box-shadow: 0 8px 22px rgba(16,185,129,.25);
}
.btn.icon { padding: 8px; border-radius: 12px; }
.badge {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: var(--pill);
  border: 1px solid var(--line);
  color: var(--muted);
  background: #fff;
}

/* ------------------------------------------------------------------
   KPIs
------------------------------------------------------------------- */
.kpis .card { display: grid; gap: 6px; align-content: start; }
.kpi-label  { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.kpi-value  { font-size: clamp(24px, 3.5vw, 34px); font-weight: 800; line-height: 1.05; }
.kpi-delta  { font-size: 12px; color: #059669; }
.kpi-accent { color: #ecfdf5; background: radial-gradient(140% 140% at 0% 0%, #0d3f30, var(--brand-700)); border: 0; }
.kpi-accent .kpi-label { color: #b7f7d9; }

/* ------------------------------------------------------------------
   Latest Users list
------------------------------------------------------------------- */
.users { display: grid; gap: 8px; }
.user {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 12px; align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
}
.avatar {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700;
  background: #e5e7eb; color: #334155;
}
.email { color: var(--muted); font-size: 13px; }

/* ------------------------------------------------------------------
   Tables
------------------------------------------------------------------- */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 5px 6px; border-bottom: 1px solid var(--line); text-align: left; }
.table th { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.logo-cell img { width: 100px; height: 72px; object-fit: contain; filter: saturate(0.95) contrast(1.05); }

/* ------------------------------------------------------------------
   Grid placements
------------------------------------------------------------------- */
.layout-kpis .card { grid-column: span 3; }
.layout-users       { grid-column: span 6; }
.layout-donut       { grid-column: span 6; }
.layout-startups    { grid-column: span 6; }
.layout-vendors     { grid-column: span 6; }
.layout-reseller    { grid-column: span 12; }

@media (max-width:1200px){
  .layout-kpis .card,
  .layout-users,
  .layout-donut,
  .layout-startups,
  .layout-vendors,
  .layout-reseller { grid-column: span 12; }
}

/* ------------------------------------------------------------------
   DataTables / Search (optional cosmetic tweaks)
------------------------------------------------------------------- */
.dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--line);
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
}
.dataTables_wrapper .dataTables_filter label { color: var(--muted); }

/* ------------------------------------------------------------------
   Helpers
------------------------------------------------------------------- */
.divider { height: 1px; background: var(--line); margin: 10px 0; }
.muted   { color: var(--muted); }
:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; border-radius: 10px; }

/* ================================
   FORCE GAPS (overrides + fallback)
   Put this at the END of cx-dashboard.css
   ================================ */

/* 1) Force the grid to use our gaps */
.content .grid{
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;

  /* Adjust this number to taste (both directions) */
  --gap: 16px;
  gap: var(--gap) !important;
  column-gap: var(--gap) !important;
  row-gap: calc(var(--gap) * 1.25) !important; /* a bit more vertical space */
}

/* 2) Kill margins many themes add to children */
.content .grid > *{ margin: 0 !important; }

/* 3) Extra space between stacked grid sections */
.content > .grid + .grid{ margin-top: calc(var(--gap) * 0.25) !important; }

/* 4) Fallback gutter (in case some builder nukes the gap property)
      This creates visual gutters using negative margins + inner padding. */
.content .grid{
  /* half the gap as “gutter” padding */
  --gx: calc(var(--gap) * 0.5);
  margin-left: calc(var(--gx) * -1) !important;
  margin-right: calc(var(--gx) * -1) !important;
}
.content .grid > *{
  padding-left: var(--gx) !important;
  padding-right: var(--gx) !important;
  /* vertical gutter */
  margin-bottom: var(--gap) !important;
}

@media (max-width: 768px){
  .content .grid{
    --gap: 16px;
    row-gap: 20px !important;
  }
}

/* ===== Fallback gutters + card padding (place at end) ===== */

/* tuning knobs */
:root{
  --gap: 28px;                 /* overall gutter size */
  --card-pad: 18px;            /* padding INSIDE each card */
}

/* compute half-gutter for the fallback technique */
.content .grid{
  --gx: calc(var(--gap) * 0.5);
  margin-left:  calc(var(--gx) * -1) !important;
  margin-right: calc(var(--gx) * -1) !important;
}

/* keep your card’s own padding for top/bottom */
.card{ padding: var(--card-pad); }

/* non-card children (rare) just get the gutter paddings */
.content .grid > :not(.card){
  padding-left:  var(--gx) !important;
  padding-right: var(--gx) !important;
  margin-bottom: var(--gap) !important;
}

/* cards: gutter + extra internal padding */
.content .grid > .card{
  padding-left:  calc(var(--gx) + var(--card-pad)) !important;
  padding-right: calc(var(--gx) + var(--card-pad)) !important;
  margin-bottom: var(--gap) !important;
}

/* Compact rows — Startups & Vendors only */
.layout-startups .table th,
.layout-startups .table td,
.layout-vendors .table th,
.layout-vendors .table td{
  padding-top: 6px !important;     /* was ~11px */
  padding-bottom: 6px !important;
  line-height: 1.25;                /* tighter text line-height */
  vertical-align: middle;           /* keeps text vertically centered */
}

/* Shrink logos (usually the main height driver) */
.layout-startups .logo-cell img,
.layout-vendors  .logo-cell img{
  height: 43px !important;          /* was 72px; try 32–44px to taste */
  width: auto;
}

/* Optional: slightly smaller header cells */
.layout-startups .table thead th,
.layout-vendors  .table thead th{
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}
/* compact, responsive live map card */
.threatmap-embed{
  position: relative;
  width: 100%;
  height: 220px;           /* adjust to 180–280px to taste */
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
}
@media (min-width: 1100px){
  .threatmap-embed{ height: 260px; }
}

/* News list (compact, two-line items) */
.news-list{
  display:grid;
  gap:10px;
  max-height: 320px;             /* keep it compact; add or remove to taste */
  overflow:auto;
  padding-top: 6px;
}
.news-item{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface);
  transition:transform .06s, box-shadow .2s, border-color .2s;
}
.news-item:hover{
  transform: translateY(-1px);
  border-color: var(--muted-200);
  box-shadow: var(--shadow-1);
}
.news-title{ font-weight:600; line-height:1.35; }
.news-meta{ font-size:12px; color:var(--muted); }

/* Grid wrapper used by shortcodes */
.cx-grid{
  display:grid;
  gap: var(--gap);
  grid-template-columns: repeat(12, minmax(0,1fr));
  margin: 0 !important;                 /* neutralize theme margins */
}
.cx-grid > .card{ grid-column: span 12; margin: 0 !important; }

/* Kill paragraph auto-margins around shortcodes (Gutenberg often wraps) */
.entry-content p:has(> .cx-grid),
.entry-content p:has(> .card){ margin: 0 !important; }

/* DataTables wrapper sometimes adds space */
.dataTables_wrapper{ margin: 0 !important; }


.cx-grid{
  display:grid;
  gap: var(--gap);
  grid-template-columns: repeat(12, minmax(0,1fr));
  margin: 0 !important;
}
.cx-grid > .card{ grid-column: span 12; margin: 30 !important; }

/* Prevent Gutenberg <p> from adding margins around shortcodes */
.entry-content p:has(> .cx-grid),
.entry-content p:has(> .card){ margin: 0 !important; }