/* Hide native browser password reveal & clear buttons */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* ==========================================
   1. CUSTOM SCROLLBARS
   ========================================== */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.4);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.7);
}

/* ==========================================
   2. CUSTOM ANIMATIONS
   ========================================== */
@keyframes gradientAnimation {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes liquidBlob1 {
  0% { transform: translate(0px, 0px) scale(1); }
  50% { transform: translate(30px, -20px) scale(1.08); }
  100% { transform: translate(0px, 0px) scale(1); }
}
@keyframes liquidBlob2 {
  0% { transform: translate(0px, 0px) scale(1); }
  50% { transform: translate(-20px, 30px) scale(0.92); }
  100% { transform: translate(0px, 0px) scale(1); }
}
@keyframes pulseGreenAnim {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
@keyframes flashGreen {
  0% { box-shadow: 0 0 0 0 rgba(0, 152, 218, 0.4); border-color: #0098da; }
  50% { box-shadow: 0 0 0 8px rgba(0, 152, 218, 0.2); border-color: #10b981; }
  100% { box-shadow: 0 0 0 0 rgba(0, 152, 218, 0); }
}
@keyframes strokeAnim {
  to { stroke-dashoffset: 0.5; }
}

.animate-mesh-gradient {
  background-size: 200% 200%;
  animation: gradientAnimation 15s ease infinite;
}
.animate-blob-1 {
  animation: liquidBlob1 60s infinite alternate ease-in-out;
}
.animate-blob-2 {
  animation: liquidBlob2 75s infinite alternate ease-in-out;
}
.pulse-green {
  animation: pulseGreenAnim 1.6s cubic-bezier(0.25, 0, 0, 1) infinite;
}
.flash-autofill {
  animation: flashGreen 0.8s ease-out;
}
.svg-progress-circle {
  stroke-dasharray: 251.2;
  stroke-dashoffset: 251.2;
  animation: strokeAnim 2.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ==========================================
   3. GLASSMORPHISM CORE STYLING
   ========================================== */
.glass {
  background: rgba(255, 255, 255, 0.22) !important;
  backdrop-filter: blur(35px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(35px) saturate(160%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.65) !important;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.6), 0 8px 32px 0 rgba(15, 23, 42, 0.06) !important;
}
.glass-dark {
  background: rgba(15, 23, 42, 0.22) !important;
  backdrop-filter: blur(35px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(35px) saturate(160%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.2), 0 8px 32px 0 rgba(0, 0, 0, 0.25) !important;
}

.glass-glow-primary:hover {
  border-color: rgba(0, 152, 218, 0.3) !important;
  box-shadow: 0 8px 30px rgba(0, 152, 218, 0.08) !important;
}
.glass-glow-success:hover {
  border-color: rgba(16, 185, 129, 0.3) !important;
  box-shadow: 0 8px 30px rgba(16, 185, 129, 0.08) !important;
}
.glass-glow-warning:hover {
  border-color: rgba(245, 158, 11, 0.3) !important;
  box-shadow: 0 8px 30px rgba(245, 158, 11, 0.08) !important;
}
.glass-glow-danger:hover {
  border-color: rgba(239, 68, 68, 0.3) !important;
  box-shadow: 0 8px 30px rgba(239, 68, 68, 0.08) !important;
}

/* ==========================================
   4. LAYOUT OVERRIDES (SIDEBAR TRANSLATE)
   ========================================== */
#app-sidebar {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ==========================================
   5. THIRD-PARTY & CURRICULUM TREE OVERRIDES
   ========================================== */
.tree-list {
  list-style-type: none;
  padding-left: 0;
  margin: 0;
}
.tree-node-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.375rem 0.625rem;
  border-radius: 0.75rem;
  transition: all 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.tree-node-row:hover {
  background-color: rgba(241, 245, 249, 0.7) !important;
}
.drag-handle {
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem;
  border-radius: 0.5rem;
  color: #cbd5e1;
  transition: color 150ms, background-color 150ms;
}
.drag-handle:active {
  cursor: grabbing;
}
.drag-handle:hover {
  background-color: rgba(226, 232, 240, 0.8);
  color: #475569;
}
.arrow-toggle {
  transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.arrow-toggle.expanded {
  transform: rotate(90deg);
}
.sortable-ghost {
  opacity: 0.3;
  border: 2px dashed #0098da !important;
  background-color: rgba(0, 152, 218, 0.05) !important;
}
.sortable-chosen {
  background-color: rgba(241, 245, 249, 0.9) !important;
}
.sortable-drag {
  opacity: 0.95;
  box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1) !important;
}
.topics-list {
  border-left: 1.5px solid rgba(226, 232, 240, 0.8);
  margin-left: 1.5rem;
  padding-left: 1rem;
}
.subtopics-list {
  border-left: 1.5px solid rgba(226, 232, 240, 0.6);
  margin-left: 1.25rem;
  padding-left: 0.875rem;
}

@media (max-width: 575.98px) {
  .topics-list {
    margin-left: 0.5rem !important;
    padding-left: 0.5rem !important;
  }
  .subtopics-list {
    margin-left: 0.35rem !important;
    padding-left: 0.35rem !important;
  }
}