:root{
  --teal-950:#08221f;
  --teal-900:#0d3733;
  --teal-800:#12504a;
  --teal-700:#186960;
  --teal-600:#1f8477;
  --paper:#f4f5f2;
  --paper-card:#ffffff;
  --line:#dde1dc;
  --ink:#141c1b;
  --ink-soft:#4c5854;
  --brick:#a5332c;
  --brick-soft:#f3e2e0;
  --gold:#b9863f;
  --ok:#2f6d4f;
  --radius:10px;
  --shadow:0 1px 2px rgba(15,30,27,.06), 0 6px 20px -8px rgba(15,30,27,.15);
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:'IBM Plex Sans',-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}

#app{display:flex; min-height:100vh;}

.sidebar{
  width:280px; flex:0 0 280px;
  background:linear-gradient(185deg,var(--teal-950),var(--teal-900) 60%,var(--teal-800));
  color:#eaf3f1;
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh;
}
.brand{padding:22px 20px 16px; border-bottom:1px solid rgba(255,255,255,.1);}
.brand .mark{display:flex; align-items:center; gap:10px;}
.brand h1{font-size:15.5px; font-weight:700; margin:0; letter-spacing:.2px; line-height:1.25; color:#fff;}
.brand p{margin:4px 0 0; font-size:11.5px; color:#9fc4bb; line-height:1.4;}

.sidebar-actions{padding:14px 16px 6px;}
.btn-new{
  width:100%; display:flex; align-items:center; justify-content:center; gap:8px;
  background:var(--brick); color:#fff; border:none; border-radius:8px;
  padding:10px 12px; font-size:13.5px; font-weight:600; cursor:pointer; text-decoration:none;
}
.btn-new:hover{background:#8f2c26;}

.search-wrap{padding:10px 16px;}
.search-wrap form{display:flex; gap:6px;}
.search-wrap input{
  flex:1; padding:8px 10px; border-radius:7px; border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06); color:#eaf3f1; font-size:13px; outline:none;
}
.search-wrap input::placeholder{color:#82a49c;}
.search-wrap button{border:none; background:rgba(255,255,255,.14); color:#eaf3f1; border-radius:7px; padding:0 10px; cursor:pointer;}

.emp-list{flex:1; overflow-y:auto; padding:4px 10px 12px;}
.emp-item{
  display:flex; align-items:center; gap:10px; padding:9px 8px; border-radius:8px;
  margin-bottom:2px; border:1px solid transparent; text-decoration:none; color:inherit;
}
.emp-item:hover{background:rgba(255,255,255,.06);}
.emp-item.active{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.18);}
.emp-avatar{
  width:34px; height:34px; border-radius:50%; background:var(--teal-700);
  display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:700;
  color:#fff; flex:0 0 auto; overflow:hidden; object-fit:cover;
}
img.emp-avatar{background:#0a2b28;}
.emp-meta{min-width:0;}
.emp-meta .n{font-size:13px; font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.emp-meta .d{font-size:11.5px; color:#9fc4bb; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.emp-empty{padding:20px 10px; font-size:12.5px; color:#82a49c; text-align:center; line-height:1.6;}

.sidebar-footer{padding:12px 20px; border-top:1px solid rgba(255,255,255,.1); font-size:11.5px; color:#82a49c;}

.main{flex:1; min-width:0; display:flex; flex-direction:column;}
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 28px; border-bottom:1px solid var(--line); background:var(--paper-card);
}
.topbar .who{display:flex; align-items:center; gap:12px; min-width:0;}
.topbar .who .avatar{
  width:44px; height:44px; border-radius:12px; background:var(--teal-700); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; overflow:hidden;
}
.topbar .who .avatar img{width:100%; height:100%; object-fit:cover;}
.topbar .who h2{margin:0; font-size:17px; font-weight:700;}
.topbar .who .sub{font-size:12.5px; color:var(--ink-soft); margin-top:1px;}
.topbar .actions{display:flex; gap:8px; flex:0 0 auto;}

.tabbar{display:flex; gap:4px; padding:10px 28px 0; background:var(--paper-card); border-bottom:1px solid var(--line);}
.tabbar a{
  border:none; background:none; padding:10px 16px; font-size:13.5px; font-weight:600;
  color:var(--ink-soft); cursor:pointer; border-bottom:2.5px solid transparent; margin-bottom:-1px; text-decoration:none;
}
.tabbar a.active{color:var(--teal-800); border-color:var(--brick);}

.content{flex:1; overflow-y:auto; padding:24px 28px 60px;}

.btn{
  border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:8px;
  padding:9px 14px; font-size:13px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  text-decoration:none;
}
.btn:hover{background:#f2f4f2; border-color:#c8d0cb;}
.btn.primary{background:var(--teal-800); color:#fff; border-color:var(--teal-800);}
.btn.primary:hover{background:var(--teal-700);}
.btn.danger{color:var(--brick); border-color:var(--brick-soft);}
.btn.danger:hover{background:var(--brick-soft);}

.welcome{max-width:640px; margin:40px auto; text-align:center;}
.welcome .stat{
  display:inline-flex; gap:28px; margin:26px 0 10px; padding:18px 26px;
  background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow);
}
.welcome .stat div{text-align:left;}
.welcome .stat .num{font-family:'Source Serif 4',Georgia,serif; font-size:30px; font-weight:700; color:var(--teal-800);}
.welcome .stat .lbl{font-size:12px; color:var(--ink-soft);}
.welcome h2{font-size:22px; margin-bottom:6px;}
.welcome p{color:var(--ink-soft); font-size:14px; line-height:1.6;}

.section{background:#fff; border:1px solid var(--line); border-radius:var(--radius); margin-bottom:18px; box-shadow:var(--shadow); overflow:hidden;}
.section > summary{padding:14px 18px; font-weight:700; font-size:14.5px; cursor:pointer; background:#fbfbf9; border-bottom:1px solid var(--line); list-style:none;}
.section > summary::-webkit-details-marker{display:none;}
.section > summary::after{content:'▾'; float:right; color:var(--ink-soft); font-size:12px;}
.sec-body{padding:18px;}
.sec-note{font-size:12px; color:var(--ink-soft); margin:-6px 0 14px; line-height:1.5;}

.grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 16px;}
@media (max-width:760px){.grid{grid-template-columns:1fr;}}
.field{display:flex; flex-direction:column; gap:6px;}
.field.full{grid-column:1/-1;}
.field label{font-size:12.5px; font-weight:600; color:var(--ink-soft);}
.field label .req{color:var(--brick); margin-left:2px;}
.field input[type=text], .field input[type=email], .field input[type=tel],
.field input[type=date], .field select, .field textarea{
  border:1px solid #cfd6d1; border-radius:7px; padding:9px 10px; font-size:13.5px;
  font-family:inherit; color:var(--ink); background:#fff; outline:none; width:100%;
}
.field textarea{resize:vertical; min-height:64px;}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--teal-700); box-shadow:0 0 0 3px rgba(24,105,96,.12);}
.field input.err, .field textarea.err, .field select.err{border-color:var(--brick); box-shadow:0 0 0 3px rgba(165,51,44,.1);}
.field .msg{font-size:11.5px; color:var(--brick);}
.checkline{display:flex; align-items:center; gap:8px; font-size:13.5px; padding:6px 0;}
.checkline input{width:16px; height:16px; accent-color:var(--teal-700);}

.photo-row{display:flex; align-items:center; gap:16px; margin-bottom:16px;}
.photo-box{width:88px; height:88px; border-radius:12px; border:2px dashed #c8d0cb; background:#f7f8f6; display:flex; align-items:center; justify-content:center; overflow:hidden; flex:0 0 auto;}
.photo-box img{width:100%; height:100%; object-fit:cover;}

.ref-block{border:1px solid var(--line); border-radius:8px; padding:14px; margin-bottom:14px; background:#fcfcfb;}
.ref-block h4{margin:0 0 12px; font-size:13px; font-weight:700; color:var(--teal-800);}

.health-table{width:100%; border-collapse:collapse; margin-bottom:14px; font-size:13px;}
.health-table th{text-align:left; font-size:11.5px; color:var(--ink-soft); font-weight:600; padding:6px 8px; border-bottom:1px solid var(--line);}
.health-table td{padding:7px 8px; border-bottom:1px solid #eef0ec;}
.health-table select{padding:5px 8px; border-radius:6px; border:1px solid #cfd6d1; font-size:12.5px;}
.rows-table{width:100%; border-collapse:collapse; margin-bottom:10px;}
.rows-table th{font-size:11px; text-align:left; color:var(--ink-soft); padding:4px 6px;}
.rows-table td{padding:4px 6px;}
.rows-table input{width:100%; padding:6px 8px; border:1px solid #cfd6d1; border-radius:6px; font-size:12.5px;}
.rows-table .rm{background:none; border:none; color:var(--brick); cursor:pointer; font-size:16px; line-height:1;}
.add-row-btn{font-size:12px; color:var(--teal-800); background:none; border:1px dashed var(--teal-700); border-radius:6px; padding:6px 10px; cursor:pointer;}

.orient-group{margin-bottom:14px;}
.orient-group h5{margin:0 0 8px; font-size:12px; color:var(--teal-800); font-weight:700;}
.orient-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:2px 14px;}
@media (max-width:760px){.orient-grid{grid-template-columns:1fr;}}

.save-bar{position:sticky; bottom:0; background:linear-gradient(180deg, rgba(244,245,242,0), var(--paper) 30%); padding:14px 0 4px; display:flex; justify-content:flex-end; gap:10px;}

.doc-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px;}
.doc-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:10px;}
.doc-card .tag{font-size:10.5px; font-weight:700; letter-spacing:.3px; color:var(--gold); text-transform:uppercase;}
.doc-card h3{margin:0; font-size:14.5px; font-weight:700; line-height:1.35;}
.doc-card p{margin:0; font-size:12px; color:var(--ink-soft); line-height:1.5; flex:1;}
.doc-card .doc-icon{width:34px;height:34px;border-radius:8px;background:var(--teal-900);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;font-family:'Source Serif 4',Georgia,serif;}

.alert{display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:8px; background:#fdf2f1; border:1px solid #f1cdc9; color:#7d2b25; font-size:13px; margin-bottom:16px;}
.alert.ok{background:#e5f3ea; border-color:#bfe3cc; color:#245c3b;}

/* -------- Printable document styling (also used inline on documents.php) ------- */
.doc-page{
  width:210mm; min-height:296mm; margin:0 auto 18px; background:#fff; padding:16mm 16mm 14mm;
  font-family:'Source Serif 4',Georgia,serif; color:#1a1a1a; box-shadow:var(--shadow); position:relative;
}
.doc-letterhead{text-align:center; border-bottom:3px solid var(--brick); padding-bottom:10px; margin-bottom:16px;}
.doc-letterhead h1{margin:0; font-size:20px; color:var(--brick); letter-spacing:.2px;}
.doc-letterhead h2{margin:2px 0 0; font-size:20px; color:var(--brick);}
.doc-letterhead p{margin:4px 0 0; font-size:11.5px; color:#333; font-style:italic;}
.doc-appendix{font-size:11px; text-align:right; color:#555; margin-bottom:2px;}
.doc-title{text-align:center; font-size:16px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; margin:6px 0 18px;}
.doc-body{font-size:12.5px; line-height:1.7; margin:0 0 10px; text-align:justify;}
.doc-photo-slot{position:absolute; top:16mm; right:16mm; width:26mm; height:32mm; border:1px solid #999; display:flex; align-items:center; justify-content:center; overflow:hidden; font-size:9px; color:#999; text-align:center;}
.doc-photo-slot img{width:100%; height:100%; object-fit:cover;}
table.doc-table{width:100%; border-collapse:collapse; margin:10px 0 16px; font-size:12px;}
table.doc-table th, table.doc-table td{border:1px solid #999; padding:6px 8px; text-align:left; vertical-align:top;}
table.doc-table th{background:#f1efe9; font-weight:700;}
.doc-line{display:flex; gap:6px; margin:9px 0; font-size:12.5px; align-items:flex-end;}
.doc-line .lab{font-weight:600; white-space:nowrap;}
.doc-line .val{flex:1; border-bottom:1px solid #333; padding-bottom:2px; min-height:15px;}
.doc-grid2{display:grid; grid-template-columns:1fr 1fr; gap:4px 24px; margin:10px 0 16px;}
.doc-sig-row{display:flex; justify-content:space-between; margin-top:46px; gap:30px;}
.doc-sig{flex:1; border-top:1px solid #333; padding-top:5px; font-size:11.5px; text-align:center;}
.doc-guideline{font-size:12px; margin:0 0 9px; line-height:1.6;}
.doc-guideline b{color:var(--brick);}
.doc-checkbox{display:inline-block; width:11px; height:11px; border:1.3px solid #333; margin-right:5px; position:relative; top:1px;}
.doc-checkbox.on::after{content:'✓'; position:absolute; left:0.5px; top:-4px; font-size:10px; font-weight:700;}
.small-note{font-size:10.5px; color:#555; font-style:italic; margin-top:14px;}

@media print{
  @page{ size:A4; margin:0; }
  body{background:#fff;}
  .no-print{display:none !important;}
  .doc-page{box-shadow:none; margin:0; page-break-after:always;}
  .doc-page:last-child{page-break-after:auto;}
}