client/src/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  }
  body {
    @apply bg-ui-bg text-ui-text;
    /* Prevent Safari jumping issues */
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
  }

  /* Font face moved to public/index.html to load from /fonts without bundler resolution */


  /* Chrome-specific improvements */
  html.is-chrome .safari-stable-form {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  }

  html.is-chrome .safari-stable-form select {
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    transition: all 0.2s ease;
  }

  html.is-chrome .safari-stable-form select:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
  }

  html.is-chrome .safari-stable-form textarea {
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 12px;
    font-size: 14px;
    font-weight: 400;
    color: #374151;
    transition: all 0.2s ease;
    resize: none;
  }

  html.is-chrome .safari-stable-form textarea:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
  }

  html.is-chrome .safari-stable-form button {
    background: #6366f1;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
  }

  html.is-chrome .safari-stable-form button:hover {
    background: #5856eb;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
  }

  html.is-chrome .safari-stable-form button:disabled {
    background: #9ca3af;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
  }
}

@layer components {
  .nav-selection {
    position: relative;
    border-radius: 14px;
  }
  .nav-selection::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 18px;
    padding: 2px;
    background: conic-gradient(from 0deg, theme('colors.ui.neonBlue') 0%, theme('colors.ui.neonCyan') 50%, theme('colors.ui.neonBlue') 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    animation: hueSpin 6s linear infinite;
  }
  @keyframes hueSpin {
    to { transform: rotate(360deg); }
  }
  h1, h2, h3 {
    @apply text-ui-text;
  }
  a {
    @apply text-ui-neonBlue hover:text-ui-neonPink;
  }
  .btn-primary {
    @apply bg-ui-neonBlue hover:bg-ui-neonBlue/90 text-white font-semibold py-2 px-4 rounded-2xl transition-colors duration-200 shadow-[0_4px_0_rgba(0,0,0,0.15)];
  }
  
  .btn-secondary {
    @apply bg-ui-panel hover:bg-ui-panel/80 text-ui-text font-medium py-2 px-4 rounded-2xl border border-ui-border transition-colors duration-200;
  }
  
  .btn-danger {
    @apply bg-red-600 hover:bg-red-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200;
  }
  
  .input-field {
    @apply w-full px-3 py-2 border border-ui-border rounded-lg bg-ui-panel text-ui-text placeholder-ui-text/50 focus:outline-none focus:ring-2 focus:ring-ui-neonCyan focus:border-transparent;
  }
  
  .card {
    @apply bg-ui-panel rounded-3xl shadow-sm border border-ui-border p-6;
  }
  
  .highlight-cultural {
    @apply bg-yellow-100 border-b-2 border-yellow-400 px-1 rounded;
  }
  
  .text-gradient {
    @apply bg-gradient-to-r from-ui-neonPink to-ui-neonCyan bg-clip-text text-transparent;
  }

  .neon-border {
    box-shadow: 0 0 0 1px theme('colors.ui.border') inset, 0 0 16px rgba(41,243,255,0.35);
  }
  
  .font-smiley {
    font-family: 'SF Pro Display', 'Segoe UI', 'Roboto', 'Inter', system-ui, sans-serif;
    font-weight: 400; /* Regular for submissions and briefs */
  }
  
  .font-source-text {
    font-family: 'SF Pro Display', 'Segoe UI', 'Roboto', 'Inter', system-ui, sans-serif;
    font-weight: 500; /* Medium for source texts */
  }
}

@layer utilities {
  .line-clamp-1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }
  
  .line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  
  .line-clamp-3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
}

/* Minimal toggle switch (based on W3Schools How-To: Toggle Switch) */
/* https://www.w3schools.com/howto/howto_css_switch.asp */
.switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #d1d5db; transition: .2s; border-radius: 9999px; }
.slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .2s; border-radius: 9999px; }
input:checked + .slider { background-color: #10b981; }
input:checked + .slider:before { transform: translateX(20px); }

/* Chrome-only performance and alignment tweaks (gated) */
html.is-chrome body, html.is-chrome #root {
  will-change: scroll-position;
  scroll-behavior: smooth;
}
/* Prefer SF Pro Text on Chrome to match Safari feel */
html.is-chrome { font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif; }
html.is-chrome body { font-weight: 400; }
html.is-chrome h1, html.is-chrome h2, html.is-chrome h3 { font-weight: 600; }
/* Match Safari font rendering behavior in Chrome */
html.is-chrome, html.is-chrome body, html.is-chrome h1, html.is-chrome h2, html.is-chrome h3, html.is-chrome p,
html.is-chrome .font-smiley, html.is-chrome .font-source-text, html.is-chrome .text-ui-text {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-synthesis: none; /* avoid synthetic bold/italic differences */
}
/* Disable content-visibility on the app shell in Chrome to avoid clipping fixed/sticky children */
html.is-chrome .app-shell { content-visibility: visible; contain-intrinsic-size: auto; }

/* Quick Actions alignment parity with Safari (Chrome only) */
/* Match Safari layout: no forced min-height on Chrome */
html.is-chrome .qa-card { min-height: 0; }
/* Match Safari: lighten Quick Action titles and control rhythm */
html.is-chrome .qa-card h3 { line-height: 1.25; margin-bottom: 0.25rem; font-weight: 600; }
html.is-chrome .qa-card p { line-height: 1.25; }
html.is-chrome .qa-card .icon-wrap { flex-shrink: 0; }
/* ensure identical spacing as Safari via explicit margins */
html.is-chrome .qa-card .icon-wrap + div { margin-left: 1rem; }
/* center content vertically like Safari */
html.is-chrome .qa-card > .flex { align-items: center; }

/* Chrome-only: isolate layout/paint for smoother scroll */
html.is-chrome .qa-grid { contain: layout paint; }
html.is-chrome .qa-card { will-change: transform; transform: translateZ(0); backface-visibility: hidden; }
/* Avoid transforms on main that can affect fixed positioning in Chrome */
html.is-chrome main { will-change: auto; transform: none; }
html.is-chrome body { overscroll-behavior: contain; }

/* Chrome-only sidebar opacity + blur look */
html.is-chrome .sidebar-shell { background: rgba(255,255,255,0.9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); position: fixed; top: 56px; left: 0; bottom: 0; width: 15rem; display: flex; flex-direction: column; }
/* Mirror header sticky behavior for nav and footer inside the fixed aside */
html.is-chrome .sidebar-nav { position: sticky; top: 0; width: auto; }
html.is-chrome .sidebar-footer { position: sticky; bottom: 0; width: auto; background: transparent; }
html.is-chrome .sidebar-shell { overflow: visible; }
/* Ensure links remain clickable */
html.is-chrome .sidebar-shell a { pointer-events: auto; }

/* Font exactness tweaks: normalize weights and sizes like Safari */
html.is-chrome body { font-weight: 400; }
html.is-chrome h1, html.is-chrome h2, html.is-chrome h3 { font-weight: 700; }
html.is-chrome .text-ui-text { -webkit-font-smoothing: antialiased; }
/* Chrome-only: bold nav option text */
/* Match Safari: do not force bold on nav labels */
/* (nav link already uses font-medium via markup) */

/* Home page (Dashboard) specific Chrome parity tweaks */
/* 1) "Quick Actions" subheading above the QA grid */
html.is-chrome .mb-8:has(> .qa-grid) > h2 { font-weight: 600; }

/* 2) Subheadings within each Quick Action card handled above via .qa-card h3 { font-weight: 400 } */

/* 3) "Admin Panel" subheading */
html.is-chrome .mb-8:has(> .bg-white.rounded-lg.shadow-sm.border.border-gray-200.p-6) > h2 { font-weight: 600; }

/* 4) "System Management" subheading inside Admin Panel card */
html.is-chrome .bg-white.rounded-lg.shadow-sm.border.border-gray-200.p-6 h3.text-lg.font-medium.text-gray-900 { font-weight: 600; }

/* 5) "Course Overview" subheading */
html.is-chrome .bg-ui-panel.rounded-xl.shadow-sm.border.border-ui-border.p-6 h3.text-lg { font-weight: 600; }

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* Animation classes */
.fade-in {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-in {
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

/* Cultural element highlighting */
.cultural-element {
  position: relative;
  cursor: help;
}

.cultural-element:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #1f2937;
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
  white-space: nowrap;
  z-index: 1000;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.cultural-element:hover::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #1f2937;
  z-index: 1000;
} 

/* Build nudge: 2025-10-25 */