/* TCH Apparel Customizer - Compact UI Enhancement (neutral theme) */

/* Quick flag for debugging */
body { --tch-compact-loaded: true; }

/* Main app wrapper: inherit site typography, slightly compact */
#tch-customizer-app {
  font-family: inherit !important;
  font-size: 0.875rem !important;
  /* Warm palette overrides to avoid default blue/green */
  --tch-primary: #6b4a32;          /* mocha core */
  --tch-primary-dark: #4c321e;
  --tch-primary-light: #8a6245;
  --tch-primary-bg: rgba(107, 74, 50, 0.12);
  --tch-primary-soft: #e8d8cb;     /* light wash */
  --tch-border: #cbb7a2;           /* consistent border tone */
  --tch-text-on-dark: #fff5e1;
  --tch-success: #8a6245; /* mocha for “Back”/toggle */
}

/* Baseline text and surfaces */
#tch-customizer-app h1,
#tch-customizer-app h2,
#tch-customizer-app h3,
#tch-customizer-app p,
#tch-customizer-app label,
#tch-customizer-app span {
  color: var(--tch-text, #111827);
  border-color: var(--tch-border, #cbb7a2);
}
#tch-customizer-app .bg-white {
  background-color: var(--tch-surface, #ffffff);
}
#tch-customizer-app .border-gray-200,
#tch-customizer-app .border-gray-300,
#tch-customizer-app .border {
  border-color: var(--tch-border, #cbb7a2) !important;
}
#tch-customizer-app .text-gray-900,
#tch-customizer-app .text-gray-800,
#tch-customizer-app .text-gray-700 {
  color: var(--tch-text, #111827);
}
#tch-customizer-app .bg-blue-600,
#tch-customizer-app .bg-green-600 {
  background-color: var(--tch-primary, #6b4a32);
  border-color: var(--tch-primary, #6b4a32);
}
#tch-customizer-app .text-blue-700,
#tch-customizer-app .text-green-900 {
  color: var(--tch-primary, #6b4a32);
}

/* Header bar color */
.tch-customizer-root .max-w-4xl > .flex > .flex-1.flex.flex-col::before{
  /* match button gradient exactly */
  background: #35302b !important; /* match Choose Image button */
  color: var(--tch-text-on-dark, #fff5e1);
  border: 1px solid var(--tch-border, #cbb7a2);
}

/* Toggle pill (Back) */
.tch-customizer-root .space-y-1 .flex.items-center.justify-between.px-1\.5.py-1.rounded.border.transition-all.cursor-pointer .inline-flex,
.tch-customizer-root .space-y-1 .flex.items-center.justify-between.px-1\.5.py-1.rounded.border.transition-all.cursor-pointer div[style*="inline-flex"] {
  background-color: var(--tch-primary-soft, #e8d8cb) !important;
  border: 1px solid var(--tch-border, #cbb7a2) !important;
}
.tch-customizer-root .space-y-1 .flex.items-center.justify-between.px-1\.5.py-1.rounded.border.transition-all.cursor-pointer span[style*="background-color: #ffffff"] {
  background-color: #fdf7f1 !important;
}

/* Summary highlights */
.tch-customizer-root .flex.justify-between.items-center.rounded.px-2.py-1\.5.mt-1\.5,
.tch-customizer-root .flex.justify-between.items-center.text-sm.font-bold.rounded.px-2.py-1\.5 {
  background: var(--tch-primary-soft, #e8d8cb) !important;
  color: var(--tch-primary, #6b4a32) !important;
  border: 1px solid var(--tch-border, #cbb7a2) !important;
}

/* Normalize typography sizes */
#tch-customizer-app h1,
#tch-customizer-app h2 {
  font-size: 1rem;
  line-height: 1.3;
}
#tch-customizer-app h3 {
  font-size: 0.9rem;
  line-height: 1.25;
}
#tch-customizer-app p,
#tch-customizer-app label,
#tch-customizer-app button,
#tch-customizer-app input,
#tch-customizer-app select,
#tch-customizer-app textarea,
#tch-customizer-app span {
  font-size: 0.85rem;
  line-height: 1.4;
}

/* Compact cards */
#tch-customizer-app .border {
  padding: 0.5rem !important;
  border-radius: 0.375rem !important;
  background: #f6ede2; /* softened warm card tone */
}

/* Compact headings */
#tch-customizer-app h3 {
  font-size: 0.75rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  line-height: 1.2 !important;
}
#tch-customizer-app h2 {
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

/* Compact buttons */
#tch-customizer-app button {
  padding: 0.375rem 0.75rem !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
}

/* Labels */
#tch-customizer-app label {
  font-size: 0.625rem !important;
  font-weight: 700 !important;
}

/* Inputs/selects */
#tch-customizer-app input[type="text"],
#tch-customizer-app input[type="number"],
#tch-customizer-app input[type="range"],
#tch-customizer-app select {
  padding: 0.375rem 0.75rem !important;
  font-size: 0.875rem !important;
  background: #fff9f3 !important; /* lighter dropdown/input fill */
  border: 1px solid var(--tch-border, #cbb7a2) !important;
}

/* Paragraphs */
#tch-customizer-app p {
  font-size: 0.75rem !important;
  line-height: 1.4 !important;
}

/* Spans */
#tch-customizer-app span {
  font-size: 0.625rem !important;
}

/* Reduce vertical gaps */
#tch-customizer-app .space-y-1\.5 > * + *,
#tch-customizer-app .space-y-1 > * + *,
#tch-customizer-app .space-y-2 > * + * {
  margin-top: 0.25rem !important;
}

/* Compact grid gaps */
#tch-customizer-app .gap-1\.5,
#tch-customizer-app .gap-1,
#tch-customizer-app .gap-2 {
  gap: 0.25rem !important;
}

/* View buttons under mockup */
.tch-customizer-root .tch-view-btn {
  background: #7a6b60 !important;            /* lighter mocha for inactive state */
  color: #f4ede6 !important;
  border: 1px solid #bcb7b1 !important;      /* light outline */
  border-radius: 10px !important;
  box-shadow: 0 3px 6px rgba(0,0,0,0.18);
}
.tch-customizer-root .tch-view-btn--active {
  background: #35302b !important;            /* deep mocha */
  color: var(--tch-text-on-dark, #fff5e1) !important;
  border-color: #35302b !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.22);
}
.tch-customizer-root .tch-view-btn--inactive {
  opacity: 1;
}

/* Show area button */
.tch-customizer-root .tch-show-area-btn {
  background: #35302b !important;
  color: var(--tch-text-on-dark, #fff5e1) !important;
  border-color: #35302b !important;
  box-shadow: 0 6px 14px rgba(53, 48, 43, 0.25) !important;
}

/* Prioritize mockup visibility on small screens */
@media (max-width: 959px) {
  #tch-customizer-app .tch-mockup-stage {
    min-height: 520px;
  }
#tch-customizer-app .tch-controls-card,
  #tch-customizer-app .border {
    padding: 0.35rem !important;
  }
}

/* ============================================================
   TCH Customizer – Header + Stage Spacing (Codex Drop-In)
   GOAL:
   1) Add a left-side header bar that reads "TCH Customizer"
   2) Header height matches the first right-side card header
   3) Push the mockup/stage down so it sits under the new header
   NOTES:
   - CSS-only via ::before; no markup changes required.
   ============================================================ */

/* Tunables */
.tch-customizer-root{
  --tch-card-header-h: 40px;
  --tch-left-header-gap: 10px;
}

/* Target left panel column */
.tch-customizer-root .max-w-4xl > .flex > .flex-1.flex.flex-col{
  position: relative;
  padding-top: calc(var(--tch-card-header-h) + var(--tch-left-header-gap));
}

/* Header bar */
.tch-customizer-root .max-w-4xl > .flex > .flex-1.flex.flex-col::before{
  content: "TCH Customizer";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--tch-card-header-h);
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 10px;
  background: var(--tch-primary, #2E2B28);
  color: var(--tch-text-on-dark, #FFF5E1);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 12px;
  box-shadow: var(--tch-shadow-md, 0 6px 14px rgba(46, 43, 40, 0.25));
}

/* Stage spacing handled by padding-top; leave aspect box margin at 0 */
.tch-customizer-root .aspect-\[4\/5\]{
  margin-top: 0;
}

/* Mobile tuning */
@media (max-width: 767px){
  .tch-customizer-root{
    --tch-card-header-h: 38px;
    --tch-left-header-gap: 8px;
  }
}