/* notebook.css — Personal student notebook (docked / floating / maximized) */

/* ============================ Launcher FAB ============================ */
#notebook-fab {
    position: fixed;
    right: 22px;
    bottom: 22px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    z-index: 999990;
    color: #fff;
    font-size: 22px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    box-shadow: 0 10px 28px rgba(99, 102, 241, 0.45);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
    display: none; /* shown via .student-only + body.is-student */
    align-items: center;
    justify-content: center;
}
#notebook-fab:hover { transform: translateY(-3px) scale(1.06); box-shadow: 0 16px 38px rgba(99, 102, 241, 0.55); }
#notebook-fab:active { transform: scale(0.96); }

/* ============================ Window shell ============================ */
.notebook-window {
    position: fixed;
    z-index: 999991;
    display: flex;
    flex-direction: column;
    background: var(--bg-surface, rgba(22, 24, 34, 0.92));
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border: 1px solid var(--border-glass, rgba(255, 255, 255, 0.12));
    color: var(--text-main, #e8eaf2);
    font-family: 'Outfit', system-ui, sans-serif;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}
.notebook-window[hidden] { display: none; }
.notebook-window.open { opacity: 1; }

/* --- Docked: right-side slide-over --- */
.notebook-window.docked {
    top: 0;
    right: 0;
    bottom: 0;
    width: min(460px, 92vw);
    height: auto;
    border-radius: 0;
    border-right: none;
    transform: translateX(20px);
}
.notebook-window.docked.open { transform: translateX(0); }

/* --- Floating: draggable / resizable window --- */
.notebook-window.floating {
    border-radius: 18px;
    transform: scale(0.97);
}
.notebook-window.floating.open { transform: scale(1); }

/* --- Maximized --- */
.notebook-window.maximized {
    top: 24px;
    left: 24px;
    right: 24px;
    bottom: 24px;
    width: auto !important;
    height: auto !important;
    border-radius: 18px;
    transform: scale(0.98);
}
.notebook-window.maximized.open { transform: scale(1); }

/* Fade out during a board capture so the student can see the board. */
.notebook-window.capturing { opacity: 0.12; pointer-events: none; }
.notebook-window.capturing.docked { transform: translateX(105%); pointer-events: none; opacity: 0.9; }

/* ============================ Header ============================ */
.nb-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-glass, rgba(255, 255, 255, 0.1));
    background: rgba(255, 255, 255, 0.03);
    cursor: default;
    user-select: none;
}
.notebook-window.floating .nb-header { cursor: grab; }
.notebook-window.floating .nb-header:active { cursor: grabbing; }
.nb-title { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.nb-title i { color: #a78bfa; }
.nb-page-indicator {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    opacity: 0.85;
}
.nb-nav-btn, .nb-window-controls button {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-main, #e8eaf2);
    width: 30px;
    height: 30px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: background 0.18s ease, transform 0.18s ease;
}
.nb-nav-btn:hover, .nb-window-controls button:hover { background: rgba(255, 255, 255, 0.14); }
.nb-window-controls { display: flex; gap: 6px; }
.nb-window-controls button[data-nb="close"]:hover { background: rgba(239, 68, 68, 0.7); }

/* ============================ Body ============================ */
.nb-body { flex: 1; display: flex; min-height: 0; }

/* Thumbnail rail */
.nb-pages-rail {
    width: 76px;
    flex-shrink: 0;
    overflow-y: auto;
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-right: 1px solid var(--border-glass, rgba(255, 255, 255, 0.08));
    background: rgba(0, 0, 0, 0.12);
}
.nb-thumb, .nb-add-page {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 8px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    background: #f7f7fb;
    cursor: pointer;
    transition: border-color 0.18s ease, transform 0.18s ease;
}
.nb-thumb:hover { transform: translateY(-2px); }
.nb-thumb.active { border-color: #8b5cf6; box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.35); }
.nb-thumb-num {
    position: absolute;
    bottom: 3px;
    right: 5px;
    font-size: 10px;
    color: #64748b;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 4px;
    padding: 0 4px;
}
.nb-add-page {
    background: rgba(255, 255, 255, 0.05);
    color: #a78bfa;
    display: flex;
    align-items: center;
    justify-content: center;
    border-style: dashed;
    aspect-ratio: auto;
    height: 38px;
}
.nb-add-page:hover { background: rgba(139, 92, 246, 0.15); }

/* Canvas host + page templates */
.nb-canvas-host {
    flex: 1;
    position: relative;
    min-width: 0;
    background: #ffffff;
    overflow: hidden;
}
.nb-canvas-host .canvas-container { position: absolute !important; inset: 0; }
.nb-canvas-host canvas { display: block; }

/* Page background templates (drawn behind the transparent Fabric canvas) */
.nb-canvas-host.tpl-blank { background: #ffffff; }
.nb-canvas-host.tpl-ruled {
    background-color: #ffffff;
    background-image: linear-gradient(to bottom, transparent 31px, #cde3f5 32px);
    background-size: 100% 32px;
}
.nb-canvas-host.tpl-grid {
    background-color: #ffffff;
    background-image:
        linear-gradient(to right, #e3eef7 1px, transparent 1px),
        linear-gradient(to bottom, #e3eef7 1px, transparent 1px);
    background-size: 28px 28px;
}
.nb-canvas-host.tpl-dotted {
    background-color: #ffffff;
    background-image: radial-gradient(#c7d3e0 1.4px, transparent 1.4px);
    background-size: 24px 24px;
}
/* thumbnails echo the template look */
.nb-thumb.tpl-ruled { background-image: linear-gradient(to bottom, transparent 9px, #cde3f5 10px); background-size: 100% 10px; }
.nb-thumb.tpl-grid { background-image: linear-gradient(to right, #e3eef7 1px, transparent 1px), linear-gradient(to bottom, #e3eef7 1px, transparent 1px); background-size: 9px 9px; }
.nb-thumb.tpl-dotted { background-image: radial-gradient(#c7d3e0 1px, transparent 1px); background-size: 8px 8px; }

/* Floating zoom controls */
.nb-zoom-controls {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: flex;
    flex-direction: column;
    background: rgba(15, 17, 26, 0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    overflow: hidden;
    z-index: 6;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.nb-zoom-controls button {
    width: 42px;
    height: 42px;
    border: none;
    background: transparent;
    color: #e8eaf2;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
    touch-action: manipulation;
}
.nb-zoom-controls button:hover { background: rgba(255, 255, 255, 0.12); }
.nb-zoom-controls button:active { background: rgba(99, 102, 241, 0.35); }
.nb-zoom-controls button[data-nb="zoom-reset"] {
    font-size: 11px;
    font-weight: 600;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #a78bfa;
}
.nb-zoom-controls button[data-nb="scroll-toggle"] {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 15px;
}
.nb-zoom-controls button[data-nb="scroll-toggle"].active {
    background: rgba(99, 102, 241, 0.35);
    color: #c4b5fd;
}

/* Capture hint overlay */
.nb-capture-hint {
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 14px;
    background: rgba(15, 17, 26, 0.55);
    color: #fff;
    font-size: 15px;
    backdrop-filter: blur(2px);
}
.nb-capture-hint.show { display: flex; }
.nb-capture-hint button {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    padding: 7px 16px;
    border-radius: 10px;
    cursor: pointer;
}

/* ============================ Action bar ============================ */
.nb-actionbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-top: 1px solid var(--border-glass, rgba(255, 255, 255, 0.1));
    background: rgba(255, 255, 255, 0.03);
    flex-wrap: wrap;
}
.nb-templates { display: flex; gap: 6px; }
.nb-templates button {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted, #aab0c0);
    cursor: pointer;
    transition: all 0.18s ease;
}
.nb-templates button:hover { background: rgba(255, 255, 255, 0.12); }
.nb-templates button.active { background: rgba(139, 92, 246, 0.25); border-color: #8b5cf6; color: #fff; }

.nb-actions { display: flex; gap: 8px; margin-left: auto; }
.nb-action {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-main, #e8eaf2);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.18s ease;
}
.nb-action:hover { background: rgba(99, 102, 241, 0.22); border-color: rgba(99, 102, 241, 0.5); transform: translateY(-1px); }
.nb-action.danger:hover { background: rgba(239, 68, 68, 0.25); border-color: rgba(239, 68, 68, 0.5); }
.nb-action i { font-size: 13px; }

.nb-status { width: 100%; text-align: right; font-size: 12px; opacity: 0.7; min-height: 14px; }

/* ============================ Resize handle ============================ */
.nb-resize-handle {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 18px;
    height: 18px;
    cursor: nwse-resize;
    background:
        linear-gradient(135deg, transparent 50%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0.35) 60%, transparent 60%, transparent 70%, rgba(255, 255, 255, 0.35) 70%, rgba(255, 255, 255, 0.35) 80%, transparent 80%);
    z-index: 5;
    display: none;
}
.notebook-window.floating .nb-resize-handle,
.notebook-window.docked .nb-resize-handle { display: block; }
.notebook-window.maximized .nb-resize-handle { display: none; }
.notebook-window.docked .nb-resize-handle { display: none; } /* docked = fixed full height */

/* ============================ Responsive / touch ============================ */
@media (max-width: 640px) {
    .notebook-window.docked,
    .notebook-window.floating,
    .notebook-window.maximized {
        top: 0; left: 0; right: 0; bottom: 0;
        width: 100vw !important; height: 100vh !important;
        border-radius: 0;
    }
    .nb-pages-rail { width: 60px; }
    .nb-action span { display: none; }
    #notebook-fab { right: 16px; bottom: 16px; }
}

/* Larger touch targets on touch devices */
body.touch-device .nb-nav-btn,
body.touch-device .nb-window-controls button,
body.touch-device .nb-templates button { width: 38px; height: 38px; }

/* ============================ Light / themed overrides ============================ */
[data-theme="light"] .notebook-window {
    background: var(--bg-surface, rgba(245, 247, 250, 0.96));
    color: var(--text-main, #2C3E50);
    border-color: var(--border-glass, rgba(44, 62, 80, 0.12));
    box-shadow: 0 20px 60px rgba(44, 62, 80, 0.18);
}
[data-theme="light"] .nb-header {
    border-bottom-color: var(--border-glass, rgba(44, 62, 80, 0.1));
    background: rgba(0, 0, 0, 0.02);
}
[data-theme="light"] .nb-nav-btn,
[data-theme="light"] .nb-window-controls button {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.08);
    color: var(--text-main, #2C3E50);
}
[data-theme="light"] .nb-nav-btn:hover,
[data-theme="light"] .nb-window-controls button:hover { background: rgba(0, 0, 0, 0.1); }
[data-theme="light"] .nb-pages-rail {
    background: rgba(0, 0, 0, 0.04);
    border-right-color: var(--border-glass, rgba(44, 62, 80, 0.1));
}
[data-theme="light"] .nb-thumb { border-color: rgba(0, 0, 0, 0.12); }
[data-theme="light"] .nb-thumb.active { border-color: #6366f1; }
[data-theme="light"] .nb-thumb-num { color: #475569; background: rgba(255, 255, 255, 0.9); }
[data-theme="light"] .nb-add-page { background: rgba(0, 0, 0, 0.03); color: #6366f1; }
[data-theme="light"] .nb-actionbar {
    border-top-color: var(--border-glass, rgba(44, 62, 80, 0.1));
    background: rgba(0, 0, 0, 0.02);
}
[data-theme="light"] .nb-templates button {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.08);
    color: var(--text-muted, #7F8C8D);
}
[data-theme="light"] .nb-templates button.active {
    background: rgba(99, 102, 241, 0.15);
    border-color: #6366f1;
    color: #4338ca;
}
[data-theme="light"] .nb-action {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
    color: var(--text-main, #2C3E50);
}
[data-theme="light"] .nb-action:hover {
    background: rgba(99, 102, 241, 0.12);
    border-color: rgba(99, 102, 241, 0.4);
}
[data-theme="light"] .nb-zoom-controls {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .nb-zoom-controls button { color: #334155; }
[data-theme="light"] .nb-zoom-controls button:hover { background: rgba(0, 0, 0, 0.06); }
[data-theme="light"] .nb-zoom-controls button[data-nb="zoom-reset"] {
    border-color: rgba(0, 0, 0, 0.08);
    color: #4338ca;
}
[data-theme="light"] .nb-zoom-controls button[data-nb="scroll-toggle"] {
    border-top-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .nb-zoom-controls button[data-nb="scroll-toggle"].active {
    background: rgba(99, 102, 241, 0.18);
    color: #4338ca;
}
[data-theme="light"] .nb-resize-handle {
    background: linear-gradient(135deg, transparent 50%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.2) 60%, transparent 60%, transparent 70%, rgba(0,0,0,0.2) 70%, rgba(0,0,0,0.2) 80%, transparent 80%);
}
[data-theme="light"] .nb-capture-hint { background: rgba(255, 255, 255, 0.7); color: #1e293b; }