/* ===== 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.7vw, 40px);
  background: var(--ad-bg);
  padding: clamp(10px, 1.2vw, 14px) clamp(8px, 2vw, 20px);

}

.ad-tab{
  appearance: none;
  border: 1px solid #D09353;
  background: var(--chip);
  color: #0b2033;
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 700;
  font-size: clamp(13px, 1.4vw, 15px);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  position: relative;
  text-decoration: none;
  font: system-ui,-apple-system,Segoe UI,Roboto,Arial;
}
.ad-tab:hover{ 
  background: #D09353;
  border-color:#cbe7e1;
  border: 1px solid black;
  /* transform: translateY(-1px); */
}
.ad-tab.is-active{ 
  background: #D09353; 
  color: black;
  border-color: black;
}

/* .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;
  }
}


/* Mobile: keep tabs in a row, just smaller */
@media (max-width: 640px){
  .ad-tabs{
    flex-direction: row;        /* stay horizontal */
    flex-wrap: wrap;            /* allow 2nd line if needed */
    justify-content: center;    /* center the whole group */
    align-items: center;
    gap: 6px;                   /* tighter gaps */
    padding: 8px 6px;           /* smaller padding around the row */
  }

  .ad-tab{
    width: auto;                               /* no full-width pills */
    padding: 5px 7px;                         /* smaller pill size */
    font-size: clamp(11px, 3vw, 13px);         /* slightly smaller text */
    border-radius: 8px;
    white-space: normal;                       /* allow text to wrap if long */
    text-align: center;
  }

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

/* --- Tight layout: pull diagram up under the tabs --- */

.admin-diagrams.tight .ad-panel.is-active{
  align-items: flex-start;   /* top-align the diagram instead of centering */
  justify-content: center;
  min-height: auto;          /* let the image height define the panel */
  padding-top: 8px;          /* small breathing room under the tabs */
}

.admin-diagrams.tight .ad-img{
  height: auto;                                   /* no forced extra height */
  max-height: calc(var(--avail-h) - 24px);        /* still respect viewport */
}