/* style.css - phần mở rộng (không thay đổi code gốc) */

/* Dark-mode gentle (anti-glare) colors */
:root {
  --dm-bg: #1c2028;      /* dark background, not pitch black */
  --dm-card: #232833;
  --dm-text: #e9edf2;
  --dm-muted: #9aa6b2;
  --dm-accent: #4ba3ff;
  --dm-red: #b63a3a;
}

/* Theme toggle - applied when data-theme="dark" on documentElement */
[data-theme="dark"] {
  background: var(--dm-bg) !important;
  color: var(--dm-text) !important;
}

/* Dark overrides for cards & previews */
[data-theme="dark"] .card,
[data-theme="dark"] .preview,
[data-theme="dark"] .container {
  background: var(--dm-card) !important;
  color: var(--dm-text) !important;
}

/* Banner adjustments in dark */
[data-theme="dark"] .banner {
  background: linear-gradient(180deg, rgba(28,32,40,0.95), rgba(24,28,36,0.95));
  border-bottom-color: var(--dm-red);
  box-shadow: 0 4px 12px rgba(0,0,0,0.6);
}

/* small helpers for the inserted controls (gallery, template) */
.insert-row {
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:10px;
  flex-wrap:wrap;
}
.template-select {
  width:100%;
  max-width:320px;
  padding:8px 10px;
  border-radius:8px;
  border:1px solid rgba(0,0,0,0.06);
  background:transparent;
}

/* Gallery */
.qr-gallery {
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:12px;
}
.gallery-item {
  display:flex;
  gap:10px;
  align-items:center;
  padding:8px;
  border-radius:8px;
  background:linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.2));
  border:1px solid rgba(0,0,0,0.04);
}
.gallery-item img { width:64px; height:64px; border-radius:6px; object-fit:contain;}
.gallery-meta { flex:1; }
.gallery-meta .name { font-weight:700; color:inherit; }
.gallery-meta .date { font-size:12px; color:var(--muted); }

/* Buttons small */
.btn.small { padding:6px 8px; font-size:13px; }

/* floating top-right controls (theme toggle and export) */
.top-extensions {
  position: absolute;
  right: 14px;
  top: 10px;
  display:flex;
  gap:8px;
  z-index:60;
}
.ext-btn {
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(0,0,0,0.06);
  padding:6px 10px;
  border-radius:8px;
  cursor:pointer;
  font-weight:700;
}
[data-theme="dark"] .ext-btn {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.06);
  color: var(--dm-text);
}

/* responsive */
@media(max-width:880px){
  .top-extensions{ position: static; margin-left:auto; }
  .gallery-item{ flex-direction:row; }
}

/* ========================================================= */
/* ========================================================= */
/* === FIX: Chuyển nút menu 3 gạch sang TRÁI trên mobile === */
/* ========================================================= */
/* ========================================================= */

.hamburger {
  left: 14px !important;
  right: auto !important;
}

/* Căn lại banner để không bị chồng lên nút menu */
.banner {
  position: relative;
  justify-content: center;
}

.banner img,
.banner-text {
  margin-left: 42px; /* chừa chỗ cho hamburger */
}