/* ============================================
   LAYOUT-UPGRADE.CSS
   Layout D: Left Panel + Activity Button + Zoom
   Drop-in upgrade for markanthonywipfler.com
   ============================================ */

/* === FIX MODALS FOR WIDER SIDEBAR === */
.fullscreen-modal {
    left: 170px !important;
    width: calc(100% - 170px) !important;
}

/* === WIDEN LEFT SIDEBAR FROM 85px TO 170px === */
.parity-home-corner {
    width: 170px !important;
    height: 60px !important;
    font-size: 20px !important;
    border-radius: 0 0 8px 0 !important;
}

.parity-jump-sidebar {
    width: 170px !important;
    top: 60px !important;
    height: calc(100vh - 60px) !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: rgba(0, 0, 0, 0.97) !important;
    border-right: 2px solid #00FFFF !important;
}

/* Push the main top bar over to match new width */
#miniTimerBar {
    left: 170px !important;
}

/* === LEFT PANEL SECTIONS === */
.lp-section {
    padding: 8px 10px;
    border-bottom: 1px solid #1a1a1a;
}

.lp-section-title {
    color: #00FFFF;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.lp-section-title.yellow { color: #FFFF00; }
.lp-section-title.pink { color: #FF69B4; }
.lp-section-title.orange { color: #FF6600; }

.lp-divider {
    height: 1px;
    background: #333;
    margin: 2px 0 6px 0;
}

/* Stats grid - 2 columns */
.lp-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 8px;
}

.lp-stat {
    margin-bottom: 6px;
}

.lp-stat-label {
    color: #555;
    font-size: 8px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.lp-stat-value {
    font-size: 15px;
    font-weight: bold;
    font-family: 'DejaVu Sans Mono', monospace;
}

.lp-stat-value.cyan { color: #00FFFF; }
.lp-stat-value.green { color: #00FF00; }
.lp-stat-value.orange { color: #FF6600; }

/* Current puzzle/activity indicator */
.lp-current-indicator {
    display: block;
    width: 100%;
    padding: 6px 0;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    border-radius: 6px;
    border: 1px solid #00FFFF;
    background: #003333;
    color: #00FFFF;
    box-sizing: border-box;
}

.lp-current-indicator.activity-mode {
    border-color: #FF6600;
    background: #1a0a00;
    color: #FF6600;
}

/* Recent solves list */
.lp-solve-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    border-bottom: 1px solid #111;
}

.lp-solve-num {
    color: #555;
    font-size: 9px;
    min-width: 22px;
}

.lp-solve-time {
    font-size: 15px;
    font-weight: bold;
    color: #aaa;
    font-family: 'DejaVu Sans Mono', monospace;
}

.lp-solve-time.current { color: #FFFF00; }
.lp-solve-time.pb { color: #00FF00; }

.lp-pb-badge {
    color: #00FF00;
    font-size: 9px;
    font-weight: bold;
    margin-left: auto;
}

.lp-solve-item.pb-row {
    background: #001a00;
    border-radius: 4px;
    padding: 4px 4px;
    margin: 0 -4px;
}

/* Parity smart section */
.lp-parity-btn {
    display: block;
    width: 100%;
    padding: 8px 0;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    border-radius: 14px;
    border: none;
    background: #FF69B4;
    color: #000;
    cursor: pointer;
    margin-bottom: 5px;
    transition: transform 0.15s;
}

.lp-parity-btn:hover {
    transform: scale(1.03);
}

.lp-hint-text {
    color: #555;
    font-size: 9px;
    line-height: 1.4;
}

/* Activity info card (replaces parity for non-cube) */
.lp-activity-card {
    background: #111;
    border: 1px solid #333;
    border-radius: 6px;
    padding: 8px;
}

.lp-activity-card .lp-stat-label {
    color: #888;
    font-size: 9px;
}

.lp-activity-card .streak { color: #00FF00; font-weight: bold; }
.lp-activity-card .dim { color: #888; font-size: 10px; margin-top: 3px; }
.lp-activity-card .improving { color: #00FF00; font-size: 10px; font-weight: bold; margin-top: 3px; }

/* === ACTIVITY BUTTON REDESIGN === */
#selectActivityBtn {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 6px 14px !important;
    min-width: 280px !important;
    width: auto !important;
    max-width: none !important;
    flex: 1 1 auto !important;
}

/* Hide redundant cube name - activity button already shows it */
#miniCurrentCubeName {
    display: none !important;
}

.activity-btn-name {
    font-weight: bold;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.activity-btn-divider {
    width: 1px;
    height: 22px;
    background: #555;
    margin: 0 12px;
    flex-shrink: 0;
}

.activity-btn-change {
    color: #00ddaa;
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
}

/* === ZOOM CONTROL REDESIGN === */
#zoomControl {
    min-width: 140px !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow: hidden !important;
    border-radius: 8px !important;
}

.zoom-zone-minus,
.zoom-zone-plus {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 34px;
    cursor: pointer;
    font-size: 22px;
    font-weight: bold;
    color: #00FFFF;
    background: #0a1a1a;
    transition: background 0.15s;
    user-select: none;
}

.zoom-zone-minus:hover,
.zoom-zone-plus:hover {
    background: #0a2a2a;
}

.zoom-zone-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    min-width: 50px;
    border-left: 1px solid #333;
    border-right: 1px solid #333;
}

.zoom-label {
    color: #666;
    font-size: 9px;
    line-height: 1;
}

.zoom-pct {
    color: #00FFFF;
    font-size: 13px;
    font-weight: bold;
    line-height: 1.3;
}

/* === HIDE ORIGINAL PARITY JUMP BUTTONS IN SIDEBAR === */
.parity-jump-sidebar > .parity-jump-title,
.parity-jump-sidebar > .parity-jump-btn {
    display: none !important;
}

/* === MODAL CONSISTENCY - subtle border cleanup === */
/* Make sure all modals share the same card feel as the left panel */
#settingsModal,
#calBirthdaysModal,
#calSpendingModal,
#calPaycheckModal,
#calDayEditorModal,
#customActivityModal,
#languageModal {
    border-color: #00BFFF;
}

/* === RESPONSIVE: HIDE LEFT PANEL ON SMALL SCREENS === */
@media (max-width: 768px) {
    .parity-home-corner {
        width: 85px !important;
    }
    .parity-jump-sidebar {
        width: 85px !important;
    }
    #miniTimerBar {
        left: 85px !important;
    }
    #lpContent {
        display: none !important;
    }
    /* Restore original parity buttons on mobile */
    .parity-jump-sidebar > .parity-jump-title,
    .parity-jump-sidebar > .parity-jump-btn {
        display: block !important;
    }
    .fullscreen-modal {
        left: 85px !important;
        width: calc(100% - 85px) !important;
    }
}