/* LeisureOS Menu Design Studio V4 — admin theme integration.
   Follow the actual dashboard theme in the same way as Menu Categories/Items.
   Do not change the guest iframe/mock-phone menu layout, product data or publishing. */

/* Light is the base theme. Attribute removal after dark switch takes effect immediately. */
html:not([data-leisure-contrast="dark"]) #appShell #menu #lo3-studio {
  --lo3-ink:#15231e;
  --lo3-subtle:#52635a;
  --lo3-edge:#d7e2dc;
  --lo3-surface:#fff;
  --lo3-surface2:#f7faf8;
  --lo3-highlight:#facc15;
  background:#fff;
  border:1px solid #d4dfd7;
  color:#15231e;
}
html[data-leisure-contrast="dark"] #appShell #menu #lo3-studio {
  --lo3-ink:#f1f7f4;
  --lo3-subtle:#b7c8c2;
  --lo3-edge:#4b6161;
  --lo3-surface:#24363a;
  --lo3-surface2:#2b4043;
  --lo3-highlight:#facc15;
  background:#223338!important;
  border:1px solid #506a6c!important;
  color:#f1f7f4!important;
}
#appShell #menu #lo3-studio {
  padding:clamp(16px,2.2vw,25px);
  margin:26px 0 36px;
  border-radius:18px;
  box-shadow:0 2px 9px rgba(8,35,27,.035);
}
#appShell #menu #lo3-studio .lo3-form,
#appShell #menu #lo3-studio .lo3-preview,
#appShell #menu #lo3-studio .lo3-template {
  background:var(--lo3-surface)!important;
  border-color:var(--lo3-edge)!important;
  color:var(--lo3-ink)!important;
}
#appShell #menu #lo3-studio .lo3-template {
  background:var(--lo3-surface2)!important;
}
#appShell #menu #lo3-studio .lo3-template.is-selected {
  border-color:var(--lo3-highlight)!important;
}
#appShell #menu #lo3-studio .lo3-preview {
  background:var(--lo3-surface)!important;
  /* Preview must retain a readable iPhone width. */
}
#appShell #menu #lo3-studio :is(.lo3-head h2,.lo3-template strong,.lo3-form h3,.lo3-preview-heading h3,.lo3-field>span) {
  color:var(--lo3-ink)!important;
}
#appShell #menu #lo3-studio :is(.lo3-head p,.lo3-template small,.lo3-preview-heading p,.lo3-help) {
  color:var(--lo3-subtle)!important;
}
#appShell #menu #lo3-studio .lo3-status {
  border-color:var(--lo3-edge)!important;
  color:var(--lo3-ink)!important;
  background:var(--lo3-surface2)!important;
}
html:not([data-leisure-contrast="dark"]) #appShell #menu #lo3-studio .lo3-note {color:#795014!important}
html[data-leisure-contrast="dark"] #appShell #menu #lo3-studio .lo3-note {color:#ffdf8a!important}

/* Publish must remain a conspicuous gold action in BOTH dashboard themes.
   Previous admin CSS applies !important dark button defaults to buttons without
   .primary-btn — and incorrectly neutralised the studio's publish button. */
#appShell #menu #lo3-studio button.lo3-publish,
html[data-leisure-contrast="dark"] #appShell #menu #lo3-studio button.lo3-publish {
  background:#facc15!important;
  color:#17180f!important;
  border:1px solid #e6b50d!important;
  box-shadow:0 3px 12px rgba(205,155,17,.16);
  font-weight:800;
  min-height:43px;
  opacity:1!important;
}
#appShell #menu #lo3-studio button.lo3-publish:disabled {
  background:#f9d656!important;
  color:#53451f!important;
  border-color:#ddc15a!important;
  opacity:1!important;
  box-shadow:none;
  cursor:not-allowed;
}
#appShell #menu #lo3-studio button.lo3-publish:not(:disabled):hover {
  background:#f5bc00!important;
  color:#17180f!important;
}
#appShell #menu #lo3-studio button.lo3-publish:focus-visible {
  outline:3px solid #b17d00!important;outline-offset:3px;
}

/* Editor inputs and image management: readable surfaces in light and dark. */
#appShell #menu #lo3-studio .lo3-field :is(input:not([type=color]),textarea,select) {
  background:var(--lo3-surface2)!important;
  color:var(--lo3-ink)!important;
  border-color:var(--lo3-edge)!important;
}
#appShell #menu #lo3-studio .lo3-field :is(input:not([type=color]),textarea)::placeholder{
  color:var(--lo3-subtle)!important;opacity:1;
}
#appShell #menu #lo3-studio .lo3-field input[type=color] {
  background:var(--lo3-surface2)!important;
  border-color:var(--lo3-edge)!important;
}
html:not([data-leisure-contrast="dark"]) #appShell #menu #lo3-studio .lo3-field :is(input,textarea,select) {color-scheme:light}
html[data-leisure-contrast="dark"] #appShell #menu #lo3-studio .lo3-field :is(input,textarea,select) {color-scheme:dark}
#appShell #menu #lo3-studio :is(.lo3-catalog-switch,.lo3-expand,.lo3-photo-controls button) {
  background:var(--lo3-surface2)!important;
  color:var(--lo3-ink)!important;
  border-color:var(--lo3-edge)!important;
}
#appShell #menu #lo3-studio :is(.lo3-catalog-switch,.lo3-expand) {
  min-height:34px;
}

/* Isolate the simulated phone from the admin-wide !important dark text/button
   styling, so a selected LIGHT guest design stays light even when the owner
   dashboard is dark. These are only presentation overrides inside preview. */
html[data-leisure-contrast="dark"] #appShell #menu #lo3-studio .lo3-phone {
  background:var(--lo3-bg)!important;
  color:var(--lo3-text)!important;
  border-color:#0b1017!important;
}
html[data-leisure-contrast="dark"] #appShell #menu #lo3-studio .lo3-phone :is(
  .lo3-phone-status,.lo3-phone-scroll,.lo3-phone-top,.lo3-menu-title,
  .lo3-product-details,.lo3-product-details strong,.lo3-product-price b
) {color:var(--lo3-text)!important}
html[data-leisure-contrast="dark"] #appShell #menu #lo3-studio .lo3-phone :is(
  .lo3-phone-top span,.lo3-product-details p,.lo3-search>span
) {color:var(--lo3-muted)!important}
html[data-leisure-contrast="dark"] #appShell #menu #lo3-studio .lo3-phone .lo3-search input::placeholder {
  color:var(--lo3-muted)!important;opacity:1;
}
html[data-leisure-contrast="dark"] #appShell #menu #lo3-studio .lo3-phone[data-scheme=light] {
  background:var(--lo3-bg)!important;color:var(--lo3-text)!important;
}
html[data-leisure-contrast="dark"] #appShell #menu #lo3-studio .lo3-phone .lo3-phone-status span {
  color:var(--lo3-text)!important;
}
html[data-leisure-contrast="dark"] #appShell #menu #lo3-studio .lo3-phone :is(
  .lo3-product,.lo3-phone-foot,.lo3-search,.lo3-call,.lo3-category:not(.selected)
) {background:var(--lo3-panel)!important;color:var(--lo3-text)!important}
html[data-leisure-contrast="dark"] #appShell #menu #lo3-studio .lo3-phone :is(
  .lo3-category.selected,.lo3-product-plus,.lo3-request
) {background:var(--lo3-accent)!important;color:#161b16!important;border-color:var(--lo3-accent)!important}
html[data-leisure-contrast="dark"] #appShell #menu #lo3-studio .lo3-phone .lo3-search input {
  background:transparent!important;color:var(--lo3-text)!important;border:0!important;
}
html[data-leisure-contrast="dark"] #appShell #menu #lo3-studio .lo3-phone .lo3-hero-text :is(
  .lo3-hero-label,.lo3-hero-title,.lo3-hero-description
) {color:#fff!important}
html[data-leisure-contrast="dark"] #appShell #menu #lo3-studio .lo3-phone .lo3-product-details small {
  color:var(--lo3-accent)!important;
}
/* The border and editor respond without any reload when root theme changes. */
@media(max-width:940px) {
  #appShell #menu #lo3-studio {padding:15px;margin:18px 0 28px}
}
@media print {
  #appShell #menu #lo3-studio {background:white!important;color:#101d17!important;border-color:#ccc!important}
}