:root{
  --bg:#0b1020; --card:#111735; --muted:#8ea0d0; --text:#e8ecff;
  --accent:#7aa1ff; --accent-2:#50e3c2; --danger:#ff6b6b; --border:#223066;
}
*{box-sizing:border-box}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;background:linear-gradient(180deg,#0b1020,#0b0f1a 60%);color:var(--text)}
.hdr{border-bottom:1px solid var(--border);background:rgba(17,23,53,.6);backdrop-filter:blur(6px)}
.hdr .inner{max-width:1200px;margin:0 auto;padding:16px}
.hdr h1{margin:0;font-size:18px}
.api-base{color:var(--muted);font-size:12px;margin-top:4px}
.container{max-width:1200px;margin:20px auto;padding:0 12px}
.tabs{display:flex;gap:8px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.tab-btn{appearance:none;border:1px solid var(--border);border-bottom:none;background:#0f1633;color:var(--muted);
  padding:10px 16px;border-top-left-radius:12px;border-top-right-radius:12px;cursor:pointer;font-weight:600;font-size:14px}
.tab-btn.active{background:var(--card);color:var(--text)}
.panel{background:var(--card);border:1px solid var(--border);border-radius:12px;border-top-left-radius:0;padding:16px}
.grid{display:grid;grid-template-columns:1fr;gap:16px;align-items:start}
@media (max-width:980px){.grid{display:grid;grid-template-columns:1fr;gap:16px;align-items:start}}
.card{background:#121a3e;border:1px solid var(--border);border-radius:16px;padding:16px}
.card h2{margin:0 0 10px;font-size:16px}
.muted{color:var(--muted);font-size:12px}
label{display:block;font-size:12px;margin:6px 0;color:var(--muted)}
input[type="text"],input[type="number"],input[type="date"],input[type="time"],input[type="datetime-local"],textarea,select{
  width:100%;padding:10px 12px;border-radius:10px;background:#0b1130;color:var(--text);border:1px solid var(--border);outline:none}
textarea{resize:vertical;min-height:70px}
input[disabled]{opacity:.7;cursor:not-allowed}
.row{display:grid;grid-template-columns:1fr;gap:10px}
.row-3{display:grid;grid-template-columns:1fr;gap:10px}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
button{padding:10px 14px;border-radius:10px;border:1px solid var(--border);background:#132055;color:var(--text);
  cursor:pointer;font-weight:600;font-size:14px}
button:hover{filter:brightness(1.05)}
button.primary{background:linear-gradient(180deg,var(--accent),#628cff);color:#081028;border-color:#5f86ff}
button.secondary{background:#14245f}
button.danger{background:#3a1217;border-color:#5a1f26;color:#ffd7dc}
button.ghost{background:transparent;border-style:dashed}
button:disabled{opacity:.5;cursor:not-allowed}
table{width:100%;border-collapse:collapse}
th,td{border-bottom:1px solid var(--border);padding:8px 8px;font-size:13px}
th{text-align:left;color:var(--muted);font-weight:600;position:sticky;top:0;background:#111735}
tbody tr{cursor:pointer}
tbody tr:hover{background:rgba(122,161,255,.08)}
.hint{color:var(--muted);font-size:11px;margin-top:4px}
.kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;background:#0b0f22;padding:2px 6px;border-radius:6px;border:1px solid var(--border)}

/* Status bar */
.status{position:fixed;left:16px;bottom:16px;background:#0e1535;border:1px solid var(--border);padding:10px 12px;border-radius:10px;font-size:13px}
.status.ok{border-color:#295f3a}
.status.warn{border-color:#6b5f29}
.status.err{border-color:#6b2929}

/* Toasts */
.toast-container{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;z-index:9999}
.toast{min-width:220px;max-width:360px;background:#111735;border:1px solid var(--border);color:var(--text);
  padding:10px 12px;border-radius:12px;box-shadow:0 6px 24px rgba(0,0,0,.3);opacity:0;transform:translateY(8px);
  transition:opacity .15s ease,transform .15s ease;font-size:14px}
.toast.ok{border-color:#295f3a}
.toast.warn{border-color:#6b5f29}
.toast.err{border-color:#6b2929}
.toast.show{opacity:1;transform:translateY(0)}

/* Modal (confirm) */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;z-index:9998;opacity:0;transition:opacity .15s ease}
.modal{background:#121a3e;border:1px solid var(--border);border-radius:14px;padding:16px;max-width:420px;width:calc(100% - 40px);box-shadow:0 10px 40px rgba(0,0,0,.45);transform:translateY(8px);transition:transform .15s ease}
.modal h3{margin:0 0 4px;font-size:16px}
.modal p{margin:0 0 12px;color:var(--muted)}
.modal-actions{display:flex;gap:8px;justify-content:flex-end}
.modal-backdrop.show{opacity:1}
.modal-backdrop.show .modal{transform:translateY(0)}


/* Force datetime columns to expand full width and never wrap
   (but NOT on .wrap tables) */
table.data:not(.wrap) td:nth-child(1),
table.data:not(.wrap) th:nth-child(1) {
  white-space: nowrap;
}

/* Keep the Clone button on one line */
button[data-clone] { 
  white-space: nowrap;
  display: inline-flex;     /* keeps text+arrow aligned nicely */
  align-items: center;
}

/* Optional: prevent wrapping in the actions cell */
table.data td:last-child { 
  white-space: nowrap;
  width: 1%;
  white-space-collapse: preserve; /* harmless in most browsers */
}


/* Horizontal, top-aligned field layout for the editor form */
.form-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:12px 16px;
  align-items:start;
  margin-top:8px;
}

/* --- Responsive wrapping for selected forms (blood-pressure, weight-chart, outing-meals) --- */
.form-grid.wrap{ grid-template-columns: 1fr; }
.form-grid.wrap label{ white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
.form-grid.wrap input[type="text"],
.form-grid.wrap input[type="number"],
.form-grid.wrap input[type="date"],
.form-grid.wrap input[type="time"],
.form-grid.wrap input[type="datetime-local"],
.form-grid.wrap textarea,
.form-grid.wrap select{ min-width:0; width:100%; }
.form-grid.wrap .row, .form-grid.wrap .row-3{display:grid;grid-template-columns:1fr;gap:10px}
@media (max-width: 480px){
  .form-grid.wrap{ grid-template-columns: 1fr; }
  .form-grid.wrap .row, .form-grid.wrap .row-3{display:grid;grid-template-columns:1fr;gap:10px}
}

.form-grid > div label{
  margin:0 0 6px;
}
.form-grid input[type="text"],
.form-grid input[type="number"],
.form-grid input[type="date"],
.form-grid input[type="time"],
.form-grid input[type="datetime-local"],
.form-grid textarea,
.form-grid select{
  width:100%;
}


/* --- Mobile responsiveness (≤480px) --- */
@media (max-width: 480px){
  .hdr .inner{padding:12px}
  .hdr h1{font-size:16px}
  .container{padding:0 8px}
  .tab-btn{padding:8px 10px; font-size:13px}
  .panel{padding:12px}
  .card{padding:12px}
  .card h2{font-size:14px}
  label{font-size:11px}
  input[type="text"], input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"], textarea, select{
    padding:8px 10px; font-size:14px; min-height:36px
  }
  .actions{gap:6px}
  button{padding:8px 10px; font-size:13px}
  th, td{padding:6px 6px; font-size:12px}
  table{display:block; overflow-x:auto; -webkit-overflow-scrolling:touch}

/* --- Responsive wrapping for selected tables (blood-pressure, weight-chart, outing-meals) --- */
table.data.wrap{ table-layout: fixed; width:100%; }
table.data.wrap th, table.data.wrap td{ white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
table.data.wrap td:nth-child(1),
table.data.wrap th:nth-child(1){ white-space: normal; } /* override global nowrap on first column */
  table.data.wrap th, table.data.wrap td{ font-size: 12px; padding:6px 6px; }

}


/* Smaller Clone buttons */
button[data-clone]{
  padding:6px 8px;  /* ~25% smaller vs base 10px 14px */
  font-size:12px;
  line-height:1.2;
}


/* Shake animation for incorrect PIN */
@keyframes shake {
  0% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
  100% { transform: translateX(0); }
}
.shake {
  animation: shake 0.4s ease-in-out;
}


/* Wrong-PIN shake animation */
@keyframes ls-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}
.shake {
  animation: ls-shake 0.45s ease;
}

/* LS input max-width guard */
.form-grid input[type="text"],
.form-grid input[type="number"],
.form-grid input[type="date"],
.form-grid input[type="time"],
.form-grid input[type="datetime-local"],
.form-grid textarea,
.form-grid select{
  max-width: 100%;
  min-width: 0;
}





/* Ensure form fields can shrink independently of tables/reports */
.form-grid > *, 
.form-grid .row > *, 
.form-grid .row-3 > * {
  min-width: 0;      /* allow grid items to shrink */
  max-width: 100%;   /* never exceed container */
}



/* Comments textarea: always fill available width and shrink on small screens */
.form-grid textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Center numeric/stat columns in the Weight Chart report table */
#table-weight-chart th:nth-child(2),
#table-weight-chart th:nth-child(3),
#table-weight-chart th:nth-child(4),
#table-weight-chart th:nth-child(5),
#table-weight-chart th:nth-child(6),
#table-weight-chart th:nth-child(7),
#table-weight-chart th:nth-child(8),
#table-weight-chart td:nth-child(2),
#table-weight-chart td:nth-child(3),
#table-weight-chart td:nth-child(4),
#table-weight-chart td:nth-child(5),
#table-weight-chart td:nth-child(6),
#table-weight-chart td:nth-child(7),
#table-weight-chart td:nth-child(8) {
  text-align: center;
  vertical-align: middle;
}

/* Center Arm, Systolic, Diastolic, and Pulse columns in Blood Pressure report */
#table-blood-pressure th:nth-child(2),
#table-blood-pressure th:nth-child(3),
#table-blood-pressure th:nth-child(4),
#table-blood-pressure th:nth-child(5),
#table-blood-pressure td:nth-child(2),
#table-blood-pressure td:nth-child(3),
#table-blood-pressure td:nth-child(4),
#table-blood-pressure td:nth-child(5) {
  text-align: center;
  vertical-align: middle;
}