/* ============================================================
   SAMBOX Super Admin — Mian Ditalini bridge (back-office shared)
   Loaded AFTER https://mian.ro/dist/mian.css on every page in
   panels/admin/ AND panels/reseller/ (reseller additionally loads
   reseller-mian.css for its Bootstrap-era patterns). Maps the legacy Gentelella-era gx-/x_ classes
   onto Ditalini (--mn-*) tokens and applies the Vercel-guideline
   fixes (focus, motion, typography, spacing).
   Rules: no IDs, field names, endpoints or JS hooks touched here.
   Removing data-noodle="ditalini" from <html> reverts to legacy.
   Noodle: ditalini — dense calm ledger for data-heavy admin.
   Tokens (light | dark): bg #f7f8fa|#0b0f16, surface #fff|#111722,
   fg #111827|#e8edf5, primary #1d3557|#9dbbe6, accent #0f766e|#5eead4.
   ============================================================ */

/* ---- 1. Legacy token remap: tokens.css paints via --bg-* /--text-*,
        so point those at the noodle. Both themes follow data-theme
        because mian.css re-resolves --mn-* per data-mode (mirrored
        from data-theme by admin-mian.js). ---- */
html[data-noodle="ditalini"] {
  /* Standard project control height: ditalini ships 34px (dense), the
     panels standardized on 40px. Overrides the noodle's own size-md. */
  --mn-size-md: 40px;
  --bg-primary: var(--mn-bg);
  --bg-secondary: var(--mn-surface);
  --bg-card: var(--mn-surface);
  --bg-topnav: var(--mn-surface);
  --bg-sidebar: var(--mn-surface);
  --text-primary: var(--mn-fg);
  --text-muted: var(--mn-muted);
  --border: var(--mn-border);
  --accent: var(--mn-accent);
  --success: var(--mn-success);
  --warning: var(--mn-warning);
  --danger: var(--mn-danger);
  --info: var(--mn-info);
  --focus-ring: var(--mn-ring);
  --admin-bg: var(--mn-bg);
  --admin-surface: var(--mn-surface);
  --admin-sidebar: var(--mn-surface);
  --admin-border: var(--mn-border);
  --admin-text: var(--mn-fg);
  --admin-muted: var(--mn-muted);
  --admin-link: var(--mn-primary);
}

/* Light mode primary: the noodle ships navy #1d3557, which paints solid
   mn-/gx-/bare buttons with a near-black fill on light backgrounds.
   Retune only the light theme to a clear blue that clears 4.5:1 against
   the white --mn-primary-fg (verified: #2563eb vs #fff = 5.17:1).
   Dark mode keeps the noodle's own value (#9dbbe6). */
html[data-noodle="ditalini"][data-theme="light"] {
  --mn-primary: #2563eb;
}

/* ---- 2. Base type: Ditalini system stack, tabular data numerals ---- */
html[data-noodle="ditalini"] body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto,
    "Helvetica Neue", Arial, sans-serif;
}
html[data-noodle="ditalini"] h1,
html[data-noodle="ditalini"] h2,
html[data-noodle="ditalini"] h3 {
  text-wrap: balance;
  letter-spacing: -0.01em;
}
html[data-noodle="ditalini"] .mn-stat-value,
html[data-noodle="ditalini"] .mn-table td,
html[data-noodle="ditalini"] .gx-table td {
  font-variant-numeric: tabular-nums;
}

/* ---- 3. Layout chrome (classes injected by layout.js) ---- */
html[data-noodle="ditalini"] .gx-topnav {
  background: var(--mn-surface);
  color: var(--mn-fg);
  border-bottom: 1px solid var(--mn-border);
  scroll-margin-top: 0;
}
html[data-noodle="ditalini"] .gx-layout {
  column-gap: 0;
}
html[data-noodle="ditalini"] .gx-side {
  background: var(--mn-surface);
  border-right: 1px solid var(--mn-border);
}
/* Current-page indicator: Ditalini's own selected-tile recipe
   (inset bar, from /ai/noodles/ditalini.md) instead of a 3px border. */
html[data-noodle="ditalini"] .gx-side a[aria-current="page"] {
  border-left-color: transparent;
  box-shadow: inset 3px 0 0 var(--mn-primary);
}
html[data-noodle="ditalini"] .gx-main {
  scroll-margin-top: 69px; /* sticky 57px topnav + breathing room */
}
html[data-noodle="ditalini"] section[id] {
  scroll-margin-top: 69px;
}

/* Inline-styled header buttons (#logout-btn, #theme-toggle keep their
   IDs; the inline border/color predates the noodle). Adopt mn-btn
   metrics without touching markup. */
html[data-noodle="ditalini"] #logout-btn,
html[data-noodle="ditalini"] #theme-toggle {
  background: transparent !important;
  border: 1px solid var(--mn-border) !important;
  color: var(--mn-fg) !important;
  border-radius: var(--mn-radius-field, 4px) !important;
  min-height: 40px;
  padding: 0 12px !important;
  font: inherit;
  cursor: pointer;
}
html[data-noodle="ditalini"] #theme-menu {
  background: var(--mn-surface);
  border-color: var(--mn-border);
}

/* ---- 4. Cards / panels / tiles ---- */
html[data-noodle="ditalini"] .x_panel,
html[data-noodle="ditalini"] .gx-tile {
  background: var(--mn-surface);
  border: 1px solid var(--mn-border);
  border-radius: var(--r-lg, 12px);
  box-shadow: var(--mn-shadow-sm, 0 1px 2px rgb(0 0 0 / 0.06));
}
html[data-noodle="ditalini"] .x_title {
  border-bottom: 1px solid var(--mn-border);
  gap: 12px;
  flex-wrap: wrap;
}
html[data-noodle="ditalini"] .x_title h1 {
  font-size: 1.5rem;
  font-weight: 600;
}
html[data-noodle="ditalini"] .x_title h2 {
  font-size: 1.0625rem;
  font-weight: 600;
}

/* ---- 5. Tables: ruled Ditalini ledger, sticky header, scroll frame ---- */
html[data-noodle="ditalini"] .mn-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--mn-border);
  border-radius: var(--mn-radius-box, 6px);
}
html[data-noodle="ditalini"] .mn-table-wrap > .mn-table {
  border: 0;
  margin: 0;
}
html[data-noodle="ditalini"] .gx-table thead th,
html[data-noodle="ditalini"] .mn-table thead th {
  position: sticky;
  top: 0;
  background: var(--mn-surface);
  z-index: 1;
}
html[data-noodle="ditalini"] .status {
  white-space: nowrap;
}

/* ---- 6. Forms: labels above inputs, full-width controls, inline help ---- */
html[data-noodle="ditalini"] .x_panel .mn-label,
html[data-noodle="ditalini"] .x_panel > label,
html[data-noodle="ditalini"] form > label,
html[data-noodle="ditalini"] form div > label {
  display: block;
  margin: 16px 0 6px;
  font-size: 0.8125rem;
  font-weight: 600;
}
html[data-noodle="ditalini"] .x_panel .mn-label:first-child,
html[data-noodle="ditalini"] form > label:first-child {
  margin-top: 0;
}
html[data-noodle="ditalini"] .x_panel .gx-input,
html[data-noodle="ditalini"] .x_panel .mn-input,
html[data-noodle="ditalini"] .x_panel .mn-select,
html[data-noodle="ditalini"] .x_panel .mn-textarea {
  width: 100%;
  max-width: 34rem;
}
html[data-noodle="ditalini"] .mn-filterbar {
  margin-bottom: 12px;
}
html[data-noodle="ditalini"] .mn-filterbar .mn-input,
html[data-noodle="ditalini"] .mn-filterbar .mn-select {
  width: 100%;
}
/* Validation + help lines sit inline under their field. */
html[data-noodle="ditalini"] .mn-error {
  font-size: 0.8125rem;
}
html[data-noodle="ditalini"] .field-help {
  font-size: 0.8125rem;
  color: var(--mn-muted);
}

/* ---- 7. Feedback: toasts, modals, badges ---- */
html[data-noodle="ditalini"] .toast {
  background: var(--mn-success);
  color: var(--mn-successFg, #fff);
  border-radius: var(--mn-radius-box, 6px);
  box-shadow: var(--mn-shadow-sm, 0 1px 2px rgb(0 0 0 / 0.2));
  max-width: min(92vw, 28rem);
}
html[data-noodle="ditalini"] .modal > div {
  background: var(--mn-surface);
  border: 1px solid var(--mn-border);
  border-radius: var(--mn-radius-box, 6px);
  color: var(--mn-fg);
}
/* Converted modal titles (were h3): keep their compact dialog scale. */
html[data-noodle="ditalini"] .modal h2 {
  font-size: 1.17em;
  font-weight: 700;
  margin: 0 0 0.75em;
}

/* ---- 8. Charts follow the noodle via JS palette (see admin-mian.js
        MN() + layout.js reskinCharts); keep the frame neutral. ---- */
html[data-noodle="ditalini"] .gx-chart {
  min-height: 280px;
}

/* Standard control height: every admin button matches the 40px inputs
   (product bar; table-row actions and -sm variants included). */
html[data-noodle="ditalini"] .mn-btn {
  min-height: 40px;
}
html[data-noodle="ditalini"] .mn-btn-icon {
  min-width: 40px;
}

/* ---- 9. Vercel-guideline hard rules ---- */
html[data-noodle="ditalini"] :focus-visible {
  outline: 2px solid var(--mn-ring);
  outline-offset: 2px;
}
html[data-noodle="ditalini"] a {
  text-underline-offset: 0.15em;
}
@media (prefers-reduced-motion: reduce) {
  html[data-noodle="ditalini"] *,
  html[data-noodle="ditalini"] *::before,
  html[data-noodle="ditalini"] *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
/* Motion elsewhere: transform/opacity only (charts exempt — canvas). */
html[data-noodle="ditalini"] .modal > div {
  transition: opacity 150ms ease-out, transform 150ms ease-out;
}

/* ---- 10. Browser surfaces carry the design too ---- */
html[data-noodle="ditalini"] ::selection {
  background: var(--mn-primary);
  color: var(--mn-primary-fg, #fff);
}
html[data-noodle="ditalini"] :is(input, textarea, select) {
  caret-color: var(--mn-primary);
}

/* ---- 12. Legacy Gentelella paint takeover ----
   The per-page gx- <style> blocks were removed (stylesheet swap); this
   section carries every layout + paint rule they owned, re-expressed in
   --mn-* tokens with Ditalini-dark fallbacks so the panel still renders
   fully themed even if the mian.css CDN is unreachable. */

/* Service-rule banner (integrations): diagnostic callout using the
   noodle's danger role so it reads correctly in both modes. */
html[data-noodle="ditalini"] .secrule {
  background: var(--mn-danger, #f87171);
  color: var(--mn-danger-fg, #210505);
  border-radius: var(--mn-radius-box, 6px);
  padding: 10px 14px;
  margin-top: 10px;
  font-size: 0.875rem;
}
html[data-noodle="ditalini"] body {
  background: var(--mn-bg, #0b0f16);
  color: var(--mn-fg, #e8edf5);
  margin: 0;
  line-height: 1.5;
}
html[data-noodle="ditalini"] .gx-skip {
  position: absolute;
  left: -9999px;
}
html[data-noodle="ditalini"] .gx-skip:focus {
  left: 12px;
  top: 12px;
  z-index: 99;
  background: var(--mn-surface, #111722);
  color: var(--mn-fg, #e8edf5);
  padding: 8px 12px;
  border-radius: var(--mn-radius-field, 4px);
}
html[data-noodle="ditalini"] .gx-topnav {
  min-height: 57px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  font-weight: 700;
  position: sticky;
  top: 0;
  z-index: 20;
}
html[data-noodle="ditalini"] .gx-badge {
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--mn-border, #263042);
  border-radius: var(--mn-radius-badge, 4px);
  padding: 3px 10px;
  color: var(--mn-muted, #9aa6b8);
  white-space: nowrap;
}
html[data-noodle="ditalini"] .gx-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  min-height: calc(100vh - 57px);
}
html[data-noodle="ditalini"] .gx-side {
  padding: 12px;
  overflow: auto;
}
html[data-noodle="ditalini"] .gx-profile {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 8px 14px;
  border-bottom: 1px solid var(--mn-border, #263042);
  margin-bottom: 10px;
}
html[data-noodle="ditalini"] .gx-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--mn-accent, #5eead4);
  color: var(--mn-accentFg, #042f2b);
  display: grid;
  place-items: center;
  font-weight: 800;
  flex: none;
}
html[data-noodle="ditalini"] .gx-menu-title {
  color: var(--mn-muted, #9aa6b8);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 12px 8px 4px;
}
html[data-noodle="ditalini"] .gx-side a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--mn-primary, #9dbbe6);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: var(--mn-radius-field, 4px);
}
html[data-noodle="ditalini"] .gx-side a:hover {
  background: var(--mn-secondary, #1c2638);
}
html[data-noodle="ditalini"] .gx-side a[aria-current="page"] {
  background: var(--mn-secondary, #1c2638);
  color: var(--mn-fg, #e8edf5);
}
html[data-noodle="ditalini"] .gx-main {
  padding: 20px;
  max-width: 1400px;
}
html[data-noodle="ditalini"] .gx-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 0 0 24px;
}
html[data-noodle="ditalini"] .gx-tile {
  padding: 24px;
}
html[data-noodle="ditalini"] .gx-tile .k {
  color: var(--mn-muted, #9aa6b8);
  font-size: 13px;
}
html[data-noodle="ditalini"] .gx-tile .v {
  font-size: 26px;
  font-weight: 800;
}
html[data-noodle="ditalini"] .x_panel {
  padding: 24px;
  margin: 0 0 24px;
}
html[data-noodle="ditalini"] .x_title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8px;
  margin-bottom: 10px;
}
/* Section-level page headers (admin pages: section > .x_title > h1) sit
   outside any panel: no rule under the title, one 32px band to content.
   With a .page-desc sibling the title tightens so title+desc read as one
   block above the same 32px band. .wb-canvas nests Website Manager's
   header one level deeper. */
html[data-noodle="ditalini"] section > .x_title,
html[data-noodle="ditalini"] .wb-canvas > .x_title {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 32px;
}
html[data-noodle="ditalini"] section > .x_title:has(+ .page-desc),
html[data-noodle="ditalini"] .wb-canvas > .x_title:has(+ .page-desc) {
  margin-bottom: 6px;
}
html[data-noodle="ditalini"] .page-desc {
  margin: 0 0 32px;
  color: var(--mn-muted, #9aa6b8);
  font-size: 0.875rem;
  max-width: 72ch;
}
html[data-noodle="ditalini"] table.gx-table {
  border-collapse: collapse;
  width: 100%;
}
html[data-noodle="ditalini"] .gx-table td,
html[data-noodle="ditalini"] .gx-table th {
  border: 1px solid var(--mn-border, #263042);
  padding: 12px 16px;
  font-size: 13px;
  text-align: left;
}
html[data-noodle="ditalini"] .gx-table th {
  color: var(--mn-muted, #9aa6b8);
  font-weight: 600;
}
html[data-noodle="ditalini"] code {
  background: var(--mn-surface2, #19212f);
  color: var(--mn-fg, #e8edf5);
  padding: 2px 6px;
  border-radius: var(--mn-radius-field, 4px);
}
html[data-noodle="ditalini"] .gx-input {
  background: var(--mn-surface, #111722);
  color: var(--mn-fg, #e8edf5);
  border: 1px solid var(--mn-input, #3b475c);
  padding: 8px 10px;
  border-radius: var(--mn-radius-field, 4px);
  min-height: 40px;
}
/* Bare gx-btn only (mn-btn carries its own border): website-builder
   keeps legacy buttons; every migrated button also has mn-btn. */
html[data-noodle="ditalini"] .gx-btn:not(.mn-btn) {
  border: 0;
  border-radius: var(--mn-radius-field, 4px);
  padding: 0 16px;
  min-height: 40px;
  font-weight: 700;
  cursor: pointer;
  background: var(--mn-primary, #9dbbe6);
  color: var(--mn-primary-fg, #0b1a30);
}
html[data-noodle="ditalini"] section {
  display: block;
}
@media (max-width: 768px) {
  html[data-noodle="ditalini"] .gx-layout {
    grid-template-columns: 1fr;
  }
  html[data-noodle="ditalini"] .gx-side {
    display: flex;
    overflow-x: auto;
    gap: 4px;
  }
  html[data-noodle="ditalini"] .gx-side a {
    white-space: nowrap;
  }
}

/* ---- 11. Dense-data responsive behavior ---- */
@media (max-width: 768px) {
  html[data-noodle="ditalini"] .gx-main {
    padding: 16px;
  }
  html[data-noodle="ditalini"] .x_panel .gx-input,
  html[data-noodle="ditalini"] .x_panel .mn-input,
  html[data-noodle="ditalini"] .x_panel .mn-select,
  html[data-noodle="ditalini"] .x_panel .mn-textarea {
    max-width: none;
  }
}