/* ==========================================================================
   VERSA Control Panel – Custom CSS
   ========================================================================== */

/* ----------------------------- Theme tokens ------------------------------ */
:root{
  --versa-accent: #11c5cf;                 /* Versa teal */
  --versa-accent-35: rgba(17,197,207,.35);
  --versa-accent-20: rgba(17,197,207,.20);
  --versa-text-on-accent: #ffffff;
  --versa-muted: #abb4be;
  --versa-muted-strong: #8f98a3;
  --versa-badge: #ed9c28;

  --versa-danger: #ff5858;
  --versa-success: #7FC6A6;
  --versa-danger-2: #ff8686;

  --versa-dark-1: #282d36;
  --versa-dark-2: #2e353e;
  --versa-dark-3: #1d2127;
}

/* Reduced motion friendliness */
@media (prefers-reduced-motion: reduce){
  * { animation: none !important; transition: none !important; }
}

/* --------------------------- Multiselect z-index -------------------------- */
.multiselect-container{
  /* So the navbar doesn't overlap dropdown menus */
  z-index: 1000000;
}

/* ------------------------------ Brand color ------------------------------ */
.premium-color{ color: var(--versa-accent) !important; }

/* Force primary buttons to use Versa teal */
.btn-primary {
    background-color: var(--versa-accent);
    border-color: var(--versa-accent);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary:disabled {
    background-color: #0fb0b9;
    border-color: #0fb0b9;
}

/* -------------------------------- Avatars -------------------------------- */
.avatar{
  border-radius: 50%;
  width: 50px;
  height: 50px;
  padding: 5px;
}

/* ----------------------------- Tabs (dark) ------------------------------- */
html.dark .tab-content{
  background-color: var(--versa-dark-2);
  border-color: var(--versa-dark-2);
}
html.dark .tabs .nav-tabs{ border: none; }
html.dark .tabs .nav-link{
  background-color: var(--versa-dark-1);
  border-color: var(--versa-dark-3);
}
html.dark .tabs .active .nav-link{ background-color: var(--versa-dark-2); }
html.dark .tabs .nav-link:hover{
  background-color: var(--versa-dark-1);
  border-color: var(--versa-dark-3);
}
html.dark .tabs .nav-link:focus{
  background-color: var(--versa-dark-2);
  border-color: var(--versa-dark-3);
}

/* ------------------------ Small status indicators ------------------------ */
.indicator::before{ content: "●"; }
.indicator-success::before{ color: var(--versa-success); }
.indicator-danger::before { color: var(--versa-danger); }

/* ------------- Userbox truncation on very small screens ------------------ */
@media (max-width: 400px){
  .userbox .name,
  .userbox .role{
    max-width: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
@media (max-width: 500px){
  .userbox .profile-info{ margin-right: 2px !important; }
}

/* ----------------------------- Inline <code> ----------------------------- */
code{
  font-size: 90% !important;
  color: var(--versa-danger) !important;
  background-color: #00000012;
  border-radius: 4px !important;
  padding: 0 2px !important;
}

/* ------------------------ Disabled primary buttons ----------------------- */
.btn-primary.disabled,
.btn-primary:disabled{ color: #fff !important; }

/* ------------------------- Full-screen loader ---------------------------- */
#loading-overlay{
  position: fixed; inset: 0;
  background-color: #000;
  border-radius: 25px;
  z-index: 100;
  opacity: .75;
}
#loading-overlay .card{ height: 100%; }

.loader, .loader:after{
  border-radius: 50%;
  width: 10em; height: 10em;
}
.loader{
  margin: 60px auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(0,0,0,.2);
  border-right: 1.1em solid rgba(0,0,0,.2);
  border-bottom: 1.1em solid rgba(0,0,0,.2);
  border-left: 1.1em solid #000;
  transform: translateZ(0);
  animation: load8 1.1s linear infinite;
}
@keyframes load8{ 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }

/* --------------------------- General spacing ----------------------------- */
.entry{ margin-bottom: 5px; }
html.dark p{ color: var(--versa-muted); }
.content-body{ padding: 15px !important; }

/* -------------- Legacy sidebar ad/footer – fully hidden ------------------ */
/* (Fixed broken image on /status) */
#nav-footer,
#nav-footer-overlay,
#nav-footer img,
.sidebar .ad,
.left-menu .ad,
.sidebar-footer .ad{ display: none !important; }

/* ------------------------- Misc component tweaks ------------------------- */
#rolecommands-container .dropdown-menu{
  max-height: var(--rolecommands-dropdown-height) !important;
}
.card{ margin: 4px 0 !important; }
.nav-tabs{ flex-wrap: wrap-reverse; }
@media (max-width: 768px){ .card-body{ padding: .5rem !important; } }

.content-editable-form::before{ content:"✎ "; }

html.dark select optgroup{ background-color: rgb(45,45,50) !important; }

/* ---------------------- Highlight.js line numbers ------------------------ */
.hljs-ln-numbers{
  user-select: none;
  text-align: center;
  color: #ccc;
  border-right: 1px solid #ccc;
  vertical-align: top;
  padding-right: 5px !important;
}
.hljs-ln-code{ padding-left: 10px !important; }

.no-padding{ padding: 0 !important; }

/* ------------------------------- Toggles --------------------------------- */
.tg-list{
  text-align: center;
  display: flex;
  align-items: center;
}
.tg-list-item{ margin: 0 2em; }
.tgl{ display: none; }
.tgl, .tgl:after, .tgl:before, .tgl *,
.tgl *:after, .tgl *:before, .tgl + .tgl-btn{ box-sizing: border-box; }

.tgl + .tgl-btn{
  outline: 0;
  display: block;
  width: 4em; height: 2em; min-width: 3em;
  position: relative;
  cursor: pointer; user-select: none;
}
.tgl + .tgl-btn:after,
.tgl + .tgl-btn:before{
  position: relative; display: block; content:"";
  width: 50%; height: 100%;
}
.tgl + .tgl-btn:after{ left: 0; }
.tgl + .tgl-btn:before{ display: none; }
.tgl:checked + .tgl-btn:after{ left: 50%; }

/* Light */
.tgl-light + .tgl-btn{
  background: #f0f0f0; border-radius: 2em; padding: 2px;
  transition: all .4s ease;
}
.tgl-light + .tgl-btn:after{
  border-radius: 50%; background: #fff; transition: all .2s ease;
}
.tgl-light:checked + .tgl-btn{ background: #9FD6AE; }

/* iOS */
.tgl-ios + .tgl-btn{
  background: #fbfbfb; border-radius: 2em; padding: 2px;
  transition: all .4s ease; border: 1px solid #e8eae9;
}
.tgl-ios + .tgl-btn:after{
  border-radius: 2em; background: #fbfbfb;
  transition: left .3s cubic-bezier(.175,.885,.32,1.275), padding .3s ease, margin .3s ease;
  box-shadow: 0 0 0 1px rgba(0,0,0,.1), 0 4px 0 rgba(0,0,0,.08);
}
.tgl-ios + .tgl-btn:hover:after{ will-change: padding; }
.tgl-ios + .tgl-btn:active{ box-shadow: inset 0 0 0 2em #e8eae9; }
.tgl-ios + .tgl-btn:active:after{ padding-right: .8em; }
.tgl-ios:checked + .tgl-btn{ background: #86d993; }
.tgl-ios:checked + .tgl-btn:active{ box-shadow: none; }
.tgl-ios:checked + .tgl-btn:active:after{ margin-left: -.8em; }

/* Skewed */
.tgl-skewed + .tgl-btn{
  overflow: hidden; transform: skew(-10deg);
  backface-visibility: hidden; transition: all .2s ease;
  font-family: sans-serif; background: #888;
}
.tgl-skewed + .tgl-btn:after,
.tgl-skewed + .tgl-btn:before{
  transform: skew(10deg); display: inline-block;
  transition: all .2s ease; width: 100%; text-align: center;
  position: absolute; line-height: 2em; font-weight: bold; color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,.4);
}
.tgl-skewed + .tgl-btn:after{ left: 100%; content: attr(data-tg-on); }
.tgl-skewed + .tgl-btn:before{ left: 0; content: attr(data-tg-off); }
.tgl-skewed + .tgl-btn:active{ background: #888; }
.tgl-skewed + .tgl-btn:active:before{ left: -10%; }
.tgl-skewed:checked + .tgl-btn{ background: #86d993; }
.tgl-skewed:checked + .tgl-btn:before{ left: -100%; }
.tgl-skewed:checked + .tgl-btn:after{ left: 0; }
.tgl-skewed:checked + .tgl-btn:active:after{ left: 10%; }

/* Flat (Versa tinted) */
.tgl-flat + .tgl-btn{
  padding: 2px; transition: all .2s ease;
  background: transparent; border: 4px solid var(--versa-danger-2);
  border-radius: 2em;
}
.tgl-flat + .tgl-btn:after{
  transition: all .2s ease;
  background: var(--versa-danger-2); content:""; border-radius: 1em;
}
.tgl-flat:checked + .tgl-btn{ border-color: var(--versa-success); }
.tgl-flat:checked + .tgl-btn:after{ left: 50%; background: var(--versa-success); }

/* Flip */
.tgl-flip + .tgl-btn{
  padding: 2px; transition: all .2s ease;
  font-family: sans-serif; perspective: 100px;
}
.tgl-flip + .tgl-btn:after, .tgl-flip + .tgl-btn:before{
  display: inline-block; transition: all .4s ease;
  width: 100%; text-align: center; position: absolute;
  line-height: 2em; font-weight: bold; color: #fff; top: 0; left: 0;
  backface-visibility: hidden; border-radius: 4px;
}
.tgl-flip + .tgl-btn:after{
  content: attr(data-tg-on); background: #02C66F; transform: rotateY(-180deg);
}
.tgl-flip + .tgl-btn:before{
  background: #FF3A19; content: attr(data-tg-off);
}
.tgl-flip + .tgl-btn:active:before{ transform: rotateY(-20deg); }
.tgl-flip:checked + .tgl-btn:before{ transform: rotateY(180deg); }
.tgl-flip:checked + .tgl-btn:after{ transform: rotateY(0); left: 0; background: var(--versa-success); }
.tgl-flip:checked + .tgl-btn:active:after{ transform: rotateY(20deg); }

/* Disabled toggle */
.tgl:disabled ~ .tgl-btn,
.tgl:disabled ~ .tgl-desc{ opacity: .5; }

/* ----------------------- Unsaved changes popup --------------------------- */
#unsaved-changes-popup{
  position: fixed; bottom: 10px; width: 100%;
  display: flex; justify-content: center; align-items: center;
  pointer-events: none; z-index: 10000;
}
#unsaved-changes-popup-container{
  display: flex; justify-content: center; align-items: center;
  background-color: #000000d9; border-radius: 1em; padding: 1em;
  pointer-events: auto;
}

/* Small inline help icon */
.question-tooltip{
  margin-left: .25rem; display: inline-flex; align-items: center;
}
html.dark .question-tooltip{ color: var(--versa-badge); }

/* Feed link colors */
.feedlink{ color: #777; }
html.dark .feedlink{ color: var(--versa-muted); }

/* Simple meter block */
.meter{ width: 100%; margin-block: 1em; }

/* ------------------- External docs links (disabled) ---------------------- */
a[data-doc-url]{
  pointer-events: none; opacity: .65;
  text-decoration: none !important; cursor: not-allowed;
}

/* -------------------------- Footer link styles --------------------------- */
.footer a,
.footer a:visited,
.footer a:active{
  color: var(--versa-accent) !important;
  text-decoration: none;
  transition: color .15s ease, text-decoration .15s ease;
}
.footer a:hover,
.footer a:focus-visible{
  color: var(--versa-text-on-accent) !important;
  text-decoration: underline; outline: none;
}

/* “Have questions?” section links (wrap block in .questions) */
.questions a,
.questions a:visited,
.questions a:active{
  color: var(--versa-accent) !important;
  text-decoration: none;
  transition: color .15s ease, text-decoration .15s ease;
}
.questions a:hover,
.questions a:focus-visible{
  color: var(--versa-text-on-accent) !important;
  text-decoration: underline; outline: none;
}

/* Disabled doc badge */
.doc-link-disabled{
  display:inline-block; margin-left:.5rem; padding:.15rem .5rem;
  font-size:.9em; line-height:1.2; color:#bbb;
  background-color: rgba(255,255,255,.05);
  border:1px dashed #666; border-radius:4px;
  cursor:not-allowed; font-style:italic; vertical-align:baseline;
}
.doc-link-disabled:hover{ color:#c9c9c9; border-color:#777; }

/* spacing utility */
.mb-2{ margin-bottom:.5rem; }

/* --------------------------- Navbar link styles -------------------------- */
.navbar .nav-link,
.navbar .navbar-brand,
.header .nav .nav-link,
.navbar-landing .nav-link,
.js-anchor-link {
  color: #ffffff !important;   /* white by default */
  transition: color .15s ease;
  text-decoration: none;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active,
.header .nav .nav-link:hover,
.navbar-landing .nav-link:hover,
.js-anchor-link:hover {
  color: var(--versa-accent) !important; /* teal on hover/active */
  text-decoration: none;
  outline: none;
}

.navbar .nav-link:focus-visible {
  outline: 2px solid var(--versa-accent);
  outline-offset: 2px;
}

/* ---------------- Outline-danger button – teal focus ring ---------------- */
.btn-outline-danger:focus,
.btn-outline-danger:hover{
  box-shadow: 0 0 0 .2rem var(--versa-accent-35) !important;
  border-color: var(--versa-accent) !important;
  color: var(--versa-text-on-accent) !important;
}
/* Subtle focus ring for any button */
.btn:focus-visible{
  box-shadow: 0 0 0 .2rem var(--versa-accent-20) !important;
  outline: none;
}

/* ------------- Landing header links: white -> teal on hover -------------- */
.header .nav .nav-link,
.navbar-landing .nav-link,
.js-anchor-link{
  color: #ffffff !important;
  text-decoration: none; transition: color .15s ease;
}
.header .nav .nav-link:hover,
.navbar-landing .nav-link:hover,
.js-anchor-link:hover{
  color: var(--versa-accent) !important;
}