/* Studio styles: team pages (games, approvals, members, settings, wallet). Owned by that page group; shared styles live in
   ../studio.css. Geometry from docs/studio-reference/dom/03-games-list, 30-team-*, 50-dlg-create-game, 51..53-dd-games-*. */

/* page body: the real pages start the content 32px under the 36px title (main y=145 vs title y=77) */
.tm-body { gap: 16px; }

/* ---------------------------------------------------------------- pill + radio menus (dom/51..53) */
.tm-pill { gap: 6px; }
.tm-pill .tm-chev { color: var(--muted-foreground); }
.popover.tm-menu { border-radius: 6px; padding: 4px; min-width: 160px; background: var(--popover); border-color: var(--border); }
.tm-menu-head { padding: 6px 8px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--foreground); }
.tm-menu-sep { height: 1px; background: var(--border); margin: 4px -4px; }
.tm-menu-item {
  position: relative; display: flex; align-items: center; width: 100%; min-height: 36px; padding: 6px 8px 6px 32px; border-radius: 4px;
  font-size: 14px; line-height: 20px; font-weight: 400; color: var(--foreground); text-align: left; white-space: nowrap;
}
.tm-menu-item:hover, .tm-menu-item:focus-visible { background: var(--accent); outline: none; }
.tm-menu-item:disabled { opacity: .5; }
.tm-radio { position: absolute; left: 8px; top: 50%; width: 14px; height: 14px; margin-top: -7px; display: flex; align-items: center; justify-content: center; }
.tm-radio-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--foreground); }
.tm-check { position: absolute; left: 8px; top: 10px; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; color: var(--foreground); }
.tm-check .icon { width: 14px; height: 14px; }

/* ---------------------------------------------------------------- toolbar (search 256×36 + pills, gap 8) */
.tm-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.tm-search { width: 256px; max-width: 100%; height: 36px; font-size: 14px; }
.tm-search::-webkit-search-cancel-button { filter: invert(.6); }
.tm-pills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- row-card tables */
.rtable.tm-table { position: relative; } /* contains .sr-only header labels inside the scroller */
.rtable.tm-table td { padding: 0 16px; height: 56px; }
.rtable.tm-table th { padding: 0 16px; }
.rtable.tm-table th:first-child, .rtable.tm-table td:first-child { padding-left: 20px; }
.rtable.tm-table th:last-child, .rtable.tm-table td:last-child { padding-right: 20px; }
.rtable.tm-table th .th { gap: 8px; }
.rtable.tm-table th.center .th { justify-content: center; }
.rtable.tm-table td.center { text-align: center; }
.rtable.tm-table td.num { white-space: nowrap; }

/* games list: column widths of the 1168px capture (350 / 169 / 160 / 115 / 158 / 125 / 92) */
.tm-games { min-width: 1000px; table-layout: fixed; }
.tm-games col.c-game { width: 30%; }
.tm-games col.c-pub { width: 14.5%; }
.tm-games col.c-appr { width: 13.7%; }
.tm-games col.c-bets { width: 9.8%; }
.tm-games col.c-turn { width: 13.5%; }
.tm-games col.c-profit { width: 10.7%; }
.tm-games col.c-play { width: 92px; }
.tm-games tbody td { height: 120px; }
.tm-games tbody td.tm-game-td { padding-top: 20px; padding-bottom: 20px; }
.tm-games tfoot td { height: 56px; font-weight: 700; }
.tm-games .tm-play-col { text-align: right; padding-left: 0 !important; }
.tm-game-cell { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tm-game-meta { display: flex; flex-direction: column; min-width: 0; gap: 0; }
.tm-thumb { flex: none; border-radius: 6px; overflow: hidden; background: var(--secondary); display: flex; align-items: center; justify-content: center; color: var(--grey-500); }
.tm-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tm-game-name { font-size: 18px; line-height: 24px; font-weight: 600; color: var(--foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-game-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.tm-playing { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; }
.tm-playing .tm-n { font-weight: 500; color: var(--foreground); }
.tm-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); flex: none; }
.tm-yes { color: var(--success); display: inline-flex; }
.tm-no { color: var(--muted-foreground); display: inline-flex; }
.tm-play { height: 32px; padding: 0 12px; gap: 6px; }
.tm-play:disabled { opacity: .5; cursor: not-allowed; }
.tm-play:disabled:hover { background: none; }
.tm-skel-num { display: inline-flex; vertical-align: middle; }

/* approvals list */
.tm-approvals { min-width: 760px; }
.tm-approvals tbody td { height: 72px; }
.tm-game-cell-sm .tm-game-meta { flex-direction: row; align-items: center; gap: 8px; flex-wrap: wrap; }
.tm-approval-name { font-size: 15px; line-height: 20px; font-weight: 600; }
.tm-approval-name:hover { text-decoration: underline; text-underline-offset: 3px; }

/* members (239 / 159 / 414 / 288 / 68 of 1168) */
.tm-members-body { gap: 40px; }
.tm-members { min-width: 820px; }
.tm-members col.c-member { width: 20.5%; }
.tm-members col.c-joined { width: 13.6%; }
.tm-members col.c-email { width: 35.4%; }
.tm-members col.c-role { width: 24.7%; }
.tm-members col.c-act { width: 68px; }
.tm-member { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tm-member img, .tm-member > span:first-child { border-radius: 999px; }
.tm-member-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-email { overflow-wrap: anywhere; }
.tm-actions-col { text-align: right; width: 68px; }
.tm-kebab { width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: var(--foreground); }
.tm-kebab:hover { background: var(--secondary); }
.tm-role-btn {
  width: 256px; max-width: 100%; height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px;
  background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius-field); text-align: left;
}
.tm-role-btn:disabled { cursor: default; }
.tm-role-btn .icon { color: var(--muted-foreground); }
.tm-role-btn:disabled .icon { opacity: .5; }
.tm-role-tags { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; min-width: 0; }
.tm-role-tag { display: inline-flex; align-items: center; padding: 2px 8px; border: 1px solid var(--grey-600); border-radius: 6px; font-size: 12px; line-height: 18px; font-weight: 600; color: var(--foreground); white-space: nowrap; }
.tm-role-item { align-items: flex-start; white-space: normal; max-width: 320px; }
.tm-role-name { display: block; }
.tm-role-hint { display: block; font-size: 12px; line-height: 16px; color: var(--muted-foreground); }
.tm-h2 { font-size: 15px; line-height: 20px; font-weight: 600; }

/* wallet */
.tm-wallet-body { gap: 32px; }
.tm-wallet-intro { display: flex; flex-direction: column; gap: 8px; }
.tm-wallet-intro p { font-size: 14px; line-height: 20px; }
.tm-wallets { min-width: 640px; }
.tm-wallet-type { font-weight: 600; }
.tm-addr { font-size: 13px; color: var(--foreground); overflow-wrap: anywhere; text-align: left; }
.tm-addr:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------- state boxes (approvals empty, wallet error/empty) */
.tm-state-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-card-lg); padding: 32px 24px; }
.tm-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 48px; border-radius: 8px; text-align: center; }
.tm-state-plain { min-height: 266px; }
.tm-state-outline { border: 1px dashed var(--border); padding: 48px 32px; min-height: 272px; }
.tm-state-inner { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 384px; }
.tm-state-icon { width: 40px; height: 40px; border-radius: 8px; background: var(--secondary); display: flex; align-items: center; justify-content: center; margin-bottom: 8px; color: var(--foreground); }
.tm-state-title { font-size: 16px; line-height: 24px; font-weight: 500; }
.tm-state-text { font-size: 14px; line-height: 20px; color: var(--muted-foreground); overflow-wrap: anywhere; text-wrap: balance; }
.tm-state-action { display: flex; gap: 16px; justify-content: center; }

/* ---------------------------------------------------------------- forms: team settings (form 672 wide, gap 24) */
.tm-settings { width: 672px; max-width: 100%; display: flex; flex-direction: column; gap: 24px; }
.tm-field { display: flex; flex-direction: column; gap: 8px; }
.tm-label { font-size: 14px; line-height: 16px; font-weight: 500; color: var(--foreground); padding-top: 1px; }
.tm-input { height: 40px; padding: 8px 12px; }
.tm-input[readonly] { color: var(--muted-foreground); cursor: default; }
.tm-input[readonly]:focus { border-color: var(--input-border); box-shadow: none; }
.tm-input:disabled { opacity: .6; }
.tm-drop {
  border: 1px dashed var(--control-border); border-radius: 10px; padding: 32px 24px; display: flex; flex-direction: column; align-items: center; gap: 16px;
  text-align: center; transition: border-color .15s, background .15s;
}
.tm-drop.drag { border-color: var(--primary); background: var(--primary-tint-12); }
.tm-drop.invalid { border-color: var(--danger); }
.tm-logo-tile { width: 338px; max-width: 100%; height: 134px; border-radius: 12px; background: var(--grey-800); padding: 12px; display: flex; align-items: center; justify-content: center; }
.tm-logo-tile img { max-width: 100%; max-height: 100%; object-fit: contain; }
.tm-drop-text { font-size: 14px; line-height: 20px; color: var(--muted-foreground); }
.tm-upload-link { font-weight: 600; color: var(--foreground); }
.tm-upload-link:hover:not(:disabled) { text-decoration: underline; text-underline-offset: 3px; }
.tm-upload-link:disabled { color: var(--muted-foreground); }
.tm-drop-hint { font-size: 12px; line-height: 18px; color: var(--muted-foreground); margin-top: 4px; }
.tm-drop-file { font-size: 12px; line-height: 18px; color: var(--foreground); margin-top: 6px; }
.tm-logo-rule { font-size: 14px; line-height: 20px; font-weight: 600; }
.tm-save-row { display: flex; justify-content: flex-end; gap: 8px; }

/* dialogs */
.tm-dialog-input { height: 40px; }
.tm-create-form { display: flex; flex-direction: column; gap: 6px; }
.tm-form-tight { gap: 16px; }
.tm-form-tight .field-label { font-size: 14px; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 767px) {
  .tm-toolbar { flex-direction: column; align-items: stretch; }
  .tm-search { width: 100%; }
  .tm-pills { justify-content: flex-start; }
  .tm-state, .tm-state-outline { padding: 32px 16px; }
  .tm-state-card { padding: 16px; }
  .tm-settings { width: 100%; }
}