/* CATNARA admin-design-runtime.css
   Consolidated in the exact former load order. No selector/declaration rewrites. */

/* SOURCE: public/css/p5/00-visual-cms.css */
/* =========================================================
   PHASE 5 — VISUAL CMS
   Three-pane editor: structure / live preview / inspector.
   ========================================================= */
.visual-cms-page{min-width:0}
.visual-cms-topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.visual-cms-topbar .admin-title{margin:0;flex:1}
.visual-cms-workspace{display:grid;grid-template-columns:190px minmax(0,1fr);gap:14px;align-items:start;min-width:0}
.visual-cms-workspace>.visual-cms-panel:last-child{grid-column:1 / -1}
.visual-cms-panel{border:1px solid #e4ddd8;border-radius:18px;background:#fff;box-shadow:0 10px 28px rgba(55,40,32,.035);overflow:hidden}
.visual-cms-panel-head{padding:16px 16px 12px;border-bottom:1px solid #eee7e2}
.visual-cms-panel-head small{display:block;font-size:9px;letter-spacing:.15em;color:#9a8174;text-transform:uppercase}
.visual-cms-panel-head b{display:block;margin-top:4px;font-size:15px;color:#302824}
.visual-cms-structure{padding:10px}
.visual-cms-section-btn{width:100%;display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:9px;padding:11px 10px;border:0;border-radius:12px;background:transparent;text-align:left;cursor:pointer;color:#4b403a}
.visual-cms-section-btn:hover{background:#f8f4f1}
.visual-cms-section-btn.active{background:#f3ece7;color:#2e2521}
.visual-cms-section-btn .num{display:grid;place-items:center;width:25px;height:25px;border:1px solid #e5d9d2;border-radius:8px;font-size:9px;color:#9b7f70;background:#fff}
.visual-cms-section-btn b{font-size:12px;font-weight:760}
.visual-cms-section-btn em{font-style:normal;font-size:9px;color:#9a8b84}
.visual-cms-note{margin:10px;padding:11px;border-radius:11px;background:#faf7f5;color:#7a6c65;font-size:10px;line-height:1.6}
.visual-cms-preview-panel{min-width:0;background:#ebe7e4}
.visual-cms-preview-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;background:#fff;border-bottom:1px solid #e5ddd8}
.visual-cms-device-group{display:flex;gap:6px}
.visual-cms-device-btn,.visual-cms-refresh{border:1px solid #e2d8d2;background:#fff;border-radius:9px;padding:8px 10px;font-size:10px;cursor:pointer;color:#655750}
.visual-cms-device-btn.active{background:#28211e;color:#fff;border-color:#28211e}
/* Visual CMS V2: three independent responsive viewport canvases.
   A 1280px desktop iframe is visually scaled, never reflowed as a phone. */
.visual-cms-preview-help{margin:0;padding:10px 16px 0;color:#76655c;font-size:11px;line-height:1.6}
.visual-cms-preview-toolbar{flex-wrap:wrap}
.visual-cms-preview-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.visual-cms-preview-stage{min-width:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:16px;align-items:start;overflow:visible;background:linear-gradient(135deg,#eeeae7,#e7e2de)}
.visual-cms-device-card{min-width:0;overflow:hidden;border:1px solid #ded0c7;border-radius:15px;background:#fff;box-shadow:0 7px 24px rgba(55,40,32,.08)}
.visual-cms-device-card[data-primary="true"]{grid-column:1/-1;order:-1;border-color:#ae8172;box-shadow:0 14px 33px rgba(55,40,32,.12)}
.visual-cms-device-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;background:#fff9f5;border-bottom:1px solid #eee1d9}
.visual-cms-device-head b,.visual-cms-device-head small{display:block}
.visual-cms-device-head b{font-size:12px;color:#46342d}
.visual-cms-device-head small{font-size:10px;color:#967d6e;margin-top:2px}
.visual-cms-device-head button{border:1px solid #dbbfb1;background:#fff;border-radius:9px;padding:6px 9px;font-size:10px;color:#5a453c;white-space:nowrap;cursor:pointer}
.visual-cms-device-card[data-primary="true"] .visual-cms-device-head button{background:#694b3d;color:#fff;border-color:#694b3d}
.visual-cms-preview-viewport{box-sizing:border-box;width:100%;min-width:0;display:flex;justify-content:center;align-items:flex-start;overflow:hidden;padding:13px 12px;background:linear-gradient(135deg,#f4eeea,#ebe5e0)}
.visual-cms-preview-window{position:relative;flex:0 0 auto;min-width:1px;min-height:1px;overflow:visible;border-radius:12px;box-shadow:0 5px 19px rgba(43,35,31,.14)}
.visual-cms-preview-frame{position:absolute;top:0;left:0;display:block;border:0;border-radius:10px;background:#fff;transform-origin:top left;max-width:none!important;max-height:none!important;transition:none!important}
.visual-cms-device-card[data-primary="false"] .visual-cms-preview-frame{pointer-events:none}
.visual-cms-device-btn:focus-visible,.visual-cms-device-head button:focus-visible{outline:2px solid #946457;outline-offset:2px}
.visual-cms-inspector{padding:14px}
.visual-cms-inspector .field{margin-bottom:12px}
.visual-cms-inspector .field label{font-size:10px;letter-spacing:.08em}
.visual-cms-inspector h4{margin:4px 0 13px;font-size:16px}
.visual-cms-inspector-copy{font-size:10.5px;line-height:1.65;color:#786a63;margin:-5px 0 14px}
.visual-cms-inspector-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.visual-cms-inspector-actions .btn{font-size:10px;padding:9px 11px}
.visual-cms-divider{height:1px;background:#eee5e0;margin:16px 0}
.visual-cms-badge{display:inline-flex;align-items:center;padding:5px 8px;border-radius:999px;background:#f4eee9;color:#8b7164;font-size:9px;letter-spacing:.06em;margin-bottom:9px}
.visual-cms-global-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.visual-cms-save-note{padding:10px 11px;border-radius:10px;background:#f8f4f1;color:#786a63;font-size:9.5px;line-height:1.55}
.visual-cms-legacy-link{display:flex;justify-content:flex-end;margin-top:12px}
@media(min-width:1760px){.visual-cms-workspace{grid-template-columns:190px minmax(0,1fr) 300px}.visual-cms-workspace>.visual-cms-panel:last-child{grid-column:auto}}
@media(max-width:980px){.visual-cms-workspace{grid-template-columns:minmax(0,1fr)}.visual-cms-workspace>.visual-cms-panel:last-child{grid-column:auto}.visual-cms-structure{display:flex;overflow-x:auto;gap:5px}.visual-cms-section-btn{min-width:160px}}
@media(max-width:560px){.visual-cms-preview-stage{grid-template-columns:minmax(0,1fr);gap:10px;padding:10px}.visual-cms-device-card[data-primary="true"]{grid-column:1}.visual-cms-preview-viewport{padding:9px}.visual-cms-topbar{flex-wrap:wrap}}

/* SOURCE: public/css/p5/90-regression-root-fixes.css */
/* =========================================================
   PHASE 5 — ROOT REGRESSION FIXES

   RULE 1: Grooming Process has one geometry authority.
   - the colored section owns full viewport width
   - the heading/grid own the bounded V6 content width
   - future phases must change tokens/variants, not section width directly

   RULE 2: Visit Salon outer panels inherit the active palette through
   transparency/semantic tokens; no hard-coded white frame.
   ========================================================= */

@media(min-width:901px){
  html[data-view-mode="public"][data-public-layout="classic"] #app .home-process-wide{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    padding-top:var(--v6-section-y)!important;
    padding-bottom:var(--v6-section-y)!important;
    padding-left:max(var(--v6-page-gutter),calc((100vw - var(--v6-container-home))/2))!important;
    padding-right:max(var(--v6-page-gutter),calc((100vw - var(--v6-container-home))/2))!important;
    border-radius:0!important;
  }
  html[data-view-mode="public"][data-public-layout="classic"] #app .home-process-wide>.section-head,
  html[data-view-mode="public"][data-public-layout="classic"] #app .home-process-wide>.salon-process{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:var(--v6-container-home)!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  html[data-view-mode="public"][data-public-layout="classic"] #app .home-process-wide .salon-process{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:var(--v6-process-gap)!important;
    overflow:visible!important;
  }
  html[data-view-mode="public"][data-public-layout="classic"] #app .home-process-wide .salon-step{
    min-width:0!important;
    min-height:var(--v6-process-card-min)!important;
    padding:var(--v6-process-card-py) var(--v6-process-card-px)!important;
  }
}

/* Palette-aware Visit Salon: blend with the current page instead of a white card. */
html[data-view-mode="public"][data-public-layout="classic"] #app .home-lower-compact .salon-location>.salon-map,
html[data-view-mode="public"][data-public-layout="classic"] #app .home-lower-compact .salon-location>.salon-location-info{
  border:0!important;
  box-shadow:none!important;
  outline:0!important;
  background:transparent!important;
}
html[data-view-mode="public"][data-public-layout="classic"] #app .home-lower-compact .salon-location-info dl>div{
  border-color:color-mix(in srgb,var(--ui-line) 88%,transparent)!important;
}
html[data-view-mode="public"][data-public-layout="classic"] #app .home-lower-compact .salon-location-info .btn.secondary{
  background:color-mix(in srgb,var(--ui-bg) 88%,var(--ui-surface) 12%)!important;
  color:var(--ui-text)!important;
  border-color:var(--ui-line)!important;
}

/* SOURCE: public/css/p6/00-draft-publish.css */
/* =========================================================
   PHASE 6 — DRAFT / PREVIEW / PUBLISH / REVISION
   ========================================================= */
.visual-cms-publishbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 14px;padding:13px 15px;border:1px solid #e1dad5;border-radius:15px;background:#fff;box-shadow:0 8px 22px rgba(54,42,35,.03)}
.visual-cms-publishbar.has-draft{border-color:#d8b77b;background:#fffaf0}
.visual-cms-publishbar.is-published{border-color:#cfded5;background:#f8fcf9}
.visual-cms-publish-status{display:flex;align-items:center;gap:10px;min-width:0}
.visual-cms-publish-status>div{min-width:0}
.visual-cms-publish-status b{display:block;font-size:12px;color:#342a25}
.visual-cms-publish-status small{display:block;margin-top:3px;font-size:9.5px;color:#81736c;white-space:normal}
.visual-cms-state-dot{width:10px;height:10px;border-radius:50%;background:#8ba895;box-shadow:0 0 0 4px rgba(139,168,149,.13);flex:0 0 auto}
.visual-cms-publishbar.has-draft .visual-cms-state-dot{background:#b98a3f;box-shadow:0 0 0 4px rgba(185,138,63,.13)}
.visual-cms-publish-actions{display:flex;align-items:center;gap:7px;flex:0 0 auto}
.visual-cms-publish-actions .btn{font-size:10px;padding:9px 12px}
.visual-cms-publish-actions .btn:disabled{opacity:.42;cursor:not-allowed}
.visual-cms-preview-actions{display:flex;align-items:center;gap:8px}
.visual-cms-draft-badge{display:inline-flex;align-items:center;border:1px solid #d7b779;background:#fff8e8;color:#8b652d;border-radius:999px;padding:6px 9px;font-size:8px;font-weight:800;letter-spacing:.1em}
.visual-cms-revisions h4{margin-bottom:6px}
.visual-cms-revision-list{display:grid;gap:7px}
.visual-cms-revision{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 9px 9px 10px;border:1px solid #ece3de;border-radius:10px;background:#fcfaf8}
.visual-cms-revision>div{min-width:0}
.visual-cms-revision b{display:block;font-size:9.5px;color:#4a3e38}
.visual-cms-revision small{display:block;margin-top:3px;color:#95837a;font-size:8px;line-height:1.35;overflow-wrap:anywhere}
.visual-cms-revision .btn{font-size:8px;padding:7px 8px;white-space:nowrap}
@media(max-width:760px){.visual-cms-publishbar{align-items:flex-start;flex-direction:column}.visual-cms-publish-actions{width:100%}.visual-cms-publish-actions .btn{flex:1}.visual-cms-draft-badge{display:none}}


/* Admin completed-reservation pager: migrated out of public PC CSS. */
/* Administrator completed-reservation pager: compact and touch accessible. */
.admin-reservation-pages{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:14px;padding:10px 4px}
.admin-reservation-pages>div{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.admin-reservation-pages button{min-width:36px;min-height:36px;border-radius:9px;font-weight:800}
.admin-reservation-pages button.active,.admin-reservation-pages button[aria-current="page"]{background:var(--ui-text,#473734);border-color:var(--ui-text,#473734);color:var(--ui-surface,#fff)}
.admin-reservation-pages-gap{color:var(--ui-muted,#82746f);padding:0 3px}
@media(max-width:720px){.admin-reservation-pages{align-items:flex-start;flex-direction:column}.admin-reservation-pages>div{gap:5px}}