/* ==========================================================================
   SAMSEL DJ Engine Pro
   Production Camo Button Stack System
   Version: 10008

   Requirements:
   - PNGs served by FastAPI at:
       /camo/stack_1.png
       /camo/stack_2.png
       ...
       /camo/stack_7.png

   - camo-buttons.js assigns:
       data-camo-stack="1" ... data-camo-stack="7"

   Notes:
   - This file uses direct image URLs only.
   - No --camo-bg-* variables.
   - No duplicate patch blocks.
   - Designed to override the large embedded button backgrounds in index.html.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Base camo button targets
   -------------------------------------------------------------------------- */

html .camo-ui-root button[data-camo-stack],
html .camo-ui-root .btn[data-camo-stack],
html .camo-ui-root .tab[data-camo-stack],
html .camo-ui-root label.btn-file[data-camo-stack],
html .camo-ui-root .filebtn[data-camo-stack],
html .camo-ui-root input[type="button"][data-camo-stack],
html .camo-ui-root input[type="submit"][data-camo-stack] {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;

  background-color: #3f4a31 !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-blend-mode: overlay, normal !important;

  color: #fff7dc !important;
  text-shadow:
    0 1px 2px rgba(0,0,0,.95),
    0 0 7px rgba(0,0,0,.90) !important;

  border-color: rgba(220, 230, 190, .22) !important;
}


/* --------------------------------------------------------------------------
   Direct stack mapping
   These rules intentionally use direct URLs so stack_N always matches the
   actual /camo/stack_N.png file you tested in the browser.
   -------------------------------------------------------------------------- */

html .camo-ui-root [data-camo-stack="1"] {
  /* Woodland M81 */
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.26), rgba(0,0,0,.18)),
    url("/camo/stack_1.png?v=10008") !important;
}

html .camo-ui-root [data-camo-stack="2"] {
  /* Desert DCU */
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.26), rgba(0,0,0,.18)),
    url("/camo/stack_2.png?v=10008") !important;
}

html .camo-ui-root [data-camo-stack="3"] {
  /* MultiCam */
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.26), rgba(0,0,0,.18)),
    url("/camo/stack_3.png?v=10008") !important;
}

html .camo-ui-root [data-camo-stack="4"] {
  /* Urban ACU */
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.26), rgba(0,0,0,.18)),
    url("/camo/stack_4.png?v=10008") !important;
}

html .camo-ui-root [data-camo-stack="5"] {
  /* Tiger Stripe */
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.26), rgba(0,0,0,.18)),
    url("/camo/stack_5.png?v=10008") !important;
}

html .camo-ui-root [data-camo-stack="6"] {
  /* Digital Woodland */
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.26), rgba(0,0,0,.18)),
    url("/camo/stack_6.png?v=10008") !important;
}

html .camo-ui-root [data-camo-stack="7"] {
  /* Arctic Snow */
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.26), rgba(0,0,0,.18)),
    url("/camo/stack_7.png?v=10008") !important;
}


/* --------------------------------------------------------------------------
   Fallback before JS assigns data-camo-stack
   -------------------------------------------------------------------------- */

html .camo-ui-root button:not([data-camo-stack]),
html .camo-ui-root .btn:not([data-camo-stack]),
html .camo-ui-root .tab:not([data-camo-stack]),
html .camo-ui-root label.btn-file:not([data-camo-stack]),
html .camo-ui-root input[type="button"]:not([data-camo-stack]),
html .camo-ui-root input[type="submit"]:not([data-camo-stack]) {
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.24), rgba(0,0,0,.18)),
    url("/camo/stack_1.png?v=10008") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}


/* --------------------------------------------------------------------------
   Glass shine overlay
   -------------------------------------------------------------------------- */

html .camo-ui-root button[data-camo-stack]::after,
html .camo-ui-root .btn[data-camo-stack]::after,
html .camo-ui-root .tab[data-camo-stack]::after,
html .camo-ui-root label.btn-file[data-camo-stack]::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.22) 0%,
      rgba(255,255,255,.06) 20%,
      rgba(0,0,0,.10) 100%
    ) !important;
}


/* --------------------------------------------------------------------------
   Readable text plate
   Works with:
     <button><span class="camo-label-text">Play</span></button>
   -------------------------------------------------------------------------- */

html .camo-ui-root .camo-label-text {
  position: relative !important;
  z-index: 2 !important;

  display: inline-block !important;
  max-width: 100% !important;

  padding: 3px 10px !important;
  border-radius: 7px !important;

  color: #fff7dc !important;
  background:
    linear-gradient(180deg, rgba(20,25,18,.78), rgba(5,8,4,.68)) !important;
  border: 1px solid rgba(255,255,255,.18) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.32),
    0 2px 7px rgba(0,0,0,.45) !important;

  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;

  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}


/* Keep direct child content above overlay */

html .camo-ui-root button[data-camo-stack] > *:not(input[type="file"]),
html .camo-ui-root .btn[data-camo-stack] > *:not(input[type="file"]),
html .camo-ui-root .tab[data-camo-stack] > *:not(input[type="file"]),
html .camo-ui-root label.btn-file[data-camo-stack] > *:not(input[type="file"]) {
  position: relative !important;
  z-index: 2 !important;
}


/* --------------------------------------------------------------------------
   Semantic button colors: text only, not background
   Background must remain camo.
   -------------------------------------------------------------------------- */

html .camo-ui-root :is(button.btn-a, .btn-a)[data-camo-stack] {
  color: #fff7dc !important;
}

html .camo-ui-root :is(button.btn-b, .btn-b)[data-camo-stack] {
  color: #f5ffe9 !important;
}

html .camo-ui-root :is(button.btn-success, .btn-success)[data-camo-stack] {
  color: #f8ffe8 !important;
}

html .camo-ui-root :is(button.btn-warn, .btn-warn)[data-camo-stack] {
  color: #fff8df !important;
}

html .camo-ui-root :is(button.btn-danger, .btn-danger)[data-camo-stack] {
  color: #fff2ec !important;
}

html .camo-ui-root :is(button.btn-neutral, .btn-neutral, .samsel-web-desktop-btn)[data-camo-stack] {
  color: #f4f6eb !important;
}


/* --------------------------------------------------------------------------
   Box shadows / 3D button depth
   -------------------------------------------------------------------------- */

html .camo-ui-root button[data-camo-stack],
html .camo-ui-root .btn[data-camo-stack],
html .camo-ui-root .tab[data-camo-stack],
html .camo-ui-root label.btn-file[data-camo-stack],
html .camo-ui-root input[type="button"][data-camo-stack],
html .camo-ui-root input[type="submit"][data-camo-stack] {
  box-shadow:
    0 5px 0 #252b1e,
    0 8px 16px rgba(0,0,0,.32),
    inset 0 0 0 1px rgba(255,255,255,.08),
    inset 1px 1px 0 rgba(255,255,255,.18),
    inset -1px -1px 0 rgba(0,0,0,.30) !important;
}


/* Class-specific glow accents without replacing camo */

html .camo-ui-root :is(button.btn-a, .btn-a)[data-camo-stack] {
  box-shadow:
    0 5px 0 #3d3424,
    0 0 16px rgba(196,168,130,.25),
    0 8px 16px rgba(0,0,0,.32),
    inset 1px 1px 0 rgba(255,255,255,.18),
    inset -1px -1px 0 rgba(0,0,0,.30) !important;
}

html .camo-ui-root :is(button.btn-b, .btn-b)[data-camo-stack] {
  box-shadow:
    0 5px 0 #1e2a18,
    0 0 16px rgba(95,125,82,.30),
    0 8px 16px rgba(0,0,0,.32),
    inset 1px 1px 0 rgba(255,255,255,.18),
    inset -1px -1px 0 rgba(0,0,0,.30) !important;
}

html .camo-ui-root :is(button.btn-success, .btn-success)[data-camo-stack] {
  box-shadow:
    0 5px 0 #1e2a14,
    0 0 16px rgba(122,154,72,.28),
    0 8px 16px rgba(0,0,0,.32),
    inset 1px 1px 0 rgba(255,255,255,.18),
    inset -1px -1px 0 rgba(0,0,0,.30) !important;
}

html .camo-ui-root :is(button.btn-warn, .btn-warn)[data-camo-stack] {
  box-shadow:
    0 5px 0 #3a3220,
    0 0 16px rgba(201,176,110,.28),
    0 8px 16px rgba(0,0,0,.32),
    inset 1px 1px 0 rgba(255,255,255,.18),
    inset -1px -1px 0 rgba(0,0,0,.30) !important;
}

html .camo-ui-root :is(button.btn-danger, .btn-danger)[data-camo-stack] {
  box-shadow:
    0 5px 0 #2a1812,
    0 0 16px rgba(166,92,66,.30),
    0 8px 16px rgba(0,0,0,.32),
    inset 1px 1px 0 rgba(255,255,255,.18),
    inset -1px -1px 0 rgba(0,0,0,.30) !important;
}

html .camo-ui-root :is(button.btn-neutral, .btn-neutral, .samsel-web-desktop-btn)[data-camo-stack] {
  box-shadow:
    0 5px 0 #1a1e16,
    0 0 12px rgba(180,190,160,.12),
    0 8px 16px rgba(0,0,0,.32),
    inset 1px 1px 0 rgba(255,255,255,.16),
    inset -1px -1px 0 rgba(0,0,0,.30) !important;
}


/* --------------------------------------------------------------------------
   Inline toolbar buttons
   -------------------------------------------------------------------------- */

html .camo-ui-root .btn-inline[data-camo-stack] {
  width: auto !important;
  flex: 0 0 auto !important;
  background-size: cover !important;
  background-position: center !important;
}

html .camo-ui-root .btn-inline[data-camo-stack] .camo-label-text {
  padding: 3px 8px !important;
  border-radius: 6px !important;
  font-size: .95em !important;
}


/* --------------------------------------------------------------------------
   Cue buttons
   -------------------------------------------------------------------------- */

html .camo-ui-root button.btn-cue[data-camo-stack],
html .camo-ui-root .btn.btn-cue[data-camo-stack] {
  background-size: cover !important;
  background-position: center !important;
  border-radius: 50% !important;
}

html .camo-ui-root button.btn-cue[data-camo-stack] .camo-label-text,
html .camo-ui-root .btn.btn-cue[data-camo-stack] .camo-label-text {
  padding: 1px 4px !important;
  border-radius: 999px !important;
  font-size: .86em !important;
  line-height: 1 !important;
}


/* --------------------------------------------------------------------------
   Tabs
   -------------------------------------------------------------------------- */

html .camo-ui-root .tab[data-camo-stack] {
  background-size: cover !important;
  background-position: center !important;
}

html .camo-ui-root .tab[data-camo-stack].active,
html .camo-ui-root .tab[data-camo-stack][aria-selected="true"] {
  filter: brightness(1.12) saturate(1.12) !important;
}


/* --------------------------------------------------------------------------
   Interaction states
   -------------------------------------------------------------------------- */

html .camo-ui-root [data-camo-stack]:hover {
  filter: brightness(1.08) saturate(1.08) contrast(1.03) !important;
}

html .camo-ui-root [data-camo-stack]:active {
  filter: brightness(.95) saturate(1.02) contrast(1.04) !important;
}

html .camo-ui-root button[data-camo-stack]:active,
html .camo-ui-root .btn[data-camo-stack]:active,
html .camo-ui-root .tab[data-camo-stack]:active,
html .camo-ui-root label.btn-file[data-camo-stack]:active {
  transform: translateY(4px) !important;
  box-shadow:
    0 1px 0 #252b1e,
    0 4px 10px rgba(0,0,0,.24),
    inset 1px 1px 0 rgba(255,255,255,.14),
    inset -1px -1px 0 rgba(0,0,0,.30) !important;
}

html .camo-ui-root [data-camo-stack]:disabled,
html .camo-ui-root [data-camo-stack][disabled],
html .camo-ui-root [data-camo-stack][aria-disabled="true"] {
  opacity: .62 !important;
  cursor: not-allowed !important;
  filter: grayscale(.28) brightness(.75) !important;
}

html .camo-ui-root [data-camo-stack]:disabled .camo-label-text,
html .camo-ui-root [data-camo-stack][disabled] .camo-label-text,
html .camo-ui-root [data-camo-stack][aria-disabled="true"] .camo-label-text {
  opacity: .88 !important;
}


/* --------------------------------------------------------------------------
   Focus accessibility
   -------------------------------------------------------------------------- */

html .camo-ui-root [data-camo-stack]:focus-visible {
  outline: 2px solid rgba(255,247,220,.82) !important;
  outline-offset: 2px !important;
}


/* --------------------------------------------------------------------------
   Optional debug helpers
   Add class "camo-debug" to .camo-ui-root if you want to see stack numbers.
   -------------------------------------------------------------------------- */

html .camo-ui-root.camo-debug [data-camo-stack]::before {
  content: attr(data-camo-stack) !important;
  position: absolute !important;
  left: 4px !important;
  top: 4px !important;
  z-index: 5 !important;
  min-width: 14px !important;
  height: 14px !important;
  padding: 0 3px !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  color: #fff !important;
  background: rgba(0,0,0,.70) !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  pointer-events: none !important;
}


/* --------------------------------------------------------------------------
   Reduced motion support
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html .camo-ui-root [data-camo-stack] {
    transition: none !important;
  }
}

/* === SAMSEL GENERATED CAMO STACKS 1-33 START === */

/* Map every data-camo-stack value to its PNG texture. */
.camo-ui-root [data-camo-stack="1"] { --camo-stack-image: url("/camo/stack_1.png?v=10012"); }
.camo-ui-root [data-camo-stack="2"] { --camo-stack-image: url("/camo/stack_2.png?v=10012"); }
.camo-ui-root [data-camo-stack="3"] { --camo-stack-image: url("/camo/stack_3.png?v=10012"); }
.camo-ui-root [data-camo-stack="4"] { --camo-stack-image: url("/camo/stack_4.png?v=10012"); }
.camo-ui-root [data-camo-stack="5"] { --camo-stack-image: url("/camo/stack_5.png?v=10012"); }
.camo-ui-root [data-camo-stack="6"] { --camo-stack-image: url("/camo/stack_6.png?v=10012"); }
.camo-ui-root [data-camo-stack="7"] { --camo-stack-image: url("/camo/stack_7.png?v=10012"); }
.camo-ui-root [data-camo-stack="8"] { --camo-stack-image: url("/camo/stack_8.png?v=10012"); }
.camo-ui-root [data-camo-stack="9"] { --camo-stack-image: url("/camo/stack_9.png?v=10012"); }
.camo-ui-root [data-camo-stack="10"] { --camo-stack-image: url("/camo/stack_10.png?v=10012"); }
.camo-ui-root [data-camo-stack="11"] { --camo-stack-image: url("/camo/stack_11.png?v=10012"); }
.camo-ui-root [data-camo-stack="12"] { --camo-stack-image: url("/camo/stack_12.png?v=10012"); }
.camo-ui-root [data-camo-stack="13"] { --camo-stack-image: url("/camo/stack_13.png?v=10012"); }
.camo-ui-root [data-camo-stack="14"] { --camo-stack-image: url("/camo/stack_14.png?v=10012"); }
.camo-ui-root [data-camo-stack="15"] { --camo-stack-image: url("/camo/stack_15.png?v=10012"); }
.camo-ui-root [data-camo-stack="16"] { --camo-stack-image: url("/camo/stack_16.png?v=10012"); }
.camo-ui-root [data-camo-stack="17"] { --camo-stack-image: url("/camo/stack_17.png?v=10012"); }
.camo-ui-root [data-camo-stack="18"] { --camo-stack-image: url("/camo/stack_18.png?v=10012"); }
.camo-ui-root [data-camo-stack="19"] { --camo-stack-image: url("/camo/stack_19.png?v=10012"); }
.camo-ui-root [data-camo-stack="20"] { --camo-stack-image: url("/camo/stack_20.png?v=10012"); }
.camo-ui-root [data-camo-stack="21"] { --camo-stack-image: url("/camo/stack_21.png?v=10012"); }
.camo-ui-root [data-camo-stack="22"] { --camo-stack-image: url("/camo/stack_22.png?v=10012"); }
.camo-ui-root [data-camo-stack="23"] { --camo-stack-image: url("/camo/stack_23.png?v=10012"); }
.camo-ui-root [data-camo-stack="24"] { --camo-stack-image: url("/camo/stack_24.png?v=10012"); }
.camo-ui-root [data-camo-stack="25"] { --camo-stack-image: url("/camo/stack_25.png?v=10012"); }
.camo-ui-root [data-camo-stack="26"] { --camo-stack-image: url("/camo/stack_26.png?v=10012"); }
.camo-ui-root [data-camo-stack="27"] { --camo-stack-image: url("/camo/stack_27.png?v=10012"); }
.camo-ui-root [data-camo-stack="28"] { --camo-stack-image: url("/camo/stack_28.png?v=10012"); }
.camo-ui-root [data-camo-stack="29"] { --camo-stack-image: url("/camo/stack_29.png?v=10012"); }
.camo-ui-root [data-camo-stack="30"] { --camo-stack-image: url("/camo/stack_30.png?v=10012"); }
.camo-ui-root [data-camo-stack="31"] { --camo-stack-image: url("/camo/stack_31.png?v=10012"); }
.camo-ui-root [data-camo-stack="32"] { --camo-stack-image: url("/camo/stack_32.png?v=10012"); }
.camo-ui-root [data-camo-stack="33"] { --camo-stack-image: url("/camo/stack_33.png?v=10012"); }

/*
 * Final camouflage override.
 * These selectors deliberately outrank the solid btn-success,
 * btn-danger, btn-warn and btn-neutral backgrounds in index.css.
 */
html .camo-ui-root button[data-camo-stack],
html .camo-ui-root .btn[data-camo-stack],
html .camo-ui-root .tab[data-camo-stack],
html .camo-ui-root label.btn-file[data-camo-stack],
html .camo-ui-root input[type="button"][data-camo-stack],
html .camo-ui-root input[type="submit"][data-camo-stack] {
  background-color: #3f4a31 !important;

  background-image:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.16) 0%,
      rgba(255, 255, 255, 0.04) 18%,
      rgba(0, 0, 0, 0.18) 100%
    ),
    var(--camo-stack-image) !important;

  background-size: cover, cover !important;
  background-position: center, center !important;
  background-repeat: no-repeat, no-repeat !important;
  background-blend-mode: overlay, normal !important;
}

/* Keep semantic classes as text/border hints, not solid backgrounds. */
html .camo-ui-root :is(
  button.btn-success,
  button.btn-danger,
  button.btn-warn,
  button.btn-neutral,
  button.btn-a,
  button.btn-b,
  button.fx-wide,
  .btn.btn-success,
  .btn.btn-danger,
  .btn.btn-warn,
  .btn.btn-neutral
)[data-camo-stack] {
  background-color: #3f4a31 !important;

  background-image:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.16) 0%,
      rgba(255, 255, 255, 0.04) 18%,
      rgba(0, 0, 0, 0.18) 100%
    ),
    var(--camo-stack-image) !important;

  background-size: cover, cover !important;
  background-position: center, center !important;
  background-repeat: no-repeat, no-repeat !important;
  background-blend-mode: overlay, normal !important;
}

/* Keep labels readable on bright and dark camouflage patterns. */
html .camo-ui-root [data-camo-stack] .camo-label-text {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  color: #f7f4e8 !important;
  background: rgba(8, 12, 8, 0.72) !important;
  text-shadow:
    0 1px 1px rgba(0, 0, 0, 0.95),
    0 0 4px rgba(0, 0, 0, 0.8) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 1px 3px rgba(0, 0, 0, 0.45);
}

/* === SAMSEL GENERATED CAMO STACKS 1-33 END === */

/* Paint camo before JavaScript initializes, including mobile restored pages. */
html .camo-ui-root button:not([data-camo-stack]),
html .camo-ui-root .btn:not([data-camo-stack]),
html .camo-ui-root .tab:not([data-camo-stack]),
html .camo-ui-root .filebtn:not([data-camo-stack]),
html .camo-ui-root label.btn-file:not([data-camo-stack]),
html .camo-ui-root input[type="button"]:not([data-camo-stack]),
html .camo-ui-root input[type="submit"]:not([data-camo-stack]) {
  background-image:linear-gradient(180deg,rgba(255,255,255,.26),rgba(0,0,0,.18)),url("/camo/stack_6.png") !important;
  background-size:cover !important;
  background-position:center !important;
  color:#fff7dc !important;
  text-shadow:0 1px 2px #000,0 0 7px #000 !important;
}