/* ==========================================================================
   MarvinXR — Platform UI layer  (mxr-ui.css)
   --------------------------------------------------------------------------
   Generalises the AI Studio (.ais) design language across every dashboard
   page. Loaded LAST in index.html so it wins over style.css,
   theme-light.css and extra_style_index.css (which re-declares :root).

   ROLLBACK: comment out the single <link ... mxr-ui.css> line in
   main/templates/main/dashboard/index.html and hard-refresh. Nothing else
   in the platform depends on this file.

   Design principle carried over from AI Studio: neutrals are expressed as
   rgba(128,128,160,a) rather than fixed greys, so a single rule reads
   correctly on both the dark and the light palette. Colour comes from the
   existing --primaryColor / --cardBg / --lightColor / --textAltColor vars.
   ========================================================================== */

:root {
  /* radii */
  --mxr-r-xs: 6px;
  --mxr-r-sm: 8px;
  --mxr-r-md: 10px;
  --mxr-r-lg: 12px;
  --mxr-r-pill: 99px;

  /* theme-agnostic neutrals — the AI Studio trick */
  --mxr-line: rgba(128, 128, 160, .18);
  --mxr-line-strong: rgba(128, 128, 160, .32);
  --mxr-fill: rgba(128, 128, 160, .08);
  --mxr-fill-hover: rgba(128, 128, 160, .14);

  /* elevation */
  --mxr-shadow-sm: 0 .125rem .375rem rgba(0, 0, 0, .18);
  --mxr-shadow-md: 0 6px 20px -6px rgba(0, 0, 0, .32);
  --mxr-shadow-accent: 0 8px 22px -8px rgba(247, 0, 79, .5);

  /* semantic */
  --mxr-ok: #2fbf78;
  --mxr-warn: #e6ca19;
  --mxr-err: #ff6b6b;

  /* type */
  --mxr-font: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
              Roboto, "Helvetica Neue", Arial, sans-serif;
  --mxr-fs-page: 26px;
  --mxr-fs-section: 18px;
  --mxr-fs-body: 14px;
  --mxr-fs-sub: 13px;
  --mxr-fs-meta: 12px;
  --mxr-fs-label: 11.5px;

  --mxr-ease: .2s cubic-bezier(.4, 0, .2, 1);
}

/* light-mode elevation wants ink-tinted shadow, not black */
html[data-theme="light"] {
  --mxr-shadow-sm: 0 .125rem .375rem rgba(35, 37, 58, .10);
  --mxr-shadow-md: 0 6px 20px -6px rgba(35, 37, 58, .16);
  --mxr-line: rgba(90, 95, 130, .16);
  --mxr-line-strong: rgba(90, 95, 130, .28);
}

/* ---------------------------------------------------------------- base --- */

body {
  font-family: var(--mxr-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: .1px;
}

h1, h2, h3, h4, h5, h6,
.title-part, .head-title {
  font-family: var(--mxr-font);
  letter-spacing: -.01em;
  color: var(--lightColor);
}

/* section heading used on most dashboard pages */
.title-part {
  font-size: var(--mxr-fs-section);
  font-weight: 600;
}
.des {
  color: var(--textAltColor);
  font-size: var(--mxr-fs-sub);
  line-height: 1.6;
}

/* consistent focus ring — replaces the global outline:none in style.css */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.menu-link:focus-visible {
  outline: 2px solid var(--primaryColor) !important;
  outline-offset: 2px !important;
  border-radius: var(--mxr-r-xs);
}

/* ------------------------------------------------------------- chrome --- */

.aside-layout {
  box-shadow: var(--mxr-shadow-sm);
  border-right: 1px solid var(--mxr-line);
}

.brand-logo {
  border-bottom: 1px solid var(--mxr-line);
  padding: 14px 0;
}

/* sidebar links: softer resting state, accent bar on active */
.side-panel .side-menu .menu-link,
.side-panel .user-menu .menu-link {
  border-radius: var(--mxr-r-sm);
  transition: background-color var(--mxr-ease), color var(--mxr-ease);
}
.side-panel .side-menu .menu-link .link-icon {
  background-color: var(--mxr-fill);
  border-radius: var(--mxr-r-sm);
  color: var(--lightColor);
  transition: background-color var(--mxr-ease), color var(--mxr-ease);
}
.side-panel .side-menu .menu-link .link-text,
.side-panel .user-menu .menu-link .text {
  color: var(--lightColor);
  font-size: 14.5px;
  font-weight: 500;
}
.side-panel .side-menu .menu-link:hover,
.side-panel .user-menu .menu-link:hover {
  background-color: var(--mxr-fill-hover);
}
/* keep the existing gradient sweep for .active, just tighten the radius */
.side-panel .side-menu .menu-link:after {
  border-radius: var(--mxr-r-sm);
}
.side-panel .side-menu .menu-link.active .link-icon,
.side-panel .side-menu .menu-link:hover .link-icon {
  background-color: rgba(255, 255, 255, .16);
  color: #fff;
}
.side-panel .side-menu .menu-link.active .link-text,
.side-panel .side-menu .menu-link.active .text {
  color: #fff;
  font-weight: 600;
}
.side-panel .user-menu .user-menu-heading {
  border-top: 1px solid var(--mxr-line);
}
.side-panel .user-menu .user-menu-heading .text {
  font-size: var(--mxr-fs-label);
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--textAltColor);
}

.header-layout {
  border-bottom: 1px solid var(--mxr-line);
}

/* -------------------------------------------------------------- cards --- */

.form-content,
.stat-card,
.world-wide-view,
.pricing-section .pricing-list .pricing-feature {
  border: 1px solid var(--mxr-line);
  border-radius: var(--mxr-r-lg);
  box-shadow: var(--mxr-shadow-sm);
}

.form-content {
  background: var(--cardBg);
  padding: 24px;
}

/* pricing cards: lift on hover, consistent with the rest of the platform */
.pricing-section .pricing-list {
  transition: transform var(--mxr-ease), box-shadow var(--mxr-ease);
}
.pricing-section .pricing-list:hover {
  transform: translateY(-3px);
  box-shadow: var(--mxr-shadow-md);
}
.pricing-section .pricing-list .package-tag {
  letter-spacing: .04em;
  font-weight: 700;
}

/* ------------------------------------------------------------ buttons --- */

.btn-submit,
.subscribe-btn,
.content-button,
.status-button {
  font-family: var(--mxr-font);
  border-radius: var(--mxr-r-sm);
  font-weight: 600;
  letter-spacing: .01em;
  transition: filter var(--mxr-ease), transform var(--mxr-ease),
              box-shadow var(--mxr-ease), background-color var(--mxr-ease);
}
.btn-submit {
  height: auto;
  padding: 11px 20px;
  font-size: var(--mxr-fs-body);
  box-shadow: var(--mxr-shadow-accent);
}
.btn-submit:hover,
.subscribe-btn:hover,
.content-button:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.btn-submit:active,
.subscribe-btn:active,
.content-button:active {
  transform: translateY(0);
  filter: brightness(.96);
}
.btn-submit:disabled,
.content-button:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
  filter: none;
}

/* -------------------------------------------------------------- forms --- */
/* style.css forces placeholders to #FFFFFF !important and labels to
   var(--white) — both invisible on the light palette. Corrected here. */

.control-label {
  color: var(--lightColor);
  font-size: var(--mxr-fs-label);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 7px;
}

.form-control {
  background: var(--mxr-fill);
  border: 1px solid var(--mxr-line-strong);
  border-radius: var(--mxr-r-sm);
  color: var(--lightColor);
  font-family: var(--mxr-font);
  font-size: var(--mxr-fs-body);
  min-height: 42px;
  padding: 10px 14px;
  transition: border-color var(--mxr-ease), background-color var(--mxr-ease),
              box-shadow var(--mxr-ease);
}
.form-control:focus {
  background: var(--mxr-fill);
  border-color: var(--primaryColor);
  color: var(--lightColor);
  box-shadow: 0 0 0 3px rgba(247, 0, 79, .14);
}
.form-control::placeholder {
  color: var(--textAltColor) !important;
  opacity: .85 !important;
}
.form-control::-webkit-input-placeholder { color: var(--textAltColor) !important; opacity: .85 !important; }
.form-control::-moz-placeholder         { color: var(--textAltColor) !important; opacity: .85 !important; }
.form-control:-ms-input-placeholder     { color: var(--textAltColor) !important; opacity: .85 !important; }
.form-control[disabled],
.form-control[readonly] {
  background-color: var(--mxr-fill) !important;
  opacity: .55;
}
select.form-control option {
  background: var(--cardBg);
  color: var(--lightColor);
}

/* ------------------------------------------------------------- tables --- */

.table, table.dataTable {
  color: var(--lightColor);
  font-size: var(--mxr-fs-sub);
}
.table th, table.dataTable thead th {
  border-bottom: 2px solid var(--mxr-line) !important;
  border-top: none !important;
  color: var(--textAltColor);
  font-size: var(--mxr-fs-label);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 10px 12px;
}
.table td, table.dataTable tbody td {
  border-top: 1px solid var(--mxr-line) !important;
  padding: 11px 12px;
  vertical-align: middle;
}
.table tbody tr, table.dataTable tbody tr {
  transition: background-color var(--mxr-ease);
}
.table tbody tr:hover, table.dataTable tbody tr:hover {
  background-color: var(--mxr-fill);
}

/* ------------------------------------------------------------- modals --- */

.modal .modal-content {
  background-color: var(--cardBg);
  border: 1px solid var(--mxr-line);
  border-radius: var(--mxr-r-lg);
  box-shadow: var(--mxr-shadow-md);
}
.modal .modal-header,
.modal .modal-footer {
  border-color: var(--mxr-line) !important;
}
.modal .modal-header,
.modal .modal-title {
  color: var(--lightColor);
  font-weight: 600;
}
.modal .modal-body {
  color: var(--lightColor);
  font-size: var(--mxr-fs-body);
}
.modal .close {
  color: var(--textAltColor);
  opacity: 1;
  transition: color var(--mxr-ease);
}
.modal .close:hover {
  color: var(--primaryColor);
}

/* ---------------------------------------------------------- utilities --- */

/* status pill, generalised from .ais .st */
.mxr-chip {
  display: inline-block;
  font-size: var(--mxr-fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 3px 10px;
  border-radius: var(--mxr-r-pill);
  background: var(--mxr-fill);
  color: var(--textAltColor);
}
.mxr-chip.ok     { background: rgba(47, 191, 120, .15); color: var(--mxr-ok); }
.mxr-chip.warn   { background: rgba(230, 202, 25, .15); color: var(--mxr-warn); }
.mxr-chip.err    { background: rgba(255, 107, 107, .15); color: var(--mxr-err); }
.mxr-chip.accent { background: rgba(247, 0, 79, .14);   color: var(--primaryColor); }

/* scrollbars, themed */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--mxr-line-strong);
  border-radius: var(--mxr-r-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--primaryColor); }

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

/* ================================================== contrast repairs === */
/* Found by rendering the real pages in both themes (2026-07-28).         */

/* 1. Action buttons were background:rgb(247 0 79 / 20%) + color:var(--light)
      (#f8f9fa). Over the dark palette that reads as maroon with near-white
      text; over the light palette it is near-white on pale pink and is
      effectively unreadable. Solid brand fill in both themes — this is also
      what AI Studio's .btn-p does, so it unifies the two. */
.body-layout .card-section .content-part .btn-action,
.campaign-segment .add-campaign .add-new-campaign .add-new,
.modal-footer .add-new,
.next_prev-btn,
.dashboard-section .world-wide-view .report-action .download-btn {
  background: var(--primaryColor);
  color: #fff;
  border-radius: var(--mxr-r-sm);
  font-weight: 600;
  box-shadow: var(--mxr-shadow-accent);
}
.body-layout .card-section .content-part .btn-action:hover,
.campaign-segment .add-campaign .add-new-campaign .add-new:hover,
.modal-footer .add-new:hover,
.next_prev-btn:hover,
.dashboard-section .world-wide-view .report-action .download-btn:hover {
  background: var(--primaryColor);
  filter: brightness(1.08);
}
.body-layout .card-section .content-part .btn-action:disabled,
.campaign-segment .add-campaign .add-new-campaign .add-new:disabled,
.modal-footer .add-new:disabled,
.next_prev-btn:disabled {
  opacity: .45;
  box-shadow: none;
  filter: none;
  cursor: not-allowed;
}

/* 1b. theme-light.css:126 sets color:var(--primaryColor) on these buttons.
       That was right when their background was 20%-opacity pink, but against
       the solid fill above it renders pink-on-pink (invisible). Same selector
       specificity, loaded later, so this wins. */
html[data-theme="light"] .campaign-segment .add-campaign .add-new-campaign .add-new,
html[data-theme="light"] .next_prev-btn,
html[data-theme="light"] .body-layout .card-section .content-part .btn-action,
html[data-theme="light"] .dashboard-section .world-wide-view .report-action .download-btn,
html[data-theme="light"] .modal-footer .add-new {
  color: #fff;
}

/* 2. .header-layout:before is a hardcoded rgba(35,35,51,.6) blur strip that
      showed as a dark band across the top of every light-theme page. */
html[data-theme="light"] .header-layout:before {
  background: rgba(255, 255, 255, .6);
}

/* 2b. Web Editor (customer/webar.html): the code block is
       <pre id="webarhtml" class="color-white"> and .color-white is a flat
       `color:white`, so in light mode the markup rendered as ghost text on a
       near-white card. Ink-black code on a tinted surface instead; the
       surrounding #dynamic-html used `border-light`, invisible on light too. */
html[data-theme="light"] #dynamic-html {
  background: #f6f7fb;
  border-color: rgba(90, 95, 130, .18) !important;
  border-radius: var(--mxr-r-md);
}
html[data-theme="light"] #webarhtml,
html[data-theme="light"] #webarhtml * {
  color: #14161f !important;
}

/* 2c. Settings pages (customer/settings.html AND reseller/settings.html both
       use .settings-part): background-color is a hardcoded
       rgb(43 44 64 / 78%) navy that never flips, so the card stayed a dark
       slab — and theme-light.css had already turned the text on it to ink,
       leaving dark-on-dark. Give it the real card surface. */
html[data-theme="light"] .settings-part {
  background-color: var(--cardBg);
  border: 1px solid var(--mxr-line);
  box-shadow: var(--mxr-shadow-sm);
}

/* 3. Pricing-card headers always sit on a saturated colour block, so their
      text must stay white in BOTH themes. theme-light.css's white-text sweep
      was turning it to ink (#23253a) — e.g. Enterprise's "Custom" rendered
      near-black on dark purple. Deliberately NOT targeting `b`, so the inline
      yellow on Growth's "Most Preferred Plan" survives. */
.pricing-section .pricing-list .package-tag,
.pricing-section .pricing-list .pricing-feature .pricing-rate,
.pricing-section .pricing-list .pricing-feature .pricing-rate .tag,
.pricing-section .pricing-list .pricing-feature .pricing-rate .tag-time {
  color: #fff !important;
}