@import "tailwindcss";

/* Scan .gts/.gjs files for Tailwind utility classes */
@source "../../app/**/*.gts";
@source "../../app/**/*.gjs";

/*
 * Theme: matches the old Tailwind v1.9.6 config (app/styles/tailwind.js).
 *
 * The old config spread ...colors.<group> (Tailwind v1 defaults) then overrode
 * specific shades. Tailwind v4 has different default palettes (OKLCH-based),
 * so we pin ALL used shades to their Tailwind v1 hex values for consistency.
 * Custom app-specific values are marked with "custom".
 */
@theme {
  --font-openSans: 'Open Sans';

  --text-xss: .5rem;

  /* --- PROGRESS (custom) --- */
  --color-PROGRESS-BAD: #F38698;
  --color-PROGRESS-GOOD: #FBD051;
  --color-PROGRESS-GREAT: #47CD8A;

  /* --- Gray (Tailwind v1 defaults) --- */
  --color-gray-100: #f7fafc;
  --color-gray-200: #edf2f7;
  --color-gray-300: #e2e8f0;
  --color-gray-400: #cbd5e0;
  --color-gray-500: #a0aec0;
  --color-gray-600: #718096;
  --color-gray-700: #4a5568;
  --color-gray-800: #2d3748;
  --color-gray-900: #1a202c;

  /* --- Red (Tailwind v1 defaults) --- */
  --color-red-500: #f56565;

  /* --- Blue (Tailwind v1 defaults + custom overrides) --- */
  --color-blue-100: #DAF0FC;   /* custom */
  --color-blue-200: #bee3f8;   /* Tailwind v1 default */
  --color-blue-300: #EDF8FE;   /* custom */
  --color-blue-400: #63b3ed;   /* Tailwind v1 default */
  /* --color-blue-500: #81D5F9;   custom */
  --color-blue-600: #3182ce;   /* Tailwind v1 default */
  --color-blue-700: #5E6EED;   /* custom */
  --color-blue-800: #2c5282;   /* Tailwind v1 default */
  --color-blue-900: #001274;   /* custom */
  --color-blue-light: #428DFC; /* custom */
  --color-blue-dark: #5A6BFF;  /* custom */
  --color-blue-1100: #428DFC;  /* custom */

  /* --- Pink (Tailwind v1 defaults + custom overrides) --- */
  --color-pink-200: #FBEDFE;      /* custom */
  --color-pink-500: #FF6373;      /* custom */
  --color-pink-secondary: #F38698; /* custom */

  /* --- Yellow (Tailwind v1 defaults + custom overrides) --- */
  --color-yellow-500: #F68820;      /* custom */
  --color-yellow-secondary: #FBD051; /* custom */

  /* --- Purple (Tailwind v1 defaults + custom overrides) --- */
  --color-purple-100: #faf5ff;    /* Tailwind v1 default */
  --color-purple-500: #9f7aea;    /* Tailwind v1 default */
  --color-purple-700: #2A165B;    /* custom */
  --color-purple-primary: #503DAD; /* custom */
  --color-purple-left: #7979f2;   /* custom */
  --color-purple-right: #a179f2;  /* custom */

  /* --- Indigo (Tailwind v1 defaults + custom overrides) --- */
  --color-indigo-200: #EDF0FE;  /* custom */
  --color-indigo-400: #7f9cf5;  /* Tailwind v1 default */
  --color-indigo-500: #63BBEB;  /* custom */
  --color-indigo-600: #5a67d8;  /* Tailwind v1 default */
  --color-indigo-700: #4c51bf;  /* Tailwind v1 default */

  /* --- Green (Tailwind v1 defaults + custom overrides) --- */
  --color-green-500: #48bb78;      /* Tailwind v1 default */
  --color-green-secondary: #47CD8A; /* custom */

  --radius-large: 1.25rem;

  --spacing-200px: 200px;
  --spacing-48px: 48px;
}

/* Safelist: force Tailwind to generate these dynamic classes */
@utility bg-PROGRESS-BAD {
  background-color: var(--color-PROGRESS-BAD);
}
@utility bg-PROGRESS-GOOD {
  background-color: var(--color-PROGRESS-GOOD);
}
@utility bg-PROGRESS-GREAT {
  background-color: var(--color-PROGRESS-GREAT);
}
@utility bg-green-secondary {
  background-color: var(--color-green-secondary);
}
@utility bg-yellow-secondary {
  background-color: var(--color-yellow-secondary);
}
@utility bg-pink-secondary {
  background-color: var(--color-pink-secondary);
}

/*
 * FontAwesome SVG inline icon base styles.
 *
 * FA v7's CSS is NOT imported via @import because node_modules resolution
 * through Tailwind v4's pipeline is unreliable. Instead we inline the
 * essential rules here, matching FA v1 behaviour from master:
 *
 * - box-sizing: content-box — padding adds to width/height (required for
 *   icons with inline style="width:24px;height:24px;padding:4px")
 * - height: 1em — icon scales with parent font-size
 * - width: auto — uses viewBox aspect ratio (FA v1 used per-icon fa-w-* classes,
 *   FA v7 uses a fixed 1.25em which is wrong for non-square icons)
 * - font-size: inherit — explicit inheritance (FA v1 had this, v7 omits it)
 */
.svg-inline--fa {
  box-sizing: border-box;
  display: inline-block;
  height: 1em;
  overflow: visible;
  vertical-align: -0.125em;
  width: auto;
  font-size: inherit;
  fill: currentColor;
}

html {
  background: #efefef;
  margin: 0;
  font-family: 'Montserrat', sans-serif;
}

html,
body {
  min-height: 100vh;
  color: #234e52;
}

body {
  min-height: 100vh;
  margin: 0 auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

main {
  display: flex;
  flex-wrap: wrap;
  background: transparent;
  flex: 1;
  position: relative;
}

main > * {
  width: 100%;
}

.ember-modal-overlay {
  background-color: #eeeeeee6;
}

a {
  text-decoration: none;
}

.breadcrumbs-container {
  width: 100%;
  margin-bottom: 15px;
}

a[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}

.not-accessable {
  text-align: center;
  width: 100%;
}

.center {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(-50%, -50%);
}

.not-accessable > * {
  display: block;
}

.not-accessable h5 {
  margin-top: 0;
}

.series-container {
  flex: 1;
}

.exercise-container {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow: hidden;
  position: relative;
}

@media (max-width: 640px) {
  .exercise-container {
    overflow: auto;
  }
}

@media (max-width: 640px) and (orientation: landscape) {
  .exercise-container {
    overflow: auto;
    min-height: 0;
  }
}

.modal-fixed {
  position: fixed;
}

.custom-modal-overlay {
  min-height: 550px;
}

.modal-body {
  height: 600px;
  width: 1200px;
  padding: 25px 40px 40px;
}

@media (max-width: 640px) {
  .custom-modal-overlay {
    min-height: 0;
  }

  .modal-body {
    width: 95vw;
    height: auto;
    min-height: 80vh;
    padding: 16px;
  }
}

/* Bugfix: #2399 */
#exercise-timer-slot {
  margin-right: 100px;
}
#modal-close-button {
  top: 20px;
  right: 45px;
  z-index: 10;
}

@media (max-width: 640px) {
  #exercise-timer-slot {
    margin-right: 40px;
  }

  #modal-close-button {
    top: 10px;
    right: 10px;
  }
}
@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.skeleton-pulse {
  animation: skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  background-color: #e2e8f0;
  border-radius: 0.25rem;
  max-width: 100%;
}
.skeleton-circle {
  animation: skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  background-color: #e2e8f0;
  border-radius: 9999px;
}
@keyframes btn-spin {
  to { transform: rotate(360deg); }
}
.btn-spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.6s linear infinite;
  vertical-align: middle;
}
.scroll-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40px;
  z-index: 10;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.scroll-fade--left {
  left: 0;
  background: linear-gradient(to right, white 0%, transparent 100%);
}
.scroll-fade--right {
  right: 0;
  background: linear-gradient(to left, white 0%, transparent 100%);
}
.scroll-btn {
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.scroll-btn:active {
  transform: translateY(-50%) scale(0.85);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
}
.btn-press {
  transition: transform 0.1s ease;
}
.btn-press:not(:disabled):active {
  transform: scale(0.97);
}
.skeleton-page {
  min-height: calc(100vh - 10rem);
  cursor: progress;
}
.skeleton-page * {
  cursor: progress;
}
.skeleton-exercise-card {
  width: 410px;
  height: 280px;
}
@media (max-width: 640px) {
  .skeleton-exercise-card {
    width: 220px;
    height: 150px;
  }
}
.skeleton-exercise-btn {
  width: 168px;
  height: 168px;
  background: #ffffff;
  border: 3px solid #f4f4f4;
  border-radius: 12px;
  box-sizing: border-box;
  position: relative;
}
.skeleton-exercise-btn .skeleton-pulse {
  background-color: #f4f4f4;
  animation: none;
}