/* SMART Plus+ V34 unified ecosystem — scoped to supplemental operational pages.
   Medical/first-aid console deliberately excluded. */
:root{--ops-bg:#f6faf7;--ops-paper:#fff;--ops-ink:#15372b;--ops-muted:#70877b;--ops-line:#dbe9e1;--ops-line-bold:#c4dccf;--ops-green:#0f7a54;--ops-deep:#0b6043;--ops-mint:#eaf6ef;--ops-shadow:0 20px 60px rgba(11,76,45,.085);--ops-soft-shadow:0 8px 28px rgba(11,76,45,.055)}
html{scroll-behavior:smooth}
body.ui-v34{background:linear-gradient(180deg,#fbfdfc 0%,#f3f8f5 100%);color:var(--ops-ink);font-family:'IBM Plex Sans Thai',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
body.ui-v34::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle at 88% 2%,rgba(11,141,85,.07),transparent 30%),radial-gradient(circle at 2% 50%,rgba(14,99,65,.035),transparent 25%)}
body.ui-v34 a,body.ui-v34 button,body.ui-v34 input,body.ui-v34 select,body.ui-v34 textarea{font-family:inherit}
body.ui-v34 button,body.ui-v34 a,body.ui-v34 input,body.ui-v34 select,body.ui-v34 summary{touch-action:manipulation}
body.ui-v34 button:focus-visible,body.ui-v34 a:focus-visible,body.ui-v34 input:focus-visible,body.ui-v34 select:focus-visible,body.ui-v34 textarea:focus-visible,body.ui-v34 summary:focus-visible{outline:3px solid #29a775;outline-offset:3px}
body.ui-v34 .system-nav{width:100%;min-height:62px;display:flex;align-items:center;gap:18px;padding:8px clamp(14px,3vw,35px);background:rgba(255,255,255,.96);border-bottom:1px solid var(--ops-line);box-shadow:0 6px 28px rgba(12,80,45,.055);z-index:910;position:relative}
body.ui-v34 .system-mark{flex:none;text-decoration:none;color:var(--ops-ink);display:flex;align-items:center;gap:10px;min-width:0}
body.ui-v34 .system-mark>span{width:36px;height:36px;display:grid;place-items:center;background:linear-gradient(150deg,#0c6849,#159c6c);border-radius:12px;color:white;box-shadow:0 8px 19px rgba(7,110,72,.2)}
body.ui-v34 .system-mark svg{width:21px;height:21px;stroke:#fff;stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round;fill:none;transition:transform .2s ease}
body.ui-v34 .system-mark:hover svg{transform:rotate(-7deg) scale(1.07)}
body.ui-v34 .system-mark b{display:block;font:600 13px Kanit,system-ui,sans-serif;white-space:nowrap;letter-spacing:.1px}
body.ui-v34 .system-mark small{display:block;color:var(--ops-muted);font-size:9px;font-weight:700;letter-spacing:.12em;white-space:nowrap}
body.ui-v34 .system-nav-links{display:flex;align-items:center;gap:5px;overflow:auto;scrollbar-width:none;min-width:0;flex:1;justify-content:flex-end}
body.ui-v34 .system-nav-links::-webkit-scrollbar{display:none}
body.ui-v34 .system-nav-links a{display:flex;align-items:center;justify-content:center;min-height:38px;padding:7px 12px;color:#627c6f;text-decoration:none;border-radius:12px;font-size:11px;font-weight:700;white-space:nowrap;transition:background .18s,color .18s}
body.ui-v34 .system-nav-links a:hover{color:var(--ops-deep);background:var(--ops-mint)}
body.ui-v34 .system-nav-links a[aria-current=page]{background:#e7f5ed;color:var(--ops-deep);border:1px solid #d0e7da}
body.ui-v34 .system-kicker{font-size:10px!important;font-weight:800;letter-spacing:.14em;color:#0c865b;text-transform:uppercase}
body.ui-v34 .system-icon{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:16px;color:#fff;background:linear-gradient(145deg,#0d7553,#21a677);box-shadow:0 10px 24px rgba(12,113,74,.17);flex:none}
body.ui-v34 .system-icon svg{width:25px;height:25px;stroke-width:2.3;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;fill:none;transition:transform .25s ease}
body.ui-v34 .system-icon:hover svg{transform:translateY(-2px) rotate(-4deg)}
body.ui-v34 .system-card{border:1px solid var(--ops-line);background:#fff;border-radius:24px;box-shadow:var(--ops-shadow)}
body.ui-v34 .system-pulse{display:inline-block;width:8px;height:8px;border-radius:50%;background:#12b979;box-shadow:0 0 0 5px #15b77717;vertical-align:middle;margin-right:7px}
body.ui-v34 [hidden]{display:none!important}
body.ui-v34 button:not(:disabled),body.ui-v34 a{transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease}
body.ui-v34 .system-nav a:hover,body.ui-v34 .system-card:hover{box-shadow:0 11px 30px rgba(12,91,53,.06)}
/* Field attendance */
body.ui-attendance .attendance-app{max-width:1540px;margin:auto;padding:18px clamp(12px,2.6vw,34px) 40px}
body.ui-attendance .topbar{border:1px solid var(--ops-line);border-radius:22px;background:rgba(255,255,255,.94);box-shadow:var(--ops-soft-shadow);padding:16px 19px;top:12px}
body.ui-attendance .topbar .brand-logo{background:linear-gradient(135deg,#0d7151,#159c6b);border-radius:15px}
body.ui-attendance .topbar .brand-logo svg{width:22px;height:22px;stroke:#fff;stroke-width:2.3;fill:none;stroke-linecap:round;stroke-linejoin:round}
body.ui-attendance .home-link{background:#eaf6ee;color:var(--ops-deep);border:1px solid var(--ops-line)}
body.ui-attendance main{padding:22px 0 45px}
body.ui-attendance .hero{background:linear-gradient(128deg,#0b6148 0%,#137f58 57%,#259e73 100%);border-radius:25px;border:1px solid #308765;box-shadow:var(--ops-shadow);position:relative;overflow:hidden}
body.ui-attendance .hero:after{content:"";position:absolute;right:-50px;top:-120px;width:220px;height:220px;border:1px solid #ffffff2e;border-radius:40%;transform:rotate(18deg);pointer-events:none}
body.ui-attendance .activity-panel,body.ui-attendance .roster-panel,body.ui-attendance .officer-panel,body.ui-attendance .stat,body.ui-attendance .progress-card{border:1px solid var(--ops-line);border-radius:22px;box-shadow:var(--ops-shadow)}
body.ui-attendance .person,body.ui-attendance .activity-tab,body.ui-attendance .activity-detail{border-radius:17px}
body.ui-attendance .btn.primary{background:linear-gradient(115deg,#0d7652,#159565);color:#fff}
/* Staff approval */
body.ui-staff-access .shell{max-width:1540px;margin:auto;padding:18px clamp(12px,2.5vw,34px) 45px}
body.ui-staff-access .head{background:linear-gradient(135deg,#0a5c43,#16865f);border:1px solid #2a946d;border-radius:25px;overflow:hidden;box-shadow:var(--ops-shadow)}
body.ui-staff-access .head-inner{max-width:none}
body.ui-staff-access .logo{background:#ffffff24;color:white;border:1px solid #ffffff39;box-shadow:none}
body.ui-staff-access .logo svg{width:28px;height:28px;stroke-width:2.3;fill:none;stroke:currentColor;stroke-linecap:round}
body.ui-staff-access .wrap{max-width:none;padding-inline:0}
body.ui-staff-access .headline{padding:24px 28px;background:#fff;border:1px solid var(--ops-line);border-radius:24px;box-shadow:var(--ops-soft-shadow)}
body.ui-staff-access .card,body.ui-staff-access .metrics>div{background:#fff;border:1px solid var(--ops-line);border-radius:22px;box-shadow:var(--ops-shadow)}
body.ui-staff-access .request{border:1px solid #e0ece5;border-radius:17px;background:#fafdfa}
body.ui-staff-access .primary{background:linear-gradient(125deg,#0c7552,#159968);color:#fff}
body.ui-staff-access .secondary{background:#eaf6ee;color:var(--ops-deep);border-color:#cfdfd5}
/* Staff phone GPS */
body.ui-staff-gps .mobile-shell{max-width:900px;margin:0 auto;padding-top:24px;padding-bottom:50px}
body.ui-staff-gps .mobile-head{background:#fff;border:1px solid var(--ops-line);border-radius:24px;color:var(--ops-ink);box-shadow:var(--ops-soft-shadow);padding:22px 25px;margin-bottom:15px}
body.ui-staff-gps .mobile-head h1{color:var(--ops-ink)}
body.ui-staff-gps .mobile-head p,body.ui-staff-gps .mobile-head small{color:#678476}
body.ui-staff-gps .mobile-head .mark{background:linear-gradient(140deg,#0d7551,#159b6c);color:#fff;border-radius:16px}
body.ui-staff-gps .mobile-head .mark svg{width:26px;height:26px;stroke-width:2.3;stroke:currentColor;fill:none;stroke-linecap:round;stroke-linejoin:round}
body.ui-staff-gps .intro{background:linear-gradient(125deg,#0b5d43,#13815c);color:#fff;border:1px solid #2b916a;border-radius:24px;box-shadow:var(--ops-shadow)}
body.ui-staff-gps .intro h2{color:#fff}
body.ui-staff-gps .intro p{color:#e2f8eb}
body.ui-staff-gps .panel,body.ui-staff-gps .track-box,body.ui-staff-gps .offline-mode{border:1px solid var(--ops-line);border-radius:23px;background:#fff;box-shadow:var(--ops-shadow)}
body.ui-staff-gps .auth-tabs{background:#f1f8f3;border:1px solid #e0eee5;border-radius:15px}
body.ui-staff-gps .auth-tabs button.active{background:#0e7c56;color:#fff;border-radius:12px}
body.ui-staff-gps .primary,body.ui-staff-gps .btn.primary{background:linear-gradient(135deg,#0b8057,#159b69);color:#fff}
body.ui-staff-gps .secondary{background:#eaf6ef;color:#136348}
/* Map control room retains complete operational map and its colored staff markers. */
body.ui-live-map .screen{min-height:calc(100vh - 62px);background:transparent}
body.ui-live-map .topbar{border:1px solid var(--ops-line);border-radius:22px;background:#fff;color:var(--ops-ink);margin:14px 18px 0;box-shadow:var(--ops-soft-shadow);padding:14px 17px}
body.ui-live-map .topbar .brand h1{color:var(--ops-ink)}
body.ui-live-map .brand small{color:var(--ops-green)}
body.ui-live-map .brand-mark{background:linear-gradient(135deg,#0b6b4a,#14a071);color:#fff;border-radius:15px}
body.ui-live-map .brand-mark svg{width:25px;height:25px;stroke:#fff;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
body.ui-live-map .sync-indicator{background:#f0f8f3;border:1px solid #dcece0;color:#145d43;border-radius:999px}
body.ui-live-map .go-back{color:var(--ops-deep);background:#ecf7f0;border:1px solid var(--ops-line);border-radius:12px}
body.ui-live-map .info-strip{margin:14px 18px 0;background:linear-gradient(120deg,#0b6046,#137f59);border-radius:23px;color:#fff;border:1px solid #2c936f;box-shadow:var(--ops-shadow)}
body.ui-live-map .info-strip h2{color:#fff}
body.ui-live-map .info-strip p{color:#e3f8ed}
body.ui-live-map .stats>div{border-radius:15px;background:#ffffff14;border:1px solid #ffffff2c}
body.ui-live-map .layout{gap:16px;padding:16px 18px}
body.ui-live-map .map-panel,body.ui-live-map .side-card{border:1px solid var(--ops-line);border-radius:23px;box-shadow:var(--ops-shadow);background:#fff}
body.ui-live-map .map-tools button{border-radius:12px}
body.ui-live-map .point,body.ui-live-map .person{border-radius:14px}
body.ui-live-map footer{border:1px solid var(--ops-line);background:#fff;color:#6d8276}
/* Offline GPS */
body.ui-offline-gps{background:linear-gradient(180deg,#fafdfb,#f3f8f5)}
body.ui-offline-gps .wrap{max-width:760px;margin:auto}
body.ui-offline-gps .head{background:linear-gradient(128deg,#0c6248,#159065);box-shadow:var(--ops-shadow);border-radius:24px;border:1px solid #328d6b}
body.ui-offline-gps .card{border:1px solid var(--ops-line);border-radius:23px;box-shadow:var(--ops-shadow)}
body.ui-offline-gps .button{background:#0c8056;border-radius:14px}
body.ui-offline-gps .button.secondary{background:#eaf6ee;color:#0e6646}
body.ui-offline-gps .button.danger{background:#fff0eb;color:#a74636}
/* Secure administration setup */
body.ui-admin-setup,body.ui-superadmin{padding-top:88px;background:#f7fbf8}
body.ui-admin-setup main,body.ui-superadmin main{background:#fff;border:1px solid var(--ops-line);box-shadow:var(--ops-shadow);border-radius:28px;padding:30px;width:min(100%,620px)}
body.ui-admin-setup .overline,body.ui-superadmin .eyebrow{color:var(--ops-green);letter-spacing:.15em}
body.ui-admin-setup button:not(.sub),body.ui-superadmin button:not(.secondary){background:linear-gradient(120deg,#0d7652,#149263);color:white;border-radius:13px}
body.ui-admin-setup .sub,body.ui-superadmin .secondary{background:#eaf6ee;color:#0e6648;border:1px solid #d7e9dd}
body.ui-admin-setup input,body.ui-superadmin input[type=email],body.ui-superadmin input[type=password],body.ui-superadmin input[type=text]{background:#fcfefd;border:1px solid var(--ops-line-bold);border-radius:13px;color:var(--ops-ink)}
body.ui-admin-setup .back,body.ui-superadmin a.back{border-top:1px solid var(--ops-line);padding-top:20px}
/* Modal motion, reduced-motion users exempt */
@media(prefers-reduced-motion:no-preference){
 body.ui-v34 .system-icon svg{animation:uiStrokeFloat 5s ease-in-out infinite}
 body.ui-v34 .system-card,body.ui-v34 .card,body.ui-v34 .panel{transition:box-shadow .2s ease,border-color .2s ease}
 body.ui-v34 .system-card:hover,body.ui-v34 .card:hover,body.ui-v34 .panel:hover{border-color:#c5dfd0;box-shadow:0 19px 48px rgba(10,85,51,.105)}
 @keyframes uiStrokeFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-2px) rotate(-2deg)}}
}
@media(max-width:900px){body.ui-v34 .system-nav{gap:10px}body.ui-v34 .system-nav-links{justify-content:flex-start}body.ui-staff-access .shell{padding-top:12px}}
@media(max-width:700px){
 body.ui-v34 .system-nav{min-height:56px;padding:7px 11px;gap:9px}
 body.ui-v34 .system-mark>b{display:none}
 body.ui-v34 .system-mark>span{width:34px;height:34px;border-radius:11px}
 body.ui-v34 .system-nav-links{gap:1px}
 body.ui-v34 .system-nav-links a{min-height:38px;padding:6px 9px;font-size:10px}
 body.ui-attendance .attendance-app{padding:10px 12px 36px}
 body.ui-attendance .topbar{top:7px;border-radius:18px;padding:12px}
 body.ui-attendance .hero{padding:22px;border-radius:20px}
 body.ui-attendance main{padding-top:15px}
 body.ui-staff-access .shell{padding:12px}
 body.ui-staff-access .headline{padding:18px;border-radius:19px}
 body.ui-staff-access .head{border-radius:20px}
 body.ui-staff-gps .mobile-shell{padding:13px 12px 38px}
 body.ui-staff-gps .mobile-head{margin:0 0 12px;padding:16px;border-radius:19px}
 body.ui-live-map .topbar{margin:10px 11px 0;padding:11px;border-radius:18px}
 body.ui-live-map .info-strip{margin:10px 11px 0;padding:14px;border-radius:19px}
 body.ui-live-map .layout{padding:10px 11px;gap:12px}
 body.ui-offline-gps{padding:12px 12px 44px}
 body.ui-admin-setup,body.ui-superadmin{padding:80px 12px 22px}
 body.ui-admin-setup main,body.ui-superadmin main{padding:20px;border-radius:21px}
}
/* Centered admin pages: nav stays on top, never beside the form. */
body.ui-admin-setup,body.ui-superadmin{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;min-height:100vh;padding:0 0 22px}
body.ui-admin-setup main,body.ui-superadmin main{margin:auto;align-self:center}
body.ui-admin-setup .system-nav,body.ui-superadmin .system-nav{flex:none}
body.ui-admin-setup main,body.ui-superadmin main{margin-top:30px;margin-bottom:30px}
@media(max-width:700px){
 body.ui-staff-access .head-inner{flex-wrap:wrap;justify-content:flex-start;align-items:center}
 body.ui-staff-access .head-inner .logo{width:46px;height:46px;flex:none}
 body.ui-staff-access .head-copy{flex:1 1 calc(100% - 65px);min-width:0}
 body.ui-staff-access .head-copy h1{font-size:clamp(19px,5vw,25px);line-height:1.35;overflow-wrap:normal}
 body.ui-staff-access .head-inner .back{margin-left:0;display:inline-flex;flex:0 0 auto;min-height:40px}
}