/* ═══════════════════════════════════════════════════════════════════
   OxMedKW Clinical Tools — Premium Design System
   Apple-grade aesthetic: soft depth, strict hierarchy, purposeful space
   ═══════════════════════════════════════════════════════════════════ */

/* ── Fonts ── */
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@300,400,500,600,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=Noto+Sans+Arabic:wght@400;500;600&display=swap');
@import url('https://cdn.jsdelivr.net/npm/geist@1.2.0/dist/fonts/geist-sans/style.min.css');

/* ── Design Tokens ── */
:root {
  /* Surfaces */
  --bg: #F5F5F0;
  --surface: #FFFFFF;
  --surface-elevated: #FFFFFF;
  --surface-sunken: #F0F0F2;

  /* Text */
  --text-primary: #1D1D1F;
  --text-secondary: #86868B;
  --text-tertiary: #AEAEB2;

  /* Accent — deep teal */
  --accent: #2A7C6F;
  --accent-hover: #1F5F55;
  --accent-light: rgba(42,124,111,0.06);
  --accent-medium: rgba(42,124,111,0.12);

  /* Borders — barely there */
  --border: rgba(0,0,0,0.06);
  --border-subtle: rgba(0,0,0,0.03);

  /* Semantic */
  --success: #34A853;
  --warning: #D4A024;
  --error: #C4302B;

  /* Shadows — Apple-style soft depth */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.03);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.06);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.08);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.10);
  --shadow-card: 0 2px 12px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.03);
  --shadow-card-hover: 0 8px 30px rgba(0,0,0,0.08), 0 0 0 1px rgba(42,124,111,0.12);

  /* Radii — squircle feel */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Typography scale */
  --font-display: 'Satoshi', -apple-system, sans-serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-data: 'Geist', 'Plus Jakarta Sans', sans-serif;
  --font-arabic: 'Noto Sans Arabic', 'Plus Jakarta Sans', sans-serif;
}

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-body) !important;
  background: var(--bg) !important;
  color: var(--text-primary) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
}

/* ── Back Link (in header-left grid column) ── */
.oxmedkw-back-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #2A7C6F;
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  transition: opacity 0.2s;
  white-space: nowrap;
}
.oxmedkw-back-link:hover { opacity: 0.6; }
.oxmedkw-back-link svg { flex-shrink: 0; }

/* ── Header Override ── */
.header {
  font-family: var(--font-body) !important;
  border-bottom: none !important;
}
.header-left {
  justify-self: start;
}

/* ── Typography Hierarchy ── */
h1, h2, h3,
.section-header,
.section-title {
  font-family: var(--font-display) !important;
  letter-spacing: -0.02em;
}

/* ── Cards — soft depth, no harsh borders ── */
.card {
  background: var(--surface) !important;
  border: none !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-card) !important;
}

/* ── Card headers — clean section labels, no underline ── */
.card-header {
  background: transparent !important;
  color: var(--text-secondary) !important;
  font-family: var(--font-display) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 16px 24px 8px !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

/* ── Section labels — subtle uppercase ── */
.section-header,
.section-title,
.tools-label,
legend {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--text-tertiary) !important;
}

/* ── Form section titles (FET, etc.) ── */
.form-section-title {
  color: #2A7C6F !important;
  font-family: var(--font-display) !important;
}

/* ── Segmented controls (iOS style per DESIGN.md) ── */
/* Active seg-btn: white surface with shadow — NOT colored background */
.seg-btn.active {
  background: #FFFFFF !important;
  color: #1D1D1F !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1) !important;
}
/* Lang/AMPM toggles keep teal active state */
.lang-btn.active,
.ampm-btn.active {
  background: #2A7C6F !important;
  color: white !important;
}

/* ── Inputs — consistent focus ring across all pages ── */
input[type="text"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="search"],
input[type="tel"],
input[type="email"],
select,
textarea {
  font-family: var(--font-body) !important;
  color: var(--text-primary) !important;
  transition: all 0.2s ease !important;
}
input[type="text"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
select:focus,
textarea:focus {
  border-color: #2A7C6F !important;
  box-shadow: 0 0 0 3px rgba(42,124,111,0.06) !important;
  outline: none !important;
}

/* ── Buttons — ensure teal accent on primary actions ── */
.btn-primary {
  background: #2A7C6F !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 9999px !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
}
.btn-primary:hover {
  background: #1F5F55 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(42,124,111,0.25) !important;
}
.btn-print {
  background: #1F5F55 !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 9999px !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
}
.btn-print:hover {
  background: #164038 !important;
  transform: translateY(-1px);
}

/* ── Custom switch toggle knob — teal active state ── */
.sw input:checked + .knob {
  background: #2A7C6F !important;
}

/* ── Tables — light touch, don't break page-specific layouts ── */
table {
  font-feature-settings: 'tnum';
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.12);
  border-radius: 3px;
}

/* ── Print: hide nav ── */
@media print {
  .oxmedkw-back-link { display: none !important; }
}