:root{ --zebra-font: "Oswald", sans-serif; }
/* zebra-planner-planner.css */
/* Purpose: Styles for the Zebra floor planner UI, with a dark theme and responsive panel layout. */
/* Section: CSS Custom Properties (theme tokens) */

/* Theme tokens */

:root {
  --zebra-surface: #111;
  --zebra-raised: #171717;
  --zebra-border: #2a2a2a;
  --zebra-accent: #b8231a; 
  --zebra-ok: #b8231a;
  --zebra-text: #f5f5f5;
}

/* THEME VARIANTS */
body.theme-dark {
  --zebra-surface: #111;
  --zebra-raised: #171717;
  --zebra-border: #2a2a2a;
  --zebra-text: #f5f5f5;
  --zebra-accent: #b8231a;
}
body.theme-light {
  --zebra-surface: #ffffff;
  --zebra-raised: #f7f7f7;
  --zebra-border: #d9d9d9;
  --zebra-text: #0f0f0f;
  --zebra-accent: #b8231a;
}
/* App-wide surfaces */
html, body {
  background: var(--zebra-surface);
  color: var(--zebra-text);
}
.zebra-panel, .zebra-card, .zebra-toolbar, .zebra-viewport, .zebra-step-body {
  
  color: var(--zebra-text);
  border-color: var(--zebra-border);
}
/* Inputs */
input, select, textarea {
  
  color: var(--zebra-text);
  border-color: var(--zebra-border);
}
/* Buttons */
button, .zebra-btn {
  color: var(--zebra-text);
  border-color: var(--zebra-border);
}



/* Layout: container */
.zebra-planner, .zebra-floor { font-family: var(--zebra-font); margin: 40px 0; color: var(--zebra-text); }
/* Layout: grid */
.zebra-grid { display:grid; grid-template-columns:minmax(320px,420px) 1fr; gap:24px; }
/* Panel styling */
.zebra-panel { background:var(--zebra-surface); border-radius:12px; padding:16px; position:sticky; top:20px; height:fit-content; }
.zebra-title { margin:0 0 8px; font-weight:700; }

/* Collapsible step */
.zebra-step,
.zebra-step-static {
  border:1px solid var(--zebra-border);
  border-radius:10px;
  margin:10px 0;
  background:var(--zebra-raised);
}
/* Collapsible step */
.zebra-step-summary { display:flex; align-items:center; gap:10px; padding:12px 14px; cursor:pointer; list-style:none; }
/* Collapsible step */
.zebra-step-summary::-webkit-details-marker { display:none; }
/* Collapsible step */
.zebra-step-num { width:22px; height:22px; border-radius:999px; display:inline-grid; place-items:center; background:var(--zebra-accent); color:#111; font-weight:700; font-size:12px; }
/* Collapsible step */
.zebra-step-body { padding:12px 14px 16px; border-top:1px solid var(--zebra-border); }

.zebra-field { display:grid; grid-template-columns:1fr 140px; gap:10px; align-items:center; margin:10px 0; }
.zebra-field input { padding:8px 10px; border-radius:8px; border:1px solid #333; background:#0b0b0b; color:#fff; }


.zebra-btn, 
.zebra-button {
  background: #911a14;
  color: #fff;
  border: none;
  border-radius: 0;
  padding: 8px 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
}

.zebra-btn:hover, 
.zebra-button:hover {
  background: #b8231a;
}

.zebra-btn[aria-pressed="true"], 
.zebra-button[aria-pressed="true"] {
  background: var(--zebra-accent);
  box-shadow: inset 0 0 0 2px #fff3;
}


.zebra-variant-group { margin:10px 0; }
.zebra-variant-label { font-size:12px; text-transform:uppercase; opacity:.7; margin-bottom:6px; }
.zebra-swatches, .zebra-buttons { display:flex; flex-wrap:wrap; gap:10px; }
.zebra-swatch-wrap { display:flex; flex-direction:column; align-items:center; width:64px; }
.zebra-swatch {
  width:48px;
  height:48px;
  border-radius:0;
  border:1px solid #444;
  cursor:pointer;
  transition: background 0.2s, box-shadow 0.2s, border-color 0.2s, filter 0.2s;
}
.zebra-swatch-label {
  margin-top:4px;
  font-size:11px;
  text-align:center;
  word-wrap:break-word;
  line-height:1.2;
}
.zebra-swatch:hover { filter: brightness(0.9); }
.zebra-swatch[aria-pressed="true"] {
  background-color: transparent !important;
  border-color: var(--zebra-accent);
  box-shadow: inset 0 0 0 2px #fff3;
}


#matBreakdown div { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:13px; }


.zebra-viewport {
  position:relative;
  background:#0b0b0b;
  border:1px solid var(--zebra-border);
  border-radius:12px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  height: calc(100vh - 120px); 
  max-height: 90vh;
  min-height: 420px;
}
.zebra-canvas { width:100%; height:100%; display:block; }


.zebra-tabs { display:flex; border-bottom:1px solid var(--zebra-border); background:#0009; }
.zebra-tab {
  flex:1;
  padding:10px;
  text-align:center;
  cursor:pointer;
  background:none;
  border:none;
  color:var(--zebra-text);
  font-weight:600;
  transition: background 0.2s;
}
.zebra-tab:hover { background:#222; }
.zebra-tab.active { background:#333; border-bottom:2px solid var(--zebra-accent); }
.zebra-tab-content { display:none; flex:1; 
  position: relative;
}
.zebra-tab-content.active { display:block; height:100%; }


.zebra-view-controls {
  position:absolute;
  bottom: 8px;
  right: 8px;
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  z-index:5;
}

.zebra-ghost-btn {
  background:#0009;
  color:#fff;
  border:1px solid #ffffff24;
  border-radius:8px;
  padding:6px 10px;
  backdrop-filter:saturate(1.2) blur(4px);
  cursor:pointer;
  font-size:13px;
  min-width:70px;
  text-align:center;
  transition: background 0.2s, border-color 0.2s;
}
.zebra-ghost-btn:hover { background:#111a; border-color:#fff6; }

.zebra-toast {
  position:fixed;
  bottom:16px;
  left:50%;
  transform:translateX(-50%);
  background:#000e;
  padding:8px 16px;
  border-radius:8px;
  font-size:13px;
  color:#fff;
  display:none;
}
.zebra-toast[hidden] { display:none; }

@media (max-width: 980px) {
  /* Layout: grid */
.zebra-grid { grid-template-columns:1fr; }
  /* Panel styling */
.zebra-panel { position:static; }
}
.zebra-canvas { height: 100%; }


.zebra-product-group {
  border: 1px solid var(--zebra-border);
  border-radius: 8px;
  margin: 8px 0;
  
  overflow: hidden;
}

.zebra-product-group summary.zebra-product-title {
  padding: 10px 14px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.zebra-product-group summary.zebra-product-title::-webkit-details-marker {
  display: none;
}

.zebra-product-group summary.zebra-product-title::after {
  content: "▸";
  font-size: 12px;
  transition: transform 0.2s;
}

.zebra-product-group[open] summary.zebra-product-title::after {
  transform: rotate(90deg);
}

.zebra-product-body {
  padding: 12px 14px;
  border-top: 1px solid var(--zebra-border);
}


.zebra-no-room,
.zebra-no-selection {
  padding: 12px;
  
  border: 1px dashed var(--zebra-border);
  border-radius: 6px;
  font-size: 0.9rem;
  color: var(--zebra-text);
  text-align: center;
  margin-bottom: 10px;
}

.zebra-current-mat {
  padding: 8px 10px;
  background: var(--zebra-surface);
  border-radius: 4px;
  margin-bottom: 10px;
}

.zebra-mat-list {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
}
.zebra-mat-list li {
  margin-bottom: 4px;
  padding: 4px 6px;
  
  border-radius: 4px;
}


#matBreakdown > div {
  white-space: normal;      
  overflow: visible;
  text-overflow: initial;
}

#matBreakdown table {
  width: 95%;
  border-collapse: collapse;
  margin: 6px 0 10px 1em;
  font-size: 13px;
}

#matBreakdown th,
#matBreakdown td {
  padding: 4px 8px;
  border-bottom: 1px solid var(--zebra-border);
}

#matBreakdown th {
  text-align: left;
  font-weight: 600;
}

#matBreakdown td:last-child {
  text-align: right;
  font-weight: 600;
  color: var(--zebra-ok);
}

#matBreakdown tr:last-child td {
  border-bottom: none;
}


details/* Collapsible step */
.zebra-step .zebra-step-body {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s ease;
}

details/* Collapsible step */
.zebra-step[open] .zebra-step-body {
  max-height: 2000px; 
}




.zebra-ghost-btn svg { vertical-align: middle; }


/* End of stylesheet */


/*  overrides */
html, body {
  background: #000 !important;
  color: #e5e7eb;
  
}
.zebra-planner, .zebra-grid, .zebra-viewport, .zebra-panel {
  background: #000 !important;
}
.zebra-panel {
  border-color: #1f2937 !important;
}
.zebra-tab-content {
  background: #000 !important;

  position: relative;
}
canvas {
  background: #000 !important;
}
.zebra-btn, .zebra-button, .zebra-ghost-btn {
  
}

/* : remove dotted focus outlines on product swatches */
.zebra-swatch{ outline: none !important; box-shadow: none !important; }
.zebra-swatch:focus, .zebra-swatch:focus-visible{ outline: none !important; box-shadow: none !important; }

/* : place canvas controls on the right side */


/* : move canvas controls to bottom-right */


/* : canvas controls aligned horizontally at bottom-right */
.zebra-view-tools-left{
  position:absolute !important;
  right:12px !important;
  bottom:12px !important;
  left:auto !important;
  top:auto !important;
  display:flex !important;
  flex-direction: row !important;
  gap:10px !important;
  align-items:center;
  z-index:5;
}
.zebra-view-tools-left .zebra-ghost-btn{ display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:36px; }

/* : room action buttons layout */
.zebra-room-actions{ display:flex; gap:10px; align-items:center; justify-content:flex-start; margin:8px 0 0 0; padding-left:0 !important; }
#clearBtn, #createRoomBtn{ white-space:nowrap; }

/* : ensure tab bar stays on top of viewport column without altering colors */
.zebra-tabs{order:0}
.zebra-tab-content{order:1
  position: relative;
}

.zebra-viewport #noRoomMsg, #noRoomMsg{font-size:0.6em !important;}

#autoFillBtn{ position:absolute; left:12px; bottom:12px; z-index:7; }


/* --- Shopify-style product controls (square swatches + buttons) --- */
.zebra-variant-group { margin: 10px 0; }
.zebra-variant-label { font-size: 12px; text-transform: uppercase; opacity: .7; margin-bottom: 6px; }
.zebra-swatches, .zebra-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.zebra-swatch-wrap { display: flex; flex-direction: column; align-items: center; width: 64px; }
.zebra-swatch {
  width: 48px; height: 48px;
  border-radius: 0;
  border: 1px solid #444;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s, border-color 0.2s, filter 0.2s;
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.zebra-swatch-label {
  margin-top: 4px; font-size: 11px; text-align: center; word-wrap: break-word; line-height: 1.2;
}
.zebra-swatch:hover { filter: brightness(0.9); }
.zebra-swatch[aria-pressed="true"] {
  background-color: transparent !important;
  border-color: var(--zebra-accent, #b8231a);
  box-shadow: inset 0 0 0 2px #fff3;
}
.zebra-buttons .zebra-button {
  background: #911a14; color: #fff; border: none; border-radius: 0; padding: 6px 10px; font-weight: 600; cursor: pointer;
}
.zebra-buttons .zebra-button[aria-pressed="true"] {
  background: var(--zebra-accent, #b8231a);
  box-shadow: inset 0 0 0 2px #fff3;
}


#noRoomMsg, .no-room-msg, .zebra-canvas-hint { font-size: 0.6em !important; }

.nesw-btn, .nesw-button { background:#911a14; color:#fff; border:none; padding:6px 10px; }


/* toolbar placement (no color changes) */
.zebra-viewport { position: relative; }
.zebra-view-tools-left, .zebra-view-tools-right {
  position: absolute;
  bottom: 8px;
  display: flex;
  gap: 6px;
}
.zebra-view-tools-left { left: 8px; }
.zebra-view-tools-right { right: 8px; }


/* : correct toolbar anchors */
.zebra-viewport { position: relative; }
.zebra-view-tools-left, .zebra-view-tools-right {
  position: absolute !important;
  bottom: 8px !important;
  display: flex;
  gap: 6px;
}
.zebra-view-tools-left { left: 8px !important; right: auto !important; }
.zebra-view-tools-right { right: 8px !important; left: auto !important; }

/* __ANTI_DRIFT__ */
.zebra-tab-content{min-height:0; overflow:hidden;
  position: relative;
}
#floorCanvas2D, #wallsCanvas2D, #floorCanvas3D{position:relative; overflow:hidden;}


/* Theme toggle (minimal): default dark assumed. */
body.theme-light { background:#ffffff; color:#000000; }
body.theme-light .zebra-panel,
body.theme-light .zebra-viewport,
body.theme-light .zebra-tab-content { background:#ffffff; color:#000000; }

body.theme-dark { background:#000000; color: var(--zebra-text); }



/* THEME SURFACE REINFORCEMENT (no layout changes) */
html, body { background: var(--zebra-surface); color: var(--zebra-text); }
.zebra-root, .zebra-wrap, .zebra-main, .zebra-content { background: var(--zebra-surface); color: var(--zebra-text); }
.zebra-panel, .zebra-card, .zebra-toolbar, .zebra-viewport {  color: var(--zebra-text); border-color: var(--zebra-border); }
#floorCanvas2D, #wallsCanvas2D, canvas.zebra-canvas { background: var(--zebra-surface) !important; }
.zebra-tabs, .zebra-tabbar {  color: var(--zebra-text); border-color: var(--zebra-border); }
.zebra-rightbar, .zebra-leftbar {  color: var(--zebra-text); border-color: var(--zebra-border); }



/* FIX: Ensure step-static rounded corners visible by making step-body background transparent */
.zebra-step-body { background: transparent !important; }

.logo-preview img{max-width:80%;max-height:80%;object-fit:contain;margin:10% auto;display:block}

.logo-library{display:grid;grid-template-columns:repeat(auto-fill,48px);gap:6px;margin-top:8px}
.logo-thumb{width:48px;height:48px;border:1px solid var(--line);background:#777;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:6px}
.logo-thumb img{max-width:90%;max-height:90%;object-fit:contain;display:block}
.logo-thumb.active{outline:2px solid var(--accent, #888);}


/*  view-only cosmetic tweaks */
body.zebra-view-only .zebra-viewport {
  /* could add subtle border or background if desired */
}


/* Small circular info button in step headers */
.zebra-step-info {
  margin-left: auto;
  color: #911a14;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  background: #ffffff;
  padding: 0;
  cursor: pointer;
}
.zebra-step-info:hover {
  background: rgba(0,0,0,0.03);
}


/* Hide 3D wall shade toggle by default; shown via Z.switchTab when 3D tab active */
#wallShadeToggleBtn { display: none; }


.zebra-share-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.zebra-share-icon svg {
  display: block;
}


.zebra-share-button svg path {
  fill:#fff;
}


.zebra-info-btn{
  color:#911a14;
  width:22px;
  height:22px;
  border-radius:50%;
  border:1px solid rgba(0,0,0,0.25);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  line-height:1;
  background:#ffffff;
  padding:0;
  cursor:pointer;
}


#outlineToggle3DBtn {
  filter: grayscale(1);
}

/* Wall outline mini panel */
.zebra-wall-outline-mini {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 180px;
  padding: 6px 6px 4px 6px;
  box-sizing: border-box;
  background: var(--zebra-surface);
  border: 1px solid var(--zebra-border);
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.6);
  overflow: hidden;
  pointer-events: auto;
}

.zebra-wall-outline-mini-header {
  font-size: 11px;
  font-weight: 500;
  color: var(--zebra-text);
  margin-bottom: 2px;
}

.zebra-wall-outline-mini-caption {
  font-size: 10px;
  color: var(--zebra-text);
  opacity: 0.75;
  margin-bottom: 4px;
}

.zebra-wall-outline-mini-canvas {
  display: block;
  width: 100%;
  height: auto;
}


/* 3D-only controls: hidden by default; switchTab('3d') shows them */
#wallShadeToggleBtn,
#outlineToggle3DBtn {
  display: none;
}