:root{
  --green-950:#062d22;--green-900:#073c2c;--green-800:#0a533b;--green-700:#0b6a48;
  --green-600:#0f7f56;--green-500:#14a36e;--mint:#eaf7f0;--lime:#dff4db;
  --cream:#f7f8f4;--surface:#ffffff;--ink:#1d2a24;--muted:#718078;--line:#e5ebe7;
  --shadow:0 8px 24px rgba(6,45,34,.07)
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--cream);color:var(--ink)}
body{font-size:14px}
a{text-decoration:none}
.app-shell{min-height:100vh;display:flex}
.sidebar{width:248px;background:linear-gradient(180deg,var(--green-950),var(--green-800));position:fixed;left:0;top:0;bottom:0;padding:20px 14px;color:#fff;z-index:1000;display:flex;flex-direction:column;box-shadow:10px 0 30px rgba(6,45,34,.08)}
.brand{display:flex;align-items:center;gap:12px;padding:4px 8px 22px}
.brand-mark{width:44px;height:44px;border-radius:14px;background:#b7e777;color:var(--green-950);display:grid;place-items:center;font-size:22px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.brand-title{font-weight:800;font-size:18px;letter-spacing:-.02em}.brand small{display:block;color:#cde1d8;font-size:11px;margin-top:2px}
.side-nav{display:flex;flex-direction:column;gap:5px}
.side-nav a,.sidebar-footer a{display:flex;align-items:center;gap:12px;color:#e5f1ec;padding:11px 13px;border-radius:12px;font-weight:600;font-size:13px;transition:.18s}
.side-nav a i,.sidebar-footer a i{font-size:17px;width:20px;text-align:center}
.side-nav a:hover,.side-nav a.active,.sidebar-footer a:hover{background:rgba(255,255,255,.12);color:#fff}
.side-nav a.active{box-shadow:inset 3px 0 #b7e777}
.sidebar-footer{margin-top:auto;border-top:1px solid rgba(255,255,255,.12);padding-top:14px}
.workspace{margin-left:248px;min-width:0;flex:1}
.topbar{height:76px;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:sticky;top:0;z-index:900}
.topbar-title b{display:block;color:var(--green-900);font-size:18px}.topbar-title small{color:#87928b;font-size:11px}
.top-actions{display:flex;align-items:center;gap:12px}.icon-btn{width:40px;height:40px;border:1px solid var(--line);border-radius:12px;display:grid;place-items:center;color:var(--green-800);background:#fff}
.user-chip{display:flex;align-items:center;gap:9px;border-left:1px solid var(--line);padding-left:12px}.user-chip .avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--mint);color:var(--green-700)}
.user-chip small{display:block;color:var(--muted);font-size:10px}.user-chip strong{font-size:12px}
.mobile-menu{display:none;border:0;background:transparent;font-size:26px;color:var(--green-900)}
.page{padding:28px}
.page-title{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}
.page-title h1,.page-title h2{margin:0;font-size:27px;letter-spacing:-.03em;font-weight:800;color:#17231d}
.page-title p{margin:5px 0 0;color:var(--muted);font-size:13px}
.card{border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);background:var(--surface)}
.card-title{font-weight:750;color:#24352d}
.btn{border-radius:11px;font-weight:650;font-size:13px;padding:.62rem .9rem}
.btn-success{background:var(--green-600);border-color:var(--green-600)}.btn-success:hover{background:var(--green-700);border-color:var(--green-700)}
.btn-outline-success{border-color:#8bc4aa;color:var(--green-700)}.btn-outline-success:hover{background:var(--mint);color:var(--green-800);border-color:#79b99b}
.form-control,.form-select{border-radius:11px;border-color:#dce5df;min-height:42px;font-size:13px}.form-control:focus,.form-select:focus{border-color:#6bb58f;box-shadow:0 0 0 .2rem rgba(15,127,86,.1)}
.form-label{font-size:12px;font-weight:700;color:#4c5b54}
.metric-card{padding:18px;display:flex;align-items:center;gap:14px;min-height:112px}.metric-icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:20px}.metric-value{font-size:30px;font-weight:800;line-height:1}.metric-label{font-size:12px;color:#66736c;margin-top:7px}.metric-green .metric-icon{background:#dff5e6;color:#087849}.metric-blue .metric-icon{background:#e0efff;color:#2d6bb3}.metric-yellow .metric-icon{background:#fff0bd;color:#8d6900}.metric-purple .metric-icon{background:#eee7ff;color:#6f54ad}.metric-teal .metric-icon{background:#dff6f3;color:#13786e}.metric-gray .metric-icon{background:#edf1ef;color:#61716a}
.table-wrap{overflow:auto}.table{margin:0;font-size:13px;vertical-align:middle}.table thead th{background:#f7faf8;color:#69776f;font-size:11px;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;border-bottom:1px solid var(--line)}.table td,.table th{padding:.85rem .9rem}
.status-pill{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:5px 9px;font-size:11px;font-weight:700}.status-active{background:#e4f6eb;color:#0d7a4b}.status-closed{background:#fde8e8;color:#a93636}.status-care{background:#fff3cc;color:#9a6b00}
.info-grid{display:grid;grid-template-columns:150px 1fr;gap:10px 14px;font-size:13px}.info-grid .k{color:#78847e}.info-grid .v{font-weight:650}
.health-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.health-card{border-radius:14px;padding:15px;text-align:center}.health-card b{display:block;font-size:23px}.health-card span{font-size:11px;color:#5c6b63}.h-green{background:#e1f5e6}.h-yellow{background:#fff3c7}.h-orange{background:#ffe9d1}.h-red{background:#ffe0e0}.h-gray{background:#eef1f0}
.subnav{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px}.subnav a{padding:8px 11px;border:1px solid #dce6e0;border-radius:10px;background:#fff;color:#3b5f4e;font-weight:650;font-size:12px}.subnav a:hover{background:var(--mint)}
.qr-box{padding:22px;text-align:center}.qr-box img{width:min(240px,100%);background:#fff;padding:10px;border:1px solid var(--line);border-radius:12px}.qr-caption{font-weight:750;margin-top:10px}
.timeline{border-left:2px solid #dce7e1;margin:8px 0 0 11px;padding-left:26px}.timeline-item{position:relative;padding-bottom:26px}.timeline-item:before{content:"";position:absolute;left:-33px;top:4px;width:13px;height:13px;border-radius:50%;background:var(--green-500);border:3px solid #fff;box-shadow:0 0 0 2px #b9dbc9}.timeline-item time{font-size:11px;color:#8a958f}.timeline-item strong{display:block;margin:2px 0 3px}
.warning-box{border-radius:14px;background:#fff4d5;border:1px solid #f1d792;padding:15px;color:#6f5612;display:flex;gap:10px;align-items:flex-start}
.danger-box{border-radius:14px;background:#fff0f0;border:1px solid #efc0c0;padding:15px;color:#8c2f2f}
.photo-placeholder{min-height:210px;border-radius:15px;background:linear-gradient(135deg,#dcefe3,#bcdcc8);display:grid;place-items:center;color:var(--green-700);font-size:56px}
.progress-donut{width:150px;height:150px;border-radius:50%;background:conic-gradient(var(--green-500) 0 58%,#6fb7e8 58% 72%,#f4c95d 72% 84%,#b99aea 84% 92%,#e6ece8 92%);display:grid;place-items:center;margin:auto}.progress-donut:after{content:"100%";width:104px;height:104px;border-radius:50%;background:#fff;display:grid;place-items:center;font-weight:800;font-size:22px;color:#2c3c34}
.stage-legend{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;margin-top:16px;font-size:12px}.legend-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:7px}
.login-shell{min-height:100vh;display:grid;grid-template-columns:1.15fr .85fr;background:#eef4ef}.login-hero{padding:56px;background:linear-gradient(150deg,#062f23,#0b6a48);color:white;display:flex;flex-direction:column;justify-content:space-between}.login-hero .hero-mark{font-size:62px;color:#b7e777}.login-hero h1{font-size:44px;line-height:1.05;max-width:650px;font-weight:850;letter-spacing:-.04em}.login-hero p{max-width:570px;color:#d7e9df;font-size:16px}.login-panel{display:grid;place-items:center;padding:28px}.login-card{width:min(430px,100%);padding:32px}.login-card h2{font-weight:800}.login-card .sub{color:var(--muted);margin-bottom:24px}
@media(max-width:1100px){.health-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){
  .sidebar{transform:translateX(-100%);transition:.2s}.nav-open .sidebar{transform:translateX(0)}.workspace{margin-left:0}.mobile-menu{display:block}.topbar{padding:0 14px}.page{padding:16px}.topbar-title small{display:none}.topbar-title b{font-size:14px}.user-chip small{display:none}.login-shell{grid-template-columns:1fr}.login-hero{display:none}
}
@media(max-width:650px){.health-grid{grid-template-columns:1fr 1fr}.page-title{flex-direction:column}.page-title .btn{width:100%}.metric-card{min-height:96px}.info-grid{grid-template-columns:110px 1fr}.top-actions .icon-btn{display:none}}
@media print{.sidebar,.topbar,.no-print{display:none!important}.workspace{margin:0}.page{padding:0}.card{box-shadow:none}}


/* V12 mobile-first improvements. Desktop rendering and server controls are retained. */
:root{--mobile-green:#063e2c;--mobile-glow:#b7e777}
html{scroll-padding-top:88px}body{-webkit-tap-highlight-color:transparent}
button,a,input,select,textarea{touch-action:manipulation}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #68ac80!important;outline-offset:2px}
.skip-link{position:fixed;z-index:3000;top:-80px;left:12px;background:white;color:#063e2c;padding:12px 16px;border-radius:12px}.skip-link:focus{top:12px}
.nav-backdrop,.bottom-nav{display:none}
.page{max-width:1800px;margin:0 auto}.page-title h1,.page-title h2{line-height:1.2}
.form-control,.form-select{font-size:16px}.btn,.form-control,.form-select{min-height:44px}
.card{overflow-wrap:anywhere}.table-wrap{max-width:100%}
.dashboard-hero{background:linear-gradient(120deg,#06412f 0%,#0e6c4b 75%,#34865d 100%);color:white;border-radius:22px;padding:25px 28px;margin-bottom:20px;position:relative;overflow:hidden}
.dashboard-hero:after{content:"";position:absolute;width:220px;height:220px;right:-72px;top:-95px;background:rgba(183,231,119,.12);border-radius:50%;pointer-events:none}
.dashboard-eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:#ceefd6}
.dashboard-hero h2{font-size:clamp(21px,3vw,31px);font-weight:800;letter-spacing:-.035em;margin:8px 0 6px}
.dashboard-hero p{max-width:600px;color:#e0f1e5;font-size:13px;margin:0 0 17px}
.dashboard-actions{display:flex;gap:9px;flex-wrap:wrap}.dashboard-actions a{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;border-radius:13px;padding:10px 14px;font-size:13px;font-weight:750;background:white;color:#084a32}
.dashboard-actions a.secondary{background:rgba(255,255,255,.14);color:white;border:1px solid rgba(255,255,255,.35)}
.mobile-section-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 14px}.mobile-section-header h3{font-size:16px;margin:0;font-weight:800}
@media(max-width:900px){
  .sidebar{width:min(310px,86vw);overflow-y:auto;overscroll-behavior:contain;z-index:1301;transform:translateX(-105%);padding-top:max(22px,env(safe-area-inset-top));box-shadow:20px 0 60px rgba(0,0,0,.18)}
  .nav-open .sidebar{transform:translateX(0)}
  .nav-backdrop{display:block;opacity:0;visibility:hidden;pointer-events:none;position:fixed;inset:0;background:rgba(1,20,13,.52);z-index:1300;transition:opacity .2s,visibility .2s}
  .nav-open .nav-backdrop{opacity:1;visibility:visible;pointer-events:auto}
  .topbar{height:64px;padding:0 15px;z-index:1100}.mobile-menu{display:grid;place-items:center;width:44px;height:44px;flex:0 0 44px;border-radius:12px;background:#eef8f1}
  .topbar-title{min-width:0;flex:1;padding-left:10px}.topbar-title b{font-size:13px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .top-actions .user-chip{border:0;padding:0}.top-actions .user-chip>div:last-child{display:none}.user-chip .avatar{width:38px;height:38px}
  .workspace{margin-left:0;padding-bottom:calc(77px + env(safe-area-inset-bottom))}
  .page{padding:18px 14px 22px}
  .bottom-nav{position:fixed;bottom:0;left:0;right:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));background:rgba(255,255,255,.97);backdrop-filter:blur(12px);border-top:1px solid #e0e9e3;box-shadow:0 -8px 28px rgba(0,0,0,.07);z-index:1200;padding:7px max(7px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(7px,env(safe-area-inset-left));min-height:72px}
  .bottom-nav a{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2px;border-radius:13px;color:#75847b;font-size:10px;font-weight:700;min-height:52px;line-height:1.25;white-space:nowrap}
  .bottom-nav a i{font-size:20px}.bottom-nav a.active{background:#eaf7ee;color:#08623e}
  .bottom-nav .bottom-scan{color:#074e33}.bottom-nav .bottom-scan i{width:40px;height:31px;border-radius:11px;background:#0c7550;color:#fff;display:grid;place-items:center;font-size:20px}
  .bottom-nav .bottom-scan.active i{background:#05593c}
  .page-title{align-items:stretch;margin-bottom:15px}.page-title h1,.page-title h2{font-size:23px}.page-title p{line-height:1.45}
  .page-title>.btn,.page-title>a.btn,.page-title>span,.page-title>a{align-self:flex-start}
  .card{border-radius:17px}.card.p-4,.card>.p-4,.card>.p-3{padding:17px!important}
  .metric-card{padding:13px;gap:10px;min-height:105px}.metric-icon{flex:none;width:38px;height:38px;border-radius:12px;font-size:17px}.metric-value{font-size:25px}.metric-label{font-size:11px;line-height:1.3}
  .dashboard-hero{padding:22px 19px;border-radius:20px}.dashboard-hero h2{font-size:24px}
  .subnav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:1px 0 9px;margin-bottom:12px;scroll-snap-type:x proximity}.subnav::-webkit-scrollbar{display:none}.subnav a{flex:0 0 auto;scroll-snap-align:start;min-height:43px;display:inline-flex;align-items:center;padding:10px 13px}
  .login-shell{min-height:100svh;display:flex;align-items:center;justify-content:center;padding:18px;background:linear-gradient(155deg,#073e2b 0%,#0d6345 33%,#f0f5ef 33%,#f0f5ef 100%)}
  .login-panel{padding:10px;width:100%;max-width:460px;display:block}.login-card{padding:26px 22px;border-radius:23px}.login-card h2{font-size:26px}
}
@media(max-width:650px){
  .page-title{gap:11px}.page-title .btn{width:100%;justify-content:center;display:inline-flex;align-items:center}
  .row.g-3{--bs-gutter-x:12px;--bs-gutter-y:12px}
  .metric-card{display:block;min-height:132px}.metric-card .metric-icon{margin-bottom:10px}.metric-value{font-size:26px}.metric-label{margin-top:5px}
  .health-grid{gap:8px}.health-card{padding:13px 7px}.health-card b{font-size:22px}.health-card span{font-size:10px}
  .info-grid{grid-template-columns:minmax(0,1fr);gap:3px;padding:0}.info-grid .k{font-size:11px;margin-top:10px}.info-grid .v{font-size:14px;min-width:0;overflow-wrap:anywhere}
  .dashboard-actions a{flex:1 1 auto}.dashboard-hero{margin-bottom:16px}
  .form-control,.form-select{min-height:48px}.btn{min-height:45px;font-size:14px}
  .table-wrap{overflow:visible}.mobile-card-table{border:0!important;display:block;width:100%;background:transparent}
  .mobile-card-table>tbody,.mobile-card-table>tbody>tr{display:block;width:100%}
  .mobile-card-table>tbody>tr:first-child:not(:has(td)){display:none}
  .mobile-card-table>tbody>tr:has(td){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:7px 12px;margin:11px 12px;background:white;border:1px solid #e1e9e2;border-radius:15px;padding:13px;box-shadow:0 5px 15px rgba(4,56,30,.04)}
  .mobile-card-table>tbody>tr>td{display:block;min-width:0;padding:4px 0;border:0;overflow-wrap:anywhere;font-size:13px}
  .mobile-card-table>tbody>tr>td:before{content:attr(data-label);display:block;color:#7a877e;font-size:10px;font-weight:800;letter-spacing:.015em;margin-bottom:3px}
  .mobile-card-table>tbody>tr>td:first-child{grid-column:1/-1;font-size:15px;font-weight:750;color:#104632}
  .mobile-card-table>tbody>tr>td:last-child:has(.btn){grid-column:1/-1}
  .mobile-card-table>tbody>tr>td:last-child .btn{width:100%;display:inline-flex;align-items:center;justify-content:center}
  .mobile-card-table>tbody>tr>td:has(.btn):not(:last-child) .btn{max-width:100%}
  .mobile-card-table>tbody>tr:not(:has(td)){display:block}
  .mobile-card-table>tbody>tr>th{display:none}
  .table-responsive{border:0}
  #reader{min-height:250px!important}#reader video{max-width:100%;height:auto!important;object-fit:cover;border-radius:13px}
  .qr-box{padding:16px}.qr-box img{width:min(240px,90%)}
}
@media(max-width:360px){.bottom-nav a{font-size:9px}.bottom-nav a i{font-size:18px}.metric-value{font-size:23px}}
@media(prefers-reduced-motion:reduce){.sidebar,.nav-backdrop{transition:none!important}}
@media print{.bottom-nav,.nav-backdrop,.dashboard-actions,.skip-link{display:none!important}.workspace{padding-bottom:0}.mobile-card-table>tbody>tr{break-inside:avoid}}