/*
 * ============================================================
 *  BCA STUDENT PORTAL — MAIN STYLESHEET
 *  Design System: "Academic Clarity"
 *  Author: BCA Academic Portal
 * ============================================================
 *
 * TABLE OF CONTENTS
 * 1. CSS Custom Properties (Design Tokens)
 * 2. Reset & Base
 * 3. Typography Scale
 * 4. Layout — Sidebar + Shell
 * 5. Top Navigation Bar
 * 6. Sidebar Navigation
 * 7. Buttons
 * 8. Form Inputs
 * 9. Resource Cards
 * 10. Upload Modal
 * 11. Progress Bar
 * 12. Badge / Tag
 * 13. Empty State
 * 14. Footer
 * 15. Utilities & Animations
 * 16. Responsive Breakpoints
 * ============================================================
 */


/* ============================================================
   1. CSS CUSTOM PROPERTIES (Design Tokens)
   These map directly to the DESIGN.md color spec.
   Use these variables throughout — never hardcode hex values.
   ============================================================ */
:root {
  /* — Background & Surface — */
  --bg:                       #f7fafc; /* Page background */
  --surface:                  #f7fafc;
  --surface-container-lowest: #ffffff; /* Cards, modals */
  --surface-container-low:    #f1f4f6; /* Sidebar, secondary sections */
  --surface-container:        #ebeef0;
  --surface-container-high:   #e5e9eb;
  --surface-container-highest:#e0e3e5;
  --surface-variant:          #e0e3e5;
  --surface-dim:              #d7dadc;

  /* — Primary — Deep navy: branding, headings, sidebar header */
  --primary:                  #002045;
  --primary-container:        #1a365d;
  --on-primary:               #ffffff;
  --on-primary-container:     #86a0cd;
  --primary-fixed:            #d6e3ff;
  --primary-fixed-dim:        #adc7f7;

  /* — Secondary — Action blue: buttons, links, active states */
  --secondary:                #0061a5;
  --secondary-container:      #66affe;
  --on-secondary:             #ffffff;
  --on-secondary-container:   #004172;
  --secondary-fixed:          #d2e4ff;
  --secondary-fixed-dim:      #9fcaff;

  /* — Tertiary — Dark neutral tones */
  --tertiary:                 #1b2127;
  --tertiary-container:       #30363c;
  --on-tertiary:              #ffffff;
  --on-tertiary-container:    #989fa6;

  /* — Text — */
  --on-surface:               #181c1e;
  --on-surface-variant:       #43474e;
  --on-background:            #181c1e;

  /* — Outline — */
  --outline:                  #74777f;
  --outline-variant:          #c4c6cf;

  /* — Inverse — */
  --inverse-surface:          #2d3133;
  --inverse-on-surface:       #eef1f3;
  --inverse-primary:          #adc7f7;

  /* — Status — */
  --error:                    #ba1a1a;
  --on-error:                 #ffffff;
  --error-container:          #ffdad6;
  --on-error-container:       #93000a;
  --success:                  #2e7d32; /* Slightly desaturated green */
  --on-success:               #ffffff;

  /* — Shadows (tinted with primary blue for harmony) — */
  --shadow-card:  0px 4px 20px rgba(26, 54, 93, 0.08);
  --shadow-modal: 0px 8px 40px rgba(26, 54, 93, 0.15);
  --shadow-hover: 0px 6px 28px rgba(26, 54, 93, 0.14);

  /* — Border Radius (Soft shape language) — */
  --radius-sm:  0.125rem; /* 2px  — pills, tiny elements */
  --radius:     0.25rem;  /* 4px  — buttons, inputs */
  --radius-md:  0.375rem; /* 6px  — tags */
  --radius-lg:  0.5rem;   /* 8px  — cards, containers */
  --radius-xl:  0.75rem;  /* 12px — modals */
  --radius-full:9999px;   /* pills, avatars */

  /* — Spacing (8px base scale) — */
  --space-1:  8px;   /* stack-sm  */
  --space-2:  16px;  /* stack-md  */
  --space-3:  24px;  /* gutter    */
  --space-4:  32px;  /* stack-lg  */
  --space-5:  40px;  /* margin-desktop */

  /* — Layout — */
  --sidebar-width:   256px;
  --topbar-height:   64px;
  --container-max:   1280px;

  /* — Transitions — */
  --transition-fast:  150ms ease;
  --transition-base:  200ms ease;
  --transition-slow:  300ms ease;
}


/* ============================================================
   2. RESET & BASE
   Minimal reset. Inter font loaded via <link> in HTML.
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background-color: var(--bg);
  color: var(--on-background);
  line-height: 1.5;
  min-height: 100vh;
  display: flex; /* Sidebar + content layout root */
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

button {
  cursor: pointer;
  font-family: inherit;
  border: none;
  background: none;
}

ul, ol {
  list-style: none;
}

/* Custom thin scrollbar for sidebar */
.custom-scrollbar::-webkit-scrollbar { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: var(--outline-variant);
  border-radius: var(--radius-full);
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--outline);
}


/* ============================================================
   3. TYPOGRAPHY SCALE
   All type styles from the DESIGN.md spec.
   Applied as utility classes and through semantic selectors.
   ============================================================ */

/* Display — 48px / 56px / -0.02em / 700 */
.text-display {
  font-size: 48px;
  line-height: 56px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Headline Large — 32px / 40px / -0.01em / 700 */
.text-headline-lg {
  font-size: 32px;
  line-height: 40px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Headline Medium — 24px / 32px / 600 */
.text-headline-md {
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
}

/* Headline Small — 20px / 28px / 600 */
.text-headline-sm {
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
}

/* Body Large — 18px / 28px / 400 */
.text-body-lg {
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
}

/* Body Medium — 16px / 24px / 400  (base body text) */
.text-body-md {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}

/* Label Medium — 14px / 20px / 500 / +0.01em */
.text-label-md {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* Label Small — 12px / 16px / 600 */
.text-label-sm {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
}


/* ============================================================
   4. LAYOUT — APP SHELL
   Fixed sidebar + scrollable main content area.
   ============================================================ */

/* Sidebar is position: fixed, so main needs a left margin */
.app-shell {
  display: flex;
  width: 100%;
  min-height: 100vh;
}

/* Main content wrapper — sits to the right of the sidebar */
.main-wrapper {
  margin-left: var(--sidebar-width);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* Prevents content from being hidden behind sidebar on resize */
  min-width: 0;
}

/* Page content area — padding and max-width centering */
.page-content {
  flex: 1;
  padding: var(--space-3);
  max-width: var(--container-max);
  width: 100%;
}

/* Content header row — title + filter buttons */
.content-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: var(--space-4);
  gap: var(--space-2);
  flex-wrap: wrap;
}

.content-header-actions {
  display: flex;
  gap: var(--space-1);
  flex-shrink: 0;
}


/* ============================================================
   5. TOP NAVIGATION BAR
   Sticky top bar with branding, search, upload, and user avatar.
   Background matches Surface (slight gray) per design spec.
   ============================================================ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--topbar-height);
  background-color: var(--surface);
  border-bottom: 1px solid var(--outline-variant);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-3);
  gap: var(--space-3);
}

.topbar-left {
  display: flex;
  align-items: center;
  flex: 1;
  gap: var(--space-3);
  min-width: 0;
}

.topbar-brand {
  font-size: 20px;
  font-weight: 600;
  color: var(--primary);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Search bar — pill-shaped, expands on focus */
.search-wrap {
  position: relative;
  max-width: 400px;
  width: 100%;
  transition: max-width var(--transition-base);
}
.search-wrap:focus-within {
  max-width: 520px;
}
.search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--on-surface-variant);
  font-size: 20px;
  pointer-events: none;
}
.search-input {
  width: 100%;
  background: var(--surface-container-low);
  border: none;
  border-radius: var(--radius-full);
  padding: 8px 16px 8px 40px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--on-surface);
  outline: none;
  transition: box-shadow var(--transition-fast);
}
.search-input::placeholder {
  color: var(--on-surface-variant);
}
.search-input:focus {
  box-shadow: 0 0 0 2px var(--secondary);
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}

/* Upload button in topbar */
.btn-upload-topbar {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--primary);
  color: var(--on-primary);
  border-radius: var(--radius-full);
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.btn-upload-topbar:hover  { background: var(--primary-container); }
.btn-upload-topbar:active { transform: scale(0.96); }
.btn-upload-topbar .material-symbols-outlined {
  font-size: 18px;
}

/* Icon action buttons (notification, help) */
.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  color: var(--on-surface-variant);
  transition: background var(--transition-fast);
}
.icon-btn:hover { background: var(--surface-container-low); }

/* User avatar in topbar */
.topbar-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  border: 1px solid var(--outline-variant);
  object-fit: cover;
  overflow: hidden;
  flex-shrink: 0;
}


/* ============================================================
   6. SIDEBAR NAVIGATION
   Fixed left sidebar, Surface 1 background.
   Active item: 4px left border in secondary blue + bold text.
   ============================================================ */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);
  background: var(--surface-container-low);
  border-right: 1px solid var(--outline-variant);
  display: flex;
  flex-direction: column;
  z-index: 40;
  /* Sidebar scrolls independently if content overflows */
  overflow: hidden;
}

/* Sidebar brand block */
.sidebar-brand {
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-4);
  flex-shrink: 0;
}
.sidebar-brand h1 {
  font-size: 24px;
  font-weight: 600;
  color: var(--primary);
  line-height: 32px;
}
.sidebar-brand p {
  font-size: 14px;
  font-weight: 500;
  color: var(--on-surface-variant);
  margin-top: 2px;
}

/* Nav list — scrollable, fills available space */
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding-bottom: var(--space-2);
}
.sidebar-nav ul {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Individual nav link */
.nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px var(--space-3);
  border-left: 4px solid transparent; /* Space reserved — transparent by default */
  color: var(--on-surface-variant);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast);
  cursor: pointer;
}
.nav-link .material-symbols-outlined {
  font-size: 22px;
  flex-shrink: 0;
}
.nav-link:hover {
  background: var(--surface-container-high);
  color: var(--on-surface);
}

/* Active nav link — 4px blue left bar, bold, blue bg tint */
.nav-link.active {
  border-left-color: var(--secondary);
  background: var(--secondary-fixed);
  color: var(--on-secondary-container);
  font-weight: 700;
}

/* Sidebar footer — curriculum button + settings/support */
.sidebar-footer {
  flex-shrink: 0;
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--outline-variant);
}

.btn-curriculum {
  display: block;
  width: 100%;
  padding: 10px 0;
  background: var(--secondary);
  color: var(--on-secondary);
  border-radius: var(--radius-xl);
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  margin-bottom: var(--space-2);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.btn-curriculum:hover  { opacity: 0.9; }
.btn-curriculum:active { transform: scale(0.98); }

/* Sidebar utility links (Settings, Support) */
.sidebar-util-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
}


/* ============================================================
   7. BUTTONS
   Primary (solid), Secondary (outlined), Filter (surface).
   ============================================================ */

/* Primary button — solid secondary blue */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 24px;
  background: var(--secondary);
  color: var(--on-secondary);
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
  box-shadow: none;
}
.btn-primary:hover  { background: #004f87; } /* 10% darker */
.btn-primary:active { transform: scale(0.97); }
.btn-primary:focus-visible {
  outline: 2px solid var(--secondary);
  outline-offset: 2px;
}

/* Secondary / outlined button */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 24px;
  background: transparent;
  color: var(--secondary);
  border: 1px solid var(--secondary);
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.btn-secondary:hover {
  background: var(--secondary);
  color: var(--on-secondary);
}
.btn-secondary:focus-visible {
  outline: 2px solid var(--secondary);
  outline-offset: 2px;
}

/* Filter / sort buttons (surface tint) */
.btn-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--surface-container-high);
  color: var(--primary);
  border-radius: var(--radius-lg);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: background var(--transition-fast);
}
.btn-filter:hover { background: var(--surface-container-highest); }
.btn-filter .material-symbols-outlined { font-size: 18px; }

/* Icon-only round button (download button on cards) */
.btn-icon-round {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  color: var(--secondary);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.btn-icon-round:hover {
  background: var(--secondary);
  color: var(--on-secondary);
}


/* ============================================================
   8. FORM INPUTS
   White bg + border-outline-variant. Focus: secondary blue ring.
   Labels always visible above the field (label-md style).
   ============================================================ */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--on-surface-variant);
  letter-spacing: 0.01em;
}

.form-input,
.form-select {
  width: 100%;
  background: var(--surface-container-low);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  font-family: inherit;
  font-size: 16px;
  color: var(--on-surface);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  appearance: none;
}
.form-input::placeholder { color: var(--on-surface-variant); }
.form-input:focus,
.form-select:focus {
  border-color: var(--secondary);
  box-shadow: 0 0 0 1px var(--secondary);
}

/* Select arrow icon */
.form-select-wrap {
  position: relative;
}
.form-select-wrap::after {
  content: 'expand_more';
  font-family: 'Material Symbols Outlined';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--on-surface-variant);
  pointer-events: none;
  font-size: 20px;
}

/* Two-column form grid (Subject Code + Semester) */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}
@media (max-width: 560px) {
  .form-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   9. RESOURCE CARDS
   White bg, 8px radius, ambient shadow.
   Hover: increased shadow + 1px secondary blue border.
   Image zooms gently on hover.
   ============================================================ */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.resource-card {
  background: var(--surface-container-lowest);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  border: 1px solid transparent;
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base);
  cursor: default;
}
.resource-card:hover {
  border-color: var(--secondary);
  box-shadow: var(--shadow-hover);
}

/* Card image thumbnail */
.card-thumb {
  width: 100%;
  height: 160px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-2);
  position: relative;
  flex-shrink: 0;
}
.card-thumb img,
.card-thumb .thumb-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms ease;
}
.resource-card:hover .card-thumb img,
.resource-card:hover .card-thumb .thumb-placeholder {
  transform: scale(1.05);
}

/* Gradient placeholder for cards without images */
.thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary-container), var(--secondary));
}
.thumb-placeholder .material-symbols-outlined {
  color: var(--on-primary);
  font-size: 48px;
}

/* Type badge overlaid on card image (NOTES, EXAM PAPER, etc.) */
.card-type-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
}
.card-type-badge.badge-notes    { background: rgba(0, 97, 165, 0.9);  color: #fff; }
.card-type-badge.badge-exam     { background: rgba(0, 32, 69, 0.9);   color: #fff; }
.card-type-badge.badge-lab      { background: rgba(0, 32, 69, 0.9);   color: #fff; }
.card-type-badge.badge-quiz     { background: rgba(0, 32, 69, 0.9);   color: #fff; }
.card-type-badge.badge-default  { background: rgba(67, 71, 78, 0.9);  color: #fff; }

/* Card body — title row */
.card-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-1);
  margin-bottom: 6px;
}
.card-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--primary);
  line-height: 28px;
  flex: 1;
}

/* Subject code chip (BCA-101) */
.subject-chip {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--secondary);
  background: var(--secondary-fixed);
  padding: 2px 8px;
  border-radius: var(--radius-md);
  white-space: nowrap;
  align-self: flex-start;
}

.card-description {
  font-size: 14px;
  font-weight: 500;
  color: var(--on-surface-variant);
  line-height: 20px;
  letter-spacing: 0.01em;
  flex: 1; /* pushes footer to bottom */
  margin-bottom: var(--space-2);
}

/* Card footer — date + download button */
.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-1);
  border-top: 1px solid var(--outline-variant);
  margin-top: auto;
}
.card-date {
  font-size: 12px;
  font-weight: 600;
  color: var(--on-surface-variant);
}


/* ============================================================
   10. UPLOAD MODAL
   Blurred overlay + white modal card.
   Uses the shadow-modal for floating depth.
   ============================================================ */

/* Full-screen blur overlay */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(24, 28, 30, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: var(--space-2);
  /* Hidden by default — toggled via JS */
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-slow);
}
.modal-overlay.is-open {
  opacity: 1;
  pointer-events: all;
}

/* Modal card */
.modal-card {
  background: var(--surface-container-lowest);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-modal);
  width: 100%;
  max-width: 620px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Entry animation */
  transform: scale(0.96) translateY(8px);
  transition: transform var(--transition-slow);
}
.modal-overlay.is-open .modal-card {
  transform: scale(1) translateY(0);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--outline-variant);
  flex-shrink: 0;
}
.modal-header h2 {
  font-size: 24px;
  font-weight: 600;
  color: var(--primary);
}
.modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  color: var(--on-surface-variant);
  transition: background var(--transition-fast);
}
.modal-close:hover { background: var(--surface-container-low); }

.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--surface-container-low);
  border-top: 1px solid var(--outline-variant);
  flex-shrink: 0;
}

/* Drag-and-drop upload zone */
.drop-zone {
  width: 100%;
  border: 2px dashed rgba(0, 97, 165, 0.3);
  background: rgba(0, 97, 165, 0.04);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  transition:
    border-color var(--transition-base),
    background var(--transition-base);
  margin-bottom: var(--space-4);
}
.drop-zone:hover,
.drop-zone.drag-over {
  border-color: var(--secondary);
  background: rgba(0, 97, 165, 0.08);
}
.drop-zone-icon {
  width: 64px;
  height: 64px;
  background: var(--secondary-fixed);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-2);
  transition: transform var(--transition-base);
}
.drop-zone:hover .drop-zone-icon { transform: scale(1.08); }
.drop-zone-icon .material-symbols-outlined {
  font-size: 32px;
  color: var(--on-secondary-container);
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.drop-zone h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--on-surface);
  margin-bottom: 6px;
}
.drop-zone p {
  font-size: 14px;
  font-weight: 500;
  color: var(--on-surface-variant);
  letter-spacing: 0.01em;
  margin-bottom: var(--space-2);
}
.btn-browse {
  padding: 8px 24px;
  border: 1px solid var(--secondary);
  color: var(--secondary);
  border-radius: var(--radius-lg);
  font-size: 14px;
  font-weight: 500;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.btn-browse:hover {
  background: var(--secondary);
  color: var(--on-secondary);
}


/* ============================================================
   11. PROGRESS BAR
   Slim horizontal bar. Track: #E2E8F0. Fill: secondary blue.
   ============================================================ */
.upload-file-card {
  background: var(--surface-container-low);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  padding: var(--space-2);
}
.upload-file-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.upload-file-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}
.upload-file-meta .material-symbols-outlined {
  color: var(--secondary);
  font-size: 22px;
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.upload-file-name { font-size: 14px; font-weight: 500; color: var(--on-surface); }
.upload-file-size { font-size: 12px; font-weight: 600; color: var(--on-surface-variant); }
.btn-cancel-upload {
  color: var(--outline);
  transition: color var(--transition-fast);
}
.btn-cancel-upload:hover { color: var(--error); }

/* Progress track + fill */
.progress-track {
  width: 100%;
  height: 8px;
  background: var(--surface-container-high);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--secondary);
  border-radius: var(--radius-full);
  transition: width 500ms ease-out;
}


/* ============================================================
   12. BADGE / TAG
   Small metadata chips used in cards and sidebar.
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-md);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.badge-secondary {
  background: var(--secondary-fixed);
  color: var(--secondary);
}
.badge-primary {
  background: var(--primary-fixed);
  color: var(--primary);
}
.badge-success {
  background: rgba(46, 125, 50, 0.1);
  color: var(--success);
}
.badge-error {
  background: var(--error-container);
  color: var(--error);
}


/* ============================================================
   13. EMPTY STATE
   Centered illustration shown when no resources are loaded yet.
   ============================================================ */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px var(--space-3);
  border: 2px dashed var(--outline-variant);
  border-radius: 16px;
  background: rgba(241, 244, 246, 0.3);
  margin-top: var(--space-4);
  text-align: center;
}
.empty-state .material-symbols-outlined {
  font-size: 64px;
  color: var(--outline);
  margin-bottom: var(--space-2);
}
.empty-state h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 4px;
}
.empty-state p {
  font-size: 16px;
  color: var(--on-surface-variant);
}


/* ============================================================
   14. FOOTER
   Minimal footer — brand + copyright left, links right.
   ============================================================ */
.site-footer {
  background: var(--surface-container-lowest);
  border-top: 1px solid var(--outline-variant);
  padding: var(--space-2) var(--space-3);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
}
.footer-brand-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
}
.footer-copy {
  font-size: 12px;
  font-weight: 600;
  color: var(--on-surface-variant);
  margin-top: 2px;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.footer-links a {
  font-size: 12px;
  font-weight: 600;
  color: var(--on-surface-variant);
  transition: color var(--transition-fast);
}
.footer-links a:hover { color: var(--secondary); }


/* ============================================================
   15. UTILITIES & ANIMATIONS
   ============================================================ */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

/* Material Symbols base settings */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

/* Floating Action Button (mobile only) */
.fab {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 56px;
  height: 56px;
  background: var(--secondary);
  color: var(--on-secondary);
  border-radius: var(--radius-full);
  display: none; /* hidden on desktop */
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-modal);
  z-index: 50;
  transition: transform var(--transition-fast);
}
.fab:hover  { transform: scale(1.06); }
.fab:active { transform: scale(0.94); }

/* Sidebar overlay for mobile (darkens content behind open drawer) */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 35;
}

/* Hamburger toggle button (mobile only) */
.sidebar-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  color: var(--on-surface-variant);
  transition: background var(--transition-fast);
  flex-shrink: 0;
}
.sidebar-toggle:hover { background: var(--surface-container-low); }


/* ============================================================
   16. RESPONSIVE BREAKPOINTS
   Desktop → Tablet → Mobile → Small mobile
   ============================================================ */

/* ── Tablet landscape: 2-col card grid ── */
@media (max-width: 1024px) {
  .cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Topbar search shrinks slightly */
  .search-wrap { max-width: 260px; }
}

/* ── Tablet portrait / large mobile (≤768px) ── */
@media (max-width: 768px) {

  /* Sidebar becomes a slide-in drawer */
  .sidebar {
    transform: translateX(-100%);
    transition: transform var(--transition-slow);
    z-index: 200;
  }
  .sidebar.is-open {
    transform: translateX(0);
    box-shadow: var(--shadow-modal);
  }
  .sidebar-overlay.is-open { display: block; }

  /* Full-width content — no sidebar margin */
  .main-wrapper { margin-left: 0; }

  /* Show hamburger */
  .sidebar-toggle { display: flex; }

  /* Hide search bar on tablet — too cramped */
  .search-wrap { display: none; }

  /* Footer stacks */
  .site-footer { flex-direction: column; text-align: center; }
  .footer-links { justify-content: center; }

  /* Page content padding reduced */
  .page-content { padding: var(--space-2); }

  /* Content header stacks */
  .content-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    margin-bottom: var(--space-2);
  }

  /* ── Subject page tabs: scrollable row on mobile ── */
  .tabs-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
    gap: 2px;
    padding-bottom: 2px;
  }
  .tabs-wrap::-webkit-scrollbar { display: none; }
  .tab-btn {
    flex-shrink: 0;
    padding: 9px 14px;
    font-size: 13px;
    white-space: nowrap;
  }

  /* ── PDF viewer toolbar: wrap on small screens ── */
  .viewer-toolbar {
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
  }
  .viewer-toolbar-left {
    flex-wrap: wrap;
    gap: 4px;
  }

  /* ── PDF canvas: scroll horizontally instead of overflow ── */
  .viewer-canvas-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    padding: var(--space-2) var(--space-1);
    min-height: 50vh;
  }
  #pdf-canvas {
    max-width: none;
    height: auto;
  }

  /* ── Videos page: single column ── */
  .videos-body {
    grid-template-columns: 1fr;
    padding: var(--space-2) var(--space-2) var(--space-4);
  }
  .video-list-panel { position: static; }

  /* ── Curriculum PDF picker: 2 cols on tablet ── */
  .pdf-picker {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Mobile (≤640px) ── */
@media (max-width: 640px) {

  /* 1-col card grid */
  .cards-grid { grid-template-columns: 1fr; }

  /* Topbar compact */
  .topbar { padding: 0 12px; gap: 8px; }
  .topbar-brand { font-size: 15px; }
  .topbar-right { gap: 8px; }
  .icon-btn { width: 34px; height: 34px; }
  .topbar-avatar { width: 32px; height: 32px; }

  /* Typography scale down */
  .text-headline-lg { font-size: 22px; line-height: 30px; }
  .text-headline-md { font-size: 20px; line-height: 28px; }

  /* Page header padding */
  .subject-header,
  .page-header {
    padding: 72px 16px 20px;
  }
  .subject-title,
  .page-title { font-size: clamp(18px, 5vw, 28px); }

  /* Subject body padding */
  .subject-body,
  .curriculum-body,
  .viewer-wrap { padding-left: 12px; padding-right: 12px; }

  /* Tabs font smaller */
  .tab-btn { font-size: 12px; padding: 8px 12px; gap: 4px; }
  .tab-btn .material-symbols-outlined { font-size: 16px; }

  /* File list items compact */
  .file-item { padding: 10px 12px; gap: 10px; }
  .file-icon { width: 36px; height: 36px; }
  .file-title { font-size: 13px; }
  .file-date  { font-size: 11px; }

  /* Viewer toolbar: smaller buttons */
  .toolbar-btn { width: 30px; height: 30px; }
  .toolbar-btn .material-symbols-outlined { font-size: 16px; }
  .viewer-page-info { font-size: 12px; }

  /* Page jump input shrinks */
  #page-jump-input { width: 64px; font-size: 12px; padding: 4px 6px; }

  /* Cards compact */
  .card-thumb { height: 130px; }
  .card-title { font-size: 16px; line-height: 22px; }

  /* Resource card padding */
  .resource-card { padding: 12px; }

  /* Curriculum PDF picker: 1 col on mobile */
  .pdf-picker { grid-template-columns: 1fr; }

  /* Video list item thumbnails smaller */
  .vli-thumb { width: 64px; height: 44px; }
  .vli-title { font-size: 12px; }
  .vli-subject { font-size: 10px; }

  /* Filter tabs smaller */
  .filter-tabs { gap: 4px; }
  .filter-tab  { padding: 4px 10px; font-size: 11px; }

  /* Footer */
  .site-footer { padding: var(--space-2) 12px; }
  .footer-links { gap: 12px; }
  .footer-links a { font-size: 11px; }
}

/* ── Small mobile (≤420px) ── */
@media (max-width: 420px) {

  /* Reduce global spacing unit */
  :root { --space-3: 12px; }

  .topbar { padding: 0 10px; }
  .topbar-brand { font-size: 14px; }

  /* Hide filter button text — icon only */
  .btn-filter span:not(.material-symbols-outlined) { display: none; }

  /* Sidebar width fits screen */
  .sidebar { width: min(var(--sidebar-width), 85vw); }

  /* PDF viewer canvas full width */
  .viewer-canvas-wrap { padding: 8px 4px; }

  /* Subject header very compact */
  .subject-header,
  .page-header { padding: 68px 12px 16px; }

  /* Tabs: icon only on very small screens */
  .tab-btn span:not(.material-symbols-outlined):not(.tab-count) {
    display: none;
  }
  .tab-btn { padding: 8px 10px; }

  /* Stack viewer toolbar vertically */
  .viewer-toolbar-left { gap: 3px; }
  #page-jump-input { width: 56px; }

  /* Video player meta */
  .player-title { font-size: 15px; }
  .player-desc  { font-size: 13px; }
}