/* ============================================================================
   SAMBOX Admin — Gentelella v4 compatibility layer
   ----------------------------------------------------------------------------
   Loaded AFTER /shared/gentelella-v4.css (the real Gentelella v4 design system)
   and after the MIAN bridge (admin-mian.css). Its only job: keep the existing
   page content (legacy gx-/x_/mn- classes) looking correct now that the real
   Gentelella CSS owns the shell and its global resets. No markup, IDs, field
   names or JS hooks are touched here — presentation only.
   ============================================================================ */

/* ---- 1. Legacy grid: our pages use flex .row + .col-md-*; Gentelella's .row
         is a grid. Re-assert the flex layout so page content keeps its shape. - */
.row { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.row:last-child { margin-bottom: 0; }
.col-md-3 { flex: 1 1 200px; min-width: 0; }
.col-md-4 { flex: 1 1 260px; min-width: 0; }
.col-md-6 { flex: 1 1 340px; min-width: 0; }
.col-md-8 { flex: 2 1 480px; min-width: 0; }
.col-md-12 { flex: 1 1 100%; }

/* ---- 2. Content panels / cards ------------------------------------------- */
.x_panel {
  background: var(--bg-card, #1e2229);
  border: 1px solid var(--border, #2a2f38);
  border-radius: var(--r-lg, 12px);
  padding: 24px;
  margin: 0 0 24px;
}
.x_title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border, #2a2f38);
  padding-bottom: 8px;
  margin-bottom: 10px;
}
.x_title h1 { font-size: 1.5rem; font-weight: 600; margin: 0; }
.x_title h2 { font-size: 1.0625rem; font-weight: 600; margin: 0; }
.x_content { padding: 0; }
.x_panel-content { padding: 0; }
.cx-panel {
  background: var(--bg-card, #1e2229);
  border: 1px solid var(--border, #2a2f38);
  border-radius: var(--r-lg, 12px);
  padding: 24px;
  margin: 0 0 24px;
}

/* ---- 3. Stat tiles -------------------------------------------------------- */
.gx-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 0 0 24px;
}
.gx-tile {
  background: var(--bg-card, #1e2229);
  border: 1px solid var(--border, #2a2f38);
  border-radius: var(--r-lg, 12px);
  padding: 24px;
}
.gx-tile .k { color: var(--text-muted, #9aa7b4); font-size: 13px; }
.gx-tile .v { font-size: 26px; font-weight: 800; }

/* ---- 4. Tables ------------------------------------------------------------ */
table.gx-table { border-collapse: collapse; width: 100%; }
.gx-table td, .gx-table th {
  border: 1px solid var(--border, #2a2f38);
  padding: 12px 16px;
  font-size: 13px;
  text-align: left;
}
.gx-table th { color: var(--text-muted, #9aa7b4); font-weight: 600; }
.gx-table tr:hover td { background: var(--mn-secondary, var(--bg-secondary, #1a1d24)); }
table.table { background: var(--bg-card, #1e2229); }
.table td, .table th { border-color: var(--border, #2a2f38); }
.table th { background: var(--bg-secondary, #1a1d24); color: var(--text-muted, #9aa7b4); font-weight: 600; }

/* ---- 5. Reseller credit cards --------------------------------------------- */
.gx-credit-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 0 0 24px;
}
.gx-credit {
  background: var(--bg-card, #1e2229);
  border: 1px solid var(--border, #2a2f38);
  border-radius: var(--r-lg, 12px);
  padding: 24px;
}
.gx-credit .app { font-weight: 800; }
.gx-credit .n { font-size: 30px; font-weight: 800; color: var(--accent, #1abb9c); }

/* ---- 6. Charts ------------------------------------------------------------ */
.gx-chart { height: 280px; }

/* ---- 7. Forms ------------------------------------------------------------- */
.gx-input {
  background: var(--bg-card, #1e2229);
  color: var(--text-primary, #e6e8ec);
  border: 1px solid var(--border, #2a2f38);
  padding: 8px 10px;
  border-radius: var(--r-sm, 6px);
  min-height: 40px;
  box-sizing: border-box;
}
/* mn-btn-carrying buttons are governed by mian.css role styles (solid
   primary / outline / danger); keep this for plain legacy .gx-btn only.
   :where() keeps the specificity at (0,1,0) so nothing else shifts. */
.gx-btn:not(:where(.mn-btn)) {
  background: var(--mn-primary, var(--accent, #1abb9c));
  color: var(--mn-primary-fg, #06281f);
  border: 0;
  border-radius: var(--r-sm, 6px);
  padding: 0 16px;
  min-height: 40px;
  font-weight: 700;
  cursor: pointer;
  font: inherit;
}
label { display: block; font-size: 13px; color: var(--text-muted, #9aa7b4); margin: 16px 0 6px; }
input, select, textarea {
  background: var(--bg-card, #1e2229);
  color: var(--text-primary, #e6e8ec);
  border: 1px solid var(--border, #2a2f38);
  padding: 8px 10px;
  border-radius: var(--r-sm, 6px);
  min-height: 40px;
  box-sizing: border-box;
  font: inherit;
}
/* Bare unclassed buttons only: classed buttons (.mn-btn, .btn, .gx-btn)
   must keep their own role styles — this rule used to stomp every mian
   variant (danger red, outline) with the flat accent fill. :where() keeps
   specificity at (0,0,1) so .tb-btn/.modal-close and friends still win. */
button:not(:where(.mn-btn, .btn, .gx-btn)) {
  background: var(--mn-primary, var(--accent, #1abb9c));
  color: var(--mn-primary-fg, #06281f);
  border: 0;
  border-radius: var(--r-sm, 6px);
  padding: 0 18px;
  min-height: 40px;
  font-weight: 700;
  cursor: pointer;
  font: inherit;
}

/* ---- 8. Page headers / empty states / form rows --------------------------- */
.page-head { margin: 4px 0 32px; }
.page-head h1 { font-size: 26px; margin: 0 0 4px; }
.page-head p { color: var(--text-muted, #9aa7b4); margin: 0; }
.empty {
  color: var(--text-muted, #9aa7b4);
  border: 1px dashed var(--border, #2a2f38);
  border-radius: var(--r-md, 10px);
  padding: 18px;
  text-align: center;
}
.form-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; margin-bottom: 16px; }
.form-row > div { flex: 1 1 200px; }

/* ---- 9. Legacy buttons (Gentelella owns .btn; add our extra variants) ----- */
.btn {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: var(--r-sm, 6px);
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  font-size: 14px;
}
.btn-primary { background: var(--mn-primary, var(--accent, #1abb9c)); color: var(--mn-primary-fg, #06281f); }
.btn-secondary { background: var(--bg-secondary, #1a1d24); color: var(--text-primary, #e6e8ec); border-color: var(--border, #2a2f38); }
.btn-danger { background: var(--danger, #e74c3c); color: #fff; }
.btn-sm { min-height: 32px; padding: 0 10px; font-size: 13px; }

/* ---- 10. Toast — legacy pages toggle style.display, not Gentelella's .show - */
.toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--accent, #1abb9c);
  color: #06281f;
  font-weight: 700;
  border-radius: 8px;
  padding: 12px 18px;
  display: none;
  z-index: 70;
  opacity: 1;
  transform: none;
  max-width: 92vw;
}
.toast.error { background: var(--danger, #e74c3c); color: #fff; }

/* ---- 11. Status pills ----------------------------------------------------- */
.status { font-weight: 700; text-transform: capitalize; }
.status.trial { color: var(--warning, #f39c12); }
.status.active { color: var(--success, #1abb9c); }
.status.expired { color: var(--danger, #e74c3c); }
.status.blocked { color: var(--text-muted, #9aa7b4); }

/* ---- 12. Skip link / code / focus ----------------------------------------- */
.gx-skip { position: absolute; left: -9999px; }
.gx-skip:focus {
  left: 12px;
  top: 12px;
  z-index: 99;
  background: var(--bg-card, #1e2229);
  color: var(--text-primary, #e6e8ec);
  padding: 8px 12px;
  border-radius: 6px;
}
code {
  background: var(--bg-secondary, #1a1d24);
  color: var(--text-primary, #e6e8ec);
  padding: 2px 6px;
  border-radius: 4px;
}
/* Content links keep the admin palette (Gentelella's own a/nav/breadcrumb rules
   are more specific and win where they apply). */
a { color: var(--admin-link, #9ecbff); }
:focus-visible { outline: 2px solid var(--focus-ring, #9ecbff); outline-offset: 2px; }

/* ---- 13. Keep the content column readable inside the Gentelella .page-wrapper */
.gx-main { max-width: 1400px; }

/* ---- 14. Gentelella shell icons ------------------------------------------
   The topbar/sidebar-toggle SVGs are flex children of their buttons; without an
   explicit flex basis their width collapses to 0 and the icons vanish. Pin them. */
.tb-btn svg,
.sidebar-toggle svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}