/* ===== ADMIN DIAGRAMS (TABS + CANVAS) ===== */

:root{
  /* Visuals */
  --ad-bg: #CEE1F3;
  --panel-bg: #CEE1F3;
  --ink: #0b2033;
  --chip: #fff;
  --chip-border: #dfe6ec;
  --chip-active: #E7CFB6;
  --chip-hover: #f4f7fb;

  /* Heights (JS updates --avail-h dynamically) */
  --nav-h: 80px;          /* fallback if .navbar missing */
  --tabs-h: 56px;         /* approx tabs height */
  --ticker-h: 0px;        /* set by JS if you have a ribbon */
  --avail-h: calc(100vh - var(--nav-h) - var(--tabs-h) - var(--ticker-h));

  /* Bigger desktop defaults */
  --desktop-min-h: 1100px;
  --desktop-max-h: 1800px;
}

html, body { overflow-x: hidden; }

.ad-page{ background: var(--ad-bg); color: var(--ink); }

/* Sticky, centered tabs. High z-index to ensure clickability above canvas. */
.ad-tabs{
  position: sticky;
  top: var(--nav-h);
  z-index: 100;                        /* ↑ ensure on top of everything */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(8px, 1.6vw, 20px);
  background: var(--ad-bg);
  padding: clamp(10px, 1.2vw, 14px) clamp(8px, 2vw, 20px);

}

.ad-tab{
  appearance: none;
  border: 1px solid var(--chip-border);
  background: var(--chip);
  color: var(--ink);
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 700;
  font-size: clamp(13px, 1.35vw, 25px);
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s, transform .1s;
  position: relative;
  text-decoration: none;
  font: system-ui,-apple-system,Segoe UI,Roboto,Arial;
  border: 2px solid black;
}
.ad-tab:hover{ background: var(--chip-hover); transform: translateY(-1px); }
.ad-tab.is-active{ background: var(--chip-active); border-color: #111; }
.ad-tab:focus-visible{ outline: 3px solid rgba(4,120,87,.35); outline-offset: 2px; }

/* Centered canvas container */
.ad-canvas{
  width: 100%;
  max-width: 2100px;                   /* allow very large renders */
  margin-inline: auto;
  padding: clamp(6px, 1.5vw, 16px) clamp(8px, 2vw, 24px);
  background: var(--panel-bg);
  border-radius: 10px;
}

/* Show one panel; hide others completely */
.ad-panel{ display: none; }
.ad-panel.is-active{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(var(--desktop-min-h), var(--avail-h), var(--desktop-max-h));
}

/* Desktop: height-driven (LARGER now) */
.ad-img{
  display: block;
  /* try to use as much vertical space as possible up to 1550px */
  height: clamp(1050px, calc(var(--avail-h) - 12px), 1700px);
  width: auto;
  max-height: calc(var(--avail-h) - 12px);
  object-fit: contain;
}

/* Mobile: width-driven; no horizontal scroll */
@media (max-width: 900px){
  .ad-panel{ min-height: unset; }
  .ad-img{
    width: 98vw;
    height: auto;
    max-height: none;
  }
}


/* 1) Stack the tab buttons vertically on mobile */
@media (max-width: 640px){
  .ad-tabs{
    flex-direction: column;        /* row -> column */
    gap: 8px;                      /* tighter gap on mobile */
    align-items: center;          /* full-width buttons */
  }
  .ad-tab{
    width: 100%;
    justify-content: center;       /* center the label */
  }

  .admin-diagrams.tight .ad-tabs{ margin-bottom: 2px !important; }
}

/* ---- Tighter spacing between tabs and diagram ---- */
.ad-tabs{
  /* keep sticky behavior, just shrink the gap under it */
  margin-bottom: 4px !important;           /* was larger */
}

.ad-canvas{
  padding-top: 0 !important;               /* remove any top padding */
}

/* make sure panels don’t add their own top gap */
.ad-panel{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* images should not introduce an extra top offset */
.ad-img{
  display: block;                           /* removes inline-img line gap */
  margin-top: 0 !important;
}

/* If any global section spacing was adding air, collapse it here */
.admin-diagrams{
  scroll-margin-top: var(--nav-h, 72px);    /* keep good anchor behavior */
}

.admin-diagrams.tight .ad-tabs{ margin-bottom: 2px !important; }