/* ============================================================
   Vault UI — card-based layout
   All layout-critical rules use .my-vault-wrapper prefix for
   higher specificity to beat Betheme parent-theme overrides.
   ============================================================ */

/* ---- Section header ---- */
.my-vault-wrapper .my-vault-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 24px !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}
.my-vault-wrapper .my-vault-header h3 {
  margin: 0 !important;
  font-size: 22px !important;
  font-weight: 700 !important;
}

/* ---- View-toggle bar ---- */
.my-vault-wrapper .list-grid-view {
  margin-bottom: 16px !important;
}
.my-vault-wrapper .list-grid-view .view-items {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  gap: 6px !important;
}
.my-vault-wrapper .list-grid-view .view {
  cursor: pointer !important;
  opacity: 0.35 !important;
  display: flex !important;
  align-items: center !important;
  padding: 5px !important;
  border-radius: 6px !important;
  transition: opacity 0.15s, background 0.15s !important;
}
.my-vault-wrapper .list-grid-view .view.active,
.my-vault-wrapper .list-grid-view .view:hover {
  opacity: 1 !important;
}
.my-vault-wrapper .list-grid-view .view svg rect {
  fill: currentColor !important;
}

/* ============================================================
   Card grid wrapper
   ============================================================ */
.my-vault-wrapper .vault-items {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}
.my-vault-wrapper .vault-items[data-view="view-2"] {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 16px !important;
}
.my-vault-wrapper .vault-items[data-view="view-3"] {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
}
.my-vault-wrapper .vault-items[data-view="view-1"] .vi-meta .vi-meta__row{
  width: calc(50% - 10px);
}
.my-vault-wrapper .vault-items[data-view="view-2"] .vi-meta__row{
	width: calc(50% - 10px)!important;
}
.my-vault-wrapper .vault-items[data-view="view-3"] .vi-meta__row{
  width: 100% !important;
}
/* ============================================================
   Card
   ============================================================ */
.my-vault-wrapper .vault-item {
  display: flex !important;
  flex-direction: row !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  transition: box-shadow 0.2s ease !important;
}
.my-vault-wrapper .vault-item:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.09) !important;
}

/* Grid modes: stack image above content */
.my-vault-wrapper .vault-items[data-view="view-2"] .vault-item,
.my-vault-wrapper .vault-items[data-view="view-3"] .vault-item {
  flex-direction: column !important;
}

/* ---- Thumbnail container ---- */
.my-vault-wrapper .vi-thumb {
  flex: 0 0 180px !important;
  width: 180px !important;
  min-height: 220px !important;
  background: #f3f4f6 !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Grid: thumb becomes top banner */
.my-vault-wrapper .vault-items[data-view="view-2"] .vi-thumb,
.my-vault-wrapper .vault-items[data-view="view-3"] .vi-thumb {
  flex: none !important;
  width: 100% !important;
  min-height: 0 !important;
  aspect-ratio: 4 / 3 !important;
}

/* Background-image fill div (avoids theme height:auto on <img>) */
.my-vault-wrapper .vi-thumb__img {
  position: absolute !important;
  inset: 0 !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  width: 100% !important;
  height: 100% !important;
}

/* Placeholder SVG */
.my-vault-wrapper .vi-thumb__placeholder {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #d1d5db !important;
}

/* ---- Body ---- */
.my-vault-wrapper .vi-body {
  flex: 1 !important;
  padding: 18px 18px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  min-width: 0 !important;
}

/* ---- Header row: title + badge ---- */
.my-vault-wrapper .vi-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

/* Title (<p> to avoid h3 theme overrides) */
.my-vault-wrapper p.vi-title {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  flex: 1 !important;
  min-width: 0 !important;
  word-break: break-word !important;
  color: #111827 !important;
  background: transparent !important;
}

/* ============================================================
   STATUS BADGE — pill, colored by status
   ============================================================ */
.my-vault-wrapper .vi-badge {
  flex-shrink: 0 !important;
  display: inline-block !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  line-height: 1.6 !important;
  white-space: nowrap !important;
  margin: 0 !important;
  border: none !important;
  /* color set per-status below */
}
.my-vault-wrapper .vi-badge--registered {
  background-color: #6b7280 !important;
  color: #ffffff !important;
}
.my-vault-wrapper .vi-badge--stored {
  background-color: #16a34a !important;
  color: #ffffff !important;
}
.my-vault-wrapper .vi-badge--pending {
  background-color: #d97706 !important;
  color: #ffffff !important;
}
.my-vault-wrapper .vi-badge--withdrawn {
  background-color: #475569 !important;
  color: #ffffff !important;
}
.my-vault-wrapper .vi-badge--expired {
  background-color: #dc2626 !important;
  color: #ffffff !important;
}
/* vault_request ACF statuses (used in Withdrawal History) */
.my-vault-wrapper .vi-badge--requested {
  background-color: #2563eb !important;
  color: #ffffff !important;
}
.my-vault-wrapper .vi-badge--approved {
  background-color: #16a34a !important;
  color: #ffffff !important;
}
.my-vault-wrapper .vi-badge--completed {
  background-color: #15803d !important;
  color: #ffffff !important;
}
.my-vault-wrapper .vi-badge--cancelled {
  background-color: #6b7280 !important;
  color: #ffffff !important;
}
.my-vault-wrapper .vi-badge--failed {
  background-color: #dc2626 !important;
  color: #ffffff !important;
}

/* ---- Offline / Online type tag ---- */
.my-vault-wrapper .vi-type {
  display: inline-block !important;
  padding: 2px 10px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  background-color: #e5e7eb !important;
  color: #4b5563 !important;
  width: fit-content !important;
  margin: 0 !important;
  line-height: 1.6 !important;
  border: none !important;
}
.my-vault-wrapper .vi-type--online {
  background-color: #dbeafe !important;
  color: #1d4ed8 !important;
}

/* ============================================================
   META ROWS — div children for reliable flex layout
   ============================================================ */
.my-vault-wrapper .vault-items[data-view="view-2"] .vi-meta {
  column-gap: 5px !important;
}

.my-vault-wrapper .vi-meta {
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-wrap: wrap;
  row-gap: 4px !important;
  column-gap: 20px !important;
}
.my-vault-wrapper .vi-meta__row {
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 8px !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  padding: 0 !important;
}


.my-vault-wrapper .vault-items[data-view="view-2"] .vi-meta__label {
    flex: 0 0 85px !important;
    max-width: 85px !important;
    min-width: 85px !important;
}

.my-vault-wrapper .vi-meta__label {
  flex: 0 0 130px !important;
  max-width: 130px !important;
  min-width: 130px !important;
  color: #9ca3af !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
.my-vault-wrapper .vi-meta__value {
  flex: 1 !important;
  color: #1f2937 !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* ============================================================
   ACTION BUTTONS
   ============================================================ */
.my-vault-wrapper .vi-actions {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
  margin-top: auto !important;
  padding-top: 12px !important;
  border-top: 1px solid #f3f4f6 !important;
}

/* "Pending Approval" label for registered items */
.my-vault-wrapper .vi-pending-label {
  display: inline-block !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #9ca3af !important;
  font-style: italic !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Base button */
.my-vault-wrapper .vi-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 18px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  margin: 0 !important;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s !important;
  box-shadow: none !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Primary: dark fill */
.my-vault-wrapper .vi-btn--primary {
  background-color: #111827 !important;
  color: #ffffff !important;
  border: 1.5px solid #111827 !important;
}
.my-vault-wrapper .vi-btn--primary:hover,
.my-vault-wrapper .vi-btn--primary:focus {
  background-color: #374151 !important;
  border-color: #374151 !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

/* Outline: transparent with border */
.my-vault-wrapper .vi-btn--outline {
  background-color: transparent !important;
  color: #374151 !important;
  border: 1.5px solid #d1d5db !important;
}
.my-vault-wrapper .vi-btn--outline:hover,
.my-vault-wrapper .vi-btn--outline:focus {
  background-color: #f9fafb !important;
  border-color: #9ca3af !important;
  color: #111827 !important;
  text-decoration: none !important;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 768px) {
  .my-vault-wrapper .vault-items[data-view="view-3"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 560px) {
  .my-vault-wrapper .vault-items[data-view="view-2"],
  .my-vault-wrapper .vault-items[data-view="view-3"] {
    grid-template-columns: 1fr !important;
  }
  .my-vault-wrapper .vi-thumb {
    flex: 0 0 110px !important;
    width: 110px !important;
    min-height: 160px !important;
  }
  .my-vault-wrapper .vi-meta__label {
    flex: 0 0 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
  }
}

/* ============================================================
   Modals (withdrawal request + view-only)
   ============================================================ */
.vault-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 9998;
}
.vault-modal-overlay.is-open {
  display: block;
}
.vault-modal {
  display: none;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}
.vault-modal.is-open {
  display: block;
}
.vault-modal__inner {
  padding: 28px 28px 24px;
  position: relative;
}
.vault-modal__close {
  position: absolute;
  top: 16px;
  right: 20px;
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: #6b7280;
  line-height: 1;
  padding: 4px;
}
.vault-modal__close:hover {
  color: #111827;
}
.vault-modal__inner h3 {
  margin: 0 36px 20px 0;
  font-size: 18px;
  font-weight: 700;
}

/* ---- View modal inner elements (vvm = vault-view-modal) ---- */

/* Loading / error / empty states */
.vvm-loading,
.vvm-error,
.vvm-empty p {
  font-size: 14px;
  color: #6b7280;
  text-align: center;
  padding: 24px 0;
  margin: 0;
}
.vvm-error {
  color: #dc2626;
}
.vvm-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 28px 0;
  color: #9ca3af;
}
.vvm-empty svg {
  opacity: 0.4;
}

/* Status badge inside the view table */
.vvm-badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.6;
  color: #fff;
}
.vvm-badge--stored,
.vvm-badge--completed    { background: #16a34a; }
.vvm-badge--pending,
.vvm-badge--pending-withdrawal { background: #d97706; }
.vvm-badge--requested    { background: #2563eb; }
.vvm-badge--withdrawn    { background: #475569; }
.vvm-badge--expired      { background: #dc2626; }
.vvm-badge--registered   { background: #6b7280; }

/* Main table */
.vvm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.vvm-table th,
.vvm-table td {
  padding: 9px 10px;
  border-bottom: 1px solid #f3f4f6;
  text-align: left;
  vertical-align: middle;
}
.vvm-table th {
  width: 40%;
  color: #9ca3af;
  font-weight: 400;
  white-space: nowrap;
}
.vvm-table td {
  color: #111827;
  font-weight: 500;
  word-break: break-word;
}
/* Section header row */
.vvm-section-row td {
  padding: 14px 10px 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6b7280;
  border-bottom: 2px solid #e5e7eb;
  background: transparent;
}

/* Legacy selector kept for backward compat */
.vault-view-content table { width: 100%; border-collapse: collapse; font-size: 14px; }
.vault-view-content th,
.vault-view-content td { padding: 8px 10px; border-bottom: 1px solid #f3f4f6; text-align: left; vertical-align: top; }
.vault-view-content th { width: 38%; color: #6b7280; font-weight: 500; }
.vault-view-content td { color: #111827; font-weight: 500; }

/* ---- Mini-history popup: list of vault_requests per vault_item ---- */
.vvm-hist-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.vvm-hist-item {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
}
.vvm-hist-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}
.vvm-hist-date {
  font-size: 12px;
  color: #6b7280;
  font-weight: 500;
}
.vvm-hist-item .vvm-table {
  margin: 0;
  border-radius: 0;
}
.vvm-hist-item .vvm-table th,
.vvm-hist-item .vvm-table td {
  border-bottom: 1px solid #f3f4f6;
}
.vvm-hist-item .vvm-table tr:last-child th,
.vvm-hist-item .vvm-table tr:last-child td {
  border-bottom: none;
}

/* Prevent body scroll when modal open */
body.lb-modal-open {
  overflow: hidden;
}

/* ============================================================
   Compat (legacy classes kept for other shortcodes)
   ============================================================ */
.vault-item-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  background: #e5e7eb;
  color: #374151;
  margin-left: 6px;
}