/* FAB action button
   Adjusted size & position to match the higher FAB (sortBtn / .fab.sort) across breakpoints.
   Behavior:
   - Uses the same CSS variables as the primary FAB so sizing/position follow the page's design tokens:
       --fab-left, --fab-bottom-small, --icon-size, --fab-opacity, --shadow
   - Desktop (default): width/height = var(--icon-size,50px); bottom = calc(var(--fab-bottom-small,10px) + var(--icon-size,50px) + 14px + env(safe-area-inset-bottom));
   - Mobile / small screens: width/height = var(--icon-size,40px); bottom = calc(var(--fab-bottom-small,10px) + var(--icon-size,40px) + 14px + env(safe-area-inset-bottom));
   Notes:
   - Retained original z-index and color; change background if you want it to match the sortBtn color.
   - Keep fallbacks so file works even if :root variables aren't present.
*/
.fab-action {
  position: fixed;
  left: var(--fab-left, 10px);
  bottom: 80px;
  width: var(--icon-size, 50px);
  height: var(--icon-size, 50px);
  border-radius: 50%;
  /* keep original background color by default; change if you want exact fab-sort color */
  background: rgba(66,105,241,0.6);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow, 0 6px 18px rgba(0,0,0,.18));
  border: 0;
  cursor: pointer;
  /* keep original large z-index to avoid modal layering issues; can be changed if desired */
  z-index: 2147487000 !important;
  pointer-events: auto;
  padding: 0; /* match fab-cart/fab padding */
  transition: box-shadow .16s, transform .16s, opacity .12s;
}
.fab-action:hover {
  box-shadow: 0 12px 30px rgba(66,105,241,0.20), 0 2px 10px rgba(0,0,0,0.10);
  transform: scale(1.08) translateY(-4px);
}
.fab-action:active {
  box-shadow: 0 5px 16px rgba(66,105,241,0.15),0 1px 5px rgba(0,0,0,.12);
  transform: scale(0.96) translateY(2px);
}
.fab-action:focus {
  outline: none !important;
  border: none !important;
  box-shadow: var(--shadow, 0 6px 18px rgba(0,0,0,.18));
}
/* SVG size matches the primary FAB by default */
.fab-action svg {
  width: 22px;
  height: 22px;
  display: block;
}

/* ---------------------- HIDE floating FAB button by default ----------------------
   We hide the visible floating .fab-action button because the admin menu will be the
   trigger for the fab-action modal. The modal/backdrop (#fab-action-backdrop,
   #fab-action-modal) remain intact and can be opened programmatically by clicking
   the hidden element or by toggling classes / calling an exposed function.
------------------------------------------------------------------------------ */
.fab-action {
  display: none !important;
}
/* If you later want to show the button via JS, remove the inline style or set
   document.querySelector('.fab-action').style.display = '' or toggle a class. */

/* Mobile / small screens: follow the same variable-driven sizing as the sortBtn.
   This ensures the fab-action sits where the higher FAB (sortBtn) is placed on small screens. */
@media (max-width:600px), (max-height:480px) {
  .fab-action {
    left: var(--fab-left, 10px);
    bottom: 80px;
    width: var(--icon-size, 40px);
    height: var(--icon-size, 40px);
  }
  .fab-action svg { width: 16px; height: 16px; }
}

/* FAB modal backdrop and dialog */
#fab-action-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.28);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2147486999;
  padding: 20px;
}
#fab-action-backdrop.open { display: flex; }

#fab-action-modal,
#fab-action-modal:focus,
#fab-action-modal:focus-visible,
#fab-action-modal:active {
  width: 88vw;
  max-width: 980px;
  background: transparent !important;
  border-radius: 12px;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: stretch;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
}

/* Grid inside modal */
.fab-action-grid {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px;
  align-items: stretch;
  background: transparent !important;
}

/* Primary action buttons inside FAB grid */
.fab-action-btn {
  padding: 16px;
  border-radius: 10px;
  border: 0;
  cursor: pointer;
  font-weight: 700;
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 8px 18px rgba(0,0,0,0.06);
  transition: transform .12s, box-shadow .12s;
}
.fab-action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.12);
  opacity: 0.85;
}

/* backgrounds for FAB grid buttons */
.fab-act-quote     { background: rgba(108,99,255,0.6); }
.fab-act-saveorder { background: rgba(11,99,214,0.6);  }
.fab-act-vieworders{ background: rgba(8,166,84,0.6);   }
.fab-act-delete    { background: rgba(214,69,59,0.6);  }

.fab-action-btn:focus {
  outline: 3px solid #468bfa;
  outline-offset: 0px;
  z-index: 11;
}

/* =========================
   Gallery / Order list UI
   - left content (1., 2.) starts 10px from left edge
   - Chốt group sits 10px from right edge
   - gap between three buttons = 5px
   - buttons scaled to ~70% (smaller), and paddings reduced
   - tighter spacing / smaller fonts to show more order info
   - Modal is split into 4 fixed regions (title, filter, list, footer). Heights are fixed.
   ========================= */

/* CSS variables for the modal segmented layout
   NOTE: header/filter spacing were halved previously; user requested padding change for filter buttons.
   We set filter height to contain buttons with padding: 8px.
*/
:root {
  --fab-modal-height: 70vh;   /* overall modal height used for the list view */
  --fab-header-height: 29px;
  --fab-filter-height: 44px;  /* increased to accommodate button vertical padding (8px+8px + font) */
  --fab-save-btn-height: 40px; /* explicit save button height */
  /* make footer tall enough to host the save button + bottom spacing = 50% of button height */
  --fab-footer-height: calc(var(--fab-save-btn-height) + (var(--fab-save-btn-height) / 2)); /* 40 + 20 = 60px */
}

/* When the modal is used to show the gallery, we add class .gallery-modal to #fab-action-modal */
#fab-action-modal.gallery-modal {
  height: var(--fab-modal-height);
  min-height: 420px;
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  overflow: hidden; /* we want only the list region to scroll */
}

/* wrapper and header - fixed height */
.gallery-list-wrapper {
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}
/* Updated: set top padding to 15px as requested (keep bottom padding small to maintain spacing) */
.gallery-header {
  padding: 15px 12px 4px 12px; /* top = 15px, right = 12px, bottom = 4px, left = 12px */
  background: #fff;
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--fab-header-height);
  box-sizing: border-box;
  flex: 0 0 var(--fab-header-height);
}
.gallery-title {
  font-size: 2.47rem; /* increased by ~30% (1.9rem * 1.3 ≈ 2.47rem) */
  font-weight: 800;
  color: #111188;
  margin: 0;
}

/* Filter bar - fixed height and centered
   Increased container height to fit larger button padding.
   Use !important to override inline padding set by JS.
*/
.gallery-filter-bar {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  padding: 6px 12px !important; /* a bit of vertical spacing inside the bar */
  align-items: center;
  justify-content: center;
  overflow-x: auto;
  height: var(--fab-filter-height);
  flex: 0 0 var(--fab-filter-height);
  box-sizing: border-box;
  background: #fff;
}

/* filter buttons (in case JS inlines different padding, CSS acts as fallback)
   Set vertical padding to 8px as requested */
.gallery-filter-bar button {
  padding: 8px 12px !important; /* vertical = 8px, horizontal = 12px */
  font-weight: 700;
  font-size: 13px;
  border-radius: 6px;
}

/* list area - fixed height, scrollable independent of modal
   Adjusted to reference new header/filter/footer heights */
.gallery-list-scroll {
  /* Instead of padding-bottom hacks, the list region is given a fixed computed height
     so the footer doesn't overlap the content. This area is the only scrollable region. */
  height: calc(var(--fab-modal-height) - var(--fab-header-height) - var(--fab-filter-height) - var(--fab-footer-height));
  min-height: 120px;
  max-height: calc(100vh - (var(--fab-header-height) + var(--fab-filter-height) + var(--fab-footer-height) + 20px));
  overflow-y: auto;
  padding: 2px 8px; /* reduced vertical padding to match tightened layout */
  box-sizing: border-box;
  flex: 0 0 auto;
}

/* list */
.gallery-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* each item: left content and right controls */
.gallery-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  /* left padding 10px as requested; reduce right padding to give more space */
  padding: 6px 6px 6px 10px;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  min-height: 40px;
  box-sizing: border-box;
}

/* filename styling - reduce font slightly to allow more content */
.gallery-list li .filename {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #222;
  font-size: 1.05rem; /* reduced */
  font-weight: 600;
  flex: 1 1 auto;
  min-width: 0;
  margin-right: 6px; /* slight space before buttons */
}

/* button group on the right: smaller gap (5px) and 10px from right edge */
.btn-group {
  display: inline-flex;
  align-items: center;
  gap: 5px;            /* changed to 5px */
  margin-right: 10px;  /* 10px from right edge */
}

/* Base button style: scaled down ~70% */
.gallery-action-btn,
.btn-view-img,
.btn-view-json,
.btn-confirm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 6px;     /* compact padding */
  min-height: 30px;
  min-width: 44px;
  font-size: 12px;      /* smaller font to show more info */
  font-weight: 700;
  border-radius: 6px;
  border: 0;
  cursor: pointer;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  transition: transform .08s ease, box-shadow .08s ease, background-color .12s ease;
  box-sizing: border-box;
}

/* style Ảnh and Đơn like gallery-close but compact */
.btn-view-img,
.btn-view-json {
  background: #444;
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.06);
}
.btn-view-img:hover,
.btn-view-json:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 18px rgba(0,0,0,.12);
  background: #222;
}
.btn-view-img:active,
.btn-view-json:active { transform: translateY(1px); }

/* Chốt button: same shape/behavior but two colors */
.btn-confirm {
  padding: 6px 10px;
  border-radius: 6px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 12px rgba(0,0,0,0.06);
  transition: transform .08s, box-shadow .08s, background-color .12s;
}

/* inactive = red */
.btn-confirm.inactive {
  background: #d6453b;
  color: #fff;
}
.btn-confirm.inactive:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 18px rgba(0,0,0,.12);
  background: #b83b34;
}

/* active = green */
.btn-confirm.active {
  background: #21ad4a;
  color: #fff;
}
.btn-confirm.active:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 18px rgba(0,0,0,.12);
  background: #15953b;
}

/* Focus outlines */
.btn-view-img:focus,
.btn-view-json:focus,
.btn-confirm:focus {
  outline: 3px solid rgba(33,150,243,0.16);
  outline-offset: 0;
}

/* gallery footer & close - fixed height
   Footer height is independent now so we can place the save button with bottom spacing = 50% of its height.
*/
.gallery-footer {
  padding: 6px 18px 0 18px; /* remove bottom padding; we use bottom spacing via padding-bottom below */
  background: #fff;
  position: relative;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end; /* make children sit towards the bottom of the footer region */
  z-index: 5;
  height: var(--fab-footer-height);
  flex: 0 0 var(--fab-footer-height);
  box-sizing: border-box;
  /* ensure the button sits above the absolute bottom by 50% of its height */
  padding-bottom: calc(var(--fab-save-btn-height) / 2);
}
.gallery-close {
  /* enforce save button height and place it centered horizontally */
  height: var(--fab-save-btn-height); /* explicit height */
  line-height: calc(var(--fab-save-btn-height)); /* center text vertically */
  padding: 0 16px; /* horizontal padding only (vertical controlled by height) */
  border-radius: 8px;
  border: 0;
  background: #444;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  min-width:200px;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-sizing: border-box;
}
.gallery-close:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(0,0,0,.14);
  background: #222;
}

/* preview and other components remain unchanged (kept compact) */
.preview-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.9);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2147487001;
  padding: 10px;
}
.preview-backdrop.open { display: flex; }
.preview-wrap {
  max-width: 100%;
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  overflow: auto;
  padding: 12px;
  box-sizing: border-box;
}
.preview-img {
  max-width: 100%;
  width: auto;
  object-fit: contain;
  border-radius: 6px;
  background: #000;
}
.preview-meta      { color: #fff; font-size: 13px; }
.preview-close {
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  background: #333;
  color: #fff;
  border: 0;
  cursor: pointer;
  position: sticky;
  bottom: 12px;
  align-self: center;
  z-index: 2;
}
.preview-close:hover { background: #222; }

#fab-delete-backdrop {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.45);
  z-index: 2147485001;
  padding: 12px;
}
#fab-delete-backdrop.open { display: flex; }
#fab-delete-modal {
  width: 90vw;
  max-width: 420px;
  background: #fff;
  border-radius: 10px;
  padding: 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,.2);
  border: 1px solid rgba(0,0,0,.08);
  text-align: center;
  box-sizing: border-box;
}
#fab-delete-modal p {
  margin: 0 0 14px;
  font-weight: 700;
  color: #222;
  font-size: 16px;
}
#fab-delete-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}
#fab-delete-yes,
#fab-delete-no {
  padding: 10px 14px;
  border-radius: 8px;
  border: 0;
  font-weight: 700;
  cursor: pointer;
}
#fab-delete-yes { background: #d6453b; color: #fff; }
#fab-delete-no { background: #f0f0f0; color: #333; }

#fab-processing-backdrop {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.6);
  z-index: 2147488000;
  padding: 20px;
  pointer-events: none;
}
#fab-processing-backdrop.open {
  display: flex;
  pointer-events: auto;
}
.processing-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  color: #fff;
}
.spinner {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 6px solid rgba(255,255,255,0.14);
  border-top-color: #fff;
  animation: spin 1s linear infinite;
  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Mobile adjustments: ensure compact layout and chốt 10px from right edge */
@media (max-width:520px) {
  /* enforce the small fab size/position for very narrow devices as well */
  .fab-action {
    left: var(--fab-left, 10px);
    bottom: 80px;
    width: var(--icon-size, 40px);
    height: var(--icon-size, 40px);
  }
  #fab-action-modal { width: 94vw; }
  .gallery-title { font-size: 1.5rem; } /* increased mobile title by ~30% (1.15rem -> 1.5rem) */
  .gallery-list-scroll { padding: 2px 6px; height: calc(var(--fab-modal-height) - var(--fab-header-height) - var(--fab-filter-height) - var(--fab-footer-height)); }
  .gallery-list li { padding: 6px 6px 6px 10px; min-height: 36px; }
  .gallery-list li .filename { font-size: 1.0rem; }

  .btn-group { gap: 5px; margin-right: 10px; }
  .btn-view-img,
  .btn-view-json,
  .btn-confirm {
    padding: 5px 8px;
    min-height: 28px;
    min-width: 40px;
    font-size: 11px;
    border-radius: 6px;
  }

  .gallery-filter-bar { padding: 6px 10px !important; }
  .gallery-filter-bar button { padding: 6px 10px !important; } /* slightly reduced on small screens */
  .gallery-close {
    height: calc(var(--fab-save-btn-height) * 0.9); /* slightly smaller on very small screens */
    font-size: 16px;
    min-width: 160px;
  }
}

/* ===================================================================
   Save image / password dialogs styles (full)
   - Ensure password dialog width matches save dialog (same max-width & padding)
   =================================================================== */

/* Container for save-image dialog */
.fab-save-dialog-container {
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.06);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 14px 40px rgba(0,0,0,0.18);
  padding: 14px 16px;
  box-sizing: border-box;
  max-width: 520px;
  width: 100%;
  margin: 0 auto;
  align-self: center;
}

/* Container for password dialog: match save dialog width and padding */
.fab-pass-dialog-container {
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.06);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 14px 40px rgba(0,0,0,0.18);
  padding: 14px 16px;
  box-sizing: border-box;
  max-width: 520px; /* changed from 420px to 520px to match save dialog */
  width: 100%;
  margin: 0 auto;
  align-self: center;
}

/* Inputs: exact visual style used by add-product modal inputs */
.fab-save-dialog-input,
.fab-pass-input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 16px;
  margin: 8px 0;
  border: 1px solid #dcdcdc;
  border-radius: 8px;
  font-size: 19px;
  text-align: center;
  background: #ffffff;
  height: 64px;
  line-height: 1;
  -webkit-text-size-adjust: 100%;
  font-family: inherit;
  color: #111;
  outline: none;
}

/* invalid state */
.fab-save-dialog-input.invalid,
.fab-pass-input.invalid { border-color: #d6453b; }

/* Error text */
.fab-save-dialog-error {
  color: #d6453b;
  font-size: 13px;
  margin-top: 4px;
  text-align: center;
}

/* Footer layout: keep buttons in fixed width area, cancel at left, save at right */
.fab-save-dialog-footer,
.fab-pass-dialog-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  background: #fff;
  gap: 12px;
  width: 260px;
  margin: 12px auto 0;
}

/* OK / Save button styled like add-product "Lưu" / .btn-add */
.fab-save-dialog-ok,
.fab-pass-ok {
  padding: 10px 22px;
  border-radius: 10px;
  border: 0;
  background: #21ad4a;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  font-size: 18px;
}
.fab-save-dialog-ok:hover,
.fab-pass-ok:hover { background: #15953b; }

/* Cancel button same visual weight as add-product Hủy */
.fab-save-dialog-cancel,
.fab-pass-cancel {
  padding: 10px 22px;
  border-radius: 10px;
  border: 0;
  background: #e9e9e9;
  color: #555;
  font-weight: 700;
  cursor: pointer;
  font-size: 18px;
}
.fab-save-dialog-cancel:hover,
.fab-pass-cancel:hover { background: #dadada; }

/* Responsive tweaks */
@media (max-width:900px) {
  .fab-save-dialog-container, .fab-pass-dialog-container { padding: 16px; border-radius: 10px; max-width: 520px; }
  .fab-save-dialog-input, .fab-pass-input { height: 50px; font-size: 17px; padding: 10px 12px; }
  .fab-save-dialog-ok, .fab-pass-ok, .fab-save-dialog-cancel, .fab-pass-cancel { padding: 10px 18px; font-size: 16px; }
  .fab-save-dialog-footer, .fab-pass-dialog-footer { width: 220px; }
}
@media (max-width:600px) {
  .fab-save-dialog-input, .fab-pass-input { height: 52px; font-size: 17px; padding: 10px 12px; }
  .fab-save-dialog-ok, .fab-pass-ok, .fab-save-dialog-cancel, .fab-pass-cancel { padding: 10px 18px; font-size: 16px; }
  .fab-save-dialog-footer, .fab-pass-dialog-footer { width: 200px; }
}

/* Keep the rest of the file (other selectors) unchanged to avoid side effects */