/* ════════════════════════════════════════════════
   MEDICAM SHELL — v1.0
   Design language: Maybach UI · Dark · RTL
   Header 72px · Session 36px · Footer 62px
   ════════════════════════════════════════════════ */

/* ── GOOGLE FONTS ── */
@import url('https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@400;700;900&family=Heebo:wght@300;400;500;700;900&family=DM+Mono:wght@400;500&display=swap');

/* ── TOKENS ── */
:root {
  /* Layout */
  --hdr: 72px;
  --ses: 36px;
  --bot: 62px;
  --top-off: calc(var(--hdr) + var(--ses));

  /* Colors */
  --bg:          #030712;
  --gold:        #c5a059;
  --gold-l:      #e5c079;
  --gold-dim:    rgba(197,160,89,0.10);
  --gold-glow:   rgba(197,160,89,0.30);
  --gold-bd:     rgba(197,160,89,0.25);
  --cyan:        #00d4ff;
  --cyan-dim:    rgba(0,212,255,0.08);
  --cyan-glow:   rgba(0,212,255,0.30);
  --cyan-bd:     rgba(0,212,255,0.25);
  --green:       #00e676;
  --green-dim:   rgba(0,230,118,0.10);
  --red:         #ff4444;
  --red-dim:     rgba(255,68,68,0.10);
  --amber:       #ffb300;
  --blue:        #4488ff;
  --purple:      #9b8ff0;

  /* Text */
  --t1: rgba(255,255,255,0.95);
  --t2: rgba(255,255,255,0.60);
  --t3: rgba(255,255,255,0.30);
  --t4: rgba(255,255,255,0.10);

  /* Glass */
  --glass:    rgba(255,255,255,0.03);
  --glass-hv: rgba(255,255,255,0.06);
  --glass-bd: rgba(255,255,255,0.07);

  /* Typography */
  --font:  'Heebo', sans-serif;
  --mono:  'DM Mono', monospace;
  --serif: 'Frank Ruhl Libre', serif;

  /* Engine color — overridden per engine */
  --engine-color: var(--cyan);
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; outline: none; }
html, body {
  width: 100%; height: 100%; overflow: hidden;
  font-family: var(--font); color: var(--t1); background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font-family: var(--font); }
a { text-decoration: none; color: inherit; }
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-thumb { background: var(--gold-bd); border-radius: 2px; }

/* ════════════════════════════════
   HEADER — 72px
   ════════════════════════════════ */
.mc-hdr {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--hdr); max-height: var(--hdr); overflow: hidden; z-index: 900;
  background: rgba(3,7,18,0.94);
  backdrop-filter: blur(20px);
  border-bottom: 1.5px solid var(--gold-bd);
  display: flex; align-items: center;
  justify-content: space-between; padding: 0 3vw;
}

/* Medicam brand (right, always gold) */
.mc-hdr-medicam {
  display: flex; align-items: center; gap: 10px;
  min-width: 160px; flex-shrink: 0;
}
.mc-logo {
  width: 46px; height: 46px; border-radius: 50%; background: #fff;
  border: 2px solid var(--gold); box-shadow: 0 0 14px var(--gold-glow);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; flex-shrink: 0;
}
.mc-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.mc-logo.cyan { border-color: var(--cyan); box-shadow: 0 0 14px var(--cyan-glow); }
.mc-brand-name {
  font-size: 1.3rem; font-weight: 900; color: var(--t1);
  white-space: nowrap;
}

/* Center title */
.mc-hdr-center { flex: 1; text-align: center; padding: 0 10px; }
.mc-engine-title {
  font-family: var(--serif); font-size: 1.9rem; font-weight: 900;
  color: var(--gold-l); line-height: 1;
  text-shadow: 0 0 30px var(--gold-glow);
}
.mc-engine-pulse {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 10px var(--cyan-glow);
  animation: mc-pulse 2s ease-in-out infinite;
  margin-right: 7px; vertical-align: middle;
}
@keyframes mc-pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.4; transform:scale(0.8); }
}
.mc-engine-sub { color: #fff; font-weight: 500; font-size: 0.82rem; margin-top: 3px; letter-spacing: 0; }

/* Clinic brand (left — dynamic via brand.js) */
.mc-hdr-clinic {
  display: flex; align-items: center; gap: 10px;
  min-width: 160px; flex-shrink: 0; justify-content: flex-end;
}
.mc-clinic-name {
  font-size: 1.3rem; font-weight: 900; color: var(--cyan);
  white-space: nowrap; text-align: right;
}
.mc-clinic-name-only {
  font-size: 1.3rem; font-weight: 900; color: var(--t1);
  white-space: nowrap;
}

/* ════════════════════════════════
   SESSION BAR — 36px
   ════════════════════════════════ */
.mc-ses {
  position: fixed; top: var(--hdr); left: 0; right: 0;
  height: var(--ses); z-index: 850;
  background: rgba(0,0,0,0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--glass-bd);
  display: flex; align-items: center;
  padding: 0 3vw; gap: 0;
}
.mc-ses-item {
  display: flex; align-items: center; gap: 5px;
  font-size: 0.78rem; font-weight: 700; color: var(--t1);
  white-space: nowrap; padding: 0 12px;
}
.mc-ses-item i { color: var(--gold); font-size: 0.68rem; }
.mc-ses-sep {
  width: 1px; height: 14px; background: var(--glass-bd);
  flex-shrink: 0;
}
.mc-ses-close {
  margin-right: auto;
  background: rgba(197,160,89,0.12); border: 1px solid rgba(197,160,89,0.3);
  color: var(--gold); padding: 2px 14px; border-radius: 20px;
  font-size: 0.75rem; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; gap: 5px;
  transition: 0.2s; font-family: var(--font);
}
.mc-ses-close:hover { background: rgba(197,160,89,0.25); color: #e5c079; }
.alert-patient { color: #ff4444 !important; font-weight: 900 !important; }
.alert-patient::before { content: '🔴 '; }

/* ════════════════════════════════
   FOOTER — 62px
   ════════════════════════════════ */
.mc-bot {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: var(--bot); z-index: 900;
  background: rgba(3,7,18,0.96);
  backdrop-filter: blur(20px);
  border-top: 1.5px solid var(--gold-bd);
  display: flex; align-items: center;
  justify-content: space-between; padding: 0 3vw;
}
.mc-bot-group { display: flex; align-items: center; gap: 8px; }

/* ── MAIN CONTENT AREA ── */
.mc-main {
  position: fixed;
  top: var(--top-off); left: 0; right: 0; bottom: var(--bot);
  overflow-y: auto; overflow-x: hidden;
  padding: 20px 3vw;
  background:
    radial-gradient(ellipse 80% 40% at 50% 0%,
      rgba(0,180,255,0.03) 0%, transparent 60%),
    var(--bg);
}

/* ════════════════════════════════
   BUTTONS
   ════════════════════════════════ */
.mc-btn {
  background: transparent;
  border: 1px solid var(--glass-bd);
  color: var(--t1);
  padding: 7px 18px; border-radius: 50px;
  font-size: 0.88rem; font-weight: 700;
  cursor: pointer; transition: 0.25s;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font); text-decoration: none;
  white-space: nowrap;
}
.mc-btn:hover { background: var(--glass-hv); border-color: rgba(255,255,255,0.2); }
.mc-btn.gold  { border-color: var(--gold-bd); color: var(--gold); }
.mc-btn.gold:hover  { background: var(--gold); color: #000; }
.mc-btn.cyan  { border-color: var(--cyan-bd); color: var(--cyan); }
.mc-btn.cyan:hover  { background: var(--cyan); color: #000; }
.mc-btn.green { border-color: rgba(0,230,118,0.35); color: var(--green); }
.mc-btn.green:hover { background: var(--green); color: #000; }
.mc-btn.red   { border-color: rgba(255,68,68,0.35); color: var(--red); }
.mc-btn.red:hover   { background: var(--red); color: #fff; }
.mc-btn.icon  { width: 38px; height: 38px; padding: 0; justify-content: center; border-radius: 50%; }
.mc-btn.filled-gold { background: var(--gold); color: #000; border-color: var(--gold); font-weight: 900; }
.mc-btn.filled-gold:hover { background: var(--gold-l); }

/* ════════════════════════════════
   CARDS (Glassmorphism)
   ════════════════════════════════ */
.mc-card {
  background: var(--glass);
  border: 1px solid var(--glass-bd);
  border-radius: 14px;
  backdrop-filter: blur(10px);
  padding: 18px 20px;
}
.mc-card-title {
  font-size: 1.0rem; font-weight: 900;
  color: var(--gold-l); margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px;
}
.mc-card-title i { color: var(--gold); }

/* ════════════════════════════════
   TOAST NOTIFICATION
   ════════════════════════════════ */
.mc-toast {
  position: fixed; bottom: calc(var(--bot) + 12px); left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(197,160,89,0.15);
  border: 1px solid var(--gold-bd);
  color: var(--gold-l); padding: 9px 22px;
  border-radius: 50px; font-size: 0.84rem; font-weight: 700;
  opacity: 0; transition: 0.3s; z-index: 9999;
  backdrop-filter: blur(12px); white-space: nowrap;
  pointer-events: none;
}
.mc-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.mc-toast.err  { background: var(--red-dim); border-color: rgba(255,68,68,0.4); color: var(--red); }

/* ════════════════════════════════
   UTILITIES
   ════════════════════════════════ */
.mc-divider {
  height: 1px; background: var(--glass-bd); margin: 12px 0;
}
.mc-badge {
  font-size: 0.62rem; font-weight: 900; letter-spacing: 1px;
  padding: 2px 9px; border-radius: 20px; border: 1px solid;
  display: inline-flex; align-items: center; gap: 4px;
}
.mc-badge.gold  { color: var(--gold);  border-color: var(--gold-bd);  background: var(--gold-dim); }
.mc-badge.cyan  { color: var(--cyan);  border-color: var(--cyan-bd);  background: var(--cyan-dim); }
.mc-badge.green { color: var(--green); border-color: rgba(0,230,118,0.3); background: var(--green-dim); }

/* ════════════════════════════════════════════════
   SPLASH SCREEN TEMPLATE — v2.0
   Template: image left · panel right · ignition btn
   Usage: add class="on-splash" to <body>,
          remove it in goToScreen() when n > 0

   ── HTML TEMPLATE (splash) ──────────────────────
   <div id="scr0">
     <div class="splash-layout">
       <div class="splash-img-pane">
         <img class="splash-hero-img" src="ENGINE_IMAGE.jpg" alt="EngineName">
       </div>
       <div class="splash-panel">
         <div class="splash-icon"><i class="fas fa-ICON"></i></div>
         <h1 class="splash-engine-name">EngineName</h1>
         <p class="splash-engine-desc">שורה 1<br>שורה 2</p>
         <div class="splash-ignition-wrap">
           <button class="splash-ignition" onclick="goToScreen(1)" title="הפעל מנוע">
             <div class="splash-ign-inner"><i class="fas fa-power-off"></i></div>
           </button>
           <span class="splash-ign-label">הפעל מנוע</span>
         </div>
       </div>
     </div>
   </div>

   ── JS TEMPLATE (goToScreen — חובה בכל מנוע) ───
   ⚠️ חייב להיות בשני script tags נפרדים:

   <script src="_shell/medicam-brand.js"></script>
   <script>
   function goToScreen(n){
     document.body.classList.toggle('on-splash', n===0);
   }
   </script>

   אסור: <script src="medicam-brand.js">function goToScreen(){...}</script>
   (הדפדפן מתעלם מקוד inline כאשר יש src)

   ── HTML TEMPLATE (footer) ──────────────────────
   <footer class="mc-bot">
     <!-- LEFT: תמיד גלוי -->
     <div class="mc-bot-group">
       <button class="mc-btn icon" onclick="undoLast()" title="בטל"
         style="color:var(--amber);border-color:rgba(255,179,0,.35)">
         <i class="fas fa-undo"></i></button>
       <button class="mc-btn icon red" onclick="clearAll()" title="נקה הכל">
         <i class="fas fa-trash"></i></button>
       <a href="hub.html" class="mc-btn icon cyan" title="חזרה לאקו-סיסטם">
         <i class="fas fa-network-wired"></i></a>
     </div>
     <!-- CENTER: נסתר בספלאש — כפתורים ייחודיים למנוע -->
     <div class="mc-bot-group splash-bot-hide" id="bot-center">
       <!-- engine-specific buttons -->
     </div>
     <!-- RIGHT: תמיד גלוי -->
     <div class="mc-bot-group">
       <button class="mc-btn gold" onclick="openGuide()">
         <i class="fas fa-question-circle"></i> מדריך</button>
       <button class="mc-btn icon cyan" onclick="toggleFS()" title="מסך מלא">
         <i class="fas fa-expand" id="fs-icon"></i></button>
     </div>
   </footer>
   ════════════════════════════════════════════════ */

/* Hide center bot-group on splash */
body.on-splash .splash-bot-hide { display: none !important; }

/* Splash screen — works for ALL engines (with or without .screen system) */
#scr0 {
  position: fixed !important;
  top: var(--top-off) !important;
  left: 0 !important; right: 0 !important;
  bottom: var(--bot) !important;
  z-index: 600 !important;
  display: none !important;
  overflow: hidden !important;
  background: #000 !important;
  /* No flex here — splash-layout handles the layout via position:absolute */
}
body.on-splash #scr0 { display: block !important; }

/* Two-column wrapper — fills scr0 completely */
.splash-layout {
  position: absolute;
  inset: 0;
  display: flex;
  direction: ltr;
}

/* LEFT — hero image */
.splash-img-pane {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  overflow: hidden;
}
.splash-hero-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* RIGHT — info panel */
.splash-panel {
  width: 260px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: linear-gradient(160deg, rgba(8,15,35,0.99) 0%, rgba(3,7,18,1) 100%);
  border-left: 1px solid rgba(197,160,89,0.18);
  padding: 28px 20px;
  direction: rtl;
}
.splash-icon {
  width: 62px; height: 62px; border-radius: 50%;
  background: rgba(0,212,255,0.12);
  border: 2px solid var(--cyan);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; color: var(--cyan);
  animation: splashIconPulse 2.5s ease-in-out infinite;
}
@keyframes splashIconPulse {
  0%,100% { box-shadow: 0 0 20px rgba(0,212,255,0.3); }
  50%      { box-shadow: 0 0 38px rgba(0,212,255,0.65), 0 0 60px rgba(0,212,255,0.2); }
}
.splash-engine-name {
  font-family: 'Heebo', sans-serif;
  font-size: 1.9rem; font-weight: 900;
  color: #fff; letter-spacing: 1px;
  margin: 0; line-height: 1.1; text-align: center;
}
.splash-engine-desc {
  font-size: 0.85rem; color: rgba(255,255,255,0.5);
  font-weight: 300; margin: 0; line-height: 1.6; text-align: center;
}

/* Maybach ignition button */
.splash-ignition-wrap {
  display: flex; flex-direction: column;
  align-items: center; gap: 12px; margin-top: 4px;
}
.splash-ignition {
  position: relative; width: 112px; height: 112px;
  border: none; background: none; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.splash-ignition::before {
  content: ''; position: absolute; inset: -10px; border-radius: 50%;
  border: 1.5px solid rgba(0,212,255,0.45);
  animation: ignRingOut 2.4s ease-in-out infinite;
}
.splash-ignition::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  border: 1px solid rgba(197,160,89,0.35);
  animation: ignRingIn 2.4s ease-in-out infinite 0.6s;
}
.splash-ign-inner {
  width: 112px; height: 112px; border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #f0d080 0%, #c5a059 38%, #7a5520 100%);
  border: 3px solid rgba(229,192,121,0.55);
  box-shadow:
    0 0 32px rgba(197,160,89,0.55),
    0 0 70px rgba(197,160,89,0.20),
    inset 0 3px 8px rgba(255,255,255,0.28),
    inset 0 -5px 14px rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.3rem; color: rgba(8,6,2,0.88);
  transition: all 0.2s ease;
}
.splash-ignition:hover .splash-ign-inner {
  box-shadow:
    0 0 55px rgba(197,160,89,0.85),
    0 0 110px rgba(197,160,89,0.35),
    inset 0 3px 8px rgba(255,255,255,0.3),
    inset 0 -5px 14px rgba(0,0,0,0.35);
  transform: scale(1.06);
}
.splash-ignition:active .splash-ign-inner {
  transform: scale(0.93);
  box-shadow: 0 0 18px rgba(197,160,89,0.4), inset 0 6px 16px rgba(0,0,0,0.55);
}
.splash-ign-label {
  font-family: 'Heebo', sans-serif;
  font-size: 0.70rem; font-weight: 700;
  color: rgba(255,255,255,0.4); letter-spacing: 3px; text-transform: uppercase;
}
@keyframes ignRingOut {
  0%,100% { transform: scale(1); opacity: 0.4; }
  50%      { transform: scale(1.1); opacity: 0.85; }
}
@keyframes ignRingIn {
  0%,100% { transform: scale(1); opacity: 0.3; }
  50%      { transform: scale(1.06); opacity: 0.65; }
}

/* ════════════════════════════════
   FOOTER TEMPLATE RULES
   כל footer.mc-bot — LEFT | CENTER | RIGHT
   ════════════════════════════════ */
footer.mc-bot {
  justify-content: space-between;
}

/* ════════════════════════════════
   RESPONSIVE
   ════════════════════════════════ */
@media (max-width: 768px) {
  :root { --hdr: 60px; }
  .mc-engine-title { font-size: 1.4rem; }
  .mc-brand-name, .mc-clinic-name { font-size: 1.0rem; }
  .mc-hdr { padding: 0 12px; }
  .mc-ses-item { padding: 0 7px; font-size: 0.72rem; }
}

/* ════════════════════════════════
   MOBILE — ≤640px
   Session bar: doc + close only
   Splash: vertical stack
   ════════════════════════════════ */
@media (max-width: 640px) {
  /* Session bar — hide patient + engine-label + separators */
  .mc-ses { padding: 0 10px !important; }
  .mc-ses > *:nth-child(2),
  .mc-ses > *:nth-child(3),
  .mc-ses > *:nth-child(4),
  .mc-ses > *:nth-child(5) { display: none !important; }
  #mc-ses-doc { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Splash — switch to vertical stack */
  .splash-layout { flex-direction: column !important; direction: rtl !important; }
  .splash-img-pane { flex: 1 !important; min-height: 180px; width: 100% !important; }
  .splash-hero-img { object-fit: cover !important; width: 100% !important; height: 100% !important; }
  .splash-panel {
    width: 100% !important; flex-shrink: 0 !important;
    padding: 16px 20px !important; gap: 12px !important;
    border-left: none !important;
    border-top: 1px solid rgba(197,160,89,0.18) !important;
  }
  .splash-engine-name { font-size: 1.5rem !important; }
  .splash-ignition, .splash-ign-inner { width: 88px !important; height: 88px !important; }
  .splash-ign-inner { font-size: 1.8rem !important; }

  /* Header subtitle — hide on mobile to prevent wrapping */
  .mc-engine-sub { display: none !important; }

  /* Header — keep both logo circles, hide text labels */
  .mc-brand-name { display: none !important; }
  .mc-hdr-clinic { min-width: auto !important; }
  .mc-clinic-name { display: none !important; }
  .mc-clinic-name-only { display: none !important; }
  .mc-hdr-medicam { min-width: auto !important; gap: 0 !important; }
  .mc-engine-title { font-size: 1.3rem !important; }
}