:root{
  --accent:#00be85;
  --bg:#e2e2e2;
  --card:#ffffff;
  --muted:#6e7a90;
  --radius:10px;
  --gap:14px;
  --max-width:1200px;
}

*{box-sizing:border-box}
body{font-family: "Poppins", sans-serif;background:var(--bg);margin:0;color:#111}
.app{display:flex;min-height:100vh}
.sidebar{width:220px;padding:20px;background:#fff;border-right:1px solid #eef2ff;display:flex;flex-direction:column;gap:12px}
.brand{display:flex;flex-direction:column;gap:6px}
.logo img{
  width: 100px;
  /* font-weight:700;
  color:var(--accent);
  font-size:18px */
}

.logo-small img{
  width: 70px;
}
.tag{font-size:12px;color:var(--muted)}
.nav{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.nav-item{background:transparent;border:0;padding:10px 8px;border-radius:8px;text-align:left;cursor:pointer;color:#233; font-size:14px}
.nav-item.active{background:rgba(10,76,255,0.08);color:var(--accent)}
.sidebar-footer{margin-top:auto;padding-top:8px}

.main{flex:1;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-bottom:1px solid #eef4ff;background:linear-gradient(180deg, rgba(244,246,255,0.4), transparent)}
.topbar .search{width:480px;padding:8px 12px;border-radius:10px;border:1px solid #e6eefc}
.user-pill{background:var(--accent);color:#fff;padding:8px 10px;border-radius:8px;font-weight:600}

.page{display:none;padding:20px}
.page.active{display:block}
.container{max-width:var(--max-width);margin:20px auto;display:flex;flex-direction:column;gap:12px}
h2{margin:0;font-size:18px;color:#111}

.card{background:var(--card);padding:12px;border-radius:var(--radius);box-shadow:0 6px 18px rgba(3,18,59,0.04)}
.small{font-size:13px}
.label{font-size:13px;color:var(--muted);margin-bottom:8px}
.row{display:flex;gap:10px;align-items:center}
.btn{background:var(--accent);color:#fff;padding:8px 12px;border-radius:1000px;border:0;cursor:pointer}
.btn.small{padding:6px 10px; border-radius: 100px;}
.btn.secondary{background:#f1f5ff;color:var(--accent);border:1px solid rgba(10,76,255,0.08); border-radius: 100px;}
.btn-link{background:none;border:0;color:var(--accent);cursor:pointer;padding:0}

.assign-card{display:flex;flex-direction:column;gap:8px}
#patientSearch{padding:10px;border-radius:8px;border:1px solid #eef4ff;width:100%}
.suggestions{border:1px solid #eef4ff;border-radius:8px;margin-top:6px;background:#fff;overflow:hidden}
.suggestions .item{padding:8px;cursor:pointer;border-bottom:1px solid #f3f6ff}
.suggestions .item:last-child{border-bottom:0}
.patient-details{padding:10px;border-radius:8px;border:1px solid #f1f5ff;background:#fbfdff}

.upload-card{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.dropzone{border:2px dashed #c2c2c2;border-radius:8px;padding:28px;text-align:center;background:linear-gradient(180deg,#fff,#fbfdff)}
.drop-inner .big{font-weight:700;color:#123}
.muted{color:var(--muted);font-size:13px}

.upload-row{display:flex;gap:12px;margin-top:12px;}
.preview-col{width:260px;display:flex;flex-direction:column;gap:10px}
.text-col{flex:1;display:flex;flex-direction:column;gap:10px}
.thumb{height:160px;border-radius:8px;border:1px solid #eef4ff;display:flex;align-items:center;justify-content:center;background:#fbfdff;padding:8px;overflow:hidden}
.progress{height:10px;background:#eef6ff;border-radius:8px;overflow:hidden;margin-top:6px}
.progress > div{height:100%;width:0;background:var(--accent);transition:width .2s}

.text-area{width:100%;height:180px;padding:10px;border-radius:8px;border:1px solid #eef4ff;resize:vertical;font-family:monospace;font-size:13px}
.meta-row{display:flex;gap:12px;margin-top:12px;align-items:flex-end}
.meta.small{flex:1;min-width:160px}
.actions-right{display:flex;align-items:center;justify-content:flex-end}

.list{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.list .row{display:flex;justify-content:space-between;align-items:center;padding:8px;border-radius:8px;border:1px solid #f1f5ff}

.hidden{display:none}

/* small screens */
@media(max-width:900px){
  .sidebar{display:none}
  .topbar .search{width:200px}
  .upload-row{flex-direction:column}
  .preview-col{width:100%}
  .text-area{height:140px}
}


.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 5000;
}

.modal.hidden { display: none; }

.modalContent {
  background: #fff;
  width: 80%;
  height: 80%;
  padding: 20px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
}

#reviewText {
  flex: 1;
  width: 100%;
  resize: none;
  padding: 12px;
  border: 1px solid #ddd;
  font-size: 16px;
  line-height: 1.4;
  font-family: monospace;
}

.modalActions {
  margin-top: 10px;
  display: flex;
  gap: 12px;
}


/* Modal system */
/* .modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
} */

.modal.hidden {
  display: none;
}

.modal-box {
  background: #fff;
  padding: 22px;
  width: 400px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.modal-box h2 {
  margin-top: 0;
  margin-bottom: 12px;
}

.modal-box label {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 600;
}

.modal-box input,
.modal-box select,
.modal-box textarea {
  width: 100%;
  padding: 8px;
  margin-top: 4px;
  border-radius: 4px;
  border: 1px solid #ccc;
  font-size: 14px;
}

.modal-actions {
  margin-top: 16px;
  text-align: right;
}

.modal-actions button {
  margin-left: 6px;
}


.patient-item { margin-bottom: 10px; border: 1px solid #eef3ff; padding: 12px; border-radius:6px; background: #fff; }
.patient-expanded { padding: 12px; background:#fbfdff; border-radius:6px; margin-top:8px; }
.patient-expanded.hidden { display:none; }
.timeline-group { margin-bottom: 8px; }

button{
  background-color: white;
  border: 2px solid #00be85;
  color: #00be85;
}


.modal-content {
  background: #fff;
  width: 80%;
  height: 80%;
  padding: 20px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
}

.modal-content label {
  display: block;
  margin-top: 20px;
  font-size: 14px;
  font-weight:bold;
  color: #1f1f1f;
}

.modal-content input,
.modal-content select,
.modal-content textarea {
  width: 100%;
  padding: 8px;
  margin-top: 4px;
  border-radius: 4px;
  border: 1px solid #ccc;
  font-size: 14px;
}