/* === Library of Beans - Style Overhaul === */

/* --- Root Variables & Theming --- */
:root {
    --font-main: 'Arimo', 'Noto Sans Symbols', sans-serif;
    --header-height: 55px;
    --sidebar-width: 320px;
    --bg-primary: #ffffff;
    --bg-secondary: #f7f7f9;
    --bg-tertiary: #eff1f3;
    --text-primary: #1c1c1e;
    --text-secondary: #5a5a5f;
    --border-color: #e1e1e8;
    --accent: #8a2be2;
    --accent-light: #f3eaff;
    --disabled: #b0b0b5;
    --shadow: 0 4px 12px rgba(0,0,0,0.08);
    --highlight-yellow: rgba(255, 248, 150, 0.7);
    --highlight-pink: rgba(255, 170, 213, 0.7);
    --highlight-green: rgba(170, 255, 187, 0.7);
    --highlight-blue: rgba(170, 204, 255, 0.7);
}

body.dark-mode {
    --bg-primary: #161618;
    --bg-secondary: #1c1c1e;
    --bg-tertiary: #2a2a2e;
    --text-primary: #f0f0f5;
    --text-secondary: #a0a0a8;
    --border-color: #3a3a3e;
    --disabled: #5a5a5f;
    --highlight-yellow: rgba(255, 248, 150, 0.4);
    --highlight-pink: rgba(255, 170, 213, 0.4);
    --highlight-green: rgba(170, 255, 187, 0.4);
    --highlight-blue: rgba(170, 204, 255, 0.4);
}

/* --- Base & App Layout --- */
body { font-family: var(--font-main); background-color: var(--bg-primary); color: var(--text-primary); margin: 0; transition: background-color 0.3s ease, color 0.3s ease; overflow: hidden; }
.app-container { display: flex; height: calc(100vh - var(--header-height)); overflow: hidden; position: relative; }
.hidden { display: none !important; }

/* --- Reader Header --- */
.reader-header { height: var(--header-height); width: 100%; background-color: var(--bg-primary); border-bottom: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; box-sizing: border-box; position: sticky; top: 0; z-index: 1001; transition: background-color 0.3s ease, border-color 0.3s ease; }
.reader-header .header-group { display: flex; align-items: center; gap: 16px; }
.rh-nav a, .rh-nav button { text-decoration: none; color: var(--text-primary); font-weight: 600; font-size: 1.5rem; padding: 4px 8px; border-radius: 6px; transition: background-color 0.2s; }
.rh-nav a:hover, .rh-nav button:hover { background-color: var(--bg-secondary); }
.rh-nav .nav-divider { height: 20px; width: 1px; background-color: var(--border-color); }
.rh-controls .control { display: flex; align-items: center; gap: 8px; color: var(--text-secondary); font-size: 1.1rem; }
.rh-controls input[type="range"] { width: 100px; }
.rh-pagination { color: var(--text-secondary); font-size: 0.9rem; font-family: monospace; }
.rh-actions { position: relative; }
.rh-actions .action-btn, .rh-nav .action-btn { background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 1.5rem; padding: 5px; opacity: 0.8; transition: all 0.2s; }
.rh-actions .action-btn:hover, .rh-nav .action-btn:hover { opacity: 1; }
.rh-actions .action-btn.active, .rh-nav .action-btn.active { color: var(--accent); opacity: 1; }
.rh-actions .color-swatch { width: 20px; height: 20px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: all 0.2s; }
.rh-actions .color-swatch:hover { transform: scale(1.1); }
.rh-actions .color-swatch.active { border-color: var(--accent); transform: scale(1.2); }
.rh-actions .tool-divider { height: 20px; width: 1px; background-color: var(--border-color); }

/* --- Sidebar --- */
.sidebar { width: var(--sidebar-width); flex-shrink: 0; background-color: var(--bg-secondary); border-right: 1px solid var(--border-color); display: flex; flex-direction: column; transition: width 0.4s ease, min-width 0.4s ease, padding 0.4s ease; z-index: 900; overflow: hidden; }
.sidebar.minimized { width: 0; min-width: 0; border-right-width: 0; padding-left: 0; padding-right: 0; }
.sidebar.minimized > .library-nav { opacity: 0; visibility: hidden; }
.library-nav { flex-grow: 1; overflow: hidden; display: flex; flex-direction: column; transition: opacity 0.2s ease; }
.sidebar-section { padding: 16px; position: relative; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; }
.sidebar-section h2 { font-size: 0.9rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary); margin: 0 0 12px 0; flex-shrink: 0; }
.scrollable { overflow-y: auto; flex-grow: 1; }
.filter-controls { flex-shrink: 0; margin-bottom: 12px; display: flex; flex-direction: column; gap: 8px; }
.filter-controls input, .filter-controls select { width: 100%; padding: 8px; border-radius: 4px; border: 1px solid var(--border-color); background-color: var(--bg-primary); color: var(--text-primary); box-sizing: border-box; }
#file-list-container ul { list-style: none; padding: 0; margin: 0; }
#file-list-container li a { display: flex; align-items: center; padding: 8px; border-radius: 6px; text-decoration: none; color: var(--text-secondary); transition: all 0.2s; }
#file-list-container li a:hover { background-color: var(--bg-tertiary); color: var(--text-primary); }
#file-list-container li.active a { background-color: var(--accent-light); color: var(--accent); font-weight: 600; }
.file-icon { margin-right: 12px; font-size: 1.1rem; color: var(--accent); }
.file-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.file-author { font-size: 0.8rem; font-style: italic; opacity: 0.8; }

/* --- Main Content --- */
.main-content { flex-grow: 1; height: 100%; position: relative; overflow: hidden; }
#welcome-message { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; text-align: center; color: var(--text-secondary); }

/* --- Content Viewers --- */
#content-frame, #epub-reader-area, #pdf-viewer-area { width: 100%; height: 100%; border: none; display: none; }
#epub-reader-area { position: relative; }
#epub-viewer { height: 100%; }
#epub-prev, #epub-next { position: absolute; top: 0; bottom: 0; width: 10%; z-index: 30; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 3rem; color: var(--text-secondary); user-select: none; transition: all 0.2s; }
#epub-prev { left: 0; }
#epub-next { right: 0; }
#epub-prev:hover, #epub-next:hover { background: rgba(0,0,0,0.05); color: var(--text-primary); }
#epub-reader-area.scrolled-epub { overflow-y: auto; }
#epub-reader-area.scrolled-epub #epub-viewer { height: auto; }
#pdf-viewer-area { overflow-y: auto; background-color: #525659; text-align: center; }
#pdf-viewer-area canvas { display: block; margin: 1rem auto; box-shadow: 0 0 10px rgba(0,0,0,0.5); max-width: 95%; height: auto; }

/* --- Annotation Modal & Panel --- */
.annotation-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 2000; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
.annotation-modal { background: var(--bg-primary); padding: 24px; border-radius: 8px; box-shadow: var(--shadow); width: 90%; max-width: 500px; }
.annotation-modal h3 { margin: 0 0 16px 0; color: var(--text-primary); }
.annotation-modal textarea { width: 100%; min-height: 120px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 4px; padding: 12px; color: var(--text-primary); font-family: var(--font-main); resize: vertical; box-sizing: border-box; }
.annotation-modal-actions { margin-top: 16px; display: flex; justify-content: flex-end; gap: 12px; }
.annotation-modal-actions button { padding: 8px 16px; border-radius: 4px; cursor: pointer; border: 1px solid transparent; font-weight: 600; }
.modal-btn-cancel { background-color: var(--bg-tertiary); color: var(--text-secondary); }
.modal-btn-save { background-color: var(--accent); color: white; }

.annotations-panel { position: absolute; top: 0; right: 24px; width: 350px; max-height: calc(100vh - var(--header-height) - 48px); background-color: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 0 0 8px 8px; box-shadow: var(--shadow); z-index: 1000; transform: translateY(-110%); transition: transform 0.4s ease; display: flex; flex-direction: column; }
.annotations-panel.open { transform: translateY(0); }
.annotations-panel .tabs { display: flex; border-bottom: 1px solid var(--border-color); flex-shrink: 0; }
.annotations-panel .tab-link { flex-grow: 1; padding: 12px; background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 0.9rem; border-bottom: 2px solid transparent; }
.annotations-panel .tab-link.active { color: var(--accent); border-bottom-color: var(--accent); }
.annotations-panel .tab-content { display: none; flex-grow: 1; overflow-y: auto; }
.annotations-panel .tab-content.active { display: block; }
.annotations-list { list-style: none; padding: 0; margin: 0; }
.annotations-list li { padding: 12px 16px; border-bottom: 1px solid var(--border-color); cursor: pointer; transition: background-color 0.2s; }
.annotations-list li:hover { background-color: var(--bg-secondary); }
.annotation-note { font-style: italic; margin-bottom: 5px; color: var(--text-primary); }
.annotation-text { font-size: 0.85rem; color: var(--text-secondary); }