/* ==========================================================================
   DESIGN SYSTEM — CORE VARIABLES
   ========================================================================== */
:root {
    /* COLORS */
    --color-primary: #2a4b8d;
    --color-primary-light: #3f63b3;
    --color-accent: #f4b400;
    --color-bg: #f7f9fc;
    --color-text: #333;
    --color-muted: #777;
    --color-white: #fff;
    --color-link: #0066cc;

    /* TYPOGRAPHY */
    --font-lg: 2rem;
    --font-md: 1.2rem;
    --font-sm: 1rem;
    --font-xs: 0.9rem;

    /* SPACING SCALE */
    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2rem;

    /* RADIUS */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    /* SHADOWS */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   GLOBAL RESET & BASE ELEMENTS
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-bg);
}

/* LINKS */
a {
    color: var(--color-link);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* HEADINGS */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 400;
    margin-bottom: var(--space-1);
    line-height: 1.3;
}

p {
    margin-bottom: var(--space-2);
}

/* ==========================================================================
   CORE COMPONENTS
   ========================================================================== */

/* BUTTONS */
button,
.btn {
    display: inline-block;
    padding: 0.6rem 1.2rem;
    background: var(--color-primary);
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-md);
    text-decoration: none;
    font-size: var(--font-sm);
    text-align: center;
    cursor: pointer;
    transition: background 0.2s ease;
}

button:hover,
.btn:hover {
    background: var(--color-primary-light);
}

/* CARDS */
.card {
    background: var(--color-white);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

/* TABS */
.tabs {
    display: flex;
    gap: var(--space-2);
    border-bottom: 2px solid #ddd;
    margin-bottom: var(--space-3);
}

.tab-link {
    padding: var(--space-1) var(--space-2);
    cursor: pointer;
    color: var(--color-muted);
    border-bottom: 3px solid transparent;
    font-size: var(--font-sm);
}

.tab-link.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */
.flex {
    display: flex;
    gap: var(--space-2);
}

.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.text-center {
    text-align: center;
}

.mt-1 {
    margin-top: var(--space-1);
}

.mt-2 {
    margin-top: var(--space-2);
}

.mt-3 {
    margin-top: var(--space-3);
}

.mb-1 {
    margin-bottom: var(--space-1);
}

.mb-2 {
    margin-bottom: var(--space-2);
}

.mb-3 {
    margin-bottom: var(--space-3);
}

.impersonation-banner {
    background: #fffae6;
    padding: var(--space-2);
    border: 1px solid #e6d200;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    font-size: var(--font-sm);
}

/* ==========================================================================
   FORMS & INPUTS
   ========================================================================== */
input,
select,
textarea {
    width: 100%;
    padding: var(--space-1);
    border: 1px solid #ccc;
    /* Kept standard for form inputs, or swap to a new utility color variable later */
    border-radius: var(--radius-sm);
    font-size: var(--font-sm);
}

label {
    font-weight: 400;
    margin-bottom: 0.25rem;
    display: block;
}

/* Specific slate-colored alternative button template class */
.button {
    display: block;
    padding: 12px 20px;
    background: #2c3e50;
    color: var(--color-white);
    text-align: center;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 400;
}

.button:hover {
    background: #1a242f;
}


/* ==========================================================================
   BUILDER APPS — SLIDE MANAGER & SLIDE EDITOR
   ========================================================================== */

/* SLIDE MANAGER (3-column grid, Unicode icons) */
.slide-manager-container {
    margin-top: var(--space-3);
}

.slide-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
    /* Standardized 1.5rem (24px) spacing */
    margin-top: var(--space-4);
}

.slide-card {
    text-align: center;
}

.slide-thumb {
    width: 240px;
    height: auto;
    border: 1px solid #ddd;
    border-radius: var(--radius-md);
    background: var(--color-bg);
}

.slide-number {
    font-size: var(--font-xs);
    font-weight: 400;
    color: var(--color-muted);
    margin-top: var(--space-1);
}

.slide-controls {
    margin-top: 6px;
    /* Specific micro-spacing preserved for visual alignment */
    display: flex;
    justify-content: center;
    gap: var(--space-2);
    font-size: 20px;
}

.icon-btn {
    text-decoration: none;
    color: var(--color-text);
}

.icon-btn.delete {
    color: #b00;
    /* Standard alert/delete color kept as local literal */
}

/* SLIDE EDITOR (simplified single-column form) */
.slide-editor-form {
    max-width: 600px;
    width: 100%;
}

.form-section {
    margin-bottom: var(--space-4);
}

.form-section label {
    font-weight: bold;
    display: block;
    margin-bottom: 6px;
}

/* Match thumbnail styling inside editor */
.slide-editor-form img {
    width: 240px;
    height: auto;
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-2);
}

.no-image {
    width: 240px;
    height: 150px;
    background: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-muted);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-2);
    font-size: var(--font-xs);
}

/* MAIN AREA */
.classroom-main {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* TOOLBAR */
/* TOP TOOLBAR — compact version */
.classroom-toolbar {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    /* was 20px */
    padding: 4px 0;
    /* reduces vertical height */
}

/* AUDIO PLAYER — compact version */
.classroom-audio {
    width: 150px;
    /* was 250px */
    height: 28px;
    /* forces a smaller control bar */
}

/* TOOL BUTTONS — compact version */
.tool-btn {
    padding: 2px 6px;
    /* was 6px 10px */
    font-size: 0.75rem;
    /* was ~1rem */
    border: 1px solid #ccc;
    background: white;
    cursor: pointer;
    border-radius: 4px;
}

/* SLIDE VIEWER */
.slide-viewer {
    width: 100%;
    display: flex;
    justify-content: center;
}

/* This wrapper defines the *layout* height */
.slide-wrapper {
    position: relative;
    width: min(1600px, 100%);
    height: calc(900px * var(--scale, 1));
    overflow: hidden;
}

/* This container is scaled visually */
.slide-zoom-container {
    position: absolute;
    /* critical */
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    transform-origin: top center;
    transition: none !important;
}

.slide-image {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    border: none;
}

/* Fade-in fix to prevent the jarring snap */
.slide-image {
    opacity: 0;
    transition: opacity 0.25s ease-in;
}

.slide-image.loaded {
    opacity: 1;
}

/* NAVIGATION */
.slide-navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
}

.nav-btn {
    padding: 6px 10px;
    border: 1px solid #ccc;
    background: white;
    cursor: pointer;
    text-decoration: none;
    color: black;
}

.nav-btn.disabled {
    opacity: 0.4;
    cursor: default;
}

/* THUMBNAIL BAR */
.thumbnail-bar {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 6px;
}

.thumbnail-tick {
    width: 10px;
    height: 10px;
    background: #ccc;
    border-radius: 50%;
}

.classroom-teacher-tools {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 10px 0;
    background: #efefef;
    border-top: 1px solid #ddd;
    margin-top: 10px;
}

/* Sticky note layer */
#sticky-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 50;
}

.sticky-note {
    position: absolute;
    width: 400px;
    min-height: 40px;
    background: #fff9a8;
    border: 1px solid #e0d97a;
    border-radius: 4px;
    padding: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    font-size: 20px;
    color: #333;

    overflow: visible;
    /* needed for auto-expand */
    resize: none;
    /* disable native resizing completely */
    pointer-events: auto;
    cursor: move;
    position: relative;
}

.sticky-text {
    width: 100%;
    min-height: 100%;
    outline: none;
    line-height: 1.2;
    overflow: visible;
    cursor: text;
}

/* 4px invisible right-edge resize zone */
.sticky-note::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 4px;
    height: 100%;
    cursor: ew-resize;
}

#pencil-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* allows sticky notes to stay interactive */
    z-index: 5000;
    /* above sticky notes visually */
}

/* NOTES POPOVER */
.notes-btn-wrapper {
    position: relative;
    /* anchor point */
}

.notes-modal {
    position: absolute;
    bottom: 40px;
    /* closer to the button */
    left: -75px;
    /* shift left */

    background: white;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 12px;
    width: 240px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 9999;
}

.notes-modal.hidden {
    display: none;
}

.notes-modal-content textarea {
    width: 100%;
    height: 60px;
    resize: none;
    padding: 6px;
    font-size: 14px;
}

.notes-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}

.save-btn {
    background: #4CAF50;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
}

.close-btn {
    background: #ddd;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
}



/* ==========================================================================
   LMS — LIBRARY & HOMEWORK COMPONENT STYLES
   ========================================================================== */

/* Main Layout Wrapper */
.library-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-4);
    /* Standardized 20px padding */
}

/* Library Cards */
.library-card {
    border: 1px solid #ddd;
    padding: var(--space-4);
    margin-bottom: var(--space-4);
    /* Maintained spacing hierarchy */
    border-radius: var(--radius-md);
    background: var(--color-white);
}

.library-card-title {
    margin: 0;
    font-size: 1.6rem;
}

.library-card-subtitle {
    margin: var(--space-1) 0 var(--space-3);
    color: var(--color-muted);
}

.library-actions {
    margin-top: var(--space-3);
}

.action-btn {
    margin-right: var(--space-2);
    padding: 8px 14px;
    border: 1px solid #ccc;
    background: #f8f8f8;
    cursor: pointer;
    color: var(--color-text);
}

/* Generic Modals (Left intact to protect global project dependencies) */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: var(--color-white);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    width: 400px;
}

.modal-close {
    margin-top: var(--space-4);
}

/* Modern Shared Modal Configuration */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
    z-index: 9999;
}

.modal-box {
    background: var(--color-white);
    padding: 30px;
    border-radius: var(--radius-lg);
    width: 500px;
    max-width: 90%;
    box-shadow: var(--shadow-lg);
}

.modal-title {
    margin-bottom: var(--space-4);
}

.modal-error {
    color: red;
    margin-top: var(--space-4);
}

.modal-status {
    margin-top: var(--space-4);
}

.modal-form {
    margin-top: var(--space-4);
}

.modal-close-container {
    text-align: center;
    margin-top: 30px;
}

.modal-close-link {
    text-decoration: none;
    color: #555;
}

/* Library Dropdown UI Elements */
.library-dropdown {
    position: relative;
}

.library-dropdown-btn {
    width: 100%;
    padding: var(--space-2);
    border: 1px solid #ccc;
    background: var(--color-bg);
    cursor: pointer;
    text-align: left;
    color: var(--color-text);
}

.library-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    z-index: 50;
    border: 1px solid #ccc;
    background: var(--color-white);
    margin-top: var(--space-1);
    box-shadow: var(--shadow-md);
}

.library-dropdown-item {
    padding: var(--space-2);
    cursor: pointer;
    color: var(--color-text);
}

.library-dropdown-item:hover {
    background: #f0f0f0;
}

/* Homework Engine Display Assets */
.hw-preview-note {
    margin-bottom: var(--space-4);
    color: #555;
}

.hw-page {
    border: 1px solid #ccc;
    padding: var(--space-3);
    margin-bottom: var(--space-4);
    position: relative;
}

.hw-pdf-btn {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    background: #007bff;
    /* Maintained explicitly for isolated blue call-to-actions */
    color: var(--color-white);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    text-decoration: none;
}

.hw-image {
    max-width: 100%;
    height: auto;
    margin-bottom: var(--space-2);
}

.hw-audio {
    width: 100%;
    margin-bottom: var(--space-2);
}

.hw-reading-text {
    white-space: pre-wrap;
    border: 1px solid #eee;
    padding: var(--space-2);
    margin-bottom: var(--space-2);
}

.hw-word {
    display: inline-block;
    padding: 4px 8px;
    margin: 2px;
    border: 1px solid #ccc;
    border-radius: var(--radius-sm);
}

.hw-prompt {
    margin-bottom: var(--space-3);
}

.hw-mcq-option {
    display: block;
    margin-bottom: 4px;
}

.hw-writing {
    width: 100%;
    min-height: 80px;
}

.hw-input {
    width: 100%;
}

.hw-back {
    text-align: center;
    margin-top: 30px;
}

/* ==========================================================================
   LMS NAVIGATION
   ========================================================================== */

/* Shared Top Navigation Bar Layout */
.nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 100px;
    /* Kept absolute for custom horizontal header margins */
    background: #e8f0fe;
    box-shadow: var(--shadow-md);
    max-height: 80px;
}

.nav-logo {
    height: 55px;
    width: auto;
}

.nav-bar .nav-right {
    display: flex;
    gap: var(--space-4);
}

.nav-bar .dropdown-btn {
    background: none;
    border: none;
    font-size: 16px;
    font-family: inherit;
    color: var(--color-text);
    cursor: pointer;
    padding: 0;
}

/* Global Nav Dropdown Functionality (Structural Rules Left Intact) */
.dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--color-white);
    border: 1px solid #ddd;
    padding: var(--space-1) 0;
    min-width: 180px;
    display: flex;
    flex-direction: column;
    z-index: 1000;
}

.dropdown-menu a {
    padding: 8px 16px;
    text-decoration: none;
    color: var(--color-text);
}

.dropdown-menu a:hover {
    background: #f0f0f0;
}

/* ==========================================================================
   ACCOUNTS & LOGIN PAGES
   ========================================================================== */

/* Centers the entire login card vertically on the screen */
.login-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 120px);
    /* Safely preserved navbar subtraction */
}

/* Constrains the card size and applies structural properties */
.login-card {
    width: 100%;
    max-width: 350px;
}

/* Form structure layout */
.login-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

/* Styled text input fields using design tokens */
.form-input {
    width: 100%;
    padding: 0.6rem;
    font-size: var(--font-sm);
    border: 1px solid #ddd;
    /* Standard form border token */
    border-radius: var(--radius-sm);
    background-color: var(--color-white);
    color: var(--color-text);
    transition: border-color 0.2s ease;
}

.form-input:focus {
    outline: none;
    border-color: var(--color-primary);
}

/* Explicit full-width button conversion for form usage */
.login-form .btn {
    width: 100%;
}

/* Error feedback formatting */
.error-message {
    color: #d93025;
    /* High-visibility error red kept localized */
    font-size: var(--font-xs);
    font-weight: 400;
}

/* ==========================================================================
   GLOBAL SITE GLOBAL CONTAINERS
   ========================================================================== */
.container {
    max-width: 800px;
    margin: var(--space-4) auto;
    /* Consolidated to fluid design spacing scale */
    padding: var(--space-3) var(--space-2);
}

/* Wider container variant for pages showing large slide/lesson content.
   Matches the 1600px cap used by .slide-wrapper, but stays in normal
   document flow (no fixed height / overflow:hidden), since it's not
   paired with the absolute-positioned .slide-zoom-container. */
.container-wide {
    max-width: 1000px;
    margin: var(--space-4) auto;
    padding: var(--space-3) var(--space-2);
}

/* ==========================================================================
   STUDENT PORTAL — SETTINGS, DATA SECTIONS, & PRIVACY LAWS
   ========================================================================== */

/* Account Deletion Danger Infrastructure */
.danger-zone {
    margin-top: var(--space-4);
    padding: var(--space-4);
    border-top: 1px solid #ffcccc;
    background-color: #fff8f8;
    /* Crucial psychological warning color tint preserved */
    border-radius: var(--radius-md);
}

.danger-title {
    color: #cc3333;
    margin-top: var(--space-4);
    margin-bottom: var(--space-1);
    font-size: var(--font-xs);
}

.danger-text {
    color: #555555;
    margin-bottom: var(--space-3);
    font-size: var(--font-xs);
}

.btn-delete-account {
    background-color: #d9534f;
    color: var(--color-white);
    border: none;
    padding: 10px 18px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-delete-account:hover {
    background-color: #c9302c;
}

/* Account Settings Sections Layout */
.settings-section {
    margin-top: 30px;
    /* Custom segment spacing preserved */
    padding-bottom: var(--space-4);
    border-bottom: 1px solid #eeeeee;
}

.settings-legal-links {
    margin-top: 30px;
}

/* Download Data Action Button */
.btn-download-data {
    display: inline-block;
    background-color: #0275d8;
    color: var(--color-white);
    text-decoration: none;
    padding: 10px 18px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    transition: background-color 0.2s ease;
}

.btn-download-data:hover {
    background-color: #025aa5;
}

/* Privacy Policy Document Typography & Spacing */
.privacy-policy {
    line-height: 1.6;
}

.privacy-policy h1 {
    font-size: var(--font-lg);
    margin-bottom: var(--space-1);
}

.privacy-policy h3 {
    font-size: var(--font-md);
    margin-top: 30px;
    margin-bottom: var(--space-2);
    color: var(--color-text);
}

.privacy-policy p {
    margin-bottom: var(--space-3);
    color: var(--color-text);
}

.privacy-policy ul {
    padding-left: var(--space-4);
    margin-bottom: 35px;
}

.privacy-policy li {
    margin-bottom: var(--space-1);
    color: var(--color-text);
}

.policy-meta {
    font-style: italic;
    color: var(--color-muted);
    margin-bottom: 35px;
}