/* =========================================================================
   DESKTOP THEME — site-wide "mobile-app look" for the desktop portal
   -------------------------------------------------------------------------
   Promotes the Hub pilot (hub-retheme.css) into a shared desktop theme that
   maps the portal's existing desktop classes onto the mobile .mxa design
   language — espresso headers, warm-cream canvas, ivory "paper" cards,
   oxblood ink + gold accents — across BOTH the Mx2 admin (body.mx2-side)
   and the client portal (body.client-side). Pure CSS compat layer, no
   markup changes (see memory: prefer-css-compat-over-markup-sweep).

   SCOPE — three gates, all required:
     • html[data-palette="A"]  — the Renaissance/MaestroX brand = the app's
       look. This is the whitelabel install, so agencies on palettes W/B/C
       keep their own canvas + chrome untouched (whitelabel-install-ops).
     • body.mx2-side / body.client-side — the two portal shells.
     • @media (min-width: 768px) — DESKTOP ONLY. Below 768px the mobile
       `.mxa` layer renders (and the [data-deskonly] desktop blocks hide),
       so wrapping every rule in this query keeps the mobile app untouched
       even on screens that render both layers (hub, clients/show, …).

   Loads globally from both layouts right AFTER app.css and BEFORE the
   page-scoped `pageStyles` loop — so page-scoped sheets (e.g. the hub's
   hub-retheme.css) still win for their screen-specific extras.

   Perf (perf-first-class): no backdrop-filter; transitions narrowed.
   ========================================================================= */

@media (min-width: 768px) {

/* ---- tokens (shared handles) ------------------------------------------- */
html[data-palette="A"] body.mx2-side,
html[data-palette="A"] body.client-side {
  --rt-espresso:   #0f0b07;
  --rt-espresso-2: #1b140d;
  --rt-ink:        #5e1418;
  --rt-ink-2:      #6e1a1f;
  --rt-ink-fg:     #f6e9e2;
  --rt-gold:       #e2b979;
  --rt-gold-deep:  #9a7a38;
  --rt-paper:      #fffdf8;
  --rt-paper-line: #e8dfcc;
  --rt-stream:     #f4ede1;
  --rt-shadow:     0 1px 2px rgba(40,28,12,.05), 0 12px 30px -16px rgba(40,28,12,.24);
  --rt-shadow-hi:  0 2px 6px rgba(40,28,12,.07), 0 22px 48px -20px rgba(40,28,12,.34);
  --rt-ease:       cubic-bezier(.2,.7,.2,1);
}

/* =========================================================================
   CANVAS → warm cream (both shells). The admin/client default is the gold
   `body.canvas.canvas-working` wash (maestrox-canvas.css, painted on <body>;
   .mx2-main / .client-main are transparent !important so <body> shows
   through). Repaint it to the app's warm cream, lightening toward the
   bottom like the phone.
   ========================================================================= */
html[data-palette="A"] body.mx2-side.canvas.canvas-working,
html[data-palette="A"] body.client-side.canvas.canvas-working {
  background-color: #f1e8d7;
  background-image:
    radial-gradient(120% 55% at 50% 0%, rgba(226,185,121,.14) 0%, transparent 58%),
    linear-gradient(180deg, #efe5d2 0%, #f4ede0 48%, #faf6ee 100%);
}

/* =========================================================================
   PAGE HEADER (.ph) → espresso panel, every screen. The title block rides
   on espresso; an optional sub-row (tabs / filters / search / toggle) sits
   contained at the bottom of the same panel. Mirrors the phone's espresso
   .mxa-head + the Hub hero.
   ========================================================================= */
html[data-palette="A"] body.mx2-side .ph,
html[data-palette="A"] body.client-side .ph {
  position: relative;
  /* NO overflow:hidden — it clips dropdowns/menus/popovers that open from
     header controls (e.g. the composer's Save-Draft split button). The bg
     gradient + inset ring already respect border-radius; the sub-row band
     gets its own bottom radius below so the panel stays rounded without
     clipping flyouts. .ph keeps the original position:relative + z-index:1
     (maestrox-page-header.css), so header flyouts layer above page content. */
  margin: 2px 0 22px;
  padding: 26px 30px;
  border-radius: 18px;
  background:
    radial-gradient(120% 130% at 100% 0%, rgba(200,169,94,.22), transparent 60%),
    linear-gradient(165deg, var(--rt-espresso-2) 0%, var(--rt-espresso) 100%);
  box-shadow: 0 16px 40px -22px rgba(15,11,7,.5), inset 0 0 0 1px rgba(226,185,121,.2);
}
/* Breadcrumb */
html[data-palette="A"] body.mx2-side .ph-crumb,
html[data-palette="A"] body.client-side .ph-crumb { color: rgba(255,255,255,.58); }
html[data-palette="A"] body.mx2-side .ph-crumb a,
html[data-palette="A"] body.client-side .ph-crumb a { color: rgba(255,255,255,.72); }
html[data-palette="A"] body.mx2-side .ph-crumb a:hover,
html[data-palette="A"] body.client-side .ph-crumb a:hover { color: #fff; }
html[data-palette="A"] body.mx2-side .ph-crumb .sep,
html[data-palette="A"] body.client-side .ph-crumb .sep { color: rgba(226,185,121,.5); }
html[data-palette="A"] body.mx2-side .ph-crumb .current,
html[data-palette="A"] body.client-side .ph-crumb .current { color: var(--rt-gold); }
/* Title / meta / description */
html[data-palette="A"] body.mx2-side .ph-title,
html[data-palette="A"] body.client-side .ph-title { color: #fff; }
html[data-palette="A"] body.mx2-side .ph-title em,
html[data-palette="A"] body.client-side .ph-title em { color: var(--rt-gold); font-style: italic; font-weight: 400; }
html[data-palette="A"] body.mx2-side .ph-meta,
html[data-palette="A"] body.client-side .ph-meta { color: rgba(255,255,255,.7); }
html[data-palette="A"] body.mx2-side .ph-meta strong,
html[data-palette="A"] body.client-side .ph-meta strong { color: #fff; }
html[data-palette="A"] body.mx2-side .ph-meta .gold,
html[data-palette="A"] body.client-side .ph-meta .gold { color: var(--rt-gold); }
html[data-palette="A"] body.mx2-side .ph-meta .dot,
html[data-palette="A"] body.client-side .ph-meta .dot { color: rgba(255,255,255,.34); }
html[data-palette="A"] body.mx2-side .ph-meta .pill,
html[data-palette="A"] body.client-side .ph-meta .pill {
  background: rgba(226,185,121,.18); color: #f3ece1;
}
html[data-palette="A"] body.mx2-side .ph-desc,
html[data-palette="A"] body.client-side .ph-desc { color: rgba(255,255,255,.72); }
html[data-palette="A"] body.mx2-side .ph-desc strong,
html[data-palette="A"] body.client-side .ph-desc strong { color: #fff; }
/* Identity / section tile */
html[data-palette="A"] body.mx2-side .ph-tile.section,
html[data-palette="A"] body.client-side .ph-tile.section {
  background: rgba(255,253,248,.06);
  border: 1px solid rgba(226,185,121,.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
html[data-palette="A"] body.mx2-side .ph-tile.section svg,
html[data-palette="A"] body.mx2-side .ph-tile.section .glyph,
html[data-palette="A"] body.client-side .ph-tile.section svg,
html[data-palette="A"] body.client-side .ph-tile.section .glyph { color: var(--rt-gold); }
html[data-palette="A"] body.mx2-side .ph-info-btn,
html[data-palette="A"] body.client-side .ph-info-btn {
  background: rgba(255,253,248,.06); color: rgba(255,255,255,.8);
  border-color: rgba(226,185,121,.3);
}

/* Header buttons on the dark hero */
html[data-palette="A"] body.mx2-side .ph-btn:not(.primary):not(.ghost),
html[data-palette="A"] body.mx2-side .ph-btn.ghost,
html[data-palette="A"] body.client-side .ph-btn:not(.primary):not(.ghost),
html[data-palette="A"] body.client-side .ph-btn.ghost {
  background: rgba(255,253,248,.07);
  color: #f3ece1;
  border: 1px solid rgba(226,185,121,.32);
}
html[data-palette="A"] body.mx2-side .ph-btn:not(.primary):not(.ghost):hover,
html[data-palette="A"] body.mx2-side .ph-btn.ghost:hover,
html[data-palette="A"] body.client-side .ph-btn:not(.primary):not(.ghost):hover,
html[data-palette="A"] body.client-side .ph-btn.ghost:hover {
  background: rgba(255,253,248,.13); border-color: var(--rt-gold);
}
html[data-palette="A"] body.mx2-side .ph-btn.primary,
html[data-palette="A"] body.client-side .ph-btn.primary {
  background: linear-gradient(180deg, var(--rt-ink-2) 0%, var(--rt-ink) 100%);
  color: var(--rt-ink-fg);
  box-shadow: 0 6px 18px rgba(94,20,24,.45), inset 0 1px 0 rgba(255,255,255,.14);
}

/* ---- Sub-row (rides at the bottom of the espresso panel) --------------- */
html[data-palette="A"] body.mx2-side .ph-subrow,
html[data-palette="A"] body.client-side .ph-subrow {
  margin: 16px -30px -26px;
  padding: 11px 30px;
  background: rgba(0,0,0,.22);
  border-top: 1px solid rgba(226,185,121,.18);
  border-bottom: 0;
  /* Round the band's bottom to match the panel (.ph no longer clips). */
  border-radius: 0 0 18px 18px;
}
/* folder-host keeps no band — the folder tabs are the visual */
html[data-palette="A"] body.mx2-side .ph-subrow.folder-host,
html[data-palette="A"] body.client-side .ph-subrow.folder-host {
  margin: 14px -30px -26px;
  padding: 0 30px;
  background: transparent;
  border-top: 0;
}
/* Plain tabs */
html[data-palette="A"] body.mx2-side .ph-tab,
html[data-palette="A"] body.client-side .ph-tab { color: rgba(255,255,255,.6); }
html[data-palette="A"] body.mx2-side .ph-tab:hover,
html[data-palette="A"] body.client-side .ph-tab:hover { color: #fff; background: rgba(255,253,248,.07); }
html[data-palette="A"] body.mx2-side .ph-tab.is-active,
html[data-palette="A"] body.client-side .ph-tab.is-active { color: #fff; }
html[data-palette="A"] body.mx2-side .ph-tab.is-active::after,
html[data-palette="A"] body.client-side .ph-tab.is-active::after {
  background: linear-gradient(90deg, transparent, var(--rt-gold), transparent);
}
html[data-palette="A"] body.mx2-side .ph-tab .count,
html[data-palette="A"] body.client-side .ph-tab .count {
  background: rgba(226,185,121,.26); color: #f3ece1;
}
/* Folder tabs — inactive ghost-on-dark; active = ivory tab bridging into the
   cream content below, with the gold top-cap kept. */
html[data-palette="A"] body.mx2-side .ph-tabs.folder .ph-tab,
html[data-palette="A"] body.client-side .ph-tabs.folder .ph-tab {
  background: rgba(255,253,248,.05);
  border-color: rgba(226,185,121,.2);
  color: rgba(255,255,255,.62);
}
html[data-palette="A"] body.mx2-side .ph-tabs.folder .ph-tab:hover,
html[data-palette="A"] body.client-side .ph-tabs.folder .ph-tab:hover {
  background: rgba(255,253,248,.1); color: #fff;
}
html[data-palette="A"] body.mx2-side .ph-tabs.folder .ph-tab.is-active,
html[data-palette="A"] body.client-side .ph-tabs.folder .ph-tab.is-active {
  background: var(--rt-paper);
  border-color: rgba(226,185,121,.4);
  color: var(--rt-espresso);
  box-shadow: 0 -4px 12px rgba(0,0,0,.22);
}
html[data-palette="A"] body.mx2-side .ph-tabs.folder .ph-tab.is-active .count,
html[data-palette="A"] body.client-side .ph-tabs.folder .ph-tab.is-active .count {
  background: var(--rt-ink); color: var(--rt-ink-fg);
}
/* Toggle group */
html[data-palette="A"] body.mx2-side .ph-toggle,
html[data-palette="A"] body.client-side .ph-toggle {
  background: rgba(255,253,248,.06); border-color: rgba(226,185,121,.3);
}
html[data-palette="A"] body.mx2-side .ph-toggle button,
html[data-palette="A"] body.mx2-side .ph-toggle a,
html[data-palette="A"] body.client-side .ph-toggle button,
html[data-palette="A"] body.client-side .ph-toggle a { color: rgba(255,255,255,.66); }
html[data-palette="A"] body.mx2-side .ph-toggle button.is-active,
html[data-palette="A"] body.mx2-side .ph-toggle a.is-active,
html[data-palette="A"] body.client-side .ph-toggle button.is-active,
html[data-palette="A"] body.client-side .ph-toggle a.is-active {
  background: linear-gradient(140deg, #e9cc8a, #c8a95e); color: var(--rt-espresso);
}
/* Search field */
html[data-palette="A"] body.mx2-side .ph-search,
html[data-palette="A"] body.client-side .ph-search {
  background: rgba(255,253,248,.08); border-color: rgba(226,185,121,.26);
}
html[data-palette="A"] body.mx2-side .ph-search:focus-within,
html[data-palette="A"] body.client-side .ph-search:focus-within {
  border-color: var(--rt-gold); box-shadow: 0 0 0 3px rgba(226,185,121,.18);
}
html[data-palette="A"] body.mx2-side .ph-search svg,
html[data-palette="A"] body.client-side .ph-search svg { color: rgba(255,255,255,.6); }
html[data-palette="A"] body.mx2-side .ph-search input,
html[data-palette="A"] body.client-side .ph-search input { color: #fff; }
html[data-palette="A"] body.mx2-side .ph-search input::placeholder,
html[data-palette="A"] body.client-side .ph-search input::placeholder { color: rgba(255,255,255,.5); }
/* Chip row / chips in the subrow */
html[data-palette="A"] body.mx2-side .ph-chip-row,
html[data-palette="A"] body.client-side .ph-chip-row { color: rgba(255,255,255,.66); }
html[data-palette="A"] body.mx2-side .ph-chip,
html[data-palette="A"] body.client-side .ph-chip {
  background: rgba(255,253,248,.06); border-color: rgba(226,185,121,.26); color: rgba(255,255,255,.72);
}
html[data-palette="A"] body.mx2-side .ph-chip.is-active,
html[data-palette="A"] body.client-side .ph-chip.is-active {
  background: rgba(226,185,121,.2); border-color: var(--rt-gold); color: #fff;
}

/* =========================================================================
   SECTION KICKERS → gold uppercase (matches the phone's .mxa section keys).
   ========================================================================= */
html[data-palette="A"] body.mx2-side .section-kicker,
html[data-palette="A"] body.mx2-side .mx2-eyebrow,
html[data-palette="A"] body.client-side .section-kicker,
html[data-palette="A"] body.client-side .mx2-eyebrow { color: var(--rt-gold-deep); }

/* =========================================================================
   STATUS CHIPS (.chip) → re-tone gold + oxblood into the app register.
   ========================================================================= */
html[data-palette="A"] body.mx2-side .chip.gold,
html[data-palette="A"] body.client-side .chip.gold {
  color: var(--rt-gold-deep); background: rgba(226,185,121,.18); border-color: rgba(226,185,121,.5);
}
html[data-palette="A"] body.mx2-side .chip.info,
html[data-palette="A"] body.client-side .chip.info {
  color: var(--rt-ink); background: rgba(94,20,24,.08); border-color: rgba(94,20,24,.2);
}

/* =========================================================================
   SURFACES — ivory "paper" cards. The admin/client card primitives read
   --mx2-surface (#fff) + --mx2-rule borders with near-square corners; retone
   them to the app's ivory (#fffdf8) + paper-line border + rounded + warm
   shadow, matching the Hub cards. (Surface inventory: .mx2-section--paper is
   the paper panel; .mx2-card-form the form card; .mx2-kpi the stat; plus
   .mx2-dash-card and the client .profile-section / .hub-*-card family.)
   ========================================================================= */
html[data-palette="A"] body.mx2-side .mx2-section--paper,
html[data-palette="A"] body.mx2-side .mx2-dash-card,
html[data-palette="A"] body.mx2-side .mx2-card-form,
html[data-palette="A"] body.mx2-side .mx2-form-section form,
html[data-palette="A"] body.client-side .mx2-section--paper,
html[data-palette="A"] body.client-side .mx2-dash-card,
html[data-palette="A"] body.client-side .mx2-card-form,
html[data-palette="A"] body.client-side .mx2-form-section form,
html[data-palette="A"] body.client-side .profile-section,
html[data-palette="A"] body.client-side .profile-section--wide {
  background: var(--rt-paper);
  border: 1px solid var(--rt-paper-line);
  border-radius: 16px;
  box-shadow: var(--rt-shadow);
}

/* KPI stat cards → ivory, gold label, oxblood numeral (phone's "Needs you"). */
html[data-palette="A"] body.mx2-side .mx2-kpi,
html[data-palette="A"] body.client-side .mx2-kpi {
  background: var(--rt-paper);
  border: 1px solid var(--rt-paper-line);
  border-radius: 16px;
  box-shadow: var(--rt-shadow);
  transition: transform .2s var(--rt-ease), border-color .2s var(--rt-ease), box-shadow .2s var(--rt-ease);
}
html[data-palette="A"] body.mx2-side .mx2-kpi:hover,
html[data-palette="A"] body.mx2-side a.mx2-kpi--link:hover,
html[data-palette="A"] body.client-side .mx2-kpi:hover,
html[data-palette="A"] body.client-side a.mx2-kpi--link:hover {
  border-color: var(--rt-gold); transform: translateY(-3px); box-shadow: var(--rt-shadow-hi);
}
html[data-palette="A"] body.mx2-side .mx2-kpi label,
html[data-palette="A"] body.client-side .mx2-kpi label { color: var(--rt-gold-deep); }
html[data-palette="A"] body.mx2-side .mx2-kpi .value,
html[data-palette="A"] body.client-side .mx2-kpi .value { color: var(--rt-ink); }

/* Dash-card head kicker/action + client dashboard tiles. */
html[data-palette="A"] body.mx2-side .mx2-dash-card__head .section-kicker,
html[data-palette="A"] body.mx2-side .mx2-dash-card__meta,
html[data-palette="A"] body.mx2-side .mx2-dash-card__action,
html[data-palette="A"] body.client-side .mx2-dash-card__head .section-kicker,
html[data-palette="A"] body.client-side .mx2-dash-card__meta,
html[data-palette="A"] body.client-side .mx2-dash-card__action { color: var(--rt-gold-deep); }
html[data-palette="A"] body.mx2-side .mx2-dash-card__action:hover,
html[data-palette="A"] body.client-side .mx2-dash-card__action:hover { color: var(--rt-ink); }

html[data-palette="A"] body.mx2-side .hub-kpi-card,
html[data-palette="A"] body.mx2-side .hub-jumpin-card,
html[data-palette="A"] body.client-side .hub-kpi-card,
html[data-palette="A"] body.client-side .hub-jumpin-card {
  background: var(--rt-paper);
  border: 1px solid var(--rt-paper-line);
  border-radius: 16px;
  box-shadow: var(--rt-shadow);
}
html[data-palette="A"] body.mx2-side .hub-kpi-card__label,
html[data-palette="A"] body.client-side .hub-kpi-card__label { color: var(--rt-gold-deep); }
html[data-palette="A"] body.mx2-side .hub-kpi-card__value,
html[data-palette="A"] body.client-side .hub-kpi-card__value { color: var(--rt-ink); }

/* Tables inside paper cards: warm hairlines, gold headers (kept), stream hover. */
html[data-palette="A"] body.mx2-side .mx2-table th,
html[data-palette="A"] body.client-side .mx2-table th { color: var(--rt-gold-deep); border-bottom-color: var(--rt-paper-line); }
html[data-palette="A"] body.mx2-side .mx2-table td,
html[data-palette="A"] body.client-side .mx2-table td { border-bottom-color: var(--rt-paper-line); }
html[data-palette="A"] body.mx2-side .mx2-table tr:hover td,
html[data-palette="A"] body.client-side .mx2-table tr:hover td { background: var(--rt-stream); }
html[data-palette="A"] body.mx2-side .mx2-table-link:hover,
html[data-palette="A"] body.client-side .mx2-table-link:hover { color: var(--rt-gold-deep); border-bottom-color: var(--rt-gold-deep); }

/* Empty states → warm cream with a soft gold dashed edge (was stone rule). */
html[data-palette="A"] body.mx2-side .mx2-empty,
html[data-palette="A"] body.client-side .mx2-empty {
  background: var(--rt-stream);
  border: 1px dashed rgba(226,185,121,.5);
  border-radius: 14px;
}

} /* end @media (min-width: 768px) */