classroomio/apps/dashboard/src/app.css

/*Write your global styles here, in PostCSS syntax */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap');

@import 'tailwindcss';

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

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

/** Global scrollbar styles */
html {
  --scrollbarBG: #fff;
  --thumbBG: #ccc;
  scroll-behavior: smooth;
}

#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);
}

.prose {
  color: var(--foreground);
}

.prose h1,
.prose h2,
.prose h3,
.prose h4 {
  @apply scroll-m-20 tracking-tight text-balance;
  color: var(--foreground);
}

.prose h1 {
  @apply mt-0 text-4xl font-extrabold;
}

.prose h2 {
  @apply mt-10 border-b pb-2 text-3xl font-semibold transition-colors;
}

.prose h2:first-child {
  @apply mt-0;
}

.prose h3 {
  @apply mt-8 text-2xl font-semibold;
}

.prose h4 {
  @apply mt-8 text-xl font-semibold;
}

.prose p,
.prose li,
.prose blockquote {
  @apply leading-7;
}

.prose p {
  @apply my-0;
}

.prose p:not(:first-child) {
  @apply mt-6;
}

.prose a {
  @apply font-medium underline underline-offset-4;
  color: var(--primary);
}

.prose blockquote {
  @apply mt-6 border-s-2 ps-6 italic;
  border-inline-start-color: var(--border);
}

.prose ul,
.prose ol {
  @apply my-6 ms-6 p-0;
}

.prose ul {
  @apply list-disc;
}

.prose ol {
  @apply list-decimal;
}

.prose li {
  @apply mt-2;
}

.prose table {
  @apply my-6 w-full border-collapse;
}

.prose thead tr,
.prose tbody tr {
  @apply m-0 border-t p-0;
  border-top-color: var(--border);
}

.prose tbody tr:nth-child(even) {
  background: var(--muted);
}

.prose th,
.prose td {
  @apply border px-4 py-2 text-start;
  border-color: var(--border);
}

.prose th {
  @apply font-bold;
}

.prose th[align='center'],
.prose td[align='center'] {
  @apply text-center;
}

.prose th[align='right'],
.prose td[align='right'] {
  @apply text-end;
}

/* .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;
} */

body {
  --plyr-color-main: var(--primary);
  --plyr-focus-visible-color: var(--ring);
  --plyr-video-control-background-hover: var(--primary);
  --plyr-audio-control-background-hover: var(--primary);
  --plyr-control-toggle-checked-background: var(--primary);
  --plyr-range-fill-background: var(--primary);
  --plyr-menu-background: var(--popover);
  --plyr-menu-color: var(--popover-foreground);
  --plyr-menu-border-color: var(--border);
  --plyr-tooltip-background: var(--popover);
  --plyr-tooltip-color: var(--popover-foreground);
}

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;
  }
}

:not([data-slot='button']) > svg.lucide-icon:not(.custom) {
  color: #666666;
}

.dark :not([data-slot='button']) > svg.lucide-icon:not(.custom) {
  color: #fff;
}

.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;
  }
}

body[data-theme='default'] {
  --chart-1: var(--color-blue-300);
  --chart-2: var(--color-blue-500);
  --chart-3: var(--color-blue-600);
  --chart-4: var(--color-blue-700);
  --chart-5: var(--color-blue-800);
}

body[data-theme='blue'] {
  --primary: var(--color-blue-700);
  --primary-foreground: var(--color-blue-50);
  /* --ring: var(--color-blue-100); */
  --sidebar-primary: var(--color-blue-600);
  --sidebar-primary-foreground: var(--color-blue-50);
  --sidebar-accent: var(--color-blue-50);
  --sidebar-accent-foreground: var(--color-blue-700);
  /* --sidebar-ring: var(--color-blue-400); */
  --chart-1: var(--color-blue-300);
  --chart-2: var(--color-blue-500);
  --chart-3: var(--color-blue-600);
  --chart-4: var(--color-blue-700);
  --chart-5: var(--color-blue-800);

  @variant dark {
    --primary: var(--color-blue-700);
    --primary-foreground: var(--color-blue-50);
    /* --ring: var(--color-blue-900); */
    --sidebar-primary: var(--color-blue-500);
    --sidebar-primary-foreground: var(--color-blue-50);
    --sidebar-accent: oklch(0.268 0.007 34.298);
    --sidebar-accent-foreground: var(--color-blue-500);
    /* --sidebar-ring: var(--color-blue-900); */
  }
}

body[data-theme='green'] {
  --primary: var(--color-lime-600);
  --primary-foreground: var(--color-lime-50);
  --ring: var(--color-lime-400);
  --chart-1: var(--color-green-300);
  --chart-2: var(--color-green-500);
  --chart-3: var(--color-green-600);
  --chart-4: var(--color-green-700);
  --chart-5: var(--color-green-800);
  --sidebar-primary: var(--color-lime-600);
  --sidebar-primary-foreground: var(--color-lime-50);
  --sidebar-accent: var(--color-lime-50);
  --sidebar-accent-foreground: var(--color-lime-700);
  --sidebar-ring: var(--color-lime-400);

  @variant dark {
    --primary: var(--color-lime-600);
    --primary-foreground: var(--color-lime-50);
    --ring: var(--color-lime-900);
    --sidebar-primary: var(--color-lime-500);
    --sidebar-primary-foreground: var(--color-lime-50);
    --sidebar-accent: oklch(0.268 0.007 34.298);
    --sidebar-accent-foreground: var(--color-lime-500);
    --sidebar-ring: var(--color-lime-900);
  }
}

body[data-theme='amber'] {
  --primary: var(--color-amber-600);
  --primary-foreground: var(--color-amber-50);
  --ring: var(--color-amber-400);
  --chart-1: var(--color-amber-300);
  --chart-2: var(--color-amber-500);
  --chart-3: var(--color-amber-600);
  --chart-4: var(--color-amber-700);
  --chart-5: var(--color-amber-800);
  --sidebar-primary: var(--color-amber-600);
  --sidebar-primary-foreground: var(--color-amber-50);
  --sidebar-accent: var(--color-amber-50);
  --sidebar-accent-foreground: var(--color-amber-700);
  --sidebar-ring: var(--color-amber-400);

  @variant dark {
    --primary: var(--color-amber-500);
    --primary-foreground: var(--color-amber-50);
    --ring: var(--color-amber-900);
    --sidebar-primary: var(--color-amber-500);
    --sidebar-primary-foreground: var(--color-amber-50);
    --sidebar-accent: oklch(0.268 0.007 34.298);
    --sidebar-accent-foreground: var(--color-amber-500);
    --sidebar-ring: var(--color-amber-900);
  }
}

body[data-theme='rose'] {
  --primary: var(--color-rose-600);
  --primary-foreground: var(--color-rose-50);
  --ring: var(--color-rose-400);
  --chart-1: var(--color-rose-300);
  --chart-2: var(--color-rose-500);
  --chart-3: var(--color-rose-600);
  --chart-4: var(--color-rose-700);
  --chart-5: var(--color-rose-800);
  --sidebar-primary: var(--color-rose-600);
  --sidebar-primary-foreground: var(--color-rose-50);
  --sidebar-accent: var(--color-rose-50);
  --sidebar-accent-foreground: var(--color-rose-700);
  --sidebar-ring: var(--color-rose-400);

  @variant dark {
    --primary: var(--color-rose-500);
    --primary-foreground: var(--color-rose-50);
    --ring: var(--color-rose-900);
    --sidebar-primary: var(--color-rose-500);
    --sidebar-primary-foreground: var(--color-rose-50);
    --sidebar-accent: oklch(0.268 0.007 34.298);
    --sidebar-accent-foreground: var(--color-rose-500);
    --sidebar-ring: var(--color-rose-900);
  }
}

body[data-theme='purple'] {
  --primary: var(--color-purple-600);
  --primary-foreground: var(--color-purple-50);
  --ring: var(--color-purple-400);
  --chart-1: var(--color-purple-300);
  --chart-2: var(--color-purple-500);
  --chart-3: var(--color-purple-600);
  --chart-4: var(--color-purple-700);
  --chart-5: var(--color-purple-800);
  --sidebar-primary: var(--color-purple-600);
  --sidebar-primary-foreground: var(--color-purple-50);
  --sidebar-accent: var(--color-purple-50);
  --sidebar-accent-foreground: var(--color-purple-700);
  --sidebar-ring: var(--color-purple-400);

  @variant dark {
    --primary: var(--color-purple-500);
    --primary-foreground: var(--color-purple-50);
    --ring: var(--color-purple-900);
    --sidebar-primary: var(--color-purple-500);
    --sidebar-primary-foreground: var(--color-purple-50);
    --sidebar-accent: oklch(0.268 0.007 34.298);
    --sidebar-accent-foreground: var(--color-purple-500);
    --sidebar-ring: var(--color-purple-900);
  }
}

body[data-theme='orange'] {
  --primary: var(--color-orange-600);
  --primary-foreground: var(--color-orange-50);
  --ring: var(--color-orange-400);
  --chart-1: var(--color-orange-300);
  --chart-2: var(--color-orange-500);
  --chart-3: var(--color-orange-600);
  --chart-4: var(--color-orange-700);
  --chart-5: var(--color-orange-800);
  --sidebar-primary: var(--color-orange-600);
  --sidebar-primary-foreground: var(--color-orange-50);
  --sidebar-accent: var(--color-orange-50);
  --sidebar-accent-foreground: var(--color-orange-700);
  --sidebar-ring: var(--color-orange-400);

  @variant dark {
    --primary: var(--color-orange-500);
    --primary-foreground: var(--color-orange-50);
    --ring: var(--color-orange-900);
    --sidebar-primary: var(--color-orange-500);
    --sidebar-primary-foreground: var(--color-orange-50);
    --sidebar-accent: oklch(0.268 0.007 34.298);
    --sidebar-accent-foreground: var(--color-orange-500);
    --sidebar-ring: var(--color-orange-900);
  }
}

body[data-theme='teal'] {
  --primary: var(--color-teal-600);
  --primary-foreground: var(--color-teal-50);
  --chart-1: var(--color-teal-300);
  --chart-2: var(--color-teal-500);
  --chart-3: var(--color-teal-600);
  --chart-4: var(--color-teal-700);
  --chart-5: var(--color-teal-800);
  --sidebar-primary: var(--color-teal-600);
  --sidebar-primary-foreground: var(--color-teal-50);
  --sidebar-accent: var(--color-teal-50);
  --sidebar-accent-foreground: var(--color-teal-700);
  --sidebar-ring: var(--color-teal-400);

  @variant dark {
    --primary: var(--color-teal-500);
    --primary-foreground: var(--color-teal-50);
    --sidebar-primary: var(--color-teal-500);
    --sidebar-primary-foreground: var(--color-teal-50);
    --sidebar-accent: oklch(0.268 0.007 34.298);
    --sidebar-accent-foreground: var(--color-teal-500);
    --sidebar-ring: var(--color-teal-900);
  }
}

body[data-theme='mono'] {
  --font-sans: var(--font-mono);
  --primary: var(--color-stone-600);
  --primary-foreground: var(--color-stone-50);
  --chart-1: var(--color-stone-300);
  --chart-2: var(--color-stone-500);
  --chart-3: var(--color-stone-600);
  --chart-4: var(--color-stone-700);
  --chart-5: var(--color-stone-800);
  --sidebar-primary: var(--color-stone-600);
  --sidebar-primary-foreground: var(--color-stone-50);
  --sidebar-accent: var(--color-stone-50);
  --sidebar-accent-foreground: var(--color-stone-700);
  --sidebar-ring: var(--color-stone-400);

  @variant dark {
    --primary: var(--color-stone-500);
    --primary-foreground: var(--color-stone-50);
    --sidebar-primary: var(--color-stone-500);
    --sidebar-primary-foreground: var(--color-stone-50);
    --sidebar-accent: oklch(0.268 0.007 34.298);
    --sidebar-accent-foreground: var(--color-stone-500);
    --sidebar-ring: var(--color-stone-900);
  }

  @media (min-width: 1024px) {
    --font-sans: var(--font-mono);
    --radius: 0.45em;
    --text-lg: 1rem;
    --text-xl: 1.1rem;
    --text-2xl: 1.2rem;
    --text-3xl: 1.3rem;
    --text-4xl: 1.4rem;
    --text-5xl: 1.5rem;
    --text-6xl: 1.6rem;
    --text-7xl: 1.7rem;
    --text-8xl: 1.8rem;
    --text-base: 0.85rem;
    --text-sm: 0.8rem;
    --spacing: 0.222222rem;
  }

  .rounded-xs,
  .rounded-sm,
  .rounded-md,
  .rounded-lg,
  .rounded-xl {
    border-radius: 0;
  }

  .shadow-xs,
  .shadow-sm,
  .shadow-md,
  .shadow-lg,
  .shadow-xl {
    box-shadow: none;
  }

  [data-slot='toggle-group'],
  [data-slot='toggle-group-item'] {
    @apply !rounded-none !shadow-none;
  }
}

body[data-theme='scaled'] {
  --chart-1: var(--color-blue-300);
  --chart-2: var(--color-blue-500);
  --chart-3: var(--color-blue-600);
  --chart-4: var(--color-blue-700);
  --chart-5: var(--color-blue-800);

  @media (min-width: 1024px) {
    --radius: 0.45em;
    --text-lg: 1rem;
    --text-xl: 1.1rem;
    --text-2xl: 1.2rem;
    --text-3xl: 1.3rem;
    --text-4xl: 1.4rem;
    --text-5xl: 1.5rem;
    --text-6xl: 1.6rem;
    --text-7xl: 1.7rem;
    --text-8xl: 1.8rem;
    --text-base: 0.85rem;
    --text-sm: 0.8rem;
    --spacing: 0.2rem;
  }

  [data-slot='select-trigger'],
  [data-slot='toggle-group-item'] {
    --spacing: 0.2rem;
  }

  [data-slot='card'] {
    border-radius: var(--radius);
    padding-block: calc(var(--spacing) * 4);
    gap: calc(var(--spacing) * 2);
  }

  [data-slot='card'].pb-0 {
    padding-bottom: 0;
  }
}

body[data-theme='red'] {
  --primary: var(--color-red-600);
  --primary-foreground: var(--color-red-50);
  --ring: var(--color-red-400);
  --chart-1: var(--color-red-300);
  --chart-2: var(--color-red-500);
  --chart-3: var(--color-red-600);
  --chart-4: var(--color-red-700);
  --chart-5: var(--color-red-800);
  --sidebar-primary: var(--color-red-600);
  --sidebar-primary-foreground: var(--color-red-50);
  --sidebar-accent: var(--color-red-50);
  --sidebar-accent-foreground: var(--color-red-700);
  --sidebar-ring: var(--color-red-400);

  @variant dark {
    --primary: var(--color-red-500);
    --primary-foreground: var(--color-red-50);
    --ring: var(--color-red-900);
    --sidebar-primary: var(--color-red-500);
    --sidebar-primary-foreground: var(--color-red-50);
    --sidebar-accent: oklch(0.268 0.007 34.298);
    --sidebar-accent-foreground: var(--color-red-500);
    --sidebar-ring: var(--color-red-900);
  }
}

body[data-theme='yellow'] {
  --primary: var(--color-yellow-400);
  --primary-foreground: var(--color-yellow-900);
  --ring: var(--color-yellow-400);
  --chart-1: var(--color-yellow-300);
  --chart-2: var(--color-yellow-500);
  --chart-3: var(--color-yellow-600);
  --chart-4: var(--color-yellow-700);
  --chart-5: var(--color-yellow-800);
  --sidebar-primary: var(--color-yellow-600);
  --sidebar-primary-foreground: var(--color-yellow-50);
  --sidebar-accent: var(--color-yellow-50);
  --sidebar-accent-foreground: var(--color-yellow-700);
  --sidebar-ring: var(--color-yellow-400);

  @variant dark {
    --primary: var(--color-yellow-500);
    --primary-foreground: var(--color-yellow-900);
    --ring: var(--color-yellow-900);
    --sidebar-primary: var(--color-yellow-500);
    --sidebar-primary-foreground: var(--color-yellow-50);
    --sidebar-accent: oklch(0.268 0.007 34.298);
    --sidebar-accent-foreground: var(--color-yellow-500);
    --sidebar-ring: var(--color-yellow-900);
  }
}

body[data-theme='violet'] {
  --primary: var(--color-violet-600);
  --primary-foreground: var(--color-violet-50);
  --ring: var(--color-violet-400);
  --chart-1: var(--color-violet-300);
  --chart-2: var(--color-violet-500);
  --chart-3: var(--color-violet-600);
  --chart-4: var(--color-violet-700);
  --chart-5: var(--color-violet-800);
  --sidebar-primary: var(--color-violet-600);
  --sidebar-primary-foreground: var(--color-violet-50);
  --sidebar-accent: var(--color-violet-50);
  --sidebar-accent-foreground: var(--color-violet-700);
  --sidebar-ring: var(--color-violet-400);

  @variant dark {
    --primary: var(--color-violet-500);
    --primary-foreground: var(--color-violet-50);
    --ring: var(--color-violet-900);
    --sidebar-primary: var(--color-violet-500);
    --sidebar-primary-foreground: var(--color-violet-50);
    --sidebar-accent: oklch(0.268 0.007 34.298);
    --sidebar-accent-foreground: var(--color-violet-500);
    --sidebar-ring: var(--color-violet-900);
  }
}

/* Animated Gradient Border */
@property --border-angle {
  inherits: false;
  initial-value: 0deg;
  syntax: '<angle>';
}

@keyframes border {
  to {
    --border-angle: 360deg;
  }
}

/* Animated Gradient Border Class */
.animate-gradient-border {
  border: 1px solid transparent;
  background:
    linear-gradient(45deg, white, white) padding-box,
    conic-gradient(
        from var(--border-angle),
        rgb(148 163 184 / 0.3) 75%,
        var(--primary) 82%,
        var(--primary-foreground) 88%,
        var(--primary) 92%,
        rgb(148 163 184 / 0.3) 100%
      )
      border-box;
  transition: --border-angle 3s ease-in-out;
}

.animate-gradient-border:hover {
  animation: border 4s ease-in-out infinite;
}

.dark .animate-gradient-border {
  background:
    linear-gradient(45deg, rgb(0 0 0), rgb(0 0 0)) padding-box,
    conic-gradient(
        from var(--border-angle),
        rgb(71 85 105 / 0.48) 75%,
        var(--primary) 82%,
        var(--primary-foreground) 88%,
        var(--primary) 92%,
        rgb(71 85 105 / 0.48) 100%
      )
      border-box;
  transition: --border-angle 3s ease-in-out;
}

.dark .animate-gradient-border:hover {
  animation: border 4s ease-in-out infinite;
}

/**
 Rocket launch animation.
**/
.rocket-launch {
  transform-origin: center bottom;
  transform-box: fill-box;
}

/* Full sequence runs once per hover */
.animate-icon:hover .rocket-launch {
  animation: rocket-sequence 5s ease-in-out infinite;
}

/* Optional: flame flicker during pre-launch + launch */
.animate-icon:hover .rocket-launch path:first-of-type {
  animation: flame-sequence 5s ease-in-out infinite;
}

/*
  Rocket:
  - 0–60% (~3s): jitter/pre-launch, small moves along nose direction
  - 60–70%: launch along ~60° diagonal (up-right), fade out
  - 70–80%: invisible pause
  - 80–100%: re-enter from opposite side (down-left)
*/
@keyframes rocket-sequence {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }

  10% {
    transform: translate(1px, -2px) scale(1.02);
    opacity: 1;
  }

  20% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }

  30% {
    transform: translate(2px, -3px) scale(1.03);
    opacity: 1;
  }

  40% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }

  50% {
    transform: translate(1px, -2px) scale(1.02);
    opacity: 1;
  }

  60% {
    transform: translate(0, 0) scale(1.05);
    opacity: 1;
  }

  /* Launch along a ~60° diagonal: up (-Y) and to the right (+X) */
  70% {
    transform: translate(100%, -173%) scale(1.1);
    opacity: 0;
  }

  /* Off-screen / invisible pause (~1s, 70–80%) */
  80% {
    /* Reposition off-screen in the opposite direction: down-left */
    transform: translate(-100%, 173%) scale(1.1);
    opacity: 0;
  }

  /* Fly back into view from below-left to original position */
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
}

/*
  Flame sequence:
  - Moves opposite rocket travel (down-left: -X, +Y) to match exhaust
  - No vertical-only scaling; just uniform scale + diagonal translation
  - Visible 0–70%, then off
*/
@keyframes flame-sequence {
  0% {
    opacity: 1;
    transform: translate(-0.5px, 0.9px) scale(1.02);
  }

  10% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }

  20% {
    opacity: 1;
    transform: translate(0, 0) scale(1.02);
  }

  30% {
    opacity: 0.8;
    transform: translate(-0.5px, 0.9px) scale(1);
  }

  40% {
    opacity: 0.8;
    transform: translate(0, 0) scale(1.02);
  }

  50% {
    opacity: 1;
    transform: translate(-0.5px, 0.9px) scale(1);
  }

  60% {
    opacity: 0.8;
    transform: translate(0, 0) scale(1.02);
  }

  70% {
    opacity: 0;
    transform: translate(-0.5px, 0.9px) scale(1.1);
  }

  100% {
    opacity: 0;
    transform: translate(-1px, 1.7px) scale(1.12);
  }
}