/* ===============================
   GLOBAL RESET
================================ */
* {
  box-sizing: border-box;
  font-family: system-ui, -apple-system, BlinkMacSystemFont;
}

html, body {
  height: 100%;
  margin: 0;
  background: #f5f5f5;
}

#app {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* ===============================
   HEADER
================================ */
header {
  height: 64px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  z-index: 30;
}

.menu-btn,
.account-btn {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
}

.logo img {
  height: 32px;
}

/* ===============================
   MAIN + MAP (FULLSCREEN)
================================ */
main {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: 0;
}

/* Map: Dan-style bordered card (per JD 2026-06-01).
   Padding around the map, rounded corners, subtle shadow. */
.map-card {
  position: absolute;
  inset: 12px 12px 12px 12px;
  background: #e5e5e5;
  pointer-events: auto;
  z-index: 1;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}

/* Leaflet container */
#map {
  width: 100%;
  height: 100%;
  min-height: 0;
}

/* Ensure Leaflet controls are visible */
.leaflet-control-container {
  z-index: 25;
}

/* ===============================
   MAP CONTROLS (CUSTOM)
================================ */
.map-controls {
  position: absolute;
  right: 16px;
  top: 40%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 26;
}

.map-controls button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: white;
  font-size: 20px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  cursor: pointer;
}

/* ===============================
   STATUS BAR
================================ */
.status-text,
.status {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 6;
  pointer-events: none;
}

/* ===============================
   FOOTER
================================ */
footer {
  padding: 16px;
  background: white;
  box-shadow: 0 -2px 4px rgba(0,0,0,0.1);
  z-index: 30;
}

.rent-btn {
  width: 100%;
  padding: 18px;
  font-size: 18px;
  font-weight: bold;
  background: #00ffff;
  border: none;
  border-radius: 30px;
  cursor: pointer;
}

/* ===============================
   INVENTORY
================================ */
.slot-card {
  background: white;
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 6px;
}

/* ===============================
   SCREENS / OVERLAYS
================================ */
.screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(245, 245, 245, 0.98);
  z-index: 40;
  pointer-events: auto;
}

/* When screen is hidden, it must not block the map */
.screen[style*="display: none"] {
  pointer-events: none;
}

#scan-screen {
  pointer-events: auto;
}

/* ===============================
   TOASTY
================================ */
.toast {
  position: fixed;
  bottom: 96px; /* above Rent button */
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(0, 0, 0, 0.85);
  color: white;
  padding: 12px 16px;
  border-radius: 999px;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  z-index: 100;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ===============================
   QR SCANNER
================================ */
.scan-button {
  margin: 12px;
}

#qr-reader {
  display: none;
  position: fixed;
  inset: 0;
  background: black;
  z-index: 999;
  width: 100%;
}

/* ===============================
  ACCOUNT DRAWER
================================ */
.account-drawer {
  position: fixed;
  top: 0;
  right: -320px;          /* hidden offscreen */
  width: 320px;
  height: 100%;
  background: white;
  box-shadow: -4px 0 12px rgba(0,0,0,0.15);
  transition: right 0.25s ease;
  z-index: 999;
}

.account-drawer.open {
  right: 0;
}

.drawer-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Per JD 2026-06-16: on devices with a notch / status bar, the avatar
     and username were getting clipped by the OS top bar. Add safe-area
     inset on top so the drawer header sits below the status bar. */
  padding: calc(16px + env(safe-area-inset-top, 0px)) 16px 16px;
  border-bottom: 1px solid #eee;
}

.drawer-user {
  display: flex;
  gap: 10px;
  align-items: center;
}

.avatar {
  font-size: 24px;
}

.drawer-menu {
  display: flex;
  flex-direction: column;
  padding: 12px;
  gap: 8px;
}

.drawer-menu button {
  border: none;
  background: #fff;
  padding: 14px 12px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  color: #111318;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  border-bottom: 1px solid var(--border, #e8ebee);
}
.drawer-menu button:hover {
  background: #f8fafc;
}
.drawer-menu .dm-ic {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 8px;
  background: rgba(0,196,171,0.10);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Dan-restyle (2026-06-11, per JD): drawer rows have to pin the label to
   the exact vertical centre of the icon tile - regardless of whether the
   icon is an SVG or a Dan PNG. Achieved by:
   - making icon tile and label cell BOTH 36px tall flex containers,
   - centring contents inside each via inline-flex,
   - removing any text-leading offset by forcing line-height:1 on the label. */
.drawer-menu .dm-ic,
.drawer-menu .dm-ic-img {
  width: 36px;
  height: 36px;
  background: rgba(0,196,171,0.10);
  border-radius: 8px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}
.drawer-menu .dm-ic svg {
  /* Dan-restyle (2026-06-16, per JD - 8th attempt): SVG icons go edge-to-
     edge inside their viewbox (no internal whitespace) while Dan PNG icons
     have transparent padding around the art. Shrinking SVG to 22px gives
     the tile internal whitespace that matches PNG rows, so the perceived
     gap between icon and label is the same for every row. */
  width: 22px;
  height: 22px;
  display: block;
  flex-shrink: 0;
  stroke: #009e8a !important;
  stroke-width: 2 !important;
}
.drawer-menu .dm-ic svg * {
  stroke: #009e8a !important;
}
/* Dan-restyle (2026-06-15, per JD): grid layout above already pins every
   label to the same X position, so the SVG margin-right hack is gone. */

/* Dan-restyle (2026-06-15, per JD): Unlink Maya wallet does not belong in
   the drawer (it lives on the Saved Payment Methods page). CSS !important
   prevents JS from re-showing it. */
#unlinkMayaBtn {
  display: none !important;
}

/* Dan-restyle (2026-06-15, per JD): Rent History + Saved Payment Methods
   are full-page screens that must cover the top app header. Bump to
   position:fixed and a high z-index so the cyan banner sits at the very
   top of the viewport. */
#rent-history-screen.screen,
#saved-payments-screen.screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  padding: 0;
  background: #fff;
  align-items: stretch;
  justify-content: flex-start;
}
.drawer-menu .dm-ic-img img {
  /* Dan-restyle (2026-06-14, per JD): bump PNG icons to 32px so they almost
     fill the 36px cyan tile (matches what Dan's mockup expects). */
  width: 32px;
  height: 32px;
  object-fit: contain;
  display: block;
}
.drawer-menu button {
  /* Dan-restyle (2026-06-15, per JD - final pass): use grid so the label
     column starts at the exact same X for EVERY row, regardless of whether
     the icon is a PNG (with internal whitespace) or a stroke-only SVG.
     Spacer column bumped to 24px so SVG icons (which go edge-to-edge inside
     the cyan tile and have no internal whitespace) read as visibly spaced
     from the label, matching the perceived gap on PNG rows. */
  display: grid;
  grid-template-columns: 36px 1fr;
  column-gap: 18px;
  align-items: center;
  min-height: 56px;
  padding: 10px 12px;
  line-height: 1;
}
.drawer-menu button > .dm-ic,
.drawer-menu button > .dm-ic-img { grid-column: 1; }
.drawer-menu button > .dm-label { grid-column: 2; }
.drawer-menu .dm-label {
  flex: 1;
  min-width: 0;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}

#rent-history-list {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.history-item {
  background: #f7f7f7;
  padding: 10px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.4;
}

/* HELP PANEL */
.help-card {
  width: 100%;
  max-width: 420px;
  background: white;
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  animation: popIn 0.18s ease;
}

.help-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

/* Dan restyle 02/N (2026-06-01): cyan banner headers for Instructions and
   Rent History panels. Scoped so the auth/login card stays white. */
#rent-history-screen .help-header {
  background: #00c4ab;
  margin: -18px -18px 14px;
  padding: 14px 18px;
  border-radius: 18px 18px 0 0;
}
#help-screen .help-header {
  background: #00c4ab;
  margin: -18px -18px 14px;
  padding: 14px 18px;
  border-radius: 20px 20px 0 0;
}
#help-screen .help-header strong,
#help-screen .help-header .help-icon,
#rent-history-screen .help-header strong {
  color: #fff;
}

.help-title {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 16px;
}

.help-icon {
  font-size: 18px;
}

.help-body {
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
}

.help-body a {
  color: #00bcd4;
  text-decoration: none;
  font-weight: 500;
}

.help-body a:hover {
  text-decoration: underline;
}

@keyframes popIn {
  from {
    transform: scale(0.96);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* ===============================
   AUTH MODAL (FLOATING CARD)
================================ */

.auth-card {
  width: 92%;
  max-width: 400px;
  background: white;
  border-radius: 22px;
  box-shadow: 0 18px 48px rgba(17,19,24,0.12), 0 2px 6px rgba(17,19,24,0.04);
  padding: 22px 20px;
  animation: modalPop 0.18s ease-out;
  border: 1px solid #eef1f4;
  /* Dan-restyle (2026-06-15): position anchor for the absolute X button. */
  position: relative;
}
/* Dan-restyle (2026-06-08): clean white login surface + cyan inputs */
.auth-body input:focus { border-color: #00c4ab !important; box-shadow: 0 0 0 3px rgba(0,196,171,0.18); }
.auth-body button:not([disabled]):hover { filter: brightness(0.97); }
.auth-divider { color: #6b7280; font-size: 12px; text-align: center; }
.auth-link { background: none !important; border: none !important; color: #00c4ab !important; font-weight: 700 !important; cursor: pointer; padding: 0 !important; }
#google-signin-container { padding-bottom: 4px; }

.auth-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  font-size: 16px;
}

.auth-header button {
  border: none;
  background: none;
  font-size: 18px;
  cursor: pointer;
}

.auth-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
}

.auth-body input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid #e5e7eb;
  border-radius: 12px;
  font-size: 15px;
  font-family: 'Familjen Grotesk', sans-serif;
  outline: none;
  box-sizing: border-box;
}

.auth-body input:focus {
  border-color: #00e5c8;
}

/* Dan-restyle (2026-06-14): primary auth buttons in solid cyan #00c4ab
   with white text - matches the cyan accents everywhere else. */
.auth-body #loginSubmitBtn,
.auth-body #registerSubmitBtn {
  width: 100%;
  padding: 14px;
  background: #00c4ab;
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  font-family: 'Familjen Grotesk', sans-serif;
  box-shadow: 0 4px 14px rgba(0,196,171,0.35);
  letter-spacing: 0.2px;
}
.auth-body #loginSubmitBtn:hover,
.auth-body #registerSubmitBtn:hover:not(:disabled) {
  background: #009e8a;
}
.auth-body #registerSubmitBtn:disabled {
  background: #e5e7eb;
  color: #9ca3af;
  cursor: not-allowed;
  box-shadow: none;
}

.auth-divider {
  text-align: center;
  font-size: 13px;
  color: #6b7280;
}

.auth-link {
  background: none;
  border: none;
  color: #00c4ab;
  font-weight: 600;
  cursor: pointer;
  font-size: 13px;
  font-family: 'Familjen Grotesk', sans-serif;
}

.otp-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.otp-row input {
  flex: 1;
}

.otp-row #sendOtpBtn {
  padding: 12px 14px;
  /* Dan-restyle (2026-06-14): Send OTP gets a cyan outline so it reads as
     a real action, not a disabled-looking grey pill. */
  background: #fff;
  border: 1.5px solid #00c4ab;
  color: #009e8a;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Familjen Grotesk', sans-serif;
  white-space: nowrap;
}
.otp-row #sendOtpBtn:hover { background: #e7faf6; }

.otp-row #sendOtpBtn:hover {
  border-color: #00e5c8;
}

/* subtle animation */
@keyframes modalPop {
  from { transform: scale(0.96); opacity: 0.6; }
  to   { transform: scale(1); opacity: 1; }
}

.auth-switch {
  font-size: 13px;
  margin-top: 10px;
  text-align: center;
  color: #666;
}

.auth-switch span {
  color: #00bcd4;
  cursor: pointer;
  font-weight: 600;
}

/* RENTAL LIVE PANEL */
.rental-live {
  text-align: center;
  padding: 6px 0;
}

.rental-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 4px;
}

.rental-timer {
  font-size: 28px;
  font-weight: 700;
  margin: 4px 0;
}

.rental-sub {
  font-size: 12px;
  color: #888;
}

/* DISPENSING PANEL */
.dispensing-live {
  text-align: center;
  padding: 10px 0;
}

.dispensing-title {
  font-size: 15px;
  font-weight: 600;
  margin-top: 6px;
}

.dispensing-sub {
  font-size: 12px;
  color: #888;
}

/* Spinner */
.spinner {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 3px solid #eee;
  border-top: 3px solid #00ffff;
  margin: auto;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* PAYMENT CONFIRMED */
.payment-confirmed {
  text-align: center;
}

.checkmark {
  font-size: 22px;
  margin-bottom: 4px;
}

.confirmed-title {
  font-weight: 600;
  font-size: 15px;
}

.confirmed-sub {
  font-size: 12px;
  color: #888;
}

.success-card {
  background: white;
  border-radius: 22px;
  padding: 24px;
  text-align: center;
}

.success-powerbank {
  font-size: 64px;
  margin: 10px 0;
}

.success-stats {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.label {
  font-size: 13px;
  color: #777;
}

.search-btn {
  margin-top: 16px;
  border: none;
  background: #f2f2f2;
  padding: 14px;
  border-radius: 999px;
  width: 100%;
}

#rental-mini-bar {
  background: white;
  cursor: pointer;
  transition: background 0.15s;
}

#rental-mini-bar[style*="none"] {
  border-top: none;
}