/* v1.0.8 Clean UI/UX structural fix */
:root{
  --sap-radius:16px;
  --sap-radius-sm:10px;
  --sap-gap:18px;
  --sap-sidebar-width:284px;
  --sap-topbar-height:72px;
  --sap-focus:0 0 0 4px rgba(52,120,212,.14);
}
.sap-standalone-portal,
.sap-standalone-portal *{box-sizing:border-box}
.sap-standalone-portal{min-height:100vh;background:var(--sap-bg);color:var(--sap-ink);font-size:15px;line-height:1.55;overflow-x:hidden}
.sap-standalone-portal h1,.sap-standalone-portal h2,.sap-standalone-portal h3{letter-spacing:-.025em;line-height:1.16;color:#0f1f33}
.sap-standalone-portal h1{font-size:clamp(28px,3vw,42px)}
.sap-standalone-portal h2{font-size:clamp(22px,2vw,30px)}
.sap-standalone-portal p{margin-top:0}
.sap-app-shell,.sap-admin-shell,.sap-lecturer-shell,.sap-student-desktop-app{display:grid;grid-template-columns:var(--sap-sidebar-width) minmax(0,1fr);min-height:100vh;width:100%;max-width:100vw;background:#f3f7fc;overflow:hidden}
.sap-main{min-width:0;height:100vh;overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable;background:#f3f7fc}
.sap-content,.sap-desktop-content{width:100%;max-width:1540px;margin:0 auto;padding:26px 30px 56px;display:grid;gap:22px;align-content:start}
.sap-sidebar{position:sticky;top:0;height:100vh;overflow:hidden;background:#fff;border-right:1px solid #dfe7f1;box-shadow:2px 0 0 rgba(16,24,40,.02);z-index:40}
.sap-sidebar-nav{overflow-y:auto;overflow-x:hidden;min-height:0;padding:14px 12px 18px;scrollbar-width:thin}
.sap-sidebar-head{min-height:78px;padding:16px 18px;background:#fff}
.sap-sidebar-brand span,.sap-sidebar-brand img{width:44px;height:44px;border-radius:12px}
.sap-sidebar-link{min-height:46px;padding:10px 12px;border-radius:12px;font-weight:850;transition:.18s ease}
.sap-sidebar-link.is-active{background:#e7f1ff;color:#1f61bb;box-shadow:inset 3px 0 0 #3478d4}
.sap-sidebar-group p{margin:14px 10px 8px;font-size:11px;letter-spacing:.04em;color:#8b97aa}
.sap-sidebar-foot{min-height:58px;background:#fff}
.sap-topbar{position:sticky;top:0;z-index:35;min-height:var(--sap-topbar-height);display:grid;grid-template-columns:minmax(190px,1fr) minmax(250px,420px) auto;gap:16px;align-items:center;padding:12px 24px;background:rgba(255,255,255,.97);border-bottom:1px solid #dfe7f1;backdrop-filter:blur(12px)}
.sap-topbar-left,.sap-topbar-actions{min-width:0;display:flex;align-items:center;gap:12px}.sap-topbar-actions{justify-content:flex-end}.sap-breadcrumb strong,.sap-breadcrumb span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sap-breadcrumb strong{font-size:17px}.sap-breadcrumb span{font-size:12px;color:#667085}.sap-global-search{min-width:0}.sap-global-search input{height:46px;border-radius:12px;background:#fff}.sap-topbar-shortcut{min-width:max-content}.sap-avatar-link span{max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sap-page-header,.sap-hero-panel,.sap-profile-hero{border-radius:18px;border:1px solid #dfe7f1;background:linear-gradient(135deg,#fff 0%,#eef6ff 100%);padding:24px;box-shadow:0 16px 38px rgba(31,45,68,.07);align-items:center}.sap-page-header{display:grid;grid-template-columns:minmax(0,1fr) auto}.sap-page-header>div{min-width:0}.sap-page-header h1,.sap-hero-panel h1{margin:0 0 4px}.sap-page-header span{display:block;max-width:900px;color:#667085}.sap-panel,.sap-stat-card,.sap-class-card,.sap-assignment-card,.sap-grade-card,.sap-data-card,.sap-mobile-card{border:1px solid #dfe7f1;border-radius:18px;background:#fff;box-shadow:0 14px 34px rgba(31,45,68,.07);min-width:0}.sap-panel{padding:22px}.sap-panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:16px}.sap-panel-head h2,.sap-panel-head h3{margin:0}.sap-stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}.sap-stat-card{padding:18px;border-top:4px solid var(--sap-blue);box-shadow:0 10px 24px rgba(31,45,68,.06)}.sap-stat-card span{display:block;color:#5d6b82;font-weight:850;font-size:13px}.sap-stat-card strong{font-size:30px;margin-top:8px}.sap-dashboard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:18px;align-items:start}.sap-wide-panel{grid-column:1/-1}.sap-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:16px}.sap-filter-bar{display:grid;grid-template-columns:minmax(220px,1fr) minmax(150px,190px) minmax(150px,190px) auto;gap:10px}.sap-table-wrap{width:100%;overflow-x:auto;border-radius:14px;border:1px solid #e4eaf2;background:#fff}.sap-table{width:100%;min-width:820px;border-collapse:collapse}.sap-table th{position:sticky;top:0;background:#f8fbff;color:#475467;font-size:12px;text-transform:uppercase;z-index:1}.sap-table th,.sap-table td{padding:14px;border-bottom:1px solid #e4eaf2;vertical-align:middle}.sap-table tbody tr:hover{background:#f9fbff}.sap-form,.sap-attendance-form{display:grid;gap:16px}.sap-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.sap-form-section{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:20px;border:1px solid #dfe7f1;border-radius:18px;background:#fbfdff}.sap-form-section h3,.sap-form-section .sap-span-2,.sap-span-2,.sap-form-actions{grid-column:1/-1}.sap-form label,.sap-attendance-form label{display:grid;gap:8px;font-weight:850;color:#0f1f33}.sap-form input,.sap-form select,.sap-form textarea,.sap-attendance-form input,.sap-attendance-form select,.sap-filter-bar input,.sap-filter-bar select{width:100%;min-height:46px;border:1px solid #cfd8e6;border-radius:12px;padding:10px 13px;background:#fff;color:#152235}.sap-form input:focus,.sap-form select:focus,.sap-form textarea:focus,.sap-filter-bar input:focus,.sap-filter-bar select:focus{outline:0;border-color:var(--sap-blue);box-shadow:var(--sap-focus)}.sap-form label small{font-weight:650;color:#667085}.sap-form-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.sap-button{border-radius:12px;min-height:44px;padding:10px 16px}.sap-button-sm{min-height:34px;padding:7px 11px}.sap-list-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0;border-top:1px solid #e4eaf2}.sap-list-row:first-child{border-top:0}.sap-click-row{display:flex;border:1px solid #e4eaf2;border-radius:14px;padding:14px;margin-bottom:10px;background:#fff;transition:.18s ease}.sap-click-row:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(31,45,68,.08)}.sap-empty-state{border:1px dashed #b9c6d8;border-radius:16px;padding:18px;background:#fbfdff}.sap-student-desktop-app .sap-bottom-nav{display:none!important}.sap-auth-page{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);align-items:center;gap:36px;padding:40px;background:radial-gradient(circle at top left,rgba(52,120,212,.16),transparent 32%),linear-gradient(135deg,#f8fbff,#eef5ff 52%,#f4fff9)}.sap-auth-page:before{content:"Portal Akademik";display:grid;align-content:center;min-height:520px;border-radius:32px;padding:42px;background:linear-gradient(135deg,rgba(52,120,212,.95),rgba(47,191,113,.88));color:#fff;font-size:clamp(34px,5vw,64px);font-weight:950;letter-spacing:-.05em;box-shadow:0 22px 60px rgba(31,45,68,.18)}.sap-auth-card{width:min(100%,470px);justify-self:center;border:1px solid #dfe7f1;border-radius:28px;background:rgba(255,255,255,.96);box-shadow:0 28px 70px rgba(31,45,68,.16);padding:32px}.sap-auth-mark{display:grid!important;place-items:center;width:58px;height:58px;border-radius:16px;background:var(--sap-blue);color:#fff;font-weight:950;margin-bottom:14px}.sap-auth-card h1{margin:0 0 18px}.sap-auth-switch{text-align:center;color:#667085;margin:16px 0 0}.sap-auth-switch a{font-weight:900}.sap-enrollment-layout{display:grid;grid-template-columns:minmax(340px,460px) minmax(0,1fr);gap:18px;align-items:start}.sap-enrollment-form-panel{position:sticky;top:calc(var(--sap-topbar-height) + 20px)}.sap-enrollment-card-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:18px}.sap-enrollment-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:#eaf3ff;color:#225aa7;font-size:24px;font-weight:950}.sap-note-box{border:1px solid #dfe7f1;border-radius:18px;background:#fff;padding:20px}.sap-attendance-desktop .sap-app-shell{min-height:100vh}.sap-attendance-desktop-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(360px,.75fr);align-items:start}.sap-map-panel,.sap-presence-panel{min-width:0}.sap-real-map{min-height:560px}.sap-mobile-content{padding:16px 16px 112px}.sap-mobile-card{padding:18px}.sap-mobile-card h1{font-size:28px}.sap-mobile-only{display:none!important}
@media (max-width:1180px){.sap-topbar{grid-template-columns:auto minmax(0,1fr) auto}.sap-global-search{display:none}.sap-enrollment-layout,.sap-attendance-desktop-grid{grid-template-columns:1fr}.sap-enrollment-form-panel{position:static}.sap-page-header{grid-template-columns:1fr}.sap-quick-actions{justify-content:flex-start}.sap-form-grid,.sap-form-section{grid-template-columns:1fr}}
@media (max-width:1024px){.sap-app-shell,.sap-admin-shell,.sap-lecturer-shell,.sap-student-desktop-app{display:block;min-height:100vh;overflow:visible}.sap-main{height:auto;min-height:100vh;overflow:visible}.sap-sidebar{position:fixed;inset:0 auto 0 0;width:min(86vw,310px);transform:translateX(-110%);transition:transform .23s ease;z-index:1000;box-shadow:18px 0 45px rgba(15,23,42,.22)}.sap-drawer-open .sap-sidebar{transform:translateX(0)}.sap-drawer-open .sap-drawer-overlay{display:block;position:fixed;inset:0;background:rgba(15,23,42,.38);z-index:900}.sap-mobile-menu,.sap-drawer-close{display:inline-grid}.sap-topbar{min-height:64px;padding:9px 14px}.sap-topbar-actions .sap-avatar-link span,.sap-topbar-pill,.sap-topbar-shortcut{display:none}.sap-content,.sap-desktop-content{padding:16px 14px 92px}.sap-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sap-filter-bar{grid-template-columns:1fr}.sap-table{min-width:720px}.sap-page-header,.sap-hero-panel,.sap-profile-hero{padding:18px}.sap-auth-page{grid-template-columns:1fr;padding:24px 16px}.sap-auth-page:before{display:none}.sap-auth-card{border-radius:22px;padding:24px}.sap-mobile-only{display:block!important}}
@media (max-width:768px){.sap-standalone-portal{font-size:14px}.sap-student-desktop-app,.sap-student-desktop-shell{display:none!important}.sap-student-mobile-shell{display:block!important}.sap-panel{padding:16px}.sap-page-header h1,.sap-mobile-card h1{font-size:25px}.sap-stat-grid{grid-template-columns:1fr 1fr}.sap-list-row,.sap-click-row{align-items:flex-start;flex-direction:column}.sap-button,.sap-button-row .sap-button{width:100%}.sap-form-actions .sap-button{width:100%}.sap-avatar-link{max-width:110px}.sap-avatar-link span{display:none!important}.sap-real-map{min-height:380px}.sap-map-mobile-bg.sap-real-map{min-height:100vh}.sap-mobile-presence-card{left:12px!important;right:12px!important;bottom:92px!important;width:auto!important}.sap-bottom-nav{bottom:12px}.sap-auth-card{width:100%}}
@media (min-width:769px){.sap-student-mobile-shell{display:none!important}}

/* v1.0.8 compatibility for older student views that still use topbar before the grid */
.sap-desktop-app.sap-student-desktop-app > .sap-topbar{
  margin-left:var(--sap-sidebar-width);
  width:calc(100% - var(--sap-sidebar-width));
}
.sap-desktop-app.sap-student-desktop-app > .sap-desktop-grid{
  display:grid;
  grid-template-columns:var(--sap-sidebar-width) minmax(0,1fr);
  min-height:calc(100vh - var(--sap-topbar-height));
}
.sap-desktop-app.sap-student-desktop-app > .sap-desktop-grid > .sap-sidebar{
  position:sticky; top:0; height:calc(100vh - var(--sap-topbar-height));
}
@media (max-width:1024px){
  .sap-desktop-app.sap-student-desktop-app > .sap-topbar{margin-left:0;width:100%;}
  .sap-desktop-app.sap-student-desktop-app > .sap-desktop-grid{display:block;min-height:auto;}
  .sap-desktop-app.sap-student-desktop-app > .sap-desktop-grid > .sap-sidebar{height:100vh;}
}

/* v1.0.9 GPS, scanner, adaptive layout hardening */
html, body { overflow-x: hidden; }
.sap-standalone-portal * { box-sizing: border-box; }
.sap-standalone-portal img, .sap-standalone-portal video, .sap-standalone-portal object, .sap-standalone-portal iframe { max-width: 100%; }
.sap-app-shell { min-height: 100vh; display: grid; grid-template-columns: 280px minmax(0, 1fr); background: var(--sap-bg, #f4f7fb); }
.sap-sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; overflow-x: hidden; align-self: start; z-index: 40; }
.sap-main { min-width: 0; height: 100vh; overflow-y: auto; overflow-x: hidden; }
.sap-topbar { position: sticky; top: 0; z-index: 35; min-width: 0; }
.sap-content, .sap-page-contained { max-width: 100%; min-width: 0; overflow-x: hidden; }
.sap-panel, .sap-card, .sap-auth-card, .sap-mobile-card { min-width: 0; overflow-wrap: break-word; }
.sap-form input, .sap-form select, .sap-form textarea, .sap-attendance-form input, .sap-attendance-form select, .sap-attendance-form textarea { width: 100%; min-width: 0; }
.sap-button { white-space: nowrap; }
.sap-presence-check-card { display: grid; gap: 18px; width: 100%; }
.sap-attendance-form-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.sap-live-indicators { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sap-live-indicator { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 10px; row-gap: 2px; align-items: center; min-height: 72px; padding: 14px; border: 1px solid #dfe7f2; border-radius: 16px; background: #fff; box-shadow: 0 10px 24px rgba(15, 36, 67, .04); }
.sap-live-indicator i { width: 14px; height: 14px; border-radius: 999px; background: #94a3b8; box-shadow: 0 0 0 5px rgba(148, 163, 184, .14); grid-row: 1 / span 2; }
.sap-live-indicator span { font-size: 12px; color: #667085; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.sap-live-indicator strong { display: block; min-width: 0; color: #10243e; font-size: 13px; line-height: 1.35; word-break: break-word; }
.sap-live-indicator.is-checking i { background: #3478d4; animation: sapPulse 1.1s infinite ease-in-out; }
.sap-live-indicator.is-valid i { background: #19b56b; box-shadow: 0 0 0 5px rgba(25,181,107,.14); }
.sap-live-indicator.is-invalid i { background: #ef4444; box-shadow: 0 0 0 5px rgba(239,68,68,.14); }
.sap-live-indicator.is-idle i { background: #f59e0b; box-shadow: 0 0 0 5px rgba(245,158,11,.14); }
@keyframes sapPulse { 0% { transform: scale(.88); box-shadow: 0 0 0 0 rgba(52,120,212,.45); } 70% { transform: scale(1); box-shadow: 0 0 0 12px rgba(52,120,212,0); } 100% { transform: scale(.88); box-shadow: 0 0 0 0 rgba(52,120,212,0); } }
.sap-status-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sap-presence-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sap-attendance-result { padding: 12px 14px; border-radius: 14px; font-weight: 700; }
.sap-attendance-result.is-success { background: #ecfdf3; color: #067647; border: 1px solid #abefc6; }
.sap-attendance-result.is-error { background: #fef3f2; color: #b42318; border: 1px solid #fecdca; }
.sap-button.is-loading { position: relative; opacity: .78; pointer-events: none; }
.sap-button.is-loading:after { content: ''; width: 14px; height: 14px; margin-left: 8px; display: inline-block; vertical-align: -2px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: sapSpin .75s linear infinite; }
@keyframes sapSpin { to { transform: rotate(360deg); } }
.sap-real-map, .sap-map-mobile-bg { width: 100%; min-height: 420px; border-radius: 18px; overflow: hidden; background: linear-gradient(135deg, #e7f0ff, #eefaf4); }
.sap-attendance-desktop-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(360px, .65fr); gap: 20px; }
.sap-wide-panel { grid-column: 1 / -1; }
.sap-scan-page { min-height: 100vh; display: grid; place-items: center; padding: 32px 18px 100px; background: linear-gradient(135deg, #edf5ff, #f8fbff); }
.sap-scan-card { width: min(720px, 100%); display: grid; gap: 18px; }
.sap-camera-box { position: relative; min-height: 360px; overflow: hidden; border-radius: 22px; background: #071629; border: 1px solid #dbe5f1; display: grid; place-items: center; }
.sap-camera-box video { width: 100%; height: 100%; min-height: 360px; object-fit: cover; display: block; }
.sap-camera-box:not(.is-camera-active) video { opacity: .28; }
.sap-scan-frame { position: absolute; width: min(72%, 330px); aspect-ratio: 1 / 1; border: 3px solid rgba(255,255,255,.9); border-radius: 24px; box-shadow: 0 0 0 999px rgba(5, 14, 30, .34); }
.sap-scan-frame:before { content: ''; position: absolute; left: 14px; right: 14px; top: 50%; height: 2px; background: #19b56b; animation: sapScanLine 1.55s infinite ease-in-out; box-shadow: 0 0 15px rgba(25,181,107,.9); }
@keyframes sapScanLine { 0%,100% { transform: translateY(-120px); opacity:.35; } 50% { transform: translateY(120px); opacity:1; } }
[data-sap-scan-message] { position: absolute; left: 16px; right: 16px; bottom: 16px; margin: 0; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.92); color: #0f2742; font-weight: 700; text-align: center; }
[data-sap-scan-message].is-success { color: #067647; }
[data-sap-scan-message].is-error { color: #b42318; }
[data-sap-scan-message].is-checking:before { content: ''; width: 12px; height: 12px; display: inline-block; margin-right: 8px; border-radius: 50%; background: #3478d4; animation: sapPulse 1.1s infinite ease-in-out; vertical-align: -1px; }
.sap-camera-actions { justify-content: center; }
.sap-manual-token-form { border-top: 1px solid #e5eaf3; padding-top: 16px; }

@media (max-width: 1180px) {
  .sap-attendance-desktop-grid { grid-template-columns: 1fr; }
  .sap-wide-panel { grid-column: auto; }
  .sap-live-indicators, .sap-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .sap-app-shell { display: block; }
  .sap-sidebar { display: none !important; }
  .sap-main { height: auto; min-height: 100vh; overflow: visible; }
  .sap-topbar { position: sticky; top: 0; }
  .sap-content { padding: 16px; padding-bottom: 104px; }
  .sap-attendance-desktop { display: none !important; }
  .sap-attendance-mobile { display: block !important; min-height: 100vh; padding-bottom: 96px; background: #f4f7fb; }
  .sap-map-mobile-bg { min-height: 48vh; border-radius: 0 0 26px 26px; }
  .sap-time-card { position: absolute; left: 18px; right: 18px; top: 18px; z-index: 5; }
  .sap-mobile-presence-card { position: relative; z-index: 6; margin: -48px 14px 100px; padding: 18px; border-radius: 24px; background: #fff; box-shadow: 0 18px 42px rgba(15,36,67,.16); }
  .sap-attendance-form-head { display: grid; }
  .sap-live-indicators, .sap-status-grid { grid-template-columns: 1fr; }
  .sap-presence-actions { display: grid; grid-template-columns: 1fr; }
  .sap-presence-actions .sap-button { width: 100%; justify-content: center; }
  .sap-camera-box, .sap-camera-box video { min-height: 310px; }
  .sap-scan-page { align-items: start; padding: 18px 12px 110px; }
}
@media (min-width: 769px) {
  .sap-attendance-mobile { display: none !important; }
}
@media (max-width: 480px) {
  .sap-live-indicator { min-height: 66px; padding: 12px; }
  .sap-camera-box, .sap-camera-box video { min-height: 270px; }
  .sap-scan-frame { width: 78%; }
}