/* app/css/app.css — ICC Cockpit (v1) */

:root{
  --b0:#0C334D; --b1:#245372; --g:#BB925A;
  --bg:#f7f9fc; --text:#0b1220; --muted:#667085; --border:#e5e7eb;
  --shadow:0 10px 30px rgba(16,24,40,.10);

  --fs-xs:12px;
  --fs-sm:13px;
  --fs-md:14px;
  --fs-lg:16px;
  --fs-xl:18px;
  --fs-2xl:22px;

  --lh-tight:1.20;
  --lh-normal:1.45;
  --lh-muted:1.35;

  --fw-med:600;
  --fw-semi:700;
  --fw-bold:800; /* reserve for patient name only */
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:var(--bg);
  color:var(--text);
  font-size:var(--fs-md);
  line-height:var(--lh-normal);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

input,select,textarea,button{font:inherit}

/* Inputs */
input,select,textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  outline:none;
  color:var(--text);
}
input:focus,select:focus,textarea:focus{
  border-color:rgba(36,83,114,.35);
  box-shadow:0 0 0 3px rgba(36,83,114,.10);
}
textarea{min-height:90px; resize:vertical}

/* Muted */
.muted{color:var(--muted); font-size:var(--fs-sm); line-height:var(--lh-muted)}

/* Helpers */
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.field{display:flex; flex-direction:column; gap:6px}
label{
  font-size:var(--fs-xs);
  color:var(--muted);
  font-weight:var(--fw-med);
  letter-spacing:.2px;
}

/* Buttons */
.btn,.btn2,.btnGhost{
  border-radius:14px;
  padding:10px 14px;
  font-weight:var(--fw-semi);
  border:1px solid transparent;
  cursor:pointer;
  user-select:none;
  letter-spacing:.15px;
}
.btn{background:var(--b0); color:#fff}
.btn2{background:var(--g); color:#fff}
.btnGhost{background:#fff; color:var(--b0); border-color:var(--border)}
.btnTiny{padding:8px 10px; border-radius:12px}
button:disabled{opacity:.45; cursor:not-allowed}

/* Card */
.card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  padding:14px;
  box-shadow:0 2px 10px rgba(16,24,40,.05);
}
.item{
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  padding:12px;
}

/* Pills */
.pill{
  padding:6px 10px;
  border-radius:999px;
  font-size:var(--fs-xs);
  font-weight:var(--fw-semi);
  background:#f2f4f7;
  color:var(--b0);
  border:1px solid var(--border);
  white-space:nowrap;
}

.hr{height:1px;background:#eef2f7;margin:12px 0}

/* Typography utilities */
.tTitle{font-size:var(--fs-xl); font-weight:var(--fw-semi); line-height:var(--lh-tight); color:var(--text)}
.tSubtitle{font-size:var(--fs-sm); font-weight:var(--fw-med); line-height:var(--lh-muted); color:var(--muted)}
.tKicker{font-size:var(--fs-xs); font-weight:var(--fw-med); letter-spacing:.35px; color:var(--muted); text-transform:uppercase}
.tStrong{font-weight:var(--fw-semi)}
.tName{font-size:var(--fs-2xl); font-weight:var(--fw-bold); line-height:var(--lh-tight); color:var(--text)}

/* Toast */
.toast{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%);
  background:rgba(12,51,77,.95); color:#fff; padding:10px 14px; border-radius:999px;
  font-weight:var(--fw-semi); font-size:var(--fs-sm); opacity:0; pointer-events:none; transition:opacity .18s ease; z-index:9999;
}
.toast.show{opacity:1}

/* ===============================
   HEADER — ICC CLINICAL SYSTEM
   =============================== */

.topBar {
  background: linear-gradient(180deg, #0C334D 0%, #0E3B57 100%);
  color: #ffffff;
  border-bottom: 3px solid #BB925A;
}
.hdrStrip { background: rgba(0,0,0,0.18); font-size: 12px; letter-spacing: .6px; text-transform: uppercase; padding: 6px 0; }
.hdrStripInner { max-width: 1400px; margin: 0 auto; padding: 0 20px; }
.hdrStripText { opacity: .85; font-weight: 500; }

.hdrMain { padding: 18px 0 16px 0; }
.hdrInner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  align-items: center;
  gap: 20px;
}

.hdrBrand { display: flex; align-items: center; gap: 14px; }
.hdrLogoWrap { width: 46px; height: 46px; border-radius: 10px; background: #ffffff; display:flex; align-items:center; justify-content:center; }
.hdrLogoPlaceholder { width: 26px; height: 26px; border-radius: 6px; background: #BB925A; }
.hdrTitle { font-size: 18px; font-weight: 700; letter-spacing: .4px; }
.hdrSub { font-size: 13px; opacity: .85; margin-top: 2px; }

.hdrCenter { text-align: center; }
.hdrSysTitle { font-size: 22px; font-weight: 800; letter-spacing: .6px; }
.hdrSysSub { font-size: 13px; margin-top: 4px; opacity: .85; }

.hdrUserBox { text-align: right; }
.hdrModeRow { display:flex; justify-content:flex-end; align-items:center; gap:12px; }
.hdrMode { background: rgba(255,255,255,0.1); padding: 6px 12px; border-radius: 18px; font-size: 12px; display:flex; align-items:center; gap:6px; }
.hdrLockIcon { font-size: 14px; }
.hdrModeText { font-weight: 600; letter-spacing: .3px; }
.hdrVersion { font-size: 11px; opacity: .75; }
.hdrVer { font-weight: 600; }
.hdrRoleLine { font-size: 12px; opacity: .85; margin-top: 2px; }
.hdrActions .btnGhost { background: rgba(255,255,255,0.12); color: #fff; border: none; font-size: 12px; padding: 5px 10px; border-radius: 16px; }
.hdrActions .btnGhost:hover { background: rgba(255,255,255,0.2); }

@media (max-width: 1000px) {
  .hdrInner { grid-template-columns: 1fr; text-align: center; gap: 18px; }
  .hdrBrand { justify-content: center; }
  .hdrUserBox { text-align: center; }
  .hdrModeRow { justify-content: center; }
}

/* ============================
   Page layout
   ============================ */

.main{ padding:16px; }

/* Auth card */
.authCard{
  max-width: 420px;
  margin: 18px auto 0;
}

/* ============================
   3-column Cockpit Layout
   ============================ */

.cockpit3{
  display:grid;
  grid-template-columns: 360px minmax(520px, 1fr) 420px;
  gap:16px;
  align-items:start;
  padding:16px;
}

.nav3, .view3{
  position: sticky;
  top: 16px;
  align-self: start;
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding-right: 4px;
}

.wsStrip{
  margin-top:10px; padding:10px 12px; border-radius:16px;
  background:#f9fafb; border:1px solid var(--border);
  color:var(--b0); font-weight:900; font-size:12px;
}

.list{margin-top:10px}
.list .item{
  display:flex; justify-content:space-between; gap:10px; align-items:center;
  padding:12px; border:1px solid var(--border); border-radius:16px; background:#fff; margin-top:10px;
}

/* Floating toggle (collapsed mode only) */
.navToggleFloat{
  display:none;
  position: fixed;
  left: 16px;
  top: 92px;
  z-index: 9999;
  padding: 8px 10px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: 0 8px 18px rgba(0,0,0,0.10);
  font-weight: 900;
  font-size: 14px;
  line-height: 1;
  opacity: 0.96;
}
.navToggleFloat:hover{ opacity: 1; }

.cockpit3.collapsed{
  grid-template-columns: minmax(520px, 1fr) 420px !important;
  padding-top: 58px;
}
.cockpit3.collapsed .nav3{ display:none !important; }

.cockpit3.collapsed + .navToggleFloat,
#navToggleFloat{ /* keep selector safe */ }

@media (max-width: 1200px){
  .cockpit3{ grid-template-columns: 340px 1fr; }
  .view3{ display:none; }

  .cockpit3.collapsed{
    grid-template-columns: 1fr 420px !important;
    padding-top: 58px;
  }
  .cockpit3.collapsed .view3{ display:block !important; }
}

@media (max-width: 900px){
  .cockpit3{ grid-template-columns: 1fr; }
  .nav3{ position: relative; max-height: none; overflow: visible; }
  .view3{ display:block; position: relative; max-height:none; overflow:visible; }
  .cockpit3.collapsed{ grid-template-columns: 1fr !important; padding-top: 54px; }
  .navToggleFloat{ top: 86px; left: 12px; }
}

/* View panel bits */
.vpCard{ padding:14px; }
.vpTop{ display:flex;justify-content:space-between;align-items:flex-start;gap:10px; }
.vpTitle{ font-size:18px;font-weight:800;letter-spacing:.2px; }
.vpHint{ margin-top:2px; }

.vpMetaLine{
  font-size:15px;
  font-weight:900;
  color:#BB925A;
  padding:8px 0 0;
  letter-spacing:.15px;
}
.vpBlock{
  border:1px solid rgba(0,0,0,0.06);
  border-radius:14px;
  padding:10px 12px;
  background:#fff;
}
.vpLine{ padding:3px 0; line-height:1.25; }
.vpLbl{ font-size:14px; font-weight:600; color:#111827; white-space:nowrap; }
.vpVal{ font-size:14px; font-weight:400; color:#111827; margin-left:8px; white-space:pre-wrap; }
.vpRx{ display:flex;flex-direction:column;gap:6px; }
.vpRxLine{
  font-size:14px;
  font-weight:400;
  color:#111827;
  padding:10px 12px;
  border:1px solid rgba(0,0,0,0.07);
  border-radius:12px;
  background:#fff;
}
.vpFooter{ margin-top:12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap; }

/* WhatsApp helper class (optional) */
.btnWA{
  background:#25D366;
  color:#fff;
  border-color:#25D366;
}
.btnWA:disabled{
  background:#e5e7eb;
  border-color:#e5e7eb;
  color:#667085;
}