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

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

:root {
  --vc-navy: #08254A;
  --vc-primary: #155EEF;
  --vc-primary-hover: #0B4FD6;
  --vc-soft-blue: #EEF4FF;
  --vc-bg: #F7F9FC;
  --vc-surface: #FFFFFF;
  --vc-text-strong: #101828;
  --vc-text: #344054;
  --vc-text-secondary: #667085;
  --vc-text-disabled: #98A2B3;
  --vc-border: #E4E7EC;
  --vc-border-strong: #D0D5DD;
  --vc-success: #079455;
  --vc-success-bg: #ECFDF3;
  --vc-warning: #DC6803;
  --vc-warning-bg: #FFFAEB;
  --vc-error: #D92D20;
  --vc-error-bg: #FEF3F2;
  --vc-critical: #B42318;
  --vc-critical-bg: #FEE4E2;
  --vc-radius-input: 8px;
  --vc-radius-card: 10px;
}

@layer base {
  body {
    @apply font-sans text-ink bg-canvas;
  }
}

@layer components {
  .btn-primary {
    @apply bg-primary-600 text-white px-4 py-2 rounded-input
           hover:bg-primary-700 disabled:opacity-50 disabled:cursor-not-allowed
           transition-colors;
  }
  .btn-secondary {
    @apply bg-surface text-primary-700 border border-primary-300 px-4 py-2 rounded-input
           hover:bg-primary-50 disabled:opacity-50 disabled:cursor-not-allowed
           transition-colors;
  }
  .btn-danger {
    @apply bg-clinical-danger text-white px-4 py-2 rounded-input
           hover:bg-clinical-critical disabled:opacity-50 disabled:cursor-not-allowed
           transition-colors;
  }
  .form-input {
    @apply block w-full rounded-input border border-line-strong px-4 py-2 text-ink
           focus:border-primary-500 focus:ring-2 focus:ring-primary-500
           disabled:bg-canvas disabled:text-ink-disabled;
  }
  .page-container {
    @apply p-4 sm:p-6 lg:p-8 max-w-4xl mx-auto;
  }
  .app-header {
    @apply flex flex-row items-start justify-between gap-3
           px-4 py-3 sm:px-6 sm:items-center min-h-14 sm:min-h-16 bg-surface border-b border-line;
  }
  .app-header-title {
    @apply flex flex-col gap-1 sm:flex-row sm:items-center sm:gap-4 min-w-0;
  }
  .app-header-actions {
    @apply flex flex-wrap items-center justify-end gap-2 sm:gap-4 shrink-0;
  }
  .card {
    @apply bg-surface rounded-card border border-line p-4 sm:p-6 shadow-card;
  }
  .card-elevated {
    @apply bg-surface rounded-card border border-line p-4 sm:p-6 shadow-card;
  }
  .split-pane {
    @apply grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-8
           h-auto lg:flex-1 lg:min-h-0 min-h-0;
  }
  /* Phase 16 workstation: scan-first split (≥1280px / xl) */
  .workstation-split {
    @apply grid grid-cols-1 gap-0
           h-auto xl:flex-1 xl:min-h-0 min-h-0
           xl:grid-cols-[minmax(0,1fr)_minmax(0,1.1fr)];
  }
  .workstation-split:not(.workstation-split--no-rail) {
    @apply xl:grid-cols-[minmax(160px,0.2fr)_minmax(0,0.42fr)_minmax(0,0.38fr)];
  }
  .workstation-rail {
    @apply flex flex-col min-h-0 overflow-hidden bg-surface;
  }
  .workstation-scan {
    @apply flex flex-col min-h-[13rem] sm:min-h-[18rem] xl:min-h-0
           p-3 xl:p-4 bg-canvas border-b xl:border-b-0 xl:border-r border-line;
  }
  .workstation-form {
    @apply flex flex-col min-h-0 overflow-hidden bg-surface;
  }
  .workstation-form-section {
    @apply border border-line rounded-input p-3;
  }
  .workstation-form-legend {
    @apply text-xs font-semibold uppercase tracking-wide text-ink-secondary px-1;
  }
  .workstation-field-label {
    @apply flex items-center gap-1.5 text-xs text-ink-secondary mb-1;
  }
  /* Observation cards — scannable list (design tips: hero value + timeline meta) */
  .observation-card {
    @apply rounded-card border border-line bg-surface p-3 shadow-card;
  }
  .observation-card--readonly {
    @apply flex gap-2.5 bg-canvas p-2.5 shadow-none;
  }
  .observation-card--verified {
    @apply border-clinical-safe/40 bg-clinical-safe-bg/40;
  }
  .observation-card__rail {
    @apply flex w-3 shrink-0 flex-col items-center pt-1.5;
  }
  .observation-card__dot {
    @apply h-2.5 w-2.5 rounded-full bg-primary-600 ring-4 ring-primary-50;
  }
  /* Design-doc §34 evidence hierarchy */
  .evidence-level {
    @apply flex items-center gap-2 text-[10px] font-semibold uppercase tracking-wider text-ink-secondary mb-2 shrink-0;
  }
  .evidence-level-mark {
    @apply inline-flex h-4 w-4 items-center justify-center rounded-full text-[9px] font-bold leading-none;
  }
  .evidence-level--1 .evidence-level-mark {
    @apply bg-navy text-white;
  }
  .evidence-level--2 .evidence-level-mark {
    @apply bg-primary-600 text-white;
  }
  .evidence-level--3 .evidence-level-mark {
    @apply bg-ink-secondary text-white;
  }
  .evidence-level--4 .evidence-level-mark {
    @apply bg-clinical-safe text-white;
  }
  .evidence-level--5 .evidence-level-mark {
    @apply bg-clinical-safe text-white ring-2 ring-clinical-safe-bg;
  }
  .clinical-signal {
    @apply rounded-input border border-[#FEDF89] bg-clinical-warning-bg px-3 py-2 text-sm;
  }
  .clinical-signal--critical {
    @apply border-[#FECDCA] bg-clinical-danger-bg;
  }
  .approval-frame {
    @apply border-l-[3px] border-l-navy;
  }
  .promotion-outcome {
    @apply rounded-input border border-[#ABEFC6] bg-clinical-safe-bg p-4 text-sm;
  }
  .nav-link {
    @apply text-sm text-ink-secondary hover:text-ink-strong transition-colors;
  }
  .nav-link.router-link-active {
    @apply text-ink-strong font-medium;
  }
  .status-badge {
    @apply px-2 py-1 rounded-control text-xs font-medium;
  }
  .ocr-banner {
    @apply bg-primary-50 border border-primary-100 rounded-input p-3 text-sm text-primary-800;
  }
  .ocr-high {
    @apply border-l-[3px] border-l-clinical-safe;
  }
  .ocr-medium {
    @apply border-l-[3px] border-l-clinical-warning;
  }
  .ocr-low {
    @apply border-l-[3px] border-l-clinical-danger;
  }
  .ocr-confidence-badge {
    @apply inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-semibold tracking-wide uppercase leading-none;
  }
  .ocr-badge-high {
    @apply bg-clinical-safe-bg text-clinical-safe;
  }
  .ocr-badge-medium {
    @apply bg-clinical-warning-bg text-clinical-warning;
  }
  .ocr-badge-low {
    @apply bg-clinical-danger-bg text-clinical-danger;
  }
  /* Phase 17 — Intake upload zone */
  .upload-dropzone {
    @apply flex items-center justify-center min-h-[200px] sm:min-h-[240px]
           rounded-card border-2 border-dashed border-primary-300 bg-primary-50/40
           px-6 py-10 cursor-pointer transition-colors
           hover:border-primary-500 hover:bg-primary-50;
  }
  .upload-dropzone--active {
    @apply border-primary-600 bg-primary-50;
  }
  .upload-dropzone--error {
    @apply border-clinical-danger bg-clinical-danger-bg;
  }
  /* Phase 17 — Cover sheet paper preview */
  .cover-sheet-preview {
    @apply bg-white border border-line-strong rounded-sm
           aspect-[210/297] max-h-[520px] w-full mx-auto overflow-hidden
           flex flex-col;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 4px 16px rgba(16, 24, 40, 0.08);
  }
  /* Phase 17 — FHIR raw JSON panel */
  .fhir-json-panel {
    @apply bg-navy text-[#D1E0FF] text-[13px] leading-5 font-mono
           p-4 rounded-input overflow-x-auto max-h-96 border border-navy;
  }
}
