/* =========================================================
   FSB ATTENDANCE v2.2 - CLEAN styles.css
   Structure:
   1. Root / Base
   2. App layout + scrollArea
   3. Header / Connect / Status / Last Scan
   4. Buttons / Pills / Scanner / Notes / Self Card
   5. Viewer Modal
   6. Self Confirm Modal
   7. Update Bar
   8. Responsive / Mobile
========================================================= */

/* =========================================================
   1. ROOT / BASE
========================================================= */

:root{
  --bg:#f1f6fc;
  --txt:#111;
  --muted:#6b7280;
  --line:#d6d8da;

  --ok:#16a34a;
  --bad:#e2462b;
  --pri:#207ce5;

  --checkout:#12408a;
  --blue1:#0f3c7a;
  --blue2:#1a6cb6;

  --connectH:61px;
  --radius:18px;

  --btn3d_outer:0 14px 26px rgba(0,0,0,.22);
  --btn3d_shine:inset 0 2px 0 rgba(255,255,255,.35);
  --btn3d_depth:inset 0 -5px 0 rgba(0,0,0,.18);

  --press_outer:0 8px 16px rgba(0,0,0,.20);
  --press_shine:inset 0 2px 0 rgba(255,255,255,.28);
  --press_depth:inset 0 -2px 0 rgba(0,0,0,.22);
}

*{
  box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

html{
  width:100%;
  max-width:100%;
  height:100%;
  min-height:100%;
  margin:0;
  overflow:hidden;
  font-size:28px;
  -webkit-text-size-adjust:100%;
}

body{
  width:100%;
  max-width:100%;
  height:100%;
  min-height:100%;
  margin:0;
  overflow:hidden;
  position:static !important;

  font-family:Arial, sans-serif;
  color:var(--txt);
  -webkit-text-size-adjust:100%;

  background:
    linear-gradient(90deg, rgba(0,86,179,.12) 0%, rgba(0,86,179,0) 12%),
    linear-gradient(270deg, rgba(1,149,174,.12) 0%, rgba(1,149,174,0) 12%),
    #f2f4f7;
}

body::before{
  content:"FAZRUL SDN BHD";
  position:fixed;
  left:50%;
  bottom:35px;
  transform:translateX(-50%);

  font-family:"Arial Black", Impact, "Segoe UI Black", system-ui, sans-serif;
  font-size:90px;
  font-weight:850;
  letter-spacing:6px;
  line-height:1.3;
  padding:10px 0;

  color:rgba(11,42,111,.10);
  pointer-events:none;
  z-index:0;
  white-space:nowrap;
  text-align:center;
}

input,
select,
textarea{
  font-size:28px !important;
  font-family:Arial, sans-serif;
}

button{
  font-size:28px;
  font-family:Arial, sans-serif;
}

button.disabled{
  opacity:.55;
  filter:grayscale(.20);
}

.small{
  font-size:.82rem;
  color:var(--muted);
  line-height:1.25;
}

/* =========================================================
   2. APP LAYOUT + SCROLL AREA
========================================================= */

.wrap{
  width:100%;
  max-width:980px;
  height:100dvh;
  min-height:100dvh;
  max-height:100dvh;

  margin:0 auto;
  padding:6px 14px 0;

  position:relative;
  z-index:1;

  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.wrap::before,
.wrap::after{
  content:none !important;
}

.stickyHeader,
.card,
.vModal{
  position:relative;
  z-index:2;
}

/* Top section stays visible */
.stickyHeader{
  flex:0 0 auto;
  position:relative !important;
  top:auto !important;
  z-index:999;

  overflow:visible;
  padding-top:env(safe-area-inset-top);
  padding-bottom:8px;

  background:
    linear-gradient(90deg, rgba(0,86,179,.10) 0%, rgba(0,86,179,0) 12%),
    linear-gradient(270deg, rgba(1,149,174,.10) 0%, rgba(1,149,174,0) 12%),
    #f2f4f7;

  box-shadow:none;
}

.stickyHeader.scrolled{
  box-shadow:0 10px 18px rgba(0,0,0,.10);
  border-bottom-left-radius:18px;
  border-bottom-right-radius:18px;
}

/* Real scrollable section */
.scrollArea{
  flex:1 1 auto;
  min-height:0;
  max-height:100%;

  overflow-y:auto;
  overflow-x:hidden;

  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  touch-action:pan-y;

  padding-bottom:16px;
}

.scrollArea #cameraCard,
.scrollArea #scannerCard,
.scrollArea #selfCard,
.scrollArea #locSetupCard{
  width:100%;
  max-width:100%;
  min-width:0;
  position:relative;
  z-index:2;
}

.row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}

/* =========================================================
   3. HEADER / CONNECT / STATUS / LAST SCAN
========================================================= */

.topbar{
  width:100%;
  max-width:100%;
  min-width:0;

  position:relative;
  z-index:1;

  background:linear-gradient(90deg, #0f3c7a, #1a6cb6);
  border:1px solid rgba(255,255,255,.15);
  border-radius:18px;

  padding:10px 14px;
  margin:6px 0 12px;
  min-height:90px;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;

  overflow:hidden;

  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.22),
    inset 0 -3px 0 rgba(0,0,0,.28),
    0 10px 22px rgba(0,0,0,.18);
}

.topbar h1{
  margin:0;
  font-size:1.50rem;
  font-weight:900;
  letter-spacing:.2px;
  color:#fff;
}

.topbarVer{
  position:absolute;
  right:14px;
  bottom:10px;

  color:rgba(255,255,255,.80);
  font-size:.60rem;
  font-weight:400;
  white-space:nowrap;
}

.card{
  background:#e7f5ff;
  border:1px solid rgba(15,23,42,.10);
  border-radius:18px;
  padding:14px;
  margin:10px 0;
  box-shadow:0 10px 22px rgba(0,0,0,.07);
}

.cardConnect{
  width:100%;
  max-width:100%;
  min-width:0;

  background:linear-gradient(90deg, #0f3c7a, #1a6cb6);
  color:#fff;

  border:1.5px solid rgba(255,255,255,.18) !important;
  margin-bottom:1px !important;
  overflow:hidden !important;

  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.22),
    inset 0 -3px 0 rgba(0,0,0,.28),
    0 10px 22px rgba(0,0,0,.12);
}

.connectRow{
  width:100%;
  max-width:100%;
  min-width:0;

  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:nowrap !important;
}

.connectRow #accessKey{
  flex:1 1 auto;
  max-width:240px;
}

/* Inputs */
.inp,
.input,
#accessKey,
.notesRight textarea{
  background:linear-gradient(180deg, rgba(0,0,0,.035), rgba(255,255,255,.22)), #fff !important;
  border:1px solid rgba(15,23,42,.18) !important;
  border-radius:16px !important;
  color:#111 !important;
  box-shadow:
    inset 0 3px 8px rgba(0,0,0,.18),
    inset 0 -3px 0 rgba(255,255,255,.80),
    0 6px 14px rgba(0,0,0,.06);
}

.inp:focus,
#accessKey:focus,
.notesRight textarea:focus{
  outline:none !important;
  border-color:rgba(37,99,235,.45) !important;
  box-shadow:
    inset 0 3px 8px rgba(0,0,0,.16),
    inset 0 -3px 0 rgba(255,255,255,.82),
    0 0 0 4px rgba(37,99,235,.12);
}

.inp::placeholder,
.notesRight textarea::placeholder{
  color:rgba(15,23,42,.45);
  font-weight:600;
}

#accessKey{
  height:var(--connectH) !important;
  min-height:var(--connectH) !important;
  max-width:240px;

  padding:0 12px !important;
  text-align:center;
  line-height:1.1;
  white-space:nowrap;
  overflow:hidden;
}

#accessKey.masked{
  background:linear-gradient(180deg, rgba(15,23,42,.06), rgba(15,23,42,.02)), #d9ecff !important;
  color:rgba(15,23,42,.60) !important;
  -webkit-text-fill-color:rgba(15,23,42,.60) !important;

  text-align:center !important;
  letter-spacing:3px;
  font-weight:700;
  cursor:not-allowed;
}

/* Connect / disconnect buttons */
#btnConnect,
#btnDisconnect{
  box-shadow:var(--btn3d_outer), var(--btn3d_shine), var(--btn3d_depth);
  transition:transform .06s ease, filter .12s ease, box-shadow .12s ease;
  transform:translateY(0);
}

#btnConnect:active,
#btnDisconnect:active{
  transform:translateY(2px);
  box-shadow:var(--press_outer), var(--press_shine), var(--press_depth);
  filter:saturate(1.05);
}

#btnConnect{
  background:linear-gradient(180deg, rgba(255,255,255,.20), rgba(0,0,0,.10)), #16a34a !important;
  color:#fff !important;
  border:2px solid rgba(255,255,255,.25) !important;
}

#btnDisconnect{
  background:linear-gradient(180deg, rgba(255,255,255,.20), rgba(0,0,0,.10)), #e95c43 !important;
  color:#fff7f7 !important;
  border:2px solid #e75136 !important;
}

#btnConnect,
#btnDisconnect,
.connectRow .btnPri,
button.btn.btnGhost.btnDisconnect{
  width:62px !important;
  min-width:62px !important;
  height:62px !important;
  min-height:62px !important;

  padding:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}

#btnConnect,
#btnDisconnect{
  font-size:34px !important;
  font-weight:800 !important;
  line-height:1 !important;
  text-align:center !important;
  border-radius:50% !important;
}

#btnConnect:disabled,
#btnDisconnect:disabled{
  opacity:.55;
  filter:grayscale(.25);
  transform:none !important;
  box-shadow:
    0 10px 18px rgba(0,0,0,.12),
    inset 0 2px 0 rgba(255,255,255,.22),
    inset 0 -4px 0 rgba(0,0,0,.14);
}

/* Divider */
.connectDivider{
  height:1px;
  width:100%;
  margin:12px 0 10px;
  background:rgba(255,255,255,.18);
}

/* Status */ 
#statusBox{
  display:flex !important;
  flex-direction:column;
  align-items:center !important;
  text-align:center !important;
  justify-content:center !important;

  margin-top:10px !important;
  padding:10px 12px !important;
  min-height:58px !important;

  border-radius:14px !important;
  background:rgba(255,255,255,.10) !important;
  border:2px solid rgba(255,255,255,.14) !important;
  box-shadow:none !important;

  color:#fff !important;
  line-height:1.22 !important;
  white-space:normal !important;
  overflow:hidden !important;
  font-size:20px !important;
}

#statusBox::before{
  content:none !important;
  display:none !important;
}

.status,
.statusOk,
.statusBad,
.statusIdle,
.statusWarn,
.status.warn,
#statusBox{
  color:#fff !important;
}

#statusBox.statusIdle{
  background:rgba(255,255,255,.08) !important;
  border-color:rgba(255,255,255,.12) !important;
  color:rgba(255,255,255,.88) !important;
}

#statusBox.statusOk{
  background:rgba(111,236,157,.16) !important;
  border-color:rgba(111,236,157,.28) !important;
}

#statusBox.statusBad{
  background:rgba(233,92,67,.16) !important;
  border-color:rgba(233,92,67,.28) !important;
}

#statusBox.statusWarn,
#statusBox.status.warn{
  background:rgba(250,171,107,.16) !important;
  border-color:rgba(250,171,107,.28) !important;
}

/* =========================================================
   STATUS FLASHING
   Running messages = continuous soft flash
   Any statusBlink message = green border flash
========================================================= */

/* Running status flash */
#statusBox.statusRunning{
  /*
    First: green border flash once when status starts
    Then: continue soft running pulse without border flashing
  */
  animation:
    statusBlinkPulse 1.45s ease-in-out 1,
    statusRunningPulse 1.05s ease-in-out infinite 1.45s !important;

  transform-origin:center;
  border-width:3px !important;
  border-color:#70ec9d !important;
}

@keyframes statusRunningPulse{
  0%{
    transform:scale(1);
    filter:brightness(1);
    box-shadow:none;
  }

  35%{
    transform:scale(1.012);
    filter:brightness(1.28);
    box-shadow:
      0 0 0 3px rgba(112,236,157,.16),
      0 0 18px rgba(112,236,157,.22),
      0 8px 18px rgba(0,0,0,.16);
  }

  70%{
    transform:scale(1);
    filter:brightness(1.04);
    box-shadow:none;
  }

  100%{
    transform:scale(1);
    filter:brightness(1);
    box-shadow:none;
  }
}

/* Final / status message border flash */
/* Important: this must be AFTER statusRunning */
#statusBox.statusBlink,
#statusBox.statusRunning.statusBlink{
  animation:statusBlinkPulse 1.45s ease-in-out 1 !important;
  transform-origin:center;
  border-width:3px !important;
  border-color:#70ec9d !important;
}

@keyframes statusBlinkPulse{
  0%{
    transform:scale(1) translateX(0);
    filter:brightness(1);
    border-color:rgba(112,236,157,.18);
    box-shadow:none;
  }

  10%{
    transform:scale(1.035) translateX(-1px);
    filter:brightness(1.50);
    border-color:#70ec9d;
    box-shadow:
      0 0 0 4px rgba(112,236,157,.35),
      0 0 22px rgba(112,236,157,.38),
      0 10px 24px rgba(0,0,0,.24);
  }

  20%{
    transform:scale(1.015) translateX(1px);
    filter:brightness(1.05);
    border-color:rgba(112,236,157,.35);
    box-shadow:none;
  }

  34%{
    transform:scale(1.035) translateX(-1px);
    filter:brightness(1.45);
    border-color:#70ec9d;
    box-shadow:
      0 0 0 4px rgba(112,236,157,.32),
      0 0 22px rgba(112,236,157,.34),
      0 10px 22px rgba(0,0,0,.22);
  }

  48%{
    transform:scale(1.012) translateX(1px);
    filter:brightness(1.02);
    border-color:rgba(112,236,157,.35);
    box-shadow:none;
  }

  66%{
    transform:scale(1.028) translateX(0);
    filter:brightness(1.38);
    border-color:#70ec9d;
    box-shadow:
      0 0 0 3px rgba(112,236,157,.28),
      0 0 18px rgba(112,236,157,.28),
      0 8px 18px rgba(0,0,0,.20);
  }

  100%{
    transform:scale(1) translateX(0);
    filter:brightness(1);
    border-color:rgba(112,236,157,.18);
    box-shadow:none;
  }
}

@media (prefers-reduced-motion:reduce){
  #statusBox.statusRunning,
  #statusBox.statusBlink,
  #statusBox.statusRunning.statusBlink{
    animation:none !important;
  }
}



/* Last Scan */
.lastScanCard{
  width:100%;
  max-width:100%;
  min-width:0;

  margin-top:10px;
  padding:10px 12px;

  border-radius:14px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:none;

  overflow:hidden;
}

.lastScanTop{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
}

.lastScanTopLeft{
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
  flex:1 1 auto;
}

.lastScanHead{
  flex:0 0 auto;
  font-size:.54rem;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:rgba(255,255,255,.74);
}

.lastScanDot{
  flex:0 0 auto;
  font-size:.52rem;
  line-height:1;
  color:rgba(255,255,255,.78);
  transform:translateY(-1px);
}

.lastScanPerson{
  min-width:0;
  flex:0 1 auto;

  display:inline;
  padding:0 !important;
  margin:0 !important;

  border:0 !important;
  border-radius:0 !important;
  background:none !important;
  box-shadow:none !important;

  font-size:.78rem;
  font-weight:700;
  line-height:1.18;
  color:#fff;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.lastScanAction{
  flex:0 0 auto;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:26px;
  padding:3px 10px;
  margin-left:10px;

  border-radius:999px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18);

  color:#fff;
  font-size:.60rem;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
}

.lastScanGrid{
  margin-top:8px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:8px;
}

.lastScanItem{
  min-width:0;
  padding:7px 9px;
  border-radius:10px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
}

.lastScanItem .k{
  display:block;
  font-size:.48rem;
  font-weight:700;
  color:rgba(255,255,255,.66);
  text-transform:uppercase;
  letter-spacing:.04em;
}

.lastScanItem .v{
  display:block;
  margin-top:2px;

  font-size:.68rem;
  font-weight:700;
  color:#fff;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* =========================================================
   4. BUTTONS / PILLS / SCANNER / NOTES / SELF CARD
========================================================= */

/* Pills */
.pillGroup{
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
}

.connectRow .pillGroup{
  min-width:0 !important;
  flex:1 1 auto !important;
  gap:10px;
}

.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.18);

  font-weight:900;
  font-size:.92rem !important;
  line-height:1.1 !important;
  letter-spacing:.1px !important;
}

.userNamePill{
  min-height:50px !important;
  height:50px !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  padding:0 12px !important;
  border-radius:999px !important;

  background:linear-gradient(90deg, var(--blue1), var(--blue2)) !important;
  color:#fff !important;
  border:1.5px solid rgba(255,255,255,.22) !important;

  font-size:13px !important;
  font-weight:900 !important;
  line-height:1 !important;
  white-space:nowrap !important;

  max-width:150px !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -2px 0 rgba(0,0,0,.24),
    0 8px 16px rgba(0,0,0,.12) !important;
}

/* Desktop / tablet scan pill size */
#scanPill{
  min-width:0 !important;
  max-width:180px !important;

  height:50px !important;
  min-height:50px !important;

  padding:0 14px !important;

  font-size:18px !important;
  font-weight:900 !important;
  line-height:1 !important;

  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  text-align:center;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.pillOk{
  background:
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 45%),
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,0) 55%),
    #dcfce7 !important;
  color:#065f46 !important;
  border:1px solid rgba(22,163,74,.28) !important;
  box-shadow:
    0 10px 18px rgba(0,0,0,.18),
    inset 0 2px 0 rgba(255,255,255,.65),
    inset 0 -4px 0 rgba(0,0,0,.12);
}

.pillBad{
  background:#fee2e2 !important;
  color:#7f1d1d !important;
  border:1px solid rgba(220,38,38,.26) !important;
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,.16),
    inset 0 -1px 0 rgba(255,255,255,.55);
}

.pillScanIn{
  background:linear-gradient(180deg, rgba(255,255,255,.30), rgba(0,0,0,.10)), #16a34a !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.25) !important;
  box-shadow:
    0 10px 18px rgba(0,0,0,.18),
    inset 0 2px 0 rgba(255,255,255,.35),
    inset 0 -4px 0 rgba(0,0,0,.18);
}

.pillScanOut{
  background:linear-gradient(180deg, #d88432 0%, #bb651d 45%, #8d4211 100%);
  border:1px solid #6f320c;
  color:#fff;
  text-shadow:0 1px 0 rgba(0,0,0,.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 2px 0 #8a4012,
    0 4px 10px rgba(0,0,0,.18);
}

#scanPill,
#scanPill.pillScanOut,
#scanPill.pillScanIn{
  border:0 !important;
}




/* Scanner Card */
#scannerCard{
  background:linear-gradient(90deg, #0f3c7a, #1a6cb6) !important;
  color:#fff !important;

  border:1.5px solid rgba(255,255,255,.18) !important;
  border-radius:18px;
  margin-top:1px !important;

  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.22),
    inset 0 -3px 0 rgba(0,0,0,.28),
    0 10px 22px rgba(0,0,0,.12) !important;
}

#scannerCard .divider,
.divider{
  height:1px;
  width:100%;
  background:rgba(255,255,255,.18);
  margin:12px 0;
}

#scannerCard #scanDivider{
  background:rgba(255,255,255,.28) !important;
  margin:12px 0 !important;
}

#scannerCard textarea{
  background:#fff !important;
  color:#111 !important;
  border:2px solid rgba(255,255,255,.22) !important;
}

.actionRow{
  display:flex;
  gap:12px;
  align-items:stretch;
}

.actionRow .actionGrid4{
  flex:1 1 auto;
}

.actionGrid4{
  display:grid;
  grid-template-columns:repeat(3, 1fr) auto;
  gap:18px;
  width:100%;
}

.actionGrid4 .btn{
  width:100%;
  min-height:80px;

  border-radius:999px !important;
  font-weight:650;
  letter-spacing:.5px;

  box-shadow:var(--btn3d_outer), var(--btn3d_shine), var(--btn3d_depth);
  transform:translateY(0);
  transition:transform .06s ease, filter .12s ease, box-shadow .12s ease;
}

.actionGrid4 .btn:active{
  transform:translateY(2px);
  box-shadow:var(--press_outer), var(--press_shine), var(--press_depth);
  filter:saturate(1.05);
}

.actionGrid4 .btnOk{
  background:linear-gradient(180deg, rgba(255,255,255,.20), rgba(0,0,0,.10)), var(--ok);
  color:#fff !important;
}

.actionGrid4 .btnPri{
  background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(0,0,0,.18)), #0b2a6f !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.18) !important;
}

.actionGrid4 .btnStop{
  background:linear-gradient(180deg, rgba(255,255,255,.20), rgba(0,0,0,.10)), #e95c43 !important;
  color:#fff7f7 !important;
  border:2px solid #e75136 !important;
}

.actionGrid4 .btnBad{
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(0,0,0,.16)), #b86a34 !important;
  color:#fff !important;
  border:1px solid #a95e2d !important;
}

.actionGrid4 .btn:disabled{
  opacity:.50;
  filter:grayscale(.25);
  transform:none !important;
  box-shadow:
    0 10px 18px rgba(0,0,0,.12),
    inset 0 2px 0 rgba(255,255,255,.22),
    inset 0 -4px 0 rgba(0,0,0,.14);
}

#btnViewer{
  flex:1 1 auto;
  background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(0,0,0,.14)), #2563eb !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.22) !important;
  border-radius:999px !important;
}

#btnViewer:active{
  filter:saturate(1.10);
}

#btnViewer:disabled{
  opacity:.45 !important;
  filter:grayscale(.35);
  box-shadow:none !important;
  cursor:not-allowed;
}

.btnMoreThin{
  width:54px !important;
  min-width:54px !important;
  padding:0 !important;

  font-size:34px !important;
  font-weight:900 !important;

  border-radius:999px !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  box-shadow:var(--btn3d_outer), var(--btn3d_shine), var(--btn3d_depth);
  transition:transform .06s ease, filter .12s ease, box-shadow .12s ease;
}

.btnMoreThin:active{
  transform:translateY(2px);
  box-shadow:var(--press_outer), var(--press_shine), var(--press_depth);
}

#btnMore.btnMoreThin{
  background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(0,0,0,.12)), #2a7fd0 !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.20) !important;
}

/* Viewer-only disabled states */
#scannerCard.viewerOnly button:disabled,
#selfCard.viewerOnly button:disabled{
  opacity:.38 !important;
  filter:grayscale(1) blur(.25px) !important;
  box-shadow:none !important;
}

#scannerCard.viewerOnly #btnViewer{
  opacity:1 !important;
  filter:none !important;
  box-shadow:var(--btn3d_outer), var(--btn3d_shine), var(--btn3d_depth) !important;
}

/* Notes */
.notesRow{
  display:grid;
  grid-template-columns:140px 1fr;
  gap:12px;
  align-items:start;
  margin-top:10px;
}

.notesLeft{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:4px;
}

.noLunchLabel,
.siteNotesToggle{
  display:flex;
  flex-direction:row-reverse;
  align-items:center;
  gap:8px;
  width:100%;
}

.noLunchText,
.siteNotesText{
  flex:1;
  text-align:right;
}

.noLunchText{
  font-size:20px;
  font-weight:500;
  line-height:1.1;
}

.siteNotesLabel{
  font-size:20px;
  font-weight:700;
  line-height:1.1;
}

.noLunchLabel input[type="checkbox"]{
  transform:scale(1.25);
  margin-top:1px;
}

.notesRight{
  position:relative;
  min-width:0;
}

.notesRight textarea{
  width:100%;
  min-height:58px !important;
  height:58px !important;

  padding:8px 12px !important;
  padding-right:64px !important;

  resize:none;
  line-height:1.2;
}

#siteNotes:disabled,
.inp:disabled{
  background:linear-gradient(180deg, rgba(15,23,42,.06), rgba(15,23,42,.02)), #d9ecff !important;
  color:rgba(15,23,42,.55) !important;
  border:1px solid rgba(15,23,42,.16) !important;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.10) !important;
  opacity:1 !important;
  -webkit-text-fill-color:rgba(15,23,42,.55) !important;
  cursor:not-allowed;
}

.notesCount{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);

  font-size:14px;
  color:rgba(15,23,42,.45);
  pointer-events:none;
}

/* Camera / QR reader */
#cameraCard{
  background:linear-gradient(90deg, #0f3c7a, #1a6cb6) !important;
  color:#fff !important;

  border:1.5px solid rgba(255,255,255,.18) !important;
  border-radius:14px !important;

  margin-top:6px !important;
  padding:6px !important;

  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.22),
    inset 0 -3px 0 rgba(0,0,0,.28),
    0 10px 22px rgba(0,0,0,.12) !important;
}

#cameraCard.disabled{
  opacity:.55;
  filter:grayscale(.25);
  pointer-events:none;
}

.scanFrame{
  width:100%;
  max-width:100%;
  min-width:0;

  position:relative;
  overflow:hidden;

  background:#444545 !important;
  border:1px solid rgba(15,23,42,.12) !important;
  border-radius:12px !important;

  padding:4px !important;
  margin-top:0 !important;
}

#qr-reader{
  width:100% !important;
  max-width:700px !important;
  height:min(52dvh, 420px) !important;
  max-height:min(52dvh, 420px) !important;

  margin:0 auto !important;
  border-radius:12px !important;
  background:#000 !important;
  overflow:hidden !important;
  border:none !important;
}

#qr-reader video{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}

/* Camera mini buttons */
.stopMini{
  position:absolute;
  left:12px;
  top:50%;
  bottom:auto;
  transform:translateY(-50%);

  z-index:50;
  width:46px;
  height:46px;

  border-radius:14px;
  border:1px solid rgba(255,255,255,.22);

  background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(0,0,0,.18)), #e95c43;
  color:#fff;

  font-size:22px;
  font-weight:900;
  line-height:1;

  display:none;
  align-items:center;
  justify-content:center;

  box-shadow:
    0 10px 18px rgba(0,0,0,.22),
    inset 0 2px 0 rgba(255,255,255,.22),
    inset 0 -3px 0 rgba(0,0,0,.22);

  cursor:pointer;
}

.stopMini:active{
  transform:translateY(-50%) translateY(1px);
}

.torchMini{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);

  z-index:50;
  width:46px;
  height:46px;

  border-radius:14px;
  border:1px solid rgba(255,255,255,.22);

  background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(0,0,0,.24)), #0f172a !important;
  color:#fff !important;

  font-size:16px;
  font-weight:800;
  line-height:1;

  display:none;
  align-items:center;
  justify-content:center;

  box-shadow:
    0 10px 18px rgba(0,0,0,.22),
    inset 0 2px 0 rgba(255,255,255,.22),
    inset 0 -3px 0 rgba(0,0,0,.22);

  cursor:pointer;
}

.torchMini:active{
  transform:translateY(-50%) translateY(1px);
}

.torchMini.active{
  background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(0,0,0,.24)), #1e3a8a !important;
  color:#fff !important;
}

/* Self Card */
#selfCard{
  background:linear-gradient(90deg, #0f3c7a, #1a6cb6) !important;
  color:#fff !important;

  border:1.5px solid rgba(255,255,255,.18) !important;
  border-radius:18px !important;

  margin-top:10px !important;

  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.22),
    inset 0 -3px 0 rgba(0,0,0,.28),
    0 10px 22px rgba(0,0,0,.12) !important;
}

#selfCard .divider{
  background:rgba(255,255,255,.18) !important;
}

.selfGrid3{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
  width:100%;
}

.btnSelfBlue{
  width:100%;
  min-height:80px;

  border-radius:999px !important;

  font-weight:750;
  letter-spacing:.4px;

  box-shadow:var(--btn3d_outer), var(--btn3d_shine), var(--btn3d_depth);
  transform:translateY(0);
  transition:transform .06s ease, filter .12s ease, box-shadow .12s ease;

  background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(0,0,0,.12)), #2a7fd0 !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.20) !important;
}

.btnSelfBlue:active{
  transform:translateY(2px);
  box-shadow:var(--press_outer), var(--press_shine), var(--press_depth);
  filter:saturate(1.05);
}

.btnSelfBlue:disabled{
  opacity:.50;
  filter:grayscale(.25);
  transform:none !important;
  box-shadow:
    0 10px 18px rgba(0,0,0,.12),
    inset 0 2px 0 rgba(255,255,255,.22),
    inset 0 -4px 0 rgba(0,0,0,.14);
}

#btnSelfIn,
#btnSelfOut,
#btnLocation{
  min-width:0 !important;
  width:100% !important;

  padding:0 10px !important;
  font-size:26px !important;
  border-radius:999px !important;
}

#btnSelfIn{
  background:#70ec9d !important;
  color:#111 !important;
  border-color:rgba(0,0,0,.12) !important;
}

#btnSelfOut{
  background:#faab6b !important;
  color:#111 !important;
  border-color:rgba(0,0,0,.12) !important;
}

#btnLocation{
  background:#ffd966 !important;
  color:#111 !important;
  border-color:rgba(0,0,0,.12) !important;
}

#btnSelfIn:active,
#btnSelfOut:active{
  filter:brightness(.97);
}

/* =========================================================
   5. VIEWER MODAL
========================================================= */

#viewerModal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
}

#viewerModal .vModalBg{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.45);
}

#viewerModal .vModalCard{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);

  width:min(1020px, 96vw);
  max-height:92vh;
  margin:0;

  background:#fff;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 18px 40px rgba(0,0,0,.25);

  display:flex;
  flex-direction:column;
}

#viewerModal .vHeader{
  background:linear-gradient(90deg, #0f3c7a, #1a6cb6);
  color:#fff;

  padding:14px 16px;

  display:flex;
  align-items:center;
  justify-content:space-between;
}

#viewerModal .vTitle{
  font-size:32px;
  font-weight:900;
  line-height:1.1;
}

#viewerModal .vClose{
  width:48px;
  height:48px;

  border:none;
  border-radius:12px;
  background:rgba(255,255,255,.15);
  color:#fff;

  font-size:22px;
  font-weight:900;
  cursor:pointer;
}

#viewerModal .vTopShell{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:stretch;

  background:#d9ecff;
  border-bottom:1px solid rgba(15,23,42,.12);
}

#viewerModal .vTopLeft{
  display:grid;
  grid-template-rows:auto auto;
}

#viewerModal .vControlsArea{
  padding:10px 14px 10px;
}

#viewerModal .vRow{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

#viewerModal #v_date,
#viewerModal #v_q{
  height:46px !important;
  min-height:46px !important;
  line-height:46px !important;

  padding:0 12px !important;
  font-size:16px !important;
  border-radius:12px !important;
}

#viewerModal .vStatsbar{
  display:flex;
  align-items:center;
  gap:16px;

  padding:10px 14px 14px;
  border-top:1px solid rgba(15,23,42,.12);
}

#viewerModal .vStatsleft{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

#viewerModal .vStatitem .k{
  font-weight:600;
  color:#334155;
  font-size:16px;
}

#viewerModal .vStatitem .v{
  font-size:20px;
  font-weight:700;
}

#viewerModal .vFilterGroup{
  display:flex;
  gap:14px;
  margin-left:12px;
  flex-wrap:wrap;
}

#viewerModal .chk{
  font-size:18px;
  font-weight:700;
  color:#0f172a;
}

#viewerModal .chk input{
  transform:scale(1.1);
  margin-right:6px;
}

#viewerModal .vOpenOnly{
  margin-left:auto;
}

#viewerModal .vTopRight{
  padding:10px 14px 12px;
  border-left:1px solid rgba(15,23,42,.12);

  display:flex;
  gap:12px;
  align-self:stretch;
}

#viewerModal .vTopRight button{
  cursor:pointer;

  min-height:52px;
  min-width:110px;

  padding:10px 14px;

  border:none;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.18);

  background:#1a6cb6;
  color:#fff;

  font-size:18px;
  font-weight:800;
}

#viewerModal .vBtnDark{
  background:#0f3c7a !important;
}

#viewerModal .vTableWrap{
  overflow:auto;
  flex:1 1 auto;
  max-height:68vh;
}

#viewerModal .vTable{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
}

#viewerModal .vTable thead th{
  position:sticky;
  top:0;
  z-index:5;

  background:linear-gradient(180deg, #2a7fd0 0%, #1a6cb6 55%, #155a9a 100%);
  color:#f3f5f7;

  font-weight:800;
  padding:12px 10px;

  border-bottom:1px solid #0a2246;
  text-transform:uppercase;
  letter-spacing:.03em;
}

#viewerModal .vTable th,
#viewerModal .vTable td{
  border-bottom:1px solid #e5e7eb;

  padding:12px 10px;
  text-align:left;
  vertical-align:top;

  font-size:18px;
  line-height:1.25;

  overflow-wrap:anywhere;
  word-break:break-word;
}

#viewerModal .vTable tbody tr:nth-child(even){
  background:#f5f9ff;
}

#viewerModal .vTable tbody tr:nth-child(odd){
  background:#fff;
}

#viewerModal .tag{
  display:inline-block;

  padding:2px 8px;
  margin-left:6px;

  border-radius:999px;
  background:#e5e7eb;
  color:#111;

  font-size:12px;
  font-weight:800;
}

#viewerModal .tag.open{
  background:#dcfce7;
  color:#065f46;
}

#viewerModal .vStatus{
  padding:10px 12px;

  border-top:1px solid rgba(15,23,42,.12);
  background:#fbfbfd;
  color:#0f172a;

  font-size:16px;
  font-weight:600;
}

/* Viewer column alignment - 7 columns:
   1 ID | 2 Name | 3 IN | 4 Site In | 5 OUT | 6 Site Out | 7 Kiosk
*/
#viewerModal .vTable thead th:nth-child(1),
#viewerModal .vTable tbody td:nth-child(1),
#viewerModal .vTable thead th:nth-child(3),
#viewerModal .vTable tbody td:nth-child(3),
#viewerModal .vTable thead th:nth-child(5),
#viewerModal .vTable tbody td:nth-child(5),
#viewerModal .vTable thead th:nth-child(7),
#viewerModal .vTable tbody td:nth-child(7){
  text-align:center !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

#viewerModal .vTable thead th:nth-child(1),
#viewerModal .vTable tbody td:nth-child(1){
  width:65px;
  max-width:65px;
}

#viewerModal .vTable thead th:nth-child(3),
#viewerModal .vTable tbody td:nth-child(3),
#viewerModal .vTable thead th:nth-child(5),
#viewerModal .vTable tbody td:nth-child(5){
  width:90px;
  max-width:90px;
}

#viewerModal .vTable thead th:nth-child(4),
#viewerModal .vTable tbody td:nth-child(4),
#viewerModal .vTable thead th:nth-child(6),
#viewerModal .vTable tbody td:nth-child(6){
  width:130px;
  max-width:130px;
}

#viewerModal .vTable thead th:nth-child(7),
#viewerModal .vTable tbody td:nth-child(7){
  width:100px;
  max-width:100px;
}

/* =========================================================
   6. SELF CONFIRM MODAL - NICER PROMPT BOX
========================================================= */

.selfConfirmModal{
  position:fixed;
  inset:0;

  background:
    radial-gradient(circle at top, rgba(26,108,182,.24), transparent 38%),
    rgba(0,0,0,.48);

  align-items:center;
  justify-content:center;

  padding:18px;
  z-index:3000;

  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}

.selfConfirmModal[hidden]{
  display:none !important;
}

.selfConfirmModal:not([hidden]){
  display:flex;
}

.selfConfirmBox{
  position:relative;
  width:min(92vw, 430px);

  background:linear-gradient(180deg, #ffffff 0%, #eef7ff 100%);
  border-radius:22px;

  border:1px solid rgba(15,60,122,.16);

  box-shadow:
    0 24px 55px rgba(0,0,0,.34),
    inset 0 2px 0 rgba(255,255,255,.85);

  padding:0 16px 16px;
  text-align:center;

  overflow:hidden;
  transform:translateY(0);
}

/* Blue top header strip */
.selfConfirmBox::before{
  content:"";
  display:block;
  height:12px;
  margin:0 -16px 16px;

  background:linear-gradient(90deg, #0f3c7a, #1a6cb6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 4px 12px rgba(15,60,122,.18);
}

.selfConfirmTitle{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:42px;
  padding:0 18px;
  margin:2px auto 12px;

  border-radius:999px;

  background:linear-gradient(90deg, #0f3c7a, #1a6cb6);
  color:#fff;

  font-size:22px;
  font-weight:900;
  line-height:1.1;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -3px 0 rgba(0,0,0,.22),
    0 10px 20px rgba(15,60,122,.22);
}

.selfConfirmMsg{
  margin:0 0 16px;
  padding:14px 12px;

  border-radius:16px;

  background:#ffffff;
  border:1px solid rgba(15,60,122,.12);

  color:#102033;

  font-size:18px;
  font-weight:700;
  line-height:1.35;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.80),
    0 8px 18px rgba(15,60,122,.08);
}

.selfConfirmBtns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.selfConfirmBtn{
  height:48px;

  border:0;
  border-radius:999px;

  font-size:17px;
  font-weight:900;

  cursor:pointer;

  box-shadow:
    0 10px 18px rgba(0,0,0,.18),
    inset 0 2px 0 rgba(255,255,255,.34),
    inset 0 -4px 0 rgba(0,0,0,.16);

  transition:
    transform .06s ease,
    filter .12s ease,
    box-shadow .12s ease;
}

.selfConfirmBtn:active{
  transform:translateY(2px);
  box-shadow:
    0 6px 12px rgba(0,0,0,.16),
    inset 0 2px 0 rgba(255,255,255,.28),
    inset 0 -2px 0 rgba(0,0,0,.22);
}

.selfConfirmBtn.cancel{
  background:linear-gradient(180deg, #ffffff, #dfe7ef);
  color:#1f2937;
  border:1px solid rgba(15,23,42,.12);
}

.selfConfirmBtn.proceed{
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(0,0,0,.10)), #16a34a;
  color:#fff;
  border:1px solid rgba(255,255,255,.22);
}

/* Mobile */
@media (max-width:560px){
  .selfConfirmModal{
    padding:14px;
  }

  .selfConfirmBox{
    width:min(94vw, 390px);
    border-radius:20px;
    padding:0 14px 14px;
  }

  .selfConfirmBox::before{
    margin:0 -14px 14px;
    height:10px;
  }

  .selfConfirmTitle{
    min-height:38px;
    padding:0 15px;
    margin-bottom:10px;

    font-size:18px;
  }

  .selfConfirmMsg{
    padding:12px 10px;
    margin-bottom:14px;

    font-size:15px;
    line-height:1.32;
  }

  .selfConfirmBtn{
    height:42px;
    font-size:14px;
  }
}

/* =========================================================
   7. UPDATE BAR
========================================================= */

.updateBar{
  position:fixed;
  left:50%;
  bottom:16px;
  transform:translateX(-50%);
  z-index:4000;

  width:min(94vw, 520px);
  padding:12px 14px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  background:linear-gradient(90deg, #0f3c7a, #1a6cb6);
  color:#fff;
  border:1px solid rgba(255,255,255,.18);
  border-radius:16px;
  box-shadow:0 14px 30px rgba(0,0,0,.24);
}

.updateBar[hidden]{
  display:none !important;
}

.updateBarText{
  min-width:0;

  display:flex;
  align-items:center;
  gap:10px;

  font-size:15px;
  font-weight:700;
  line-height:1.25;
}

.updateBarText #updateBarMsg{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}

.updateBarBadge{
  flex:0 0 auto;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:28px;
  padding:0 10px;

  border-radius:999px;
  background:#ffd966;
  color:#111;

  font-size:12px;
  font-weight:900;
  letter-spacing:.06em;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    0 4px 10px rgba(0,0,0,.18);

  animation:updateBadgePulse 1.2s ease-in-out infinite;
}

.updateBarBtns{
  flex:0 0 auto;
  display:flex;
  gap:8px;
}

.updateBarBtn{
  height:38px;
  padding:0 12px;

  border:0;
  border-radius:10px;

  font-size:14px;
  font-weight:800;

  cursor:pointer;
}

.updateBarBtn.reload{
  background:#70ec9d;
  color:#111;
}

.updateBarBtn.later{
  background:#e5e7eb;
  color:#111;
}

@keyframes updateBadgePulse{
  0%, 100%{
    transform:scale(1);
  }
  50%{
    transform:scale(1.05);
  }
}

/* =========================================================
   8. RESPONSIVE / MOBILE
========================================================= */

@media (max-width:560px){

  html{
    font-size:16px;
  }

  body::before{
    font-size:42px !important;
    letter-spacing:2px !important;
    line-height:1.15;
    padding:6px 0;
    bottom:14px !important;
  }

  input,
  select,
  textarea,
  button{
    font-size:16px !important;
  }

  .wrap{
    max-width:100% !important;
    height:100dvh !important;
    min-height:100dvh !important;
    max-height:100dvh !important;

    padding:4px 10px 0 !important;
    overflow:hidden !important;
  }

  .stickyHeader{
    flex:0 0 auto !important;
    position:relative !important;
    z-index:999 !important;

    padding-bottom:6px !important;
    overflow:visible !important;
  }

  .scrollArea{
    flex:1 1 auto !important;
    min-height:0 !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;

    -webkit-overflow-scrolling:touch;
    touch-action:pan-y;

    padding-bottom:14px !important;
  }

  .topbar{
    min-height:57px;
    padding:6px 10px;
    margin:4px 0 8px;
    border-radius:14px;
  }

  .topbar h1{
    font-size:1.33rem;
    line-height:1.15;
    letter-spacing:0;
  }

  .topbarVer{
    font-size:.59rem;
    right:10px;
    bottom:8px;
  }

  .card{
    padding:10px;
    margin:8px 0;
    border-radius:14px;
  }

  /* Connect row */
  .connectRow{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    gap:6px !important;
    flex-wrap:nowrap !important;
  }

  .connectRow #accessKey{
    width:auto !important;
    min-width:0 !important;
    max-width:104px !important;
    flex:0 1 104px !important;

    height:34px !important;
    min-height:34px !important;
    line-height:34px !important;

    padding:0 7px !important;

    font-size:16px !important; /* keep 16px to prevent phone zoom */
    text-align:center !important;

    border-radius:10px !important;
  }

  #accessKey.masked{
    font-size:13px !important;
    letter-spacing:2px !important;
  }


  #btnConnect,
  #btnDisconnect,
  .connectRow .btnPri,
  button.btn.btnGhost.btnDisconnect{
    width:40px !important;
    min-width:40px !important;
    max-width:40px !important;

    height:40px !important;
    min-height:40px !important;
    max-height:40px !important;

    flex:0 0 40px !important;

    font-size:20px !important;
    border-radius:50% !important;
  }

  .connectRow .pillGroup{
    min-width:0 !important;
    max-width:100% !important;
    flex:1 1 auto !important;

    gap:5px !important;
    overflow:hidden !important;
    justify-content:center !important;
  }

  .userNamePill,
  #userNamePill{
    min-width:0 !important;
    max-width:108px !important;

    height:36px !important;
    min-height:36px !important;

    padding:0 8px !important;

    font-size:11.5px !important;

    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;

    flex:0 1 auto !important;
  }

  #scanPill{
    min-width:0 !important;
    max-width:76px !important;

    height:36px !important;
    min-height:36px !important;

    padding:0 7px !important;

    font-size:11px !important;

    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;

    flex:0 1 auto !important;
  }

  .connectDivider{
    margin:8px 0 8px;
  }

  /* Status */
  #statusBox{
    margin-top:8px !important;
    min-height:38px !important;
    padding:7px 9px !important;

    border-radius:11px !important;

    font-size:13px !important;
    line-height:1.18 !important;
  }

  /* Last scan */
  .lastScanCard{
    padding:8px 9px;
    border-radius:11px;
  }

  .lastScanTop,
  .lastScanTopLeft{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    overflow:hidden !important;
  }

  .lastScanTop{
    gap:6px;
    align-items:center;
  }

  .lastScanTopLeft{
    gap:6px;
    flex-wrap:nowrap;
  }

  .lastScanHead{
    font-size:.50rem;
  }

  .lastScanDot{
    font-size:.48rem;
  }

  .lastScanPerson{
    max-width:118px !important;
    flex:1 1 auto !important;

    font-size:.70rem;

    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .lastScanAction{
    max-width:78px !important;

    min-height:22px;
    margin-left:3px !important;

    padding:2px 6px !important;

    font-size:.54rem;

    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .lastScanGrid{
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:6px;
  }

  .lastScanItem{
    min-width:0 !important;
    padding:6px 7px;
    border-radius:8px;

    overflow:hidden !important;
  }

  .lastScanItem .k{
    font-size:.44rem;
  }

  .lastScanItem .v{
    min-width:0 !important;
    max-width:100% !important;

    font-size:.62rem;

    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  /* Scanner buttons */
  .actionRow{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    gap:7px !important;
    align-items:stretch !important;
  }

  .actionGrid4{
    min-width:0 !important;
    max-width:100% !important;
    flex:1 1 auto !important;

    display:grid !important;
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    grid-auto-rows:45px !important;
    gap:8px !important;
  }

  .actionGrid4 .btn{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;

    height:45px !important;
    min-height:45px !important;

    padding:0 4px !important;

    border-radius:999px !important;

    font-size:13px !important;
    line-height:1 !important;
    white-space:nowrap !important;
    letter-spacing:0 !important;
  }

  #scannerCard .btnOk,
  #scannerCard .btnStop,
  #scannerCard .btnBad,
  #btnViewer{
    height:45px !important;
    min-height:45px !important;

    padding:0 4px !important;

    font-size:13px !important;
    line-height:1 !important;
    white-space:nowrap !important;
    border-radius:999px !important;
  }

  .actionGrid4 .btnOk{
    border:1px solid rgba(0,0,0,.18) !important;
  }

  #btnMore,
  .btnMoreThin{
    width:44px !important;
    min-width:44px !important;
    max-width:44px !important;

    height:45px !important;
    min-height:45px !important;

    flex:0 0 44px !important;

    font-size:24px !important;
    border-radius:999px !important;
  }

  /* Notes */
  .notesRow{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    grid-template-columns:86px minmax(0,1fr) !important;
    gap:7px !important;
    margin-top:8px;
  }

  .notesLeft,
  .notesRight{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  .notesLeft{
    gap:2px;
  }

  .noLunchLabel,
  .siteNotesToggle{
    min-width:0 !important;
    max-width:100% !important;
    gap:5px !important;
  }

  .noLunchText,
  .siteNotesText{
    font-size:11px !important;
    line-height:1.1;
    white-space:nowrap !important;
  }

  .noLunchLabel input[type="checkbox"]{
    transform:scale(.93);
  }

  .notesRight textarea,
  #siteNotes{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    min-height:38px !important;
    height:38px !important;

    padding:6px 38px 6px 8px !important;

    border-radius:12px !important;

    font-size:13px !important;
  }

  .notesCount{
    right:6px !important;
    font-size:10px !important;
  }

  /* Camera */
  #cameraCard{
    margin-top:4px !important;
    padding:4px !important;
    border-radius:10px !important;
  }

  .scanFrame{
    padding:2px !important;
    border-radius:8px !important;
  }

  #qr-reader{
    max-width:100% !important;
    border-radius:12px !important;
  }

  #qr-reader,
  #qr-reader video,
  #qr-reader canvas{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  .stopMini{
    width:38px !important;
    height:38px !important;

    left:8px !important;
    top:50% !important;
    bottom:auto !important;
    transform:translateY(-50%) !important;

    border-radius:10px !important;

    font-size:16px !important;
  }

  .torchMini{
    width:40px !important;
    height:40px !important;

    right:8px !important;
    top:50% !important;
    transform:translateY(-50%) !important;

    border-radius:10px !important;

    font-size:13px !important;
  }

  /* Self */
  .selfGrid3{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    grid-template-columns:repeat(3, minmax(0,1fr)) !important;
    gap:7px !important;
  }

  .selfGrid3 .btnSelfBlue,
    #btnSelfIn,
    #btnSelfOut,
    #btnLocation{
      width:100% !important;
      min-width:0 !important;
      max-width:100% !important;

      height:45px !important;
      min-height:45px !important;
      max-height:45px !important;

      padding:0 6px !important;

      border-radius:999px !important;

      font-size:12px !important;
      line-height:1 !important;
      white-space:nowrap !important;

      display:inline-flex !important;
      align-items:center !important;
      justify-content:center !important;
    }

  /* Viewer mobile */
  #viewerModal,
  #viewerModal .vModalCard,
  #viewerModal .vTopShell,
  #viewerModal .vTopLeft,
  #viewerModal .vControlsArea,
  #viewerModal .vStatsbar,
  #viewerModal .vTableWrap{
    max-width:100% !important;
    min-width:0 !important;
  }

  #viewerModal .vModalCard{
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    transform:translate(-50%, -50%) !important;

    width:96vw !important;
    max-height:94vh !important;
    margin:0 !important;

    border-radius:12px !important;
  }

  #viewerModal .vHeader{
    padding:8px 10px !important;
  }

  #viewerModal .vTitle{
    font-size:16px !important;
    line-height:1.1 !important;
  }

  #viewerModal .vClose{
    width:34px !important;
    height:34px !important;
    font-size:16px !important;
    border-radius:8px !important;
  }

  #viewerModal .vTopShell{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 86px !important;
    align-items:stretch !important;
  }

  #viewerModal .vControlsArea{
    padding:8px !important;
    overflow:hidden !important;
  }

  #viewerModal .vRow{
    display:grid !important;
    grid-template-columns:calc(50% - 3px) calc(50% - 3px) !important;
    gap:6px !important;
    width:100% !important;
    align-items:center !important;
  }

  #viewerModal #v_date,
  #viewerModal #v_q{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;

    box-sizing:border-box !important;

    height:34px !important;
    min-height:34px !important;
    line-height:34px !important;

    padding:0 6px !important;

    font-size:11px !important;
    border-radius:10px !important;

    overflow:hidden !important;

    background:#fff !important;
    border:1px solid rgba(15,23,42,.18) !important;
    color:#111 !important;
  }

  #viewerModal #v_date{
    -webkit-appearance:none !important;
    appearance:none !important;
  }

  #viewerModal .vStatsbar{
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;

    gap:8px !important;
    padding:8px !important;
  }

  #viewerModal .vStatsleft{
    display:flex !important;
    gap:10px !important;
    flex-wrap:wrap !important;
    align-items:center !important;
  }

  #viewerModal .vStatitem{
    display:flex !important;
    align-items:center !important;
    gap:4px !important;
  }

  #viewerModal .vStatitem .k{
    font-size:11px !important;
    line-height:1.1 !important;
  }

  #viewerModal .vStatitem .v{
    font-size:13px !important;
    line-height:1.1 !important;
  }

  #viewerModal .vFilterGroup{
    display:flex !important;
    gap:8px !important;
    flex-wrap:wrap !important;
    margin-left:4px !important;
    width:auto !important;
    min-width:0 !important;
    align-items:center !important;
  }

  #viewerModal .vOpenOnly{
    margin-left:auto !important;
  }

  #viewerModal .chk{
    font-size:11px !important;
    line-height:1.1 !important;
    white-space:nowrap !important;
  }

  #viewerModal .chk input{
    transform:scale(1) !important;
    margin-right:4px !important;
  }

  #viewerModal .vTopRight{
    display:flex !important;
    flex-direction:column !important;
    gap:8px !important;
    padding:8px !important;

    border-left:1px solid rgba(15,23,42,.12) !important;
    border-top:0 !important;

    justify-content:center !important;
    align-self:stretch !important;
  }

  #viewerModal .vTopRight button{
    width:100% !important;
    min-width:0 !important;
    min-height:34px !important;

    padding:6px 8px !important;

    font-size:12px !important;
    border-radius:8px !important;
  }

  #viewerModal .vTableWrap{
    overflow-y:auto !important;
    overflow-x:auto !important;

    flex:1 1 auto !important;
    min-height:0 !important;
    max-height:58vh !important;

    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    touch-action:pan-y;
  }

  #viewerModal .vTable{
    min-width:0 !important;
    width:100% !important;
    table-layout:fixed !important;
  }

  #viewerModal .vTable th,
  #viewerModal .vTable td{
    font-size:11px !important;
    padding:6px 3px !important;
    line-height:1.12 !important;

    white-space:normal !important;
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
  }

  /* Viewer mobile column widths - 7 columns */
  #viewerModal .vTable thead th:nth-child(1),
  #viewerModal .vTable tbody td:nth-child(1){
    width:8% !important;
    max-width:none !important;
    text-align:center !important;
  }

  #viewerModal .vTable thead th:nth-child(2),
  #viewerModal .vTable tbody td:nth-child(2){
    width:24% !important;
  }

  #viewerModal .vTable thead th:nth-child(3),
  #viewerModal .vTable tbody td:nth-child(3),
  #viewerModal .vTable thead th:nth-child(5),
  #viewerModal .vTable tbody td:nth-child(5){
    width:10% !important;
    max-width:none !important;
    text-align:center !important;
  }

  #viewerModal .vTable thead th:nth-child(4),
  #viewerModal .vTable tbody td:nth-child(4),
  #viewerModal .vTable thead th:nth-child(6),
  #viewerModal .vTable tbody td:nth-child(6){
    width:18% !important;
    max-width:none !important;
  }

  #viewerModal .vTable thead th:nth-child(7),
  #viewerModal .vTable tbody td:nth-child(7){
    width:10% !important;
    max-width:none !important;
    text-align:center !important;
  }

  #viewerModal .tag{
    font-size:8px !important;
    padding:1px 4px !important;
    margin-left:2px !important;
  }

  #viewerModal .vStatus{
    font-size:11px !important;
    padding:8px !important;
    line-height:1.1 !important;
  }


  /* Self confirm mobile */
  .selfConfirmTitle{
    font-size:20px;
  }

  .selfConfirmMsg{
    font-size:16px;
  }

  .selfConfirmBtn{
    height:44px;
    font-size:15px;
  }

  /* Update bar mobile */
  .updateBar{
    bottom:10px;
    width:min(94vw, 420px);
    padding:10px 12px;
    border-radius:12px;
    gap:10px;
  }

  .updateBarText{
    gap:8px;
    font-size:12px;
    line-height:1.2;
  }

  .updateBarBadge{
    min-height:22px;
    padding:0 8px;
    font-size:10px;
  }

  .updateBarBtns{
    gap:6px;
  }

  .updateBarBtn{
    height:32px;
    padding:0 10px;
    border-radius:8px;
    font-size:12px;
  }
}

#viewerModal .vTable td[data-loc]{
  cursor:pointer;
}

#viewerModal .vTable td[data-loc]:active{
  filter:brightness(.92);
}

/* =========================================================
   9. ADD / EDIT LOCATION MODAL
========================================================= */

#btnAddLocation{
  background:#70ec9d !important;
  color:#111 !important;
  border-color:rgba(0,0,0,.12) !important;
}

#btnEditLocation{
  background:#ffd966 !important;
  color:#111 !important;
  border-color:rgba(0,0,0,.12) !important;
}

#btnClearLocCache,
.btnLocCache{
  background:#d9e2ef !important;
  color:#102033 !important;
  border-color:rgba(0,0,0,.12) !important;
}

.locModal{
  position:fixed;
  inset:0;
  z-index:3100;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:18px;

  background:
    radial-gradient(circle at top, rgba(26,108,182,.24), transparent 38%),
    rgba(0,0,0,.48);

  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}

.locModal[hidden]{
  display:none !important;
}

.locModalBg{
  position:absolute;
  inset:0;
}

.locModalBox{
  position:relative;

  width:min(94vw, 560px);
  max-height:92vh;
  overflow:auto;

  padding:0 16px 16px;

  background:linear-gradient(180deg, #ffffff 0%, #eef7ff 100%);
  border-radius:22px;
  border:1px solid rgba(15,60,122,.16);

  text-align:center;

  box-shadow:
    0 24px 55px rgba(0,0,0,.34),
    inset 0 2px 0 rgba(255,255,255,.85);
}

.locModalBox::before{
  content:"";
  display:block;

  height:12px;
  margin:0 -16px 16px;

  background:linear-gradient(90deg, #0f3c7a, #1a6cb6);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 4px 12px rgba(15,60,122,.18);
}

.locCloseBtn{
  position:absolute;
  left:12px;
  top:16px;

  width:42px;
  height:42px;

  border:0;
  border-radius:999px;

  background:rgba(233,92,67,.14);
  color:#b42318;

  font-size:20px !important;
  font-weight:900;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    0 8px 18px rgba(0,0,0,.14);
}

.locModalTitle{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:36px;
  padding:0 14px;
  margin:2px auto 8px;

  border-radius:999px;

  background:linear-gradient(90deg, #0f3c7a, #1a6cb6);
  color:#fff;

  font-size:18px !important;
  font-weight:900;
  line-height:1.1;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -3px 0 rgba(0,0,0,.22),
    0 10px 20px rgba(15,60,122,.22);
}

.locModalSub{
  margin:0 0 12px;

  color:#334155;
  font-size:15px;
  font-weight:700;
}

/* Choose Location row */
.locPickRow{
  margin-bottom:10px;
}

.locPickRow .locField,
.locPickRow select{
  width:100% !important;
}

/* Main Add layout */
.locGrid{
  display:grid;
  grid-template-columns:1.55fr .75fr;
  gap:10px;
}

.locField{
  display:flex;
  flex-direction:column;
  gap:5px;

  min-width:0;
  text-align:left;
}

.locField span{
  font-size:13px !important;
  font-weight:900;
  line-height:1.1;
  color:#0f3c7a;
  letter-spacing:.02em;
}

.locField input,
.locField select{
  width:100% !important;
  min-width:0 !important;

  height:44px !important;
  min-height:44px !important;

  padding:0 10px !important;

  font-size:16px !important;
  border-radius:12px !important;
}

.locWide{
  grid-column:1 / -1;
}

.locLongField,
.locShortField{
  width:100% !important;
  min-width:0 !important;
}

/* Hide Location ID cleanly in Add mode */
#locLocationIdField[style*="display: none"]{
  display:none !important;
}

/* =========================================================
   9A. EDIT LOCATION SPECIAL LAYOUT
   Choose Location
   Location Name | Location Area
   Type          | Active
   Lat | Lng | GPS | Radius M
========================================================= */

.locModal.locEditMode .locPickRow{
  display:block !important;
  width:100% !important;
}

.locModal.locEditMode .locGrid{
  grid-template-columns:1fr .90fr .95fr !important;
  gap:10px !important;
}

/* Row 1: Location Name | Location Area */
.locModal.locEditMode .locNameField{
  grid-column:1 / 3 !important;
  grid-row:1 !important;
}

.locModal.locEditMode .locAreaField{
  grid-column:3 / 4 !important;
  grid-row:1 !important;
}

/* Location ID hidden but still used internally by JS */
.locModal.locEditMode .locIdField{
  display:none !important;
}

/* Row 2: Type | Active */
.locModal.locEditMode .locTypeField{
  grid-column:1 / 3 !important;
  grid-row:2 !important;
  padding-right:0 !important;
}

.locModal.locEditMode .locActiveField{
  grid-column:3 / 4 !important;
  grid-row:2 !important;

  width:100% !important;
  justify-self:stretch !important;
  z-index:1 !important;
}

.locModal.locEditMode .locActiveField select{
  width:100% !important;
  text-align:left !important;
  text-align-last:left !important;
}

/* Mobile */
@media (max-width:560px){
  .locModal.locEditMode .locGrid{
    grid-template-columns:1fr .85fr .95fr !important;
    gap:7px !important;
  }

  .locModal.locEditMode .locNameField{
    grid-column:1 / 3 !important;
    grid-row:1 !important;
  }

  .locModal.locEditMode .locAreaField{
    grid-column:3 / 4 !important;
    grid-row:1 !important;
  }

  .locModal.locEditMode .locTypeField{
    grid-column:1 / 3 !important;
    grid-row:2 !important;
    padding-right:0 !important;
  }

  .locModal.locEditMode .locActiveField{
    grid-column:3 / 4 !important;
    grid-row:2 !important;

    width:100% !important;
    justify-self:stretch !important;
  }

  .locModal.locEditMode .locActiveField select{
    width:100% !important;
    text-align:left !important;
    text-align-last:left !important;
  }
}

/* =========================================================
   9B. LAT / LNG / GPS / RADIUS ROW
========================================================= */

.locGeoRow,
.locGeoRowWithGps{
  grid-column:1 / -1 !important;

  display:grid !important;
  grid-template-columns:1fr 1fr .50fr 1fr !important;
  gap:8px !important;

  width:100% !important;
  min-width:0 !important;
}

.locModal.locEditMode .locGeoRow,
.locModal.locEditMode .locGeoRowWithGps{
  grid-column:1 / -1 !important;
  grid-row:3 !important;

  display:grid !important;
  grid-template-columns:1fr 1fr .50fr 1fr !important;
  gap:8px !important;
}

.locGeoRow .locField,
.locGeoRowWithGps .locField{
  min-width:0 !important;
}

.locGeoRow .locField input,
.locGeoRowWithGps .locField input{
  width:100% !important;
  min-width:0 !important;
}

.locGpsMiniField{
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-end !important;
  align-items:center !important;

  min-width:0 !important;
}

.locGpsMiniField span{
  height:13px !important;
  min-height:13px !important;
  line-height:13px !important;
}

.locGpsMiniBtn{
  width:42px !important;
  min-width:42px !important;
  max-width:42px !important;

  height:42px !important;
  min-height:42px !important;
  max-height:42px !important;

  padding:0 !important;

  border-radius:50% !important;
  border:1px solid rgba(0,0,0,.12) !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  background:#ffd966 !important;
  color:#111 !important;

  font-size:11px !important;
  font-weight:900 !important;
  line-height:1 !important;

  cursor:pointer;

  box-shadow:
    0 8px 14px rgba(0,0,0,.18),
    inset 0 2px 0 rgba(255,255,255,.38),
    inset 0 -4px 0 rgba(0,0,0,.16);
}

.locGpsMiniBtn:active{
  transform:translateY(2px);
}

/* Legacy GPS row hidden if old HTML remains */
.locGpsRow{
  display:none !important;
}

/* =========================================================
   9C. LOCATION MODAL STATUS
========================================================= */

.locGrid > .locStatusBox{
  grid-column:1 / -1 !important;
  width:100% !important;
  margin:2px 0 0 !important;
}

.locStatusBox{
  min-height:38px;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:9px 12px;

  border-radius:13px;
  border:2px solid rgba(15,60,122,.16);

  background:#ffffff;
  color:#102033;

  font-size:14px;
  font-weight:900;
  line-height:1.25;
  text-align:center;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 8px 16px rgba(15,60,122,.08);
}

.locStatusBox[hidden]{
  display:none !important;
}

.locStatusBox.ok{
  background:#dcfce7;
  color:#065f46;
  border-color:rgba(22,163,74,.35);
}

.locStatusBox.bad{
  background:#fee2e2;
  color:#7f1d1d;
  border-color:rgba(220,38,38,.35);
}

.locStatusBox.warn{
  background:#ffedd5;
  color:#7c2d12;
  border-color:rgba(234,88,12,.35);
}

.locStatusBox.idle{
  background:#ffffff;
  color:#102033;
}

.locStatusBox.running{
  animation:locStatusPulse 1.05s ease-in-out infinite;
}

@keyframes locStatusPulse{
  0%,100%{
    filter:brightness(1);
    transform:scale(1);
  }

  50%{
    filter:brightness(1.12);
    transform:scale(1.012);
    box-shadow:
      0 0 0 3px rgba(112,236,157,.16),
      0 0 18px rgba(112,236,157,.22);
  }
}

/* =========================================================
   9D. LOCATION MODAL CANCEL / SAVE
========================================================= */

.locBtnRow,
.locBtnRow2,
.locModal .locBtnRow,
.locModal .locBtnRow2{
  grid-column:1 / -1 !important;

  width:100% !important;
  max-width:100% !important;

  display:flex !important;
  flex-direction:row !important;
  justify-content:center !important;
  align-items:center !important;

  gap:16px !important;
  margin:16px auto 0 !important;

  grid-template-columns:none !important;
  text-align:center !important;
}

.locBtn{
  height:46px;

  border:0;
  border-radius:999px;

  font-size:16px !important;
  font-weight:900;

  cursor:pointer;

  box-shadow:
    0 10px 18px rgba(0,0,0,.18),
    inset 0 2px 0 rgba(255,255,255,.34),
    inset 0 -4px 0 rgba(0,0,0,.16);
}

.locBtn:active{
  transform:translateY(2px);
}

.locBtnRow .locBtn,
.locBtnRow2 .locBtn,
.locModal .locBtnRow .locBtn,
.locModal .locBtnRow2 .locBtn{
  width:145px !important;
  min-width:145px !important;
  max-width:145px !important;
  flex:0 0 145px !important;
}

.locBtn.cancel,
.locModal .locBtn.cancel{
  background:linear-gradient(180deg, rgba(255,255,255,.20), rgba(0,0,0,.14)), #b86a34 !important;
  color:#fff !important;
  border:1px solid #9a5528 !important;
  text-shadow:0 1px 0 rgba(0,0,0,.20);
}

.locBtn.save,
.locModal .locBtn.save{
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(0,0,0,.10)), #16a34a !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.22) !important;
}

/* =========================================================
   10. MORE / EXTRA PANELS
========================================================= */

.morePanelCard{
  position:static !important;
  float:none !important;
  clear:both !important;

  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;

  margin:10px 0 0 !important;
  padding:0 !important;

  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  overflow:visible !important;

  z-index:auto !important;
}

.scrollArea > #selfCard.morePanelCard,
.scrollArea > #locSetupCard.morePanelCard{
  position:static !important;
  float:none !important;
  clear:both !important;

  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;

  margin:10px 0 0 !important;
  padding:0 !important;

  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  overflow:visible !important;

  z-index:auto !important;
}

.scrollArea > #selfCard.morePanelCard[style*="display:none"],
.scrollArea > #locSetupCard.morePanelCard[style*="display:none"],
.scrollArea > #selfCard.morePanelCard[style*="display: none"],
.scrollArea > #locSetupCard.morePanelCard[style*="display: none"]{
  display:none !important;
}

#selfCard.morePanelCard .moreSubCard,
#locSetupCard.morePanelCard .moreSubCard{
  position:relative !important;
  float:none !important;
  clear:both !important;

  width:100% !important;
  max-width:100% !important;

  margin:10px 0 0 !important;
  padding:12px !important;

  border-radius:18px !important;
  border:1.5px solid rgba(255,255,255,.18) !important;

  background:linear-gradient(90deg, #0f3c7a, #1a6cb6) !important;
  color:#fff !important;

  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.22),
    inset 0 -3px 0 rgba(0,0,0,.28),
    0 10px 22px rgba(0,0,0,.12) !important;
}

.moreSubTitle{
  margin:0 0 10px;
  padding:0 4px;

  color:rgba(255,255,255,.86);

  font-size:15px;
  font-weight:900;
  letter-spacing:.03em;
  text-align:left;
}

.moreGrid3{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:14px !important;

  width:100% !important;
}

.moreGrid3 .btnSelfBlue{
  width:100% !important;
  min-width:0 !important;

  min-height:64px !important;
  padding:0 8px !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  font-size:18px !important;
  font-weight:850 !important;
  white-space:nowrap !important;
}

#btnActionMini2,
.btnActionMini2{
  width:54px !important;
  min-width:54px !important;
  max-width:54px !important;

  padding:0 !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.20) !important;

  background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(0,0,0,.12)), #2a7fd0 !important;
  color:#fff !important;

  font-size:28px !important;
  font-weight:900 !important;

  box-shadow:var(--btn3d_outer), var(--btn3d_shine), var(--btn3d_depth);
}

/* =========================================================
   11. MOBILE OVERRIDES
========================================================= */

@media (max-width:560px){

  /* More + Extra stacked beside scanner buttons */
  .actionRow{
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) 44px !important;
    grid-template-rows:45px 45px !important;
    gap:8px 7px !important;

    align-items:stretch !important;

    width:100% !important;
  }

  .actionRow .actionGrid4{
    grid-column:1 / 2 !important;
    grid-row:1 / 3 !important;

    width:100% !important;
    min-width:0 !important;
  }

  #btnMore{
    grid-column:2 / 3 !important;
    grid-row:1 / 2 !important;

    width:44px !important;
    min-width:44px !important;
    max-width:44px !important;

    height:45px !important;
    min-height:45px !important;
    max-height:45px !important;

    flex:none !important;
  }

  #btnActionMini2,
  .btnActionMini2{
    grid-column:2 / 3 !important;
    grid-row:2 / 3 !important;

    width:44px !important;
    min-width:44px !important;
    max-width:44px !important;

    height:45px !important;
    min-height:45px !important;
    max-height:45px !important;

    flex:none !important;

    font-size:22px !important;
  }

  /* More / Extra panels */
  .scrollArea > #selfCard.morePanelCard,
  .scrollArea > #locSetupCard.morePanelCard{
    margin-top:8px !important;
  }

  #selfCard.morePanelCard .moreSubCard,
  #locSetupCard.morePanelCard .moreSubCard{
    margin:8px 0 0 !important;
    padding:10px !important;
    border-radius:14px !important;
  }

  .moreSubTitle{
    margin-bottom:8px;
    font-size:12px;
  }

  .moreGrid3,
  #selfCard .moreGrid3,
  #locSetupCard .moreGrid3{
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:7px !important;
  }

  .moreGrid3 .btnSelfBlue,
  #selfCard #btnSelfIn,
  #selfCard #btnSelfOut,
  #selfCard #btnLocation,
  #locSetupCard #btnAddLocation,
  #locSetupCard #btnEditLocation,
  #locSetupCard #btnClearLocCache{
    grid-column:auto !important;

    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;

    height:45px !important;
    min-height:45px !important;
    max-height:45px !important;

    padding:0 4px !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    font-size:11px !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }


  /* =========================================================
    NOTICE BUTTON INSIDE SELF SERVICE
  ========================================================= */

  .moreNoticeRow{
    width:100%;
    margin-top:10px;

    display:flex;
    align-items:center;
    justify-content:center;
  }

  #btnNotice,
  .btnNotice{
    width:100% !important;
    min-height:52px !important;

    background:#bfe3ff !important;
    color:#102033 !important;
    border-color:rgba(0,0,0,.12) !important;

    font-size:18px !important;
    font-weight:900 !important;
  }

  /* Mobile */
  @media (max-width:560px){
    .moreNoticeRow{
      margin-top:7px;
    }

    #btnNotice,
    .btnNotice{
      height:42px !important;
      min-height:42px !important;
      max-height:42px !important;

      font-size:12px !important;
    }
  }

  
  /* Location modal */
  .locModal{
    padding:12px;
  }

  .locModalBox{
    width:min(94vw, 390px);
    padding:0 14px 14px;
    border-radius:20px;
  }

  .locModalBox::before{
    height:10px;
    margin:0 -14px 14px;
  }

  .locCloseBtn{
    width:36px;
    height:36px;

    top:13px;
    left:10px;

    font-size:17px !important;
  }

  .locModalTitle{
    min-height:38px;
    padding:0 15px;

    font-size:18px !important;
  }

  .locModalSub{
    font-size:13px;
  }

  .locGrid{
    grid-template-columns:1.45fr .85fr !important;
    gap:8px !important;
  }

  .locModal.locEditMode .locGrid{
    grid-template-columns:1fr .85fr .95fr !important;
    gap:7px !important;
  }

  .locField span,
  .locModal.locEditMode .locField span,
  .locModal.locAddMode .locField span{
    font-size:11px !important;
    line-height:1.1 !important;
  }

  .locField input,
  .locField select,
  .locModal.locEditMode .locField input,
  .locModal.locEditMode .locField select,
  .locModal.locAddMode .locField input,
  .locModal.locAddMode .locField select{
    height:40px !important;
    min-height:40px !important;

    padding:0 8px !important;

    font-size:13px !important;
    border-radius:10px !important;
  }

  .locGeoRow,
  .locGeoRowWithGps,
  .locModal.locEditMode .locGeoRow,
  .locModal.locEditMode .locGeoRowWithGps{
    grid-template-columns:1fr 1fr .58fr 1fr !important;
    gap:5px !important;
  }

  .locGeoRow .locField span,
  .locGeoRowWithGps .locField span{
    font-size:9px !important;
    line-height:1 !important;
  }

  .locGeoRow .locField input,
  .locGeoRowWithGps .locField input{
    height:38px !important;
    min-height:38px !important;

    padding:0 4px !important;

    font-size:10.5px !important;
    border-radius:9px !important;
  }

  .locGpsMiniField span{
    height:10px !important;
    min-height:10px !important;
    line-height:10px !important;
  }

  .locGpsMiniBtn{
    width:36px !important;
    min-width:36px !important;
    max-width:36px !important;

    height:36px !important;
    min-height:36px !important;
    max-height:36px !important;

    font-size:9px !important;
  }

  .locStatusBox{
    min-height:34px;
    padding:7px 9px;

    font-size:12px;
    border-radius:11px;
  }

  .locBtnRow,
  .locBtnRow2,
  .locModal .locBtnRow,
  .locModal .locBtnRow2{
    gap:10px !important;
    margin:14px auto 0 !important;
  }

  .locBtnRow .locBtn,
  .locBtnRow2 .locBtn,
  .locModal .locBtnRow .locBtn,
  .locModal .locBtnRow2 .locBtn{
    width:122px !important;
    min-width:122px !important;
    max-width:122px !important;
    flex:0 0 122px !important;

    height:42px !important;
    font-size:14px !important;
  }
}



/* =========================================================
   ACTIVE STATE - MORE / EXTRA BUTTONS 3D HIGHLIGHT
========================================================= */

#btnMore.active,
#btnActionMini2.active,
.btnActionMini2.active{
  background:
    radial-gradient(circle at 30% 18%, rgba(255,255,255,.38), rgba(255,255,255,0) 28%),
    linear-gradient(180deg, #0d4f9c 0%, #082f6b 48%, #041d45 100%) !important;

  color:#fff !important;

  border:2px solid #70ec9d !important;

  transform:translateY(-1px);

  box-shadow:
    0 0 0 3px rgba(112,236,157,.22),
    0 14px 24px rgba(0,0,0,.34),
    0 5px 0 #031633,
    inset 0 3px 0 rgba(255,255,255,.32),
    inset 0 -6px 0 rgba(0,0,0,.36),
    inset 0 0 12px rgba(112,236,157,.12) !important;

  text-shadow:0 2px 0 rgba(0,0,0,.35);

  filter:saturate(1.18);
}

/* Pressed effect while active */
#btnMore.active:active,
#btnActionMini2.active:active,
.btnActionMini2.active:active{
  transform:translateY(3px);

  box-shadow:
    0 0 0 2px rgba(112,236,157,.18),
    0 5px 10px rgba(0,0,0,.25),
    0 1px 0 #031633,
    inset 0 2px 0 rgba(255,255,255,.22),
    inset 0 -2px 0 rgba(0,0,0,.42) !important;

  filter:brightness(.94) saturate(1.12);
}

/* Mobile: slightly smaller 3D depth */
@media (max-width:560px){
  #btnMore.active,
  #btnActionMini2.active,
  .btnActionMini2.active{
    box-shadow:
      0 0 0 2px rgba(112,236,157,.22),
      0 10px 18px rgba(0,0,0,.30),
      0 4px 0 #031633,
      inset 0 2px 0 rgba(255,255,255,.30),
      inset 0 -5px 0 rgba(0,0,0,.34),
      inset 0 0 10px rgba(112,236,157,.12) !important;
  }
}

/* =========================================================
   LOCATION SETUP - 4 BUTTON GRID
========================================================= */

.moreGrid4{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:12px !important;
  width:100% !important;
}

.moreGrid4 .btnSelfBlue{
  width:100% !important;
  min-width:0 !important;

  min-height:64px !important;
  padding:0 6px !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  font-size:15px !important;
  font-weight:850 !important;
  white-space:nowrap !important;
}

#btnLocList,
.btnLocList{
  background:#bfe3ff !important;
  color:#102033 !important;
  border-color:rgba(0,0,0,.12) !important;
}

/* =========================================================
   LOCATION LIST MODAL
========================================================= */

.locListModal{
  position:fixed;
  inset:0;
  z-index:3200;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:18px;

  background:
    radial-gradient(circle at top, rgba(26,108,182,.24), transparent 38%),
    rgba(0,0,0,.48);

  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}

.locListModal[hidden]{
  display:none !important;
}

.locListModalBg{
  position:absolute;
  inset:0;
}

.locListModalBox{
  position:relative;

  width:min(96vw, 860px);
  max-height:90vh;
  overflow:hidden;

  padding:0 16px 16px;

  background:linear-gradient(180deg, #ffffff 0%, #eef7ff 100%);
  border-radius:22px;
  border:1px solid rgba(15,60,122,.16);

  text-align:center;

  box-shadow:
    0 24px 55px rgba(0,0,0,.34),
    inset 0 2px 0 rgba(255,255,255,.85);

  display:flex;
  flex-direction:column;
}

.locListModalBox::before{
  content:"";
  display:block;

  height:12px;
  margin:0 -16px 16px;

  background:linear-gradient(90deg, #0f3c7a, #1a6cb6);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 4px 12px rgba(15,60,122,.18);
}

.locListCloseBtn{
  position:absolute;
  left:12px;
  top:16px;

  width:42px;
  height:42px;

  border:0;
  border-radius:999px;

  background:rgba(233,92,67,.14);
  color:#b42318;

  font-size:20px !important;
  font-weight:900;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    0 8px 18px rgba(0,0,0,.14);
}

.locListTitle{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:36px;
  padding:0 14px;
  margin:2px auto 8px;

  border-radius:999px;

  background:linear-gradient(90deg, #0f3c7a, #1a6cb6);
  color:#fff;

  font-size:22px;
  font-weight:900;
  line-height:1.1;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -3px 0 rgba(0,0,0,.22),
    0 10px 20px rgba(15,60,122,.22);
}

.locListSub{
  margin:0 0 12px;
  color:#334155;
  font-size:15px;
  font-weight:700;
}

.locListTop{
  display:grid;
  grid-template-columns:1fr 110px;
  gap:10px;

  margin-bottom:10px;
}

#locListSearch{
  height:42px !important;
  min-height:42px !important;

  padding:0 12px !important;

  font-size:15px !important;
  border-radius:12px !important;
}

.locListReloadBtn{
  height:42px;

  border:0;
  border-radius:999px;

  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(0,0,0,.10)), #2563eb;
  color:#fff;

  font-size:14px !important;
  font-weight:900;

  box-shadow:
    0 8px 14px rgba(0,0,0,.18),
    inset 0 2px 0 rgba(255,255,255,.34),
    inset 0 -4px 0 rgba(0,0,0,.16);
}

.locListStatus{
  min-height:34px;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:7px 10px;
  margin-bottom:10px;

  border-radius:12px;
  border:2px solid rgba(15,60,122,.16);

  background:#fff;
  color:#102033;

  font-size:13px;
  font-weight:900;
}

.locListStatus.ok{
  background:#dcfce7;
  color:#065f46;
  border-color:rgba(22,163,74,.35);
}

.locListStatus.bad{
  background:#fee2e2;
  color:#7f1d1d;
  border-color:rgba(220,38,38,.35);
}

.locListStatus.warn{
  background:#ffedd5;
  color:#7c2d12;
  border-color:rgba(234,88,12,.35);
}

.locListStatus.idle{
  background:#ffffff;
  color:#102033;
}

.locListStatus.running{
  animation:locStatusPulse 1.05s ease-in-out infinite;
  border-color:#70ec9d !important;
}

.locListTableWrap{
  flex:1 1 auto;
  min-height:0;

  overflow:auto;

  background:#fff;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.12);
}

.locListTable{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
}

.locListTable thead th{
  position:sticky;
  top:0;
  z-index:2;

  background:linear-gradient(180deg, #2a7fd0 0%, #1a6cb6 55%, #155a9a 100%);
  color:#fff;

  padding:10px 8px;

  font-size:13px;
  font-weight:900;
  text-align:left;
}


.locListTable td{
  padding:9px 8px;

  border-bottom:1px solid #e5e7eb;

  font-size:13px;
  font-weight:500;
  text-align:left;
  vertical-align:top;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.locListTable tbody tr:nth-child(even){
  background:#f5f9ff;
}

.locListName{
  font-weight:650;
  color:#102033;
}

.locListId{
  margin-top:2px;
  font-size:11px;
  color:#64748b;
  font-weight:650;
}

.locListBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:24px;
  padding:0 8px;

  border-radius:999px;

  font-size:11px;
  font-weight:900;
  white-space:nowrap;
}

.locListBadge.on{
  background:#dcfce7;
  color:#065f46;
}

.locListBadge.off{
  background:#fee2e2;
  color:#7f1d1d;
}

/* Mobile */
@media (max-width:560px){
  .moreGrid4{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:7px !important;
  }

  .moreGrid4 .btnSelfBlue{
    height:45px !important;
    min-height:45px !important;
    max-height:45px !important;

    padding:0 4px !important;

    font-size:12px !important;
    line-height:1 !important;
  }

  .locListModal{
    padding:12px;
  }

  .locListModalBox{
    width:min(94vw, 430px);
    max-height:90vh;

    padding:0 12px 12px;
    border-radius:18px;
  }

  .locListModalBox::before{
    height:10px;
    margin:0 -12px 14px;
  }

  .locListCloseBtn{
    width:36px;
    height:36px;

    top:13px;
    left:10px;

    font-size:17px !important;
  }

  .locListTitle{
    min-height:38px;
    padding:0 15px;

    font-size:18px;
  }

  .locListSub{
    font-size:12px;
  }

  .locListTop{
    grid-template-columns:1fr 78px;
    gap:7px;
  }

  #locListSearch{
    height:36px !important;
    min-height:36px !important;

    padding:0 8px !important;

    font-size:12px !important;
    border-radius:10px !important;
  }

  .locListReloadBtn{
    height:36px;
    font-size:11px !important;
  }

  .locListStatus{
    min-height:30px;
    padding:6px 8px;

    font-size:11px;
    border-radius:10px;
  }

  .locListTable{
    min-width:760px;
  }

  .locListTable thead th,
  .locListTable td{
    padding:7px 6px;
    font-size:11px;
  }

  .locListId{
    font-size:9px;
  }

  .locListBadge{
    min-height:20px;
    padding:0 6px;
    font-size:9px;
  }
}

/* =========================================================
   LOCATION LIST - BIGGER TABLE FONT
========================================================= */

.locListTable thead th{
  font-size:15px !important;
  line-height:1.2 !important;
}

.locListTable td{
  font-size:15px !important;
  line-height:1.25 !important;
}

.locListName{
  font-size:16px !important;
  line-height:1.2 !important;
}

.locListId{
  font-size:12px !important;
}

.locListBadge{
  font-size:12px !important;
}

/* Mobile */
@media (max-width:560px){
  .locListTable thead th{
    font-size:13px !important;
    line-height:1.15 !important;
  }

  .locListTable td{
    font-size:13px !important;
    line-height:1.18 !important;
  }

  .locListName{
    font-size:13px !important;
  }

  .locListId{
    font-size:11px !important;
  }

  .locListBadge{
    font-size:11px !important;
  }
}


/* =========================================================
   LOCATION LIST MOBILE - COMPACT TYPE / RADIUS / GPS
   Columns:
   1 Name | 2 Area | 3 Type | 4 Radius | 5 GPS | 6 Last Date | 7 Last By
========================================================= */

@media (max-width:560px){

  .locListTable{
    min-width:580px !important; /* reduce from 760px */
    table-layout:fixed !important;
  }

  .locListTable thead th:nth-child(1),
  .locListTable tbody td:nth-child(1){
    width:135px !important; /* Name */
  }

  .locListTable thead th:nth-child(2),
  .locListTable tbody td:nth-child(2){
    width:90px !important; /* Area */
  }

  .locListTable thead th:nth-child(3),
  .locListTable tbody td:nth-child(3){
    width:62px !important; /* Type - reduced */
  }

  .locListTable thead th:nth-child(4),
  .locListTable tbody td:nth-child(4){
    width:54px !important; /* Radius - reduced */
    text-align:center !important;
  }

  .locListTable thead th:nth-child(5),
  .locListTable tbody td:nth-child(5){
    width:48px !important; /* GPS - reduced */
    text-align:center !important;
  }

  .locListTable thead th:nth-child(6),
  .locListTable tbody td:nth-child(6){
    width:120px !important; /* Last Date */
  }

  .locListTable thead th:nth-child(7),
  .locListTable tbody td:nth-child(7){
    width:105px !important; /* Last By */
  }

  .locListTable thead th,
  .locListTable td{
    padding:7px 4px !important;
  }

  .locListBadge{
    padding:0 5px !important;
    min-height:20px !important;
    font-size:10px !important;
  }
}

/* =========================================================
   REDUCE TITLE SIZE - ADD / EDIT LOCATION + LOC LIST
========================================================= */

.locModalTitle,
.locListTitle{
  min-height:36px !important;
  padding:0 14px !important;

  font-size:18px !important;
  line-height:1.05 !important;
}

/* Mobile */
@media (max-width:560px){
  .locModalTitle,
  .locListTitle{
    min-height:32px !important;
    padding:0 12px !important;

    font-size:15px !important;
    line-height:1.05 !important;
  }
}

/* =========================================================
   INNER STATUS BAR - BRIGHT START FLASH
   For Add/Edit Location + Location List
========================================================= */

.locStatusBox.innerStatusFlash,
.locListStatus.innerStatusFlash{
  animation:innerStatusBrightFlash .95s ease-in-out 1 !important;

  border-color:#70ec9d !important;

  box-shadow:
    0 0 0 4px rgba(112,236,157,.32),
    0 0 24px rgba(112,236,157,.42),
    0 10px 24px rgba(0,0,0,.20),
    inset 0 2px 0 rgba(255,255,255,.80),
    inset 0 -3px 0 rgba(0,0,0,.10) !important;
}

@keyframes innerStatusBrightFlash{
  0%{
    transform:scale(1);
    filter:brightness(1);
    border-color:rgba(15,60,122,.16);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.85),
      0 8px 16px rgba(15,60,122,.08);
  }

  18%{
    transform:scale(1.035);
    filter:brightness(1.45);
    border-color:#70ec9d;
    box-shadow:
      0 0 0 5px rgba(112,236,157,.38),
      0 0 28px rgba(112,236,157,.48),
      0 12px 28px rgba(0,0,0,.24),
      inset 0 2px 0 rgba(255,255,255,.88),
      inset 0 -4px 0 rgba(0,0,0,.12);
  }

  38%{
    transform:scale(1.01);
    filter:brightness(1.08);
    border-color:rgba(112,236,157,.45);
  }

  62%{
    transform:scale(1.028);
    filter:brightness(1.35);
    border-color:#70ec9d;
    box-shadow:
      0 0 0 4px rgba(112,236,157,.30),
      0 0 22px rgba(112,236,157,.36),
      0 10px 24px rgba(0,0,0,.20);
  }

  100%{
    transform:scale(1);
    filter:brightness(1);
    border-color:rgba(15,60,122,.16);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.85),
      0 8px 16px rgba(15,60,122,.08);
  }
}

@media (prefers-reduced-motion:reduce){
  .locStatusBox.innerStatusFlash,
  .locListStatus.innerStatusFlash{
    animation:none !important;
  }
}


/* =========================================================
   NOTICE MODAL
========================================================= */

.noticeModal{
  position:fixed;
  inset:0;
  z-index:3300;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:18px;

  background:
    radial-gradient(circle at top, rgba(26,108,182,.24), transparent 38%),
    rgba(0,0,0,.48);

  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}

.noticeModal[hidden]{
  display:none !important;
}

.noticeModalBg{
  position:absolute;
  inset:0;
}

.noticeModalBox{
  position:relative;

  width:min(94vw, 560px);
  max-height:88vh;
  overflow:auto;

  padding:0 16px 16px;

  background:linear-gradient(180deg, #ffffff 0%, #eef7ff 100%);
  border-radius:22px;
  border:1px solid rgba(15,60,122,.16);

  text-align:center;

  box-shadow:
    0 24px 55px rgba(0,0,0,.34),
    inset 0 2px 0 rgba(255,255,255,.85);
}

.noticeModalBox::before{
  content:"";
  display:block;

  height:12px;
  margin:0 -16px 16px;

  background:linear-gradient(90deg, #0f3c7a, #1a6cb6);
}

.noticeCloseBtn{
  position:absolute;
  left:12px;
  top:16px;

  width:42px;
  height:42px;

  border:0;
  border-radius:999px;

  background:rgba(233,92,67,.14);
  color:#b42318;

  font-size:20px !important;
  font-weight:900;

  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.noticeTitle{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:36px;
  padding:0 14px;
  margin:2px auto 8px;

  border-radius:999px;

  background:linear-gradient(90deg, #0f3c7a, #1a6cb6);
  color:#fff;

  font-size:18px;
  font-weight:900;
}

.noticeSub{
  margin:0 0 12px;
  color:#334155;
  font-size:14px;
  font-weight:700;
}

.noticeStatus{
  min-height:34px;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:7px 10px;
  margin-bottom:10px;

  border-radius:12px;
  border:2px solid rgba(15,60,122,.16);

  background:#fff;
  color:#102033;

  font-size:13px;
  font-weight:900;
}

.noticeStatus.ok{
  background:#dcfce7;
  color:#065f46;
  border-color:rgba(22,163,74,.35);
}

.noticeStatus.bad{
  background:#fee2e2;
  color:#7f1d1d;
  border-color:rgba(220,38,38,.35);
}

.noticeStatus.running{
  animation:locStatusPulse 1.05s ease-in-out infinite;
  border-color:#70ec9d !important;
}

.noticeList{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.noticeItem{
  padding:12px;

  border-radius:14px;
  border:1px solid rgba(15,23,42,.12);

  background:#fff;
  text-align:left;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 8px 16px rgba(15,60,122,.08);
}

.noticeItemTitle{
  font-size:16px;
  font-weight:900;
  color:#0f3c7a;
  line-height:1.2;
}

.noticeItemMsg{
  margin-top:7px;
  font-size:14px;
  font-weight:650;
  color:#102033;
  line-height:1.35;
  white-space:pre-wrap;
}

.noticeItemMeta{
  margin-top:8px;
  font-size:11px;
  font-weight:800;
  color:#64748b;
}

.noticeEmpty{
  padding:14px;
  border-radius:14px;
  background:#fff;
  color:#64748b;
  font-size:14px;
  font-weight:800;
}

/* Mobile */
@media (max-width:560px){
  .noticeModal{
    padding:12px;
  }

  .noticeModalBox{
    width:min(94vw, 390px);
    padding:0 12px 12px;
    border-radius:18px;
  }

  .noticeModalBox::before{
    height:10px;
    margin:0 -12px 14px;
  }

  .noticeCloseBtn{
    width:36px;
    height:36px;
    top:13px;
    left:10px;
    font-size:17px !important;
  }

  .noticeTitle{
    min-height:32px;
    padding:0 12px;
    font-size:15px;
  }

  .noticeSub{
    font-size:12px;
  }

  .noticeStatus{
    min-height:30px;
    font-size:11px;
  }

  .noticeItemTitle{
    font-size:14px;
  }

  .noticeItemMsg{
    font-size:12px;
  }
}

#btnNotice{
  position:relative !important;
}

#btnNotice.hasNewNotice::after{
  content:attr(data-notice-count);

  position:absolute;
  top:-7px;
  right:-7px;

  min-width:24px;
  height:24px;
  padding:0 6px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  border-radius:999px;
  background:#ef4444;
  color:#fff;

  font-size:12px;
  font-weight:900;
  line-height:1;

  border:2px solid #fff;

  box-shadow:
    0 8px 14px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.35);

  animation:noticeBadgePulse 1.05s ease-in-out infinite;
}

@keyframes noticeBadgePulse{
  0%, 100%{
    transform:scale(1);
    filter:brightness(1);
  }

  50%{
    transform:scale(1.15);
    filter:brightness(1.18);
  }
}

@media (max-width:560px){
  #btnNotice.hasNewNotice::after{
    top:-6px;
    right:-5px;

    min-width:20px;
    height:20px;
    padding:0 5px;

    font-size:10px;
  }
}

.noticeAckRow{
  margin-top:12px;

  display:flex;
  align-items:center;
  justify-content:center;
}

.noticeAckBtn{
  min-width:170px;
  height:44px;

  border:0;
  border-radius:999px;

  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(0,0,0,.10)), #16a34a;
  color:#fff;

  font-size:15px !important;
  font-weight:900;

  box-shadow:
    0 10px 18px rgba(0,0,0,.18),
    inset 0 2px 0 rgba(255,255,255,.34),
    inset 0 -4px 0 rgba(0,0,0,.16);
}

.noticeAckBtn:active{
  transform:translateY(2px);
}

.noticeAckBtn:disabled{
  opacity:.55;
  filter:grayscale(.25);
  transform:none !important;
}

@media (max-width:560px){
  .noticeAckRow{
    margin-top:10px;
  }

  .noticeAckBtn{
    min-width:145px;
    height:40px;

    font-size:13px !important;
  }
}

/* =========================================================
   SELF SERVICE - 4 BUTTON ROW
   Self IN | Self OUT | Location | Notice
========================================================= */

.moreGrid4Self{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:12px !important;
  width:100% !important;
}

.moreGrid4Self .btnSelfBlue{
  width:100% !important;
  min-width:0 !important;

  min-height:64px !important;
  padding:0 6px !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  font-size:15px !important;
  font-weight:850 !important;
  line-height:1 !important;
  white-space:nowrap !important;
}

.moreGrid4Self #btnNotice{
  position:relative !important;
  background:#bfe3ff !important;
  color:#102033 !important;
  border-color:rgba(0,0,0,.12) !important;
}

/* Remove old separate Notice row spacing if old CSS remains */
.moreNoticeRow{
  display:none !important;
}

/* Mobile */
@media (max-width:560px){
  .moreGrid4Self{
    grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
    gap:6px !important;
  }

  .moreGrid4Self .btnSelfBlue,
  .moreGrid4Self #btnSelfIn,
  .moreGrid4Self #btnSelfOut,
  .moreGrid4Self #btnLocation,
  .moreGrid4Self #btnNotice{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;

    height:45px !important;
    min-height:45px !important;
    max-height:45px !important;

    padding:0 3px !important;

    font-size:10.5px !important;
    line-height:1 !important;
    white-space:nowrap !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
}

#btnMore,
#btnNotice{
  position:relative !important;
}

#btnMore.hasNewNotice::after,
#btnNotice.hasNewNotice::after{
  content:attr(data-notice-count);

  position:absolute;
  top:-7px;
  right:-7px;

  min-width:22px;
  height:22px;
  padding:0 6px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  border-radius:999px;
  background:#ef4444;
  color:#fff;

  font-size:11px;
  font-weight:900;
  line-height:1;

  border:2px solid #fff;

  box-shadow:
    0 8px 14px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.35);

  z-index:20;

  animation:noticeBadgePulse 1.05s ease-in-out infinite;
}

@keyframes noticeBadgePulse{
  0%, 100%{
    transform:scale(1);
    filter:brightness(1);
  }

  50%{
    transform:scale(1.15);
    filter:brightness(1.18);
  }
}

@media (max-width:560px){
  #btnMore.hasNewNotice::after,
  #btnNotice.hasNewNotice::after{
    top:-6px;
    right:-5px;

    min-width:19px;
    height:19px;
    padding:0 5px;

    font-size:10px;
  }
}

#btnMore,
#btnNotice{
  position:relative !important;
  overflow:visible !important;
}

.noticeBadgeDot{
  position:absolute !important;
  top:-8px !important;
  right:-8px !important;

  min-width:24px !important;
  height:24px !important;
  padding:0 6px !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  border-radius:999px !important;
  background:#ef4444 !important;
  color:#fff !important;

  font-size:11px !important;
  font-weight:900 !important;
  line-height:1 !important;

  border:2px solid #fff !important;

  box-shadow:
    0 8px 14px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.35) !important;

  z-index:9999 !important;
  pointer-events:none !important;

  animation:noticeBadgePulse 1.05s ease-in-out infinite;
}

.noticeBadgeDot[hidden]{
  display:none !important;
}

@keyframes noticeBadgePulse{
  0%, 100%{
    transform:scale(1);
    filter:brightness(1);
  }

  50%{
    transform:scale(1.15);
    filter:brightness(1.18);
  }
}

@media (max-width:560px){
  .noticeBadgeDot{
    top:-6px !important;
    right:-6px !important;

    min-width:20px !important;
    height:20px !important;
    padding:0 5px !important;

    font-size:10px !important;
  }
}