/* ══════════════════════════════════════════════════════
   MOBILE — Hamburger · Sidebar · Responsive overrides
══════════════════════════════════════════════════════ */

/* Mobile header elements */
.emb-hdr-mobile {
  display: none; align-items: center; flex-shrink: 0;
  padding-left: var(--s2);
}
.emb-mob-menu-btn {
  position: relative; background: none; border: none; cursor: pointer;
  color: var(--text-dim); padding: var(--s1);
  display: flex; align-items: center; transition: color var(--dur-base);
}
.emb-mob-menu-btn:hover { color: var(--text); }
.emb-mob-menu-btn .material-symbols-outlined { font-size: 28px; }
.emb-mob-menu-dot {
  position: absolute; top: 2px; right: 2px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--danger);
  animation: badgePop .4s var(--ease-out) both;
}
.emb-mob-menu-dot.hidden { display: none; }

/* Mobile sidebar overlay */
#emb-mob-sidebar-overlay {
  position: fixed; inset: 4px; z-index: 590;
  background: rgba(0,0,0,.65); display: none;
  backdrop-filter: blur(2px);
}
#emb-mob-sidebar-overlay.show { display: block; animation: fadeIn .25s both; }

/* Mobile sidebar panel */
#emb-mobile-sidebar {
  position: fixed; top: 4px; left: 4px; bottom: 4px; z-index: 595;
  width: min(310px, calc(100vw - 8px));
  background: var(--bg-card); border-right: 1px solid var(--border-2);
  display: none; flex-direction: column; overflow: hidden;
  box-shadow: 8px 0 32px rgba(0,0,0,.5);
}
#emb-mobile-sidebar.show { display: flex; animation: slideLeft .35s var(--ease-out) both; }

.emb-mob-sb-hdr {
  background: var(--bg-card-2); padding: var(--s3) var(--s4);
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.emb-mob-sb-brand { font-family: var(--font-mono); font-size: .56rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text-muted); }
.emb-mob-sb-close { color: var(--text-muted); background: none; border: none; cursor: pointer; display: flex; align-items: center; padding: .2rem; transition: color var(--dur-base); }
.emb-mob-sb-close:hover { color: var(--text); }

/* Main view wrapper */
.emb-mob-sb-main { display: flex; flex-direction: column; flex: 1; overflow: hidden; }
.emb-mob-sb-main.hidden { display: none; }

.emb-mob-sb-user {
  padding: var(--s4); border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: var(--s3); flex-shrink: 0;
}
.emb-mob-sb-user-top { display: flex; align-items: center; gap: var(--s3); }
.emb-mob-sb-photo {
  width: 52px; height: 52px; background: var(--bg-card-2); flex-shrink: 0;
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--border-2);
}
.emb-mob-sb-photo img { width: 100%; height: 100%; object-fit: cover; }
.emb-mob-sb-init { font-family: var(--font-mono); font-size: .9rem; font-weight: 700; color: var(--accent); }
.emb-mob-sb-info { flex: 1; min-width: 0; }
.emb-mob-sb-name { font-family: var(--font); font-size: .95rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.emb-mob-sb-company { font-family: var(--font-mono); font-size: .54rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-top: .15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.emb-mob-sb-code-lbl { font-family: var(--font-mono); font-size: .5rem; letter-spacing: .13em; text-transform: uppercase; color: var(--text-muted); }
.emb-mob-sb-code-row { display: flex; align-items: center; gap: var(--s2); position: relative; margin-top: .2rem; }
.emb-mob-sb-code { font-family: var(--font-mono); font-size: .82rem; letter-spacing: .18em; color: var(--text); }
.emb-mob-sb-copy { color: var(--text-muted); background: none; border: none; cursor: pointer; padding: .15rem; display: flex; align-items: center; transition: color var(--dur-base); }
.emb-mob-sb-copy:hover { color: var(--accent); }
.emb-mob-sb-lote { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.emb-mob-sb-lote strong { color: var(--accent); }

.emb-mob-sb-nav { flex: 1; overflow-y: auto; display: flex; flex-direction: column; padding: var(--s2) 0; }
.emb-mob-nav-item {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s5); cursor: pointer;
  font-family: var(--font-mono); font-size: .66rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-dim); background: none; border: none;
  text-align: left; width: 100%;
  transition: color var(--dur-base), background var(--dur-base);
  position: relative; min-height: 48px;
}
.emb-mob-nav-item:hover { color: var(--text); background: rgba(255,255,255,.04); }
.emb-mob-nav-item .material-symbols-outlined { font-size: 20px; }
.emb-mob-nav-notif-dot {
  position: absolute; right: var(--s5); top: 50%; transform: translateY(-50%);
  background: var(--danger); color: #fff;
  font-family: var(--font-mono); font-size: .52rem; font-weight: 700;
  min-width: 18px; height: 18px; border-radius: 9px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
}
.emb-mob-nav-notif-dot.hidden { display: none; }
.emb-mob-nav-logout { color: var(--danger); border-top: 1px solid var(--border); margin-top: auto; }
.emb-mob-nav-logout:hover { color: #ff9090; background: rgba(224,85,85,.08); }

/* ── INLINE NOTIFICATIONS PANEL ───────────────────── */
.emb-mob-notif-view {
  display: none; flex-direction: column; flex: 1; overflow: hidden;
}
.emb-mob-notif-view.show { display: flex; animation: slideLeft .25s var(--ease-out) both; }
.emb-mob-notif-hdr {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4); border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.emb-mob-notif-back {
  background: none; border: none; cursor: pointer;
  color: var(--text-dim); display: flex; align-items: center;
  padding: var(--s1); border-radius: var(--r-sm);
  transition: color var(--dur-base);
}
.emb-mob-notif-back:hover { color: var(--text); }
.emb-mob-notif-back .material-symbols-outlined { font-size: 20px; }
.emb-mob-notif-title {
  font-family: var(--font-mono); font-size: .62rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--text-dim);
}
.emb-mob-notif-view .emb-sidebar-list {
  flex: 1; overflow-y: auto; padding: var(--s3);
  display: flex; flex-direction: column; gap: var(--s3);
}

/* ── RESPONSIVE BREAKPOINTS ───────────────────────── */

/* Tablet (≤ 900px) */
@media (max-width: 900px) {
  #emb-user-card { display: none; }
  .emb-bell-btn, .emb-btn-wa, .emb-btn-admin { display: none !important; }
  .emb-hdr-mobile { display: flex; }

  .emb-metrics-sec {
    grid-template-columns: 1fr 1fr;
  }
  .emb-cashback-card { grid-column: 1 / -1; }
}

/* Mobile (≤ 640px) */
@media (max-width: 640px) {
  body { margin: 4px; }
  #emb-login, #emb-credential, #emb-load { inset: 4px; }
  #emb-admin-popup { inset: 4px; padding: var(--s4) 0 0; }

  .emb-login-panel { padding: var(--s6) var(--s4); border-radius: var(--r-lg); }
  .emb-login-title { font-size: 1.6rem; }

  .emb-metrics-sec { grid-template-columns: 1fr; }
  .emb-cashback-card { grid-column: 1; }

  /* Ribbon: compact horizontal scroll instead of stacking */
  .emb-ribbon {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .emb-ribbon::-webkit-scrollbar { display: none; }
  .emb-ribbon-item {
    flex: 0 0 auto;
    min-width: 0;
    padding: var(--s2) var(--s3);
    border-right: 1px solid var(--border);
    border-bottom: none;
  }
  .emb-ribbon-item:last-child { border-right: none; }
  .emb-ribbon-val { font-size: .78rem; }
  .emb-ribbon-lbl { font-size: .42rem; letter-spacing: .1em; }

  /* Bento ranking: 1 per row, photo left + info right */
  .emb-bento-top3 {
    grid-template-columns: 1fr;
  }
  .emb-bento-card {
    flex-direction: row;
    min-height: 0;
  }
  .emb-bento-photo-wrap {
    width: 100px;
    aspect-ratio: 1 !important;
    flex-shrink: 0;
    border-radius: var(--r-md) 0 0 var(--r-md);
  }
  .emb-bento-info {
    padding: var(--s3);
    justify-content: center;
  }
  .emb-bento-inv-num { font-size: 1.3rem; }
  .emb-bento-card.rank-1 .emb-bento-inv-num { font-size: 1.4rem; }
  .emb-honraria-badge { margin-top: var(--s1); }

  .emb-board-box { padding: var(--s4); }

  .emb-sharekit-card { flex-direction: column; }
  .emb-sharekit-actions { width: 100%; }
  .emb-btn-share { flex: 1; justify-content: center; }

  /* Files edge-to-edge on mobile */
  .emb-files-sec { margin: 0 calc(-1 * var(--s3)); }
  .emb-files-inner { padding: 0; }
  .emb-files-scroll { padding-left: var(--s3); padding-right: var(--s3); }
  /* No left fade on mobile — first card aligns with content */
  .emb-files-scroll-wrap,
  .emb-files-scroll-wrap.scrolled {
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 24px), transparent) !important;
    mask-image: linear-gradient(to right, black calc(100% - 24px), transparent) !important;
  }

  .emb-files-title { margin-left: 16px; }

  .emb-hdr { padding: var(--s2) var(--s3); }
  .emb-hdr-sub { display: none; }

  main.emb-main { padding: var(--s3) var(--s3) var(--s8); gap: var(--s4); }

  .emb-apop-edit-grid { grid-template-columns: 1fr; }
}

/* Extra small (≤ 400px) */
@media (max-width: 400px) {
  .emb-login-title { font-size: 1.4rem; }
  .emb-login-panel { padding: var(--s5) var(--s3); }
}

/* Safe area for devices with notches */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  main.emb-main { padding-bottom: calc(var(--s10) + env(safe-area-inset-bottom)); }
  #emb-mobile-sidebar { bottom: calc(4px + env(safe-area-inset-bottom)); }
}