/* ============================================
   CENTER-LAYOUT.CSS
   Reorders center content to match mockup:
   Timer > Scramble > Start/Stop > Stats > Chart > Parity > SUNE
   + Compact copyright banner
   ============================================ */

/* === MAKE #content A FLEX COLUMN FOR REORDERING === */
#content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* === REORDER ELEMENTS === */
/* Timer display - TOP priority */
#timerTop {
    order: 1 !important;
    font-size: 80px !important;
    margin: 5px 0 0 0 !important;
    width: 100%;
    text-align: center;
}

/* Scramble display */
#scrambleDisplay {
    order: 2 !important;
    margin: 5px 0 !important;
    font-size: 15px !important;
    color: #00FF00 !important;
    text-shadow: none !important;
    text-align: center;
    width: 100%;
}

/* Scramble button + help btn next to it */
#scrambleButton {
    order: 3 !important;
    margin: 5px 0 !important;
}

/* help-btn hidden via .help-btn rule below */

/* Pause info message */
#pauseInfoMsg {
    order: 4 !important;
}

/* Start/Stop container */
#startStopContainer {
    order: 5 !important;
    width: 100%;
    max-width: 800px;
    margin: 8px auto !important;
}

#startStopBtn {
    max-width: 800px !important;
}

/* Compact stats bar - injected by JS */
#compactStatsBar {
    order: 6 !important;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    width: 100%;
    max-width: 800px;
    margin: 8px auto;
    padding: 6px 0;
    font-family: Arial, sans-serif;
}

.compact-stat {
    text-align: center;
}

.compact-stat-label {
    font-size: 10px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.compact-stat-value {
    font-size: 16px;
    font-weight: bold;
    color: #00FFFF;
    font-family: 'DejaVu Sans Mono', 'Courier New', monospace;
}

.compact-stat-value.green { color: #00FF00; }

/* Chart container */
#solveChartContainer {
    order: 7 !important;
    width: 100%;
    max-width: 850px;
    margin: 10px auto !important;
}

/* Chart buttons (download/clear/reset) */
#chartButtons {
    order: 8 !important;
    margin: 5px 0 20px 0 !important;
}

/* Where to buy - push down, less prominent */
#whereToBuyContainer {
    order: 9 !important;
    margin: 5px auto !important;
}

#whereToBuyBtn {
    font-size: 13px !important;
    padding: 8px 20px !important;
    opacity: 0.7;
}

/* SUNE section */
#suneContainer {
    order: 10 !important;
    width: 100%;
    max-width: 850px;
    margin: 10px auto !important;
}

/* Old verbose stats (replaced by compact bar) - hide */
#content > div:not([id]):nth-last-of-type(2) {
    order: 11 !important;
}

/* Time log section */
#content > div:last-of-type {
    order: 12 !important;
}

/* Feature buttons grid - professional card layout */
#buttonLayoutContainer {
    order: 13 !important;
    margin-top: 15px !important;
    width: 100%;
    max-width: 850px;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Row containers */
#topButtonsRow1,
#topButtonsRow2 {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    margin: 8px auto !important;
    max-width: 850px !important;
}

#topButtonsRow3 {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    margin: 8px auto !important;
    padding: 8px 0 !important;
    border-top: 1px solid #1a1a1a;
}

/* All feature buttons - unified professional look */
#topButtonsRow1 button,
#topButtonsRow2 button {
    flex: none !important;
    max-width: none !important;
    min-height: 42px !important;
    font-size: 13px !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
    border: 1px solid #00BFFF !important;
    background: linear-gradient(180deg, #0a1a2a 0%, #0a0f1a 100%) !important;
    color: #00FFFF !important;
    cursor: pointer;
    font-weight: bold !important;
    transition: all 0.2s !important;
    text-align: center !important;
    box-shadow: 0 2px 8px rgba(0, 191, 255, 0.15) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#topButtonsRow1 button:hover,
#topButtonsRow2 button:hover {
    background: linear-gradient(180deg, #0a2a3a 0%, #0a1a2a 100%) !important;
    border-color: #00FFFF !important;
    box-shadow: 0 2px 15px rgba(0, 255, 255, 0.3) !important;
    transform: translateY(-1px);
}

/* Special button colors - keep personality but polished */
#inventoryBtn {
    background: linear-gradient(180deg, #0a1a0a 0%, #001a00 100%) !important;
    border-color: #00FF00 !important;
    color: #00FF00 !important;
    box-shadow: 0 2px 8px rgba(0, 255, 0, 0.15) !important;
}

#spreadsheetBtn {
    background: linear-gradient(180deg, #0a1520 0%, #001030 100%) !important;
    border-color: #00BFFF !important;
    box-shadow: 0 2px 8px rgba(0, 191, 255, 0.15) !important;
}

#wordProcessorBtn {
    background: linear-gradient(180deg, #1a1a00 0%, #0a0a00 100%) !important;
    border-color: #FFFF00 !important;
    color: #FFFF00 !important;
    box-shadow: 0 2px 8px rgba(255, 255, 0, 0.15) !important;
}

#spotifyDnaBtn {
    background: linear-gradient(180deg, #0a1a0a 0%, #001a00 100%) !important;
    border-color: #1DB954 !important;
    color: #1DB954 !important;
    box-shadow: 0 2px 8px rgba(29, 185, 84, 0.15) !important;
}

/* External link buttons (WCA, YouTube, Donate) - subtle style */
#topButtonsRow2 button {
    font-size: 12px !important;
    min-height: 38px !important;
    background: linear-gradient(180deg, #1a0a1a 0%, #0a050a 100%) !important;
    border-color: #666 !important;
    color: #aaa !important;
    box-shadow: none !important;
}

#topButtonsRow2 button:hover {
    border-color: #00FFFF !important;
    color: #00FFFF !important;
}

/* "Opens In A New Tab" badges - smaller */
#topButtonsRow2 button span[style*="background: #FF0000"] {
    font-size: 8px !important;
    padding: 1px 4px !important;
}

#donateButton {
    border-color: #FF6600 !important;
    color: #FF6600 !important;
    background: linear-gradient(180deg, #1a0a00 0%, #0a0500 100%) !important;
}

/* Settings row - compact */
#topButtonsRow3 button {
    font-size: 11px !important;
    padding: 6px 10px !important;
    min-height: 30px !important;
}

/* Help ? buttons - smaller, inline */
/* Help bubbles - hidden, Tour Guide sidebar handles all help */
.help-btn {
    display: none !important;
}

/* Chart buttons row - compact professional */
#chartButtons {
    order: 8 !important;
    margin: 5px 0 10px 0 !important;
    gap: 8px !important;
}

#chartButtons button {
    font-size: 12px !important;
    padding: 8px 16px !important;
    min-width: auto !important;
    border-radius: 6px !important;
}

/* === SETTINGS MODAL FIX - Large, centered, fully usable === */
#settingsModal {
    min-width: 100% !important;
    min-height: 100% !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    display: none;
    justify-content: center !important;
    align-items: center !important;
}

/* The inner card inside settings modal */
#settingsModal > div {
    width: 550px !important;
    max-width: 90vw !important;
    max-height: 80vh !important;
    min-height: 400px !important;
    margin: auto !important;
    padding: 25px 35px 25px 25px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: #1A1A1A !important;
    border: 2px solid #00BFFF !important;
    border-radius: 12px !important;
    box-shadow: 0 0 40px rgba(0, 191, 255, 0.4) !important;
}

/* The scrollable area inside the card */
#settingsModal > div > div[style*="overflow-y"] {
    padding-right: 20px !important;
    overflow-x: hidden !important;
}

/* All inputs/selects inside settings - keep away from right edge */
#settingsModal input[type="number"],
#settingsModal select {
    width: calc(100% - 10px) !important;
    max-width: calc(100% - 10px) !important;
    box-sizing: border-box !important;
}

/* Range slider - full width, no cut off */
#settingsModal input[type="range"] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-right: 0 !important;
}

/* Volume percentage display - make sure it's visible */
#beepVolumeDisplay {
    display: block !important;
    visibility: visible !important;
    color: #00FF00 !important;
    font-size: 20px !important;
    font-weight: bold !important;
    text-align: center !important;
    margin-top: 8px !important;
}

/* Settings labels */
#settingsModal label {
    font-size: 16px !important;
    margin-bottom: 8px !important;
}

/* Settings inputs and selects */
#settingsModal select,
#settingsModal input {
    font-size: 15px !important;
    padding: 10px !important;
}

/* All full-overlay modals - prevent drag-resize from shrinking them */
#settingsModal,
#copyrightPopupModal,
#languageModal {
    min-width: 100vw !important;
    min-height: 100vh !important;
}

/* === PERSONAL BEST DISPLAY (injected near timer) === */
#personalBestBar {
    order: 1 !important;
    color: #00FF00;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    width: 100%;
    margin-bottom: 0;
}

/* === COPYRIGHT BANNER - COMPACT VERSION === */
#copyrightBanner {
    padding: 2px 10px !important;
    font-size: 9px !important;
    border-bottom: 1px solid #00FF00 !important;
    box-shadow: none !important;
    opacity: 0.6;
    transition: opacity 0.3s;
    gap: 4px !important;
}

#copyrightBanner:hover {
    opacity: 1;
}

#copyrightBanner span {
    font-size: 9px !important;
}

/* === INSPECTION OVERLAY - ensure it shows above reordered content === */
#inspectionOverlayElement {
    z-index: 100003 !important;
}

/* === START TIMER BUTTON (floating during inspection) === */
#startTimerBtn {
    z-index: 100004 !important;
}

/* === MAKE CHART RESPONSIVE TO CONTAINER === */
#solveChart {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 300px;
}

/* === MINI TIMER BAR - stretch to right edge on all screens === */
#miniTimerBar {
    right: 0 !important;
}

/* === MOBILE RESPONSIVE === */
@media (max-width: 768px) {
    /* Top bar: full width since left sidebar is hidden */
    #miniTimerBar {
        left: 0 !important;
        right: 0 !important;
    }

    /* Start/Stop button: fill screen width */
    #startStopContainer {
        max-width: 100% !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
    }
    #startStopBtn {
        max-width: 100% !important;
        width: 95% !important;
        box-sizing: border-box !important;
    }

    /* App buttons: stack single column */
    #topButtonsRow1,
    #topButtonsRow2 {
        grid-template-columns: 1fr !important;
        max-width: 100% !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
    }

    #topButtonsRow3 {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 8px 10px !important;
    }

    /* Button layout container: full width */
    #buttonLayoutContainer {
        max-width: 100% !important;
        padding: 0 5px !important;
        box-sizing: border-box !important;
    }
}