:root {
  --bg:#e6e3e3; --card:#e6e3e3; --text:#0f172a; --muted:#64748b; --border:#a6a6a6; --accent:#111827;
}
* { box-sizing: border-box; }
body { margin:0; font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Arial; background:var(--bg); color:var(--text); }
.container { max-width: 1100px; margin: 24px auto; padding: 0 16px; }
.app-header { display:flex; justify-content:space-between; align-items:flex-end; padding:16px; background:#fff; border-bottom:1px solid var(--border); }
.branding h1 { margin:0; font-size:20px; }
.byline { margin:4px 0 0 0; color:var(--muted); font-size:12px; }
.top-nav a { margin-left:12px; text-decoration:none; color:#0f172a; }
.top-nav .user-chip { margin-right:12px; color:var(--muted); }

.card { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:16px; margin:16px 0; }
.table { width:100%; border-collapse: collapse; }
.table th, .table td { border-bottom:1px solid var(--border); padding:10px; text-align:left; }
.table th { background:#fafafa; }
.btn { display:inline-block; padding:6px 10px; border:1px solid var(--border); border-radius:8px; text-decoration:none; cursor:pointer; }
.btn.danger { border-color:#fca5a5; color:#b91c1c; }
.btn.primary { background:#111827; color:#fff; border-color:#111827; }

.muted { color: var(--muted); font-size: 12px; }
.small { font-size: 12px; }
.list-head { display:flex; align-items:center; justify-content:space-between; }

label { display:block; font-weight:600; margin-bottom:8px; }
input, textarea, select, button { width:100%; padding:10px; border:1px solid var(--border); border-radius:8px; font:inherit; }
input, textarea, select { background:#fff; }
button { cursor:pointer; }
.toolbar { display:flex; gap:10px; margin:12px 0; }
.grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; }
.grid label { font-weight:600; }
.grid input, .grid textarea { margin-top:6px; }

.login-body { background: var(--bg); display:flex; align-items:center; justify-content:center; min-height:100vh; }
.login-card { width: 360px; }

.toast { position:fixed; bottom:16px; left:50%; transform:translateX(-50%); background:#111827; color:#fff; padding:10px 14px; border-radius:999px; opacity:0; pointer-events:none; transition: all .2s ease; }
.toast.show { opacity:1; bottom:24px; }

.code { background:#0f172a; color:#e5e7eb; padding:12px; border-radius:8px; overflow:auto; }


/* --- visual polish additions --- */
.container { max-width: 1280px; }
.card { box-shadow: 0 6px 18px rgba(15, 23, 42, .06); }
.page-head h2 { letter-spacing: .5px; }
.toolbar .btn { border-radius: 10px; }
input, textarea, select { transition: border-color .15s ease, box-shadow .15s ease; }
input:focus, textarea:focus, select:focus { outline: none; border-color: #0000; box-shadow: 0 0 0 3px rgba(148, 163, 184, .2); }
.table th { position: sticky; top: 0; z-index: 1; box-shadow: 0 1px 0 var(--border); }
#hasta-table td input, #hasta-table td select { min-width: 120px; }
#hasta-table td input[type="date"] { min-width: 160px; }
.stat .value { font-variant-numeric: tabular-nums; }
.btn:hover { filter: brightness(0.95); }
.btn.primary:hover { filter: brightness(1.1); }


/* === UI polish v2 === */
.container{max-width:1280px;}
.card{box-shadow:0 8px 24px rgba(15,23,42,.06);}
.page-head h2{letter-spacing:.3px;margin:0 0 8px;}
.toolbar{display:flex;gap:8px;justify-content:flex-end}
.btn{height:36px;padding:0 14px;border-radius:10px;font-size:14px;}
.stats{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px;margin:8px 0;}
.stat{background:#fff;border:1px solid var(--border);border-radius:12px;min-height:68px;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.stat .label{color:var(--muted);font-size:12px;margin-bottom:2px;}
.stat .value{font-size:22px;font-weight:700;}

.grid{gap:14px;}
.grid label{font-size:12.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.3px;}
.grid input,.grid select,.grid textarea{margin-top:6px;margin-bottom:2px;}
input,textarea,select{transition:border-color .15s ease,box-shadow .15s ease;}
input:focus,textarea:focus,select:focus{outline:none;border-color:#94a3b8;box-shadow:0 0 0 3px rgba(148,163,184,.2);}

.table{width:100%;border-collapse:separate;border-spacing:0;}
.table th,.table td{border-bottom:1px solid var(--border);padding:10px;text-align:left;white-space:nowrap;}
.table thead th{position:sticky;top:0;background:#fff;z-index:2;}
#hasta-table td input,#hasta-table td select{min-width:120px}
#hasta-table td input[type="date"]{min-width:160px}

.table-actions{display:flex;justify-content:flex-end;margin-top:8px;}
/* hide 'no file chosen' text footprint by constraining width a bit */
input[type="file"]{max-width:100%;}

@media (max-width:1200px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  .stats{grid-template-columns:repeat(4,minmax(0,1fr));}
}
@media (max-width:900px){
  .grid{grid-template-columns:1fr !important;}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));}
}


/* --- layout widening + patient list scroller --- */
.container { max-width: 1500px; }
.page-head { margin-bottom: 8px; }

.table-scroller table { width: 100%; min-width: 1400px; }
.table-scroller thead th { position: sticky; top: 0; background: #fff; z-index: 2; }
#hasta-table td input, #hasta-table td select { min-width: 120px; }
#hasta-table td input[type="date"] { min-width: 160px; }


/* --- width & list scroller tune --- */
.container { max-width: 1440px; }

.table-scroller { 
  overflow: auto; 
  max-height: 420px; 
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
}

#hasta-table { min-width: 1700px; } /* keep columns readable; horizontal scroll inside list */
#hasta-table thead th { position: sticky; top: 0; background: #fff; z-index: 2; }

/* compact header cells and better spacing */
#hasta-table th, #hasta-table td { white-space: nowrap; padding: 10px; }
#hasta-table td input, #hasta-table td select { min-width: 130px; }
#hasta-table td input[type="date"] { min-width: 160px; }


/* fix: table scroller width and behavior */
.table-wrap { width: 100%; }

.table-scroller { width: 100%; }
#hasta-table { width: max-content; min-width: 100%; }


/* list layout: wrapper + inner scroller */
.table-wrap { width: 100%; margin-top: 8px; }
.table-wrap .table-scroller { max-height: 420px; overflow: auto; border:1px solid var(--border); border-radius:10px; background:#fff; }
.table-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:8px; }
#hasta-table { width:max-content; min-width:100%; }
#hasta-table th, #hasta-table td { white-space:nowrap; }


/* patient list layout */
.table-wrap { width: 100%; }
.table-wrap .table-scroller { width: 100%; max-height: 420px; overflow: auto; border: 1px solid var(--border); border-radius: 10px; background:#fff; }
.table-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:8px; }
#hasta-table { width: max-content; min-width: 100%; }
#hasta-table thead th { position: sticky; top:0; z-index:1; background:#fff; }
#hasta-table th, #hasta-table td { white-space: nowrap; padding:10px; }
#hasta-table td input, #hasta-table td select { min-width: 130px; }
#hasta-table td input[type="date"] { min-width: 160px; }

/* stretch patient list across grid */
.table-wrap{grid-column:1/-1;}

/* ana liste inline edit */
#pages-table input.cell { width: 100%; }
#pages-table td.actions { text-align:right; }

/* ana liste: editables */
#pages-table input.cell, #pages-table select.cell { width: 100%; }
#pages-table td.actions { text-align: right; }


/* --- Headings & chips refresh --- */
:root{
  --ink:#0f172a;
  --muted:#64748b;
  --ring:#e2e8f0;
  --bg-soft:#f8fafc;
}
.page-header{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin-bottom:14px;
}
.page-title{
  font-size:34px; line-height:1.1; font-weight:800;
  letter-spacing:.5px; color:var(--ink); margin:0 12px 0 0;
}
.chip-link{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:999px;
  border:1px solid var(--ring); color:var(--muted);
  text-decoration:none; background:#fff;
}
.chip-link:hover{ background:var(--bg-soft); color:var(--ink); }
.btn{ border:1px solid var(--ring); background:#fff; color:var(--ink);
  padding:.55rem .8rem; border-radius:10px; }
.btn:hover{ background:var(--bg-soft); }
.btn-dark{ background:var(--ink); color:#fff; border-color:var(--ink); }
.btn-dark:hover{ filter:brightness(1.05); }
/* --- end --- */


/* --- admin/users tweaks --- */
.page-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.btn{ font-size:14px; line-height:1; white-space:nowrap; padding:.5rem .7rem; }
.chip-link{ white-space:nowrap; }
.page-title{ font-size:32px; font-weight:800; letter-spacing:.3px; }
.card{ background:#fff; border:1px solid var(--ring); border-radius:16px; padding:16px; }
.table{ width:100%; border-collapse:separate; border-spacing:0; }
.table th, .table td{ padding:10px 12px; border-bottom:1px solid var(--ring); text-align:left; }
.table th{ font-weight:700; color:var(--ink); background:var(--bg-soft); }
.table tr:last-child td{ border-bottom:none; }
.badge{ display:inline-block; padding:4px 8px; border-radius:999px; border:1px solid var(--ring); color:var(--muted); background:#fff; }
.input, .select{ width:100%; border:1px solid var(--ring); border-radius:10px; padding:.5rem .6rem; background:#fff; }
.actions{ display:flex; gap:8px; }
.btn-danger{ background:#fee2e2; border-color:#fecaca; color:#b91c1c; }
.btn-danger:hover{ filter:brightness(0.98); }


/* --- admin users table alignment fix --- */
.table { table-layout: fixed; }
.table th:last-child, .table td:last-child{ width:120px; text-align:right; }
.table td.actions{ display:flex; gap:8px; justify-content:flex-end; }
.table td .btn{ min-width:64px; }


/* ==== Strong dark overrides to prevent white patches ==== */
[data-theme="dark"] .app-header,
[data-theme="dark"] .card,
[data-theme="dark"] .stat,
[data-theme="dark"] .toolbar,
[data-theme="dark"] .table,
[data-theme="dark"] .table th,
[data-theme="dark"] .table td,
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background-color: #1f232b !important;
  color: #e6e6e6 !important;
  border-color: #3a3f47 !important;
}

[data-theme="dark"] .table th { background-color: #262a33 !important; }
[data-theme="dark"] .table tr:nth-child(odd) td { background-color: #21252c !important; }
[data-theme="dark"] label,
[data-theme="dark"] .byline,
[data-theme="dark"] .muted { color: #b7bec8 !important; }

/* Buttons */
[data-theme="dark"] .btn {
  background: #2b3038 !important;
  color: #f2f2f2 !important;
  border-color: #3a3f47 !important;
}
[data-theme="dark"] .btn.primary { background:#3a4361 !important; border-color:#3a4361 !important; }

/* Inputs focus */
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
  outline: 2px solid #556080 !important;
  outline-offset: 0;
}

/* Table scrollbar track */
[data-theme="dark"] ::-webkit-scrollbar-track { background: #1c1f25 !important; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #3a3f47 !important; }