/* ==================================================================
   dkwin / 3xwin — "Team" bottom-tab-bar icon + action sheet (2026-07-28)
   ------------------------------------------------------------------
   New, standalone CSS file (kept separate from theme-1win.css per
   coordination with the concurrent team-report CSS work). Styles the
   6th tab-bar item injected by index.html (#dk-team-tab) and its
   action sheet (#dk-team-sheet). Loaded LAST, after theme-1win.css.

   NOTE on scoping: the compiled Vue SPA's own tabbar CSS in
   index-bc4da944.css is written against `[data-v-6ab3f23e]` attribute
   selectors, which our plain injected DOM node does NOT carry — so the
   base flex layout (flex:1, column, gap, etc.) must be re-declared here
   explicitly. Cosmetic overrides already in theme-1win.css
   (.tabbar__container-item color/svg/span sizing) are UNscoped and
   already apply to our node automatically, so they are not repeated.
   ================================================================== */

/* ---- the injected 6th tab item — match the other 5's flex layout ---- */
.tabbar__container-item.dk-team-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: .11707rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tabbar__container-item.dk-team-tab svg {
  width: .62rem !important;
  height: .62rem !important;
  display: block;
}
.tabbar__container-item.dk-team-tab:active {
  opacity: .7;
}

/* ==================================================================
   ACTION SHEET (#dk-team-sheet) — "Direct Team / Level Team / Genealogy"
   Simple dark bottom sheet, dependency-free, matches the app's 1win
   palette (bg #0b0c10, cards #15171d, blue accent #1478ff).
   ================================================================== */
#dk-team-sheet-backdrop {
  position: fixed; inset: 0; z-index: 998;
  background: rgba(0,0,0,.55);
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease;
}
#dk-team-sheet-backdrop.dk-show {
  opacity: 1; pointer-events: auto;
}
#dk-team-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 999;
  background: #15171d;
  border-top: 1px solid #262b3a;
  border-radius: 18px 18px 0 0;
  padding: 8px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%);
  transition: transform .26s cubic-bezier(.22,.61,.36,1);
  box-shadow: 0 -10px 34px rgba(0,0,0,.5);
}
#dk-team-sheet.dk-show {
  transform: translateY(0);
}
#dk-team-sheet .dk-ts-grip {
  width: 36px; height: 4px; border-radius: 999px;
  background: #2e323f; margin: 8px auto 14px;
}
#dk-team-sheet .dk-ts-title {
  font-size: 15px; font-weight: 700; color: #ffffff;
  text-align: center; margin-bottom: 14px; letter-spacing: .2px;
}
#dk-team-sheet .dk-ts-opt {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 12px; border-radius: 12px;
  background: #1b1e26; border: 1px solid #252833;
  margin-bottom: 10px; cursor: pointer;
  transition: background .15s ease, transform .12s ease;
}
#dk-team-sheet .dk-ts-opt:active {
  transform: scale(.98); background: #20242e;
}
#dk-team-sheet .dk-ts-opt .dk-ts-ico {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 10px; background: rgba(20,120,255,.14);
  color: #3a92ff; display: flex; align-items: center; justify-content: center;
}
#dk-team-sheet .dk-ts-opt .dk-ts-ico svg { width: 19px; height: 19px; }
#dk-team-sheet .dk-ts-body { flex: 1; }
#dk-team-sheet .dk-ts-lbl {
  font-size: 14.5px; font-weight: 700; color: #ffffff;
}
#dk-team-sheet .dk-ts-sub {
  font-size: 11.5px; color: #9aa3b8; margin-top: 2px;
}
#dk-team-sheet .dk-ts-arrow { color: #6b7280; flex-shrink: 0; }
#dk-team-sheet .dk-ts-cancel {
  width: 100%; text-align: center; padding: 13px;
  margin-top: 4px; border-radius: 12px;
  background: transparent; border: 1px solid #252833;
  color: #9aa3b8; font-size: 14px; font-weight: 700; cursor: pointer;
}
#dk-team-sheet .dk-ts-cancel:active { background: #1b1e26; }