/* assets/style.css
   Modern, minimal, accessible styles for JavaEvolution
   Action rail replaces previous sidebar for lower lag and cleaner UI.
*/

/* 1. Variables */
:root{
    --primary: #1e90ff;
    --primary-600: #1976d2;
    --muted: #6b7280;
    --bg: #f6f7fb;
    --surface: #ffffff;
    --card-shadow: 0 6px 22px rgba(19,24,28,0.06);
    --text: #0f1720;
    --accent: #87cefa;
    --rail-bg: rgba(255,255,255,0.7);
    --glass: rgba(255,255,255,0.6);
    --radius: 12px;
    --focus: 3px;
    --max-width: 1080px;
    --transition: 200ms ease;
}

/* Dark mode overrides */
.dark-mode{
    --bg: #0b0c0f;
    --surface: #0f1113;
    --card-shadow: 0 8px 30px rgba(2,6,23,0.65);
    --text: #e6eef8;
    --muted: #9aa7b2;
    --rail-bg: rgba(20,20,20,0.7);
    --glass: rgba(255,255,255,0.02);
    --primary: #4da8ff;
    --accent: #a1d6ff;
}

/* 2. Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial;
    background: linear-gradient(180deg,var(--bg) 0%, rgba(250,250,250,0.6) 100%);
    color:var(--text);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    line-height:1.5;
    transition: background var(--transition), color var(--transition);
}

/* 3. Theme/time container */
#theme-time-container{
    position:fixed;
    top:1rem;
    right:1rem;
    display:flex;
    align-items:center;
    gap:0.6rem;
    background:var(--glass);
    backdrop-filter: blur(6px);
    padding:0.45rem 0.6rem;
    border-radius:12px;
    box-shadow: var(--card-shadow);
    z-index:1200;
    transition: transform var(--transition), opacity var(--transition);
}
#theme-time-container.hidden{ opacity:0; transform:translateY(-12px); pointer-events:none; }

/* Buttons */
.dark-toggle, .time-toggle {
    display:inline-flex;
    align-items:center;
    gap:0.45rem;
    border:0;
    padding:0.45rem 0.7rem;
    border-radius:8px;
    cursor:pointer;
    background:var(--primary);
    color:#fff;
    font-weight:600;
    font-size:0.9rem;
    transition: transform var(--transition), background var(--transition);
}
.dark-toggle:focus, .time-toggle:focus { outline: none; box-shadow: 0 0 0 var(--focus) rgba(30,144,255,0.18); transform: translateY(-1px) }
#live-time { font-size:0.9rem; color:var(--muted); font-weight:500; }

/* 4. Tooltip */
.tooltip{
    position:fixed;
    bottom:1rem;
    left:50%;
    transform:translateX(-50%) translateY(6px);
    background:var(--primary);
    color:#fff;
    padding:0.5rem 0.9rem;
    border-radius:8px;
    box-shadow:var(--card-shadow);
    font-size:0.92rem;
    z-index:1300;
    opacity:0; visibility:hidden; transition:opacity var(--transition), transform var(--transition);
}
.tooltip.visible{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }

/* 5. Action rail */
.action-rail{
    position:fixed;
    left:16px;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    flex-direction:column;
    gap:12px;
    padding:10px;
    background:var(--rail-bg);
    backdrop-filter: blur(8px);
    border-radius:14px;
    box-shadow: 0 12px 40px rgba(10,10,12,0.06);
    z-index:1000;
    transition: opacity var(--transition), transform 260ms cubic-bezier(.2,.9,.2,1);
}

/* action button */
.action-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 14px;
    border-radius:10px;
    background:transparent;
    color:var(--text);
    text-decoration:none;
    min-width:140px;
    justify-content:flex-start;
    transition: transform var(--transition), background var(--transition), box-shadow var(--transition);
    font-weight:600;
    border: 1px solid transparent;
}
.action-btn i{ font-size:20px; width:22px; text-align:center; color:var(--primary); }
.action-btn .label{ font-size:0.95rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.action-btn:hover{
    transform: translateY(-3px);
    background: linear-gradient(90deg, rgba(30,144,255,0.06), rgba(30,144,255,0.02));
    box-shadow: 0 8px 24px rgba(17,24,39,0.06);
    color:var(--text);
}
.action-btn:focus{
    outline: none;
    box-shadow: 0 0 0 var(--focus) rgba(30,144,255,0.14);
}

/* active */
.action-btn.active{
    background: linear-gradient(90deg, rgba(30,144,255,0.12), rgba(30,144,255,0.04));
    border-color: rgba(30,144,255,0.12);
}
.action-btn.active i{ color:var(--primary-600); }
.action-btn.active .label{ color:var(--primary-600); }

/* 6. Content */
.wrapper{ display:flex; width:100%; min-height:100vh; }
.content{
    margin-left:0;
    padding:2.6rem 2rem;
    flex:1;
    max-width:var(--max-width);
    margin-inline:auto;
    width:100%;
    transition: padding var(--transition);
}
.fade-in{
    background:var(--surface);
    padding:2rem;
    border-radius:var(--radius);
    box-shadow: var(--card-shadow);
    animation: fadeIn 420ms ease both;
}

/* 7. Responsive: rail -> top compact bar */
@media (max-width: 900px){
    .action-rail{
        top: 80px;
        left: 50%;
        transform: translate(-50%, 0);
        flex-direction:row;
        padding:8px;
        gap:10px;
    }
    .action-btn{ min-width: 64px; padding:10px; justify-content:center; flex-direction:column; gap:6px; }
    .action-btn .label{ display:none; }
    #theme-time-container{ right:0.8rem; left:0.8rem; justify-content:space-between }
    .content{ padding:1.2rem; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
    *{ transition:none !important; animation:none !important }
}

/* keyframes */
@keyframes fadeIn{
    from{ opacity:0; transform:translateY(10px) }
    to{ opacity:1; transform:none }
}

/* content links */
.content a{ color:var(--primary); text-decoration:none; border-bottom:1px dashed rgba(30,144,255,0.12) }
.content a:hover{ text-decoration:underline }