/* css/style.css */
:root {
    --bg-color: #1a1b26;
    --sidebar-bg: #16161e;
    --card-bg: #24283b;
    --text-color: #c0caf5;
    --text-muted: #565f89;
    --accent-color: #7aa2f7;
    --success: #9ece6a;
    --warning: #e0af68;
    --danger: #f7768e;
    --warning-bg: rgba(247, 118, 142, 0.1);
    --radius: 8px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: ui-sans-serif, system-ui, sans-serif;
    line-height: 1.6;
    display: flex;
    min-height: 100vh;
}

/* Sidebar Layout */
aside {
    width: 250px;
    background: var(--sidebar-bg);
    border-right: 1px solid #292e42;
    padding: 2rem 1rem;
    position: fixed;
    height: 100vh;
    overflow-y: auto;
}

aside h2 { color: var(--accent-color); margin-bottom: 2rem; font-size: 1.2rem; text-align: center;}

nav { display: flex; flex-direction: column; gap: 0.5rem; }

nav a {
    color: var(--text-muted);
    text-decoration: none;
    padding: 0.8rem 1rem;
    border-radius: var(--radius);
    transition: all 0.2s ease;
    font-family: monospace;
    font-size: 0.95rem;
}

nav a:hover, nav a.active {
    background: var(--card-bg);
    color: var(--accent-color);
    font-weight: bold;
}

/* Main Content Area */
main {
    flex: 1;
    margin-left: 250px;
    padding: 3rem;
    max-width: 900px;
}

.page-section { display: none; animation: fadeIn 0.3s ease; }
.active-section { display: block; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

/* Typography & Content Blocks */
h1 { color: var(--accent-color); font-size: 2.5rem; margin-bottom: 1.5rem; line-height: 1.2; }
h2 { color: var(--success); margin: 2rem 0 1rem; }
h3 { color: var(--warning); margin: 1.5rem 0 0.5rem; }
p, ul, ol { margin-bottom: 1.2rem; }
li { margin-left: 1.5rem; margin-bottom: 0.5rem; }
hr { border: 1px solid #292e42; margin: 3rem 0; }

.quote, .warning-box, .jargon-box { padding: 1.2rem; border-radius: var(--radius); margin: 1.5rem 0; }
.quote { border-left: 4px solid var(--text-muted); background: var(--card-bg); font-style: italic; }
.warning-box { border-left: 4px solid var(--danger); background: var(--warning-bg); }
.jargon-box { background: var(--card-bg); border: 1px solid #292e42; }
.jargon-term { display: block; color: var(--warning); font-weight: bold; margin-top: 0.8rem; }

pre { background: #1f2335; padding: 1rem; border-radius: var(--radius); overflow-x: auto; font-family: monospace; }
code { color: var(--accent-color); }

/* Tables */
.table-wrapper { width: 100%; overflow-x: auto; margin: 1.5rem 0; }
table { width: 100%; border-collapse: collapse; min-width: 600px; }
th, td { padding: 0.8rem; border: 1px solid #292e42; text-align: left; }
th { background: var(--sidebar-bg); color: var(--warning); }
.nom { color: #8be9fd; } .akk { color: #ff79c6; } .dat { color: #50fa7b; } .gen { color: #ffb86c; }

/* Flashcard UI */
#flashcard-app { max-width: 600px; margin: 0 auto; }
header { display: flex; justify-content: space-between; margin-bottom: 1rem; font-family: monospace;}
#progress-bar { flex: 1; margin-right: 1rem; height: 8px; background: var(--card-bg); border-radius: 4px; overflow: hidden; align-self: center;}
#progress-fill { height: 100%; background: var(--success); width: 0%; transition: width 0.3s; }
.card { width: 100%; aspect-ratio: 16/9; min-height: 250px; cursor: pointer; perspective: 1000px; margin-bottom: 1.5rem;}
.card-inner { position: relative; width: 100%; height: 100%; transition: transform 0.6s; transform-style: preserve-3d; }
.card-inner.is-flipped { transform: rotateY(180deg); }
.card-front, .card-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; background: var(--card-bg); border: 2px solid #292e42; border-radius: var(--radius); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 2rem; text-align: center; }
.card-back { transform: rotateY(180deg); border-color: var(--accent-color); }
.card-front h1 { font-size: 2.5rem; margin: 0; }
.card-back h2 { color: var(--success); font-size: 2rem; margin: 0;}
.hint { color: var(--text-muted); font-family: monospace; position: absolute; bottom: 1rem; }
.context { font-style: italic; margin: 1rem 0 0.2rem; }
.context-en { color: var(--text-muted); font-size: 0.9em; }

#action-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; }
#action-buttons.hidden { display: none; }
button { padding: 1rem; border: none; border-radius: var(--radius); font-weight: bold; cursor: pointer; font-family: monospace; }
button:hover { opacity: 0.8; }
.btn-primary { background: var(--success); color: var(--bg-color); }
.btn-secondary { background: var(--warning); color: var(--bg-color); }

/* Mobile Adjustments */
@media (max-width: 800px) {
    body { flex-direction: column; }
    aside { width: 100%; height: auto; position: static; padding: 1rem; border-right: none; border-bottom: 1px solid #292e42;}
    aside h2 { margin-bottom: 1rem; text-align: left; display: inline-block; margin-right: 1rem;}
    nav { flex-direction: row; overflow-x: auto; white-space: nowrap; padding-bottom: 0.5rem; display: inline-flex;}
    main { margin-left: 0; padding: 1.5rem; }
}