html {
    font-size: 14px;
}

.components-reconnect-show, .components-reconnect-failed, .components-reconnect-rejected { display: none; }

@media (min-width: 768px) {
    html { font-size: 16px; height: 100%; }
}

/* Layout adjustments for fixed header & flex footer */
html, body { height: 100%; }
body { min-height: 100dvh; padding-top: var(--site-header-height,70px); /* removed bottom padding now that footer is not fixed */ }
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1055; }
/* Footer now participates in flex layout instead of being fixed */
.site-footer-fixed { position: static; bottom: auto; left: auto; right: auto; z-index: 1; background-color: slategray; margin-top: auto; }
.site-footer-fixed, .site-header nav { backdrop-filter: blur(3px); }
/* Flex container helpers for sticky (non-fixed) footer */
.page-container { min-height: 100dvh; display: flex; flex-direction: column; }
.content-wrap { flex: 1 0 auto; }

@media (max-width: 576px) { body { padding-top: calc(var(--site-header-height,70px) + env(safe-area-inset-top)); /* removed footer safe-area padding */ } }
.main-offset { padding-top: .5rem; }

.header { background-color: slategray }
.h2-sm { font-size: 28px; }

a:link { color: black; }
a:visited { color: black; }
a:hover { color: slateblue; }

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb; }
.btn { border-radius: 10px; }

html { position: relative; min-height: 100%; }

body {
    background: url('../images/colorbackground.jpg') repeat fixed;
    background-position: center; background-size: 600px; width: 100%; background-color: slategray;
}
@media (max-width: 768px){ body { background-attachment: scroll; background-size: 400px; } }

.notLoggedIn { background-color: slategray; box-shadow: 6px 6px 2px 0 rgba(0,0,0,0.75); border-radius: 10px; position: relative; max-width: 700px; margin: auto; }
.notLoggedInSuperpowers { margin: 70px 0 0 40px; }
.powerKey { max-width: 100%; margin: 20px 0 0 0; transform: translateX(-7px) }

.logoImg { width: 190px; display: flex; justify-content: left; margin: 0 0 30px 0; box-shadow: 6px 6px 2px 0 rgba(0,0,0,0.75); border: solid 10px coral; border-radius: 10px; }
.menuLogoImg { max-width: 150px; height: auto; position: relative; }

.socialsImg { width: 25px; height: 25px; }
.discordImg { width: 100px; height: 25px; }
.socialsFlex { display: flex; flex-wrap: wrap; }

/* Responsive image widths */
.img95, .img95logo { width: 100%; max-width: 1000px; height: auto; }
.img95 { box-shadow: 6px 6px 2px 0 rgba(0,0,0,0.75); border: solid 10px cyan; border-radius: 10px; }
.img95logo { border-radius: 10px; }

.notLoggedInLabelBorder1 { color: white; border: hidden; padding: 0 10px; margin: 10px 0 0 20px; font-family: Georgia; }
.notLoggedInLabelBorder2 { color: white; border: hidden; padding: 0 10px 10px 10px; margin: 0 40px; font-size: 12px; font-family: Georgia; }

.notLoggedInTestimonials { color: white; padding: 15px; margin: 10px; width: 50%; font-size: 12px; font-family: Georgia; border: solid white; border-radius: 10px; }
.hrNotLoggedIn { margin: 10px 0; width: 100%; left: 0 }

/* Unified table styling for opaque design */
table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: rgba(230,235,245,.9);
    border-radius: 12px;
    box-shadow: 4px 4px 12px rgba(0,0,0,.35);
    overflow: hidden;
    color: #222;
}

table thead th {
    background: linear-gradient(135deg, slategray, slateblue);
    color: #fff;
    font-weight: 600;
    letter-spacing: .3px;
    padding: .55rem .65rem;
    border: none;
}

table tbody td, table tfoot td {
    padding: .5rem .65rem;
    border-top: 1px solid rgba(0,0,0,.06);
}

table tbody tr:nth-child(even) td { background: rgba(248,249,252,.95); }

table tbody tr:nth-child(odd) td { background: rgba(255,255,255,.95); }

table tbody tr:hover td { background: rgba(70,90,140,.08); }

/* Optional compact and small variants */
.table-sm thead th { padding: .4rem .5rem; }
.table-sm tbody td, .table-sm tfoot td { padding: .35rem .5rem; }

/* Fixed invalid selector: use class .scrollable */
.scrollable { overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; }
.scrollable::-webkit-scrollbar { width: 0; height: 0; }

.thick-border { border-bottom: 3px solid white; border-top: 3px solid white; }
.label-border { color: black; border: hidden; background-color: lightblue; padding: 3px; box-shadow: 6px 6px 2px 0 rgba(0,0,0,0.75); border-radius: 10px; }
.label-border-user { color: white; font-family: Georgia; border: hidden; background-color: slategray; padding: 3px; box-shadow: 6px 6px 2px 0 rgba(0,0,0,0.75); border-radius: 10px; }

.loginBox, .registerBox { color: white; border: hidden; background-color: slategray; padding: 2rem; box-shadow: 6px 6px 2px 0 rgba(0,0,0,0.75); border-radius: 10px; margin: 0; width: 100%; max-width: 400px; }
@media (max-width: 576px){ .loginBox, .registerBox { padding: 1.25rem; } }

.btn-padding { margin: 0 0 0 10px; }
.carousel-inner img { margin: auto; }

.carousel-control-next, .carousel-control-prev { filter: invert(100%); height: 70%; }

.standings-prev, .standings-next { position: absolute; top: 0; bottom: 0; z-index: 1; display: flex; align-items: center; justify-content: center; width: 15%; padding: 0; color: black; text-align: center; background: none; border: 0; opacity: 0.5; transition: opacity .65s ease; height: 1%; }
@media (prefers-reduced-motion: reduce) { .standings-prev, .standings-next { transition: none; } }
.standings-prev:hover, .standings-next:hover, .standings-next:focus { color: black; text-decoration: none; outline: 0; opacity: .9; }
.standings-prev { left: 0; }
.standings-next { right: 0; }

label { color: white; font-size: larger; }

/* Responsive ad containers */
.adSizeSide { border: solid gray; background-color: white; color: black; width: 120px; min-height: 600px; }
@media (max-width: 991.98px){ .adSizeSide { display: none; } }
.adSizeBottom { border: solid gray; background-color: white; color: black; text-align: center; width: 100%; max-width: 970px; min-height: 90px; margin: 0 auto; }
.ad-responsive { display:block; text-align:center; }

.right_align { text-align: right; float: right; padding: 3px; }
.left_align { text-align: left; float: left; padding: 3px; }
.center_align { text-align: center; float: left; }
.fieldBlock { padding: 10px; display: inline-block; }
.wrap-left, .wrap-right, .wrap { height: 100%; display: flex; }
.wrap-left { align-items: flex-start; justify-content: left; }
.wrap-right { align-items: flex-end; justify-content: right; }
.wrap { align-items: center; justify-content: center; }

/* Button base sizing improved for touch */
.button, .buttonBench, .buttonDrop, .buttonAdd, .buttonSubmit, .buttonLogout, .buttonTeamChat, .buttonTeamChatSelected { line-height: 1.2; }
.button:not([disabled]) { width: auto; min-height: 40px; font-size: 13px; color: ghostwhite; background-color: slategray; border: black; border-radius: 45px; box-shadow: 0 6px 10px black; transition: all .3s ease; cursor: pointer; padding: 4px 10px; text-align: center; }
.button:disabled { width: auto; min-height: 40px; font-size: 13px; color: dimgray; background-color: lightgray; border: black; border-radius: 45px; box-shadow: 0 6px 10px black; padding: 4px 10px; text-align: center; }
.list-button { padding: 5px 3px 1px 5px; }
.buttonBench, .buttonDrop, .buttonAdd { min-height: 34px, font-size: 12px; padding: 4px 12px; }
.buttonBench { color: black; background-color: honeydew; box-shadow: 3px 5px 5px black; margin: 3px 5px; border-radius: 45px; }
.buttonDrop { color: black; background-color: palevioletred; box-shadow: 3px 5px 5px black; margin: 3px 10px; border-radius: 45px; }
.buttonAdd { color: black; background-color: lightblue; box-shadow: 0 6px 10px black; margin: 5px; border-radius: 45px; }
.buttonSubmit { font-size: 20px; color: black; background-color: slategray; border: black; border-radius: 45px; box-shadow: 3px 5px 5px black; padding: 6px 18px; margin: 10px; }
.buttonLogout { height: 40px; width: 80px; font-size: 13px; color: black; background-color: palevioletred; border: black; border-radius: 45px; padding: 4px 10px; margin: 0 10px; }
.buttonTeamChat, .buttonTeamChatSelected { min-height: 34px; font-size: 12px; color: black; border: black; border-radius: 10px; padding: 4px 10px; margin: 5px; }
.buttonTeamChat { background-color: lightgrey; }
.buttonTeamChatSelected { background-color: darkgray; }

.buttonSubmit:hover:not([disabled]) { background-color: slateblue; box-shadow: 0 6px 10px black; color: white; transform: translateY(-1px); }
.buttonAdd:hover:not([disabled]) { background-color: slateblue; box-shadow: 0 6px 10px black; color: white, transform: translateY(-1px); }
.buttonAdd:disabled { background-color: lightgrey; box-shadow: 0 6px 10px black; color: dimgray; }
.button:hover:not([disabled]) { background-color: slateblue; box-shadow: 0 6px 10px black; color: white; transform: translateY(-1px); }
.buttonBench:hover:not([disabled]) { background-color: navajowhite; box-shadow: 0 6px 10px black; color: black; transform: translateY(-1px); }
.buttonDrop:hover:not([disabled]) { background-color: indianred; box-shadow: 0 6px 10px black; color: white; transform: translateY(-1px); }
.buttonLogout:hover { background-color: indianred; color: white; transform: translateY(-1px); }
.buttonTeamChat:hover { background-color: darkgray; color: black; transform: translateY(-1px) translateX(-1px); }

.flex-container { display: flex; justify-content: space-between; }
.flexImgContainer { display: flex; justify-content: center; margin: auto; }
.bg-slateGrey { --bs-bg-opacity: 1; background-color: slategray !important; color: ghostwhite; }
.bg-darkSlateGrey { --bs-bg-opacity: 1; background-color: slategray !important; color: black; }

.trNotResizable { height: 1px; }

/* Table rounded corners restored */
table.rounded-corners { border-collapse: separate; border-spacing: 0; box-shadow: 6px 6px 2px 0 rgba(0,0,0,0.75); border-radius: 10px; overflow: hidden; }
/* Use unified table header/body styles above; keep only radius helpers */
 table.rounded-corners thead tr:first-child th:first-child { border-top-left-radius: 10px; }
 table.rounded-corners thead tr:first-child th:last-child { border-top-right-radius: 10px; }
 table.rounded-corners tbody tr:last-child td:first-child { border-bottom-left-radius: 10px; }
 table.rounded-corners tbody tr:last-child td:last-child { border-bottom-right-radius: 10px; }

.card-bg, .card-bg-general, .card-bg-draft { background-color: lightsteelblue; border: none; padding: 10px; margin: 0 8px 12px 8px; border-radius: 10px; box-shadow: 6px 6px 2px 0 rgba(0,0,0,0.5); min-width: 250px; max-width: 300px; float: right; }
.card-bg { min-height: 480px; height: auto; }
.card-bg-draft { min-height: 480px; }
@media (max-width: 992px){ .card-bg, .card-bg-general, .card-bg-draft { float:none; max-width:100%; width:100%; } }

.teamRoster { height: auto; float: left; margin: auto; }
.flexItem { display: inline-block; }
.flexTeam { justify-content: flex-end; flex-direction: column; }
.blockPage { display: block; }

.chat-message, .my-chat-message, .system-message { margin: 10px 0; color: black; border: hidden; background-color: lightgray; padding: 6px 8px; box-shadow: 2px 3px 4px rgba(0,0,0,.4); border-radius: 10px; width: 100%; max-width: 90%; font-size: 13px; font-family: Georgia; }
.my-chat-message { background-color: lightslategray; }
.system-message { background-color: dimgray; color: white; }
.chat-scrollmessage { max-height: 55vh; overflow-y: auto; display: flex; flex-direction: column-reverse; }

.nobull { list-style-type: none; height: 20px; font-size: 16px; }
.chatTextbox { width: 24rem; min-height: 46px; max-height: 140px; resize: vertical; padding: .45rem .55rem; font-size: .85rem; line-height: 1.25; border-radius: 10px; border: 1px solid #666; box-shadow: inset 0 1px 2px rgba(0,0,0,.25); background: #f8f9fb; }
.chatTextbox:focus { outline: 2px solid slateblue; outline-offset: 1px; }
.bidTextBox { width: 50px; }
.searchTextBox { width: 200px; margin: 0 0 0 8px; }
.chatTitle { color: black; font-size: large; font-weight: bold; margin: 0; }
.chatTeamsConnected { color: black; font-size: x-small; font-weight: bold; margin: 0; }
.rentSuperDiv { margin: 0 0 20px 0; }
.form-label { color: dimgray }
.draftMargin { margin: 5px }
.currentAuctionInfo { color: black; }
.playersWonTable { height: auto; width: 100%; max-width: 290px; border-radius: 10px; font-size: 14px; }
.draft-complete-msg { color: mediumslateblue }
.circle { width: 10px; height: 10px; border-radius: 50%; margin: 20px; }
.green-circle { background-color: green; }
.red-circle { background-color: red; }
.leagueSettingsMouseOver { cursor: pointer; }

#container { list-style: none; font-family: arial; font-size: 20px; }
#container li { margin: 10px; position: relative; cursor: pointer; }
#container h3 { margin: 0; font-size: 24px; }
#container span { position: absolute; right: 5px; top: 0; color: #000; font-size: 18px; }
#container .panel { margin: 5px 0; display: none; }

.faq-header { font-size: 20px; font-family: Georgia; color: white; }
.faq-text { font-size: 15px; font-family: Georgia; color: antiquewhite; }
.activate-league-text { font-size: 20px; color: black; text-align: center; }
.activate-card-bg { background-color: lightsteelblue; border: none; padding: 5px; margin: 0 8px; border-radius: 10px; box-shadow: 0 6px 10px 0 rgba(0,0,0,0.75); min-width: 300px; max-width: 350px; float: right; }

.dropdown-menu li { position: relative; }
.dropdown-menu .dropdown-submenu { display: none; position: absolute; left: 100%; top: -7px; }
.dropdown-menu .dropdown-submenu-left { right: 100%; left: auto; }
.dropdown-menu > li:hover > .dropdown-submenu { display: block; }

/* Removed duplicate reconnect styles (kept at top) */

.entry-content .google-auto-placed.ap_container { clear: none; position: static !important; margin: 1.5em 0; max-width: 100%; box-sizing: border-box; min-height: 300px; }
.entry-content .google-auto-placed.ap_container iframe { position: static !important; max-width: 100%; height: auto; }

/* Navigation overlay & collapsible styles */
.navbar-nav { position: relative; }
.nav-root { position: relative; }
.nav-root-toggle { cursor: pointer; }
.nav-overlay { position: absolute; top: 100%; left: 0; background: #212529; border: 1px solid rgba(255,255,255,.15); min-width: 14rem; max-height: 70vh; overflow-y: auto; padding: .25rem 0; z-index: 1050; box-shadow: 0 .5rem 1rem rgba(0,0,0,.4); }
.nav-overlay ul > li > a.dropdown-item { white-space: normal; }
.nav-overlay .submenu-toggle { font-size: .85rem; text-decoration: none; position: relative; }
.submenu-toggle .indicator { margin-left: .35rem; display: inline-block; transform: rotate(0deg); transition: transform .18s ease; font-size: .6rem; }
.submenu-toggle[aria-expanded="true"] .indicator { transform: rotate(90deg); }
.submenu-toggle .indicator::before { content: '\25B6'; }
.nav-overlay .collapse { transition: height .2s ease; }
.collapse:not(.show) { display: none; }
.nav-link, .dropdown-item, .submenu-toggle { padding-top: .45rem !important; padding-bottom: .45rem !important; }
@media (max-width: 991.98px){ .nav-overlay { left: 0; right: 0; width: 100%; max-width: none; } }

/* ============================================================ */
/* Team Page Responsive Layout                                  */
/* ============================================================ */
.team-page-wrapper { width: 100%; margin: 0 auto; }

.team-layout-toolbar { display: flex; gap: .5rem; justify-content: center; padding: .35rem .5rem; position: sticky; top: calc(var(--site-header-height,70px) + 0px); background: rgba(112,128,144,.9); backdrop-filter: blur(3px); z-index: 100; }
.team-layout-toolbar .toolbar-btn { flex: 1 1 auto; font-size: .85rem; }
.team-layout-toolbar .toolbar-btn {
  background: linear-gradient(135deg, slateblue, #7b68ee);
  color: #fff;
  border: none;
  border-radius: 12px;
  box-shadow: none;
  padding: .5rem .75rem;
  min-height: 40px;
  font-weight: 600;
  letter-spacing: .3px;
}

.team-layout-toolbar .toolbar-btn:hover,
.team-layout-toolbar .toolbar-btn:focus {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.team-layout-toolbar .toolbar-btn:active {
  transform: translateY(0);
}
 /* Ensure base .buttonAdd style does not leak in toolbar */
.team-layout-toolbar .toolbar-btn.buttonAdd {
  background: linear-gradient(135deg, slateblue, #7b68ee);
  color: #fff;
  box-shadow: none;
}

.team-layout { display: grid; grid-template-columns: minmax(0,1fr); gap: .75rem; align-items: start; }

/* Panels base */
.panel-left, .panel-right, .panel-center { position: relative; }
.team-panel-card { height: 100%; display: flex; flex-direction: column; }
.panel-scroll { overflow-y: auto; max-height: calc(100vh - 170px); padding-right: 4px; }
@media (min-width: 992px) { .panel-scroll { max-height: calc(100vh - 140px); } }

/* Center panel emphasis */
.card-bg-center { background: rgba(230,235,245,.85); padding: .5rem; border-radius: 12px; box-shadow: 4px 4px 12px rgba(0,0,0,.35); }

.section-header { font-weight: 600; letter-spacing: .5px; margin: .25rem 0 .35rem; color: #222; }
.section-subheader { font-weight: 500; margin: .5rem 0 .25rem; color: #333; }
.meta-line { font-size: .9rem; line-height: 1.3; }
.link-matchup { text-decoration: underline; text-underline-offset: 2px; }
.action-group { display: flex; flex-wrap: wrap; gap: .4rem; }
.grouped-inline select { margin-left: 4px; }
.settings-icons img { width: 20px, height: 20px; margin-left: 6px; }
.rented-superpowers { margin-top: .35rem; }

/* Desktop (?992px): 3 columns */
@media (min-width: 992px) {
  .team-layout { grid-template-columns: 280px minmax(0,1fr) 320px; }
  .panel-left { order: 1; }
  .panel-center { order: 2; }
  .panel-right { order: 3; }
  .team-layout-toolbar { display: none; }
  .collapsible-panel { display: block !important; opacity: 1 !important; visibility: visible !important; transform: none !important; }
}

/* Medium (?768px <992px): 2 columns (left collapses via toolbar) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .team-layout { grid-template-columns: minmax(0,1fr) 300px; }
  .panel-left { grid-column: 1 / -1; }
  .panel-right { grid-column: 2; }
  .panel-center { grid-column: 1 / 2; }
}

/* Mobile: stacked with toggles. Panels hidden until opened */
@media (max-width: 991.98px) {
  .collapsible-panel { display: none; }
  .collapsible-panel.is-open { display: block; animation: panelFade .25s ease; }
}
@keyframes panelFade { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

/* Improve scroll on iOS */
.panel-scroll { -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.panel-scroll::-webkit-scrollbar { width: 6px; }
.panel-scroll::-webkit-scrollbar-track { background: transparent; }
.panel-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,.25); border-radius: 3px; }

/* Chat card enhancements */
.chat-card { min-height: 400px;}

/* Unified sidebar card (left panel) */
.sidebar-card { background: rgba(230,235,245,.9); border-radius: 14px; box-shadow: 0 4px 14px rgba(0,0,0,.25); overflow: hidden; display: flex; flex-direction: column; }
.sidebar-card-header { background: linear-gradient(135deg, slategray, slateblue); color: #fff; padding: .55rem .75rem; font-weight: 600; letter-spacing: .4px; }
.sidebar-card-body { padding: .5rem .5rem; display: flex; flex-direction: column; gap: .6rem; }
.sidebar-section { background: rgba(255,255,255,.85); border: 1px solid rgba(0,0,0,.06); border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.12); overflow: hidden; }
.sidebar-section-title { margin: 0; padding: .45rem .6rem; background: linear-gradient(135deg, slategray, slateblue); color: #fff; font-size: .85rem; font-weight: 600; }
.sidebar-section-body { padding: .5rem .6rem; background: rgba(248,249,252,.95); }

/* Dense variant for phones */
@media (max-width: 576px){
  .sidebar-card-header { padding: .45rem .55rem; }
  .sidebar-section-title { padding: .4rem .5rem; font-size: .8rem; }
  .sidebar-section-body { padding: .45rem .5rem; }
}

/* Utility */
.visually-hidden { position: absolute !important; clip: rect(1px,1px,1px,1px); width:1px; height:1px; overflow:hidden; white-space:nowrap; border:0; padding:0; margin:0; }

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.6) transparent;
}

*::-webkit-scrollbar {
  width: 8px;
}

*::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.6);
  border-radius: 4px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

/* Slight tightening for small phones */
@media (max-width: 420px) {
  .team-layout-toolbar { gap: .35rem; }
  .team-layout-toolbar .toolbar-btn { font-size: .75rem; padding: 4px 6px; }
  .buttonAdd, .buttonDrop, .buttonBench { font-size: 11px; padding: 4px 10px; }
}

/* Floating Chat Bubble & Overlay */
.chat-fab-wrapper { position: fixed; bottom: 18px; right: 18px; z-index: 1200; }
.chat-fab { position: relative; display: flex; align-items: center; gap: .85rem; background: linear-gradient(135deg, slateblue, slategray); color: #fff; border: none; border-radius: 40px; padding: .85rem .85rem .85rem .85rem; box-shadow: 0 6px 18px rgba(0,0,0,.4); cursor: pointer; font-size: 1rem; font-weight: 600; letter-spacing: .5px; }
.chat-fab:focus { outline: 2px solid #fff; outline-offset: 2px; }
.chat-fab .fab-dot { width: 12px; height: 12px; background: #2ecc71; border-radius: 50%; box-shadow: 0 0 0 0 rgba(46,204,113,.6); animation: pulseLive 2.6s infinite; }
.chat-fab .fab-dot.open { background: #ff6b6b; animation: none; }
.chat-fab .fab-label { line-height: 1; }
@keyframes pulseLive { 0% { box-shadow: 0 0 0 0 rgba(46,204,113,.6); } 70% { box-shadow: 0 0 0 12px rgba(46,204,113,0); } 100% { box-shadow: 0 0 0 0 rgba(46,204,113,0); }
}

.chat-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); backdrop-filter: blur(3px); display: flex; align-items: flex-end; justify-content: flex-end; padding: 70px 16px 16px; z-index: 1199; }
@media (min-width: 640px) { .chat-overlay { align-items: center; padding: 80px 32px 32px; } }
.chat-overlay-panel { background: #eef2f7; width: 100%; max-width: 480px; height: 70vh; max-height: 760px; border-radius: 18px; box-shadow: 0 10px 28px rgba(0,0,0,.55); display: flex; flex-direction: column; overflow: hidden; animation: chatIn .25s ease; }
@keyframes chatIn { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity:1; transform: translateY(0) scale(1); } }
.chat-overlay-header { display: flex; align-items: center; justify-content: space-between; padding: .65rem .9rem; background: linear-gradient(135deg, slategray, slateblue); color: #fff; }
.chat-overlay-title { font-size: 1rem; font-weight: 600; letter-spacing: .5px; }
.chat-overlay-close { background: none; border: none; color: #fff; font-size: 1.25rem; line-height: 1; cursor: pointer; padding: .25rem .45rem; border-radius: 6px; }
.chat-overlay-close:hover { background: rgba(255,255,255,.15); }
.chat-overlay-body { flex: 1; display: flex; flex-direction: column; padding: .5rem .6rem; overflow: hidden; }
.chat-overlay-body .chat-scrollmessage { flex: 1; }

/* Make existing chat component adapt inside overlay (remove outer card spacing) */
.chat-overlay-body .chatTitle { font-size: .9rem; }
.chat-overlay-body .chatTeamsConnected { font-size: .55rem; }
.chat-overlay-body input.chatTextbox { font-size: .8rem; }

/* Hide legacy inline chat panels where bubble is used (optional per page) */
.page-has-chat-bubble .panel-right { display: none !important; }

/* Responsive adjustments for very small devices */
@media (max-width: 420px){ .chat-overlay-panel { height: 78vh; border-radius: 14px; } }

/* --- DM Chat (TeamChatComponent) Enhancements --- */
.team-dm-chat-wrapper { width:100%; margin:0 auto; padding: .25rem .35rem; }
.dm-chat-layout { display:grid; grid-template-columns: 260px minmax(0,1fr); gap:.75rem; align-items:stretch; }
@media (max-width: 900px){ .dm-chat-layout { grid-template-columns: minmax(0,1fr); } .conversation-pane { order:2; } .active-conversation-pane { order:1; } }

.conversation-pane { background: rgba(230,235,245,.9); border-radius:14px; box-shadow: 0 4px 14px rgba(0,0,0,.25); display:flex; flex-direction:column; min-height:520px; max-height:78vh; overflow:hidden; }
.conversation-header { display:flex; justify-content:space-between; align-items:center; padding:.55rem .75rem; background: linear-gradient(135deg, slategray, slateblue); color:#fff; }
.conversation-header .me-name { font-weight:600; font-size:.9rem; letter-spacing:.5px; }
.connection-status { display:flex; align-items:center; gap:.4rem; font-size:.65rem; text-transform:uppercase; letter-spacing:1px; opacity:.85; }
.status-dot { width:10px; height:10px; border-radius:50%; box-shadow:0 0 0 1px rgba(255,255,255,.4); }
.status-dot.online { background:#2ecc71; }
.status-dot.offline { background:#e74c3c; }
.status-text { font-weight:600; }
.conversation-search { padding:.45rem .65rem; border-bottom:1px solid rgba(0,0,0,.08); }
.conversation-search-box { width:100%; font-size:.8rem; padding:.4rem .55rem; border-radius:8px; border:1px solid #bbb; background:#f9fafc; }
.conversation-search-box:focus { outline:2px solid slateblue; outline-offset:1px; }
.conversation-list { list-style:none; margin:0; padding:.25rem 0 .5rem; overflow-y:auto; flex:1 1 auto; scrollbar-width:thin; }
.conversation-list::-webkit-scrollbar { width:6px; }
.conversation-list::-webkit-scrollbar-thumb { background:rgba(0,0,0,.25); border-radius:3px; }
.conversation-item { padding:.5rem .7rem .55rem; cursor:pointer; display:flex; gap:.5rem; align-items:flex-start; position:relative; border-left:4px solid transparent; transition: background .15s ease, border-color .2s ease; }
.conversation-item:hover { background:rgba(0,0,0,.06); }
.conversation-item.active { background:rgba(70,90,140,.25); border-left-color:slateblue; }
.conversation-main { display:flex; flex-direction:column; flex:1 1 auto; min-width:0; }
.conversation-name { font-weight:600; font-size:.8rem; color:#222; line-height:1.1; }
.conversation-preview { font-size:.66rem; color:#444; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:160px; }
.conversation-meta { display:flex; align-items:center; }
.unread-badge { background:linear-gradient(135deg, #ff6b6b, #c0392b); color:#fff; font-size:.55rem; font-weight:600; padding:2px 6px 3px; border-radius:11px; min-width:22px; text-align:center; box-shadow:0 2px 6px rgba(0,0,0,.35); }
.conversation-footer { padding:.45rem .6rem; border-top:1px solid rgba(0,0,0,.08); display:flex; justify-content:flex-end; }
.conversation-footer .button.small { font-size:.6rem; padding:4px 10px; min-height:32px; }

.active-conversation-pane { background: rgba(244,247,252,.85); border-radius:14px; display:flex; flex-direction:column; box-shadow:0 4px 16px rgba(0,0,0,.25); min-height:520px; max-height:78vh; overflow:hidden; position:relative; }
.active-conversation-header { display:flex; justify-content:space-between; align-items:center; padding:.65rem .85rem .55rem; background:linear-gradient(135deg, slategray, slateblue); color:#fff; }
.chat-title-group { display:flex; flex-direction:column; }
.conversation-title { font-size:.95rem; font-weight:600; margin:0; letter-spacing:.5px; }
.sub-meta { font-size:.55rem; text-transform:uppercase; letter-spacing:1px; opacity:.9; font-weight:600; }
.chat-actions { display:flex; gap:.4rem; }
.button.small.outline { background:rgba(255,255,255,.15); color:#fff; font-size:.7rem; padding:4px 10px; min-height:32px; border-radius:8px; box-shadow:none; }
.button.small.outline:hover { background:rgba(255,255,255,.3); }

.messages-container { flex:1 1 auto; overflow-y:auto; padding:.6rem .75rem; display:flex; flex-direction:column; scrollbar-width:thin; }
.messages-container::-webkit-scrollbar { width:8px; }
.messages-container::-webkit-scrollbar-thumb { background:rgba(0,0,0,.25); border-radius:4px; }
.chat-scrollmessage.no-reverse { display:flex; flex-direction:column; gap:.4rem; }
.message-row { display:flex; width:100%; }
.message-row.mine { justify-content:flex-end; }
.message-row.theirs { justify-content:flex-start; }
.message-bubble { max-width:70%; padding:.5rem .65rem .55rem; border-radius:16px; position:relative; font-size:.72rem; line-height:1.25; box-shadow:0 2px 6px rgba(0,0,0,.25); white-space:pre-wrap; word-break:break-word; }
.message-row.mine .message-bubble { border-bottom-right-radius:4px; }
.message-row.theirs .message-bubble { border-bottom-left-radius:4px; }
.message-bubble.my-chat-message { background:linear-gradient(135deg, slateblue, slategray); color:#fff; }
.message-bubble.chat-message { background:#fff; color:#222; }
.message-bubble.system-message { background:#444; color:#fff; font-style:italic; }
.message-text { white-space:pre-wrap; }
.empty-conversation { margin:auto; text-align:center; font-size:.75rem; color:#555; padding:2rem 1rem; font-weight:500; }

.composer-wrapper { border-top:1px solid rgba(0,0,0,.08); display:grid; grid-template-columns: 1fr auto; grid-template-areas: 'box btn'; padding:.55rem .75rem .65rem; gap:.6rem; background:#eef2f7; position:relative; }
.composer-box { grid-area:box; width:100%; min-height:48px; max-height:140px; resize:vertical; font-size:.75rem; line-height:1.3; border-radius:10px; border:1px solid #777; padding:.55rem .6rem; background:#fff; box-shadow: inset 0 1px 2px rgba(0,0,0,.15); }
.composer-box:focus { outline:2px solid slateblue; outline-offset:1px; }
.composer-actions { grid-area:btn; display:flex; align-items:flex-end; }
.send-button { min-width:84px; }
.char-counter { position:absolute; right:calc(.75rem + 90px); bottom:.8rem; font-size:.55rem; font-weight:600; color:#555; letter-spacing:.5px; }
.char-counter.warn { color:#d35400; }
.char-counter.over { color:#c0392b; }

/* --- DM Chat Enhancements --- */

/* New chat icon wrapper for online status badges */
.chat-icon-wrapper {
    position: relative;
    display: inline-block;
    line-height: 0;
}
.chat-unread-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: transparent !important;
    color: #c40000 !important; /* red number */
    font-size: 11px;
    font-weight: 1000;
    padding: 0 !important;
    min-width: 0;
    border-radius: 0;
    text-align: center;
    box-shadow: none !important;
    line-height: 1;
    text-decoration: none !important;
    pointer-events: none;
}

.presence-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:#2ecc71; margin-right:4px; box-shadow:0 0 0 1px rgba(0,0,0,.25); vertical-align:middle; }

/* Mobile condensed chat enhancements */
@media (max-width: 720px){
  .dm-chat-layout.mobile-condensed { grid-template-columns: 1fr; }
  .conversation-pane { position: fixed; inset: 0 0 0 0; max-height:none; z-index:1300; transform: translateX(-100%); transition: transform .25s ease; border-radius:0; box-shadow: 0 0 0 rgba(0,0,0,0); }
  .conversation-pane.mobile-visible { transform: translateX(0); box-shadow: 0 10px 24px rgba(0,0,0,.35); }
  .mobile-overlay-dismiss { position: fixed; inset:0; background: rgba(0,0,0,.45); z-index:1295; }
  .mobile-chat-toggle { background: none; border: none; font-size: 1.15rem; line-height:1; padding: .15rem .4rem; margin-right:.35rem; border-radius:6px; color:#fff; background:rgba(255,255,255,.15); }
  .mobile-chat-toggle:active, .mobile-chat-toggle:hover { background:rgba(255,255,255,.25); }
  .mobile-close-pane { background:none; border:none; font-size:1.4rem; line-height:1; padding:.25rem .55rem; margin-left:auto; color:#fff; background:rgba(255,255,255,.15); border-radius:6px; }
  .mobile-close-pane:hover { background:rgba(255,255,255,.3); }
  .active-conversation-header.compact { padding:.45rem .55rem; }
  .conversation-header.mobile-only-flex { display:flex; align-items:center; gap:.5rem; }
  .conversation-item.condensed { padding:.45rem .6rem; }
  .conversation-item.condensed .conversation-preview { font-size:.6rem; }
  .conversation-item.condensed .conversation-name { font-size:.75rem; }
  .presence-dot { width:7px; height:7px; margin-right:3px; }
  .messages-container.condensed { padding:.4rem .5rem; }
  .message-bubble.slim { padding:.4rem .5rem; font-size:.68rem; }
  .composer-wrapper.compact { grid-template-columns: 1fr auto; padding:.4rem .45rem .45rem; }
  .composer-box.compact { min-height:40px; font-size:.7rem; line-height:1.25; }
  .send-button.minimal { min-width:52px; padding:.4rem .6rem; }
  .char-counter.sm-hide, .sub-meta.sm-hide { display:none !important; }
  .conversation-title.truncate { max-width: 60vw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .header-line { display:flex; align-items:center; }
}

/* === SuperpowerChoices Themed Layout (purple gradient) === */
.spc-page { width:100%; max-width:1200px; margin:0 auto; padding:.5rem .5rem .85rem; }
.spc-header { background: linear-gradient(135deg, slategray, slateblue); color:#fff; border-radius: 12px; padding: .6rem .85rem; margin: .25rem 0 .6rem; box-shadow: 0 4px 14px rgba(0,0,0,.25); font-weight: 600; letter-spacing: .4px; }
.spc-title { margin:0; font-size:1.05rem; }

.spc-card { background: rgba(230,235,245,.92); border-radius: 14px; box-shadow: 0 6px 18px rgba(0,0,0,.28); overflow: hidden; margin: .35rem 0 .85rem; }
.spc-card-header { background: linear-gradient(135deg, slategray, slateblue); color:#fff; padding:.6rem .85rem; font-weight:600; letter-spacing:.4px; }
.spc-card-body { padding:.7rem .85rem; background: rgba(248,249,252,.97); }
/* Readability override: ensure labels inside light card are dark */
.spc-card-body label, .spc-card-body .form-label { color:#222 !important; }
.spc-card-body label input[type=checkbox] { accent-color: slateblue; }

.spc-actions { display:flex; flex-wrap:wrap; gap:.5rem; justify-content:flex-end; padding-top:.35rem; }
.spc-actions.left { justify-content:flex-start; }

.spc-table-wrapper { width:100%; overflow:auto; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.spc-table-sticky thead th { position: sticky; top: 0; z-index: 2; }

.spc-inline-kpis { display:flex; flex-wrap: wrap; gap:.4rem .6rem; margin:.4rem 0 .6rem; }
.spc-kpi { background: #fff; color:#222; border:1px solid rgba(0,0,0,.06); border-radius: 10px; padding:.3rem .5rem; font-weight:600; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
/* Emphasized KPI variant for highlighted info */
.spc-kpi.accent { background: linear-gradient(135deg, slateblue, #7b68ee); color:#fff; border-color: transparent; box-shadow: 0 4px 14px rgba(0,0,0,.28); }

/* ================= Waivers Page (SubmitWaiverClaim) ================= */
/* Drop table base */
.drop-table { min-width: 640px; }
.drop-table th, .drop-table td { white-space: normal; }

/* Mobile adjustments for waivers layout */
@media (max-width: 992px) {
  .waivers-columns { flex-direction: column; }
  .waivers-col { flex: 1 1 100% !important; }
  /* collapsible behavior handled globally; ensure tables fit */
  #playerData, #dropPlayerData { height: auto; max-height: 60vh; }
  .waivers-col .searchTextBox { width: 100%; }
  .waivers-col table { width: 100%; }
  .flexImgContainer .buttonAdd { width: 100%; }
  .buttonAdd, .button { min-height: 44px; }
  .warning-pill { display: inline-block; }
}

/* Narrow phones: hide less critical drop columns to reduce width */
@media (max-width: 576px) {
  .drop-table { min-width: 0 !important; table-layout: fixed; }
  /* Hide Team and Proj Points columns on very small screens */
  .drop-table thead tr:last-of-type th:nth-child(3),
  .drop-table thead tr:last-of-type th:nth-child(4),
  .drop-table tbody tr td:nth-child(3),
  .drop-table tbody tr td:nth-child(4) { display: none; }
  .drop-table td, .drop-table th { overflow: hidden; text-overflow: ellipsis; }
  .drop-table td:first-child { width: 55%; }
  .drop-table td:nth-child(2) { width: 15%; }
  .drop-table td:last-child { width: 30%; }
  .drop-table .buttonAdd { width: 100%; }
}

/* Small devices: hide Team column only */
@media (min-width: 577px) and (max-width: 768px) {
  .drop-table { min-width: 0 !important; }
  .drop-table thead tr:last-of-type th:nth-child(3),
  .drop-table tbody tr td:nth-child(3) { display: none; }
}

/* Visible warning style for drop required */
.drop-warning {
  background:#fff3cd;
  color:#856404;
  border:1px solid #ffeeba;
  padding:6px 10px;
  border-radius:4px;
  font-weight:600;
}

/* === TeamIndex modal & link styles (moved from component) === */
.link-button {
    background: none;
    border: none;
    color: #0d6efd;
    padding: 0;
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
}
.player-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
}
.player-modal {
    background: #fff;
    border-radius: 6px;
    max-width: 95vw;
    width: 95%;
    max-height: 80vh;
    overflow: auto;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
}
.player-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #dee2e6;
}
.player-modal-body {
    padding: 1rem;
}
.player-summary {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}
.player-modal thead th.center {
    text-align: center;
}
.close-button {
    background: none;
    border: none;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}