/* Packing Checklist Panel Styles */
.panel-packing {
  width: 425px;
  background: var(--bg-surface);
  border-left: 1px solid var(--border-color);
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, border-left-color 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
  opacity: 1;
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.3);
}

.panel-packing.collapsed {
  width: 0;
  opacity: 0;
  border-left: 1px solid transparent;
  box-shadow: none !important;
  pointer-events: none;
}

/* Close button in packing panel header (desktop only) */
.panel-packing .panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 1rem;
}

.btn-close-packing {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  border-radius: var(--border-radius-sm);
  width: 28px;
  height: 28px;
  cursor: pointer;
  transition: var(--transition-smooth);
  flex-shrink: 0;
}

.btn-close-packing:hover {
  border-color: var(--text-muted);
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.04);
}

@media (max-width: 768px) {
  .btn-close-packing {
    display: none;
  }
}

/* Template save/load row */
.packing-template-actions {
  display: flex;
  gap: 8px;
}

.btn-template-action {
  flex: 1;
  font-size: 11px;
  gap: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  opacity: 0.8;
}

.btn-template-action:hover {
  opacity: 1;
}

.btn-template-action:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.btn-template-action:disabled:hover {
  opacity: 0.35;
}

.btn-template-action svg {
  flex-shrink: 0;
}

/* Toast notification inside packing panel */
.packing-toast {
  position: absolute;
  bottom: 80px;
  left: 16px;
  right: 16px;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  padding: 10px 14px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text-primary);
  text-align: center;
  box-shadow: var(--shadow-premium);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  z-index: 30;
}

.packing-toast.visible {
  opacity: 1;
  transform: translateY(0);
}



.deck-scroll-wrapper {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 16px;
}

/* Packing Stats HUD */
.packing-stats-hud {
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  padding: 12px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.packing-stats-hud.hidden {
  display: none;
}

.packing-stats-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.packing-stats-label {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text-secondary);
}

.packing-stats-val {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-flight);
}

.packing-progress-bg {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
  overflow: hidden;
}

.packing-progress-bar {
  height: 100%;
  background: var(--accent-flight);
  width: 0%;
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.packing-quick-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.btn-packing-action {
  flex: 1;
  font-size: 10px;
  padding: 4px 8px;
  border-radius: var(--border-radius-sm);
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.btn-packing-action:hover {
  border-color: var(--text-muted);
  color: var(--text-primary);
}

/* Categories styling */
.packing-category-group {
  margin-bottom: 20px;
}

.packing-category-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px dashed var(--border-color);
  cursor: pointer;
  user-select: none;
}

.packing-category-chevron {
  font-size: 9px;
  transition: transform 0.15s ease;
}

.packing-category-group.collapsed .packing-category-chevron {
  transform: rotate(-90deg);
}

.packing-category-group.collapsed .packing-list {
  display: none;
}

.packing-category-count {
  margin-left: auto;
  font-size: 10px;
  font-weight: normal;
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 6px;
  border-radius: 10px;
}

.packing-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  margin: 0;
}

.packing-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  transition: var(--transition-smooth);
  user-select: none;
  position: relative;
}

.packing-item:hover {
  border-color: var(--border-focus);
}

.packing-item.dragging {
  opacity: 0.4;
}

.packing-item.drag-over {
  border-color: var(--accent-flight);
  box-shadow: 0 -2px 0 var(--accent-flight);
}

.packing-drag-handle {
  cursor: grab;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
  opacity: 0;
  transition: var(--transition-smooth);
}

.packing-item:hover .packing-drag-handle {
  opacity: 1;
}

.packing-drag-handle:active {
  cursor: grabbing;
}

.packing-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-color);
  border-radius: 4px;
  background: transparent;
  outline: none;
  cursor: pointer;
  position: relative;
  transition: var(--transition-smooth);
  flex-shrink: 0;
}

.packing-checkbox:checked {
  background: var(--accent-flight);
  border-color: var(--accent-flight);
}

.packing-checkbox:checked::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.packing-text {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-primary);
  transition: var(--transition-smooth);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  flex: 1;
}

.packing-item.checked .packing-text {
  color: var(--text-muted);
  text-decoration: line-through;
}

/* Item Delete Button */
.btn-delete-packing {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0;
  transition: var(--transition-smooth);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 4px;
}

.packing-item:hover .btn-delete-packing {
  opacity: 1;
}

.btn-delete-packing:hover {
  color: #ff4d4d;
  background: rgba(255, 77, 77, 0.1);
}

/* Mobile Packing checklist overrides */
@media (max-width: 768px) {
  .panel-packing {
    width: 100% !important;
    border-left: none;
    transition: none;
  }

  .panel-packing.active {
    opacity: 1;
    pointer-events: all !important;
  }

  /* Generic mobile panel rules collapse this to display:block !important
     (see base.css `body .panel.active`), which otherwise wins over the
     plain `display: flex` below regardless of this selector's higher
     specificity — importance always beats specificity — silently
     discarding the flex-column layout this rule depends on. Content then
     just stacks in normal block flow and any extra height from the floor
     below collapses as dead space after the footer instead of the footer
     being pushed down to it, for short content (e.g. the empty-state
     card) leaving a dead gap between the footer buttons and the bottom
     nav. !important here restores the intended flex-column layout with a
     floor height matching the visible viewport so a short packing list
     still fills the screen and its footer lands right above the nav bar,
     while longer content still grows/scrolls with the page as normal. */
  body #panel-packing.active {
    display: flex !important;
    flex-direction: column;
    min-height: calc(100dvh - var(--mobile-hud-height, 125px) - var(--sandbox-banner-height, 0px) - var(--mobile-nav-height, 60px) - env(safe-area-inset-bottom, 0px));
  }

  /* Compact HUD: the floor height above assumes the *full* HUD, so a
     short packing list left just as much dead space at the bottom once
     the HUD collapsed (the freed space at the top doesn't shrink this
     panel's own floor) — shrink it in lockstep the same way. */
  body.hud-scrolled #panel-packing.active {
    min-height: calc(100dvh - var(--mobile-hud-compact, 48px) - var(--sandbox-banner-height, 0px) - var(--mobile-nav-height, 60px) - env(safe-area-inset-bottom, 0px));
  }
}

/* Packing Actions Footer and Popup Form */
.packing-footer {
  padding: 16px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-surface);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.btn-add-item {
  width: 100%;
  justify-content: center;
  font-family: var(--font-sans);
}

.btn-add-item svg {
  margin-right: 4px;
}

.packing-popup-form {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 16px;
  right: 16px;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  padding: 16px;
  box-shadow: var(--shadow-premium);
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 10;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0;
  transform: translateY(10px) scale(0.95);
  pointer-events: none;
}

.packing-popup-form.active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}

.packing-input {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  padding: 10px 12px;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 13px;
  outline: none;
  transition: var(--transition-smooth);
}

.packing-input:focus {
  border-color: var(--accent-flight);
  box-shadow: 0 0 0 2px var(--accent-flight-glow);
}

.packing-popup-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.btn-small {
  padding: 6px 12px;
  font-size: 12px;
}

.btn-save {
  background: var(--accent-flight);
  color: #0a0b0d;
}

.btn-save:hover {
  background: #00b8cc;
}

/* Suggestion Checklist Drawer overlay */
.suggestion-drawer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 75%;
  background: var(--bg-surface-elevated);
  border-top: 1px solid var(--border-color);
  border-top-left-radius: var(--border-radius-lg);
  border-top-right-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-premium);
  display: flex;
  flex-direction: column;
  z-index: 20;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.suggestion-drawer.active {
  transform: translateY(0);
}

.suggestion-drawer-header {
  padding: 16px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.suggestion-drawer-header h3 {
  margin: 0;
  font-size: 14px;
  font-family: var(--font-sans);
}

.btn-close-drawer {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 18px;
}

.suggestion-drawer-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.suggestion-select-all {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}

.suggestion-item-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
}

.suggestion-item-option:hover {
  background: rgba(255, 255, 255, 0.02);
}

.suggestion-drawer-footer {
  padding: 16px;
  border-top: 1px solid var(--border-color);
  display: flex;
  gap: 8px;
}

.suggestion-drawer-footer .btn {
  flex: 1;
}

/* On mobile the packing panel lays out inline (position: relative,
   height: auto) instead of as a fixed-height sidebar, so this drawer's
   desktop "absolute, bottom: 0 of the panel" positioning would anchor to
   the panel's short content height instead of the viewport. Pin it to the
   viewport directly so it still behaves like a bottom sheet — but stop it
   at the HUD and the bottom nav rather than covering the full screen, so
   both stay visible and the sheet only occupies the space between them.
   Placed after the base .suggestion-drawer rule above so it actually wins
   the cascade tie instead of losing to source order. */
@media (max-width: 768px) {
  .suggestion-drawer {
    position: fixed;
    top: calc(var(--mobile-hud-height, 125px) + var(--sandbox-banner-height, 0px) + var(--announcement-banner-height, 0px));
    left: 0;
    right: 0;
    bottom: calc(var(--mobile-nav-height, 60px) + env(safe-area-inset-bottom, 0px));
    height: auto;
    z-index: 1350;
    /* transform only — the open/close slide is the only motion meant to be
       animated here. A transition on `top` looks tempting so the drawer
       tracks HUD compact/full changes smoothly, but it also fires on the
       drawer's very first layout (display:none -> flex when the Packing
       tab becomes active), visibly animating it into place for a frame
       before the translateY(100%) below re-hides it — a brief flash of
       the drawer on every tab switch. `top` just snaps instantly instead,
       same as every other HUD-reactive element in this codebase. */
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* Track the HUD's own compact/full state — the drawer can be opened
     while the HUD is either, and its top edge should always sit flush
     against whichever is currently showing. */
  body.hud-scrolled .suggestion-drawer {
    top: calc(var(--mobile-hud-compact, 48px) + var(--sandbox-banner-height, 0px) + var(--announcement-banner-height, 0px));
  }
}

.load-list-option {
  cursor: default;
  justify-content: space-between;
}

.load-list-option-label {
  flex: 1;
  font-size: 13px;
  color: var(--text-primary);
}

.load-list-option-count {
  color: var(--text-muted);
}

.load-list-empty-note {
  font-size: 12px;
  color: var(--text-muted);
  padding: 8px 0;
}

.list-items-modal-card {
  max-width: 480px;
}

.list-items-modal-list {
  max-height: 320px;
  overflow-y: auto;
  margin: 0 0 16px;
}

.list-items-modal-list .btn-delete-packing {
  opacity: 1;
}

.list-items-add-row {
  display: flex;
  gap: 8px;
}

.list-items-add-row .packing-input {
  flex: 1;
}