frontend/src/index.css

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Noto+Sans+Arabic:wght@400;500;600;700&display=swap');

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

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.shimmer {
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

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

.animate-slide-in-right {
  animation: slideInRight 0.25s ease-out;
}

@layer base {
  body {
    @apply bg-clinical-bg text-gray-900 font-sans antialiased;
  }

  /* Dark mode body */
  .dark body {
    @apply bg-slate-950 text-slate-100;
  }
}

/* ── Skip-to-content link (WCAG 2.1 SC 2.4.1) ────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  z-index: 9999;
  padding: 8px 16px;
  background: #2563eb;
  color: white;
  font-size: 14px;
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none;
  transition: top 0.1s;
}
.skip-link:focus {
  top: 8px;
}

@layer components {
  .card {
    @apply bg-clinical-card rounded-xl border border-clinical-border shadow-sm
           dark:bg-slate-900 dark:border-slate-700;
  }

  .card-header {
    @apply px-6 py-4 border-b border-clinical-border
           dark:border-slate-700;
  }

  .card-body {
    @apply p-6;
  }

  .btn-primary {
    @apply inline-flex items-center justify-center gap-2 px-6 py-2.5 bg-primary-600 text-white font-medium rounded-lg
           hover:bg-primary-700 active:bg-primary-800 transition-colors duration-150
           disabled:opacity-50 disabled:cursor-not-allowed
           focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2;
  }

  .btn-secondary {
    @apply inline-flex items-center justify-center gap-2 px-4 py-2 bg-white text-gray-700 font-medium rounded-lg border border-clinical-border
           hover:bg-gray-50 active:bg-gray-100 transition-colors duration-150
           dark:bg-slate-800 dark:text-slate-200 dark:border-slate-600 dark:hover:bg-slate-700
           focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2;
  }

  .input-field {
    @apply w-full px-3 py-2 border border-clinical-border rounded-lg text-sm
           focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500
           placeholder:text-gray-400 transition-shadow duration-150
           dark:bg-slate-800 dark:border-slate-600 dark:text-slate-100 dark:placeholder:text-slate-500;
  }

  .select-field {
    @apply input-field appearance-none bg-white cursor-pointer
           dark:bg-slate-800;
  }

  .badge-positive {
    @apply inline-flex items-center gap-1 px-3 py-1 rounded-full text-sm font-semibold
           bg-red-100 text-red-700
           dark:bg-red-900/40 dark:text-red-400;
  }

  .badge-negative {
    @apply inline-flex items-center gap-1 px-3 py-1 rounded-full text-sm font-semibold
           bg-green-100 text-green-700
           dark:bg-green-900/40 dark:text-green-400;
  }

  .badge-warning {
    @apply inline-flex items-center gap-1 px-3 py-1 rounded-full text-sm font-semibold
           bg-yellow-100 text-yellow-700
           dark:bg-yellow-900/40 dark:text-yellow-400;
  }

  .sidebar-link {
    @apply flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium
           transition-colors duration-150 cursor-pointer;
  }

  .sidebar-link-active {
    @apply sidebar-link bg-primary-50 text-primary-700
           dark:bg-primary-900/30 dark:text-primary-400;
  }

  .sidebar-link-inactive {
    @apply sidebar-link text-gray-600 hover:bg-gray-100 hover:text-gray-900
           dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-100;
  }
}

/* ── Print styles (Task 3.2.6) ───────────────────────────────────────────── */
@media print {
  /* Hide navigation and interactive chrome */
  aside,
  header,
  .btn-primary,
  .btn-secondary,
  button,
  [data-no-print] {
    display: none !important;
  }

  body {
    background: white;
    color: black;
    font-size: 12pt;
  }

  .card {
    border: 1px solid #e2e8f0;
    box-shadow: none;
    page-break-inside: avoid;
    margin-bottom: 16pt;
  }

  /* Print header */
  main::before {
    content: "OmniDiag — Clinical Decision Support Report";
    display: block;
    font-size: 18pt;
    font-weight: bold;
    color: #2563eb;
    border-bottom: 2pt solid #2563eb;
    padding-bottom: 8pt;
    margin-bottom: 16pt;
  }

  /* Print footer */
  main::after {
    content: "Generated by OmniDiag v4.0.0 — For clinical decision support only. Not a substitute for professional medical judgment.";
    display: block;
    font-size: 8pt;
    color: #64748b;
    border-top: 1pt solid #e2e8f0;
    padding-top: 8pt;
    margin-top: 24pt;
  }
}