/* Shared styles for HACCP learning course */

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

:root {
  --meat-900: #7b1010;
  --meat-800: #9c1515;
  --meat-700: #b91c1c;
  --meat-600: #dc2626;
  --meat-500: #ef4444;
  --meat-100: #fee2e2;
  --meat-50:  #fef2f2;
  --warm-100: #fef3c7;
  --warm-200: #fde68a;
  --warm-300: #fcd34d;
  --warm-500: #f59e0b;
  --warm-700: #b45309;
  --cream: #fef9f1;
  --paper: #fffdf7;
  --ink-900: #18181b;
  --ink-700: #3f3f46;
  --ink-500: #71717a;
  --line: #e5e7eb;
  --success: #16a34a;
  --success-100: #dcfce7;
  --danger: #dc2626;
  --danger-100: #fee2e2;
  --info: #0284c7;
  --info-100: #e0f2fe;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--cream);
  color: var(--ink-900);
  margin: 0;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "ss02";
}

.heb { font-family: 'Heebo', system-ui, sans-serif; direction: rtl; unicode-bidi: isolate; }
.mono { font-family: ui-monospace, "JetBrains Mono", Menlo, monospace; }

/* Layout */
.container { max-width: 960px; margin: 0 auto; padding: 24px; }
.container-wide { max-width: 1200px; margin: 0 auto; padding: 24px; }

/* Header */
.page-header {
  background: linear-gradient(135deg, var(--meat-900), var(--meat-700));
  color: white;
  padding: 32px 24px;
  text-align: center;
  border-radius: 0 0 24px 24px;
  box-shadow: 0 10px 30px -10px rgba(155,21,21,.35);
}
.page-header h1 { font-size: 28px; font-weight: 800; letter-spacing: -.5px; margin: 0 0 6px; }
.page-header .subtitle { opacity: .9; font-size: 14px; }

/* Progress */
.top-nav {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
}
.top-nav a { color: var(--meat-700); text-decoration: none; font-weight: 600; font-size: 14px; }
.top-nav a:hover { text-decoration: underline; }
.progress-bar {
  height: 6px; background: var(--line); border-radius: 999px; overflow: hidden;
  flex: 1; margin: 0 16px;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--warm-500), var(--meat-600));
  transition: width .4s cubic-bezier(.4,0,.2,1);
}
.progress-label { font-size: 12px; color: var(--ink-500); font-weight: 600; }

/* Cards */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.card h2 { font-size: 22px; margin: 0 0 12px; color: var(--meat-800); }
.card h3 { font-size: 18px; margin: 20px 0 8px; color: var(--ink-900); }
.card p { margin: 8px 0; }
.card ul, .card ol { padding-left: 22px; margin: 8px 0; }
.card li { margin: 6px 0; }

.card-accent { border-left: 4px solid var(--meat-600); border-radius: 12px; }
.card-warn { background: var(--warm-100); border-color: var(--warm-500); }
.card-ok { background: var(--success-100); border-color: var(--success); }
.card-danger { background: var(--danger-100); border-color: var(--danger); }
.card-info { background: var(--info-100); border-color: var(--info); }

/* Hero block */
.hero {
  background: linear-gradient(135deg, var(--warm-100), var(--meat-100));
  border-radius: 20px;
  padding: 32px;
  margin-bottom: 24px;
  text-align: center;
}
.hero h2 { color: var(--meat-900); font-size: 26px; margin: 0 0 12px; }
.hero p { font-size: 16px; color: var(--ink-700); max-width: 640px; margin: 0 auto; }

/* Day navigation */
.day-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 24px 0; }
.day-nav a {
  display: block; padding: 14px 10px; text-align: center;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 12px; text-decoration: none; color: var(--ink-700);
  font-weight: 600; font-size: 13px; transition: all .15s;
}
.day-nav a:hover { border-color: var(--meat-500); color: var(--meat-700); transform: translateY(-1px); }
.day-nav a.done { background: var(--success-100); border-color: var(--success); color: var(--success); }
.day-nav a.current { background: var(--meat-700); border-color: var(--meat-900); color: white; }
.day-nav a .day-num { display: block; font-size: 20px; font-weight: 800; margin-bottom: 2px; }

/* Principles grid */
.principles { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 18px 0; }
.principle {
  padding: 16px; background: var(--paper); border: 1px solid var(--line);
  border-radius: 12px; transition: all .2s;
}
.principle:hover { border-color: var(--meat-500); transform: translateY(-2px); box-shadow: 0 8px 20px -10px rgba(155,21,21,.15); }
.principle-num {
  display: inline-block; width: 32px; height: 32px; line-height: 32px; text-align: center;
  background: var(--meat-700); color: white; border-radius: 50%; font-weight: 700; margin-bottom: 8px;
}
.principle h4 { margin: 0 0 4px; font-size: 15px; color: var(--meat-800); }
.principle p { font-size: 13px; color: var(--ink-700); margin: 0; }

/* Tables */
table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px; }
th { text-align: left; padding: 10px; background: var(--meat-50); color: var(--meat-900); font-weight: 600; border-bottom: 2px solid var(--meat-700); }
td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:hover { background: var(--cream); }

/* Badges */
.badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
}
.badge-ccp { background: var(--meat-700); color: white; }
.badge-cp  { background: var(--warm-500); color: white; }
.badge-prp { background: var(--info); color: white; }
.badge-ok  { background: var(--success); color: white; }

/* Quiz */
.quiz {
  background: linear-gradient(135deg, #fef9f1, #fef3c7);
  border: 2px solid var(--warm-500);
  border-radius: 16px;
  padding: 22px;
  margin: 24px 0;
}
.quiz-title { font-size: 18px; color: var(--meat-800); font-weight: 700; margin: 0 0 8px; }
.quiz-intro { color: var(--ink-700); font-size: 14px; margin-bottom: 16px; }
.quiz-q {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 12px; padding: 16px; margin-bottom: 12px;
}
.quiz-q-text { font-weight: 600; margin: 0 0 10px; font-size: 15px; }
.quiz-opts { display: flex; flex-direction: column; gap: 6px; }
.quiz-opt {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px;
  border: 1px solid var(--line); background: var(--paper); border-radius: 10px;
  cursor: pointer; transition: all .15s; font-size: 14px;
}
.quiz-opt:hover { border-color: var(--meat-500); background: var(--meat-50); }
.quiz-opt.selected { border-color: var(--meat-700); background: var(--meat-50); }
.quiz-opt.correct { border-color: var(--success); background: var(--success-100); }
.quiz-opt.wrong { border-color: var(--danger); background: var(--danger-100); }
.quiz-opt input { margin-top: 2px; }
.quiz-explain {
  margin-top: 10px; padding: 10px 14px; border-radius: 8px;
  background: var(--cream); font-size: 13px; color: var(--ink-700);
  border-left: 3px solid var(--meat-700);
}
.quiz-explain.hidden { display: none; }
.quiz-controls { display: flex; gap: 10px; margin-top: 16px; align-items: center; }
.quiz-score { font-weight: 600; color: var(--meat-800); }

/* Buttons */
.btn {
  display: inline-block; padding: 10px 20px; border-radius: 10px;
  background: var(--meat-700); color: white; font-weight: 600; font-size: 14px;
  border: none; cursor: pointer; text-decoration: none;
  transition: all .15s;
}
.btn:hover { background: var(--meat-800); transform: translateY(-1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-secondary { background: var(--paper); color: var(--meat-700); border: 1px solid var(--meat-700); }
.btn-secondary:hover { background: var(--meat-50); }
.btn-ghost { background: transparent; color: var(--ink-700); border: 1px solid var(--line); }
.btn-ghost:hover { background: var(--paper); }

/* Factory map */
.map-wrap {
  position: relative; margin: 20px 0; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--line); background: white;
}
.map-img { display: block; width: 100%; height: auto; }
.map-hot {
  position: absolute; cursor: pointer; border: 2px solid transparent;
  background: rgba(220,38,38,0); transition: all .18s;
  border-radius: 4px;
}
.map-hot:hover, .map-hot.active {
  background: rgba(220,38,38,.18); border-color: var(--meat-700);
}
.map-hot .pin {
  position: absolute; top: -10px; left: -10px;
  width: 22px; height: 22px; line-height: 22px; text-align: center;
  background: var(--meat-700); color: white; font-size: 11px; font-weight: 700;
  border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
.map-hot-other .pin { background: #94a3b8; }
.map-hot-other:hover, .map-hot-other.active { background: rgba(148,163,184,.15); border-color: #94a3b8; }
.map-hot-boundary .pin { background: #7c3aed; }
.map-hot-boundary:hover, .map-hot-boundary.active { background: rgba(124,58,237,.15); border-color: #7c3aed; }
.map-hot-ccp .pin { background: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,.25), 0 2px 6px rgba(0,0,0,.3); }
.map-hot-ccp:hover, .map-hot-ccp.active { background: rgba(220,38,38,.22); border-color: #dc2626; }
.map-hot-cp .pin { background: #d97706; }
.map-hot-cp:hover, .map-hot-cp.active { background: rgba(217,119,6,.18); border-color: #d97706; }

.flow-list { padding-left: 22px; margin: 14px 0; }
.flow-list li { padding: 6px 0; line-height: 1.5; }

.room-info {
  position: sticky; bottom: 16px; max-height: 0; overflow: hidden;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 14px; padding: 0 20px;
  transition: all .3s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.2);
}
.room-info.open { max-height: 600px; padding: 20px; margin-top: 16px; }
.room-info h3 { margin: 0 0 4px; color: var(--meat-800); }
.room-info .he { direction: rtl; color: var(--ink-500); font-size: 14px; }
.room-info dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 12px 0 0; }
.room-info dt { color: var(--ink-500); font-size: 13px; }
.room-info dd { margin: 0; font-weight: 500; font-size: 14px; }

/* Flow diagram */
.flow { display: flex; flex-direction: column; gap: 10px; margin: 20px 0; }
.flow-step {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px; background: var(--paper);
  border: 1px solid var(--line); border-radius: 12px;
}
.flow-step.ccp { border-color: var(--meat-700); background: var(--meat-50); }
.flow-step.cp { border-color: var(--warm-500); background: var(--warm-100); }
.flow-step .flow-icon {
  flex: 0 0 40px; width: 40px; height: 40px; line-height: 40px; text-align: center;
  background: var(--meat-100); color: var(--meat-800);
  font-weight: 700; border-radius: 50%; font-size: 14px;
}
.flow-step.ccp .flow-icon { background: var(--meat-700); color: white; }
.flow-step.cp .flow-icon { background: var(--warm-500); color: white; }
.flow-step .flow-title { font-weight: 600; margin: 0; }
.flow-step .flow-meta { font-size: 12px; color: var(--ink-500); margin: 2px 0 0; }
.flow-arrow { text-align: center; color: var(--ink-500); font-size: 18px; margin: -6px 0; }

/* Spaced repetition card */
.repeat-box {
  background: linear-gradient(135deg, #fef2f2, #fff);
  border: 2px dashed var(--meat-500);
  border-radius: 14px;
  padding: 18px;
  margin: 16px 0;
}
.repeat-box-title { color: var(--meat-700); font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }

/* Footer */
.footer {
  margin-top: 40px; padding: 20px; text-align: center;
  color: var(--ink-500); font-size: 13px; border-top: 1px solid var(--line);
}
.footer a { color: var(--meat-700); }

/* Utility */
.center { text-align: center; }
.small { font-size: 13px; color: var(--ink-500); }
.muted { color: var(--ink-500); }
.strong { font-weight: 700; color: var(--meat-800); }
.nowrap { white-space: nowrap; }
.hidden { display: none; }
.mt-0 { margin-top: 0 !important; }
.mt-2 { margin-top: 20px; }
.mb-0 { margin-bottom: 0 !important; }

.kbd {
  display: inline-block; padding: 2px 8px; background: var(--paper);
  border: 1px solid var(--line); border-bottom-width: 2px;
  border-radius: 6px; font-family: ui-monospace, monospace;
  font-size: 12px; color: var(--ink-700);
}

/* ============ PRINT STYLES ============ */
@media print {
  @page { size: A4; margin: 15mm; }

  body { background: white; color: black; font-size: 11pt; line-height: 1.45; }
  .container { max-width: 100%; padding: 0; }

  /* Hide interactive / nav */
  .top-nav, #top-nav, .day-nav, #day-nav, .role-nav,
  .quiz, .quiz-q, .repeat-box, button, .hidden,
  .back-link, .room-info, nav { display: none !important; }

  /* Flatten cards */
  .card, .role-card, .hero, section.card {
    box-shadow: none !important;
    border: 1px solid #999 !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Headers color */
  h1 { color: #7b1010; font-size: 22pt; margin: 0 0 8pt; }
  h2 { color: #b91c1c; font-size: 16pt; margin: 12pt 0 6pt; break-after: avoid; }
  h3 { color: #18181b; font-size: 13pt; margin: 10pt 0 4pt; break-after: avoid; }
  h4 { font-size: 11pt; margin: 6pt 0 3pt; break-after: avoid; }

  /* Page breaks between days */
  .print-page-break { page-break-after: always; break-after: page; }

  /* Avoid breaking inside key blocks */
  table, .flow-step, .principle, .big-number,
  .qa-item, .deviation, .numbers-row {
    break-inside: avoid; page-break-inside: avoid;
  }

  /* Tables readable in print */
  table { font-size: 10pt; width: 100%; border-collapse: collapse; }
  th, td { border: 1px solid #ccc; padding: 4pt 6pt; }
  thead { background: #f0f0f0; }

  /* Links — show URLs after text for external, not for anchors */
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  a[href^="#"]::after, a[href$=".html"]::after { content: ""; }

  /* Compact lists */
  ul, ol { margin: 4pt 0; padding-left: 18pt; }
  li { margin: 2pt 0; }

  /* Hero / header compact */
  .page-header { padding: 10pt 0; margin-bottom: 10pt; border-bottom: 2px solid #b91c1c; }
  .hero { padding: 10pt !important; margin: 10pt 0 !important; }

  /* Badges readable in B/W */
  .badge, .form-tag, .zone-badge {
    border: 1px solid #666; padding: 1pt 4pt; background: white !important;
    color: black !important; font-size: 9pt;
  }
}