/*
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/ClientSide/css.css to edit this template
*/
/* Created on : Nov 2, 2025, 12:10:46 AM
    Author     : jackr
*/

/* 1. Define colors for Light Mode (default) */
:root {
    --bg-color: #ffffff;
    --text-color: #222222;
    --container-bg: #f4f4f4;
    --button-bg: #e0e0e0;
    --button-text: #222222;
    /* Wheel Colors */
    --jawn-color: #06b6d4; /* Cyan */
    --not-jawn-color: #f43f5e; /* Rose */
    
    /* Light mode gradient colors */
    --gradient-1: #e0f7fa; 
    --gradient-2: #ffebee; 
    --gradient-3: #f3e5f5; 
    
    /* Stats Modal Colors */
    --modal-bg: #ffffff;
    --modal-text: #222222;
    --card-bg: #f0f0f0;

    /* NEW: Chart Colors (Light) */
    --chart-grid-color: rgba(0, 0, 0, 0.1);
    --chart-line-color: #64748b; /* Slate 500 */
}

/* 2. Define colors for Dark Mode using a class */
html.dark-mode {
    --bg-color: #222222;
    --text-color: #eeeeee;
    --container-bg: #333333;
    --button-bg: #555555;
    --button-text: #eeeeee;
    /* Wheel Colors */
    --jawn-color: #22d3ee; /* Brighter Cyan */
    --not-jawn-color: #fb7185; /* Brighter Rose */

    /* Dot variables for dark mode */
    --dot-color: hsl(200, 80%, 70%);
    --dot-opacity: 0.3;
    --dot-color-lightness: 70%;
    
    /* Stats Modal Colors */
    --modal-bg: #1e293b;
    --modal-text: #ffffff;
    --card-bg: #0f172a;

    /* NEW: Chart Colors (Dark) */
    --chart-grid-color: rgba(255, 255, 255, 0.1);
    --chart-line-color: #94a3b8; /* Slate 400 */
}

/* 3. Apply subtle gradient background for light mode */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    color: var(--text-color);
    line-height: 1.6;
    min-height: 100vh;
    transition: background-color 0.3s, color 0.3s;
    
    /* Center content */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; 
    overflow-y: auto; 
    box-sizing: border-box;
    padding-top: 100px;
    padding-bottom: 40px; 

    /* Subtle gradient animation for light mode */
    background-size: 400% 400%;
    background-image: linear-gradient(
        135deg, 
        var(--gradient-1) 0%, 
        var(--gradient-2) 50%, 
        var(--gradient-3) 100%
    );
    animation: moveSubtleGradient 20s ease-in-out infinite;
    position: relative; /* For the dots */
}

/* --- Global Stats Pill --- */
.stats-pill {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    
    display: flex;
    align-items: center;
    gap: 15px;
    
    background-color: var(--container-bg);
    padding: 8px 20px;
    border-radius: 50px;
    
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border: 1px solid rgba(128,128,128,0.1);
    
    cursor: pointer;
    z-index: 1000;
    transition: transform 0.2s, box-shadow 0.2s;
    font-size: 0.9rem;
    font-weight: 500;
    
    user-select: none;
}

.stats-pill:hover {
    transform: translateX(-50%) scale(1.05);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.stat-item i {
    font-size: 1.1em;
}

.divider {
    width: 1px;
    height: 16px;
    background-color: var(--text-color);
    opacity: 0.2;
}

/* --- Top Controls --- */
.top-controls {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 100;
}

.icon-button {
    position: relative;
    top: auto; right: auto;
    width: 48px; height: 48px;
    font-size: 1rem;
    cursor: pointer;
    background-color: var(--button-bg);
    color: var(--button-text);
    border: none;
    border-radius: 50%;
    transition: background-color 0.3s, color 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none; 
}

#github-link {
    position: absolute;
    top: 20px;
    left: 20px;
}

.icon-button:hover { opacity: 0.8; }
.icon-button i { font-size: 1.5rem; line-height: 1; }

#theme-toggle .icon-moon { display: none; }
html.dark-mode #theme-toggle .icon-sun { display: none; }
html.dark-mode #theme-toggle .icon-moon { display: block; }

@media (max-width: 768px) {
    body { padding-top: 120px; }
    
    .stats-pill {
        top: 15px;
        width: auto;
        padding: 6px 15px;
        font-size: 0.8rem;
    }
    
    .top-controls { top: 15px; right: 10px; }
    .icon-button { width: 40px; height: 40px; }
    #github-link { top: 15px; left: 10px; }

    .main-content { padding: 0 10px; box-sizing: border-box; }
    #wheel { width: 250px; height: 250px; }
    .wheel-text { padding-top: 20px; font-size: 0.9rem; }
    #copy-button { width: 36px; height: 36px; }
    #results-placeholder { min-height: 200px; }
    .stats-grid { grid-template-columns: 1fr !important; }
}

/* Layout */
.main-content {
    display: flex;
    flex-direction: column;        
    width: 100%;
    max-width: 900px;
    justify-content: center;
    align-items: center;
    gap: 30px;                     
    padding: 0 20px;
    box-sizing: border-box;
}

.column-left,
.column-right {
    width: 100%;
    max-width: 500px;              
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Wheel & Input */
.wheel-container { display: flex; flex-direction: column; align-items: center; position: relative; }
.wheel-pointer { width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-top: 25px solid var(--text-color); z-index: 10; position: relative; top: 5px; filter: drop-shadow(0 2px 1px rgba(0,0,0,0.2)); }
#wheel { width: 400px; height: 400px; border-radius: 50%; background: conic-gradient( from -22.5deg, var(--jawn-color) 0deg 45deg, var(--not-jawn-color) 45deg 90deg, var(--jawn-color) 90deg 135deg, var(--not-jawn-color) 135deg 180deg, var(--jawn-color) 180deg 225deg, var(--not-jawn-color) 225deg 270deg, var(--jawn-color) 270deg 315deg, var(--not-jawn-color) 315deg 360deg ); border: 5px solid var(--container-bg); box-shadow: 0 4px 10px rgba(0,0,0,0.1); position: relative; overflow: hidden; }
.wheel-text { position: absolute; width: 100%; height: 100%; box-sizing: border-box; padding-top: 40px; transform: rotate(calc(45deg * var(--i))); text-align: center; user-select: none; color: #000; font-weight: bold; font-size: 1.1rem; text-shadow: 0 1px 1px rgba(255,255,255,0.2); }
.wheel-text span { white-space: nowrap; display: inline-block; transform: rotate(90deg); }
.wheel-text.flip-text span { transform: rotate(-90deg); }

.input-container { width: 100%; display: flex; flex-direction: column; align-items: center; margin-top: 20px; }
.input-container h2 { margin-top: 0; margin-bottom: 10px; }
#name-list-input { width: 100%; height: 100px; box-sizing: border-box; padding: 10px; border-radius: 8px; border: 2px solid var(--container-bg); background-color: var(--container-bg); color: var(--text-color); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto; font-size: 1rem; margin-bottom: 15px; resize: none; }
#name-list-input:focus { outline: none; border-color: var(--jawn-color); }
.primary-button { margin-top: 15px; padding: 12px 30px; font-size: 1.2rem; font-weight: bold; color: var(--button-text); background-color: var(--button-bg); border: none; border-radius: 8px; cursor: pointer; transition: transform 0.1s ease, opacity 0.2s; width: 100%; box-sizing: border-box; }
.primary-button:hover { opacity: 0.8; }
.primary-button:active { transform: scale(0.95); }
.primary-button:disabled { opacity: 0.5; cursor: not-allowed; }

.results-container { width: 100%; text-align: left; position: relative; }
.results-header { display: flex; align-items: center; justify-content: center; position: relative; }
#result-title { font-size: 1.5rem; font-weight: bold; min-height: 1.5rem; text-align: center; margin-bottom: 10px; }
#copy-button { position: absolute; right: 0; top: -5px; width: 40px; height: 40px; display: none; }
#copy-button .icon-copied { display: none; font-size: 1.2rem; color: var(--jawn-color); }
#copy-button .icon-copy { display: flex; font-size: 1.2rem; }
#copy-button.copied .icon-copied { display: flex; }
#copy-button.copied .icon-copy { display: none; }
#results-placeholder { display: block; width: 100%; box-sizing: border-box; height: auto; min-height: 480px; padding: 20px; border-radius: 8px; background-color: var(--container-bg); color: var(--text-color); border: 2px dashed var(--button-bg); overflow-y: auto; }
#results-placeholder.is-placeholder { display: flex; align-items: center; justify-content: center; opacity: 0.5; font-style: italic; }
.result-line { padding: 8px 0; font-size: 1.1rem; border-bottom: 1px solid var(--button-bg); }
.result-line:last-child { border-bottom: none; }
.status-jawn { font-weight: bold; color: var(--jawn-color); }
.status-not-jawn { font-weight: bold; color: var(--not-jawn-color); }
.status-percent { opacity: 0.7; font-size: 0.9em; margin-left: 0.25rem; }

/* Animations */
@keyframes animatedStarfield { from { --anim-x: 0px; --anim-y: 0px; } to { --anim-x: 1000px; --anim-y: 1000px; } }
@keyframes colorCycle { 0% { --dot-color: hsl(0, 80%, var(--dot-color-lightness, 70%)); } 25% { --dot-color: hsl(90, 80%, var(--dot-color-lightness, 70%)); } 50% { --dot-color: hsl(180, 80%, var(--dot-color-lightness, 70%)); } 75% { --dot-color: hsl(270, 80%, var(--dot-color-lightness, 70%)); } 100% { --dot-color: hsl(360, 80%, var(--dot-color-lightness, 70%)); } }
body::before { display: none; content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: -2; background-image: radial-gradient(2px 2px at 25px 25px, var(--dot-color, var(--text-color)), transparent 100%), radial-gradient(2px 2px at 50px 50px, var(--dot-color, var(--text-color)), transparent 100%); background-size: 50px 50px; opacity: var(--dot-opacity, 0.3); animation: animatedStarfield 200s linear infinite, colorCycle 10s linear infinite; background-position: calc(var(--anim-x, 0px) + (var(--mouse-x-percent, 0) * -50px)) calc(var(--anim-y, 0px) + (var(--mouse-y-percent, 0) * -50px)); transition: background-position 0.1s ease-out; }
html.dark-mode body { background-image: none; background-color: var(--bg-color); }
html.dark-mode body::before { display: block; }
@keyframes moveSubtleGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes tada { 0% { transform: scale(1); } 30% { transform: scale(1.05); box-shadow: 0 0 15px var(--jawn-color); } 100% { transform: scale(1); box-shadow: none; } }
.animation-complete { animation: tada 0.5s ease-out; }

/* --- MODAL STYLES --- */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: none; justify-content: center; align-items: center; z-index: 2000; backdrop-filter: blur(5px); opacity: 0; transition: opacity 0.2s ease-in-out; }
.modal-overlay.active { display: flex; opacity: 1; }
.modal-content { background-color: var(--modal-bg); color: var(--modal-text); width: 90%; max-width: 800px; border-radius: 12px; padding: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); max-height: 90vh; overflow-y: auto; border: 1px solid rgba(255,255,255,0.1); }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 10px; }
.close-button { background: none; border: none; color: var(--modal-text); font-size: 1.5rem; cursor: pointer; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 30px; }
.stat-card { background-color: var(--card-bg); padding: 20px; border-radius: 8px; text-align: center; border: 1px solid rgba(255,255,255,0.05); }
.stat-card h3 { font-size: 2rem; margin: 0 0 5px 0; color: var(--jawn-color); }
.stat-card h3.text-jawn { color: #06b6d4; }
.stat-card h3.text-not-jawn { color: #a855f7; }
.stat-card span { font-size: 0.8rem; text-transform: uppercase; opacity: 0.7; letter-spacing: 1px; }
.history-section h3 { margin-bottom: 15px; opacity: 0.9; }
.table-wrapper { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
th, td { padding: 12px; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.1); }
th { opacity: 0.7; font-weight: 600; }
tr:hover { background-color: rgba(255,255,255,0.02); }

/* NEW: Chart Container */
.chart-container {
    width: 100%;
    height: 300px;
    margin-bottom: 30px;
    background-color: var(--card-bg);
    border-radius: 8px;
    padding: 15px;
    box-sizing: border-box;
    border: 1px solid rgba(255,255,255,0.05);
}