/* Sub2API · app polish layer, 2026-11-11.
   Scope: post-login surfaces that still showed the stock look, plus motion/interaction polish.
   Rules: no layout change to the app shell (sidebar / header / main / cards keep their boxes);
   only paint, typography, radius, shadow and transitions. Loaded last, after the app CSS.
   Motion policy: state-driven transitions only. No entrance animation on anything the app or
   driver.js measures or positions, and nothing that starts from opacity 0. */

:root {
  --s2-cyan: 137 222 245;
  --s2-violet: 178 158 248;
  --s2-teal: 20 184 166;
  --s2-ink: 21 38 66;
  --s2-ease-out: cubic-bezier(.22, .72, .2, 1);
  --s2-ease-spring: cubic-bezier(.3, 1.35, .5, 1);
}

/* ------------------------------------------------------------------ *
 * 1. Onboarding tour (driver.js popover)
 *    Was: opaque white box, 12px radius, footer wider than the box so the
 *    primary button was cut off. driver.js draws its own dim overlay; this
 *    layer adds none.
 * ------------------------------------------------------------------ */


.driver-popover.theme-tour-popover {
  max-width: min(520px, calc(100vw - 24px)) !important;
  border-radius: 22px !important;
  border: 1px solid rgb(255 255 255 / .78) !important;
  background-color: rgb(246 250 255 / .80) !important;
  background-image: linear-gradient(140deg, rgb(255 255 255 / .55), transparent 34% 70%, rgb(var(--s2-violet) / .10)) !important;
  color: rgb(var(--s2-ink)) !important;
  box-shadow:
    inset 0 1px rgb(255 255 255 / .95),
    0 34px 90px rgb(20 38 78 / .28),
    0 0 0 1px rgb(var(--s2-violet) / .08),
    0 0 60px rgb(var(--s2-cyan) / .16) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  /* the arrow sits outside the box; overflow:hidden (app default) would clip it */
  overflow: visible !important;
}
.driver-popover.theme-tour-popover .driver-popover-title { border-radius: 22px 22px 0 0; }
.driver-popover.theme-tour-popover .driver-popover-footer { border-radius: 0 0 22px 22px; }
/* hairline highlight along the top edge, same detail as the auth card */
.driver-popover.theme-tour-popover::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgb(var(--s2-cyan)), rgb(var(--s2-violet)), transparent);
  opacity: .9;
}
.driver-popover.theme-tour-popover .driver-popover-title {
  padding: 22px 60px 10px 26px !important;
  font-size: 18px !important;
  font-weight: 650 !important;
  letter-spacing: .01em !important;
  color: rgb(var(--s2-ink)) !important;
}
.driver-popover.theme-tour-popover .driver-popover-description {
  padding: 0 26px 22px !important;
  color: rgb(52 72 104) !important;
}
.driver-popover.theme-tour-popover .driver-popover-close-btn {
  top: 18px !important;
  right: 18px !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 10px !important;
  font-size: 18px !important;
  line-height: 1 !important;
  color: rgb(70 90 122) !important;
  background-color: rgb(var(--s2-ink) / .05) !important;
  transition: background-color .18s ease, color .18s ease, transform .18s var(--s2-ease-out) !important;
}
.driver-popover.theme-tour-popover .driver-popover-close-btn:hover {
  background-color: rgb(var(--s2-ink) / .08) !important;
  color: rgb(var(--s2-ink)) !important;
  transform: rotate(90deg);
}
.driver-popover.theme-tour-popover .driver-popover-description li {
  padding-left: 1.75em;
  text-indent: -1.75em;
}
/* Footer: let the two halves wrap instead of overflowing the box. */
.driver-popover.theme-tour-popover .driver-popover-footer {
  flex-wrap: wrap !important;
  gap: 10px 14px !important;
  padding: 14px 22px 18px !important;
  background-color: transparent !important;
  background-image: linear-gradient(180deg, rgb(var(--s2-ink) / .035), transparent) !important;
  border-top: 1px solid rgb(var(--s2-ink) / .08) !important;
}
.driver-popover.theme-tour-popover .driver-popover-footer .footer-left {
  min-width: 0;
  flex: 1 1 auto;
}
.driver-popover.theme-tour-popover .driver-popover-footer .footer-right {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
  margin-left: auto;
}
.driver-popover.theme-tour-popover .driver-popover-progress-text { color: rgb(78 96 126) !important; }
.driver-popover.theme-tour-popover button {
  border-radius: 12px !important;
  transition: transform .2s var(--s2-ease-out), box-shadow .2s ease, background-color .2s ease, filter .2s ease !important;
}
.driver-popover.theme-tour-popover .driver-popover-next-btn {
  border: 1px solid transparent !important;
  background-color: transparent !important;
  background-origin: border-box !important;
  background-image: linear-gradient(110deg, #22b0a2, #3f9fc6 62%, #6a8fd0) !important;
  color: #fff !important;
  box-shadow: inset 0 1px rgb(255 255 255 / .36), 0 8px 22px rgb(45 138 176 / .30) !important;
}
.driver-popover.theme-tour-popover .driver-popover-next-btn:hover {
  background-color: transparent !important;
  filter: brightness(1.06) saturate(1.05);
  transform: translateY(-1px);
  box-shadow: inset 0 1px rgb(255 255 255 / .42), 0 12px 28px rgb(45 138 176 / .36) !important;
}
.driver-popover.theme-tour-popover .driver-popover-next-btn:active { transform: translateY(0) scale(.98); }
.driver-popover.theme-tour-popover .driver-popover-prev-btn {
  border: 1px solid rgb(var(--s2-ink) / .14) !important;
  background-color: rgb(255 255 255 / .55) !important;
  color: rgb(62 82 114) !important;
  box-shadow: inset 0 1px rgb(255 255 255 / .8) !important;
}
.driver-popover.theme-tour-popover .driver-popover-prev-btn:hover {
  background-color: rgb(255 255 255 / .85) !important;
  color: rgb(var(--s2-ink)) !important;
  transform: translateY(-1px);
}
.driver-popover.theme-tour-popover :is(button, a):focus-visible {
  outline: 2px solid rgb(var(--s2-ink) / .45) !important;
  outline-offset: 2px !important;
}
.dark .driver-popover.theme-tour-popover :is(button, a):focus-visible {
  outline-color: rgb(255 255 255 / .6) !important;
}
/* driver.js focuses the close button whenever a step opens. A full ring there is the loudest thing
   in the header; show a soft inner ring instead (still a visible focus indicator). */
.driver-popover.theme-tour-popover .driver-popover-close-btn:focus-visible {
  outline: none !important;
  box-shadow: inset 0 0 0 1.5px rgb(var(--s2-ink) / .28) !important;
}
.dark .driver-popover.theme-tour-popover .driver-popover-close-btn:focus-visible {
  box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .32) !important;
}
/* Arrow: spotlight steps point at the highlighted element, so keep it and match the panel colour.
   driver.js draws it as a border triangle; only the side facing the target is coloured. */
.driver-popover.theme-tour-popover .driver-popover-arrow { display: block !important; }
.driver-popover.theme-tour-popover .driver-popover-arrow.driver-popover-arrow-none { display: none !important; }
.driver-popover.theme-tour-popover .driver-popover-arrow-side-left   { border-left-color: rgb(246 250 255 / .94) !important; }
.driver-popover.theme-tour-popover .driver-popover-arrow-side-right  { border-right-color: rgb(246 250 255 / .94) !important; }
.driver-popover.theme-tour-popover .driver-popover-arrow-side-top    { border-top-color: rgb(246 250 255 / .94) !important; }
.driver-popover.theme-tour-popover .driver-popover-arrow-side-bottom { border-bottom-color: rgb(246 250 255 / .94) !important; }
.dark .driver-popover.theme-tour-popover .driver-popover-arrow-side-left   { border-left-color: rgb(20 34 64 / .96) !important; }
.dark .driver-popover.theme-tour-popover .driver-popover-arrow-side-right  { border-right-color: rgb(20 34 64 / .96) !important; }
.dark .driver-popover.theme-tour-popover .driver-popover-arrow-side-top    { border-top-color: rgb(20 34 64 / .96) !important; }
.dark .driver-popover.theme-tour-popover .driver-popover-arrow-side-bottom { border-bottom-color: rgb(20 34 64 / .96) !important; }

/* dark theme */
.dark .driver-popover.theme-tour-popover {
  border-color: rgb(var(--s2-cyan) / .34) !important;
  background-color: rgb(12 24 50 / .82) !important;
  background-image: linear-gradient(140deg, rgb(var(--s2-cyan) / .10), transparent 32% 70%, rgb(var(--s2-violet) / .10)) !important;
  color: #eef6ff !important;
  box-shadow:
    inset 0 1px rgb(255 255 255 / .18),
    0 34px 90px rgb(1 8 28 / .55),
    0 0 0 1px rgb(var(--s2-violet) / .08),
    0 0 64px rgb(var(--s2-cyan) / .14) !important;
}
.dark .driver-popover.theme-tour-popover .driver-popover-title { color: #f2f8ff !important; }
.dark .driver-popover.theme-tour-popover .driver-popover-description { color: rgb(200 216 238) !important; }
.dark .driver-popover.theme-tour-popover .driver-popover-footer {
  background-image: linear-gradient(180deg, rgb(var(--s2-cyan) / .05), transparent) !important;
  border-top-color: rgb(var(--s2-cyan) / .16) !important;
}
.dark .driver-popover.theme-tour-popover .driver-popover-progress-text { color: rgb(150 172 204) !important; }
.dark .driver-popover.theme-tour-popover .driver-popover-close-btn { color: rgb(190 208 234) !important; background-color: rgb(255 255 255 / .06) !important; }
.dark .driver-popover.theme-tour-popover .driver-popover-close-btn:hover {
  background-color: rgb(255 255 255 / .09) !important;
  color: #fff !important;
}
.dark .driver-popover.theme-tour-popover .driver-popover-next-btn {
  border-color: transparent !important;
  background-image: linear-gradient(110deg, #86d7e8, #8ab5e5 60%, #a6a0e2) !important;
  color: #102845 !important;
  box-shadow: inset 0 1px rgb(255 255 255 / .5), 0 10px 26px rgb(51 146 186 / .30) !important;
}
.dark .driver-popover.theme-tour-popover .driver-popover-prev-btn {
  border-color: rgb(var(--s2-cyan) / .28) !important;
  background-color: rgb(255 255 255 / .06) !important;
  color: rgb(206 222 244) !important;
  box-shadow: inset 0 1px rgb(255 255 255 / .10) !important;
}
.dark .driver-popover.theme-tour-popover .driver-popover-prev-btn:hover {
  background-color: rgb(255 255 255 / .12) !important;
  color: #fff !important;
}
/* The tour copy has inline pale callouts (background:#f0fdf4 …). On the dark panel the inherited
   light text was unreadable on them: tint the callout instead and keep the text light. */
.dark .driver-popover.theme-tour-popover .driver-popover-description [style*="background"] {
  background: rgb(16 185 129 / .13) !important;
  color: rgb(214 240 230) !important;
}
/* inline keyboard hints inside the tour footer */
.driver-popover.theme-tour-popover kbd {
  border-radius: 6px;
  border: 1px solid rgb(var(--s2-ink) / .14);
  background: rgb(255 255 255 / .6);
  color: rgb(62 82 114);
}
.dark .driver-popover.theme-tour-popover kbd {
  border-color: rgb(var(--s2-cyan) / .25);
  background: rgb(255 255 255 / .07);
  color: rgb(206 222 244);
}

/* ------------------------------------------------------------------ *
 * 2. Sidebar: long labels were cut off ("Recharge / Subscription").
 *    Let the label shrink its letter-spacing-free text with an ellipsis-free
 *    wrap-safe size; the link box itself does not change.
 * ------------------------------------------------------------------ */
.app-shell .sidebar:not([class~="w-[72px]"]) .sidebar-link .sidebar-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(12.5px, .86rem, 14px);
  letter-spacing: -.005em;
}

/* ------------------------------------------------------------------ *
 * 3. Motion and interaction polish (paint only).
 * ------------------------------------------------------------------ */
.app-shell .sidebar-link {
  transition: background-color .22s ease, color .22s ease, transform .22s var(--s2-ease-out), box-shadow .22s ease !important;
}
.app-shell .sidebar-link:hover { transform: translateX(2px); }
.app-shell .sidebar-link:active { transform: translateX(1px) scale(.99); }
.app-shell .sidebar-link svg { transition: transform .26s var(--s2-ease-spring); }
.app-shell .sidebar-link:hover svg { transform: scale(1.08); }

.app-shell .sidebar-link-active {
  background-image: linear-gradient(100deg, rgb(var(--s2-teal) / .14), rgb(var(--s2-violet) / .10));
  box-shadow: inset 0 0 0 1px rgb(var(--s2-teal) / .16), inset 3px 0 0 rgb(var(--s2-teal) / .75);
}
.dark .app-shell .sidebar-link-active {
  background-image: linear-gradient(100deg, rgb(var(--s2-cyan) / .16), rgb(var(--s2-violet) / .12));
  box-shadow: inset 0 0 0 1px rgb(var(--s2-cyan) / .20), inset 3px 0 0 rgb(var(--s2-cyan) / .8);
}

.app-shell main .card {
  transition: box-shadow .28s ease, border-color .28s ease, transform .28s var(--s2-ease-out), background-color .28s ease !important;
}
@media (hover: hover) and (pointer: fine) {
  .app-shell main .card:hover {
    border-color: rgb(var(--s2-cyan) / .42);
    box-shadow: 0 14px 38px rgb(27 43 79 / .11), 0 0 0 1px rgb(var(--s2-cyan) / .10), inset 0 1px rgb(255 255 255 / .7);
  }
  .dark .app-shell main .card:hover {
    border-color: rgb(var(--s2-cyan) / .30);
    box-shadow: 0 16px 42px rgb(1 8 28 / .40), 0 0 0 1px rgb(var(--s2-cyan) / .10), inset 0 1px rgb(255 255 255 / .08);
  }
}

.app-shell .btn { transition: transform .2s var(--s2-ease-out), box-shadow .2s ease, filter .2s ease, background-color .2s ease, color .2s ease !important; }
@media (hover: hover) and (pointer: fine) {
  .app-shell .btn:not(:disabled):hover { transform: translateY(-1px); }
}
.app-shell .btn:not(:disabled):active { transform: translateY(0) scale(.98); }

.app-shell :is(.input, input[type="text"], input[type="search"], select, textarea) {
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.app-shell :is(a, button, [role="button"], .input, select, textarea):focus-visible {
  outline: 2px solid rgb(var(--s2-cyan) / .95);
  outline-offset: 2px;
}

/* modal: match the glass panels instead of a flat white sheet */
.app-shell .modal-content,
body > .modal-overlay .modal-content {
  border-radius: 20px;
}

/* secondary numerals on glass were too faint to read */
.app-shell main .card .text-gray-400 { color: rgb(107 122 146); }
.dark .app-shell main .card .text-gray-400,
.dark .app-shell main .card .dark\:text-gray-500 { color: rgb(148 166 194); }

@media (prefers-reduced-motion: reduce) {
  .app-shell .sidebar-link,
  .app-shell .sidebar-link svg,
  .app-shell .btn,
  .app-shell main .card,
  .driver-popover.theme-tour-popover button,
  .driver-popover.theme-tour-popover .driver-popover-close-btn { transition: none !important; transform: none !important; }
}