/* GENERAL STYLE */

/* Flex row for layout */
.bbrow {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Dashed lines */
.dashed-hr {
  display: block !important;
  width: 100%   !important;
    border: none!important;
    border-top: 2px dashed #fff!important;
    margin: 15px 0 !important;
}

@media (max-width: 600px) {
.dashed-hr {
    border-top: 2px dashed #fff!important;
    margin: 15px 0 !important;
}
}

/*TITLE SECTION*/
.bbcontainer {
    width: 900px;
    margin: 0 auto;
    width: 100%;
    max-width: 900px;
}
#row-subtitle {
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

#column-subtitle p {
font-style: italics;
}

#column-title {
    text-align: left;
}
#column-button {
    text-align: right;
}
#row-buttons {
margin-top: 15px;
}

.toggle-icon {
  width: 42px;
  height: 42px;
  fill: #fff;                    /* default color */
  cursor: pointer;
  transition: fill 300ms ease-in-out;
}

@media (max-width: 600px) {
.toggle-icon {
  width: 26px!important;
  height: 26px!important;
}}

.toggle-icon:hover {
  fill: #880808;        /* hover color */
}

h1 {
margin: 15px 0!important;
}

#row-subtitle p {
margin: 0;
font-size: min(18px, 5vw);
}

#text-title {
font-size: min(55px, 10vw);
font-weight: 700;
}

#seed-input {
width: 100%;
}

#column-seed_num {
    margin-top: auto;
    margin-bottom: 0;
}

/*MAIN INFO BOX*/
#bb-info-container {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;         
    border: 3px solid #fff;
    padding: min(30px, 5%);
    min-height: 650px;
}

@media (max-width: 600px) {
#bb-info-container {
min-height: 500px;
}
}

/*SCOREBOARD*/

.nicegui-column {
  gap: 0px;
}

#column-teams {
font-size: min(22px, 4vw);
font-weight: 600;
}

.riled-indicators {
  font-size: .7rem;   /* tweak to taste */
  text-align: center;
}


.team-divider {
    position: relative;
    display: block;
    width: 100%;
    height: 10px;
}

.team-divider::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    border-top: 3px dashed #fff;
}

#column-scoreboard-left {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
}

#scoreboard-separator {
    width: 100%;
    position: relative;
    display: block;
}

#scoreboard-separator::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    border-top: 3px dashed #fff;
    height: 2px;
}

.score {
  font-size: min(28px, 4.5vw);
  font-weight: bold;
}

/* Styling for the right column of the scoreboard */
#column-scoreboard-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

#column-inning {
    align-items: center;
}

#scoreboard-inning-number {
    font-size: min(28px, 5vw);
    font-weight: 600;
}

.triangle {
  font-size: 1.5rem;
}

/* Highlight active inning arrow */
.triangle.active {
    color: #880808;
    font-weight: bold;
}

/*FEED*/
#feed-text {
    font-size: min(24px, 4.2vw);
}

#column-feed-text {
    text-align: left;
    flex: 1 1 auto;
    min-height: 320px;
}

@media (max-width: 600px) {
#column-feed-text {
    min-height: 240px;
}
}

/* NAVIGATION CONTROLS */
#row-controls {
    /* Remove or override any .bbrow defaults that add space-between */
    display: flex !important;
    width: 100%;
    margin: 0;
    padding: 0;
    gap: 0;
    align-items: center;      /* vertical centering */
    justify-content: stretch; /* let each column stretch to equal width */
}

/* Each column is 25% wide and uses flex layout for easy alignment */
#column-control-left,
#column-control-right,
#column-control-back,
#column-control-fw
 {
    flex: 1;
    margin: 0;
    padding: 0;
    display: flex;           /* so we can do flex-start/center/flex-end */
    align-items: center;     /* vertically center arrow or text */
}

#column-control-back {
justify-content: flex-start;
align-items: flex-start;
}

#column-control-fw {
justify-content: flex-end;
align-items: flex-end;
}

/* Pin the left arrow to the far left of its column */
#column-control-left {
    align-items: flex-start;
}

/* Pin the right arrow to the far right of its column */
#column-control-right {
    align-items: flex-end;
}

.centered {
    align-items: centered;
}

/* Arrow styling */
.arrow {
    font-size: min(36px, 6vw);
    font-weight: bold;
    transition: all 300ms ease-in-out;
}
.arrow:hover {
    cursor: pointer;
    color: #880808;
}



/* --- BSO and INFO ROW --- */

/* game-info column: label on its own line & 5 px gap */
.game-info-item {
  white-space: pre-line;   /* respect "\n" line breaks */
  margin-bottom: 5px;      /* 5 px vertical gap */
}


.bso-container {
    display: flex;
    flex-direction: column;
    font-family: sans-serif;
    font-weight: bold;
}
.bso-row {
    display: flex;
    align-items: center;
}
.bso-label {
    width: 45px;
    font-size: min(20px, 4vw);
    line-height: 2.25em;
}

@media (max-width: 600px) {
.bso-label {
    width: 25px;
    line-height: 2em;
}
}

.dot {
    width: 21px;
    height: 21px;
    border-radius: 50%;
    margin-right: 7.5px;
    border: 3px solid #fff;
}

@media (max-width: 600px) {
.dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin-right: 4.5px;
    border: 2px solid #fff;
}}

.dot-filled {
    background-color: #FFF;
}
.dot-empty {
    background-color: transparent;
}

/* --- EXTRA OUT DOTS --- */
.bso-extra-outs {
  display: flex;
  /* match the gap between primary dots */
  margin-right: 7.5px;
}

.dot-red-filled {
  background-color: red;
  /* make the border red too so it reads as "extra" */
  border-color: red;
}

.dot-red-empty {
  background-color: transparent;
  border-color: transparent;
}

/* BASES STYLES */

.bases-container {
    position: relative;
    width: 120px; 
    height: 180px;
    margin-top: auto;
    margin-bottom: auto;
    margin-right: 45px;
    margin-left: auto;
}

#column-bases {
    flex: none;
}

.base {
    width: 60px;
    height: 60px;
    border: 3px solid #fff;
    background-color: transparent;
    position: absolute;
    transform: rotate(45deg);
    box-sizing: border-box;
}
.base-filled {
    background-color: #FFF;
}
.base-empty {
    background-color: transparent;
}
.base-top    { top: 37.5px; left: 0px; }
.base-left   { top: 90px; left: -52.5px; }
.base-right  { top: 90px; left: 52.5px; }


/* Mobile scaling */
@media (max-width: 600px) {
    .bases-container {
         width: 60px;
         height: 100px;
         margin-right: 20px;
    }
    .base {
         width: 40px;
         height: 40px;
         border-width: 2px;
    }
    .base-left { top: 45px; left: -33px; }
    .base-right { top: 45px; left: 33px; }
    .base-top { top: 14px; left: 0; }
}


/*MISC INFO*/
#column-info {
    display: flex;
    flex-direction: row;
    gap: 7.5px;
    font-size: min(20px, 4vw);
}

#column-game-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/*SEED AREA*/
#row-seed {
justify-content: flex-end;
}

#seed-text {
font-size: 14px;
text-align: right;
}

#bb-controls-container {
    width: 600px;
    margin: 0 auto;
    width: 67%;
    max-width: 600px;
}

/* 1) Make sure the middle row's columns stretch full-height */
#row-middle-info {
  align-items: stretch !important;
}

/* 2) Turn the weather/mood column into a column-flex */
#column-game-info {
  display: flex !important;
  flex-direction: column !important;
}

/* 3) Push "Mood" to the bottom via an auto margin */
#column-game-info > #mood-info {
  margin-top: auto !important;
}

/* NEW MAIN_PAGE CSS */

/* Button row padding now handled inline in Python code */

/* Team Management Page Specific Styling */
/* Team management container styling handled by existing bbcontainer class */

/* Black banish button and modal styling */
.banish-button {
    background-color: #000 !important;
    color: white !important;
    border: 1px solid #333 !important;
}

.banish-modal .q-card {
    background-color: #1a1a1a !important;
    color: white !important;
    border: 1px solid #444 !important;
}

.nicegui-dialog {
    max-width: 480px !important;
    width: 98% !important;
    margin: 0 auto !important;
}

.nicegui-dialog .q-card {
    max-width: 100% !important;
    width: 100% !important;
    margin: 10px !important;
    overflow-x: hidden !important;
    background-color: rgba(20, 20, 20, 0.98) !important;
}

/* Prevent white flash during navigation - ensure dialog backdrops are dark */
.q-dialog__backdrop {
    background-color: rgba(0, 0, 0, 0.8) !important;
}

/* Hide dialogs instantly when navigating */
body.navigating .nicegui-dialog,
body.navigating .q-dialog,
body.navigating .q-dialog__backdrop {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}


/* Custom coloring for ui.linear_progress */
.xp-progress .q-linear-progress__model {
  background-color: #4CAF50 !important;
}

.entropy-progress .q-linear-progress__model {
  background-color: #ff6b6b !important;
}

/* Team dropdown line-height control */
.team-dropdown .q-field__native {
  line-height: 1.5em;
  white-space: normal;
}

.team-dropdown .q-field__control {
  height: auto;
  min-height: 1.5em;
}

/* stuff for arena page */
#auto-queue-banner { min-height: 32px; }
#auto-queue-content {
  display: inline-block;           /* always in flow */
  visibility: hidden;              /* hide without reflow */
  min-width: 14ch;                 /* "Next game in 00…" width budget */
}