/* General reset and base styling */
body {
    font-family: sans-serif;
    background-color: #121212;
    /* Deep Black */
    color: #f0f0f0;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
}

.container {
    background-color: #1e1e1e;
    /* Darker Gray Container */
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.7);
    width: 95%;
    max-width: 800px;
    margin-top: 30px;
}

/* NEW: Visibility toggles for tracker content */
.tracker-content.hidden {
    display: none;
}

.tracker-content.active {
    display: block;
}

/* NEW: Mode Selector Styling */
.mode-selector {
    display: flex;
    gap: 5px;
    margin-bottom: 20px;
    border-bottom: 2px solid #333;
}

.mode-btn {
    padding: 8px 15px;
    background-color: transparent;
    color: #FFC300;
    /* Gold text */
    border: none;
    border-bottom: 2px solid transparent;
    /* Default state */
    cursor: pointer;
    font-size: 1.1em;
    font-weight: bold;
    transition: all 0.2s ease;
}

.mode-btn:hover {
    color: #FFD700;
    border-bottom: 2px solid #444;
}

.mode-btn.active {
    border-bottom: 2px solid #FFC300;
    /* Active Gold underline */
    color: #FFD700;
}


/* Container for the new title buttons (KDA and HSR) */
.title-button-group {
    display: flex;
    gap: 15px;
    /* Space between buttons */
    margin-bottom: 20px;
    /* Style to maintain the old h1 look below the button group */
    border-bottom: 2px solid #FFC300;
    /* Gold Accent Line */
    padding-bottom: 10px;
}

/* Style for the title buttons (KDA, HSR) */
.title-btn {
    color: #aaa;
    /* Default slightly dimmed color */
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
    /* Make the text large and bold like a heading */
    font-size: 2em;
    font-weight: bold;
    transition: color 0.2s;
}

.title-btn:hover {
    color: #FFD700;
    /* Lighter gold on hover */
}

/* Active state for the currently selected title button */
.title-btn.active {
    color: #FFC300;
    /* Bright gold for active button */
}

h2 {
    color: #f0f0f0;
}

.user-info-note {
    font-size: 0.8em;
    color: #aaa;
}

/* --- DESKTOP/DEFAULT LAYOUT --- */
.main-content {
    display: flex;
    gap: 20px;
    margin-top: 15px;
}

.chart-area {
    flex: 3;
    background-color: #282828;
    /* Darker Chart Background */
    padding: 15px;
    border-radius: 8px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
    position: relative;
    height: 300px;
}

.chart-controls {
    text-align: right;
    margin-top: 10px;
}

#reset-zoom-btn-kda,
#reset-zoom-btn-hsr,
#reset-zoom-btn-adr {
    padding: 5px 10px;
    background-color: #333;
    color: #FFC300;
    /* Gold Outline */
    border: 1px solid #FFC300;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8em;
    transition: background-color 0.2s;
}

#reset-zoom-btn-kda:hover,
#reset-zoom-btn-hsr:hover,
#reset-zoom-btn-adr:hover {
    background-color: #444;
}

.input-sidebar {
    flex: 1;
    background-color: #282828;
    /* Darker Sidebar Background */
    padding: 15px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* KDA Inputs: Desktop uses inline-block/flex-row for small horizontal layout */
.kda-inputs {
    display: flex;
    gap: 5px;
}

.kda-inputs input {
    flex-grow: 1;
}


/* --- KDA Summary INLINE (used for HSR summary too) --- */
.kda-summary-inline {
    text-align: center;
    padding: 8px;
    border-radius: 8px;
    margin-bottom: 10px;
    background-color: #333333;
}

.kda-summary-inline h2 {
    font-size: 1em;
    margin: 0 0 5px 0;
}

#overall-kda,
#overall-hsr,
#overall-adr {
    font-size: 1.5em;
    font-weight: bold;
    color: #FFC300;
    /* Gold */
    margin: 5px 0;
}


/* Input Elements */
input[type="number"],
input[type="date"] {
    width: 100%;
    padding: 8px;
    border: 1px solid #444;
    border-radius: 4px;
    background-color: #333333;
    color: #f0f0f0;
    box-sizing: border-box;
}

/* Log Game Button (used for KDA and HSR) */
#add-game-btn,
#add-hsr-btn,
#add-adr-btn {
    width: 100%;
    padding: 10px;
    background-color: #FFC300;
    /* Gold Fill */
    color: #1a1a1a;
    /* Gold Outline for consistency */
    border: 1px solid #FFC300;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: background-color 0.2s;
}

#add-game-btn:hover,
#add-hsr-btn:hover,
#add-adr-btn:hover {
    background-color: #FFD700;
    /* Lighter Gold on hover */
}

/* Game History List (used for KDA and HSR) */
.history-header {
    margin-top: 20px;
}

#kda-list,
#hsr-list,
#adr-list {
    list-style: none;
    padding: 0;
}

/* Default (Desktop) List Item Layout */
#kda-list li,
#hsr-list li,
#adr-list li {
    background-color: #282828;
    margin-bottom: 5px;
    padding: 8px 12px;
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-left: 5px solid #FFC300;
    /* Gold Accent */
}

.daily-date {
    color: #aaa;
    font-size: 0.9em;
    font-weight: bold;
    width: 100px;
}

.daily-score {
    font-weight: bold;
    flex-grow: 0;
    margin-right: 10px;
}

.daily-kda-ratio {
    margin-left: auto;
    /* 2px gap requested between KDA count and Edit button (which is in action-buttons) */
    margin-right: 2px;
}

/* --- ACTION BUTTON STYLES --- */
.action-buttons {
    display: flex;
    gap: 5px;
}

.action-buttons button {
    padding: 5px 8px;
    /* Gold Border for all action buttons */
    border: 1px solid #FFC300;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.8em;
    transition: background-color 0.2s, color 0.2s;
}

/* Edit Button: Transparent Gold Outline */
.edit-btn {
    background-color: transparent;
    color: #FFC300;
}

.edit-btn:hover {
    background-color: rgba(255, 195, 0, 0.1);
    color: #FFD700;
}

/* Delete Button: Dark Theme with Gold Outline and Red Text */
.delete-btn {
    background-color: #1e1e1e;
    /* Dark background */
    color: #e74c3c;
    /* Red text for danger */
    border-color: #FFC300;
    /* Gold outline */
}

.delete-btn:hover {
    background-color: #282828;
    /* Slightly darker on hover */
    color: #ff7777;
}

/* Message Box (Success/Error) */
.message-box {
    padding: 10px;
    border-radius: 6px;
    margin-top: 10px;
    text-align: center;
    /* Moved outside tracker content so it can be seen from both views */
    /* It is handled in the HTML to be outside now */
    display: none;
    font-weight: bold;
}

.message-error {
    background-color: #ff5555;
    color: #1a1a1a;
}

.message-success {
    background-color: #55ff55;
    color: #1a1a1a;
}

/* =================================================================
// MOBILE RESPONSIVENESS (Screens less than 600px wide)
// ================================================================= */

@media (max-width: 600px) {
    .container {
        padding: 10px;
        margin-top: 10px;
    }

    /* MODIFIED: Mobile style for the new title button */
    .title-btn {
        font-size: 1.5em;
        /* Make the button slightly smaller on mobile */
    }

    /* STACKING: Chart and Inputs vertically */
    .main-content {
        flex-direction: column;
        gap: 15px;
    }

    .chart-area,
    .input-sidebar {
        flex: none;
        width: 100%;
        height: auto;
    }

    /* KDA Inputs: Stack vertically for easier tapping */
    .kda-inputs {
        flex-direction: column;
        gap: 10px;
    }

    /* HISTORY LIST: Stack content vertically for readability */
    #kda-list li,
    #hsr-list li,
    #adr-list li {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .daily-date {
        width: auto;
        font-size: 1em;
    }

    .daily-score {
        margin-right: 0;
        text-align: left;
    }

    .daily-kda-ratio {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }

    .action-buttons {
        margin-top: 8px;
        align-self: flex-end;
    }

    /* Make the chart a bit smaller on mobile */
    .chart-area {
        height: 250px;
        padding: 10px;
    }
}

/* =================================================================
// ELO TRACKER STYLES
// ================================================================= */

/* Import Inter Font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

/* ELO Rank Header */
.elo-rank-header {
    text-align: center;
    margin-bottom: 30px;
    font-family: 'Inter', sans-serif;
}

.elo-rank-header h2 {
    font-size: 1.2em;
    color: #f0f0f0;
    margin-bottom: 10px;
}

.elo-rank-display {
    font-size: 3em;
    font-weight: 700;
    color: #FFC300;
    margin-top: 10px;
    text-shadow: 0 0 20px rgba(255, 195, 0, 0.3);
}

/* Metric Section Container */
.elo-metric-section {
    background-color: #282828;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    font-family: 'Inter', sans-serif;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.elo-metric-section h3 {
    color: #FFC300;
    font-size: 1.3em;
    margin-bottom: 15px;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.metric-elo-rank {
    font-size: 0.75em;
    color: #4caf50;
    font-weight: 500;
    background-color: rgba(76, 175, 80, 0.1);
    padding: 4px 12px;
    border-radius: 12px;
    border: 1px solid rgba(76, 175, 80, 0.3);
}

/* History Grouping Styles - Hierarchy Tree */
.history-day-group {
    margin-bottom: 40px;
    /* Increased separation between days */
    background-color: transparent;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #444;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    /* Added shadow for depth */
}

.daily-summary {
    padding: 20px 25px;
    /* Increased padding */
    background-color: #2a2a2a;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #444;
    cursor: pointer;
    /* Indicate it's collapsible if we add that later */
}

.daily-summary .daily-date {
    font-size: 1.2em;
    /* Larger date */
    font-weight: 700;
    color: #FFC300;
    display: block;
    margin-bottom: 6px;
}

.game-logs-container {
    padding: 30px;
    /* Increased padding */
    background-color: #1e1e1e;
    position: relative;
}

/* Tree Vertical Line */
.game-logs-container::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 30px;
    left: 40px;
    /* Moved line further right */
    width: 2px;
    background-color: #444;
}

.game-log-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    /* Increased padding */
    margin-bottom: 20px;
    /* Increased separation between logs */
    margin-left: 60px;
    /* Increased indent */
    background-color: #252525;
    border-radius: 8px;
    border: 1px solid #333;
    position: relative;
    transition: transform 0.2s, border-color 0.2s;
}

.game-log-item:hover {
    transform: translateX(5px);
    border-color: #FFC300;
}

/* Tree Horizontal Connector */
.game-log-item::before {
    content: '';
    position: absolute;
    left: -62px;
    /* Reach back to the vertical line (60px margin + 2px line) */
    top: 50%;
    width: 60px;
    height: 2px;
    background-color: #444;
}

/* Dot on the vertical line */
.game-log-item::after {
    content: '';
    position: absolute;
    left: -66px;
    /* Position on the vertical line */
    top: 50%;
    width: 10px;
    height: 10px;
    background-color: #FFC300;
    border-radius: 50%;
    transform: translateY(-50%);
    border: 2px solid #1e1e1e;
}

.game-log-item:last-child {
    margin-bottom: 0;
}

.game-log-time {
    font-size: 0.9em;
    color: #888;
    margin-bottom: 6px;
    display: block;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.game-log-metric {
    font-size: 1.3em;
    /* Larger metric */
    font-weight: 600;
    color: #fff;
}


/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
}

.modal-content {
    background-color: #2a2a2a;
    margin: 10% auto;
    padding: 0;
    border: 1px solid #444;
    width: 90%;
    max-width: 500px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-header {
    padding: 15px 20px;
    border-bottom: 1px solid #444;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #333;
    border-radius: 12px 12px 0 0;
}

.modal-header h3 {
    margin: 0;
    color: #FFC300;
}

.close-modal {
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s;
}

.close-modal:hover {
    color: #fff;
}

.modal-body {
    padding: 20px;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: #ccc;
    font-weight: 500;
}

.form-group input {
    width: 100%;
    padding: 10px;
    background-color: #1e1e1e;
    border: 1px solid #444;
    border-radius: 6px;
    color: #fff;
    font-size: 1em;
}

.form-group input:focus {
    border-color: #FFC300;
    outline: none;
}

.modal-footer {
    padding: 15px 20px;
    border-top: 1px solid #444;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    background-color: #333;
    border-radius: 0 0 12px 12px;
}

.modal-btn {
    padding: 8px 16px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95em;
    transition: background-color 0.2s;
}

.cancel-btn {
    background-color: #444;
    color: #ccc;
}

.cancel-btn:hover {
    background-color: #555;
    color: #fff;
}

.save-btn {
    background-color: #FFC300;
    color: #000;
}

.save-btn:hover {
    background-color: #e6b000;
}

.log-actions {
    display: flex;
    gap: 10px;
    opacity: 0.5;
    transition: opacity 0.2s;
}

.game-log-item:hover .log-actions {
    opacity: 1;
}

.log-btn {
    padding: 6px 12px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    font-size: 0.8em;
    font-weight: 600;
}

.log-edit-btn {
    background-color: #444;
    color: #fff;
}

.log-edit-btn:hover {
    background-color: #2196F3;
}

.log-delete-btn {
    background-color: #444;
    color: #ff6b6b;
}

.log-delete-btn:hover {
    background-color: #d32f2f;
    color: #fff;
}

/* Timeline (Past/Present/Future) */
.elo-timeline {
    display: flex;
    justify-content: space-between;
    margin: 15px 0;
    gap: 10px;
}

.elo-layer {
    flex: 1;
    text-align: center;
    padding: 15px;
    border-radius: 8px;
    background-color: #333;
    transition: all 0.3s ease;
}

.elo-layer.past {
    background-color: #3a3a3a;
    border: 2px solid #555;
}

.elo-layer.future {
    background-color: #333;
    border: 2px solid #666;
}

.elo-layer.present {
    background-color: #333;
    border: 2px solid #888;
}

.elo-layer.present.positive {
    background-color: #2d5016;
    border: 2px solid #4caf50;
    box-shadow: 0 0 15px rgba(76, 175, 80, 0.3);
}

.elo-layer.present.negative {
    background-color: #5c2a1e;
    border: 2px solid #ff6b6b;
    box-shadow: 0 0 15px rgba(255, 107, 107, 0.3);
}

.layer-label {
    display: block;
    font-size: 0.75em;
    color: #aaa;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.layer-value {
    display: block;
    font-size: 1.5em;
    font-weight: 600;
    color: #FFC300;
}

/* Visual Bar */
.elo-visual-bar {
    position: relative;
    height: 30px;
    background-color: #1a1a1a;
    border-radius: 15px;
    margin: 15px 0;
    overflow: visible;
    border: 1px solid #444;
}

.bar-background {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #2a2a2a;
    border-radius: 15px;
}

.bar-fill {
    position: absolute;
    height: 100%;
    background: linear-gradient(90deg, #4caf50, #66bb6a);
    border-radius: 15px;
    transition: width 0.5s ease, background 0.3s ease;
    z-index: 2;
}

.bar-fill.negative {
    background: linear-gradient(90deg, #ff6b6b, #ff8787);
}

.bar-target {
    position: absolute;
    width: 4px;
    height: 140%;
    top: -20%;
    background-color: #FFC300;
    box-shadow: 0 0 10px #FFC300, 0 0 20px rgba(255, 195, 0, 0.5);
    z-index: 3;
    border-radius: 2px;
}

/* Stats Row */
.elo-stats {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
    font-size: 0.9em;
    color: #ccc;
    flex-wrap: wrap;
    gap: 10px;
}

.elo-stats span {
    font-weight: 400;
}

.elo-stats span span {
    font-weight: 600;
    color: #FFC300;
}

/* Footer */
.elo-footer {
    text-align: center;
    margin-top: 30px;
    padding: 20px;
    background-color: #282828;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.elo-footer p {
    font-size: 1.1em;
    color: #f0f0f0;
    margin: 0;
}

.elo-footer span {
    color: #FFC300;
    font-weight: 600;
}

/* Mobile Responsiveness for ELO */
@media (max-width: 600px) {
    .elo-timeline {
        flex-direction: column;
        gap: 10px;
    }

    .elo-layer {
        padding: 12px;
    }

    .layer-value {
        font-size: 1.3em;
    }

    .elo-rank-display {
        font-size: 2.5em;
    }

    .elo-stats {
        flex-direction: column;
        gap: 8px;
    }
}