/* Pro Vibe Life Portal — Django-specific helpers
   Complements public/PVL/styles.css */

/* Status pill color mapping */
.pill.status-DRAFT,
.pill.status-PENDING,
.pill.status-RELEASED_TO_WAREHOUSE,
.pill.status-PICKING { @apply .pill.ink; }

.pill.status-SUBMITTED,
.pill.status-UNDER_REVIEW,
.pill.status-APPROVED,
.pill.status-OPEN,
.pill.status-SENT { @apply .pill.gold; }

.pill.status-APPROVED,
.pill.status-SHIPPED,
.pill.status-PAID,
.pill.status-PICKING,
.pill.status-PACKED { @apply .pill.green; }

.pill.status-ON_HOLD,
.pill.status-PACKED,
.pill.status-PARTIALLY_SHIPPED,
.pill.status-PARTIALLY_PAID { @apply .pill.amber; }

.pill.status-CANCELLED,
.pill.status-VOID,
.pill.status-OVERDUE { @apply .pill.red; }

/* Flash messages map to PVL .note classes */
.alert-info { @apply .note.gold; }
.alert-warning { @apply .note.amber; }
.alert-danger { @apply .note.red; }
.alert-secondary { @apply .note.gray; }

.text-danger { color: var(--pvl-danger); }
.text-secondary { color: var(--pvl-text-mute); }
.text-muted { color: var(--pvl-text-soft); }

/* Logo sizing */
.brand-logo { height: 28px; width: auto; }
.login-logo { height: 72px; width: auto; max-width: 100%; }

/* Forms — custom field wrappers */
.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.form-field label { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--pvl-text-mute); }
.form-field small { font-size: 12px; color: var(--pvl-text-mute); }
.form-field .invalid-feedback { color: var(--pvl-danger); font-size: 12px; display: block; margin-top: 2px; }

/* Grid utilities for common layouts */
.grid-wrap { display: grid; gap: 14px; }

/* Mobile "More" sheet — slides up above tabbar */
.more-sheet { display: none; }

@media (max-width: 899px) {
  /* Hide columns not needed on small screens */
  .d-mobile-none { display: none !important; }

  /* Summary/CTA panel: drop sticky, float to top of stacked grid */
  .summary { position: static !important; }
  .grid-2 > .summary,
  .grid-2 > .summary-col { order: -1; }

  /* Login art panel: hide, show form immediately */
  .login-art { display: none !important; }

  .more-sheet {
    display: none;
    position: fixed;
    bottom: 68px;
    left: 0; right: 0;
    background: var(--pvl-ink);
    border-top: 1px solid #2a2a30;
    z-index: 29;
    padding: 14px 12px;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
  .more-sheet.open { display: grid; }
  .more-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 6px;
    border-radius: 10px;
    color: #9a9485;
    text-decoration: none;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: background 0.15s, color 0.15s;
  }
  .more-item .ico { width: 22px; height: 22px; }
  .more-item:hover { background: #1d1d22; color: #e8e3d4; }
  .more-item.active { color: #c9a04a; }
  #moreBtn {
    background: none;
    border: none;
    font-family: inherit;
  }
}

/* 3-column grid: collapse to single column on small phones */
@media (max-width: 600px) {
  .grid-3 { grid-template-columns: 1fr !important; }
}

/* Print styles for pick ticket */
@media print {
  body { background: white; }
  .navbar, .topbar, .tabbar, .sidebar, nav, form { display: none !important; }
  .page { padding: 0; max-width: 100%; margin: 0; }
  table { font-size: 12px; }
  .btn { display: none; }
}

/* Avatar initials */
.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pvl-gold), var(--pvl-gold-deep));
  display: grid;
  place-items: center;
  color: #1a1408;
  font-weight: 700;
  font-size: 13px;
  flex: 0 0 auto;
}

/* Utility classes */
.fw-semibold { font-weight: 600; }
.fw-bold { font-weight: 700; }
.d-none { display: none; }
.d-flex { display: flex; }
.gap-2 { gap: 12px; }
.gap-3 { gap: 16px; }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: 14px; }
.mb-3 { margin-bottom: 22px; }
.mb-4 { margin-bottom: 28px; }
.mt-2 { margin-top: 14px; }
.mt-3 { margin-top: 22px; }
.mt-4 { margin-top: 28px; }
.p-3 { padding: 22px; }
.py-2 { padding-top: 14px; padding-bottom: 14px; }