/* ==========================================================
   מערכת עיצוב משותפת — ממשיכה את השפה הוויזואלית של האפיון
   Frank Ruhl Libre (כותרות) · Assistant (טקסט) · Miriam Libre (תוויות)
   ========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@500;700;900&family=Assistant:wght@300;400;600;700&family=Miriam+Libre:wght@400;700&display=swap');

:root{
  --ink:#17222C; --ink-soft:#4E5F6C; --ink-ghost:#8D9AA4;
  --paper:#FCFBF8; --paper-dim:#F5F3EE; --carbon:#E3EAEF; --line:#C6D1D8;
  --accent:#2A5670; --accent-soft:#DCE7EC;
  --ok:#2F6B4F; --ok-bg:#F3F7F4;
  --warn:#8A6111; --warn-bg:#FFFCF0; --warn-line:#C9B67E;
  --danger:#8A3B3B; --danger-bg:#FBF1F1;
  --radius:3px;
  --shadow: 0 1px 2px rgba(23,34,44,.06);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--carbon); color:var(--ink);
  font-family:"Assistant","Segoe UI",Arial,system-ui,sans-serif; font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:"Frank Ruhl Libre","David",Georgia,serif; margin:0; color:var(--ink)}
.eyebrow{font-family:"Miriam Libre",Arial,sans-serif; font-size:11px; letter-spacing:.13em; color:var(--ink-ghost)}
a{color:var(--accent)}
button, input, textarea, select{font-family:inherit; font-size:16px}
input,textarea,select{
  width:100%; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper);
  padding:10px 12px; color:var(--ink);
}
input:focus,textarea:focus,select:focus{outline:2px solid var(--accent); outline-offset:1px}
label{display:block; font-family:"Miriam Libre",Arial,sans-serif; font-size:11px; letter-spacing:.1em; color:var(--ink-ghost); margin:14px 0 5px}
.field-row{margin-bottom:4px}

.btn{
  appearance:none; cursor:pointer; border-radius:var(--radius); border:1.5px solid var(--ink);
  background:var(--paper); color:var(--ink); font-family:"Miriam Libre",Arial,sans-serif;
  font-size:12px; letter-spacing:.08em; padding:11px 18px; transition:.15s;
}
.btn:hover{background:var(--ink); color:var(--paper)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:#fff}
.btn.primary:hover{background:#1e4256}
.btn.ghost{border-color:var(--line); color:var(--ink-ghost)}
.btn.ghost:hover{background:var(--line); color:var(--ink)}
.btn.danger{border-color:var(--danger); color:var(--danger)}
.btn.danger:hover{background:var(--danger); color:#fff}
.btn.block{width:100%; text-align:center}
.btn:disabled{opacity:.45; cursor:not-allowed}

.card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow)}
.stack > * + *{margin-top:14px}
.tag{
  display:inline-block; font-family:"Miriam Libre",Arial,sans-serif; font-size:9.5px; letter-spacing:.12em;
  border:1.5px solid var(--accent); color:var(--accent); padding:2px 7px 1px; border-radius:2px;
}
.tag.warn{border-color:var(--warn); color:var(--warn)}
.tag.ghost{border-color:var(--line); color:var(--ink-ghost)}
.muted{color:var(--ink-soft)}
.center{text-align:center}
.hidden{display:none !important}

/* ---------- מסגרת אפליקציה כללית (מסך יחיד ממורכז) ---------- */
.shell{min-height:100%; display:flex; flex-direction:column}
.topbar{
  background:var(--paper); border-bottom:1px solid var(--ink); padding:12px 20px;
  display:flex; align-items:center; gap:12px; position:sticky; top:0; z-index:5;
}
.topbar h1{font-size:17px}
.topbar .spacer{flex:1}
.wrap{max-width:640px; margin:0 auto; padding:22px 18px 60px; width:100%; flex:1}
.wrap.narrow{max-width:420px}

/* ---------- טפסי כניסה ---------- */
.login-screen{min-height:100%; display:flex; align-items:center; justify-content:center; padding:24px}
.login-card{max-width:380px; width:100%; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:34px 28px; box-shadow:var(--shadow)}
.login-card h1{font-size:24px; margin-bottom:6px}
.login-card .eyebrow{margin-bottom:16px; display:block}
.role-links{display:flex; flex-direction:column; gap:10px; margin-top:20px}

/* ---------- לוח בקרה של צוות ---------- */
.patient-row{
  display:flex; align-items:center; gap:12px; padding:14px 16px; background:var(--paper);
  border:1px solid var(--line); border-radius:var(--radius); text-decoration:none; color:var(--ink);
}
.patient-row + .patient-row{margin-top:8px}
.patient-row .code{font-family:"Miriam Libre",monospace; letter-spacing:.05em}
.patient-row:hover{border-color:var(--accent)}

.tabs{display:flex; gap:2px; border-bottom:1px solid var(--line); margin-bottom:18px; overflow-x:auto}
.tabs button{
  appearance:none; border:0; background:none; padding:10px 14px; white-space:nowrap;
  font-family:"Miriam Libre",Arial,sans-serif; font-size:11.5px; letter-spacing:.08em; color:var(--ink-ghost);
  cursor:pointer; border-bottom:2px solid transparent;
}
.tabs button.on{color:var(--ink); border-bottom-color:var(--accent)}

table{border-collapse:collapse; width:100%; font-size:14px}
td,th{border:1px solid var(--line); padding:7px 9px; text-align:right; vertical-align:top}
th{background:var(--carbon); font-family:"Miriam Libre",Arial,sans-serif; font-size:10.5px; letter-spacing:.06em; font-weight:400}

.timeline-item{border-inline-start:2px solid var(--line); padding:2px 0 2px 0; padding-inline-start:12px; margin-bottom:10px; font-size:14px}
.timeline-item .t{color:var(--ink-ghost); font-size:11px; font-family:"Miriam Libre",Arial,sans-serif}

/* ---------- צ'אט ---------- */
.chat-log{display:flex; flex-direction:column; gap:8px; max-height:50vh; overflow-y:auto; padding:4px 2px}
.msg{max-width:78%; padding:9px 12px; border-radius:10px; font-size:14.5px; position:relative}
.msg .lbl{font-family:"Miriam Libre",Arial,sans-serif; font-size:9.5px; letter-spacing:.08em; color:var(--ink-ghost); margin-bottom:2px}
.msg.mine{align-self:flex-end; background:var(--accent-soft); border:1px solid var(--accent)}
.msg.theirs{align-self:flex-start; background:var(--paper); border:1px solid var(--line)}
.msg.system{align-self:center; background:var(--warn-bg); border:1px solid var(--warn-line); font-size:12.5px; color:var(--warn)}
.msg .del{position:absolute; top:2px; left:-22px; font-size:11px; color:var(--ink-ghost); cursor:pointer; opacity:.5}
.msg .del:hover{opacity:1}
.chat-input{display:flex; gap:8px; margin-top:12px}
.chat-input textarea{resize:none; min-height:44px}

/* ==========================================================
   מצב מטופל — שקט, בלי צבע, בלי חיזוק. תקציב הצבע: כמעט אפס.
   ========================================================== */
body.patient-mode{background:var(--paper)}
body.patient-mode .topbar{border-bottom:1px solid var(--line)}
.quiet-screen{
  min-height:70vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:40px 20px; color:var(--ink-ghost);
}
.quiet-screen .glyph{font-size:13px; font-family:"Miriam Libre",Arial,sans-serif; letter-spacing:.16em; margin-bottom:10px}
.quiet-screen p{max-width:280px; margin:0; font-size:15px}

.task-card{border:1px solid var(--line); border-radius:var(--radius); padding:26px 22px; background:var(--paper)}
.task-card .kind{font-family:"Miriam Libre",Arial,sans-serif; font-size:10.5px; letter-spacing:.14em; color:var(--ink-ghost); margin-bottom:10px}
.task-card .text{font-family:"Frank Ruhl Libre",Georgia,serif; font-size:21px; line-height:1.4; font-weight:700; margin-bottom:22px}
.task-actions{display:flex; gap:10px; flex-wrap:wrap}

.icon-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:14px 0}
.icon-grid button{
  aspect-ratio:1; border-radius:12px; border:1.5px solid var(--line); background:var(--paper);
  font-size:26px; cursor:pointer;
}
.icon-grid button.on{border-color:var(--accent); background:var(--accent-soft)}

.emergency-btn{
  display:block; width:100%; text-align:center; padding:14px; border-radius:var(--radius);
  border:1.5px solid var(--danger); color:var(--danger); background:var(--danger-bg);
  font-family:"Miriam Libre",Arial,sans-serif; font-size:12.5px; letter-spacing:.08em; cursor:pointer;
}
.emergency-panel{border:1.5px solid var(--danger); background:var(--danger-bg); border-radius:var(--radius); padding:18px; color:var(--danger)}
.emergency-panel .phone{font-family:"Miriam Libre",monospace; font-size:20px; direction:ltr; display:inline-block; margin-top:6px}

.timer-display{font-family:"Miriam Libre",monospace; font-size:44px; text-align:center; letter-spacing:.03em; margin:18px 0}

.bottom-nav{
  position:sticky; bottom:0; display:flex; border-top:1px solid var(--line); background:var(--paper);
}
.bottom-nav button{
  flex:1; appearance:none; border:0; background:none; padding:12px 6px; cursor:pointer;
  font-family:"Miriam Libre",Arial,sans-serif; font-size:10.5px; letter-spacing:.06em; color:var(--ink-ghost);
}
.bottom-nav button.on{color:var(--accent)}

/* ---------- מסלול ילדים: החריג היחיד לחום/צבע/חיזוק חזותי ---------- */
body.child-mode{background:#FFFBF2}
body.child-mode .task-card{border-color:#E8C77E; background:#FFFDF6}
body.child-mode .task-card .text{font-size:23px}
body.child-mode .btn.primary{background:#C97B3D; border-color:#C97B3D}

.notice{border:1px solid var(--warn-line); background:var(--warn-bg); color:#5C4E2A; padding:12px 14px; border-radius:var(--radius); font-size:14px}
.notice.ok{border-color:#9DC0AC; background:var(--ok-bg); color:#25412F}

@media (max-width:520px){
  .wrap{padding:16px 14px 70px}
  .msg{max-width:88%}
}