/* ============================================
   QUIPPER RESKIN v5 — Visual Polish + Layout
   Google Classroom inspired • SFX Smart Academy
   ============================================ */

/* ---------- GOOGLE SANS FONT ---------- */
@import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;600;700&family=Google+Sans+Text:wght@400;500&display=swap');

/* ---------- ROOT VARIABLES ---------- */
:root {
  --gc-blue: #1a73e8;
  --gc-blue-dark: #1557b0;
  --gc-blue-light: #e8f0fe;
  --gc-blue-subtle: #f0f6ff;
  --gc-green: #0d904f;
  --gc-green-light: #e6f4ea;
  --gc-yellow: #f9ab00;
  --gc-yellow-light: #fef7e0;
  --gc-red: #d93025;
  --gc-red-light: #fce8e6;
  --gc-purple: #9334e6;
  --gc-teal: #00796b;
  --gc-bg: #f6f8fa;
  --gc-card: #ffffff;
  --gc-text: #202124;
  --gc-text-secondary: #3c4043;
  --gc-text-light: #5f6368;
  --gc-text-muted: #80868b;
  --gc-border: #e0e0e0;
  --gc-border-light: #f0f0f0;
  --gc-radius: 8px;
  --gc-radius-lg: 12px;
  --gc-radius-xl: 16px;
  --gc-shadow-xs: 0 1px 2px rgba(60,64,67,.08);
  --gc-shadow: 0 1px 3px rgba(60,64,67,.12), 0 1px 2px rgba(60,64,67,.08);
  --gc-shadow-md: 0 2px 6px rgba(60,64,67,.15), 0 1px 3px rgba(60,64,67,.1);
  --gc-shadow-hover: 0 4px 12px rgba(60,64,67,.15), 0 2px 4px rgba(60,64,67,.1);
  --gc-shadow-lg: 0 8px 24px rgba(60,64,67,.12), 0 2px 8px rgba(60,64,67,.08);
  --gc-transition: 0.2s cubic-bezier(.4,0,.2,1);
  --sidebar-w: 90px;
  --content-max-w: 960px;
}

/* ---------- GLOBAL OVERRIDES ---------- */
body {
  background: var(--gc-bg) !important;
  font-family: 'Google Sans Text', 'Google Sans', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
  color: var(--gc-text) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

#root {
  min-height: 100vh !important;
}

/* Smooth transitions on interactive elements */
a, button, input, [role="button"] {
  transition: color var(--gc-transition), background var(--gc-transition), 
              border-color var(--gc-transition), box-shadow var(--gc-transition),
              transform var(--gc-transition) !important;
}

/* Selection color */
::selection {
  background: var(--gc-blue-light) !important;
  color: var(--gc-blue-dark) !important;
}

/* ---------- GLOBAL SCROLLBAR ---------- */
::-webkit-scrollbar { width: 6px !important; height: 6px !important; }
::-webkit-scrollbar-track { background: transparent !important; }
::-webkit-scrollbar-thumb { 
  background: rgba(0,0,0,.15) !important; 
  border-radius: 3px !important; 
}
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.25) !important; }
/* Firefox */
* { scrollbar-width: thin !important; scrollbar-color: rgba(0,0,0,.15) transparent !important; }

/* ---------- TOP NAV BAR ---------- */
.bg-gradient-to-r.from-brand.to-brand-dark,
[class*="bg-gradient-to-r"][class*="from-brand"][class*="to-brand-dark"] {
  background: var(--gc-blue) !important;
  background-image: none !important;
  height: 64px !important;
  box-shadow: 0 2px 4px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06) !important;
  padding: 0 20px !important;
  display: flex !important;
  align-items: center !important;
  z-index: 100 !important;
  position: relative !important;
}

/* Nav bar text */
.bg-gradient-to-r.from-brand.to-brand-dark *,
[class*="bg-gradient-to-r"][class*="from-brand"][class*="to-brand-dark"] * {
  font-family: 'Google Sans', sans-serif !important;
}

/* Search pill in nav */
.bg-white\/15 {
  background: rgba(255,255,255,0.15) !important;
  border-radius: 24px !important;
  padding: 6px 16px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  backdrop-filter: blur(4px) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
}
.bg-white\/15:hover {
  background: rgba(255,255,255,0.25) !important;
}

/* ---------- MAIN LAYOUT ---------- */
.flex.flex-1.overflow-hidden,
.flex-1.overflow-hidden {
  background: var(--gc-bg) !important;
}

/* ---------- LEFT SIDEBAR — DRAGGABLE NARROW ---------- */
.fixed.inset-y-0.left-0.z-40,
[class*="fixed"][class*="inset-y-0"][class*="left-0"][class*="z-40"] {
  width: var(--sidebar-w) !important;
  min-width: var(--sidebar-w) !important;
  max-width: var(--sidebar-w) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background: var(--gc-card) !important;
  border-right: 1px solid var(--gc-border-light) !important;
  box-shadow: 1px 0 3px rgba(0,0,0,.04) !important;
  transition: width 0s !important;
}

/* Truncate all text in sidebar */
.fixed.inset-y-0.left-0.z-40 span,
.fixed.inset-y-0.left-0.z-40 a,
.fixed.inset-y-0.left-0.z-40 button,
.fixed.inset-y-0.left-0.z-40 p {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
  display: block !important;
}

/* Keep flex containers from overflowing */
.fixed.inset-y-0.left-0.z-40 .flex {
  overflow: hidden !important;
  min-width: 0 !important;
}

/* Compact text sizes */
.fixed.inset-y-0.left-0.z-40 .text-sm,
.fixed.inset-y-0.left-0.z-40 [class*="text-sm"] {
  font-size: 10px !important;
  line-height: 1.3 !important;
}
.fixed.inset-y-0.left-0.z-40 .text-xs,
.fixed.inset-y-0.left-0.z-40 [class*="text-xs"] {
  font-size: 9px !important;
}

/* Tight padding for nav items */
.fixed.inset-y-0.left-0.z-40 .py-2,
.fixed.inset-y-0.left-0.z-40 [class*="py-2"] { padding-top: 3px !important; padding-bottom: 3px !important; }
.fixed.inset-y-0.left-0.z-40 .px-4,
.fixed.inset-y-0.left-0.z-40 [class*="px-4"] { padding-left: 6px !important; padding-right: 6px !important; }
.fixed.inset-y-0.left-0.z-40 .px-2,
.fixed.inset-y-0.left-0.z-40 [class*="px-2"] { padding-left: 4px !important; padding-right: 4px !important; }

/* Badge counts compact */
.fixed.inset-y-0.left-0.z-40 .rounded-full,
.fixed.inset-y-0.left-0.z-40 [class*="rounded-full"] {
  font-size: 9px !important;
  padding: 1px 4px !important;
  flex-shrink: 0 !important;
  min-width: 16px !important;
}

/* Course items hover */
.fixed.inset-y-0 .group {
  border-radius: var(--gc-radius) !important;
  margin: 2px 6px !important;
  transition: all var(--gc-transition) !important;
}
.fixed.inset-y-0 .group:hover {
  background: var(--gc-blue-light) !important;
}

/* Main layout offset to match sidebar width */
.ml-72 { margin-left: var(--sidebar-w) !important; }
.ml-64 { margin-left: var(--sidebar-w) !important; }

/* ---------- DRAGGABLE HANDLE ---------- */
#gc-drag-handle {
  position: fixed;
  top: 0;
  left: calc(var(--sidebar-w) - 3px);
  width: 6px;
  height: 100vh;
  z-index: 9999;
  cursor: col-resize;
  background: transparent;
  transition: background var(--gc-transition);
}
#gc-drag-handle:hover,
#gc-drag-handle.dragging {
  background: rgba(26, 115, 232, 0.3);
}
#gc-drag-handle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3px;
  height: 32px;
  border-radius: 3px;
  background: var(--gc-blue);
  opacity: 0;
  transition: opacity var(--gc-transition);
}
#gc-drag-handle:hover::after,
#gc-drag-handle.dragging::after {
  opacity: 0.7;
}

/* ---------- TOPICS PANEL ---------- */
.w-72.shrink-0:not(.fixed) {
  background: var(--gc-bg) !important;
  border: none !important;
  padding: 20px !important;
  overflow-y: auto !important;
}

.flex.flex-1.overflow-hidden > .w-72.shrink-0:not(.fixed) {
  flex-shrink: 0 !important;
}

/* ---------- TOPIC CARDS ---------- */
.w-72 .px-4.py-3,
.w-72 [class*="px-4"][class*="py-3"] {
  background: var(--gc-card) !important;
  border: 1px solid var(--gc-border) !important;
  border-radius: var(--gc-radius-lg) !important;
  margin-bottom: 10px !important;
  padding: 14px 16px !important;
  box-shadow: var(--gc-shadow-xs) !important;
  transition: all var(--gc-transition) !important;
  cursor: pointer !important;
  position: relative !important;
}
.w-72 .px-4.py-3:hover,
.w-72 [class*="px-4"][class*="py-3"]:hover {
  box-shadow: var(--gc-shadow-hover) !important;
  transform: translateY(-2px) !important;
  border-color: transparent !important;
}

/* Active topic card state (set by JS) */
.w-72 .px-4.py-3.gc-active,
.w-72 [class*="px-4"][class*="py-3"].gc-active {
  background: var(--gc-blue-subtle) !important;
  border-color: var(--gc-blue) !important;
  box-shadow: var(--gc-shadow-md), 0 0 0 1px var(--gc-blue) !important;
}
.w-72 .px-4.py-3.gc-active .text-sm.font-semibold,
.w-72 [class*="px-4"][class*="py-3"].gc-active .text-sm.font-semibold {
  color: var(--gc-blue-dark) !important;
}

/* Topic card title */
.w-72 .text-sm.font-semibold {
  color: var(--gc-text-secondary) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  font-family: 'Google Sans', sans-serif !important;
  letter-spacing: -0.01em !important;
}

/* Topic card meta */
.w-72 .text-\[10px\] {
  font-size: 11px !important;
  font-weight: 500 !important;
  border-radius: 12px !important;
  padding: 2px 8px !important;
  letter-spacing: 0.02em !important;
}

/* Bundle card containers */
.w-72 .bg-white.dark\:bg-gray-900,
.w-72 [class*="bg-white"][class*="border"][class*="rounded-xl"] {
  background: var(--gc-card) !important;
  border: 1px solid var(--gc-border) !important;
  border-radius: var(--gc-radius-lg) !important;
  box-shadow: var(--gc-shadow) !important;
  margin-bottom: 14px !important;
  overflow: hidden !important;
  transition: box-shadow var(--gc-transition) !important;
}
.w-72 .bg-white.dark\:bg-gray-900:hover,
.w-72 [class*="bg-white"][class*="border"][class*="rounded-xl"]:hover {
  box-shadow: var(--gc-shadow-md) !important;
}

/* Bundle header gradients */
.w-72 .mb-3.p-3.rounded-xl[class*="bg-gradient"] {
  background: var(--gc-blue) !important;
  color: white !important;
  border-radius: var(--gc-radius-lg) var(--gc-radius-lg) 0 0 !important;
  margin: 0 !important;
  padding: 18px 22px !important;
  border: none !important;
  position: relative !important;
  overflow: hidden !important;
}
.w-72 .mb-3.p-3.rounded-xl[class*="bg-gradient"]::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, transparent 60%);
  pointer-events: none;
}
.w-72 .mb-3.p-3.rounded-xl[class*="bg-gradient"] * {
  color: white !important;
  position: relative !important;
  z-index: 1 !important;
}

/* ---------- CONTENT / LESSON PANEL ---------- */
.flex-1.overflow-y-auto.custom-scroll {
  background: var(--gc-bg) !important;
  padding: 20px !important;
}
.flex-1.overflow-y-auto.custom-scroll.px-5.py-4 {
  padding: 28px 36px !important;
}
.px-5.pt-4.pb-0 {
  padding: 24px 36px 0 !important;
}

/* Content readability wrapper */
.flex-1.overflow-y-auto.custom-scroll > * {
  max-width: var(--content-max-w) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Rich text content within lessons */
.prose, [class*="prose"] {
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: var(--gc-text-secondary) !important;
}

/* ---------- TABS ---------- */
.flex.gap-0.mt-3[class*="border-b"] {
  border-color: var(--gc-border) !important;
  padding: 0 36px !important;
  gap: 0 !important;
}
.flex.gap-0.mt-3 button,
.flex.gap-0.mt-3 > * {
  font-size: 14px !important;
  font-weight: 500 !important;
  font-family: 'Google Sans', sans-serif !important;
  color: var(--gc-text-light) !important;
  padding: 14px 20px !important;
  border-bottom: 3px solid transparent !important;
  transition: all var(--gc-transition) !important;
  border-radius: var(--gc-radius) var(--gc-radius) 0 0 !important;
  position: relative !important;
}
.flex.gap-0.mt-3 button:hover {
  color: var(--gc-blue) !important;
  background: var(--gc-blue-light) !important;
}
.flex.gap-0.mt-3 .border-brand,
.flex.gap-0.mt-3 [class*="border-brand"] {
  color: var(--gc-blue) !important;
  border-bottom-color: var(--gc-blue) !important;
  font-weight: 600 !important;
}

/* ---------- PROGRESS BARS ---------- */
.bg-gradient-to-r.from-brand.to-accent {
  background: linear-gradient(90deg, var(--gc-blue) 0%, #34a0f2 50%, var(--gc-green) 100%) !important;
  background-image: linear-gradient(90deg, var(--gc-blue) 0%, #34a0f2 50%, var(--gc-green) 100%) !important;
  border-radius: 6px !important;
  position: relative !important;
  overflow: hidden !important;
}
/* Animated shimmer on progress bars */
.bg-gradient-to-r.from-brand.to-accent::after {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: gc-shimmer 2.5s ease-in-out infinite;
}
@keyframes gc-shimmer {
  0% { left: -100%; }
  100% { left: 200%; }
}

.h-2.bg-gray-200, .h-1\.5.bg-gray-200, .flex-1.h-1\.5.bg-gray-200 {
  background: var(--gc-border) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
}

/* ---------- SEARCH ---------- */
input[type="search"], input[placeholder*="Search"], input[class*="search"] {
  background: rgba(255,255,255,0.95) !important;
  border: 1px solid var(--gc-border) !important;
  border-radius: 24px !important;
  padding: 10px 18px 10px 42px !important;
  font-size: 14px !important;
  font-family: 'Google Sans Text', sans-serif !important;
  transition: all var(--gc-transition) !important;
  box-shadow: var(--gc-shadow-xs) !important;
}
input[type="search"]:focus, input[placeholder*="Search"]:focus {
  box-shadow: 0 1px 8px rgba(26,115,232,.25) !important;
  border-color: var(--gc-blue) !important;
  outline: none !important;
}

/* ---------- BUTTONS ---------- */
.bg-brand {
  background: var(--gc-blue) !important;
  border-radius: 24px !important;
  font-weight: 500 !important;
  font-family: 'Google Sans', sans-serif !important;
  box-shadow: var(--gc-shadow-xs) !important;
  padding: 8px 24px !important;
  font-size: 14px !important;
  letter-spacing: 0.01em !important;
}
.bg-brand:hover {
  background: var(--gc-blue-dark) !important;
  box-shadow: var(--gc-shadow) !important;
  transform: translateY(-1px) !important;
}
.bg-brand:active {
  transform: translateY(0) !important;
  box-shadow: var(--gc-shadow-xs) !important;
}
.text-brand, .text-brand-light { color: var(--gc-blue) !important; }

/* ---------- SCROLLBAR (legacy class) ---------- */
.custom-scroll::-webkit-scrollbar { width: 6px !important; }
.custom-scroll::-webkit-scrollbar-track { background: transparent !important; }
.custom-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,.12) !important; border-radius: 3px !important; }
.custom-scroll::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.22) !important; }

/* ---------- FULLWIDTH ---------- */
.max-w-3xl { max-width: 100% !important; }
.max-w-lg { max-width: 100% !important; }

/* ---------- HEADINGS TYPOGRAPHY ---------- */
h1, .text-2xl, .text-xl { font-family: 'Google Sans', sans-serif !important; }
.text-2xl { font-size: 24px !important; font-weight: 600 !important; letter-spacing: -0.02em !important; color: var(--gc-text) !important; }
.text-xl { font-size: 20px !important; font-weight: 500 !important; letter-spacing: -0.01em !important; color: var(--gc-text) !important; }
.text-lg { font-size: 16px !important; font-weight: 500 !important; font-family: 'Google Sans', sans-serif !important; }

/* ---------- TOOLTIPS + POPOVERS ---------- */
[role="tooltip"], [data-tippy-root], .tippy-box {
  font-family: 'Google Sans Text', sans-serif !important;
  font-size: 12px !important;
  border-radius: var(--gc-radius) !important;
  box-shadow: var(--gc-shadow-lg) !important;
}

/* ---------- BADGES / CHIPS ---------- */
.rounded-full {
  font-family: 'Google Sans Text', sans-serif !important;
}

/* ---------- EMPTY STATE ---------- */
.text-center.text-gray-500 {
  color: var(--gc-text-muted) !important;
  font-size: 14px !important;
}

/* ---------- CARD CONTAINERS IN CONTENT ---------- */
.bg-white.rounded-xl,
.bg-white.rounded-lg,
[class*="bg-white"][class*="rounded-xl"],
[class*="bg-white"][class*="rounded-lg"] {
  border: 1px solid var(--gc-border-light) !important;
  box-shadow: var(--gc-shadow-xs) !important;
  border-radius: var(--gc-radius-lg) !important;
  transition: box-shadow var(--gc-transition) !important;
}

/* ---------- LOADING SKELETON ---------- */
@keyframes gc-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.animate-pulse {
  animation: gc-pulse 1.8s cubic-bezier(.4,0,.6,1) infinite !important;
}

/* ---------- TOPIC ENTRANCE ANIMATION ---------- */
@keyframes gc-fadeSlideUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.gc-topic-enter {
  animation: gc-fadeSlideUp 0.3s ease-out forwards;
}

/* ---------- MOBILE ---------- */
@media (max-width: 768px) {
  :root {
    --sidebar-w: 0px;
    --content-max-w: 100%;
  }
  #gc-drag-handle { display: none !important; }
  .w-72.shrink-0:not(.fixed) { padding: 10px !important; }
  .flex-1.overflow-y-auto.custom-scroll.px-5.py-4 { padding: 16px !important; }
  .flex.gap-0.mt-3[class*="border-b"] { padding: 0 16px !important; }
}

/* ---------- DARK MODE ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --gc-bg: #1a1a2e;
    --gc-card: #16213e;
    --gc-text: #e8eaed;
    --gc-text-secondary: #d2d4d7;
    --gc-text-light: #9aa0a6;
    --gc-text-muted: #6b7280;
    --gc-border: #2d3748;
    --gc-border-light: #1f2937;
    --gc-blue-light: rgba(26,115,232,0.15);
    --gc-blue-subtle: rgba(26,115,232,0.1);
    --gc-shadow-xs: 0 1px 2px rgba(0,0,0,.2);
    --gc-shadow: 0 1px 3px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2);
    --gc-shadow-md: 0 2px 6px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.25);
    --gc-shadow-hover: 0 4px 12px rgba(0,0,0,.3), 0 2px 4px rgba(0,0,0,.2);
    --gc-shadow-lg: 0 8px 24px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.2);
  }

  body { background: var(--gc-bg) !important; }

  .bg-white.rounded-xl,
  .bg-white.rounded-lg,
  [class*="bg-white"][class*="rounded-xl"],
  [class*="bg-white"][class*="rounded-lg"] {
    background: var(--gc-card) !important;
    border-color: var(--gc-border) !important;
  }

  .w-72 .px-4.py-3,
  .w-72 [class*="px-4"][class*="py-3"] {
    background: var(--gc-card) !important;
    border-color: var(--gc-border) !important;
  }

  input[type="search"], input[placeholder*="Search"], input[class*="search"] {
    background: var(--gc-card) !important;
    border-color: var(--gc-border) !important;
    color: var(--gc-text) !important;
  }

  ::selection {
    background: rgba(26,115,232,0.4) !important;
    color: #fff !important;
  }
}