/* ===== ISOT THEME (layout=isot) ===== */
/* Optional visual skin mirroring isot111.com "Clear Sky Serenity".
   Everything here is scoped under [data-layout="isot"] so the default
   theme is never touched. To revert, delete this whole block + the
   <link> gates in templates/form.html. */

/* ---------- Design tokens (from isot111.com) ---------- */
[data-layout="isot"] {
  --bg-grad: radial-gradient(130% 100% at 30% 0%, #1E6FA8 0%, #1a3d34 45%, #0a1710 100%);
  --accent: #6FA8D4;
  --accent-ink: #2F4A22;
  --gold: #FFD84D;
  --gold-ink: #141a12;
  --ink: #CFE4F2;
  --ink-soft: rgba(255, 255, 255, 0.85);
  --ink-mute: rgba(250, 255, 213, 0.85);
  --card: #16281f;
  --card-hi: #1f3a2c;
  --card-border: rgba(255, 255, 255, 0.45);
  --radius: 18px;
  --radius-lg: 24px;
  --radius-sm: 12px;
  --shadow: 0 10px 30px rgba(0, 0, 0, .25);
  --maxw-wide: 1080px;
  --gap: 14px;
  --font: 'Chakra Petch', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-display: 'Chakra Petch', var(--font);
}

/* ---------- Fonts & page background ---------- */
/* isot_bg.webp as the blurred backdrop for the whole UI */
[data-layout="isot"] body,
body[data-layout="isot"] {
  font-family: var(--font);
  background: #0a1420;
}

/* Blurred webp photo behind everything (fixed, behind .app content) */
body[data-layout="isot"]::before {
  content: "";
  position: fixed;
  inset: -30px;
  z-index: 0;
  background: url('https://cdn.statically.io/gh/mr-velosofy/FastAPI_KillfeedGenerator@main/static/img/isot_bg.webp') center/cover no-repeat;
  filter: blur(12px);
  pointer-events: none;
}

/* Dark overlay between the blurred photo and the UI for readability */
body[data-layout="isot"]::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background: rgba(0, 0, 0, .35);
  pointer-events: none;
}

body[data-layout="isot"] {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0rem;
}

/* Skeleton matches the new background so no flash */
body[data-layout="isot"] .page-skeleton {
  background: rgba(10, 20, 32, .6);
}

/* Dropdown / sticky panel backgrounds become glass on isot */
body[data-layout="isot"] .preview-panel {
  background: transparent;
  overflow: hidden;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 0 0 1px var(--card-border), var(--shadow);
}

/* Blurred isot_bg.webp fills the preview panel behind its content,
   with a black rgb(8 14 20 / 20%) overlay on top of the image */
body[data-layout="isot"] .preview-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(rgba(8, 14, 20, .20), rgba(8, 14, 20, .20)),
    url('https://cdn.statically.io/gh/mr-velosofy/FastAPI_KillfeedGenerator@main/static/img/isot_bg.webp') center/cover no-repeat;
  filter: blur(12px);
  transform: scale(1.06);
}

/* Config/regular cards: same black overlay glass so text is easy to read */
body[data-layout="isot"] .config-panel {
  background: rgba(8, 14, 20, .20);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--card-border);
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
  box-shadow: inset 0 0 0 1px var(--card-border), var(--shadow);
}

/* Preview panel: rounds and glass look on every screen. On PC it flows
   with the page (unsticky); sticky to the top only on mobile. */
body[data-layout="isot"] .preview-panel {
  overflow: hidden;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  background: transparent;
}

body[data-layout="isot"] .preview-topbar {
  background: transparent;
  border-bottom: 1px solid var(--card-border);
}

/* ---------- Headings / display font ---------- */
body[data-layout="isot"] .section-title,
body[data-layout="isot"] .label-tiny,
body[data-layout="isot"] .seg-btn,
body[data-layout="isot"] .btn-export,
body[data-layout="isot"] .checkbox-label,
body[data-layout="isot"] .preview-meta,
body[data-layout="isot"] .preview-live,
body[data-layout="isot"] .preview-note {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .04em;
}

body[data-layout="isot"] .section-title {
  font-size: 2rem;
  color: #fff;
}

body[data-layout="isot"] .label-tiny,
body[data-layout="isot"] .preview-meta {
  color: var(--ink-mute);
}

body[data-layout="isot"] .section-rule {
  background: linear-gradient(90deg, transparent 0%, var(--card-border) 80%, transparent 100%);
}

/* ---------- Segmented control / primary pill ---------- */
body[data-layout="isot"] .segmented {
  background: rgba(255, 255, 255, .08);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 4px;
}

body[data-layout="isot"] .seg-btn {
  color: var(--ink-mute);
  border-right: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
}

body[data-layout="isot"] .seg-btn:last-child {
  border-right: none;
}

body[data-layout="isot"] .seg-btn:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, .06);
}

body[data-layout="isot"] .seg-btn.active {
  background: var(--gold);
  color: var(--gold-ink);
  box-shadow: 0 0 18px rgba(255, 216, 77, .45);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}

body[data-layout="isot"] .seg-btn.active:hover {
  color: var(--gold-ink);
  background: var(--gold);
}

/* ---------- Cards / panels / inputs (glass) ---------- */
body[data-layout="isot"] .input-item input,
body[data-layout="isot"] .input-item select,
body[data-layout="isot"] .cdrop-trigger,
body[data-layout="isot"] .stepper,
body[data-layout="isot"] .checkbox-box {
  background: rgba(255, 255, 255, .10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
  font-family: var(--font);
}

body[data-layout="isot"] .input-item input::placeholder {
  color: var(--ink-mute);
  font-weight: 600;
}

body[data-layout="isot"] .input-item input,
body[data-layout="isot"] .input-item select {
  font-weight: 700;
}

body[data-layout="isot"] .cdrop-text {
  color: var(--ink);
  font-family: var(--font);
  font-weight: 700;
}

body[data-layout="isot"] .stepper-value,
body[data-layout="isot"] .stepper-btn,
body[data-layout="isot"] .checkbox-label {
  font-family: var(--font);
}

body[data-layout="isot"] .cdrop-img,
body[data-layout="isot"] .cdrop-img-placeholder,
body[data-layout="isot"] .cdrop-opt-img,
body[data-layout="isot"] .cdrop-opt-img-placeholder {
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--card-border);
  border-radius: 8px;
}

body[data-layout="isot"] .cdrop-menu {
  top: 100%;
  bottom: auto;
  background: rgba(22, 40, 31, .92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--card-border);
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  margin-bottom: 0;
  padding-top: 4px;
  max-height: 260px;
  transform-origin: top;
  animation: cdropPop .18s ease-out;
}

@keyframes cdropPop {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

body[data-layout="isot"] .cdrop-menu::-webkit-scrollbar-track {
  background: transparent;
}

body[data-layout="isot"] .cdrop-menu::-webkit-scrollbar-thumb {
  background: var(--card-border);
}

body[data-layout="isot"] .cdrop-opt {
  color: var(--ink-soft);
}

body[data-layout="isot"] .cdrop-opt:hover {
  background: rgba(255, 255, 255, .08);
  color: #fff;
}

body[data-layout="isot"] .cdrop-opt.selected {
  color: var(--gold);
  background: rgba(255, 216, 77, .12);
}

body[data-layout="isot"] .cdrop-empty {
  color: var(--ink-mute);
}

/* ---------- Buttons & stepper accent ---------- */
body[data-layout="isot"] .btn-export {
  background: var(--gold);
  color: var(--gold-ink);
  border: none;
  border-radius: 999px;
  font-weight: 800;
  box-shadow: 0 8px 24px rgba(255, 216, 77, .35);
  transition: box-shadow .15s, transform .15s;
}

body[data-layout="isot"] .btn-export:hover {
  opacity: 1;
  box-shadow: 0 10px 30px rgba(255, 216, 77, .5);
  transform: translateY(-1px);
}

body[data-layout="isot"] .stepper-btn {
  color: var(--gold);
}

body[data-layout="isot"] .stepper-btn:hover {
  background: rgba(255, 216, 77, .12);
  color: var(--gold);
}

body[data-layout="isot"] .stepper-value {
  color: var(--ink);
  border-color: var(--card-border);
}

/* ---------- Checkboxes ---------- */
body[data-layout="isot"] .checkbox-box:hover {
  border-color: var(--accent);
  background: rgba(255, 255, 255, .14);
}

body[data-layout="isot"] .checkbox-box input[type="checkbox"] {
  background: rgba(255, 255, 255, .10);
  border: 1px solid var(--card-border);
  border-radius: 6px;
}

body[data-layout="isot"] .checkbox-box input[type="checkbox"]:checked {
  background: var(--gold);
  border-color: var(--gold);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 7l3 3 5-5' stroke='%23141a12' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

body[data-layout="isot"] .checkbox-label {
  color: var(--ink-soft);
}

/* ---------- Swap button ---------- */
body[data-layout="isot"] .btn-swap {
  background: rgba(255, 255, 255, .10);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
}

body[data-layout="isot"] .btn-swap:hover {
  color: var(--gold);
  border-color: var(--gold);
  background: rgba(255, 216, 77, .10);
}

/* ---------- Focus ---------- */
body[data-layout="isot"] .input-item input:focus,
body[data-layout="isot"] .input-item select:focus,
body[data-layout="isot"] .cdrop-trigger:focus,
body[data-layout="isot"] .checkbox-box input[type="checkbox"]:focus-visible {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(255, 216, 77, .25);
}

/* ---------- Preview body spacing ---------- */
body[data-layout="isot"] .preview-body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  min-height: 64px;
}

/* ---------- Preview notes ---------- */
body[data-layout="isot"] .preview-live {
  color: var(--gold);
}

body[data-layout="isot"] .preview-note {
  color: var(--gold);
  border-top: 1px solid var(--card-border);
}

body[data-layout="isot"] .preview-img {
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
}

/* ---------- Error ---------- */
body[data-layout="isot"] .error-bar {
  background: rgba(20, 26, 18, .6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-left: 3px solid var(--gold);
  color: var(--gold);
  border-radius: var(--radius-sm);
}

body[data-layout="isot"] .field-error {
  color: var(--gold);
}

/* ---------- Skeleton shimmer (tinted) ---------- */
body[data-layout="isot"] .sk {
  background: linear-gradient(90deg, transparent,
    rgba(111, 168, 212, .08) 35%,
    rgba(255, 216, 77, .12) 50%,
    rgba(111, 168, 212, .08) 65%,
    transparent);
}

body[data-layout="isot"] .sk-export {
  background: linear-gradient(90deg, rgba(255, 216, 77, .12) 25%, rgba(255, 216, 77, .22) 50%, rgba(255, 216, 77, .12) 75%);
}

/* ---------- Footer ---------- */
body[data-layout="isot"] .footer-credit {
  color: var(--ink-mute);
}

/* ---------- Coffee button (right of Export, isot only) ---------- */
body[data-layout="isot"] .export-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}

body[data-layout="isot"] .btn-export {
  flex: 1 1 auto;
}

body[data-layout="isot"] .coffee-btn {
  flex: 0 0 auto;
  width: 59px;
  height: 59px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gold);
  color: var(--gold-ink);
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(255, 216, 77, .4);
  transition: box-shadow .15s, transform .15s;
}

body[data-layout="isot"] .coffee-btn:hover {
  box-shadow: 0 10px 30px rgba(255, 216, 77, .55);
  transform: translateY(-2px);
}

body[data-layout="isot"] .coffee-svg {
  width: 30px;
  height: 30px;
  display: block;
  color: var(--gold-ink);
}

/* Dollar <-> coffee cup shape morph (GSAP MorphSVGPlugin) */
body[data-layout="isot"] #coffee-dollar,
body[data-layout="isot"] #coffee-cup {
  fill: none;
  stroke: currentColor;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Config panel scale-up & arrangement ---------- */
body[data-layout="isot"] .config-panel {
  padding: 40px 48px;
}

body[data-layout="isot"] .loadout-group {
  gap: 18px;
  margin-bottom: 40px;
  padding-bottom: 30px;
}

body[data-layout="isot"] .label-tiny {
  font-size: 0.95rem;
}

body[data-layout="isot"] .segmented {
  padding: 6px;
}

body[data-layout="isot"] .seg-btn {
  padding: 18px 52px;
  font-size: 1.1rem;
}

/* Better arrangement: two clean rows via grid on PC */
body[data-layout="isot"] .inputs-row {
  display: grid;
  grid-template-columns: 1fr 1fr 60px 1fr 1fr;
  gap: 16px;
  align-items: stretch;
}

body[data-layout="isot"] .inputs-row .input-item,
body[data-layout="isot"] .inputs-row .input-item.grow2,
body[data-layout="isot"] .inputs-row .input-item.narrow {
  flex: none;
  width: 100%;
  min-width: 0;
}

body[data-layout="isot"] .inputs-row .input-item.grow2 {
  grid-column: span 4;
}

body[data-layout="isot"] .inputs-row .input-item.narrow {
  grid-column: span 1;
}

body[data-layout="isot"] .inputs-row .switch-item {
  align-self: center;
}

/* Scale up field text & heights */
body[data-layout="isot"] .input-item input,
body[data-layout="isot"] .input-item select {
  font-size: 1.3rem;
  height: 62px;
}

body[data-layout="isot"] .cdrop-trigger {
  height: 62px;
}

body[data-layout="isot"] .cdrop-img {
  width: 44px;
  height: 44px;
}

body[data-layout="isot"] .cdrop-text {
  font-size: 1.15rem;
}

body[data-layout="isot"] .stepper {
  height: 62px;
}

body[data-layout="isot"] .stepper-btn {
  width: 54px;
  font-size: 1.6rem;
}

body[data-layout="isot"] .stepper-value {
  font-size: 1.4rem;
}

body[data-layout="isot"] .btn-swap {
  width: 62px;
  height: 62px;
}

body[data-layout="isot"] .checkbox-box {
  min-height: 60px;
  padding: 14px 24px;
}

body[data-layout="isot"] .checkbox-label {
  font-size: 1rem;
}

body[data-layout="isot"] .checkbox-box input[type="checkbox"] {
  width: 20px;
  height: 20px;
}

body[data-layout="isot"] .btn-export {
  font-size: 1.4rem;
  padding: 22px 40px;
}

/* ---------- Responsive tweaks ---------- */
@media (max-width: 900px) {
  body[data-layout="isot"] {
    padding: 0;
  }

  body[data-layout="isot"] .preview-body {
    padding: 8px;
    min-height: 64px;
  }

  /* Config panel: single column, comfortable tap sizes on mobile */
  body[data-layout="isot"] .config-panel {
    padding: 20px 14px;
  }

  body[data-layout="isot"] .inputs-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  body[data-layout="isot"] .inputs-row .input-item.grow2,
  body[data-layout="isot"] .inputs-row .input-item.narrow {
    grid-column: span 1;
  }

  body[data-layout="isot"] .inputs-row .switch-item {
    align-items: center;
  }

  body[data-layout="isot"] .input-item input,
  body[data-layout="isot"] .input-item select {
    font-size: 1rem;
    height: 50px;
  }

  body[data-layout="isot"] .cdrop-trigger,
  body[data-layout="isot"] .stepper {
    height: 50px;
  }

  body[data-layout="isot"] .cdrop-menu {
    max-height: 220px;
  }

  body[data-layout="isot"] .seg-btn {
    padding: 12px 18px;
    font-size: 0.85rem;
  }

  body[data-layout="isot"] .checkbox-box {
    min-height: 46px;
    padding: 8px 12px;
  }

  body[data-layout="isot"] .btn-export {
    font-size: 1rem;
    padding: 14px 20px;
  }

  body[data-layout="isot"] .coffee-btn {
    width: 48px;
    height: 48px;
    gap: 8px;
  }

  body[data-layout="isot"] .coffee-svg {
    width: 24px;
    height: 24px;
  }

  body[data-layout="isot"] .footer-credit {
    position: sticky;
    bottom: 0;
    z-index: 40;
    overflow: hidden;
    background: transparent;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--card-border);
  }

  /* Same blurred webp + black overlay as the preview panel */
  body[data-layout="isot"] .footer-credit::before {
    content: "";
    position: absolute;
    inset: -1px 0 0 0;
    z-index: -1;
    background:
      linear-gradient(rgba(8, 14, 20, .20), rgba(8, 14, 20, .20)),
      url('https://cdn.statically.io/gh/mr-velosofy/FastAPI_KillfeedGenerator@main/static/img/isot_bg.webp') center/cover no-repeat;
    filter: blur(12px);
    transform: scale(1.06);
    transform-origin: bottom;
  }
}

/* ===== END ISOT THEME ===== */