/* VOID R300 — site-wide responsive stability layer
   Goal: keep every page aligned from compact laptops through large desktop screens,
   while preserving each page's existing visual identity. */

:root{
  --r300-gutter:clamp(12px,1.7vw,28px);
  --r300-gutter-compact:clamp(10px,2.7vw,18px);
}

html{
  width:100%;
  max-width:100%;
  overflow-x:clip;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:clip;
}
*,*::before,*::after{box-sizing:border-box}
:where(main,header,footer,nav,section,article,aside,div,form,fieldset,figure){min-width:0}
:where(img,picture,video,canvas,svg){max-width:100%}
:where(img,picture,video){height:auto}
:where(iframe,embed,object){max-width:100%}
:where(pre,code,.code-block){max-width:100%}
pre{overflow:auto}
:where(input,select,textarea,button){max-width:100%}
:where(h1,h2,h3,h4,h5,h6,p,small,strong,span,a,button,label){overflow-wrap:break-word}
:where(.nowrap,[data-nowrap]){overflow-wrap:normal}

/* Shared shells must shrink instead of forcing the viewport wider. */
:where(
  .shell,.container,.page-container,.page-shell,.content-shell,.content-wrap,.main-content,
  .admin-shell,.admin-main,.admin-content,.admin-panel,.admin-card,
  .tg-app,.tg-main,.tg-team-grid,.ts-shell,.ts-main,.ts-card,
  .upr-root,.upr-shell,.upr-card,.messages-shell,.messages-main,
  .club-shell,.club-main,.cases-shell,.inventory-shell,.stats-shell,
  .support-shell,.guide-shell,.news-shell,.vip-shell,.replays-shell
){min-width:0;max-width:100%}

/* Media/content that commonly pushes cards wider on laptop screens. */
:where(.card,.panel,.modal,.dialog,.drawer,.sheet,[class*="__card"],[class*="-card"]){max-width:100%}
:where(.table-wrap,.admin-table-wrap,.ts-table-wrap,.data-table-wrap,.table-scroll,.admin-table-scroll,[class*="table-wrap"]){
  max-width:100%;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
}
:where(.table-wrap,.admin-table-wrap,.ts-table-wrap,.data-table-wrap,.table-scroll,.admin-table-scroll,[class*="table-wrap"]) table{
  max-width:none;
}

/* Flex/grid children should be allowed to shrink. */
:where(.actions,.toolbar,.filters,.filter-row,.button-row,.form-row,.admin-head__actions,.ts-actions,.tg-hero__actions){min-width:0}
:where(.actions,.toolbar,.filters,.filter-row,.button-row,.form-row){max-width:100%}

/* Long URLs / usernames / generated IDs never create horizontal drift. */
:where(.mono,.hash,.request-id,.url,.email,[data-copy-value]){overflow-wrap:anywhere;word-break:break-word}

/* Prevent fixed overlays from exceeding short laptop viewports. */
:where(.modal,.dialog,[role="dialog"]){max-height:min(92dvh,920px)}
:where(.modal__body,.dialog__body,[class*="modal__body"],[class*="dialog__body"]){overscroll-behavior:contain}

/* ---------- Large desktop / laptop ---------- */
@media (max-width:1536px){
  :where(.shell,.container,.page-container,.page-shell){max-width:calc(100vw - (var(--r300-gutter) * 2))}
  .admin-shell{padding-left:var(--r300-gutter)!important;padding-right:var(--r300-gutter)!important}
  .admin-main{min-width:0!important}
  .admin-head{gap:14px!important}
}

@media (max-width:1366px){
  /* 1366×768 is the main laptop stress point: trim whitespace, not content. */
  :where(.shell,.container,.page-container,.page-shell){max-width:calc(100vw - 24px)}
  .admin-shell{grid-template-columns:218px minmax(0,1fr)!important;gap:14px!important;padding:16px 18px 34px!important}
  body[data-admin-page="teams-system"] .admin-shell{grid-template-columns:208px minmax(0,1fr)!important;padding:16px 18px 34px!important}
  .admin-side{padding:14px 11px!important}
  .admin-head h1{font-size:clamp(21px,2.1vw,25px)!important}
  .admin-head p{max-width:64vw!important}
  .admin-dashboard-grid{gap:9px!important}

  .upr-root{max-width:100%!important}
  .upr-hero-content{max-width:calc(100% - 48px)!important}
  .upr-grid.two,.upr-grid.equal{gap:12px!important}

  .ts-shell,.team-management-page .ts-shell{max-width:100%!important}
  .ts-pitch-wrap--unified{grid-template-columns:minmax(0,1fr) minmax(250px,280px)!important}
  .ts-banner-designer{grid-template-columns:minmax(0,1.35fr) minmax(230px,.65fr)!important}
}

@media (max-width:1180px){
  .admin-shell{grid-template-columns:1fr!important}
  body[data-admin-page="teams-system"] .admin-shell{grid-template-columns:1fr!important}
  .admin-side{position:relative!important;top:auto!important;min-height:0!important;max-height:none!important}
  .admin-nav{overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:thin}
  .admin-head p{max-width:760px!important}

  :where(.ts-pitch-wrap--unified,.ts-banner-designer){grid-template-columns:1fr!important}
  .ts-logo-controls{max-height:none!important;overflow:visible!important}

  .upr-grid.two,.upr-grid.equal{grid-template-columns:1fr!important}
  .upr-connections{min-width:0!important}
}


/* Support ticket desktop table enters its compact row mode slightly earlier on
   1280-class laptops so the status column never pushes the page sideways. */
@media (max-width:1320px){
  .support-r277-table-head{display:none!important}
  .support-ticket-list--r277{border-top:1px solid rgba(118,146,163,.13)!important;border-radius:8px!important}
  .support-ticket-list--r277 .support-ticket-card{grid-template-columns:110px minmax(0,1fr) 120px 110px!important}
  .support-ticket-list--r277 .support-ticket-card>div:nth-child(3),
  .support-ticket-list--r277 .support-ticket-card>div:nth-child(4){display:none!important}
}

/* ---------- Tablet / compact window ---------- */
@media (max-width:900px){
  :root{--r300-gutter:var(--r300-gutter-compact)}
  :where(.shell,.container,.page-container,.page-shell){width:100%;max-width:100%;padding-left:var(--r300-gutter);padding-right:var(--r300-gutter)}

  .admin-shell{width:100%!important;max-width:100%!important;padding:12px var(--r300-gutter) 28px!important}
  .admin-head{align-items:flex-start!important;flex-direction:column!important}
  .admin-head__actions{width:100%!important}
  .admin-head__actions>:where(button,a){flex:1 1 auto}
  .admin-grid--editor,.admin-grid--split{grid-template-columns:1fr!important}
  .admin-overview--staff{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .admin-staff-manager{grid-template-columns:1fr!important}

  /* Team and club pages */
  .tg-app{display:block!important}
  .tg-sidebar{position:static!important;width:100%!important;min-height:0!important}
  .tg-main{width:100%!important;max-width:100%!important}
  .tg-toolbar{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
  .tg-search{grid-column:1/-1!important}
  .tg-team-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}

  .ts-form-grid,.ts-settings-grid,.ts-manage-grid,.ts-admin-grid{grid-template-columns:1fr!important}
  .ts-toolbar{display:flex!important;flex-wrap:wrap!important}
  .ts-toolbar>*{flex:1 1 190px}
  .ts-unified-pitch .tm-pitch__surface{min-height:520px!important}

  /* Profile hero should collapse before it starts squeezing text. */
  .upr-hero-content{left:22px!important;right:22px!important;max-width:none!important}
  .upr-meta{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .upr-stats{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .upr-facts,.upr-badges-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}

  /* Dense utility bars wrap instead of overflowing. */
  :where(.page-actions,.section-actions,.hero-actions,.toolbar-actions,.admin-filter-row,.ts-actions,.tg-hero__quick){flex-wrap:wrap!important}
}

/* ---------- Mobile / narrow split-screen ---------- */
@media (max-width:640px){
  body{overflow-x:hidden}
  :where(.shell,.container,.page-container,.page-shell){padding-left:10px!important;padding-right:10px!important}

  .admin-shell{padding:10px 10px 24px!important}
  .admin-side__foot{grid-template-columns:1fr!important}
  .admin-side__quick{min-width:0!important;width:100%!important}
  .admin-head__actions{display:grid!important;grid-template-columns:1fr!important}
  .admin-head__actions>:where(button,a){width:100%!important}
  .admin-overview--staff{grid-template-columns:1fr!important}
  .admin-form__row,.admin-grid--metrics,.admin-grid--split,.admin-grid--editor{grid-template-columns:1fr!important}

  .tg-main{padding-left:10px!important;padding-right:10px!important}
  .tg-hero,.tg-tabs{margin-left:-10px!important;margin-right:-10px!important}
  .tg-toolbar{grid-template-columns:1fr!important}
  .tg-search{grid-column:auto!important}
  .tg-team-grid{grid-template-columns:1fr!important}
  .tg-hero__actions{grid-template-columns:1fr!important}
  .tg-hero__actions>*{grid-column:auto!important;width:100%!important}

  .ts-unified-pitch .tm-pitch__surface{min-height:480px!important}
  .ts-unified-pitch .tm-slot-card{width:min(146px,44%)!important}
  .ts-banner-mode-tabs,.ts-color-grid--banner{grid-template-columns:1fr!important}
  .ts-banner-savebar{display:grid!important;grid-template-columns:1fr!important}
  .ts-logo-upload-dropzone{grid-template-columns:42px minmax(0,1fr)!important;grid-template-areas:"icon title" "icon help" "action action"!important}
  .ts-logo-upload-dropzone em{width:100%!important}

  .upr-root{padding-left:0!important;padding-right:0!important}
  .upr-hero{min-height:620px!important}
  .upr-hero-content{left:16px!important;right:16px!important;bottom:78px!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:10px!important}
  .upr-avatar{--avatar-size:140px!important}
  .upr-identity h1{font-size:clamp(26px,9vw,34px)!important;white-space:normal!important}
  .upr-owner-actions,.upr-public-actions{left:12px!important;right:12px!important;max-width:none!important;flex-wrap:wrap!important}
  .upr-meta,.upr-facts,.upr-badges-grid,.upr-performance-snapshot,.upr-stats,.upr-settings-status,.upr-account-grid{grid-template-columns:1fr 1fr!important}
  .upr-settings-grid{grid-template-columns:1fr!important}
  .upr-connections{grid-template-columns:1fr!important}
  .upr-section-banner{grid-template-columns:1fr!important}
  .upr-section-metrics{display:grid!important;grid-template-columns:1fr 1fr!important;width:100%!important}

  /* Forms and filter controls get full usable width. */
  :where(.filters,.filter-row,.form-row,.button-row,.toolbar,.page-actions,.section-actions){flex-direction:column}
  :where(.filters,.filter-row,.form-row,.button-row,.toolbar,.page-actions,.section-actions)>*{max-width:100%}
  :where(input:not([type="checkbox"]):not([type="radio"]),select,textarea){width:100%}

  /* Keep modal content inside short phones and split-screen windows. */
  :where(.modal,.dialog,[role="dialog"]){width:calc(100vw - 20px)!important;max-width:calc(100vw - 20px)!important;max-height:calc(100dvh - 20px)!important}
}

@media (max-width:420px){
  .upr-meta,.upr-facts,.upr-badges-grid,.upr-performance-snapshot,.upr-stats,.upr-section-metrics{grid-template-columns:1fr!important}
  .tg-tabs{overflow-x:auto!important;scrollbar-width:none}
  .tg-tabs::-webkit-scrollbar{display:none}
  .admin-nav{margin-inline:-4px!important}
  .ts-unified-pitch .tm-pitch__surface{min-height:450px!important}
}

/* Short laptop screens: avoid giant above-the-fold blocks. */
@media (min-width:901px) and (max-height:800px){
  .admin-shell{padding-top:14px!important;padding-bottom:28px!important}
  .admin-head{padding-top:2px!important;padding-bottom:11px!important}
  .tg-hero{min-height:min(300px,38dvh)!important}
  .upr-hero{min-height:min(510px,70dvh)!important}
  .ts-card{scroll-margin-top:72px}
}

/* Respect OS zoom/reduced motion without layout jumps. */
@media (prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto}
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* Dense data tables stay inside their card; columns can scroll without moving the whole page. */
@media (max-width:900px){
  :where(
    .punishment-table,.admin-reward-table,.support-admin-table,.ac59-table,
    .vip-table,.vip-matrix,.ts-table,.tm-player-admin-table,
    body.stats-page .s91-table,body.stats-page .vr90-table,
    .r200-staff-table__head,.r200-staff-row
  ){
    max-width:100%!important;
  }
  :where(
    .punishment-history-panel,.punishment-all-panel,.admin-reward-panel,
    .support-admin-table-wrap,.ac59-table-wrap,.vip-table-wrap,
    .ts-table-wrap,.tm-player-admin-table-wrap,
    body.stats-page .s91-table-scroll,body.stats-page .vr90-table-scroll,
    .r200-staff-table
  ){
    max-width:100%!important;
    overflow-x:auto!important;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
  }
}