classroomio/apps/dashboard/src/app.css

/*Write your global styles here, in PostCSS syntax */
@import 'tailwindcss';

@import '@cio/ui/output.css';

@custom-variant dark (&:where(.dark, .dark *));

/** Global scrollbar styles */
html {
  --scrollbarBG: #fff;
  --thumbBG: #ccc;
  scroll-behavior: smooth;
  font-family:
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    Segoe UI,
    Roboto,
    Helvetica Neue,
    Arial,
    Noto Sans,
    sans-serif,
    'Apple Color Emoji',
    'Segoe UI Emoji',
    Segoe UI Symbol,
    'Noto Color Emoji' !important;
}

#calendar .grid {
  --sc-theme-calendar-colors-background-highlight: var(--main-primary-color);
}

html .dark {
  --scrollbarBG: #000;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}

html .dark {
  --scrollbarBG: #000;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: var(--scrollbarBG);
}

*::-webkit-scrollbar-thumb {
  background-color: var(--thumbBG);
  border-radius: 10px;
  border: 2px solid var(--scrollbarBG);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: revert;
  font-weight: revert;
  margin: 0.8em 0;
}

.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
  margin-top: 0px !important;
  margin-bottom: 16px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
}

.prose p {
  margin-top: 0px !important;
  margin-bottom: 10px !important;
}

/* .dark .prose h1,
.dark .prose h2,
.dark .prose h3,
.dark .prose h4,
.dark .prose h5,
.dark .prose h6,
.dark .prose li,
.dark .prose strong,
.dark .prose li::marker,
.dark .prose p {
  color: #fff !important;
} */

iframe.iframe {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  height: 450px;
  border: 1px solid gray;
  border-radius: 5px;
}

@media (max-width: 760px) {
  iframe.iframe {
    height: 209px;
  }
}

code {
  white-space: pre-wrap;
}

.prose a {
  color: var(--main-primary-color);
}

svg.lucide-icon:not(.custom) {
  color: #666666;
}

.dark svg.lucide-icon:not(.custom) {
  color: #fff;
}

.org-root {
  height: calc(100vh - 48px);
}

.org-slot {
  min-width: calc(100vw - 250px);
  height: calc(100vh - 48px);
  overflow-y: auto;
}

.shake {
  animation: shake 0.85s;
}

@keyframes shake {

  10%,
  90% {
    transform: translate3d(-15px, 0, 0);
  }

  20%,
  80% {
    transform: translate3d(15px, 0, 0);
  }

  30%,
  50%,
  70% {
    transform: translate3d(-15px, 0, 0);
  }

  40%,
  60% {
    transform: translate3d(15px, 0, 0);
  }
}

.bx--list-box__menu-item__option {
  white-space: normal !important;
}

.bx--list-box--xl .bx--list-box__menu-item,
.bx--list-box--lg .bx--list-box__menu-item,
.bx--list-box__menu-item__option {
  height: fit-content !important;
}

.cio-bg-blue {
  background: rgb(2, 51, 189);
  background-size: cover;
  background: radial-gradient(circle at 50% 100%, rgba(2, 51, 189, 1) 1%, rgb(4, 2, 56) 100%);
}

@media screen and (max-width: 457px) {
  .org-slot {
    min-width: 100%;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
  }
}

/**
  Rose Theme
*/
.theme-rose .bg-primary-50 {
  background-color: #fff1f2 !important;
}

.theme-rose .text-primary-50 {
  color: #fff1f2 !important;
}

.theme-rose .border-primary-50 {
  border-color: #fff1f2 !important;
}

.theme-rose .bg-primary-100 {
  background-color: #ffe4e7 !important;
}

.theme-rose .text-primary-100 {
  color: #ffe4e7 !important;
}

.theme-rose .border-primary-100 {
  border-color: #ffe4e7 !important;
}

.theme-rose .bg-primary-200 {
  background-color: #fecdd4 !important;
}

.theme-rose .text-primary-200 {
  color: #fecdd4 !important;
}

.theme-rose .border-primary-200 {
  border-color: #fecdd4 !important;
}

.theme-rose .bg-primary-300 {
  background-color: #fda4b2 !important;
}

.theme-rose .text-primary-300 {
  color: #fda4b2 !important;
}

.theme-rose .border-primary-300 {
  border-color: #fda4b2 !important;
}

.theme-rose .bg-primary-400 {
  background-color: #fb7189 !important;
}

.theme-rose .text-primary-400 {
  color: #fb7189 !important;
}

.theme-rose .border-primary-400 {
  border-color: #fb7189 !important;
}

.theme-rose .bg-primary-500 {
  background-color: #f43f63 !important;
}

.theme-rose .text-primary-500 {
  color: #f43f63 !important;
}

.theme-rose .border-primary-500 {
  border-color: #f43f63 !important;
}

.theme-rose .bg-primary-600 {
  background-color: #e21d4e !important;
}

.theme-rose .text-primary-600 {
  color: #e21d4e !important;
}

.theme-rose .border-primary-600 {
  border-color: #e21d4e !important;
}

.theme-rose .bg-primary-700 {
  background-color: #be1241 !important;
}

.theme-rose .text-primary-700 {
  color: #be1241 !important;
}

.theme-rose .border-primary-700 {
  border-color: #be1241 !important;
}

.theme-rose .bg-primary-800 {
  background-color: #9f123d !important;
}

.theme-rose .text-primary-800 {
  color: #9f123d !important;
}

.theme-rose .border-primary-800 {
  border-color: #9f123d !important;
}

.theme-rose .bg-primary-900 {
  background-color: #88133a !important;
}

.theme-rose .text-primary-900 {
  color: #88133a !important;
}

.theme-rose .border-primary-900 {
  border-color: #88133a !important;
}

/**
  Blue Theme
*/
.bg-primary-50 {
  background-color: #eff6ff !important;
}

.text-primary-50 {
  color: #eff6ff !important;
}

.border-primary-50 {
  border-color: #eff6ff !important;
}

.bg-primary-100 {
  background-color: #dbeafe !important;
}

.text-primary-100 {
  color: #dbeafe !important;
}

.border-primary-100 {
  border-color: #dbeafe !important;
}

.bg-primary-200 {
  background-color: #bfdafe !important;
}

.text-primary-200 {
  color: #bfdafe !important;
}

.border-primary-200 {
  border-color: #bfdafe !important;
}

.bg-primary-300 {
  background-color: #92c4fe !important;
}

.text-primary-300 {
  color: #92c4fe !important;
}

.border-primary-300 {
  border-color: #92c4fe !important;
}

.bg-primary-400 {
  background-color: #5fa3fb !important;
}

.text-primary-400 {
  color: #5fa3fb !important;
}

.border-primary-400 {
  border-color: #5fa3fb !important;
}

.bg-primary-500 {
  background-color: #3a7ff7 !important;
}

.text-primary-500 {
  color: #3a7ff7 !important;
}

.border-primary-500 {
  border-color: #3a7ff7 !important;
}

.bg-primary-600 {
  background-color: #2460ec !important;
}

.text-primary-600 {
  color: #2460ec !important;
}

.border-primary-600 {
  border-color: #2460ec !important;
}

.bg-primary-700 {
  background-color: #1d4ee2 !important;
}

.text-primary-700 {
  color: #1d4ee2 !important;
}

.border-primary-700 {
  border-color: #1d4ee2 !important;
}

.bg-primary-800 {
  background-color: #1d3eb0 !important;
}

.text-primary-800 {
  color: #1d3eb0 !important;
}

.border-primary-800 {
  border-color: #1d3eb0 !important;
}

.bg-primary-900 {
  background-color: #1d398b !important;
}

.text-primary-900 {
  color: #1d398b !important;
}

.border-primary-900 {
  border-color: #1d398b !important;
}

/**
  Green Theme
*/
.theme-green .bg-primary-50 {
  background-color: #effef0 !important;
}

.theme-green .text-primary-50 {
  color: #effef0 !important;
}

.theme-green .border-primary-50 {
  border-color: #effef0 !important;
}

.theme-green .bg-primary-100 {
  background-color: #d9ffdc !important;
}

.theme-green .text-primary-100 {
  color: #d9ffdc !important;
}

.theme-green .border-primary-100 {
  border-color: #d9ffdc !important;
}

.theme-green .bg-primary-200 {
  background-color: #b6fcbc !important;
}

.theme-green .text-primary-200 {
  color: #b6fcbc !important;
}

.theme-green .border-primary-200 {
  border-color: #b6fcbc !important;
}

.theme-green .bg-primary-300 {
  background-color: #7df88a !important;
}

.theme-green .text-primary-300 {
  color: #7df88a !important;
}

.theme-green .border-primary-300 {
  border-color: #7df88a !important;
}

.theme-green .bg-primary-400 {
  background-color: #3deb51 !important;
}

.theme-green .text-primary-400 {
  color: #3deb51 !important;
}

.theme-green .border-primary-400 {
  border-color: #3deb51 !important;
}

.theme-green .bg-primary-500 {
  background-color: #12bf26 !important;
}

.theme-green .text-primary-500 {
  color: #12bf26 !important;
}

.theme-green .border-primary-500 {
  border-color: #12bf26 !important;
}

.theme-green .bg-primary-600 {
  background-color: #0aaf1d !important;
}

.theme-green .text-primary-600 {
  color: #0aaf1d !important;
}

.theme-green .border-primary-600 {
  border-color: #0aaf1d !important;
}

.theme-green .bg-primary-700 {
  background-color: #0c891b !important;
}

.theme-green .text-primary-700 {
  color: #0c891b !important;
}

.theme-green .border-primary-700 {
  border-color: #0c891b !important;
}

.theme-green .bg-primary-800 {
  background-color: #0f6c1b !important;
}

.theme-green .text-primary-800 {
  color: #0f6c1b !important;
}

.theme-green .border-primary-800 {
  border-color: #0f6c1b !important;
}

.theme-green .bg-primary-900 {
  background-color: #0f581a !important;
}

.theme-green .text-primary-900 {
  color: #0f581a !important;
}

.theme-green .border-primary-900 {
  border-color: #0f581a !important;
}

/**
  Orange Theme
*/
.theme-orange .bg-primary-50 {
  background-color: #fff8ec !important;
}

.theme-orange .text-primary-50 {
  color: #fff8ec !important;
}

.theme-orange .border-primary-50 {
  border-color: #fff8ec !important;
}

.theme-orange .bg-primary-100 {
  background-color: #fff0d3 !important;
}

.theme-orange .text-primary-100 {
  color: #fff0d3 !important;
}

.theme-orange .border-primary-100 {
  border-color: #fff0d3 !important;
}

.theme-orange .bg-primary-200 {
  background-color: #ffdca5 !important;
}

.theme-orange .text-primary-200 {
  color: #ffdca5 !important;
}

.theme-orange .border-primary-200 {
  border-color: #ffdca5 !important;
}

.theme-orange .bg-primary-300 {
  background-color: #ffc26d !important;
}

.theme-orange .text-primary-300 {
  color: #ffc26d !important;
}

.theme-orange .border-primary-300 {
  border-color: #ffc26d !important;
}

.theme-orange .bg-primary-400 {
  background-color: #ff9d32 !important;
}

.theme-orange .text-primary-400 {
  color: #ff9d32 !important;
}

.theme-orange .border-primary-400 {
  border-color: #ff9d32 !important;
}

.theme-orange .bg-primary-500 {
  background-color: #ff7f0a !important;
}

.theme-orange .text-primary-500 {
  color: #ff7f0a !important;
}

.theme-orange .border-primary-500 {
  border-color: #ff7f0a !important;
}

.theme-orange .bg-primary-600 {
  background-color: #ff6600 !important;
}

.theme-orange .text-primary-600 {
  color: #ff6600 !important;
}

.theme-orange .border-primary-600 {
  border-color: #ff6600 !important;
}

.theme-orange .bg-primary-700 {
  background-color: #cc4902 !important;
}

.theme-orange .text-primary-700 {
  color: #cc4902 !important;
}

.theme-orange .border-primary-700 {
  border-color: #cc4902 !important;
}

.theme-orange .bg-primary-800 {
  background-color: #a1390b !important;
}

.theme-orange .text-primary-800 {
  color: #a1390b !important;
}

.theme-orange .border-primary-800 {
  border-color: #a1390b !important;
}

.theme-orange .bg-primary-900 {
  background-color: #82310c !important;
}

.theme-orange .text-primary-900 {
  color: #82310c !important;
}

.theme-orange .border-primary-900 {
  border-color: #82310c !important;
}

/**
  Violet Theme
*/
.theme-violet .bg-primary-50 {
  background-color: #fff2fe !important;
}

.theme-violet .text-primary-50 {
  color: #fff2fe !important;
}

.theme-violet .border-primary-50 {
  border-color: #fff2fe !important;
}

.theme-violet .bg-primary-100 {
  background-color: #ffe3fe !important;
}

.theme-violet .text-primary-100 {
  color: #ffe3fe !important;
}

.theme-violet .border-primary-100 {
  border-color: #ffe3fe !important;
}

.theme-violet .bg-primary-200 {
  background-color: #ffc6fe !important;
}

.theme-violet .text-primary-200 {
  color: #ffc6fe !important;
}

.theme-violet .border-primary-200 {
  border-color: #ffc6fe !important;
}

.theme-violet .bg-primary-300 {
  background-color: #ff99f7 !important;
}

.theme-violet .text-primary-300 {
  color: #ff99f7 !important;
}

.theme-violet .border-primary-300 {
  border-color: #ff99f7 !important;
}

.theme-violet .bg-primary-400 {
  background-color: #ff5df2 !important;
}

.theme-violet .text-primary-400 {
  color: #ff5df2 !important;
}

.theme-violet .border-primary-400 {
  border-color: #ff5df2 !important;
}

.theme-violet .bg-primary-500 {
  background-color: #ff21f5 !important;
}

.theme-violet .text-primary-500 {
  color: #ff21f5 !important;
}

.theme-violet .border-primary-500 {
  border-color: #ff21f5 !important;
}

.theme-violet .bg-primary-600 {
  background-color: #fb00ff !important;
}

.theme-violet .text-primary-600 {
  color: #fb00ff !important;
}

.theme-violet .border-primary-600 {
  border-color: #fb00ff !important;
}

.theme-violet .bg-primary-700 {
  background-color: #cf00ce !important;
}

.theme-violet .text-primary-700 {
  color: #cf00ce !important;
}

.theme-violet .border-primary-700 {
  border-color: #cf00ce !important;
}

.theme-violet .bg-primary-800 {
  background-color: #a900a6 !important;
}

.theme-violet .text-primary-800 {
  color: #a900a6 !important;
}

.theme-violet .border-primary-800 {
  border-color: #a900a6 !important;
}

.theme-violet .bg-primary-900 {
  background-color: #890684 !important;
}

.theme-violet .text-primary-900 {
  color: #890684 !important;
}

.theme-violet .border-primary-900 {
  border-color: #890684 !important;
}

/* Tailwind v4 Custom Animations and Keyframes */
@theme {
  --animate-NEWS_FEED: shakeAnnouncement 0.5s ease-in-out;
  --animate-SECTION: flipBook 0.6s ease-in-out;
  --animate-LESSONS: scrollUnroll 0.8s ease-out;
  --animate-ATTENDANCE: attendanceCount 0.8s ease-in-out;
  --animate-SUBMISSIONS: taskComplete 0.6s ease-in-out;
  --animate-MARKS: gradeGlow 1s ease-in-out;
  --animate-PEOPLE: peopleWave 0.8s ease-in-out;
  --animate-ANALYTICS: dataScan 1s ease-in-out;
  --animate-LANDING_PAGE: screenGlow 1s ease-in-out;
  --animate-library-expand: libraryExpand 0.7s ease-out;
  --animate-template-morph: templateMorph 0.6s ease-in-out;
  --animate-ripple: communityRipple 0.9s ease-out;
  --animate-roll: quizRoll 0.8s ease-in-out;
  --animate-gather: audienceGather 0.7s ease-in-out;
  --animate-setup-configure: setupConfigure 1s ease-in-out;
}

@keyframes shakeAnnouncement {

  0%,
  100% {
    transform: translateX(0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-2px);
  }

  20%,
  40%,
  60%,
  80% {
    transform: translateX(2px);
  }
}

@keyframes flipBook {
  0% {
    transform: rotateY(0deg);
  }

  50% {
    transform: rotateY(90deg);
  }

  100% {
    transform: rotateY(0deg);
  }
}

@keyframes scrollUnroll {
  0% {
    transform: scaleY(0) translateY(-50%);
    opacity: 0.5;
  }

  50% {
    transform: scaleY(0.8) translateY(-25%);
    opacity: 0.8;
  }

  100% {
    transform: scaleY(1) translateY(0);
    opacity: 1;
  }
}

@keyframes attendanceCount {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }

  20% {
    transform: scale(1.1);
    opacity: 1;
  }

  40% {
    transform: scale(1.05);
    opacity: 0.9;
  }

  60% {
    transform: scale(1.15);
    opacity: 1;
  }

  80% {
    transform: scale(1.02);
    opacity: 0.95;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes taskComplete {
  0% {
    transform: scale(1) rotate(0deg);
  }

  25% {
    transform: scale(1.1) rotate(-5deg);
  }

  50% {
    transform: scale(1.2) rotate(5deg);
  }

  75% {
    transform: scale(1.1) rotate(-2deg);
  }

  100% {
    transform: scale(1) rotate(0deg);
  }
}

@keyframes gradeGlow {

  0%,
  100% {
    transform: scale(1);
    filter: brightness(1) drop-shadow(0 0 0 rgba(34, 197, 94, 0));
  }

  50% {
    transform: scale(1.15);
    filter: brightness(1.3) drop-shadow(0 0 8px rgba(34, 197, 94, 0.6));
  }
}

@keyframes peopleWave {

  0%,
  100% {
    transform: rotate(0deg) scale(1);
  }

  25% {
    transform: rotate(-5deg) scale(1.05);
  }

  50% {
    transform: rotate(5deg) scale(1.1);
  }

  75% {
    transform: rotate(-3deg) scale(1.05);
  }
}

@keyframes dataScan {
  0% {
    transform: scale(1);
    filter: brightness(1) drop-shadow(0 0 0 rgba(99, 102, 241, 0));
  }

  25% {
    transform: scale(1.05);
    filter: brightness(1.1) drop-shadow(0 0 4px rgba(99, 102, 241, 0.4));
  }

  50% {
    transform: scale(1.1);
    filter: brightness(1.2) drop-shadow(0 0 8px rgba(99, 102, 241, 0.6));
  }

  75% {
    transform: scale(1.15) rotate(2deg);
    filter: brightness(1.3) drop-shadow(0 0 12px rgba(99, 102, 241, 0.8));
  }

  100% {
    transform: scale(1);
    filter: brightness(1) drop-shadow(0 0 0 rgba(99, 102, 241, 0));
  }
}

@keyframes screenGlow {

  0%,
  100% {
    transform: scale(1);
    filter: brightness(1) drop-shadow(0 0 0 rgba(59, 130, 246, 0));
  }

  50% {
    transform: scale(1.1);
    filter: brightness(1.2) drop-shadow(0 0 6px rgba(59, 130, 246, 0.5));
  }
}

@keyframes libraryExpand {
  0% {
    transform: translateY(-100%) scale(0.8);
    opacity: 0;
  }

  30% {
    transform: translateY(-20%) scale(0.9);
    opacity: 0.7;
  }

  60% {
    transform: translateY(5%) scale(1.05);
    opacity: 1;
  }

  80% {
    transform: translateY(-2%) scale(1.02);
    opacity: 1;
  }

  100% {
    transform: translateY(0%) scale(1);
    opacity: 1;
  }
}

@keyframes templateMorph {
  0% {
    transform: scale(1) rotate(0deg);
  }

  25% {
    transform: scale(1.05) rotate(-2deg) skewX(2deg);
  }

  50% {
    transform: scale(1.1) rotate(2deg) skewX(-2deg);
  }

  75% {
    transform: scale(1.05) rotate(-1deg) skewX(1deg);
  }

  100% {
    transform: scale(1) rotate(0deg) skewX(0deg);
  }
}

@keyframes communityRipple {
  0% {
    transform: translateX(-100%) scale(0.8);
    opacity: 0;
  }

  30% {
    transform: translateX(-20%) scale(0.9);
    opacity: 0.7;
  }

  60% {
    transform: translateX(5%) scale(1.05);
    opacity: 1;
  }

  80% {
    transform: translateX(-2%) scale(1.02);
    opacity: 1;
  }

  100% {
    transform: translateX(0%) scale(1);
    opacity: 1;
  }
}

@keyframes quizRoll {
  0% {
    transform: scale(1) rotate(0deg);
  }

  20% {
    transform: scale(1.05) rotate(72deg);
  }

  40% {
    transform: scale(1.1) rotate(144deg);
  }

  60% {
    transform: scale(1.15) rotate(216deg);
  }

  80% {
    transform: scale(1.1) rotate(288deg);
  }

  100% {
    transform: scale(1) rotate(360deg);
  }
}

@keyframes audienceGather {
  0% {
    transform: scale(1);
    filter: brightness(1) drop-shadow(0 0 0 rgba(147, 51, 234, 0));
  }

  25% {
    transform: scale(0.95) scaleX(1.1);
    filter: brightness(1.05) drop-shadow(0 0 2px rgba(147, 51, 234, 0.3));
  }

  50% {
    transform: scale(1.1) scaleX(0.9);
    filter: brightness(1.1) drop-shadow(0 0 4px rgba(147, 51, 234, 0.5));
  }

  75% {
    transform: scale(1.05) scaleX(1.05);
    filter: brightness(1.05) drop-shadow(0 0 2px rgba(147, 51, 234, 0.3));
  }

  100% {
    transform: scale(1) scaleX(1);
    filter: brightness(1) drop-shadow(0 0 0 rgba(147, 51, 234, 0));
  }
}

@keyframes setupConfigure {
  0% {
    transform: scale(1) rotate(0deg);
  }

  15% {
    transform: scale(1.02) rotate(15deg);
  }

  30% {
    transform: scale(1.04) rotate(-10deg);
  }

  45% {
    transform: scale(1.06) rotate(20deg);
  }

  60% {
    transform: scale(1.08) rotate(-15deg);
  }

  75% {
    transform: scale(1.06) rotate(10deg);
  }

  90% {
    transform: scale(1.02) rotate(-5deg);
  }

  100% {
    transform: scale(1) rotate(0deg);
  }
}