/* ============================================================
   JewDIY Editor Layout Polish - 2026-08-22
   Conservative visual polish: colors, radius, spacing, consistency
   Does NOT override existing layout structure
   ============================================================ */

:root {
  --polish-radius-sm: 6px;
  --polish-radius-md: 10px;
  --polish-radius-lg: 14px;
  --polish-radius-pill: 999px;
  --polish-border: #e5e8e2;
  --polish-border-strong: #d1d6cd;
  --polish-bg: #faf9f5;
  --polish-bg-card: #ffffff;
  --polish-text: #1a2e22;
  --polish-text-secondary: #5a6b5f;
  --polish-text-muted: #8a968d;
  --polish-primary: #2d6a4f;
  --polish-primary-dark: #1b4332;
  --polish-primary-light: #e8f0eb;
}

/* ---------- Top Navigation Bar ---------- */
html[data-jewdiy-route="editor"] .topbar {
  background: var(--polish-bg) !important;
  border-bottom: 1px solid var(--polish-border) !important;
}

html[data-jewdiy-route="editor"] .topbar .top-actions button,
html[data-jewdiy-route="editor"] .topbar .top-actions select {
  border-radius: var(--polish-radius-pill) !important;
  border: 1px solid var(--polish-border-strong) !important;
  background: var(--polish-bg-card) !important;
}

html[data-jewdiy-route="editor"] .topbar #topCart {
  background: var(--polish-primary) !important;
  color: #fff !important;
  border-color: var(--polish-primary) !important;
}

/* ---------- Canvas Toolbar Buttons ---------- */
html[data-jewdiy-route="editor"] .canvas-toolbar button,
html[data-jewdiy-route="editor"] .canvas-toolbar select {
  border-radius: var(--polish-radius-md) !important;
  border: 1px solid var(--polish-border-strong) !important;
  background: var(--polish-bg-card) !important;
  color: var(--polish-text) !important;
  font-weight: 600 !important;
  transition: all 0.15s ease !important;
}

html[data-jewdiy-route="editor"] .canvas-toolbar button:hover:not(:disabled) {
  border-color: var(--polish-primary) !important;
  background: var(--polish-primary-light) !important;
}

html[data-jewdiy-route="editor"] .canvas-toolbar button[aria-pressed="true"],
html[data-jewdiy-route="editor"] .canvas-toolbar button.active {
  background: var(--polish-primary) !important;
  color: #fff !important;
  border-color: var(--polish-primary) !important;
}

html[data-jewdiy-route="editor"] .canvas-toolbar #autoFill {
  background: var(--polish-primary-dark) !important;
  color: #fff !important;
  border-color: var(--polish-primary-dark) !important;
}

/* ---------- Layout Toggle (均匀排布/自由粘连) ---------- */
html[data-jewdiy-route="editor"] .layout-toggle {
  padding: 3px !important;
  background: #eef1ec !important;
  border-radius: var(--polish-radius-md) !important;
  border: 1px solid var(--polish-border) !important;
  gap: 3px !important;
}

html[data-jewdiy-route="editor"] .layout-toggle button {
  border: none !important;
  background: transparent !important;
  border-radius: var(--polish-radius-sm) !important;
  color: var(--polish-text-secondary) !important;
}

html[data-jewdiy-route="editor"] .layout-toggle button[aria-pressed="true"] {
  background: var(--polish-bg-card) !important;
  color: var(--polish-primary-dark) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}

/* ---------- Canvas Card ---------- */
html[data-jewdiy-route="editor"] .canvas-card {
  border-radius: var(--polish-radius-lg) !important;
  border: 1px solid var(--polish-border) !important;
  background: var(--polish-bg-card) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}

/* ---------- Canvas Status Chips ---------- */
html[data-jewdiy-route="editor"] .canvas-status .detail-chip {
  border-radius: var(--polish-radius-pill) !important;
  background: rgba(255,255,255,0.94) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
  font-weight: 600 !important;
}

/* ---------- Canvas Zoom Pad - Fix text wrapping ---------- */
html[data-jewdiy-route="editor"] .canvas-zoom-pad {
  border-radius: var(--polish-radius-pill) !important;
  background: rgba(255,255,255,0.94) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}

html[data-jewdiy-route="editor"] body #builder.builder .canvas-zoom-pad button[data-canvas-fit],
html[data-jewdiy-route="editor"] #builder .canvas-zoom-pad button[data-canvas-fit],
html[data-jewdiy-route="editor"] .canvas-zoom-pad button[data-canvas-fit] {
  white-space: nowrap !important;
  min-width: 60px !important;
  width: auto !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  padding: 0 16px !important;
  border-radius: var(--polish-radius-pill) !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

/* ---------- Canvas Fullscreen Toggle ---------- */
html[data-jewdiy-route="editor"] .canvas-fullscreen-toggle {
  border-radius: 50% !important;
  background: rgba(255,255,255,0.94) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}

/* ---------- Generate Share Button ---------- */
html[data-jewdiy-route="editor"] #generateRealshotPreview {
  border-radius: var(--polish-radius-pill) !important;
  background: var(--polish-primary) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(45,106,79,0.3) !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

/* ---------- Canvas Length Control ---------- */
html[data-jewdiy-route="editor"] .canvas-length-control {
  border-radius: var(--polish-radius-lg) !important;
  border: 1px solid var(--polish-border) !important;
  background: var(--polish-bg-card) !important;
}

html[data-jewdiy-route="editor"] .canvas-length-control input[type="range"] {
  accent-color: var(--polish-primary) !important;
}

html[data-jewdiy-route="editor"] .canvas-length-control button {
  border-radius: var(--polish-radius-md) !important;
  border: 1px solid var(--polish-border-strong) !important;
  background: var(--polish-bg-card) !important;
}

/* ---------- Left Panel (Bead Library) ---------- */
html[data-jewdiy-route="editor"] .left-panel {
  border-radius: var(--polish-radius-lg) !important;
  border: 1px solid var(--polish-border) !important;
  background: var(--polish-bg-card) !important;
}

/* Tabs */
html[data-jewdiy-route="editor"] .left-panel .tabs {
  padding: 3px !important;
  background: #eef1ec !important;
  border-radius: var(--polish-radius-md) !important;
  gap: 3px !important;
}

html[data-jewdiy-route="editor"] .left-panel .tabs button {
  border: none !important;
  background: transparent !important;
  border-radius: var(--polish-radius-sm) !important;
  color: var(--polish-text-secondary) !important;
  font-weight: 600 !important;
}

html[data-jewdiy-route="editor"] .left-panel .tabs button.active {
  background: var(--polish-bg-card) !important;
  color: var(--polish-primary-dark) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}

/* Material Taxonomy */
html[data-jewdiy-route="editor"] .left-panel .material-taxonomy {
  background: var(--polish-bg) !important;
  border-radius: var(--polish-radius-md) !important;
  border: 1px solid var(--polish-border) !important;
}

html[data-jewdiy-route="editor"] .left-panel .taxonomy-pills .filter {
  border-radius: var(--polish-radius-pill) !important;
  border: 1px solid var(--polish-border-strong) !important;
  background: var(--polish-bg-card) !important;
  color: var(--polish-text-secondary) !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

html[data-jewdiy-route="editor"] .left-panel .taxonomy-pills .filter.active {
  background: var(--polish-primary) !important;
  color: #fff !important;
  border-color: var(--polish-primary) !important;
}

/* Size Selector Buttons */
html[data-jewdiy-route="editor"] .left-panel .size-options button {
  border-radius: var(--polish-radius-sm) !important;
  border: 1px solid var(--polish-border-strong) !important;
  background: var(--polish-bg-card) !important;
  color: var(--polish-text-secondary) !important;
  font-weight: 600 !important;
}

html[data-jewdiy-route="editor"] .left-panel .size-options button.active {
  background: var(--polish-primary) !important;
  color: #fff !important;
  border-color: var(--polish-primary) !important;
}

/* Search Bar */
html[data-jewdiy-route="editor"] .left-panel .search-bar input {
  border-radius: var(--polish-radius-md) !important;
  border: 1px solid var(--polish-border-strong) !important;
  background: var(--polish-bg-card) !important;
}

/* Product Cards */
html[data-jewdiy-route="editor"] .left-panel .product-card {
  border-radius: var(--polish-radius-md) !important;
  border: 1px solid var(--polish-border) !important;
  background: var(--polish-bg-card) !important;
  transition: all 0.15s ease !important;
}

html[data-jewdiy-route="editor"] .left-panel .product-card:hover {
  border-color: var(--polish-primary) !important;
  box-shadow: 0 4px 12px rgba(45,106,79,0.12) !important;
}

html[data-jewdiy-route="editor"] .left-panel .product-size-badge {
  border-radius: var(--polish-radius-pill) !important;
  background: var(--polish-primary) !important;
  color: #fff !important;
  font-weight: 700 !important;
}

html[data-jewdiy-route="editor"] .left-panel .product-card-price {
  color: var(--polish-primary) !important;
  font-weight: 700 !important;
}

html[data-jewdiy-route="editor"] .left-panel .detail-chip {
  border-radius: 50% !important;
  background: rgba(255,255,255,0.9) !important;
  border: 1px solid var(--polish-border) !important;
  color: var(--polish-primary) !important;
  font-weight: 700 !important;
}

/* ---------- Right Panel (Quote/Summary) ---------- */
html[data-jewdiy-route="editor"] .right-panel {
  border-radius: var(--polish-radius-lg) !important;
  border: 1px solid var(--polish-border) !important;
  background: var(--polish-bg-card) !important;
}

html[data-jewdiy-route="editor"] .right-panel .total strong {
  color: var(--polish-primary-dark) !important;
}

html[data-jewdiy-route="editor"] .right-panel .quote-assurance span {
  border-radius: var(--polish-radius-pill) !important;
  background: var(--polish-primary-light) !important;
  color: var(--polish-primary) !important;
  font-weight: 600 !important;
}

html[data-jewdiy-route="editor"] .right-panel .checkout button {
  border-radius: var(--polish-radius-md) !important;
  font-weight: 700 !important;
}

/* ---------- Quick Row Cards ---------- */
html[data-jewdiy-route="editor"] .quick-row > div {
  border-radius: var(--polish-radius-md) !important;
  border: 1px solid var(--polish-border) !important;
  background: var(--polish-bg) !important;
}

/* ---------- Share Buttons ---------- */
html[data-jewdiy-route="editor"] .share-buttons button {
  border-radius: var(--polish-radius-md) !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

/* ---------- Designer Sign Panel - Keep original layout ---------- */
/* Only add visual polish, don't change layout */
html[data-jewdiy-route="editor"] .designer-sign-panel {
  border-radius: var(--polish-radius-lg) !important;
  border: 1px solid var(--polish-border) !important;
  background: var(--polish-bg-card) !important;
}

html[data-jewdiy-route="editor"] .designer-sign-panel input,
html[data-jewdiy-route="editor"] .designer-sign-panel select {
  border-radius: var(--polish-radius-md) !important;
  border: 1px solid var(--polish-border-strong) !important;
}

html[data-jewdiy-route="editor"] .signature-preview {
  color: var(--polish-primary) !important;
}

/* ============================================================
   RESPONSIVE: Ensure touch targets on mobile
   ============================================================ */
@media (max-width: 540px) {
  html[data-jewdiy-route="editor"] .canvas-toolbar button,
  html[data-jewdiy-route="editor"] .canvas-toolbar select {
    min-height: 40px !important;
  }

  html[data-jewdiy-route="editor"] .left-panel .product-card {
    border-radius: var(--polish-radius-sm) !important;
  }

  html[data-jewdiy-route="editor"] .canvas-card,
  html[data-jewdiy-route="editor"] .left-panel,
  html[data-jewdiy-route="editor"] .right-panel,
  html[data-jewdiy-route="editor"] .designer-sign-panel {
    border-radius: var(--polish-radius-md) !important;
  }
}

/* ============================================================
   Accessibility: Focus states
   ============================================================ */
html[data-jewdiy-route="editor"] button:focus-visible,
html[data-jewdiy-route="editor"] select:focus-visible,
html[data-jewdiy-route="editor"] input:focus-visible {
  outline: 2px solid var(--polish-primary) !important;
  outline-offset: 2px !important;
}

/* ============================================================
   Share Buttons Layout Fix
   ============================================================ */
html[data-jewdiy-route="editor"] .share-buttons {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 8px !important;
  justify-content: stretch !important;
}

html[data-jewdiy-route="editor"] .share-buttons .share-heading {
  grid-column: 1 / -1 !important;
  order: 0 !important;
  margin-bottom: 4px !important;
}

html[data-jewdiy-route="editor"] .share-buttons button {
  width: 100% !important;
  justify-content: center !important;
}

/* ============================================================
   Wrist Sizing Layout - Remove duplicate inner circumference display
   ============================================================ */
html[data-jewdiy-route="editor"] .canvas-inner-label #canvasLengthValue {
  display: none !important;
}

html[data-jewdiy-route="editor"] .canvas-inner-label {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding-right: 4px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--muted) !important;
}

/* ============================================================
   Reduced Motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html[data-jewdiy-route="editor"] * {
    transition: none !important;
    animation: none !important;
  }
}