@charset "ISO-8859-1";

.sb--baseball {
    display: flex;
    flex-direction: column;
    margin: 5px 5px;
    min-width: 350px;
    max-width: 350px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background-color: white;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}
@media all and (min-width: 768px) {
    .sb--baseball {
        min-width: 375px;
        max-width: 375px;
    }
}
/*** @media all and (min-width: 820px) {
    .sb--baseball {
        flex: 1 1 auto;
        margin: 5px 5px;
        min-width: 400px;
        max-width: 400px;
        background-color: white;
        border: 1px solid darkgrey;
    }
} ***/
@media all and (min-width: 1095px) {
    .sb--baseball {
        min-width: 350px;
        max-width: 350px;
    }
}

/*** sb hide/show ***/
.hide--sb {
    display:none !important;
}
.show-inline--sb {
    display:inline-block !important;
}
.show--sb {
    display:block !important;
}


/* --- NEW MODERN HEADER --- */
.sb__game-status-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px; /* Reduced to match your updated footer */
    background-color: #f8fafc;
    border-bottom: 1px solid #edf2f7;
}

.status-left {
    display: flex;
    align-items: center;
    gap: 8px; /* Space between the pulse dot and the text */
    font-size: 12px;
    font-weight: 800;
    color: #1a202c; /* Crisp dark slate for all states */
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sb__game-status-row .bso {
    font-size: 12px;
    font-weight: 700;
    color: #4a5568;
    background: #edf2f7; /* Nice pill background */
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}
/* Automatically hides the gray pill background when the JS empties the text */
.sb__game-status-row .bso:empty {
    display: none; 
}

.sb__game-status-row .base-runners img {
    height: 20px;
    width: auto;
}

/* --- HARDWARE ACCELERATED PULSE DOT --- */
span.live-game {
    position: relative;
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #3b82f6; /* Modern Tech Blue */
}

/* The expanding ring */
span.live-game::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 50%;
    background-color: #3b82f6;
    animation: pulse-ring 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

@keyframes pulse-ring {
    0% { transform: scale(0.95); opacity: 0.7; }
    100% { transform: scale(2.5); opacity: 0; }
}

.sb__info-top-row th, 
.sb__info th {
    font-size: 10px;
    color: #a0aec0;
    text-transform: uppercase;
    padding: 8px 0 4px 0;
    border-bottom: none !important; /* This kills the separator line */
}
/* --- NEW MODERN HEADER --- */



/*** info ***/

.sb__info {
    width:100%;
    font-size: 10px;
    font-weight: normal;
    text-align: left;
    color: black; 
}
.sb__info table {
    width: 100%;
    border-collapse: collapse;
}
.sb__info th {
    border-bottom: solid 1px #CCC;
    color: #003366;
}



.sb__info .game-status {
    padding: 2px 0 1px 0;
    display: flex;
    justify-content: left;
    align-items: center;
}

.sb__info th.rhe {
    padding: 3px 0 3px 0;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
}
.sb__info td.winner {
    padding: 0px;
    width:4%;
    font-size: 12px;
    font-weight: bold;
}
/* Scorebox Team Info Block */
.sb-team-cell {
    padding: 0;           /* Let the link handle the padding */
    vertical-align: middle;
    text-align: left;
}
/* Scorebox Team Info Block */
.sb-team-link {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    padding: 3px;
}
a.sb-team-link:hover {
    font-weight: normal;
}
a.sb-team-link:hover .sb-name {
    opacity: 0.8;         /* Subtle feedback on hover */
    text-decoration: underline;
}
/* Stack for Rank, Name, and Record */
.sb-text-stack {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.3;
}
/* Horizontal Row for Rank + Name */
.sb-name-row {
    display: flex;
    align-items: center;
    gap: 4px; /* Space between rank and name */
}
.sb-rank {
    font-size: 13px; 
    font-weight: bold;
    color: black;
}
.sb-name {
    font-size: 14px;
    font-weight: bold;
    color: #003366;
}
.sb-record {
    font-size: 11px;
    color: #666;
}


.sb__info td.rhe {
    padding: 3px;
    width: 9%;
    font-size: 14px;
    text-align: center;
}
.sb__info td.runs {
    font-size: 15px;
    font-weight: bold;
}


/*** innings ***/
.sb__live-action {
    padding: 10px 16px;
    background: #ffffff;
    border-top: 1px solid #f1f5f9;
}

/* --- AUTO-HIDE MAGIC --- */
.dash-last-play:empty, 
.dash-matchup:empty {
    display: none;
}


/* --- MIDDLE: INNINGS GRID --- */
.inning-grid {
    display: grid;
    grid-template-columns: 45px repeat(var(--cols, 9), 1fr); 
    text-align: center;
    align-items: center;
}

.inn-lbl { 
    font-size: 10px; 
    font-weight: 800; 
    color: #a0aec0; 
    padding-bottom: 6px; 
    border-bottom: 1px solid #e2e8f0; 
    margin-bottom: 4px;
}

.inn-lbl-corner { 
    font-size: 10px; 
}

.t1-name, .inn-cell[class*="t1-inn"] { /* Renamed from inn-v */
    padding-bottom: 6px;
    margin-bottom: 4px;
}

.inn-t-name { font-size: 11px; font-weight: 700; color: #718096; text-align: left; text-transform: uppercase;}
.inn-cell { font-size: 12px; font-weight: 500; color: #1a202c; }

/* --- BOTTOM: PITCHER / BATTER STYLING --- */
.dash-matchup {
    display: flex;
    justify-content: space-between; 
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #e2e8f0;
    font-size: 11px;
    font-weight: 600;
}
.dash-matchup .pitcher { color: #2b6cb0; } 
.dash-matchup .batter { color: #c53030; }

/* --- BOTTOM: LAST PLAY BOX (Improved Readability) --- */
.scorebox-last-play {
    display: none; 
    width: 100%;
    margin-top: 10px; 
    padding: 6px 10px; /* Slightly adjusted to balance the larger text */
    background-color: #f8fafc; 
    border: 1px solid #e2e8f0; 
    border-radius: 6px; 
    font-size: 12px; /* Bumped up for legibility */
    font-weight: 500; /* Adds just a hair of thickness to normal text */
    color: #2d3748; /* Darker slate for high contrast */
    text-align: left;
    line-height: 1.35;
    box-sizing: border-box;
}

.scorebox-last-play.is-active {
    display: block; 
}

.scorebox-last-play .lp-label {
    font-weight: bold;
    color: #003366;
    margin-right: 4px;
}

.scorebox-last-play .lp-text {
    font-style: italic;
}

/*** live win prob ***/
.sb__lwp {
    width: 100%;
    padding: 12px 16px;
    background-color: white;
    border-top: 1px solid #edf2f7;
    box-sizing: border-box; /* Ensures padding doesn't break the width */
}

.lwp-labels {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 6px;
    color: #4a5568; /* Neutral, professional text color */
}

.lwp-progress-bar {
    height: 6px;
    border-radius: 3px;
    display: flex;
    gap: 2px; /* 1. Creates a hard slice between the two colors */
    overflow: hidden;
    background: #edf2f7; 
}

.lwp-fill-1, .lwp-fill-2 {
    height: 100%;
    min-width: 3%; /* 2. Ensures the 1% loser is always visible as a colored cap */
    transition: width 0.5s ease-in-out, background-color 0.5s ease;
}

.sb__footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* Keeps network aligned to the bottom if the left side stacks */
    gap: 15px; /* Creates a hard bumper so the left text can NEVER touch the network */
    padding: 8px 10px;
    font-size: 10px;
    color: #718096;
    background: #f8fafc;
    border-top: 1px solid #edf2f7;
    margin-top: auto; /* Pushes footer to the bottom if content heights vary */
}

.sb__footer .footer-left {
    text-align: left;
    line-height: 1.4;
    font-weight: 600;
    flex: 1 1 75%;
}

.sb__footer .footer-right {
    text-align: right;
    font-weight: 800;
    color: #4a5568;
    text-transform: uppercase;
    flex: 0 0 25%; /* Strictly caps this column at 25% width */
    line-height: 1.2;
}


/* --- SCOREBOX DISPLAY OPTIONS (Master Overrides) --- */
#master-scoreboard-wrapper.hide-innings .inning-grid { display: none !important; }
#master-scoreboard-wrapper.hide-lwp .sb__lwp { display: none !important; }
#master-scoreboard-wrapper.hide-last-play .scorebox-last-play { display: none !important; }
#master-scoreboard-wrapper.hide-venue .sb__footer { display: none !important; }

/* Edge Case Fixes */
#master-scoreboard-wrapper.hide-innings.hide-last-play .sb__live-action { display: none !important; }
#master-scoreboard-wrapper.hide-venue .sb--baseball { padding-bottom: 10px !important; }

/* =========================================================
   "SMALL SIZE" MASTER OVERRIDES
   ========================================================= */

/* NEW: Tell the master wrapper to stretch the boxes in small mode */
#master-scoreboard-wrapper.sb-size-small {
    align-items: stretch !important;
}

/* 1. Crush the box width & height (Fluid Mobile, Fixed PC) */
#master-scoreboard-wrapper.sb-size-small .sb--baseball {
    width: calc(50% - 10px) !important; 
    min-width: 170px !important; 
    max-width: calc(50% - 10px) !important; 
    min-height: 110px; 
    border-radius: 8px !important; 
    font-size: 13px;
    margin: 5px; 
    
    /* THE FIX: Inner Flex Logic */
    display: flex ;
    flex-direction: column;
    justify-content: flex-start; /* Locks Status and Table to the top, empty space falls to the bottom */
    height: auto; 
}

@media all and (min-width: 768px) {
    #master-scoreboard-wrapper.sb-size-small .sb--baseball {
        width: 210px !important;
        min-width: 210px !important;
        max-width: 210px !important;
    }
}

/* 2. Hide the fat */
#master-scoreboard-wrapper.sb-size-small .team-logo-sprite,
#master-scoreboard-wrapper.sb-size-small .sb__live-action,
#master-scoreboard-wrapper.sb-size-small .sb__lwp,
#master-scoreboard-wrapper.sb-size-small .sb__footer,
#master-scoreboard-wrapper.sb-size-small .sb-rank,
#master-scoreboard-wrapper.sb-size-small .sb-record {
    display: none !important;
}

/* 3. Wrap & Stack the Header */
#master-scoreboard-wrapper.sb-size-small .sb__game-status-row {
    display: flex;
    flex-wrap: wrap; 
    justify-content: space-between;
    align-items: flex-start;
    padding: 6px 8px; 
}

/* 4. Stack the BSO (Centered) */
#master-scoreboard-wrapper.sb-size-small .bso {
    display: flex;
    flex-direction: column; 
    text-align: center; 
    align-items: center; 
    font-size: 10px;
    line-height: 1.1;
    background: transparent; 
    padding: 0;
}
#master-scoreboard-wrapper.sb-size-small .bso-pitches { font-weight: bold; }
#master-scoreboard-wrapper.sb-size-small .bso-outs { color: #718096; }

.bso-pitches, .bso-outs { display: inline-block; }

#master-scoreboard-wrapper.sb-size-small .bso-divider {
    display: none !important;
}

/* 5. Team Name Alignment */
#master-scoreboard-wrapper.sb-size-small .sb__info td {
    padding-top: 4px;    
    padding-bottom: 4px; 
    vertical-align: middle; 
}

#master-scoreboard-wrapper.sb-size-small .sb-team-cell {
    padding-left: 8px; 
}

#master-scoreboard-wrapper.sb-size-small .sb-name-row,
#master-scoreboard-wrapper.sb-size-small .sb-name {
    display: block; 
    font-size: 13px; 
    font-weight: 700;
    line-height: 1.2; 
    white-space: normal; 
}

/* 6. Shrink table headers and runs */
#master-scoreboard-wrapper.sb-size-small .sb__info th.rhe {
    font-size: 9px;
    padding-bottom: 2px;
    padding-right: 2px;
}
#master-scoreboard-wrapper.sb-size-small .sb__info td.rhe {
    font-size: 13px; 
    padding-left: 0;
    padding-right: 2px;
}
#master-scoreboard-wrapper.sb-size-small .sb__info td.runs {
    font-size: 14px;
    font-weight: 800;
}

/* Force the game status (Time/Inning) to stack its words vertically */
#master-scoreboard-wrapper.sb-size-small .time-clock {
    display: block;
    width: min-content; /* The magic bullet: shrinks width to the longest single word */
    line-height: 1.1; 
    white-space: normal !important; /* Ensures the browser allows it to wrap */
}

/* =========================================================
   GLOBAL WINNER UI (The "Edge Tab" Pill)
   ========================================================= */

/* 1. Globally hide the old caret arrow column for ALL sizes */
.sb--baseball .winner-col,
.sb--baseball .winner {
    display: none !important;
}

/* 2. Standard Mode: Anchor the cell and give it 12px padding */
.sb--baseball .sb-team-cell {
    position: relative;
    padding-left: 12px; 
}

/* 3. Draw the Edge Tab on the winning row for ALL sizes */
.sb--baseball tr.is-winner .sb-team-cell::before {
    content: "";
    position: absolute;
    left: 0; 
    top: 50%;
    transform: translateY(-50%); 
    height: 70%; 
    width: 5px; /* Standard thickness */
    border-radius: 0 4px 4px 0; /* Flat on left, rounded on right */
    background-color: #48bb78; /* Premium Green */
}

/* =========================================================
   "SMALL SIZE" MASTER OVERRIDES (Compact specific)
   ========================================================= */

/* 4. Compact Mode: Tighten the padding and thin the pill to save space */
#master-scoreboard-wrapper.sb-size-small .sb-team-cell {
    padding-left: 6px !important; 
}
#master-scoreboard-wrapper.sb-size-small tr.is-winner .sb-team-cell::before {
    width: 4px !important; 
}


/* --- SCOREBOX SIZE SLIDING TOGGLE --- */
.size-toggle-wrapper {
    display: inline-flex;
    background: #e2e8f0; 
    border-radius: 8px;
    padding: 3px;
    width: 180px; /* Locked width to keep choices distinct */
}

.size-toggle-label {
    flex: 1;
    text-align: center;
    padding: 5px 0;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #718096;
    border-radius: 6px;
    transition: all 0.2s ease;
    margin: 0;
}

.size-toggle-label input { 
    display: none; 
}

.size-toggle-label.active {
    background: #ffffff;
    color: #1a202c;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* --- UI STATES --- */
.disabled-control {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    pointer-events: none !important; 
}




/* Restore the bright legacy colors to the Custom buttons */
.custom-view-btn { color: #48bb78 !important; } /* Bright Green */
.custom-edit-btn { color: #3182ce !important; } /* Bright Blue */

/* Ensure they stay bright when hovering */
.custom-view-btn:hover { color: #38a169 !important; }
.custom-edit-btn:hover { color: #2b6cb0 !important; }



/* =========================================================
   DASHBOARD COMMAND AREA (Desktop & Mobile Layout)
   ========================================================= */
/* Added stronger selector and !important to beat the legacy style-10.css rule */
.sb-header-grid .commands-area.sb-controls-wrapper {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important; 

    margin-top: 15px;
    text-align: left;
}

.sb-control-block {
    background-color: #f4f6f8; 
    border: 2px solid #94a3b8; 
    border-radius: 8px;
    padding: 10px 15px; /* Shaved 2px off the top and bottom padding */
    box-shadow: 0 2px 5px rgba(0,0,0,0.04);
}

.sb-block-left {
    flex: 1 1 400px; 
    min-width: 0; /* CRITICAL: Allows the block to compress so the segment track can overflow and swipe */
}

.sb-block-right {
    flex: 0 0 200px;  
    max-width: 200px; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px; /* Tightened from 12px down to 8px */
}

.sb-block-title {
    margin: 0 0 15px 0;
    font-size: 14px;
    color: #1a202c;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.sb-ctrl-row {
    display: flex;
    flex-direction: column; /* Changed from row to column */
    align-items: flex-start;
    gap: 6px; /* Space between label and buttons */
    min-width: 0; 
}

.sb-ctrl-row:last-child {
    margin-bottom: 0;
}

/* Desktop Label Width */
.sb-ctrl-row .sb-skinny-label {
    width: auto; 
    flex-shrink: 0;
    margin: 0;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #718096;
}

/* =========================================================
   DASHBOARD BEHAVIORS
   ========================================================= */

/* Tell the action buttons to stack if they run out of room */
.sb-action-bar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap; /* CRITICAL: Prevents the buttons from propping the box open */
}

/* Ensure the Segment Track knows it should swipe */
.sb-segmented-track {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Hides scrollbar on Firefox */
}
.sb-segmented-track::-webkit-scrollbar {
    display: none; /* Hides scrollbar on Chrome/Safari */
}

/* =========================================================
   MOBILE STACKING MAGIC
   ========================================================= */
@media (max-width: 768px) {
    /* Break the row and stack the label on top of the controls */
    .sb-ctrl-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px; 
    }
    
    /* Release the fixed width on the label so it flows naturally */
    .sb-ctrl-row .sb-skinny-label {
        width: auto; 
    }
    
    /* Remove desktop alignments and force them to stay inside the screen */
    .sb-action-bar, .sb-segmented-track {
        margin-top: 0 !important;
        padding-left: 0 !important;
        max-width: 100%; 
    }
}



/* =========================================================
   DATE RIBBON (Horizontal Scroll)
   ========================================================= */
.sb-date-wrapper {
    display: flex;
    align-items: center;
    background: #f4f6f8;
    border: 1px solid #cbd5e0;
    border-radius: 8px;
    padding: 4px;
    margin-bottom: 10px;
    overflow: hidden;
}

.sb-date-track-container {
    flex-grow: 1;
    overflow: hidden;
    position: relative;
}

.sb-date-track {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Hide scrollbar Firefox */
    scroll-behavior: smooth;
}
.sb-date-track::-webkit-scrollbar {
    display: none; /* Hide scrollbar Chrome/Safari */
}

/* Individual Date Pills */
.sb-date-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 0 65px; /* Fixed width for each day */
    padding: 6px 0;
    border-radius: 6px;
    color: #4a5568;
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

.sb-date-pill .day-num {
    font-size: 15px;
    font-weight: 800;
    color: #1a202c;
    margin-top: 2px;
}

.sb-date-pill:hover {
    background: #e2e8f0;
    text-decoration: none;
}

/* The Active Date */
.sb-date-pill.active {
    background: #2b6cb0;
    color: #ffffff;
    border-color: #2c5282;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.sb-date-pill.active .day-num {
    color: #ffffff;
}

/* Arrows and Calendar Button */
.sb-date-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #718096;
    cursor: pointer;
    padding: 0 10px;
    font-size: 14px;
    height: 100%;
}
.sb-date-btn:hover {
    color: #2b6cb0;
}
.sb-date-btn.cal-btn {
    border-left: 1px solid #cbd5e0;
    margin-left: 5px;
    padding-left: 15px;
    color: #2b6cb0;
}

/* Force the calendar above ads */
.ui-datepicker,
.datepicker {
    z-index: 999999 !important; 
}



/* --- ADMIN SCOREBOX FOOTER --- */
.sb__admin-footer {
    background-color: #f8fafc;
    border-top: 1px solid #e2e8f0;
    padding: 6px 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 11px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

.admin-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}
.admin-row:last-child { margin-bottom: 0; }

/* Status Circle Logic */
.status-row { justify-content: flex-start; gap: 6px; }
.status-circle {
    width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.circle-green  { background: #10B981; box-shadow: 0 0 4px #10B981; }
.circle-red    { background: #EF4444; box-shadow: 0 0 4px #EF4444; }
.circle-blue   { background: #3B82F6; box-shadow: 0 0 4px #3B82F6; }
.circle-purple { background: #8B5CF6; }
.circle-yellow { background: #F59E0B; }
.circle-gray   { background: #9CA3AF; }

.status-text { font-weight: bold; color: #1e293b; }
.admin-pc { margin-left: auto; color: #64748b; }

/* Tiny URL Wrapping */
.url-row a {
    color: #2563eb;
    text-decoration: none;
    white-space: normal;
    word-break: break-all; /* Forces extremely long statbroadcast URLs to wrap */
    line-height: 1.2;
    display: block;
    width: 100%;
    font-size: 10px; /* <--- Forces the URL to be smaller than the rest of the footer */
}

/* Control Buttons */
.override-badge {
    background: #e2e8f0; padding: 2px 4px; border-radius: 3px; color: #334155; font-weight: bold;
}
.admin-buttons { display: flex; gap: 4px; }
.admin-btn {
    font-size: 9px; padding: 3px 6px; border: none; border-radius: 3px; cursor: pointer; font-weight: bold; text-transform: uppercase;
}
.admin-btn:hover { opacity: 0.8; }
.btn-force { background: #f59e0b; color: white; }
.btn-final { background: #ef4444; color: white; }
.btn-clear { background: #64748b; color: white; }