/* QoL extras patch — designed to sit on top of theme.tokens/components/overrides.
   Goal: keep the preferred Arena Gold skin while restoring the visual QoL features.
   Non-breaking: CSS only.
*/

/* Ensure overlays are always above the sticky topbar */
body.bg .modal{ z-index: 120; }
body.bg .toast-wrap{ z-index: 1000; }

/* Icon-only buttons (used for ✕ close) */
body.bg .btn.icon-btn{
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 18px;
  line-height: 1;
}

/* Fix: long JSN sections were clipped by the old collapsible max-height */
body.bg .collapsible.open{ max-height: 5200px; }

/* (Keeps the collapse behavior; lets wide controls breathe once open) */
body.bg .collapsible.open{ overflow: visible; }

/* Thin route-loading indicator under the topbar */
body.bg.route-loading .topbar::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:-1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,222,120,.95), transparent);
  opacity: .85;
  animation: routeProg 1.1s ease-in-out infinite;
  pointer-events:none;
}
@keyframes routeProg{
  0%{ transform: translateX(-28%); opacity:.55; }
  50%{ opacity:.90; }
  100%{ transform: translateX(28%); opacity:.55; }
}
@media (prefers-reduced-motion: reduce){
  body.bg.route-loading .topbar::after{ animation:none; }
}

/* QR scan overlay (activate page) */
body.bg .scan-wrap{ border-radius: 18px; overflow: hidden; }
body.bg .qr-frame{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(68%, 360px);
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  box-shadow: 0 0 0 9999px rgba(0,0,0,.36);
  border: 1px solid rgba(255,222,120,.60);
  background:
    linear-gradient(var(--brand-3) 0 0) left top / 22px 3px no-repeat,
    linear-gradient(var(--brand-3) 0 0) left top / 3px 22px no-repeat,
    linear-gradient(var(--brand-3) 0 0) right top / 22px 3px no-repeat,
    linear-gradient(var(--brand-3) 0 0) right top / 3px 22px no-repeat,
    linear-gradient(var(--brand-3) 0 0) left bottom / 22px 3px no-repeat,
    linear-gradient(var(--brand-3) 0 0) left bottom / 3px 22px no-repeat,
    linear-gradient(var(--brand-3) 0 0) right bottom / 22px 3px no-repeat,
    linear-gradient(var(--brand-3) 0 0) right bottom / 3px 22px no-repeat;
  pointer-events: none;
  z-index: 3;
}
body.bg .qr-frame::after{
  content:"";
  position:absolute;
  left: 10px;
  right: 10px;
  height: 2px;
  top: 12px;
  background: linear-gradient(90deg, transparent, rgba(255,222,120,.95), transparent);
  opacity: .85;
  animation: qrScan 1.65s linear infinite;
}
@keyframes qrScan{
  0%{ transform: translateY(0); opacity:.55; }
  10%{ opacity:.85; }
  50%{ transform: translateY(calc(100% - 24px)); opacity:.85; }
  90%{ opacity:.70; }
  100%{ transform: translateY(calc(100% - 24px)); opacity:.55; }
}
@media (prefers-reduced-motion: reduce){
  body.bg .qr-frame::after{ animation: none; display:none; }
}
body.bg .qr-hint{
  position:absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.92);
  font-size: 12px;
  letter-spacing: .02em;
  pointer-events: none;
  z-index: 4;
}
body.bg .scan-wrap .overlay{ z-index: 5; }

/* Skeleton loading (devices + training + settings) */
body.bg .skeleton{ position: relative; overflow: hidden; }
body.bg .skeleton::after{
  content:"";
  position:absolute;
  inset:-40% -40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  transform: translateX(-60%);
  animation: skShimmer 1.15s ease-in-out infinite;
  pointer-events:none;
}
@keyframes skShimmer{
  0%{ transform: translateX(-60%); }
  100%{ transform: translateX(60%); }
}
@media (prefers-reduced-motion: reduce){
  body.bg .skeleton::after{ animation:none; display:none; }
}

body.bg .skel-card{
  padding: 14px;
  display:flex;
  flex-direction:column;
  gap: 10px;
  min-height: 124px;
}
body.bg .skel-line{
  height: 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.06);
}
body.bg .skel-line.sm{ height: 10px; opacity: .85; }
body.bg .skel-line.lg{ height: 18px; border-radius: 12px; }
body.bg .skel-row{ display:flex; gap: 10px; align-items:center; }
body.bg .skel-pill{
  height: 34px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.06);
  width: 92px;
}

/* Settings sheet skeleton overlay */
body.bg .settings-sheet .settings-skel{
  position: absolute;
  inset: 0;
  padding: 16px;
  pointer-events: none;
}
body.bg .settings-skel-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 920px){
  body.bg .settings-skel-grid{ grid-template-columns: 1fr; }
}
body.bg .settings-sheet:not(.loading) .settings-skel{ display: none; }
body.bg .settings-sheet.loading .settings-content{ opacity: 0; pointer-events: none; }

/* Empty states */
body.bg .empty-state{
  padding: 18px;
  border-radius: 18px;
  border: 1px dashed rgba(255,255,255,.18);
  background: rgba(255,255,255,.03);
  display:flex;
  gap: 14px;
  align-items:flex-start;
}
body.bg .empty-ico{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: linear-gradient(180deg, rgba(255,222,120,.22), rgba(255,222,120,.08));
  border: 1px solid rgba(255,222,120,.28);
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
  flex: 0 0 auto;
}
body.bg .empty-title{ font-weight: 900; letter-spacing: .2px; margin: 2px 0 4px; }
body.bg .empty-meta{ color: rgba(234,240,255,.74); font-size: 13px; }
body.bg .empty-actions{ margin-top: 10px; display:flex; gap: 10px; flex-wrap: wrap; }
body.bg .empty-actions .btn{ min-height: 40px; }

/* OTP sheet sizing (keeps the verify-code dialog compact) */
body.bg .sheet.sheet-otp{
  width: min(520px, calc(100vw - 24px));
  max-height: min(520px, calc(100vh - 72px));
}
body.bg .sheet.sheet-otp .sheet-body{
  max-height: calc(100vh - 220px);
  overflow: auto;
}
@media (max-width: 520px){
  body.bg .sheet.sheet-otp{
    width: min(480px, calc(100vw - 16px));
    max-height: calc(100vh - 24px);
  }
}

/* Hide hex code next to “Culoare aleasă” (keep value in DOM for payload) */
body.bg .section.section-color input.input{ display: none; }

/* Keep the left-column slider rows readable (don’t change the overall layout)
   Ensures the value badge + numeric input remain visible even in narrow left column. */
body.bg .settings-sheet .settings-content > .cols > .stack:first-child .section.section-slider{
  flex-wrap: nowrap;
}
body.bg .settings-sheet .settings-content > .cols > .stack:first-child .section.section-slider > :nth-child(2){
  flex: 1 1 auto;
  min-width: 0;
}
body.bg .settings-sheet .settings-content > .cols > .stack:first-child .section.section-slider > :nth-child(3){
  flex: 0 0 auto;
  min-width: 72px;
  text-align: center;
}
body.bg .settings-sheet .settings-content > .cols > .stack:first-child .section.section-slider > :nth-child(4){
  flex: 0 0 auto;
  width: 88px;
}
@media (max-width: 640px){
  body.bg .settings-sheet .settings-content > .cols > .stack:first-child .section.section-slider{
    flex-wrap: wrap;
  }
  body.bg .settings-sheet .settings-content > .cols > .stack:first-child .section.section-slider > :nth-child(4){
    width: 100%;
  }
}



/* ===== FIX: Settings sheet (JSN) must not be clipped by nested .cols scroll =====
   Original CSS sets `.modal.open .sheet-body{overflow:hidden}` and pushes scroll to `.sheet-body .cols`,
   which accidentally affects nested `.cols` (JSN #1/#2 grid) and clips content.
   We scope the scroll to the Settings sheet body and allow nested grids to flow naturally.
*/
body.bg .modal.open .sheet.settings-sheet{
  max-height: calc(100vh - 48px);
  height: calc(100vh - 48px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
body.bg .modal.open .sheet.settings-sheet .sheet-body{
  flex: 1 1 auto;
  min-height: 0;
  /* Force a visible scrollbar (QoL): some platforms hide it when idle.
     Using scroll + stable gutter avoids the "appears then disappears" feeling. */
  overflow-y: scroll !important;
  overflow-x: hidden;
  max-height: none !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.28) rgba(255,255,255,.06);
}

/* WebKit scrollbar styling (Chrome/Edge/Safari) — keep it subtle but readable */
body.bg .modal.open .sheet.settings-sheet .sheet-body::-webkit-scrollbar{ width: 10px; }
body.bg .modal.open .sheet.settings-sheet .sheet-body::-webkit-scrollbar-track{
  background: rgba(255,255,255,.06);
  border-radius: 999px;
}
body.bg .modal.open .sheet.settings-sheet .sheet-body::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.22);
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,.35);
}
body.bg .modal.open .sheet.settings-sheet .sheet-body::-webkit-scrollbar-thumb:hover{
  background: rgba(255,255,255,.30);
}
/* Cancel the "scroll-on-all-cols" rule for nested grids inside settings */
body.bg .modal.open .sheet.settings-sheet .sheet-body .cols{
  height: auto !important;
  overflow: visible !important;
}
/* Keep main grid readable */
body.bg .modal.open .sheet.settings-sheet .settings-content > .cols{
  gap: 14px;
  align-content: start;
}