:root{--primary:#1769AA;--dark:#123B63;--light:#EAF4FC;--bg:#F5F8FC;--text:#263445;--success:#16A36A;--warning:#E8A12A;--danger:#DC4C4C;--border:#E1E9F2;--sidebar-w:260px;--bs-primary:#1769AA;--bs-primary-rgb:23,105,170}
*{box-sizing:border-box}
body{font-family:'Segoe UI','Nirmala UI',system-ui,-apple-system,Roboto,'Noto Sans Tamil','Helvetica Neue',Arial,sans-serif;background:var(--bg);color:var(--text);font-size:.925rem;overflow-x:hidden}
.btn-primary{--bs-btn-bg:var(--primary);--bs-btn-border-color:var(--primary);--bs-btn-hover-bg:var(--dark);--bs-btn-hover-border-color:var(--dark);--bs-btn-active-bg:var(--dark);--bs-btn-disabled-bg:var(--primary);--bs-btn-disabled-border-color:var(--primary)}
.btn-outline-primary{--bs-btn-color:var(--primary);--bs-btn-border-color:var(--primary);--bs-btn-hover-bg:var(--primary);--bs-btn-hover-border-color:var(--primary)}
.btn-success{--bs-btn-bg:var(--success);--bs-btn-border-color:var(--success)}
.btn-danger{--bs-btn-bg:var(--danger);--bs-btn-border-color:var(--danger)}
.btn{border-radius:8px;font-weight:500}
.form-control,.form-select{border-radius:8px;border-color:#cfdbe8}
.input-group>.form-control{border-radius:0 8px 8px 0}.input-group>.btn{border-radius:0 8px 8px 0}
.form-control:focus,.form-select:focus{border-color:var(--primary);box-shadow:0 0 0 .2rem rgba(23,105,170,.15)}
.form-label{font-weight:500;font-size:.85rem}
.app-sidebar{background:var(--dark);color:#fff;width:var(--sidebar-w)}
@media(min-width:992px){.app-sidebar{position:fixed;inset:0 auto 0 0;display:flex!important;flex-direction:column;z-index:1030}.app-main{margin-left:var(--sidebar-w)}}
.app-main{min-height:100vh;display:flex;flex-direction:column}
.sidebar-brand{display:flex;align-items:center;gap:.75rem;padding:1.1rem 1.25rem;border-bottom:1px solid rgba(255,255,255,.08)}
.brand-icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;background:var(--primary);color:#fff;font-size:1.3rem}
.brand-icon.big{width:64px;height:64px;font-size:2rem;background:rgba(255,255,255,.15)}
.brand-name{font-weight:700;line-height:1.1}.brand-sub{font-size:.72rem;opacity:.7}
.sidebar-nav{padding:.75rem;overflow-y:auto;flex:1}
.nav-item-link{display:flex;align-items:center;gap:.75rem;padding:.65rem .85rem;margin-bottom:2px;color:rgba(255,255,255,.78);text-decoration:none;border-radius:8px;font-weight:500;transition:.15s}
.nav-item-link:hover{background:rgba(255,255,255,.08);color:#fff}
.nav-item-link.active{background:var(--primary);color:#fff}
.nav-item-link i{font-size:1.05rem}
.nav-item-link.disabled-soon{opacity:.5;cursor:not-allowed}.soon{margin-left:auto;font-size:.65rem;background:rgba(255,255,255,.15);padding:1px 6px;border-radius:10px}
.logout-link{margin-top:.75rem;border-top:1px solid rgba(255,255,255,.08);padding-top:.9rem}
.app-navbar{display:flex;align-items:center;background:#fff;padding:.7rem 1.25rem;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:1020}
.page-title{font-size:1.15rem;font-weight:600;margin:0;color:var(--dark)}
.user-chip{display:flex;align-items:center;gap:.6rem;border:1px solid var(--border);background:#fff;border-radius:30px;padding:.25rem .75rem .25rem .3rem}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--light);color:var(--primary);display:inline-flex;align-items:center;justify-content:center;font-weight:700}
.app-content{flex:1;padding:1.5rem}
@media(max-width:575px){.app-content{padding:1rem}}
.app-footer{padding:1rem 1.5rem;font-size:.8rem;color:#7a8896;text-align:center}
.app-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:1.25rem;box-shadow:0 1px 3px rgba(18,59,99,.05)}
.stat-card{display:flex;align-items:center;gap:1rem;background:#fff;border:1px solid var(--border);border-radius:12px;padding:1.1rem;box-shadow:0 1px 3px rgba(18,59,99,.05);height:100%}
.stat-icon{width:48px;height:48px;border-radius:12px;background:var(--light);color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0}
.stat-num{font-size:1.6rem;font-weight:700;color:var(--dark);line-height:1}.stat-label{font-size:.8rem;color:#6b7a8a;margin-top:.25rem}
.login-body{background:#fff}
.login-hero{background:var(--dark);color:#fff;align-items:center;justify-content:center;padding:3rem}
.login-hero h1{font-weight:700}.hero-points li{margin:.6rem 0;opacity:.92}.hero-points i{margin-right:.5rem}
.login-card{width:100%;max-width:400px}
/* ---- Phase 2: dashboard ---- */
.section-title{font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#6b7a8a;margin-bottom:.75rem}
.card-heading{font-weight:600;color:var(--dark);margin-bottom:1rem}
.min-w-0{min-width:0}
a.stat-link{text-decoration:none;color:inherit;transition:box-shadow .15s,border-color .15s,transform .15s}
a.stat-link:hover{border-color:var(--primary);box-shadow:0 4px 14px rgba(23,105,170,.12);transform:translateY(-1px)}
.stat-sub{font-size:.72rem;color:#93a0ad}
.chart-box{position:relative;height:280px}
.chart-empty{display:none;position:absolute;inset:0;align-items:center;justify-content:center;color:#93a0ad;font-size:.85rem;background:var(--bg);border-radius:8px}
.chart-box.is-empty canvas{display:none}.chart-box.is-empty .chart-empty{display:flex}
.recent-list{list-style:none;margin:0;padding:0}
.recent-list li{display:flex;align-items:center;gap:.75rem;padding:.65rem 0;border-bottom:1px solid var(--border)}
.recent-list li:last-child{border-bottom:0}
.ri-icon{width:36px;height:36px;border-radius:10px;background:var(--light);color:var(--primary);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ri-body{flex:1;min-width:0}.ri-title{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ri-sub{font-size:.76rem;color:#7a8896}.ri-right{flex-shrink:0}
@media(max-width:575px){.stat-num{font-size:1.35rem}.stat-card{padding:.85rem;gap:.7rem}.stat-icon{width:40px;height:40px;font-size:1.15rem}.chart-box{height:240px}}
/* ---- Phase 3: tables & details ---- */
.app-table thead th{background:#F0F5FA;color:#4a5a6b;font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;font-weight:600;border-bottom:1px solid var(--border);white-space:nowrap;padding:.8rem 1rem}
.app-table td{padding:.8rem 1rem;border-color:var(--border)}
.app-table tbody tr:hover{background:#F8FBFE}
.app-table th.sortable{cursor:pointer;user-select:none}
.app-table th.sortable::after{content:"\F282";font-family:bootstrap-icons;opacity:.25;margin-left:.35rem;font-size:.7rem}
.app-table th.sortable.asc::after{content:"\F235";opacity:1;color:var(--primary)}
.app-table th.sortable.desc::after{content:"\F229";opacity:1;color:var(--primary)}
.table-foot{border-top:1px solid var(--border)}
.loading-bar{position:absolute;top:10px;right:14px;z-index:2}
.detail-list dt{font-weight:500;color:#6b7a8a;font-size:.85rem}.detail-list dd{margin-bottom:.75rem}
.pagination{--bs-pagination-active-bg:var(--primary);--bs-pagination-active-border-color:var(--primary);--bs-pagination-color:var(--primary)}
/* ---- Phase 4: visitor form ---- */
.form-section{font-size:.8rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--primary);margin:1.25rem 0 .75rem;padding-bottom:.4rem;border-bottom:1px solid var(--border)}
.form-section:first-of-type{margin-top:0}
.disease-box{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.5rem 1rem;padding:.9rem 1rem;border:1px solid #cfdbe8;border-radius:8px;background:#fff}
.disease-box .form-check-input:checked{background-color:var(--primary);border-color:var(--primary)}
/* ---- Phase 5: follow-ups ---- */
.fu-tile{width:100%;text-align:left;background:#fff;border:1px solid var(--border);border-radius:12px;padding:.75rem 1rem;cursor:pointer;transition:.15s}
.fu-tile:hover{border-color:var(--primary)}
.fu-tile.active{border-color:var(--primary);background:var(--light);box-shadow:0 0 0 1px var(--primary) inset}
.fu-tile .n{font-size:1.4rem;font-weight:700;color:var(--dark);line-height:1.1}.fu-tile .l{font-size:.75rem;color:#6b7a8a}
/* ---- Phase 6: reports ---- */
.rep-pills{display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.35rem}
.rep-pill{white-space:nowrap;border:1px solid var(--border);background:#fff;border-radius:20px;padding:.4rem .95rem;font-weight:500;font-size:.85rem;color:var(--text);cursor:pointer;transition:.15s}
.rep-pill:hover{border-color:var(--primary);color:var(--primary)}
.rep-pill.active{background:var(--primary);border-color:var(--primary);color:#fff}

/* ---- Phase 7: sidebar colours ----
   Mobile / tablet (< 992px): off-canvas panel -> brand dark-blue background with white links.
   Desktop (>= 992px): sidebar is permanently open at the side -> white panel with blue links.
   (!important is needed on desktop because Bootstrap's .offcanvas-lg forces a transparent background and auto width there.) */
@media (max-width:991.98px){
  .app-sidebar{background-color:var(--dark)!important;color:#fff}
}
@media (min-width:992px){
  .app-sidebar{width:var(--sidebar-w)!important;background-color:#fff!important;color:var(--primary);border-right:1px solid var(--border)!important}
  .app-sidebar .sidebar-brand{border-bottom:1px solid var(--border)}
  .app-sidebar .brand-name{color:var(--dark)}
  .app-sidebar .brand-sub{color:var(--primary);opacity:.85}
  .app-sidebar .nav-item-link{color:var(--primary)}
  .app-sidebar .nav-item-link:hover{background:var(--light);color:var(--dark)}
  .app-sidebar .nav-item-link.active{background:var(--light);color:var(--primary);font-weight:600;box-shadow:inset 3px 0 0 var(--primary)}
  .app-sidebar .nav-item-link.disabled-soon{opacity:.55}
  .app-sidebar .soon{background:var(--light);color:var(--primary)}
  .app-sidebar .logout-link{border-top:1px solid var(--border)}
}
/* ---- Phase 7: misc ---- */
.pw-wrap{position:relative}
.log-desc{max-width:420px;white-space:normal}